@sekiui/elements 0.0.80 → 0.0.82

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiFieldGroup {
     constructor() {
         /**
@@ -7,11 +8,17 @@ export class SekiFieldGroup {
          */
         this.gap = '1rem';
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const style = {
             '--seki-field-group-gap': this.gap,
         };
-        return (h("div", { key: 'cc93a82a2b5d4b1935a8cf5406b4dcac09c6991c', class: "field-group", style: style }, h("slot", { key: '95403fbbcb400b7672d3debcf3469ba1f50cca6f' })));
+        return (h("div", { key: 'c3684e081ff8f1b19ddcda5fc25bfb87f2f7b50d', class: "field-group", style: style }, h("slot", { key: '0ead64560d27f3b1faeda4b6dc730469851c1440' })));
     }
     static get is() { return "seki-field-group"; }
     static get encapsulation() { return "shadow"; }
@@ -49,4 +56,5 @@ export class SekiFieldGroup {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiFieldLabel {
     constructor() {
         /**
@@ -7,9 +8,15 @@ export class SekiFieldLabel {
          */
         this.required = false;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const labelProps = this.htmlFor ? { for: this.htmlFor } : {};
-        return (h("label", Object.assign({ key: '104706ce84b822023a696816b5ae82eb1685fe5a' }, labelProps), h("slot", { key: '175c31261d162ce9d746337a3e55358dd1840015' }), this.required && h("span", { key: 'a06996ec81a3da6284b9c268c52fdfba522f487a', class: "required-indicator" }, " *")));
+        return (h("label", Object.assign({ key: '04d2d5d05935ab3bdea92e1c67739d2e6401e0fc' }, labelProps), h("slot", { key: '70681b5cffac8a18d1e33447337c55f591a6e0c9' }), this.required && h("span", { key: '8807ec715491e016267eae2608c15a13037213fe', class: "required-indicator" }, " *")));
     }
     static get is() { return "seki-field-label"; }
     static get encapsulation() { return "shadow"; }
@@ -66,4 +73,5 @@ export class SekiFieldLabel {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,7 +1,14 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiFieldLegend {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("legend", { key: 'bb989475b9f113d302cd3cc5414909d1935c2642' }, h("slot", { key: 'dc7866320f0890d794d575f9eb8c632eede89196' })));
+        return (h("legend", { key: 'a366c20ab3876e26c4878cfe6699e6a29b1cb39c' }, h("slot", { key: 'c759c608db95a841556cf658841f3e003ec308c5' })));
     }
     static get is() { return "seki-field-legend"; }
     static get encapsulation() { return "shadow"; }
@@ -15,4 +22,5 @@ export class SekiFieldLegend {
             "$": ["seki-field-legend.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiFieldset {
     constructor() {
         /**
@@ -7,8 +8,14 @@ export class SekiFieldset {
          */
         this.disabled = false;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("fieldset", { key: '368edb114008b09042a503e751f9423cfab00aa2', disabled: this.disabled, class: "fieldset" }, h("slot", { key: 'ec4fe172df1dff1357f25111888f65f7b05772c8', name: "legend" }), h("div", { key: 'db62b32767b97dcb929074911098327e1a8091e5', class: "fieldset-content" }, h("slot", { key: '0d5b5656b6c469484c2079bb6327b10143a4c0ea' }))));
+        return (h("fieldset", { key: '0d59504d98786357f7b13f2b92310467516ec5b2', disabled: this.disabled, class: "fieldset" }, h("slot", { key: '6329e6b1bfe6ad3bcc711ffc751be62d6d80226c', name: "legend" }), h("div", { key: 'a9ed14e778e5783df38fdc5d5a5210de5a1d9a0f', class: "fieldset-content" }, h("slot", { key: '24d448049a51cef2dc5a6b9283c472b625b614d2' }))));
     }
     static get is() { return "seki-fieldset"; }
     static get encapsulation() { return "shadow"; }
@@ -46,4 +53,5 @@ export class SekiFieldset {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/hover-card/seki-hover-card-content.css

@@ -786,6 +786,7 @@
 }
 
 .hover-card-content {
+  position: fixed;
   z-index: 50;
   width: var(--hover-card-width);
   padding: var(--hover-card-padding);
@@ -849,7 +850,7 @@
 .hover-card-arrow[data-side="left"] {
   right: calc(var(--hover-card-arrow-size) / -2 - 1px);
   transform: translateY(-50%) rotate(45deg);
-  border-top: none;
+  border-bottom: none;
   border-left: none;
 }
 
@@ -857,7 +858,7 @@
 .hover-card-arrow[data-side="right"] {
   left: calc(var(--hover-card-arrow-size) / -2 - 1px);
   transform: translateY(-50%) rotate(45deg);
-  border-bottom: none;
+  border-top: none;
   border-right: none;
 }
 
@@ -868,7 +869,7 @@
 }
 
 /* Dark mode support via data-theme attribute */
-:host-context([data-theme="dark"]) {
+:host([data-theme='dark']) {
   --hover-card-bg: var(--seki-color-background-dark, hsl(240 10% 3.9%));
   --hover-card-border: var(--seki-color-border-dark, hsl(240 3.7% 15.9%));
   --hover-card-text: var(--seki-color-foreground-dark, hsl(0 0% 98%));

package/dist/collection/components/hover-card/seki-hover-card-content.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Hover Card Content Component
  *
@@ -39,17 +40,9 @@ export class SekiHoverCardContent {
          */
         this._isOpen = false;
         /**
-         * Calculated position for the content
-         */
-        this._position = { top: '0', left: '0' };
-        /**
-         * The actual side after collision detection (may differ from preferred side)
+         * The actual side after collision detection (string primitive — safe as @State, no infinite loop)
          */
         this._actualSide = 'bottom';
-        /**
-         * Arrow position relative to trigger center
-         */
-        this._arrowPosition = {};
         /**
          * Handle mouse enter - cancel any pending close
          */
@@ -106,50 +99,46 @@ export class SekiHoverCardContent {
         }
         return null;
     }
-    /**
-     * Listen for open state changes from parent container
-     */
-    handleOpenChange(event) {
-        this._isOpen = event.detail.open;
-        if (this._isOpen) {
-            // Update position when opening
-            requestAnimationFrame(() => this.updatePosition());
-            // Setup click-outside listener for touch devices
-            if (this.isTouchDevice()) {
-                this.setupClickOutsideListener();
-            }
-        }
-        else {
-            // Remove click-outside listener when closing
-            this.removeClickOutsideListener();
-        }
-    }
-    componentWillRender() {
-        var _a;
-        const context = this.getContext();
-        this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
-    }
     componentDidLoad() {
-        // Listen for open changes from parent
+        // Listen for open changes from parent (events bubble up, not down, so @Listen won't work)
         const hoverCard = this.el.closest('seki-hover-card');
         if (hoverCard) {
-            hoverCard.addEventListener('sekiOpenChange', () => {
-                var _a;
-                const context = this.getContext();
-                this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+            this.openChangeHandler = (e) => {
+                const detail = e.detail;
+                this._isOpen = detail.open;
                 if (this._isOpen) {
                     requestAnimationFrame(() => this.updatePosition());
+                    // Setup click-outside listener for touch devices
+                    if (this.isTouchDevice()) {
+                        this.setupClickOutsideListener();
+                    }
+                }
+                else {
+                    this.removeClickOutsideListener();
                 }
-            });
+            };
+            hoverCard.addEventListener('sekiOpenChange', this.openChangeHandler);
         }
     }
     componentDidRender() {
-        if (this._isOpen) {
+        if (this._isOpen && this.contentRef) {
             this.updatePosition();
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         this.removeClickOutsideListener();
+        // Clean up parent event listener
+        if (this.openChangeHandler) {
+            const hoverCard = this.el.closest('seki-hover-card');
+            if (hoverCard) {
+                hoverCard.removeEventListener('sekiOpenChange', this.openChangeHandler);
+            }
+            this.openChangeHandler = undefined;
+        }
     }
     /**
      * Setup click-outside listener for touch devices to close on tap outside
@@ -290,27 +279,31 @@ export class SekiHoverCardContent {
             const clampedArrowTop = Math.max(16, Math.min(arrowTop, contentRect.height - 16));
             arrowPosition.top = `${clampedArrowTop}px`;
         }
-        this._position = { top: `${position.top}px`, left: `${position.left}px` };
+        // Apply position directly to DOM to avoid re-render loops
+        this.contentRef.style.position = 'fixed';
+        this.contentRef.style.top = `${position.top}px`;
+        this.contentRef.style.left = `${position.left}px`;
+        this.contentRef.style.zIndex = '50';
         this._actualSide = actualSide;
-        this._arrowPosition = arrowPosition;
+        // Apply arrow position directly to DOM (only the dynamic axis)
+        const arrowEl = this.contentRef.querySelector('.hover-card-arrow');
+        if (arrowEl) {
+            // Reset dynamic position styles
+            arrowEl.style.left = '';
+            arrowEl.style.top = '';
+            if (actualSide === 'top' || actualSide === 'bottom') {
+                arrowEl.style.left = arrowPosition.left || '';
+            }
+            else {
+                arrowEl.style.top = arrowPosition.top || '';
+            }
+        }
     }
     render() {
         if (!this._isOpen) {
             return null;
         }
-        const arrowStyle = {};
-        if (this._arrowPosition.left) {
-            arrowStyle.left = this._arrowPosition.left;
-        }
-        if (this._arrowPosition.top) {
-            arrowStyle.top = this._arrowPosition.top;
-        }
-        return (h(Host, { "data-state": "open", "data-side": this._actualSide }, h("div", { ref: (el) => (this.contentRef = el), part: "content", class: "hover-card-content", role: "dialog", style: {
-                position: 'fixed',
-                top: this._position.top,
-                left: this._position.left,
-                zIndex: '50',
-            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut }, h("slot", null), h("div", { part: "arrow", class: "hover-card-arrow", "data-side": this._actualSide, style: arrowStyle }))));
+        return (h(Host, { "data-state": "open", "data-side": this._actualSide }, h("div", { ref: (el) => (this.contentRef = el), part: "content", class: "hover-card-content", role: "dialog", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut }, h("slot", null), h("div", { part: "arrow", class: "hover-card-arrow", "data-side": this._actualSide }))));
     }
     static get is() { return "seki-hover-card-content"; }
     static get encapsulation() { return "shadow"; }
@@ -427,9 +420,7 @@ export class SekiHoverCardContent {
     static get states() {
         return {
             "_isOpen": {},
-            "_position": {},
-            "_actualSide": {},
-            "_arrowPosition": {}
+            "_actualSide": {}
         };
     }
     static get events() {
@@ -466,13 +457,4 @@ export class SekiHoverCardContent {
             }];
     }
     static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "sekiOpenChange",
-                "method": "handleOpenChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }

package/dist/collection/components/hover-card/seki-hover-card-trigger.css

@@ -761,6 +761,7 @@
 
 :host {
   display: inline-block;
+  font-family: var(--seki-font-sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
 }
 
 .hover-card-trigger {

package/dist/collection/components/hover-card/seki-hover-card-trigger.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Hover Card Trigger Component
  *
@@ -102,14 +103,33 @@ export class SekiHoverCardTrigger {
         }
         return null;
     }
-    /**
-     * Listen for open state changes from parent container
-     */
-    handleOpenChange(event) {
-        this.isOpen = event.detail.open;
+    componentDidLoad() {
+        // Listen for open state changes from parent (events bubble up, not down, so @Listen won't work)
+        const hoverCard = this.el.closest('seki-hover-card');
+        if (hoverCard) {
+            this.openChangeHandler = (e) => {
+                const detail = e.detail;
+                this.isOpen = detail.open;
+            };
+            hoverCard.addEventListener('sekiOpenChange', this.openChangeHandler);
+        }
+    }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+        // Clean up parent event listener
+        if (this.openChangeHandler) {
+            const hoverCard = this.el.closest('seki-hover-card');
+            if (hoverCard) {
+                hoverCard.removeEventListener('sekiOpenChange', this.openChangeHandler);
+            }
+            this.openChangeHandler = undefined;
+        }
     }
     render() {
-        return (h(Host, { key: 'd8542dcc45bc50faea9992bce7272530004f5fcc' }, h("span", { key: 'ae6798fd2b908c3b19cd2c9193b9769ad6ccf25a', part: "trigger", class: "hover-card-trigger", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick }, h("slot", { key: 'b338d54d27471d0adacf2a87b118e90054bf2dc0' }))));
+        return (h(Host, { key: 'c49fa6a632069fcde511ad17844a1b20b7bd8b7d' }, h("span", { key: '2b0515dd0a8d1f800fe0ec2afca05f1e7a036764', part: "trigger", class: "hover-card-trigger", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick }, h("slot", { key: 'e3e000d26a9f464a70b86bd1496adbc291db7d0a' }))));
     }
     static get is() { return "seki-hover-card-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -177,13 +197,4 @@ export class SekiHoverCardTrigger {
             }];
     }
     static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "sekiOpenChange",
-                "method": "handleOpenChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }

package/dist/collection/components/hover-card/seki-hover-card.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Hover Card Container Component
  *
@@ -125,8 +126,8 @@ export class SekiHoverCard {
         if (this._isOpen === open)
             return;
         this._isOpen = open;
-        this.sekiOpenChange.emit({ open });
         this.updateContext();
+        this.sekiOpenChange.emit({ open });
         if (open) {
             this.setupScrollListener();
         }
@@ -221,7 +222,11 @@ export class SekiHoverCard {
     componentDidUpdate() {
         this.updateContext();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         // Clean up timers
         this.cancelOpen();
         this.cancelClose();
@@ -229,7 +234,7 @@ export class SekiHoverCard {
         this.removeScrollListener();
     }
     render() {
-        return (h(Host, { key: '138ea86b32a01185c6c686b52e9ce8abd3a6a93a', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'c400d20d6b9a96208f736f23773a562f5d40b929', class: "hover-card" }, h("slot", { key: '7b15d924ab5fde073ca090d94eae1173119e48bc' }))));
+        return (h(Host, { key: '068054d3a74f75993b1371f8f0313bdfd9b82f70', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '461ab4384676f33bd0ca89c14bcb15931fa1c08e', class: "hover-card" }, h("slot", { key: 'c7ffac904174636e9cd39f63b9d69f0d1555c62f' }))));
     }
     static get is() { return "seki-hover-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiInput {
     constructor() {
         /**
@@ -74,8 +75,14 @@ export class SekiInput {
             this.internals.setFormValue(this.value || '');
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("input", { key: '7ac8f139e46442e4f63539d0684f5460369bed7a', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
+        return (h("input", { key: 'ab1a545f2b4a7e8aae96d56b2dfbf51fca642e6e', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
     }
     static get is() { return "seki-input"; }
     static get encapsulation() { return "shadow"; }
@@ -528,5 +535,6 @@ export class SekiInput {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get attachInternalsMemberName() { return "internals"; }
 }

package/dist/collection/components/input-group/seki-input-addon.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiInputAddon {
     constructor() {
         /**
@@ -6,8 +7,14 @@ export class SekiInputAddon {
          */
         this.size = 'md';
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: 'e2b648590e19f30ffdc57ba90727f015dd122148' }, h("div", { key: 'ee48e44d23ecbd3ab80dce1300cc1d454de0cd51', class: `addon addon--${this.size}` }, h("slot", { key: 'e066e1c7eb4a8f0a23022eddce0c55a1c2373e97' }))));
+        return (h(Host, { key: 'da18dde31c6e787b9bdd928279a5ce08ab62b27f' }, h("div", { key: '42fe8665cd6159e8863b51401a14c0dea82936a2', class: `addon addon--${this.size}` }, h("slot", { key: 'fa148b6a1a7832075db29c2aa0fb57d073f8f9d0' }))));
     }
     static get is() { return "seki-input-addon"; }
     static get encapsulation() { return "shadow"; }
@@ -45,4 +52,5 @@ export class SekiInputAddon {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiInputGroup {
     constructor() {
         /**
@@ -52,8 +53,14 @@ export class SekiInputGroup {
             }
         });
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '1835d43ac9bc2aa3b6a48648d5c0fdddf3fa03f0' }, h("div", { key: '3c9d5dbe44c957084ab91c3d11bda5e53d6d49f3', class: "input-group", role: "group", "aria-label": this.ariaLabel }, h("slot", { key: '3262526b777875a3b932bec0ee7acd8d2f56b32b', onSlotchange: () => this.updateChildren() }))));
+        return (h(Host, { key: 'bd1f9493f032958d5ad68dfb31e156faa5245db0' }, h("div", { key: '875f950b3a15d9cb9fb4785ed7abb0e2d73a871f', class: "input-group", role: "group", "aria-label": this.ariaLabel }, h("slot", { key: '8c1cf328b98a2e794eec3245a9e889af2ffa567e', onSlotchange: () => this.updateChildren() }))));
     }
     static get is() { return "seki-input-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp-group.js

@@ -1,7 +1,14 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiInputOtpGroup {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("div", { key: '3291a3ff1a7694236c5036d4b1aaa06752a2b1b3', class: "group", role: "group" }, h("slot", { key: '8237ed893dba844676cb2ae47978e6740ca37bc2' })));
+        return (h("div", { key: 'a72358f543c1eeced713389239c9dd987e6ec341', class: "group", role: "group" }, h("slot", { key: 'edff4c64c0da61b420f6312239d8251ce840c1fe' })));
     }
     static get is() { return "seki-input-otp-group"; }
     static get encapsulation() { return "shadow"; }
@@ -15,4 +22,5 @@ export class SekiInputOtpGroup {
             "$": ["seki-input-otp-group.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,7 +1,14 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiInputOtpSeparator {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("div", { key: 'fae3e0e1252aae420c462c399b7fa902d4bd3558', role: "separator", "aria-orientation": "vertical", class: "separator" }, h("slot", { key: '517453b7a9d48147ed649de03301b5aff3b0fb44' }, h("span", { key: '8bfc6bec1c34b1a45b64845b9fc4c0b4a978f01a', "aria-hidden": "true" }, "-"))));
+        return (h("div", { key: '263bac2bcdf46c506e5fab17af37e137b3d2686b', role: "separator", "aria-orientation": "vertical", class: "separator" }, h("slot", { key: 'a204fd61778b23dc0293b2aae947dd520e915a48' }, h("span", { key: 'e16aa60eed2fb00eb9469dc030016156d467c81e', "aria-hidden": "true" }, "-"))));
     }
     static get is() { return "seki-input-otp-separator"; }
     static get encapsulation() { return "shadow"; }
@@ -15,4 +22,5 @@ export class SekiInputOtpSeparator {
             "$": ["seki-input-otp-separator.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/input-otp/seki-input-otp-slot.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiInputOtpSlot {
     constructor() {
         this.char = '';
@@ -31,7 +32,11 @@ export class SekiInputOtpSlot {
             this.parentOtp.addEventListener('sekiOtpStateChange', this.onOtpStateChange);
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         if (this.parentOtp) {
             this.parentOtp.removeEventListener('sekiOtpStateChange', this.onOtpStateChange);
         }
@@ -64,7 +69,7 @@ export class SekiInputOtpSlot {
             'slot--invalid': this.isInvalid,
             'slot--focused': this.hasFocus,
         };
-        return (h("div", { key: 'e19bc7a5f9dca5eeaca428f6973508e34c82fa81', class: classes, "aria-hidden": "true", onClick: this.handleClick }, h("span", { key: '9a2422985127c5dc876d085817ec619baa2000a8', class: "char" }, this.getDisplayChar()), this.isActive && h("span", { key: '14195dd6d0614d84ed4b3e03defd8ece52736acf', class: "caret" })));
+        return (h("div", { key: 'f97036441010e16452500af42b81c5bf8a4c0c46', class: classes, "aria-hidden": "true", onClick: this.handleClick }, h("span", { key: '4c08a46d675974c7571bc053a64b755269a92ac6', class: "char" }, this.getDisplayChar()), this.isActive && h("span", { key: '1dbd933b7bc82f1d2d1d37d4d5f39724698303a3', class: "caret" })));
     }
     static get is() { return "seki-input-otp-slot"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiInputOtp {
     constructor() {
         /**
@@ -205,15 +206,21 @@ export class SekiInputOtp {
         const regex = this.pattern === 'digits' ? /[0-9]/g : /[a-zA-Z0-9]/g;
         return (val.match(regex) || []).join('').slice(0, this.maxlength);
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const inputMode = this.pattern === 'digits' ? 'numeric' : 'text';
         const inputPattern = this.pattern === 'digits' ? '[0-9]*' : '[a-zA-Z0-9]*';
         const ariaLabelText = this.ariaLabel || `Enter ${this.maxlength}-digit code`;
-        return (h("div", { key: '43374da76db7e87a8e497e21bd2ebee05ddb610b', class: {
+        return (h("div", { key: 'c2fb81478bc60e129f88a60bfed0517c46909223', class: {
                 'input-otp-container': true,
                 'input-otp-container--disabled': this.disabled,
                 'input-otp-container--invalid': this.invalid,
-            }, onClick: this.handleContainerClick }, h("input", { key: '435715b138963caf230b146f7ef0ebb30fbdb448', ref: (el) => (this.inputRef = el), type: "text", inputMode: inputMode, autocomplete: this.autocomplete, pattern: inputPattern, maxLength: this.maxlength, value: this.value, disabled: this.disabled, required: this.required, name: this.name, class: "input-otp-hidden", "aria-label": ariaLabelText, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("slot", { key: 'd41e3db322c8c6883ae551628efe2f10b43e931b' })));
+            }, onClick: this.handleContainerClick }, h("input", { key: 'c6b45df211169eba36e09a5c633314dccdb2fbe7', ref: (el) => (this.inputRef = el), type: "text", inputMode: inputMode, autocomplete: this.autocomplete, pattern: inputPattern, maxLength: this.maxlength, value: this.value, disabled: this.disabled, required: this.required, name: this.name, class: "input-otp-hidden", "aria-label": ariaLabelText, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("slot", { key: '6077aa7df179db034de78ff8c7c4c82a836a0949' })));
     }
     static get is() { return "seki-input-otp"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-item: Composable base item for lists and menus
  *
@@ -45,14 +46,20 @@ export class SekiItem {
             }
         };
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const isInteractive = this.interactive && !this.disabled;
-        return (h(Host, { key: '4d6535794744c36086f3c9242757c61c3c4b758d', class: {
+        return (h(Host, { key: '0f2293e68d9ff3a30e971268f600e6ff335ee8d6', class: {
                 'seki-item--active': this.active,
                 'seki-item--disabled': this.disabled,
                 'seki-item--inset': this.variant === 'inset',
                 'seki-item--interactive': isInteractive,
-            } }, h("div", { key: '839ba9c32ee980cbdb919971a833aa83d1162892', class: "seki-item", part: "item", role: isInteractive ? 'option' : undefined, tabindex: isInteractive ? 0 : -1, "aria-selected": this.active ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'b38c41f70c7e5d8e6b86b85408e9b9f2e5ce7ec2', class: "seki-item__leading", part: "leading" }, h("slot", { key: 'b4330ae0ac48b16c326204116f8f22f8c1763047', name: "leading" })), h("span", { key: 'e7329059ce8a88058b1a26c4b9c65a6ea633cb12', class: "seki-item__content", part: "content" }, h("slot", { key: 'bcc3e6a047247585e40f1aba51429b0eeb4f9b52' })), h("span", { key: '11f2c98572ba112489d5ac7e4955b255e8d5c5ac', class: "seki-item__trailing", part: "trailing" }, h("slot", { key: '3ab27f7f5719e9e87fbcd20095f0ab005c4bf77d', name: "trailing" })))));
+            } }, h("div", { key: 'bf5286abefe0659f2bfd542e03ddbd2310e1137f', class: "seki-item", part: "item", role: isInteractive ? 'option' : undefined, tabindex: isInteractive ? 0 : -1, "aria-selected": this.active ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '5e5938444cc4616cc6ed9a289e2b92cc9fa64209', class: "seki-item__leading", part: "leading" }, h("slot", { key: 'eab7c37f91894288e39e564086916fbc9a3c42c2', name: "leading" })), h("span", { key: 'a056010ceaf400c7015959d73b7e2bb2af5e6131', class: "seki-item__content", part: "content" }, h("slot", { key: '003d902c057805f00ae955e6772ed50ed62a2f33' })), h("span", { key: '9c46eccc15a75e2f938183c06a82fe0d861f487f', class: "seki-item__trailing", part: "trailing" }, h("slot", { key: 'adfa6b176d5b72a990868c1454d3676502cc3396', name: "trailing" })))));
     }
     static get is() { return "seki-item"; }
     static get encapsulation() { return "shadow"; }
@@ -174,4 +181,5 @@ export class SekiItem {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }