@sekiui/elements 0.0.80 → 0.0.81

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiKbd {
     constructor() {
         /**
@@ -6,8 +7,14 @@ export class SekiKbd {
          */
         this.size = 'md';
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("kbd", { key: '4d3c67010114787137fc0a16e1813092a296acaa', class: `kbd kbd--${this.size}` }, h("slot", { key: '991cfce3db378f61a7a41e7e611980d1cf9d273b' })));
+        return (h("kbd", { key: '603f2bada1ec0f1880241771113886b5aa6a937a', class: `kbd kbd--${this.size}` }, h("slot", { key: 'dee6c34bfc342dcce1adbcbc31d5850c605dec3e' })));
     }
     static get is() { return "seki-kbd"; }
     static get encapsulation() { return "shadow"; }
@@ -45,4 +52,5 @@ export class SekiKbd {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-label: A styled label component for form elements
  *
@@ -21,12 +22,18 @@ export class SekiLabel {
          */
         this.disabled = false;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const labelProps = this.for ? { for: this.for } : {};
-        return (h("label", Object.assign({ key: '0cee40e30af673530b862666524169a136405de0', part: "label" }, labelProps, { class: {
+        return (h("label", Object.assign({ key: '87dcec5c8035433a3308005099d2b970ab63bbd2', part: "label" }, labelProps, { class: {
                 'seki-label': true,
                 'seki-label--disabled': !!this.disabled,
-            } }), h("slot", { key: '898c9b2cc21b570625b56f30105758dae80f4d38' }), this.required && h("span", { key: 'f4e19e4b02266b3bd7ea6041ba9331caf5d3c170', class: "seki-label__required" }, " *")));
+            } }), h("slot", { key: 'a189fda5e5b9e6320747f1de59478e12eeebe4c6' }), this.required && h("span", { key: '390852bf55abc318cc16487d0c9dad05b970502f', class: "seki-label__required" }, " *")));
     }
     static get is() { return "seki-label"; }
     static get encapsulation() { return "shadow"; }
@@ -109,4 +116,5 @@ export class SekiLabel {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/menubar/seki-menubar-checkbox.css

@@ -810,16 +810,16 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .menubar-checkbox {
+:host([data-theme='dark']) .menubar-checkbox {
   color: var(--seki-foreground, hsl(0 0% 98%));
 }
 
-:host-context([data-theme="dark"]) .menubar-checkbox:hover:not(.menubar-checkbox--disabled),
-:host-context([data-theme="dark"]) .menubar-checkbox:focus:not(.menubar-checkbox--disabled) {
+:host([data-theme='dark']) .menubar-checkbox:hover:not(.menubar-checkbox--disabled),
+:host([data-theme='dark']) .menubar-checkbox:focus:not(.menubar-checkbox--disabled) {
   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"]) .menubar-checkbox-shortcut {
+:host([data-theme='dark']) .menubar-checkbox-shortcut {
   color: var(--seki-muted-foreground, hsl(240 5% 64.9%));
 }

package/dist/collection/components/menubar/seki-menubar-checkbox.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Menubar checkbox item - toggleable menu option
  *
@@ -41,11 +42,17 @@ export class SekiMenubarCheckbox {
     componentWillLoad() {
         this._checked = this.checked;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '0e8701bc6e89c38f88a4f9b7de7c20e5daeff9c2' }, h("div", { key: '2f63c44662d69cc37f3cb98d812fa83ad3bfd84e', part: "item", role: "menuitemcheckbox", class: {
+        return (h(Host, { key: 'b0ac4233e3e09cad23511198608d29309d8ac473' }, h("div", { key: '18854a831f4f4328a89d5d1dc374c37929ff08b4', part: "item", role: "menuitemcheckbox", class: {
                 'menubar-checkbox': true,
                 'menubar-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: '8106989d251091eaa46abd50ec87b549e66be847', part: "indicator", class: "menubar-checkbox__indicator" }, this._checked && (h("svg", { key: '2b5f88fa4a41172f96656b35f8a2a6f7a1973967', 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: '34040296d9fe74338fef916d4d5cfac4277cb6bb', points: "20 6 9 17 4 12" })))), h("slot", { key: '0c587e97082cebf412838ab3dd977da67ecb8d81' }), this.shortcut && (h("span", { key: '84ee8f28681fadef5ac5a78a4fd72882b80970d8', part: "shortcut", class: "menubar-checkbox-shortcut" }, this.shortcut)))));
+            }, 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: '9acf38f21cf6bdf12f8d800aa12a5b9688e67901', part: "indicator", class: "menubar-checkbox__indicator" }, this._checked && (h("svg", { key: '09916d8e3b932cce68315d02803d3c29534123f2', 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: '62af01f6a5864e437db427264cad2e75a6e0b6d6', points: "20 6 9 17 4 12" })))), h("slot", { key: '1cb8e8c6487b550217d566f911698fe691a3b4db' }), this.shortcut && (h("span", { key: '1f53e4636cfc53b8f6e72920ac5b3c98d3979903', part: "shortcut", class: "menubar-checkbox-shortcut" }, this.shortcut)))));
     }
     static get is() { return "seki-menubar-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -145,6 +152,7 @@ export class SekiMenubarCheckbox {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "checked",

package/dist/collection/components/menubar/seki-menubar-content.css

@@ -792,7 +792,7 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .menubar-content {
+:host([data-theme='dark']) .menubar-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/menubar/seki-menubar-content.js

@@ -1,5 +1,6 @@
 // src/components/menubar/seki-menubar-content.tsx
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Menubar content - dropdown content container
  *
@@ -173,6 +174,12 @@ export class SekiMenubarContent {
         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/menubar/seki-menubar-group.css

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

package/dist/collection/components/menubar/seki-menubar-group.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Menubar group - groups related menu items with optional label
  *
@@ -8,8 +9,14 @@ import { h, Host } from "@stencil/core";
  * @part label - The group label
  */
 export class SekiMenubarGroup {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '78725cc4e76194d531836da1c49e5e4965c4eb4f' }, h("div", { key: '0b62b1495ee06c3325908175efb16efea70c2095', part: "group", role: "group", class: "menubar-group" }, this.label && (h("div", { key: 'cbf536f245e2303f7af980596b822f60cc7960b8', part: "label", class: "menubar-group-label" }, this.label)), h("slot", { key: 'b61ec915d1c8b5fee6c8252276dfafbb22fdec76' }))));
+        return (h(Host, { key: '1c3baccba08cb2172eb0b5480124c6bf830ae068' }, h("div", { key: '39a316838c9a26aba783e2e01d75112680dce76d', part: "group", role: "group", class: "menubar-group" }, this.label && (h("div", { key: '0045113742e50e8410783b32cae98734faed80cd', part: "label", class: "menubar-group-label" }, this.label)), h("slot", { key: 'c0ca6e0136145ff789f0ae119f445c940ca36d6c' }))));
     }
     static get is() { return "seki-menubar-group"; }
     static get encapsulation() { return "shadow"; }
@@ -46,4 +53,5 @@ export class SekiMenubarGroup {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/menubar/seki-menubar-item.css

@@ -802,16 +802,16 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .menubar-item {
+:host([data-theme='dark']) .menubar-item {
   color: var(--seki-foreground, hsl(0 0% 98%));
 }
 
-:host-context([data-theme="dark"]) .menubar-item:hover:not(.menubar-item--disabled),
-:host-context([data-theme="dark"]) .menubar-item:focus:not(.menubar-item--disabled) {
+:host([data-theme='dark']) .menubar-item:hover:not(.menubar-item--disabled),
+:host([data-theme='dark']) .menubar-item:focus:not(.menubar-item--disabled) {
   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"]) .menubar-item-shortcut {
+:host([data-theme='dark']) .menubar-item-shortcut {
   color: var(--seki-muted-foreground, hsl(240 5% 64.9%));
 }

package/dist/collection/components/menubar/seki-menubar-item.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Menubar item - selectable menu option
  *
@@ -38,12 +39,18 @@ export class SekiMenubarItem {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return menubar ? menubar._menubarContext : null;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: 'b2f9cc3ff646d9780ecdc2bc4b6bbfc82ae5b04e' }, h("div", { key: 'eca654765fefec0226cdc0ef3a2d4752777ea9ee', part: "item", role: "menuitem", class: {
+        return (h(Host, { key: 'c5e57bc49bfc28cd8232b1858eb47de5a485d37d' }, h("div", { key: '76205df5e01cda7290aca4bddf3f89658d8b7544', part: "item", role: "menuitem", class: {
                 'menubar-item': true,
                 'menubar-item--disabled': this.disabled,
                 'menubar-item--inset': this.inset,
-            }, tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'ac197d8eed843bd0b50c58907bf5251594b96415' }), this.shortcut && (h("span", { key: 'f6a1e8875c99001e59b24d06529239ec844d5d95', part: "shortcut", class: "menubar-item-shortcut" }, this.shortcut)))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: '4b644772813711d6b249313df06755f91895ebb0' }), this.shortcut && (h("span", { key: 'b6e67a0047dbaec6037a3c1ca7937d32a77a8975', part: "shortcut", class: "menubar-item-shortcut" }, this.shortcut)))));
     }
     static get is() { return "seki-menubar-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 // src/components/menubar/seki-menubar-menu.tsx
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Menubar menu - individual menu container
  *
@@ -19,14 +20,18 @@ export class SekiMenubarMenu {
             context.registerMenu(this.menuId);
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         const context = this.getContext();
         if (context && this.menuId) {
             context.unregisterMenu(this.menuId);
         }
     }
     render() {
-        return (h(Host, { key: '987f390fc17517baa44620f2c1b1c57d2eef5e83' }, h("div", { key: '1f2940d2b9041433c12b4f04d81e016f5ac34929', part: "menu", class: "menubar-menu" }, h("slot", { key: '528316419f524a06916edd68eadf3ba7b22733a8' }))));
+        return (h(Host, { key: '39655c23e84355056a71140ccd387a615156ba0c' }, h("div", { key: 'adad1e15ca795912156b277026b7de486f90e00b', part: "menu", class: "menubar-menu" }, h("slot", { key: '666ae40d507d2eb2de9d48562026bf2dbfc815a2' }))));
     }
     static get is() { return "seki-menubar-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-radio-group.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Menubar radio group - container for radio items
  *
@@ -30,8 +31,14 @@ export class SekiMenubarRadioGroup {
         event.stopPropagation();
         this._radioGroupContext.setValue(event.detail);
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '368ed309fdc79d9810644e6058f05ea11add079b' }, h("div", { key: '5674301216cc4106a77a127c65c02e67996ad9c2', part: "group", role: "group", class: "menubar-radio-group" }, h("slot", { key: 'ac97f64579e22db2cbff0cc63ed434356ee2e090' }))));
+        return (h(Host, { key: '5bed21ffeccb53764df5b90b4d4518f8e0b575a3' }, h("div", { key: 'b6fdc6108a496e6e0d051924c717d40564977b74', part: "group", role: "group", class: "menubar-radio-group" }, h("slot", { key: '97b9ea372790041762ace400e9a66ec9e2df5365' }))));
     }
     static get is() { return "seki-menubar-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -91,6 +98,7 @@ export class SekiMenubarRadioGroup {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "value",

package/dist/collection/components/menubar/seki-menubar-radio.css

@@ -803,12 +803,12 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .menubar-radio {
+:host([data-theme='dark']) .menubar-radio {
   color: var(--seki-foreground, hsl(0 0% 98%));
 }
 
-:host-context([data-theme="dark"]) .menubar-radio:hover:not(.menubar-radio--disabled),
-:host-context([data-theme="dark"]) .menubar-radio:focus:not(.menubar-radio--disabled) {
+:host([data-theme='dark']) .menubar-radio:hover:not(.menubar-radio--disabled),
+:host([data-theme='dark']) .menubar-radio:focus:not(.menubar-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/menubar/seki-menubar-radio.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Menubar radio item - single-select option
  *
@@ -46,11 +47,17 @@ export class SekiMenubarRadio {
             });
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '2bf7c057d1597b33248e066e29c39eb61674c632' }, h("div", { key: 'cbc4a459454a61cca230b89f2e0a877e9cb49c93', part: "item", role: "menuitemradio", class: {
+        return (h(Host, { key: '27a3bfd626a3a66def464369dc9737367cf0f4bd' }, h("div", { key: 'c14bcd223dff975400dc997f69a428ad76110988', part: "item", role: "menuitemradio", class: {
                 'menubar-radio': true,
                 'menubar-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: 'c0c43951781733e3c2be0197b0eef323822d4c1d', part: "indicator", class: "menubar-radio__indicator" }, this._isChecked && (h("svg", { key: 'b2ce0b97fa18104a4f993d054a780f4115e5bdaf', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: '83d4d7c0212e095d2f0b12e0f5d82c0810180a0f', cx: "12", cy: "12", r: "4" })))), h("slot", { key: '71067f8c5307e7e09d6f3afc7b7b1b3b5ac8b5e5' }))));
+            }, 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: 'd0ee37c6950eef63bd7e32af7ad8b1db66cfd169', part: "indicator", class: "menubar-radio__indicator" }, this._isChecked && (h("svg", { key: '44825a5fe92e369a8537c8d9932afc5c5d738ead', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: '7704683ffe5ffedf7f8f029e207aff63df4b4cf0', cx: "12", cy: "12", r: "4" })))), h("slot", { key: '6158619c72b6874fa472a97e0a939214988c1b28' }))));
     }
     static get is() { return "seki-menubar-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-separator.css

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

package/dist/collection/components/menubar/seki-menubar-separator.js

@@ -1,12 +1,19 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Menubar separator - visual divider between menu items
  *
  * @part separator - The separator line
  */
 export class SekiMenubarSeparator {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '6f294ae0cdbf47b556a66afb803e3aa9d68ddc3b' }, h("div", { key: '9dd3885e37d3f1b38c5c11357cb8e27721a5153f', part: "separator", role: "separator", class: "menubar-separator" })));
+        return (h(Host, { key: '110df62d06ceb1eff624912e15ab1207a8e0e6e6' }, h("div", { key: '5b00b7a5ab9b8cf9a95d89572da189ab2c427ed2', part: "separator", role: "separator", class: "menubar-separator" })));
     }
     static get is() { return "seki-menubar-separator"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiMenubarSeparator {
             "$": ["seki-menubar-separator.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/menubar/seki-menubar-shortcut.css

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

package/dist/collection/components/menubar/seki-menubar-shortcut.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Menubar shortcut - displays keyboard shortcut hint
  *
@@ -7,8 +8,14 @@ import { h, Host } from "@stencil/core";
  * @part shortcut - The shortcut container
  */
 export class SekiMenubarShortcut {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: 'c2290a0535664a7806d1338b96fc4aa6974b6b55' }, h("span", { key: '58483850b753a9ae853534e71d2a6704d577c4aa', part: "shortcut", class: "menubar-shortcut" }, h("slot", { key: '8d4fb6dfdb0b5f27ef43e6418c2e6266c6eecda9' }))));
+        return (h(Host, { key: 'b341accbcaf8be0aba932bb2052272dced520c1f' }, h("span", { key: '73c4b8e7c236c19498ad36781eb44180ab011c85', part: "shortcut", class: "menubar-shortcut" }, h("slot", { key: 'e1c06d00428b2e969b18bf5b9cedddb37b79abda' }))));
     }
     static get is() { return "seki-menubar-shortcut"; }
     static get encapsulation() { return "shadow"; }
@@ -22,4 +29,5 @@ export class SekiMenubarShortcut {
             "$": ["seki-menubar-shortcut.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/menubar/seki-menubar-sub-content.css

@@ -795,7 +795,7 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .menubar-sub-content {
+:host([data-theme='dark']) .menubar-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/menubar/seki-menubar-sub-content.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Menubar sub content - submenu content container
  *
@@ -40,6 +41,12 @@ export class SekiMenubarSubContent {
             this._openToLeft = spaceOnRight < 200;
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         if (!this._isOpen) {
             return null;

package/dist/collection/components/menubar/seki-menubar-sub-trigger.css

@@ -803,17 +803,17 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .menubar-sub-trigger {
+:host([data-theme='dark']) .menubar-sub-trigger {
   color: var(--seki-foreground, hsl(0 0% 98%));
 }
 
-:host-context([data-theme="dark"]) .menubar-sub-trigger:hover:not(.menubar-sub-trigger--disabled),
-:host-context([data-theme="dark"]) .menubar-sub-trigger:focus:not(.menubar-sub-trigger--disabled),
-:host-context([data-theme="dark"]) .menubar-sub-trigger[data-state="open"] {
+:host([data-theme='dark']) .menubar-sub-trigger:hover:not(.menubar-sub-trigger--disabled),
+:host([data-theme='dark']) .menubar-sub-trigger:focus:not(.menubar-sub-trigger--disabled),
+:host([data-theme='dark']) .menubar-sub-trigger[data-state="open"] {
   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"]) .menubar-sub-trigger__chevron {
+:host([data-theme='dark']) .menubar-sub-trigger__chevron {
   color: var(--seki-muted-foreground, hsl(240 5% 64.9%));
 }

package/dist/collection/components/menubar/seki-menubar-sub-trigger.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Menubar sub trigger - opens submenu on hover
  *
@@ -29,12 +30,18 @@ export class SekiMenubarSubTrigger {
             observer.observe(sub, { attributes: true, attributeFilter: ['data-state'] });
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '9c864ddad897a720027c6652f839db3cc10a56f1' }, h("div", { key: 'faae229a49efcef3d38fe748e3b610c80a426279', part: "trigger", role: "menuitem", class: {
+        return (h(Host, { key: '5926c89854a423ed2ba7645116e6c9b7f34f02a8' }, h("div", { key: 'da811267f5af7d33976903f5d42f95443d9c8918', part: "trigger", role: "menuitem", class: {
                 'menubar-sub-trigger': true,
                 'menubar-sub-trigger--disabled': this.disabled,
                 'menubar-sub-trigger--inset': this.inset,
-            }, tabindex: this.disabled ? -1 : 0, "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-state": this._isOpen ? 'open' : 'closed' }, h("slot", { key: 'd1edc4057fa09e80c4a5b885c1f64e68449da26e' }), h("svg", { key: '4356fdd74ce60d9bd4f306d41bc675291c62cec2', part: "chevron", class: "menubar-sub-trigger__chevron", 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: 'ecce7cef2d55a2fc91e326b276358d6266df45bc', points: "9 18 15 12 9 6" })))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-state": this._isOpen ? 'open' : 'closed' }, h("slot", { key: 'b5203f95a108507f990f013151f00bfedfdf1de5' }), h("svg", { key: 'f24f17053082f63d0f52141e6fc2e26ceace5739', part: "chevron", class: "menubar-sub-trigger__chevron", 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: 'b06d69c7390828fa552f692ee46ab3db415c36bf', points: "9 18 15 12 9 6" })))));
     }
     static get is() { return "seki-menubar-sub-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-sub.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Menubar sub - submenu container with hover behavior
  *
@@ -31,7 +32,11 @@ export class SekiMenubarSub {
             }, this.closeDelay);
         };
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         this.clearTimers();
     }
     handleKeyDown(event) {
@@ -103,7 +108,7 @@ export class SekiMenubarSub {
         }
     }
     render() {
-        return (h(Host, { key: '51283d3e1f2d9b9dbd10305380938d1706958032', "data-state": this._isOpen ? 'open' : 'closed', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'f4dcce62c5449a26148d7d33a4ebef67183479fe', part: "sub", class: "menubar-sub", style: { position: 'relative' } }, h("slot", { key: '7378adf6a49c213ce279c73dd1ead3f08a04edca', name: "trigger" }), h("slot", { key: '442aa4a70139b9a65f96e35de29c5c9e6af829a3', name: "content" }))));
+        return (h(Host, { key: '281a3c00fa652f36a8b3482a1e622f1df4ea3c51', "data-state": this._isOpen ? 'open' : 'closed', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'a1d63c8cdbecdc95b3f0a53dc84e128d125dcb6c', part: "sub", class: "menubar-sub", style: { position: 'relative' } }, h("slot", { key: 'ff4c6d7fa7ce266f0aef771a6256d9d18cc30de3', name: "trigger" }), h("slot", { key: '0fa7c90f9ffe52a401d30bb2268de134f1d9450e', name: "content" }))));
     }
     static get is() { return "seki-menubar-sub"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-trigger.css

@@ -800,13 +800,13 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .menubar-trigger {
+:host([data-theme='dark']) .menubar-trigger {
   color: var(--seki-foreground, hsl(0 0% 98%));
 }
 
-:host-context([data-theme="dark"]) .menubar-trigger:hover:not(.menubar-trigger--disabled),
-:host-context([data-theme="dark"]) .menubar-trigger:focus:not(.menubar-trigger--disabled),
-:host-context([data-theme="dark"]) .menubar-trigger[data-state="open"] {
+:host([data-theme='dark']) .menubar-trigger:hover:not(.menubar-trigger--disabled),
+:host([data-theme='dark']) .menubar-trigger:focus:not(.menubar-trigger--disabled),
+:host([data-theme='dark']) .menubar-trigger[data-state="open"] {
   background-color: var(--seki-accent, hsl(240 3.7% 15.9%));
   color: var(--seki-accent-foreground, hsl(0 0% 98%));
 }

package/dist/collection/components/menubar/seki-menubar-trigger.js

@@ -1,5 +1,6 @@
 // src/components/menubar/seki-menubar-trigger.tsx
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Menubar trigger - button that opens a menu
  *
@@ -97,11 +98,17 @@ export class SekiMenubarTrigger {
             });
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '11d6ac7d5a3c01e9cc12b373a8b1f0a6785a34cf' }, h("button", { key: 'babd7d454c87dad3a9574145f0ec8a7137d35dfc', part: "trigger", type: "button", role: "menuitem", class: {
+        return (h(Host, { key: 'f2e521d333074c6fbf9138c6df93d4e2755f94e7' }, h("button", { key: '8d4599c838568cc253b4c58e7ecd65f3c6b6855d', part: "trigger", type: "button", role: "menuitem", class: {
                 'menubar-trigger': true,
                 'menubar-trigger--disabled': this.disabled,
-            }, tabindex: this.disabled ? -1 : 0, "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-state": this._isOpen ? 'open' : 'closed', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: '74c784f2224e30d6eba8716e760eaa2404cc626d' }))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-state": this._isOpen ? 'open' : 'closed', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: '3a528fb597f00f9c3f740b248141286a0c02bfea' }))));
     }
     static get is() { return "seki-menubar-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar.css

@@ -775,7 +775,7 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .menubar {
+:host([data-theme='dark']) .menubar {
   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/menubar/seki-menubar.js

@@ -1,5 +1,6 @@
 // src/components/menubar/seki-menubar.tsx
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Menubar - horizontal menu bar with dropdown menus
  *
@@ -136,11 +137,15 @@ export class SekiMenubar {
         this.sekiSelect.emit(event.detail);
         this.closeMenu();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         this.removeClickOutside();
     }
     render() {
-        return (h(Host, { key: '946f76fc634fd6196d87d77599fb761d65577d89' }, h("div", { key: '2e9da2ab35945ef037a40c315d914be4447d68d3', part: "menubar", role: "menubar", class: "menubar" }, h("slot", { key: 'c10530d620561c153400c7fee2066de93d5561f7' }))));
+        return (h(Host, { key: '69b928f6070343e2f5a99430fad37aa194879194' }, h("div", { key: 'a0884fd8d9c2e4c51c83ccf9880ce01a5d54fc16', part: "menubar", role: "menubar", class: "menubar" }, h("slot", { key: '81bead716c8144d58a656f6ea82a71a61ea2d509' }))));
     }
     static get is() { return "seki-menubar"; }
     static get encapsulation() { return "shadow"; }