@sekiui/elements 0.0.80 → 0.0.81

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

@@ -0,0 +1,100 @@
+import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
+/**
+ * seki-chart-legend: A standalone legend component for charts.
+ *
+ * Renders a list of colored dot indicators paired with labels.
+ * Designed to complement the seki-chart component but can be used independently.
+ *
+ * @component ChartLegend
+ * @example
+ * <seki-chart-legend></seki-chart-legend>
+ * // Set config via JS:
+ * legend.config = { items: [{ label: 'Revenue', color: '#3b82f6' }] };
+ */
+export class SekiChartLegend {
+    constructor() {
+        /**
+         * Layout orientation of the legend items.
+         * @default 'horizontal'
+         */
+        this.orientation = 'horizontal';
+    }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
+    render() {
+        var _a;
+        const items = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.items) || [];
+        return (h(Host, { key: 'd5f327e7b1ffe6bed4b1ce87f190c43f32cf1799' }, h("div", { key: '45122b19055339b19a7235622d94bc739ce079a1', class: {
+                'chart-legend': true,
+                'chart-legend--vertical': this.orientation === 'vertical',
+            }, role: "list", "aria-label": "Chart legend" }, items.map((item) => (h("div", { class: "chart-legend-item", role: "listitem" }, h("span", { class: "chart-legend-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { class: "chart-legend-label" }, item.label)))))));
+    }
+    static get is() { return "seki-chart-legend"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-chart-legend.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-chart-legend.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChartLegendConfig",
+                    "resolved": "ChartLegendConfig | undefined",
+                    "references": {
+                        "ChartLegendConfig": {
+                            "location": "local",
+                            "path": "/__w/seki-ui/seki-ui/src/components/chart-legend/seki-chart-legend.tsx",
+                            "id": "src/components/chart-legend/seki-chart-legend.tsx::ChartLegendConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Legend configuration containing an array of items with label and color.\nMust be set via JavaScript property (not HTML attribute)."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'horizontal'"
+                        }],
+                    "text": "Layout orientation of the legend items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @component seki-checkbox
  * @description A checkbox control that allows users to toggle between checked, unchecked,
@@ -100,14 +101,20 @@ export class SekiCheckbox {
         this.indeterminate = false;
         this.updateFormValue();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const isChecked = this.isChecked;
         const dataState = this.indeterminate ? 'indeterminate' : isChecked ? 'checked' : 'unchecked';
-        return (h(Host, { key: '34b0d6c7d52ceaa7a5d5eb0a2130b7686174d260', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: 'fcf9da0e9fb8a1c8c2eac257db9cc47f262b92f1', type: "button", role: "checkbox", class: "checkbox", part: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: this.handleClick }, (isChecked || this.indeterminate) && (h("span", { key: '79cc7e859a2f005b38da9c49e6893de252957c13', class: "indicator", part: "indicator" }, this.indeterminate ? (
+        return (h(Host, { key: 'f7aebf321a0ce53a32adb02897b9e4aaab74fae6', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: 'd588a4f5678f590a247bf515345cb4e713d34e31', type: "button", role: "checkbox", class: "checkbox", part: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: this.handleClick }, (isChecked || this.indeterminate) && (h("span", { key: '543f7747309df449db841790076f176c75cb7771', class: "indicator", part: "indicator" }, this.indeterminate ? (
         // Minus icon for indeterminate state
         h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "5", y1: "12", x2: "19", y2: "12" }))) : (
         // Checkmark icon for checked state
-        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" })))))), this.name && (h("input", { key: '8c04db2ad54be2cd872b5f20b8d20d65aab7b348', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" })))))), this.name && (h("input", { key: '96e46550dd61f32ee3b88d279799bb713d0085ab', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
     }
     static get is() { return "seki-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -325,6 +332,7 @@ export class SekiCheckbox {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get listeners() {
         return [{
                 "name": "keydown",

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Collapsible content container with animated height transition
  *
@@ -65,7 +66,11 @@ export class SekiCollapsibleContent {
             }
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         if (this.observer) {
             this.observer.disconnect();
         }
@@ -86,11 +91,11 @@ export class SekiCollapsibleContent {
         else {
             contentStyle.height = '0';
         }
-        return (h(Host, { key: '08552032f251b2153ed96399baf8033f35c2005a', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'e7e1776ed4657907e9ef22f842dba8381b1e6ab9', ref: (el) => (this.contentRef = el), part: "content", id: contentId, role: "region", "aria-labelledby": triggerId, "aria-hidden": !this._isOpen, class: {
+        return (h(Host, { key: 'bf1ac3ee2b00d6350c7713b2de41f008a425af5b', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '5a3700546bbd8d0b85a955561c4c8239d01f871f', ref: (el) => (this.contentRef = el), part: "content", id: contentId, role: "region", "aria-labelledby": triggerId, "aria-hidden": !this._isOpen, class: {
                 'collapsible-content': true,
                 'collapsible-content--open': this._isOpen,
                 'collapsible-content--animating': this._isAnimating,
-            }, style: contentStyle }, h("div", { key: '78b071e7dfa219a4b5e41ad2e0815b9466c0ff88', class: "collapsible-content-inner" }, h("slot", { key: '374c0c15befc5bd89fe24eb49d3d3a58141157c7' })))));
+            }, style: contentStyle }, h("div", { key: '591a6ac8aecc5ea8a9a45eea4612f0ae9605b808', class: "collapsible-content-inner" }, h("slot", { key: 'cb29e456beec778419f3dd3409aa14c4ea2d2716' })))));
     }
     static get is() { return "seki-collapsible-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Trigger button for Collapsible component
  *
@@ -33,6 +34,12 @@ export class SekiCollapsibleTrigger {
             }
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         var _a, _b, _c, _d;
         const context = this.getContext();

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @slot - The collapsible content (trigger and content)
  *
@@ -86,8 +87,14 @@ export class SekiCollapsible {
             toggle: () => this.toggle(),
         };
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '8298f93a567eac41a3dc34f2a7a74931a250dd40', "data-state": this._isOpen ? 'open' : 'closed', "data-disabled": this.disabled ? '' : undefined }, h("div", { key: '1828d398c1208b55b672c73d7905e2974395d4ee', part: "collapsible", class: "collapsible" }, h("slot", { key: '4a51afc040dda3e89169ff149466a2cb1ce4821c' }))));
+        return (h(Host, { key: '2744e8f1c97ef3ff40949abf251874dc965fab08', "data-state": this._isOpen ? 'open' : 'closed', "data-disabled": this.disabled ? '' : undefined }, h("div", { key: 'b29adcbd3c847855050d5cc62c253307b7ff0e66', part: "collapsible", class: "collapsible" }, h("slot", { key: '1cbdccb75fb99de7585d2dbf525236d9265c2409' }))));
     }
     static get is() { return "seki-collapsible"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @slot - Content containing seki-combobox-input and seki-combobox-content
  */
@@ -188,7 +189,11 @@ export class SekiCombobox {
     componentDidRender() {
         this.updateContextOnElement();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         if (this.clickOutsideListener) {
             document.removeEventListener('click', this.clickOutsideListener, true);
         }
@@ -341,7 +346,7 @@ export class SekiCombobox {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: 'c3131157b6058a71f697ee10bbd97063e15a9a94', role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": this.listboxId, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledby, "aria-describedby": this.ariaDescribedby }, h("div", { key: '5142ffec4709a9d06c31ee293f1a91ea83a20721', class: "combobox-container" }, h("slot", { key: 'a17aad7f93ffb639695d99de258476e78705fb8c' }))));
+        return (h(Host, { key: '919f801ff6cc58a431ea5bb29856ae5f86d8f27b', role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": this.listboxId, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledby, "aria-describedby": this.ariaDescribedby }, h("div", { key: 'cccd52cbf60b952fa67f4e9b817ca94c44f6342a', class: "combobox-container" }, h("slot", { key: 'd7e0356c8246c1bd972e31b1045c773f8e03720a' }))));
     }
     static get is() { return "seki-combobox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,12 +41,12 @@
 
 /* Dark mode */
 :host([data-theme="dark"]) .combobox-content,
-:host-context([data-theme="dark"]) .combobox-content {
+:host([data-theme='dark']) .combobox-content {
   background-color: var(--seki-color-background-dark, hsl(240 10% 3.9%));
   border-color: var(--seki-color-border-dark, hsl(240 3.7% 15.9%));
 }
 
 :host([data-theme="dark"]) .combobox-content::-webkit-scrollbar-thumb,
-:host-context([data-theme="dark"]) .combobox-content::-webkit-scrollbar-thumb {
+:host([data-theme='dark']) .combobox-content::-webkit-scrollbar-thumb {
   background-color: var(--seki-color-accent-dark, hsl(240 3.7% 15.9%));
 }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @slot - Combobox items
  */
@@ -32,8 +33,14 @@ export class SekiComboboxContent {
             this.listboxId = ctx.listboxId;
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: 'b9ce938fca0bc5effba283b54f983d0b6bd2e92a', class: { 'hidden': !this.isOpen } }, h("div", { key: 'b3508ac1530930ac573e48e9afee4e50fba07e81', id: this.listboxId, class: "combobox-content", role: "listbox", style: { maxHeight: this.maxHeight } }, h("slot", { key: '7ff963192e3841e6c99a3dd30266ea1f23a18741' }))));
+        return (h(Host, { key: 'e5cffc7da418d1c4301833b8d7bc885d5f2b4cd3', class: { 'hidden': !this.isOpen } }, h("div", { key: '176d1beb1a15a9ad220448b59f5c06c6b6634b46', id: this.listboxId, class: "combobox-content", role: "listbox", style: { maxHeight: this.maxHeight } }, h("slot", { key: '8d9b12f877266ce3555b4f7158030b2978087736' }))));
     }
     static get is() { return "seki-combobox-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-combobox-empty: Display empty/loading/error states for combobox dropdown
  *
@@ -27,6 +28,12 @@ export class SekiComboboxEmpty {
          */
         this.reason = 'no-results';
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const containerClasses = {
             'seki-combobox-empty': true,
@@ -36,7 +43,7 @@ export class SekiComboboxEmpty {
             .filter(([, active]) => active)
             .map(([name]) => name)
             .join(' ');
-        return (h(Host, { key: 'ca9689c2f9b8e25cd3127014d911e16202017acc' }, h("div", { key: '380e9945aaf90842ef45b19522ba99ff7122c222', class: classString, role: "status" }, this.renderSlotForReason(), h("slot", { key: 'bf8def1fcbeeb3fe5130341c6b6aacc65e149e1d' }))));
+        return (h(Host, { key: '8ce873ce2fc0d496c0a0f33bf39d27b609183cdc' }, h("div", { key: '236235d8d8c64c0b35b29862da94833c2c0ac092', class: classString, role: "status" }, this.renderSlotForReason(), h("slot", { key: '50e05b08ecd59d6d05837e77de44707ee1654617' }))));
     }
     /**
      * Renders the appropriate named slot based on the current reason
@@ -100,4 +107,5 @@ export class SekiComboboxEmpty {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/combobox-group/seki-combobox-group.css

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

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @slot - Group items
  */
@@ -6,8 +7,14 @@ export class SekiComboboxGroup {
     constructor() {
         this.groupId = `combobox-group-${Math.random().toString(36).substr(2, 9)}`;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '51d97c336fc6fafebc8ba9d371e45fb7167ce79b' }, h("div", { key: '84330ccdea55f6af3fa8e4c8199b59a751cc8aa8', class: "combobox-group", role: "group", "aria-labelledby": this.groupId }, h("div", { key: 'c77f6f2dc2ce3f6d46bb517e2147963ca0630aa0', id: this.groupId, class: "combobox-group-label" }, this.label), h("div", { key: '20f2aefe322cbdbde6c17a5c8afe5dc94de0beaa', class: "combobox-group-items" }, h("slot", { key: '5ad6b369bab385c34381816b720a245ebb0282a5' })))));
+        return (h(Host, { key: '9ee4a55ca1bc9de8261c9c84606554214b49be59' }, h("div", { key: '9d73dc977b3d6e8095e7184209a5c062721d4bb0', class: "combobox-group", role: "group", "aria-labelledby": this.groupId }, h("div", { key: '9034ef03c284955ece100a644c168f59e2f8468f', id: this.groupId, class: "combobox-group-label" }, this.label), h("div", { key: '1f933f1b53e5562d7b127f0a0c0786f09d723253', class: "combobox-group-items" }, h("slot", { key: '44a9c4a12a1510c2e13624640c9bc8f80c9b1299' })))));
     }
     static get is() { return "seki-combobox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -44,4 +51,5 @@ export class SekiComboboxGroup {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/combobox-input/seki-combobox-input.css

@@ -95,24 +95,24 @@
 
 /* Dark mode */
 :host([data-theme="dark"]) .combobox-input-wrapper,
-:host-context([data-theme="dark"]) .combobox-input-wrapper {
+:host([data-theme='dark']) .combobox-input-wrapper {
   background-color: var(--seki-color-background-dark, hsl(240 10% 3.9%));
   border-color: var(--seki-color-border-dark, hsl(240 3.7% 15.9%));
 }
 
 :host([data-theme="dark"]) .combobox-input,
-:host-context([data-theme="dark"]) .combobox-input {
+:host([data-theme='dark']) .combobox-input {
   color: var(--seki-color-foreground-dark, hsl(0 0% 98%));
 }
 
 :host([data-theme="dark"]) .combobox-chip,
-:host-context([data-theme="dark"]) .combobox-chip {
+:host([data-theme='dark']) .combobox-chip {
   background: var(--seki-color-accent-dark, hsl(240 3.7% 15.9%));
 }
 
 :host([data-theme="dark"]) .combobox-count,
-:host-context([data-theme="dark"]) .combobox-count,
+:host([data-theme='dark']) .combobox-count,
 :host([data-theme="dark"]) .combobox-text,
-:host-context([data-theme="dark"]) .combobox-text {
+:host([data-theme='dark']) .combobox-text {
   color: var(--seki-color-foreground-dark, hsl(0 0% 98%));
 }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiComboboxInput {
     constructor() {
         this.searchQuery = '';
@@ -146,11 +147,17 @@ export class SekiComboboxInput {
                 return null;
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const focusedItemId = this.focusedItemValue
             ? `combobox-item-${this.focusedItemValue}`
             : undefined;
-        return (h(Host, { key: '5258342af70edbb7ee46511ef8dec3d1493a3726' }, h("div", { key: '83df0d2df21f1fdcc776a3b39bf5c8983297991b', class: "combobox-input-wrapper" }, this.renderSelectedDisplay(), h("input", { key: '1d3b7ae17909373883055eb29a06df211ed4dd38', id: this.inputId, type: "text", class: "combobox-input", value: this.searchQuery, placeholder: this.selectedItems.length > 0 && this.multiple ? '' : this.placeholder, disabled: this.disabled, "aria-autocomplete": "list", "aria-controls": this.listboxId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-activedescendant": focusedItemId, onInput: this.handleInput, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }))));
+        return (h(Host, { key: '8f1c1a67129a5af67b9fc25edb8ad9286050c2ed' }, h("div", { key: '7b389c37c779e195706fb85c534ce92b92fc9ebf', class: "combobox-input-wrapper" }, this.renderSelectedDisplay(), h("input", { key: '2ced7bdb537b4370c05481b584fca9cf989b2729', id: this.inputId, type: "text", class: "combobox-input", value: this.searchQuery, placeholder: this.selectedItems.length > 0 && this.multiple ? '' : this.placeholder, disabled: this.disabled, "aria-autocomplete": "list", "aria-controls": this.listboxId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-activedescendant": focusedItemId, onInput: this.handleInput, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }))));
     }
     static get is() { return "seki-combobox-input"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @slot - Item label content
  */
@@ -36,7 +37,11 @@ export class SekiComboboxItem {
     componentDidLoad() {
         this.updateState();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         const ctx = this.getContext();
         if (ctx) {
             ctx.unregisterItem(this.value);
@@ -66,12 +71,12 @@ export class SekiComboboxItem {
         }
     }
     render() {
-        return (h(Host, { key: 'd036637fd2c394a10066df35a4902dd6f4c7f4eb' }, h("div", { key: '9b81692cc698eff2236a942155382f995ef86d6b', id: this.itemId, class: {
+        return (h(Host, { key: '4c80e142ee793a4430187c253db78f446788f5b9' }, h("div", { key: '5a8ea6662345b5999f95033dcbdfe5f90401be7e', id: this.itemId, class: {
                 'combobox-item': true,
                 'selected': this.isSelected,
                 'focused': this.isFocused,
                 'disabled': this.disabled,
-            }, role: "option", "aria-selected": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter }, h("slot", { key: 'ecea5af9b1f8d7712255f571108dce06dde63d31' }), this.isSelected && (h("svg", { key: 'c0d9a0fa112b0d06103120e3c027b723a8710d95', class: "check-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { key: 'b099520ce1154c59932835766f33828321c435fc', points: "20 6 9 17 4 12" }))))));
+            }, role: "option", "aria-selected": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter }, h("slot", { key: '77efd44357fbd3ac3d7725920fe260ff5b3047eb' }), this.isSelected && (h("svg", { key: '039e83fd1f38fd81efc2c8100ff956786a0fed9a', class: "check-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { key: 'cc36db3f5376cc1c7022bd1f383d6b3491c72e2e', points: "20 6 9 17 4 12" }))))));
     }
     static get is() { return "seki-combobox-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Command empty state - shown when no results match
  *
@@ -31,7 +32,11 @@ export class SekiCommandEmpty {
             command.addEventListener('sekiValueChange', this.handleValueChange);
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         const command = this.el.closest('seki-command');
         if (command) {
             command.removeEventListener('sekiValueChange', this.handleValueChange);

package/dist/collection/components/command/seki-command-group.css

@@ -778,6 +778,6 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .command-group-heading {
+:host([data-theme='dark']) .command-group-heading {
   color: var(--seki-muted-foreground, hsl(0, 0%, 63.9%));
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Command group - groups related items with a heading
  *
@@ -42,6 +43,12 @@ export class SekiCommandGroup {
             });
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const shouldShow = this.forceMount || this._hasVisibleItems;
         if (!shouldShow) {

package/dist/collection/components/command/seki-command-input.css

@@ -795,18 +795,18 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .command-input-wrapper {
+:host([data-theme='dark']) .command-input-wrapper {
   border-bottom-color: var(--seki-border, hsl(0, 0%, 14.9%));
 }
 
-:host-context([data-theme="dark"]) .command-input-icon {
+:host([data-theme='dark']) .command-input-icon {
   color: var(--seki-muted-foreground, hsl(0, 0%, 63.9%));
 }
 
-:host-context([data-theme="dark"]) .command-input {
+:host([data-theme='dark']) .command-input {
   color: var(--seki-foreground, hsl(0, 0%, 98%));
 }
 
-:host-context([data-theme="dark"]) .command-input::placeholder {
+:host([data-theme='dark']) .command-input::placeholder {
   color: var(--seki-muted-foreground, hsl(0, 0%, 63.9%));
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Command input - search field for filtering items
  *
@@ -42,11 +43,17 @@ export class SekiCommandInput {
             (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
         });
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         var _a;
         const context = this.getContext();
         const value = (_a = context === null || context === void 0 ? void 0 : context.value) !== null && _a !== void 0 ? _a : '';
-        return (h(Host, { key: '5ef993848943e284ca98dbe42f822614a62c1bbc' }, h("div", { key: 'e324499834660f7f438ef0d78049ee469dee0e1a', part: "input-wrapper", class: "command-input-wrapper" }, h("svg", { key: '8f521ff3e1646fc42f7930541afa7541c9e61dfd', part: "icon", class: "command-input-icon", 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("circle", { key: 'f4a259688273cc03b65190861b48a8dcbcf95561', cx: "11", cy: "11", r: "8" }), h("path", { key: '2764a6f29fd7fa9c8a8fa9fa3655a4e732bc485f', d: "m21 21-4.3-4.3" })), h("input", { key: 'e5298b87d5f20517ea42d6191aa7b6d796987935', ref: (el) => (this.inputRef = el), part: "input", type: "text", class: "command-input", placeholder: this.placeholder, value: value, role: "combobox", "aria-expanded": "true", "aria-controls": "command-list", "aria-autocomplete": "list", onInput: this.handleInput, onKeyDown: this.handleKeyDown }))));
+        return (h(Host, { key: '202bf5221557f21ed592a9c9dee8e9d778851c58' }, h("div", { key: 'b00ba7c6a56556f86341600c45b79491b71800b2', part: "input-wrapper", class: "command-input-wrapper" }, h("svg", { key: 'f878f9056eceb777a5aa670b1003a6f386708292', part: "icon", class: "command-input-icon", 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("circle", { key: '7c4937a15d66da56d4c3e2fd188c409a137bffd3', cx: "11", cy: "11", r: "8" }), h("path", { key: '8e42924a9b3b7bdb3c211efc5cfafccf477f4077', d: "m21 21-4.3-4.3" })), h("input", { key: 'a6091fc727d9846058c3b35f45b364c635ee141a', ref: (el) => (this.inputRef = el), part: "input", type: "text", class: "command-input", placeholder: this.placeholder, value: value, role: "combobox", "aria-expanded": "true", "aria-controls": "command-list", "aria-autocomplete": "list", onInput: this.handleInput, onKeyDown: this.handleKeyDown }))));
     }
     static get is() { return "seki-command-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -798,16 +798,16 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .command-item {
+:host([data-theme='dark']) .command-item {
   color: var(--seki-foreground, hsl(0, 0%, 98%));
 }
 
-:host-context([data-theme="dark"]) .command-item:hover:not(.command-item--disabled),
-:host-context([data-theme="dark"]) .command-item--highlighted:not(.command-item--disabled) {
+:host([data-theme='dark']) .command-item:hover:not(.command-item--disabled),
+:host([data-theme='dark']) .command-item--highlighted:not(.command-item--disabled) {
   background-color: var(--seki-accent, hsl(0, 0%, 14.9%));
   color: var(--seki-accent-foreground, hsl(0, 0%, 98%));
 }
 
-:host-context([data-theme="dark"]) .command-item-shortcut {
+:host([data-theme='dark']) .command-item-shortcut {
   color: var(--seki-muted-foreground, hsl(0, 0%, 63.9%));
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Command item - selectable option in the command list
  *
@@ -61,6 +62,12 @@ export class SekiCommandItem {
     isVisible() {
         return this._visible && !this.disabled;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         if (!this._visible) {
             return h(Host, { style: { display: 'none' } });

package/dist/collection/components/command/seki-command-list.css

@@ -789,10 +789,10 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .command-list::-webkit-scrollbar-thumb {
+:host([data-theme='dark']) .command-list::-webkit-scrollbar-thumb {
   background-color: var(--seki-border, hsl(0, 0%, 14.9%));
 }
 
-:host-context([data-theme="dark"]) .command-list::-webkit-scrollbar-thumb:hover {
+:host([data-theme='dark']) .command-list::-webkit-scrollbar-thumb:hover {
   background-color: var(--seki-muted-foreground, hsl(0, 0%, 63.9%));
 }