@sekiui/elements 0.0.78 → 0.0.81

package/dist/collection/components/drawer/seki-drawer-content.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-drawer-content: Container for drawer content with gesture support
  *
@@ -215,12 +216,18 @@ export class SekiDrawerContent {
             return `translateY(${sign * this.dragOffset}px)`;
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const transformStyle = this.getTransformStyle();
-        return (h(Host, { key: '5bb7d5d106bee2412a1973581ee48c7f1e12dfd4', "data-direction": this.direction }, h("div", { key: 'ed450481ec4a48630f9f7ae0c0976c891d6bec09', ref: (el) => (this.contentEl = el !== null && el !== void 0 ? el : null), role: "dialog", "aria-modal": "true", "aria-label": this.ariaLabel, class: {
+        return (h(Host, { key: '8121a1de27792db4109849cff86411f418822ab8', "data-direction": this.direction }, h("div", { key: '04929f1e62085ecb7c26272438adf21533bbb76f', ref: (el) => (this.contentEl = el !== null && el !== void 0 ? el : null), role: "dialog", "aria-modal": "true", "aria-label": this.ariaLabel, class: {
                 'seki-drawer-content': true,
                 [`seki-drawer-content--${this.direction}`]: true,
-            }, style: transformStyle ? { transform: transformStyle } : {}, part: "content", onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }, this.shouldShowHandle && (h("div", { key: '36a530bf169fd1dd8a54b3608b31d0bacfe92cef', class: "seki-drawer-handle", part: "handle" })), h("button", { key: '63970cac2aa8c085e95378d9b8b8ebe8d32224ea', type: "button", class: "seki-drawer-close-button", "aria-label": "Close", onClick: this.handleCloseClick }, h("svg", { key: '43128bac99462f9de58726475b599a8caad72435', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '74a1a2e1c79542d6a9a2994618d4617133e1b6b4', d: "M18 6 6 18" }), h("path", { key: 'ad56b44c97578d7eb2419aa2091bc1a85cb8296e', d: "m6 6 12 12" }))), h("div", { key: '57dc9d1d51eb39725ed42fdd2f5fcc85b359ba5f', class: "seki-drawer-body" }, h("slot", { key: '217d5953991c77642309ed6ac0f5efb37dc951ef' })))));
+            }, style: transformStyle ? { transform: transformStyle } : {}, part: "content", onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }, this.shouldShowHandle && (h("div", { key: '2b43007981ebac4683e52192c737efcb947565b6', class: "seki-drawer-handle", part: "handle" })), h("button", { key: 'a77456793711febb37de8d87fb28bcdbf5d9e2ab', type: "button", class: "seki-drawer-close-button", "aria-label": "Close", onClick: this.handleCloseClick }, h("svg", { key: 'd1881a02e5a2afb468b169925677a5a3153d6bc0', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: 'f91f09fe3dd82daca570617bef07f3431d32fa71', d: "M18 6 6 18" }), h("path", { key: '3c7b46b6c6df311120dc9d223268d9e180c2edb9', d: "m6 6 12 12" }))), h("div", { key: '732fd93fc161b7634de4605bd9e94a3f977107d7', class: "seki-drawer-body" }, h("slot", { key: 'abba675be0e573e058a01b3f8a1ebf5bfaa26c2e' })))));
     }
     static get is() { return "seki-drawer-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/drawer/seki-drawer.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-drawer: Mobile-friendly drawer component with swipe gestures
  *
@@ -81,11 +82,17 @@ export class SekiDrawer {
             this.close();
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("div", { key: '55d88941103fe6d3edcab28d48c253c433776f22', class: {
+        return (h("div", { key: '0ac8e2b41e677c753c58056d46794cca4ce4a869', class: {
                 'seki-drawer': true,
                 'seki-drawer--open': this.isOpen,
-            }, "data-snap-point": this.currentSnapPoint, part: "drawer" }, h("slot", { key: '73bb15beb9fb75d70d8ed9e321cfda810ec25c84' }), this.isOpen && (h("div", { key: 'af48128c4912ef328da69c7690d957eb2bc4925f', class: "seki-drawer-overlay", part: "overlay", onClick: () => this.close() }))));
+            }, "data-snap-point": this.currentSnapPoint, part: "drawer" }, h("slot", { key: '63d5ca253a823a3d67eef287003312cc00df3bf6' }), this.isOpen && (h("div", { key: '807eefdc1ecf76da34a99349b0dfca6a58662951', class: "seki-drawer-overlay", part: "overlay", onClick: () => this.close() }))));
     }
     static get is() { return "seki-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -229,6 +236,7 @@ export class SekiDrawer {
             }
         };
     }
+    static get elementRef() { return "el"; }
     static get listeners() {
         return [{
                 "name": "triggerClick",

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-checkbox.css

@@ -808,12 +808,12 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .dropdown-menu-checkbox {
+:host([data-theme='dark']) .dropdown-menu-checkbox {
   color: var(--seki-foreground, hsl(0 0% 98%));
 }
 
-:host-context([data-theme="dark"]) .dropdown-menu-checkbox:hover:not(.dropdown-menu-checkbox--disabled),
-:host-context([data-theme="dark"]) .dropdown-menu-checkbox:focus:not(.dropdown-menu-checkbox--disabled) {
+:host([data-theme='dark']) .dropdown-menu-checkbox:hover:not(.dropdown-menu-checkbox--disabled),
+:host([data-theme='dark']) .dropdown-menu-checkbox:focus:not(.dropdown-menu-checkbox--disabled) {
   background-color: var(--seki-accent, hsl(240 3.7% 15.9%));
   color: var(--seki-accent-foreground, hsl(0 0% 98%));
 }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-checkbox.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dropdown Menu checkbox item
  *
@@ -40,11 +41,17 @@ export class SekiDropdownMenuCheckbox {
     componentWillLoad() {
         this._checked = this.checked;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '7f6175f359501c53047e2332effa50e6a63e136f' }, h("div", { key: '41dd5790bf6eb2df9f45ec5a54a05beab34790eb', part: "item", role: "menuitemcheckbox", class: {
+        return (h(Host, { key: 'c55f5b18816780daed53d344409010ebd3031a3e' }, h("div", { key: '45adaf6c6ac8f1adf3625d68342680764dd672a4', part: "item", role: "menuitemcheckbox", class: {
                 'dropdown-menu-checkbox': true,
                 'dropdown-menu-checkbox--disabled': this.disabled,
-            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'bbc2e7dd4b3a45ced48828de37e3c90099b9524f', part: "indicator", class: "dropdown-menu-checkbox__indicator" }, this._checked && (h("svg", { key: 'd4e0f133f5a364d01dc833b7d4043d395f33f858', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'e50c913995182c5366f61e099f4e0810a5eece1c', points: "20 6 9 17 4 12" })))), h("slot", { key: '2629464034fd028ec8008e27a8c4432de6060426' }))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '9dfdaa26e8c702db18bef7dc4d4a66a32db5231a', part: "indicator", class: "dropdown-menu-checkbox__indicator" }, this._checked && (h("svg", { key: '1e889a8136f5f26068d0083e983fbcf09f590b6e', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '8e4492a33b64c02d5f1d9d59c54e3f0b4a88bad5', points: "20 6 9 17 4 12" })))), h("slot", { key: 'f5011ca2485a924feee421ee6eead27a6ae706a5' }))));
     }
     static get is() { return "seki-dropdown-menu-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -125,6 +132,7 @@ export class SekiDropdownMenuCheckbox {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "checked",

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-content.css

@@ -791,7 +791,7 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .dropdown-menu-content {
+:host([data-theme='dark']) .dropdown-menu-content {
   background-color: var(--seki-background, hsl(240 10% 3.9%));
   border-color: var(--seki-border, hsl(240 3.7% 15.9%));
 }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-content.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dropdown Menu content panel
  *
@@ -161,6 +162,12 @@ export class SekiDropdownMenuContent {
         top = Math.max(margin, Math.min(top, viewport.height - contentRect.height - margin));
         this._position = { top: `${top}px`, left: `${left}px` };
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         if (!this._isOpen) {
             return null;

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-item.css

@@ -795,12 +795,12 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .dropdown-menu-item {
+:host([data-theme='dark']) .dropdown-menu-item {
   color: var(--seki-foreground, hsl(0 0% 98%));
 }
 
-:host-context([data-theme="dark"]) .dropdown-menu-item:hover:not(.dropdown-menu-item--disabled),
-:host-context([data-theme="dark"]) .dropdown-menu-item:focus:not(.dropdown-menu-item--disabled) {
+:host([data-theme='dark']) .dropdown-menu-item:hover:not(.dropdown-menu-item--disabled),
+:host([data-theme='dark']) .dropdown-menu-item:focus:not(.dropdown-menu-item--disabled) {
   background-color: var(--seki-accent, hsl(240 3.7% 15.9%));
   color: var(--seki-accent-foreground, hsl(0 0% 98%));
 }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-item.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dropdown Menu item
  *
@@ -47,12 +48,18 @@ export class SekiDropdownMenuItem {
         }
         return null;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '22c88c5e99d02c35ef78c5af89b8c929ac62d36f' }, h("div", { key: 'bf6193b147b2a2d2f07f9d7e338c4f030a2b2086', part: "item", role: "menuitem", class: {
+        return (h(Host, { key: '3ae5d8006350ed0d7f580412a27a2fd7f377524a' }, h("div", { key: '5b38ebd872be296e7483f7a79299fab6a1a6489c', part: "item", role: "menuitem", class: {
                 'dropdown-menu-item': true,
                 'dropdown-menu-item--disabled': this.disabled,
                 'dropdown-menu-item--inset': this.inset,
-            }, tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: '4bece475d957a0ffb82058b11fc93346ec34068f' }))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: '5a870d8e276b3b1f0a53cdd919f245471aa18f9b' }))));
     }
     static get is() { return "seki-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-label.css

@@ -777,6 +777,6 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .dropdown-menu-label {
+:host([data-theme='dark']) .dropdown-menu-label {
   color: var(--seki-foreground, hsl(0 0% 98%));
 }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-label.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dropdown Menu label for grouping items
  *
@@ -13,11 +14,17 @@ export class SekiDropdownMenuLabel {
          */
         this.inset = false;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: 'e22643f1be065a2d672b7d31d5c8ffd7eaaa3175' }, h("div", { key: 'c6905a49f97951e5687c2358a86fe37962a1ec7c', part: "label", class: {
+        return (h(Host, { key: '4b2af7d6aa05089b855bd08e8289c7cc55809a69' }, h("div", { key: 'edb9e78dcb101b44fa3b2bdd80ba45f6972b1740', part: "label", class: {
                 'dropdown-menu-label': true,
                 'dropdown-menu-label--inset': this.inset,
-            } }, h("slot", { key: '71bce7888bec1c32abf56e69c815cf58046bfc5d' }))));
+            } }, h("slot", { key: '646075e268af159f939152d91bc0ff8cda9dc2d0' }))));
     }
     static get is() { return "seki-dropdown-menu-label"; }
     static get encapsulation() { return "shadow"; }
@@ -55,4 +62,5 @@ export class SekiDropdownMenuLabel {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-radio-group.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dropdown Menu radio group container
  *
@@ -30,8 +31,14 @@ export class SekiDropdownMenuRadioGroup {
         event.stopPropagation();
         this._radioGroupContext.setValue(event.detail);
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '792c6509c5ea568e4d800e085cb8c72cb8e69330' }, h("div", { key: 'b293687cf4412645a38af9119f75811806db19fe', part: "group", role: "group", class: "dropdown-menu-radio-group" }, h("slot", { key: 'ba11ccb2a9f6257eda19289219c6200bec36f924' }))));
+        return (h(Host, { key: '6cf9d6af934e70495d15798dd62715ef700b246d' }, h("div", { key: 'fa0b1560a6a38488da897ce17628461ca5bbfd67', part: "group", role: "group", class: "dropdown-menu-radio-group" }, h("slot", { key: '4c441494b3a5ae579061ee1005182b64831012d3' }))));
     }
     static get is() { return "seki-dropdown-menu-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -91,6 +98,7 @@ export class SekiDropdownMenuRadioGroup {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "value",

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-radio.css

@@ -808,12 +808,12 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .dropdown-menu-radio {
+:host([data-theme='dark']) .dropdown-menu-radio {
   color: var(--seki-foreground, hsl(0 0% 98%));
 }
 
-:host-context([data-theme="dark"]) .dropdown-menu-radio:hover:not(.dropdown-menu-radio--disabled),
-:host-context([data-theme="dark"]) .dropdown-menu-radio:focus:not(.dropdown-menu-radio--disabled) {
+:host([data-theme='dark']) .dropdown-menu-radio:hover:not(.dropdown-menu-radio--disabled),
+:host([data-theme='dark']) .dropdown-menu-radio:focus:not(.dropdown-menu-radio--disabled) {
   background-color: var(--seki-accent, hsl(240 3.7% 15.9%));
   color: var(--seki-accent-foreground, hsl(0 0% 98%));
 }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-radio.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dropdown Menu radio item
  *
@@ -46,11 +47,17 @@ export class SekiDropdownMenuRadio {
             });
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '9fdb91fd28fd7a3a89bf525c31e76bbca3ddf5e7' }, h("div", { key: 'e60c3b345bac9f4729243134a74055ac1039e9f2', part: "item", role: "menuitemradio", class: {
+        return (h(Host, { key: 'df93ac43775928cd5a5d7504c13e1048e69b30c2' }, h("div", { key: '3df52c47bb088cd5e54dcdf0ca5b5541c48351b9', part: "item", role: "menuitemradio", class: {
                 'dropdown-menu-radio': true,
                 'dropdown-menu-radio--disabled': this.disabled,
-            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '1c825795779e81c06a3f3fee06673d47cde6d269', part: "indicator", class: "dropdown-menu-radio__indicator" }, this._isChecked && (h("svg", { key: '780ddb464671a8bc038ae760f2120554246114bd', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: '0f62ef4443d90600dbb65a9ae0d2d28ea3c72f12', cx: "12", cy: "12", r: "4" })))), h("slot", { key: '2c3242b770473033a30fe40e772348695725e93f' }))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '99d77c45832bf6ca48bc1c720a24b5b87431b49c', part: "indicator", class: "dropdown-menu-radio__indicator" }, this._isChecked && (h("svg", { key: '7cd44ae489f5ed6d61f011aeb2badc11e5b6fa73', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: 'fc0b11f4898ceb0df49e236090537e0251f65f62', cx: "12", cy: "12", r: "4" })))), h("slot", { key: 'd5b8304c7a347dc61d2b818a61d2cfdd48efb781' }))));
     }
     static get is() { return "seki-dropdown-menu-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-separator.css

@@ -770,6 +770,6 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .dropdown-menu-separator {
+:host([data-theme='dark']) .dropdown-menu-separator {
   background-color: var(--seki-border, hsl(240 3.7% 15.9%));
 }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-separator.js

@@ -1,12 +1,19 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dropdown Menu separator/divider
  *
  * @part separator - The separator line
  */
 export class SekiDropdownMenuSeparator {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '9f89842fe4cbefbf867af7740497dfb9ddba27e6' }, h("div", { key: '3640b021c5c338aa6f7ae6bd66526f7a70cd1b97', part: "separator", role: "separator", class: "dropdown-menu-separator" })));
+        return (h(Host, { key: '309649b7bc9276ebc3d738c5e8d011675e309456' }, h("div", { key: '08005914449bb03de1714b4c63aaa81882fdcf70', part: "separator", role: "separator", class: "dropdown-menu-separator" })));
     }
     static get is() { return "seki-dropdown-menu-separator"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiDropdownMenuSeparator {
             "$": ["seki-dropdown-menu-separator.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-shortcut.css

@@ -774,6 +774,6 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .dropdown-menu-shortcut {
+:host([data-theme='dark']) .dropdown-menu-shortcut {
   color: var(--seki-muted-foreground, hsl(240 5% 64.9%));
 }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-shortcut.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dropdown Menu keyboard shortcut display
  *
@@ -7,8 +8,14 @@ import { h, Host } from "@stencil/core";
  * @part shortcut - The shortcut container
  */
 export class SekiDropdownMenuShortcut {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: 'e1c4996a9737f77eb3e21af8680cb12354d5217a' }, h("span", { key: '4a090b8cb45c549a93689c529a07423552c55dd1', part: "shortcut", class: "dropdown-menu-shortcut" }, h("slot", { key: 'c56f6d1b39a38f5ec3b11d87e26618b1077dab20' }))));
+        return (h(Host, { key: '581030fe2b4f11ce7c84c6ee48da6d136ed719bb' }, h("span", { key: '2e757fa61cf1e6cf6640de6c42735802692026d8', part: "shortcut", class: "dropdown-menu-shortcut" }, h("slot", { key: '7d1938b25cac78a07abe01b8d6bc63110ecebaa6' }))));
     }
     static get is() { return "seki-dropdown-menu-shortcut"; }
     static get encapsulation() { return "shadow"; }
@@ -22,4 +29,5 @@ export class SekiDropdownMenuShortcut {
             "$": ["seki-dropdown-menu-shortcut.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-sub.css

@@ -833,17 +833,17 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .dropdown-menu-sub-trigger {
+:host([data-theme='dark']) .dropdown-menu-sub-trigger {
   color: var(--seki-foreground, hsl(0 0% 98%));
 }
 
-:host-context([data-theme="dark"]) .dropdown-menu-sub-trigger:hover,
-:host-context([data-theme="dark"]) .dropdown-menu-sub-trigger:focus {
+:host([data-theme='dark']) .dropdown-menu-sub-trigger:hover,
+:host([data-theme='dark']) .dropdown-menu-sub-trigger:focus {
   background-color: var(--seki-accent, hsl(240 3.7% 15.9%));
   color: var(--seki-accent-foreground, hsl(0 0% 98%));
 }
 
-:host-context([data-theme="dark"]) .dropdown-menu-sub-content {
+:host([data-theme='dark']) .dropdown-menu-sub-content {
   background-color: var(--seki-background, hsl(240 10% 3.9%));
   border-color: var(--seki-border, hsl(240 3.7% 15.9%));
 }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-sub.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dropdown Menu Sub - A submenu component for nested dropdown menus
  *
@@ -33,7 +34,11 @@ export class SekiDropdownMenuSub {
             }, this.closeDelay);
         };
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         this.clearTimers();
     }
     handleKeyDown(event) {
@@ -135,10 +140,10 @@ export class SekiDropdownMenuSub {
         }
     }
     render() {
-        return (h(Host, { key: 'd2eb8139d6029945a894984d7e74985662f7e508', "data-state": this._isOpen ? 'open' : 'closed', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'a0e9c9bb58668597b5a7e82d19316d736ed10fee', ref: (el) => (this.triggerRef = el), part: "trigger", class: "dropdown-menu-sub-trigger", role: "menuitem", "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false', tabindex: "0" }, h("slot", { key: '7c6810fbc415a68e3490f789ee54297abeef4999', name: "trigger" })), this._isOpen && (h("div", { key: '12652a67140609997d2c921989fc6267a47480ae', ref: (el) => (this.contentRef = el), part: "content", class: {
+        return (h(Host, { key: '2c1af312020aa971394d195d7fab5718c599f208', "data-state": this._isOpen ? 'open' : 'closed', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'f9da9660a599db2f65d616407b3f5b7c7e092853', ref: (el) => (this.triggerRef = el), part: "trigger", class: "dropdown-menu-sub-trigger", role: "menuitem", "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false', tabindex: "0" }, h("slot", { key: '0221026fb1057275073783635acc2484202e57ae', name: "trigger" })), this._isOpen && (h("div", { key: '3ccaec4a55af93797527aaa2f8518f9439559c01', ref: (el) => (this.contentRef = el), part: "content", class: {
                 'dropdown-menu-sub-content': true,
                 'dropdown-menu-sub-content--left': this._openToLeft,
-            }, role: "menu" }, h("slot", { key: '74d13be7e57182bef8074dbd941f4ec63c965b73', name: "content" })))));
+            }, role: "menu" }, h("slot", { key: '7eebd2c0413c67e3b106857fe3cdc3e68852b1df', name: "content" })))));
     }
     static get is() { return "seki-dropdown-menu-sub"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-trigger.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dropdown Menu trigger button
  *
@@ -29,8 +30,14 @@ export class SekiDropdownMenuTrigger {
         event.stopPropagation();
         this.triggerClick.emit();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: 'f1e44ae2e125cc4e4cdf60a2eebdfc81be17e01f', "data-state": this._isOpen ? 'open' : 'closed' }, h("span", { key: '2e72f1671eb1d51769212cd3fc0ec3eda9f434ed', part: "trigger", class: "dropdown-menu-trigger", "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false' }, h("slot", { key: '53ac6eaa9583b44ac12514ea4b89ca0a6db813db' }))));
+        return (h(Host, { key: '75d46109abf0d64e0e47c87cc08c1cbc3f30527c', "data-state": this._isOpen ? 'open' : 'closed' }, h("span", { key: '65c160dc74af255f12f1fda5143738b6a469dbe8', part: "trigger", class: "dropdown-menu-trigger", "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false' }, h("slot", { key: '96cb2d00c1cbb008aa2d86423af1e2f78d82847c' }))));
     }
     static get is() { return "seki-dropdown-menu-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dropdown Menu component - context menu with items
  *
@@ -130,11 +131,15 @@ export class SekiDropdownMenu {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.el._dropdownMenuContext = this.getContext();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         this.removeClickOutside();
     }
     render() {
-        return (h(Host, { key: '18774651819607e7da51417c02558931b500e21d', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '52088f8d6fe37a8e820bb9d8f2548c601b8a92b3', part: "dropdown-menu", class: "dropdown-menu" }, h("slot", { key: 'f90c535ce0d12bf15f3fb8077d05cebc8361a230' }))));
+        return (h(Host, { key: '767d46361c1622b7d9ee234882f20b6a2fc2b1d0', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '8f7e87616a6a73a78273b3bb5600f8937e894bb1', part: "dropdown-menu", class: "dropdown-menu" }, h("slot", { key: '75e65c5316c6376fdf20f8cb7d68fc740494cc53' }))));
     }
     static get is() { return "seki-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/empty/seki-empty.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-empty: Empty state placeholder component
  *
@@ -14,8 +15,14 @@ import { Host, h } from "@stencil/core";
  * </seki-empty>
  */
 export class SekiEmpty {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: 'ac527c0af3cae92a9a033f4d4491438e28d7b22e' }, h("div", { key: '47cefa391634462168bde2fb3a309ca37f3e6d9f', class: "seki-empty", part: "empty", role: "status" }, h("div", { key: '74b0f3a896a75474f53df057eae1d70655a08dec', class: "seki-empty__icon", part: "icon" }, h("slot", { key: 'c8dd81e2e8b9270d1a6d6abcfface89c8be5fb4e', name: "icon" })), this.heading && (h("h3", { key: '9e13bd1ad787629f37774bd8268e1c61ee66778a', class: "seki-empty__title", part: "title" }, this.heading)), this.description && (h("p", { key: '17077a7d12141a945bb83e87f96b744f49ad815f', class: "seki-empty__description", part: "description" }, this.description)), h("div", { key: '9b60cea355987e41bb68be9d7054ebd02a75cedf', class: "seki-empty__content", part: "content" }, h("slot", { key: '068f96672c6ab0bdbd26c829ff4fca05711ef418' })), h("div", { key: '4c2c717593e1957a7f3613d49a5a8ff5dbb72efd', class: "seki-empty__action", part: "action" }, h("slot", { key: 'b3979f89cf8b7d47ee663946fd52efd85bc29f17', name: "action" })))));
+        return (h(Host, { key: 'b03ca666a254e0ab53e567f872a77daca4fadecb' }, h("div", { key: '385046216a35780b11111f891b65dd448aa743a7', class: "seki-empty", part: "empty", role: "status" }, h("div", { key: 'f689df67dd9e1d3f196f69abf42f0cfe66e23598', class: "seki-empty__icon", part: "icon" }, h("slot", { key: 'abc157e7720ef997d5c01c26f060f33c44707c34', name: "icon" })), this.heading && (h("h3", { key: '1adb89acc687f21d0990eee69289e4319c19a8b5', class: "seki-empty__title", part: "title" }, this.heading)), this.description && (h("p", { key: '4f21df2c602ac666a6e3a6ce9e724bedf61bb288', class: "seki-empty__description", part: "description" }, this.description)), h("div", { key: 'f06db983b6ff13a72bd6e34e1b0c6517106ba4f7', class: "seki-empty__content", part: "content" }, h("slot", { key: '73ec3d2c15a2d9c86c079939ec6ce4941664196a' })), h("div", { key: '08cda59869ce4dadc0aa6aaae2ba5a6a010fe321', class: "seki-empty__action", part: "action" }, h("slot", { key: 'e4ddd4a03e85d1a392cd759fa22e1af694e71c38', name: "action" })))));
     }
     static get is() { return "seki-empty"; }
     static get encapsulation() { return "shadow"; }
@@ -71,4 +78,5 @@ export class SekiEmpty {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/field/seki-field.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiField {
     constructor() {
         /**
@@ -30,9 +31,15 @@ export class SekiField {
         });
         return interactiveElements.length > 1;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const hasMultiple = this.hasMultipleControls();
-        return (h(Host, { key: '70eb9cf6169f122ab19b1fc610ccf5a1a157eec0', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: '13e4c8fbe8a85a456b78fa60a00093d12e9098b8', class: "field" }, h("div", { key: 'd730efeab073b64df6e56e38a8c9a0c0a15acebe', class: "field-label" }, h("slot", { key: '308bd1b765bc4cd1cdcec449ed96332b439601ca', name: "label" })), h("div", { key: 'a3aaa062b3073fc06d34bae6a59dd5e49dbbbcef', class: "field-control" }, h("slot", { key: '817e0b1fd2e87f78cf4d24f7addc421e83e7d491' })), h("div", { key: '78e2f35468cba1527e65b2dfd0fa7914d25d72db', class: "field-description" }, h("slot", { key: '5a349650821988399b795254643a655cd278a02b', name: "description" })), h("div", { key: '970ee1805527fc52ecf5008f9871f66f209b6116', class: "field-error" }, h("slot", { key: 'e280be42810c0830cbebc85472744c7615d342fd', name: "error" })))));
+        return (h(Host, { key: '4cffb32c1a3db72ea2cce5c77c81ede90f7e5697', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: 'ad0e7ea873abdcfbfbb6b361b78899cf683d78a7', class: "field" }, h("div", { key: '9706614e5d5b2ff5a760e50d5091a00474caf856', class: "field-label" }, h("slot", { key: '33d6163597757399eb83b9e908b202dbe03c10d0', name: "label" })), h("div", { key: 'f329d33d0f7cd6ad638737032b677667ed19f373', class: "field-control" }, h("slot", { key: '6362b164d2d00dcc1fb8494f5519490547b06cef' })), h("div", { key: 'f8d6fc9db027dea7800def59a77ab3cbb2ed85dd', class: "field-description" }, h("slot", { key: '9d2b537f656d340ec622ac7dca5c6470451aa36b', name: "description" })), h("div", { key: '1541c2f8be9ff8a30136aa81c0cbf600b505b54b', class: "field-error" }, h("slot", { key: '24999d1d99c206be36f9ed8095fa3dab84086921', name: "error" })))));
     }
     static get is() { return "seki-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-description/seki-field-description.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Generate a unique ID for the component
  */
@@ -28,8 +29,14 @@ export class SekiFieldDescription {
     async getId() {
         return this.componentId;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("div", { key: 'f6cb4722b423b0f0199112e5e93ffe28c1e93b95', id: this.componentId, class: "description" }, h("slot", { key: '23230cbad9b062e0bc8c35ebffb3d47a42cf5777' })));
+        return (h("div", { key: '330c5cd4338dfe421493fda832c3c5332665ff04', id: this.componentId, class: "description" }, h("slot", { key: '370edccd1c9f8d44e43b575d45bdaf3d39bc0a42' })));
     }
     static get is() { return "seki-field-description"; }
     static get encapsulation() { return "shadow"; }
@@ -92,4 +99,5 @@ export class SekiFieldDescription {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/field-error/seki-field-error.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Generate a unique ID for the component
  */
@@ -55,9 +56,15 @@ export class SekiFieldError {
     async setVisible(visible) {
         this._visible = visible;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const style = this._visible ? {} : { display: 'none' };
-        return (h("div", { key: 'd9724bb69db22e086c5ca4044b2fd67935648c0d', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: 'b7639644780b51eadec75ccdd9dbb9f987b4c19f' })));
+        return (h("div", { key: '86562ec722ded90ce43b58a7b3a61072f653617b', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: 'b21cc1fcdf422ae425a099085112ec8d2776db7c' })));
     }
     static get is() { return "seki-field-error"; }
     static get encapsulation() { return "shadow"; }
@@ -163,6 +170,7 @@ export class SekiFieldError {
             }
         };
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "visible",