release getcanary/[email protected]

fastrepl · Oct 29, 2024 · 1ba619d · 1ba619d
1 parent 1caf893
commit 1ba619d
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
     `;