@sekiui/elements 0.0.80 → 0.0.81

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @component seki-radio-group-item
  * @description An individual radio button item within a seki-radio-group.
@@ -45,9 +46,15 @@ export class SekiRadioGroupItem {
         var _a;
         (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const dataState = this.checked ? 'checked' : 'unchecked';
-        return (h(Host, { key: '1ffaab83bba8020f0c4c1d8bd6776871db1a8162', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: 'eee8f933b037a38fa11d0305f8cbf74ec5ef132f', type: "button", role: "radio", class: "radio", part: "radio", ref: el => this.buttonEl = el, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, tabindex: this.checked ? 0 : -1, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, this.checked && (h("span", { key: '3f3f8b0e48de30fcf24f7d71cdfe0eb85451e6f7', class: "indicator", part: "indicator" })))));
+        return (h(Host, { key: '0b2ab32e27817990e2560eafa34c212c33bb4726', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: '26beadb59f436fe3fd62d854e430f17665c9b295', type: "button", role: "radio", class: "radio", part: "radio", ref: el => this.buttonEl = el, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, tabindex: this.checked ? 0 : -1, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, this.checked && (h("span", { key: '06e0bd11080abd9ad21463c081754022a5d53da6', class: "indicator", part: "indicator" })))));
     }
     static get is() { return "seki-radio-group-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @component seki-radio-group
  * @description A set of radio buttons where only one can be selected at a time.
@@ -122,8 +123,14 @@ export class SekiRadioGroup {
     componentDidUpdate() {
         this.updateChildItems();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: 'ea72488fd339cf95014a2018bec249b2d11a7600', role: "radiogroup", "aria-label": this.ariaLabel, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : null }, h("slot", { key: 'd77156d046909313e49f86eea9a69535ff59e99e' }), this.name && this.selectedValue && (h("input", { key: 'f9efd4673c51723175aa496f3c87aa7dd8e7ccca', type: "hidden", name: this.name, value: this.selectedValue }))));
+        return (h(Host, { key: 'e4d04a777cb2d6fa16df1aedf057126a2d4a36b8', role: "radiogroup", "aria-label": this.ariaLabel, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : null }, h("slot", { key: '4448c52431658200df9288b54b2f7c5129e44f7b' }), this.name && this.selectedValue && (h("input", { key: '2f456e66d4de15ff980eb642f176e3fb62bc7f29', type: "hidden", name: this.name, value: this.selectedValue }))));
     }
     static get is() { return "seki-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/resizable/seki-resizable-handle.css

@@ -846,16 +846,16 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .resizable-handle {
+:host([data-theme='dark']) .resizable-handle {
   background: var(--seki-border, hsl(240 3.7% 15.9%));
 }
 
-:host-context([data-theme="dark"]) .resizable-handle:hover:not(.resizable-handle--disabled),
-:host-context([data-theme="dark"]) .resizable-handle:focus-visible:not(.resizable-handle--disabled) {
+:host([data-theme='dark']) .resizable-handle:hover:not(.resizable-handle--disabled),
+:host([data-theme='dark']) .resizable-handle:focus-visible:not(.resizable-handle--disabled) {
   background: var(--seki-primary, hsl(0 0% 98%));
 }
 
-:host-context([data-theme="dark"]) .resizable-handle__grip {
+:host([data-theme='dark']) .resizable-handle__grip {
   background: var(--seki-border, hsl(240 3.7% 15.9%));
   border-color: var(--seki-border, hsl(240 3.7% 15.9%));
 }

package/dist/collection/components/resizable/seki-resizable-handle.js

@@ -1,5 +1,6 @@
 // src/components/resizable/seki-resizable-handle.tsx
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Resizable handle - draggable divider between panels
  *
@@ -82,7 +83,11 @@ export class SekiResizableHandle {
             group.addEventListener('sekiDirectionChange', this.handleDirectionChange);
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         if (this.groupElement) {
             this.groupElement.removeEventListener('sekiDirectionChange', this.handleDirectionChange);
         }
@@ -153,13 +158,13 @@ export class SekiResizableHandle {
     }
     render() {
         const isHorizontal = this._direction === 'horizontal';
-        return (h(Host, { key: 'ee280379632b29b59fcfba42631a04159c65e752' }, h("div", { key: '5754982c0f9daa3087ac74ad5b304748fb770687', part: "handle", role: "separator", tabindex: this.disabled ? -1 : 0, "aria-valuenow": this.getAriaValue(), "aria-valuemin": 0, "aria-valuemax": 100, "aria-orientation": isHorizontal ? 'vertical' : 'horizontal', "aria-label": "Resize handle", class: {
+        return (h(Host, { key: 'cb5f4decb4f2fac72c380274ff2b98ec92891616' }, h("div", { key: '2e095395aa467fd9e7b5ab902fcc81bbd8ba80ff', part: "handle", role: "separator", tabindex: this.disabled ? -1 : 0, "aria-valuenow": this.getAriaValue(), "aria-valuemin": 0, "aria-valuemax": 100, "aria-orientation": isHorizontal ? 'vertical' : 'horizontal', "aria-label": "Resize handle", class: {
                 'resizable-handle': true,
                 'resizable-handle--horizontal': isHorizontal,
                 'resizable-handle--vertical': !isHorizontal,
                 'resizable-handle--disabled': this.disabled,
                 'resizable-handle--dragging': this._isDragging,
-            }, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp }, this.withHandle && (h("div", { key: '3e8a6b6fee18cca7dbff482462fab34105fcbe0f', part: "grip", class: "resizable-handle__grip" }, h("svg", { key: '76d11a28d3b072036f1caa1529b62a132ccd1316', class: "resizable-handle__grip-icon", viewBox: "0 0 6 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '95f5ef7b237e2ea29d107ec56f8289ae2b708a1a', cx: "1.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: '0ef88843f13970a6b91414d869c94a8f15eea330', cx: "4.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: '467a50fea9bf95fd9f47f7e0c0aa28766b85faff', cx: "1.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: 'fe9ed8ae8df3a04c971252b1d0a201303484a2f3', cx: "4.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '431f5ffac1782a86435f22cd165b88e73c0054df', cx: "1.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: 'e8195ad9eea14674f669c063f61ff51d2a889041', cx: "4.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: '275a2439338a9db6b84e4dfb4431edbc9c394fcd', cx: "1.5", cy: "14", r: "1", fill: "currentColor" }), h("circle", { key: 'e63b6707f40ae1969d16c52a467ca1748e83c9dd', cx: "4.5", cy: "14", r: "1", fill: "currentColor" })))))));
+            }, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp }, this.withHandle && (h("div", { key: 'd6e8f35a5943d4d80c107bab556e0fbd3a6b8145', part: "grip", class: "resizable-handle__grip" }, h("svg", { key: '1512111aea3914eacd697b71c59ba1dbe2556314', class: "resizable-handle__grip-icon", viewBox: "0 0 6 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'f83309597497caeabe5a970a4577f7730d8d4cd3', cx: "1.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: '9d9668605c0855263fadda258cbe7ba3d7ab030f', cx: "4.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: 'eb0a48669ed9ef90c16941c7a59e8f024db49a99', cx: "1.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '785a354841ac8a9deb2af85bb96e312784a2d4e0', cx: "4.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '88998ec4045ec3002fc9e4380dfa60db588b789e', cx: "1.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: 'bbb9e2c07ea072e9f4c12c3f8c04e7c3cfee1172', cx: "4.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: '7376ca0927fead3181d0af8168a1281dcd0d20dc', cx: "1.5", cy: "14", r: "1", fill: "currentColor" }), h("circle", { key: '22f2e6b9ffa7d35a4636774d1ebe78fa564df9df', cx: "4.5", cy: "14", r: "1", fill: "currentColor" })))))));
     }
     static get is() { return "seki-resizable-handle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/resizable/seki-resizable-panel-group.js

@@ -1,5 +1,6 @@
 // src/components/resizable/seki-resizable-panel-group.tsx
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 const STORAGE_KEY_PREFIX = 'seki-resizable:';
 function clamp(value, min, max) {
     return Math.min(Math.max(value, min), max);
@@ -306,12 +307,18 @@ export class SekiResizablePanelGroup {
             // localStorage may be unavailable or data corrupted
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '25d952ae1fa991390fd48a70cdf23304d1ccdc1e' }, h("div", { key: '2d9f7437521a5e92ebef3ed53250aa57cdf1aafc', part: "group", role: "group", "aria-label": "Resizable panel group", class: {
+        return (h(Host, { key: 'f33a7b0e0e2f1f8ca57cb86c4d152e22cac7e439' }, h("div", { key: 'fe7db4fcbd5ba76e9bb4f69be847bae08cbbc8e2', part: "group", role: "group", "aria-label": "Resizable panel group", class: {
                 'resizable-panel-group': true,
                 'resizable-panel-group--horizontal': this.direction === 'horizontal',
                 'resizable-panel-group--vertical': this.direction === 'vertical',
-            } }, h("slot", { key: 'c6159a4e060007a6b57f2c88afc9d13ab7b344a7' }))));
+            } }, h("slot", { key: 'bec902b69980078e4bfc59b8e852df31f4f10f1e' }))));
     }
     static get is() { return "seki-resizable-panel-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/resizable/seki-resizable-panel.js

@@ -1,5 +1,6 @@
 // src/components/resizable/seki-resizable-panel.tsx
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 let panelIdCounter = 0;
 /**
  * Resizable panel - individual content panel with size constraints
@@ -60,7 +61,11 @@ export class SekiResizablePanel {
         }
         this.updateSize();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         // Remove event listener to prevent memory leak
         if (this.groupElement) {
             this.groupElement.removeEventListener('sekiLayoutChange', this.handleLayoutChange);
@@ -140,14 +145,14 @@ export class SekiResizablePanel {
         return this.panelId;
     }
     render() {
-        return (h(Host, { key: '9768b61ca6305bee6553fe342a24a580a709fc99', style: {
+        return (h(Host, { key: '944c452b9992b1c78076c06c973e96adac983e48', style: {
                 flexBasis: `${this._size}%`,
                 flexGrow: '0',
                 flexShrink: '0',
-            } }, h("div", { key: '90a96673ad7ead3d292be723cb09090b7171de89', part: "panel", role: "region", class: {
+            } }, h("div", { key: 'fc56fa12fac5db2defcc62c3e50252bf47f298a1', part: "panel", role: "region", class: {
                 'resizable-panel': true,
                 'resizable-panel--collapsed': this._isCollapsed,
-            } }, h("slot", { key: '24cc9fd35d7098564605bc026e437415173441f2' }))));
+            } }, h("slot", { key: '07b96ce86a594dbc83c49a39c355c7de898b5f87' }))));
     }
     static get is() { return "seki-resizable-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scroll-area/seki-scroll-area.css

@@ -63,7 +63,7 @@
 }
 
 /* Dark mode focus ring color */
-:host-context([data-theme="dark"]) .viewport:focus-visible {
+:host([data-theme='dark']) .viewport:focus-visible {
   outline-color: var(--seki-color-ring, hsl(240, 5%, 45%));
 }
 

package/dist/collection/components/scroll-area/seki-scroll-area.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Scroll Area Component
  *
@@ -80,8 +81,12 @@ export class SekiScrollArea {
             this.isScrollbarVisible = true;
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
         var _a;
+        unregisterThemeSync(this.el);
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         if (this.hideTimeout) {
             clearTimeout(this.hideTimeout);
@@ -152,7 +157,7 @@ export class SekiScrollArea {
     render() {
         const hasVerticalOverflow = this.scrollState.scrollHeight > this.scrollState.clientHeight;
         const hasHorizontalOverflow = this.scrollState.scrollWidth > this.scrollState.clientWidth;
-        return (h(Host, { key: '970942d29d892a6e37091af562f69e85b34c0b66', "data-state": this.isScrollbarVisible ? 'visible' : 'hidden', "data-has-vertical-overflow": hasVerticalOverflow ? '' : undefined, "data-has-horizontal-overflow": hasHorizontalOverflow ? '' : undefined }, h("div", { key: '52cb1baa55f35263612eb3ed6149744503fc34c1', ref: (el) => (this.viewportRef = el), part: "viewport", class: "viewport", tabindex: "0", onScroll: this.handleScroll, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '2b3e179a97a0b152c2cb517cb94df18f3dd10442', class: "content" }, h("slot", { key: '506b8f63a96eaa19cc7abf80ac414fe95eb3f388' }))), h("slot", { key: '81ca74614edb18808c6ba085903e6707e2db1806', name: "scrollbar" })));
+        return (h(Host, { key: 'def86be8b0d683ab38059dafe419a943aef4bc3e', "data-state": this.isScrollbarVisible ? 'visible' : 'hidden', "data-has-vertical-overflow": hasVerticalOverflow ? '' : undefined, "data-has-horizontal-overflow": hasHorizontalOverflow ? '' : undefined }, h("div", { key: '822ae07cf076b30836dfbbff95f4a1d633f7427b', ref: (el) => (this.viewportRef = el), part: "viewport", class: "viewport", tabindex: "0", onScroll: this.handleScroll, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '3af528d35870259becba2123016c3a85b4ceedee', class: "content" }, h("slot", { key: 'f61939ce0323bf089b1c6b7c58d29d5a567b7e71' }))), h("slot", { key: '001452bcd3ff2f061ee1ae97326ec961cfe94d58', name: "scrollbar" })));
     }
     static get is() { return "seki-scroll-area"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scroll-area/seki-scroll-bar.css

@@ -848,16 +848,16 @@
 }
 
 /* Dark mode via parent context */
-:host-context([data-theme="dark"]) .scrollbar:hover {
+:host([data-theme='dark']) .scrollbar:hover {
   background: var(--seki-muted, hsl(0, 0%, 14.9%));
 }
 
-:host-context([data-theme="dark"]) .thumb {
+:host([data-theme='dark']) .thumb {
   background: var(--seki-border, hsl(0, 0%, 14.9%));
 }
 
-:host-context([data-theme="dark"]) .thumb:hover,
-:host-context([data-theme="dark"]) .thumb:active {
+:host([data-theme='dark']) .thumb:hover,
+:host([data-theme='dark']) .thumb:active {
   background: var(--seki-neutral-500, hsl(0, 0%, 45.1%));
 }
 

package/dist/collection/components/scroll-area/seki-scroll-bar.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Scroll Bar Component
  *
@@ -102,8 +103,12 @@ export class SekiScrollBar {
         document.addEventListener('touchmove', this.handleTouchMove, { passive: false });
         document.addEventListener('touchend', this.handleTouchEnd);
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
         var _a, _b;
+        unregisterThemeSync(this.el);
         document.removeEventListener('mousemove', this.handleMouseMove);
         document.removeEventListener('mouseup', this.handleMouseUp);
         document.removeEventListener('touchmove', this.handleTouchMove);

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @slot - Content containing seki-select-trigger and seki-select-content
  */
@@ -174,7 +175,11 @@ export class SekiSelect {
         // Update context reference after each render
         this.el.selectContext = this.selectContext;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         // Clean up click-outside listener
         if (this.clickOutsideListener) {
             document.removeEventListener('click', this.clickOutsideListener, true);
@@ -334,7 +339,7 @@ export class SekiSelect {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: '311f06d91424f4e6bd63892c7dc87c7a9b653f9a' }, h("slot", { key: 'd34db880daae333e78271eec44c46f0fd019fcc8' }), this.name && this.renderHiddenNativeElement()));
+        return (h(Host, { key: '5a1333b70dd0f6cb4e02c42643cd21b89f896ceb' }, h("slot", { key: 'd67d8ebd047bb146f42a5ce73871324868235137' }), this.name && this.renderHiddenNativeElement()));
     }
     renderHiddenNativeElement() {
         if (this.multiple) {

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @slot - Options and groups
  */
@@ -20,7 +21,11 @@ export class SekiSelectContent {
             parent.addEventListener('sekiOpenChange', this.handleParentOpenChange);
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         const parent = this.el.closest('seki-select');
         if (parent) {
             parent.removeEventListener('sekiOpenChange', this.handleParentOpenChange);

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @slot - Options within the group
  * @slot label - Custom label content
@@ -10,8 +11,14 @@ export class SekiSelectGroup {
     // ===========================
     // Render
     // ===========================
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '5c493d22c99b50ac0b1e3b5e179adc0061e7e9e2' }, h("div", { key: '4936d068e76ac482065fa1751a27c6b3b025c731', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: '7d70526052a3ce2cf0223a119f1733624cd6a130', class: "group-separator", "aria-hidden": "true" }), h("div", { key: '754dcb0c7e2a0bd07335f5cebf6967545d7f76c4', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: '631aedf943bbd90e6b9a398d1edbe7d3825ba7c0', name: "label" }, this.label)), h("div", { key: '83443063b31372d254f6b70f27c25a2d896093c2', class: "group-options" }, h("slot", { key: '2e53a64d4f25ae986e81d4b0299a908ab1d87de1' })))));
+        return (h(Host, { key: 'e351318be0e30d57db2ae560dbc7feb719ffeb9a' }, h("div", { key: 'a0974589692fa7a337011bfe7d25e64bbe5e872b', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: '48d45cee86d3a0ef56cea3891691e682dd04e2c6', class: "group-separator", "aria-hidden": "true" }), h("div", { key: '3cfd23915eb4a2d704975aef8749786645426079', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: 'dab4b40a32f9e23cbc94085a5d75162704fa01a8', name: "label" }, this.label)), h("div", { key: 'd3ac276b85ca1e2e5d9bc7c212620bcce6cafc35', class: "group-options" }, h("slot", { key: 'b7746d8cb39704b38b798a694a28f3ed42eab856' })))));
     }
     static get is() { return "seki-select-group"; }
     static get encapsulation() { return "shadow"; }
@@ -48,4 +55,5 @@ export class SekiSelectGroup {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/select-option/seki-select-option.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @slot - Option content
  * @slot selected-indicator - Custom selected indicator
@@ -56,7 +57,11 @@ export class SekiSelectOption {
             disabled: this.disabled,
         });
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         // Unregister this option
         const selectContext = this.getSelectContext();
         selectContext === null || selectContext === void 0 ? void 0 : selectContext.unregisterOption(this.value);
@@ -75,7 +80,7 @@ export class SekiSelectOption {
         const selectContext = this.getSelectContext();
         const isSelected = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isValueSelected(this.value)) || false;
         const isFocused = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.focusedOptionValue) === this.value;
-        return (h(Host, { key: 'b6125be6796717ecd1eac0c89dd7f1f91325196a' }, h("div", { key: 'c04915fac833233dc422e21a5a4514e82d15e18f', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: 'abcb87208db9a29bffbaebd813e135186786f9a2', class: "option-label" }, h("slot", { key: 'e40d41902148c6996cdff770082b82f10671149a' })), isSelected && (h("span", { key: 'a9cf42b073f7c307644fc93168640633846f2b4e', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '44aec34192901367428056f93249055f92bb4f17', name: "selected-indicator" }, h("svg", { key: '85d09c26f8568809562cb766a81bae3e1911020e', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0a85d4ca203c2d541be6ea785a34c434cf953645', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '8ba7a9bd8c4423bdc87237421bfed49ed485de7f' }, h("div", { key: 'cdeedf3061b3de0a12a56faccd56121fbcd4c7e3', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: '902d9c4caa962efa60eeb697a0595764ca82d822', class: "option-label" }, h("slot", { key: 'd15a6dfa001e33df302e17847aeb4b63ef2ca9fa' })), isSelected && (h("span", { key: '708d5a9eaea23837e6a75df3ae86ae484367b477', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: 'c170f9b1a743ce16aeee0ced9b3b67836c4e2677', name: "selected-indicator" }, h("svg", { key: '230c202c463fbf5912ab900595135e5df69fd6ee', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cad9198c5e438617c840b1e8e97db69e1b5a5a85', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "seki-select-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @slot - Custom trigger content
  * @slot pill - Custom pill rendering in multi-select mode
@@ -57,7 +58,11 @@ export class SekiSelectTrigger {
             parent.addEventListener('sekiChange', this.handleParentValueChange);
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         // Clean up event listeners
         if (this.buttonRef) {
             this.buttonRef.removeEventListener('click', this.handleButtonClick);

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-separator: Visual divider for separating content
  *
@@ -21,9 +22,15 @@ export class SekiSeparator {
          */
         this.decorative = false;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const isVertical = this.orientation === 'vertical';
-        return (h("div", { key: 'b49e1b962a261f5cd41bc69f27e442d9c55be896', class: {
+        return (h("div", { key: 'ed4e388d8b14612ba2e7d5ba56d3107398a8f75f', class: {
                 'seki-separator': true,
                 'seki-separator--horizontal': !isVertical,
                 'seki-separator--vertical': isVertical,
@@ -97,4 +104,5 @@ export class SekiSeparator {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/sheet/seki-sheet-close.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-sheet-close: Close button for the sheet
  *
@@ -10,8 +11,14 @@ export class SekiSheetClose {
             this.closeSheet.emit();
         };
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("div", { key: '711066754ceb4f93b177acba67be9e6a60136499', class: "seki-sheet-close", part: "close", onClick: this.handleClick }, h("slot", { key: 'e7e03110d9fc2cdc447b64afc2d887466c4740a6' })));
+        return (h("div", { key: '1cbac3a45a982cf402b796e8a5d1a2a7a555e967', class: "seki-sheet-close", part: "close", onClick: this.handleClick }, h("slot", { key: 'e0383ad8d5b6be4d9333387eb57a9555cd20f395' })));
     }
     static get is() { return "seki-sheet-close"; }
     static get encapsulation() { return "shadow"; }
@@ -43,4 +50,5 @@ export class SekiSheetClose {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-sheet-content: Container for sheet content
  *
@@ -22,11 +23,17 @@ export class SekiSheetContent {
             parent.setAttribute('data-side', this.side || 'right');
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '652d09db19bf28de5ed62a9cb002344ca7e2f22a', "data-side": this.side }, h("div", { key: 'c589924dafc9169302fe56b2d551856c50fe7875', role: "dialog", "aria-modal": "true", class: {
+        return (h(Host, { key: '26ec5f424c34936db9fe1691d134d44bca55e302', "data-side": this.side }, h("div", { key: 'd990b0951d0ccdcfe26195f4a0f04eda5305c718', role: "dialog", "aria-modal": "true", class: {
                 'seki-sheet-content': true,
                 [`seki-sheet-content--${this.side}`]: true,
-            }, part: "content" }, h("button", { key: '359d587f63a59f382e73a850034fb351f5a4305c', type: "button", class: "seki-sheet-close-button", "aria-label": "Close", onClick: this.handleCloseClick }, h("svg", { key: 'c388e78609e4233fbfbc98afda060919afd4631f', 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: '53dd128a38cf28f77c4b1f23cf4321b27f86baba', d: "M18 6 6 18" }), h("path", { key: '2a47e222327416e6b1edb31bce0742f3e69de539', d: "m6 6 12 12" }))), h("slot", { key: '2a0b004fc71a14404b9b642a955022bb67297fb0' }))));
+            }, part: "content" }, h("button", { key: '2bc762be56411e38add96f60a30e62d844fddf67', type: "button", class: "seki-sheet-close-button", "aria-label": "Close", onClick: this.handleCloseClick }, h("svg", { key: 'd7c48a7cac83725eb20be55814856aab4bd7f183', 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: '7ce2b2b85541471eabdcc2f33f41a08bc717d7ce', d: "M18 6 6 18" }), h("path", { key: '795f187bee42e24f1a4f32be8f5645a55e098e6c', d: "m6 6 12 12" }))), h("slot", { key: '39c41c56e7967398750d872188f4d115bb55afca' }))));
     }
     static get is() { return "seki-sheet-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-sheet-description: Descriptive text in the sheet header
  *
  * @component SheetDescription
  */
 export class SekiSheetDescription {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("p", { key: '7891c6cb79dba2def3162db8cf7736691ed67000', class: "seki-sheet-description", part: "description" }, h("slot", { key: '19aaa4da51cd2b807bd680d35124a5f0c0a5bf73' })));
+        return (h("p", { key: '1051b675aa3674a86d624b5bb520a6d9f37824bd', class: "seki-sheet-description", part: "description" }, h("slot", { key: '9117ef53a2d4c44ceeacfe9db450725f1ded8cb2' })));
     }
     static get is() { return "seki-sheet-description"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiSheetDescription {
             "$": ["seki-sheet.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/sheet/seki-sheet-footer.js

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-sheet-footer: Footer section of the sheet for actions
  *
  * @component SheetFooter
  */
 export class SekiSheetFooter {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("div", { key: '86d0d8596a94837a6c67cd55eb5f077ee856d0e5', class: "seki-sheet-footer", part: "footer" }, h("slot", { key: '80cc3d42102d9fa069c98ef447c61d35573cc136' })));
+        return (h("div", { key: 'dd056f387174e6588b920f3e42ecbadd05ce85eb', class: "seki-sheet-footer", part: "footer" }, h("slot", { key: '9dc0a77787334c15730e5c9123f90f33a1914d12' })));
     }
     static get is() { return "seki-sheet-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiSheetFooter {
             "$": ["seki-sheet.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/sheet/seki-sheet-header.js

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-sheet-header: Header section of the sheet
  *
  * @component SheetHeader
  */
 export class SekiSheetHeader {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("div", { key: '91fb7e5cef3ddaf64ccbec1a4a3c1845faa68fbe', class: "seki-sheet-header", part: "header" }, h("slot", { key: '5f365390756c428f390301767c51838f26f4b840' })));
+        return (h("div", { key: '8792fcbb571404574ee5e7f016482b8fdb02edb2', class: "seki-sheet-header", part: "header" }, h("slot", { key: 'd151a643e10d99bca1029414b78ba260931d28fa' })));
     }
     static get is() { return "seki-sheet-header"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiSheetHeader {
             "$": ["seki-sheet.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/sheet/seki-sheet-title.js

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-sheet-title: Title text in the sheet header
  *
  * @component SheetTitle
  */
 export class SekiSheetTitle {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("h2", { key: '98257620b45e7fa9e7c5ffa683e8d32eb39c1ddb', class: "seki-sheet-title", part: "title" }, h("slot", { key: '34a055223852bc7a7dc688719436ff239f871d73' })));
+        return (h("h2", { key: 'fa86c77c1e03fd9ab3f974347072def9827d2fa3', class: "seki-sheet-title", part: "title" }, h("slot", { key: '367a5f16a209b6fd0f3dc71f6b7be6bd1ed07573' })));
     }
     static get is() { return "seki-sheet-title"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiSheetTitle {
             "$": ["seki-sheet.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-sheet-trigger: Button/element that opens the sheet
  *
@@ -10,8 +11,14 @@ export class SekiSheetTrigger {
             this.triggerClick.emit();
         };
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("div", { key: 'c0762512a72d5acf26ab7241b58ae8fa3cced8b4', class: "seki-sheet-trigger", part: "trigger", onClick: this.handleClick }, h("slot", { key: '8588453ec68d2ec9a7b8dd737c4de77b1a1e0e5f' })));
+        return (h("div", { key: '994e3c0c66b00e3957dd5590c5a66639d1aff515', class: "seki-sheet-trigger", part: "trigger", onClick: this.handleClick }, h("slot", { key: '167575e4915968c6c45efe1a248a27b121c7937d' })));
     }
     static get is() { return "seki-sheet-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -43,4 +50,5 @@ export class SekiSheetTrigger {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }