From 1ba619d683af000ebef7e68c0d49793a36e69dd0 Mon Sep 17 00:00:00 2001
From: yujonglee <yujonglee.dev@gmail.com>
Date: Tue, 29 Oct 2024 09:58:57 +0900
Subject: [PATCH] release getcanary/web@1.0.12

---
 js/apps/docs/package.json                       | 2 +-
 js/packages/web/CHANGELOG.md                    | 6 ++++++
 js/packages/web/package.json                    | 2 +-
 js/packages/web/src/components/canary-dialog.ts | 8 +++++---
 js/packages/web/src/components/canary-modal.ts  | 9 ++++++++-
 5 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/js/apps/docs/package.json b/js/apps/docs/package.json
index 67a87458..c00c6226 100644
--- a/js/apps/docs/package.json
+++ b/js/apps/docs/package.json
@@ -23,7 +23,7 @@
     "vue": "^3.4.35"
   },
   "dependencies": {
-    "@getcanary/web": "^1.0.11",
+    "@getcanary/web": "^1.0.12",
     "@mux/blurup": "^0.2.3",
     "@mux/mux-player": "^3.0.0",
     "@unocss/reset": "^0.63.3",
diff --git a/js/packages/web/CHANGELOG.md b/js/packages/web/CHANGELOG.md
index 6f1362c9..e5c9e66a 100644
--- a/js/packages/web/CHANGELOG.md
+++ b/js/packages/web/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @getcanary/web
 
+## 1.0.12
+
+### Patch Changes
+
+- Add backdrop blur css variable and css part for dialog.
+
 ## 1.0.11
 
 ### Patch Changes
diff --git a/js/packages/web/package.json b/js/packages/web/package.json
index 8047e320..570026e4 100644
--- a/js/packages/web/package.json
+++ b/js/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@getcanary/web",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "license": "MIT",
   "type": "module",
   "main": "dist/components/canary-root.js",
diff --git a/js/packages/web/src/components/canary-dialog.ts b/js/packages/web/src/components/canary-dialog.ts
index 88352bdf..540d13a8 100644
--- a/js/packages/web/src/components/canary-dialog.ts
+++ b/js/packages/web/src/components/canary-dialog.ts
@@ -12,6 +12,8 @@ const NAME = "canary-dialog";
  * @cssprop --canary-color-backdrop-overlay - Backdrop overlay color
  * @cssprop --canary-transition-duration - Duration of modal transition
  * @cssprop --canary-transition-timing - Timing function of modal transition
+ * @cssprop --canary-backdrop-blur - Blur of backdrop
+ * @csspart dialog - Dialog
  * @slot - Default slot
  */
 @registerCustomElement(NAME)
@@ -31,6 +33,7 @@ export class CanaryDialog extends LitElement {
         ${ref(this.ref)}
         class=${classMap(canaryDialogClasses)}
         @click=${this.handleClick}
+        part="dialog"
       >
         <slot></slot>
       </dialog>
@@ -51,10 +54,9 @@ export class CanaryDialog extends LitElement {
     css`
       dialog::backdrop {
         background-color: var(--canary-color-backdrop-overlay);
-        -webkit-backdrop-filter: blur(0.25rem);
-        backdrop-filter: blur(0.25rem);
+        -webkit-backdrop-filter: blur(var(--canary-backdrop-blur, 0.25rem));
+        backdrop-filter: blur(var(--canary-backdrop-blur, 0.25rem));
       }
-
       dialog {
         margin: 0 auto;
         top: 60px;
diff --git a/js/packages/web/src/components/canary-modal.ts b/js/packages/web/src/components/canary-modal.ts
index 2867be56..e52d1c8e 100644
--- a/js/packages/web/src/components/canary-modal.ts
+++ b/js/packages/web/src/components/canary-modal.ts
@@ -13,6 +13,9 @@ const NAME = "canary-modal";
 
 export const MODAL_CLOSE_EVENT = "modal-close";
 
+/**
+ * @csspart dialog - Dialog
+ */
 @registerCustomElement(NAME)
 export class CanaryModal extends LitElement {
   @property({ type: Boolean }) open = false;
@@ -23,7 +26,11 @@ export class CanaryModal extends LitElement {
   render() {
     return html`
       <slot name="trigger" @click=${this._handleOpen}></slot>
-      <canary-dialog .ref=${this._ref} transition=${ifDefined(this.transition)}>
+      <canary-dialog
+        .ref=${this._ref}
+        transition=${ifDefined(this.transition)}
+        exportparts="dialog"
+      >
         <slot name="content" @modal-close=${this._handleModalClose}></slot>
       </canary-dialog>
     `;