@sekiui/elements 0.0.80 → 0.0.82

package/dist/collection/components/alert-dialog/seki-alert-dialog-cancel.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Alert Dialog Cancel Button Component
  *
@@ -44,8 +45,14 @@ export class SekiAlertDialogCancel {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return alertDialog ? alertDialog._alertDialogContext : null;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: 'cde66d5fd3982801e90ec3facfab09962e79be6c' }, h("button", { key: 'd37b349900475d3a66cbfdd4fcbfd3652952643d', part: "cancel", type: "button", class: "cancel-button", onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: '8c0e2ef6af7437df0595f633746f54b7948a0956' }, "Cancel"))));
+        return (h(Host, { key: '4e180f0b49276a976e4e403e8312a0e032bf7625' }, h("button", { key: '55f6dd90531d626dfd9bf5b7eb19c6b206318064', part: "cancel", type: "button", class: "cancel-button", onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'bbb7efb952b69443aa8d38c8fb13d0934a9e4986' }, "Cancel"))));
     }
     static get is() { return "seki-alert-dialog-cancel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/alert-dialog/seki-alert-dialog-content.css

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

package/dist/collection/components/alert-dialog/seki-alert-dialog-content.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { trapFocus, focusFirst } from "../../utils/dialog/focus-trap";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Alert Dialog Content Component
  *
@@ -107,6 +108,12 @@ export class SekiAlertDialogContent {
             trapFocus(this.contentRef, event);
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         if (!this._isOpen) {
             return null;

package/dist/collection/components/alert-dialog/seki-alert-dialog-trigger.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Alert Dialog Trigger Component
  *
@@ -21,8 +22,14 @@ export class SekiAlertDialogTrigger {
             }
         };
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '4d00896e7f7d9054e4eeccb676fc9652464d7294' }, h("span", { key: '1486d778df145bf38725bb00a144a5e937c7de4c', part: "trigger", class: "trigger", role: "button", tabindex: "0", "aria-haspopup": "dialog", onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'd5ec068af543ed03da7c9e22150b4d188c44a07a' }))));
+        return (h(Host, { key: 'c7610107ca2d485eb9fa61efaeab21c9b2bacb1c' }, h("span", { key: '801289cc0dad5778425e9b4ed441693ebada7c85', part: "trigger", class: "trigger", role: "button", tabindex: "0", "aria-haspopup": "dialog", onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: '922e882e77c029d56819c9a96c2f6c3a9210e159' }))));
     }
     static get is() { return "seki-alert-dialog-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/alert-dialog/seki-alert-dialog.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Alert Dialog root component for confirmation dialogs
  *
@@ -80,8 +81,14 @@ export class SekiAlertDialog {
     componentDidUpdate() {
         this.updateContext();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '7b5266dec43fc5b6f3ae1de7d57cf800231d4345', "data-state": this._isOpen ? 'open' : 'closed' }, h("seki-dialog", { key: '23370bc4adf7cf9a04b76338b2b53e461cb40c20', ref: (el) => (this.dialogRef = el), open: this._isOpen, modal: true, onSekiOpenChange: this.handleOpenChange }, h("slot", { key: '69f540d9333ee34cc39637cc43936dc0b65201cb' }))));
+        return (h(Host, { key: 'd699c7b53b56deefc5ed5284abffa5dab5cd45c4', "data-state": this._isOpen ? 'open' : 'closed' }, h("seki-dialog", { key: 'a031db20f3e9233efe0001d21b40dcdb185a6d6f', ref: (el) => (this.dialogRef = el), open: this._isOpen, modal: true, onSekiOpenChange: this.handleOpenChange }, h("slot", { key: '051a7c5bfc41dcae827dcc695ba62f98e6c9365b' }))));
     }
     static get is() { return "seki-alert-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/aspect-ratio/seki-aspect-ratio.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Aspect Ratio component for maintaining consistent aspect ratios
  *
@@ -25,10 +26,16 @@ export class SekiAspectRatio {
         }
         return this.ratio;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const safeRatio = this.getSafeRatio();
         const paddingBottom = `${(1 / safeRatio) * 100}%`;
-        return (h(Host, { key: '8ea2f90ca7c6e711b36dbb27a28c6e849cf86ba1' }, h("div", { key: 'ece9e4e7dbe172734681b9dae72a67c003f091cc', part: "container", class: "aspect-ratio", style: { paddingBottom } }, h("div", { key: '6d79dc35bff15019ca59e46f48ad729a1d509b40', class: "aspect-ratio__content" }, h("slot", { key: '9585c1c954ca27d0b7c372cd9af853615067d4b3' })))));
+        return (h(Host, { key: '4740f4b0beb434f6e1a52a53e0e03d53c8250541' }, h("div", { key: '8fff3da3b21e4f988826bda79f0c2a6017751d4a', part: "container", class: "aspect-ratio", style: { paddingBottom } }, h("div", { key: '105a1af40bd320af0505942cb74810d974c251d3', class: "aspect-ratio__content" }, h("slot", { key: '8142d71534a382b6be8e37e392d12e0afc910537' })))));
     }
     static get is() { return "seki-aspect-ratio"; }
     static get encapsulation() { return "shadow"; }
@@ -66,4 +73,5 @@ export class SekiAspectRatio {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/avatar/seki-avatar-fallback.css

@@ -16,7 +16,7 @@
 }
 
 /* Dark mode support */
-:host-context([data-theme='dark']) {
+:host([data-theme='dark']) {
   --seki-avatar-fallback-bg: var(--seki-muted, hsl(240 3.7% 15.9%));
   --seki-avatar-fallback-text: var(--seki-muted-foreground, hsl(240 5% 64.9%));
 }

package/dist/collection/components/avatar/seki-avatar-fallback.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-avatar-fallback: Fallback content for avatar when image fails to load
  *
@@ -32,7 +33,11 @@ export class SekiAvatarFallback {
             this.canRender = true;
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         if (this.timeoutId) {
             clearTimeout(this.timeoutId);
         }

package/dist/collection/components/avatar/seki-avatar-image.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-avatar-image: Image element for the avatar with load/error handling
  *
@@ -34,6 +35,12 @@ export class SekiAvatarImage {
             this.avatarImageError.emit();
         };
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         if (!this.src) {
             return null;

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

@@ -24,7 +24,7 @@
 }
 
 /* Dark mode support */
-:host-context([data-theme='dark']) {
+:host([data-theme='dark']) {
   --seki-avatar-bg: var(--seki-muted, hsl(240 3.7% 15.9%));
   --seki-avatar-border: var(--seki-border, hsl(240 3.7% 15.9%));
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-avatar: Container for avatar image with fallback support
  *
@@ -54,6 +55,12 @@ export class SekiAvatar {
         this.validateSize(this.size);
         this.validateShape(this.shape);
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const classes = {
             'seki-avatar': true,
@@ -66,7 +73,7 @@ export class SekiAvatar {
             .filter(([, active]) => active)
             .map(([name]) => name)
             .join(' ');
-        return (h("span", { key: '29505452c9dc31731095f816f18cbf96579b2ed0', class: classString, role: "img" }, h("slot", { key: 'fe73f8e582a31ace433a7e3d1f514679bb58dffa' })));
+        return (h("span", { key: 'f531dd98380e0fe223b610a7c96b94f67c960027', class: classString, role: "img" }, h("slot", { key: '8c7fb2619b8850a1f9f1a1871e66bf911c8f29ec' })));
     }
     static get is() { return "seki-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-badge: Presentational badge component for displaying small pieces of information
  *
@@ -31,6 +32,12 @@ export class SekiBadge {
             this.variant = 'default';
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         // Check if using number badge mode
         const isNumberBadge = typeof this.number === 'number';

package/dist/collection/components/breadcrumb/seki-breadcrumb-ellipsis.js

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-breadcrumb-ellipsis: Collapsed state indicator for long breadcrumbs
  *
  * @component BreadcrumbEllipsis
  */
 export class SekiBreadcrumbEllipsis {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("span", { key: 'bc2012b5d7378e86473d094d8cf9e7ab4dbca013', role: "presentation", "aria-hidden": "true", class: "seki-breadcrumb-ellipsis", part: "ellipsis" }, h("svg", { key: '710f2407b6237907643ec985d362cecdc63e854d', 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("circle", { key: 'e0d7d8f6278ffaca962b2a893db8d0f402ad5bd6', cx: "12", cy: "12", r: "1" }), h("circle", { key: '11c78fe23356be1fac87a9fd8cab1b3926280407', cx: "19", cy: "12", r: "1" }), h("circle", { key: '6c93b316b801d66573e06488c626c8f089b1efa0', cx: "5", cy: "12", r: "1" })), h("span", { key: '6a8032bb99f1d844db06e4a276039e69afe2e30c', class: "sr-only" }, "More")));
+        return (h("span", { key: '470f4509f636a1fb5f9ac88bb1895fc4201697e4', role: "presentation", "aria-hidden": "true", class: "seki-breadcrumb-ellipsis", part: "ellipsis" }, h("svg", { key: '23399fd1e9fa8e5bfb2045581ccd6f6b58959292', 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("circle", { key: '03bcc3660a14ac3337760ad35b07c8dd10e27e47', cx: "12", cy: "12", r: "1" }), h("circle", { key: 'c9564ad3d72c5f74271851ecb1f788578eaf6eba', cx: "19", cy: "12", r: "1" }), h("circle", { key: '3ae46a9cfbf5a8ef5c5751801ad7cf03fda7bab1', cx: "5", cy: "12", r: "1" })), h("span", { key: '27db0c68b1e6496f04d8bedcb2e3fc7bacb266e9', class: "sr-only" }, "More")));
     }
     static get is() { return "seki-breadcrumb-ellipsis"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiBreadcrumbEllipsis {
             "$": ["seki-breadcrumb.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-breadcrumb-item: Individual breadcrumb item wrapper
  *
  * @component BreadcrumbItem
  */
 export class SekiBreadcrumbItem {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("li", { key: '1879992aa1c7e9bef61c54c55a3ed8c737be500e', class: "seki-breadcrumb-item", part: "item" }, h("slot", { key: '05fb2bb12f374564f4525a0fe30583111005f715' })));
+        return (h("li", { key: '73b248b69d5673199469a874b92f35de235a4876', class: "seki-breadcrumb-item", part: "item" }, h("slot", { key: '5981734e45550ae1cd0a52908ba91e0fd39caf9a' })));
     }
     static get is() { return "seki-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiBreadcrumbItem {
             "$": ["seki-breadcrumb.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/breadcrumb/seki-breadcrumb-link.js

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-breadcrumb-link: Navigable link in breadcrumb
  *
  * @component BreadcrumbLink
  */
 export class SekiBreadcrumbLink {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("a", { key: 'b85d3aa183bb02189a720aa4f326371325ae7d52', href: this.href, target: this.target, class: "seki-breadcrumb-link", part: "link" }, h("slot", { key: '188c6e391cfdab14fe4b803e9b6f491bb4a8fcfa' })));
+        return (h("a", { key: '45b4f2d2fdf99c0b67f5ea80f9a2ebabe95ce0bc', href: this.href, target: this.target, class: "seki-breadcrumb-link", part: "link" }, h("slot", { key: 'a29a78596e1d7831ec6b13f1c6c72505a428fe18' })));
     }
     static get is() { return "seki-breadcrumb-link"; }
     static get encapsulation() { return "shadow"; }
@@ -62,4 +69,5 @@ export class SekiBreadcrumbLink {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/breadcrumb/seki-breadcrumb-list.js

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-breadcrumb-list: Container for breadcrumb items
  *
  * @component BreadcrumbList
  */
 export class SekiBreadcrumbList {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("ol", { key: '4bdc2a4cd9eb8f06b6abadc95e06c3bb0f55adfe', class: "seki-breadcrumb-list", part: "list" }, h("slot", { key: '14bbe0eb7b4d1fa34ade4d3ccafec2db39f10479' })));
+        return (h("ol", { key: '013d91fe4207c0fad727eb69ae0abc07f384b5c3', class: "seki-breadcrumb-list", part: "list" }, h("slot", { key: 'b28787a6d52090a0e2f31a344759318592042ae1' })));
     }
     static get is() { return "seki-breadcrumb-list"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiBreadcrumbList {
             "$": ["seki-breadcrumb.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/breadcrumb/seki-breadcrumb-page.js

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-breadcrumb-page: Current page indicator (non-interactive)
  *
  * @component BreadcrumbPage
  */
 export class SekiBreadcrumbPage {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("span", { key: 'f0c713784e1db49ffb82a7c0f926680c0060572a', role: "link", "aria-disabled": "true", "aria-current": "page", class: "seki-breadcrumb-page", part: "page" }, h("slot", { key: '94ee3e40542d6433bf6c64a63bc0ecfc36d240b1' })));
+        return (h("span", { key: '8a915e146279f789b9b74b28a097c5a3cf2196ef', role: "link", "aria-disabled": "true", "aria-current": "page", class: "seki-breadcrumb-page", part: "page" }, h("slot", { key: '8ba8a7f96271903f964c63179e13b0582e6abc9d' })));
     }
     static get is() { return "seki-breadcrumb-page"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiBreadcrumbPage {
             "$": ["seki-breadcrumb.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-breadcrumb-separator: Visual separator between breadcrumb items
  *
@@ -8,9 +9,15 @@ export class SekiBreadcrumbSeparator {
     hasCustomContent() {
         return this.el.childNodes.length > 0;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const hasContent = this.hasCustomContent();
-        return (h("li", { key: '58597f85d5f431b8875253a7961bc3ed05f406f8', role: "presentation", "aria-hidden": "true", class: "seki-breadcrumb-separator", part: "separator" }, hasContent ? (h("slot", null)) : (h("svg", { 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", { d: "m9 18 6-6-6-6" })))));
+        return (h("li", { key: 'f179005a3a4f4debc1c15868b5b6802e2b292ca8', role: "presentation", "aria-hidden": "true", class: "seki-breadcrumb-separator", part: "separator" }, hasContent ? (h("slot", null)) : (h("svg", { 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", { d: "m9 18 6-6-6-6" })))));
     }
     static get is() { return "seki-breadcrumb-separator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-breadcrumb: Root breadcrumb navigation component
  *
@@ -24,8 +25,14 @@ export class SekiBreadcrumb {
          */
         this.label = 'breadcrumb';
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("nav", { key: 'b5eeaeab66fee7df6c5cda6db12509f6cac3e02d', "aria-label": this.label, class: "seki-breadcrumb", part: "breadcrumb" }, h("slot", { key: '44d0ada9391d6d333630437a56fbda4b0847e9b6' })));
+        return (h("nav", { key: '71610c9d2539fcea8de0e8beade29ede123e1398', "aria-label": this.label, class: "seki-breadcrumb", part: "breadcrumb" }, h("slot", { key: 'f7c58aacb70618a356c1c2b89f71a620f2eb849f' })));
     }
     static get is() { return "seki-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
@@ -66,4 +73,5 @@ export class SekiBreadcrumb {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiButton {
     constructor() {
         /**
@@ -26,8 +27,14 @@ export class SekiButton {
                 `Please add aria-label prop to provide an accessible name for screen readers.`);
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("button", { key: '2aee1bba0f00e8b22382da89f148d33f0a809308', class: `button button--${this.variant} button--${this.size}`, type: this.type, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.ariaLabel }, h("slot", { key: '880df2ce8f0e3506e63f7889378b221da7ff69cb' })));
+        return (h("button", { key: '2f52e535356c2d14b62c160981e91c1fe7091df4', class: `button button--${this.variant} button--${this.size}`, type: this.type, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.ariaLabel }, h("slot", { key: 'f0203d10bcf06f77cff86c4a1b3101f19b611859' })));
     }
     static get is() { return "seki-button"; }
     static get encapsulation() { return "shadow"; }
@@ -144,4 +151,5 @@ export class SekiButton {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiButtonGroup {
     constructor() {
         /**
@@ -41,11 +42,17 @@ export class SekiButtonGroup {
             button.setAttribute('data-group-orientation', this.orientation);
         });
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '80c5870a7869f8d536e8b8c693f356febf046106' }, h("div", { key: '2448a0f3264a4820332c8f8f558e55ec4e14cfdf', class: {
+        return (h(Host, { key: '278fb09497489a15ea4ed15b9a98dd371e3fe3f4' }, h("div", { key: 'c6860dc954c82c30dbd541338cf27af33fb738dd', class: {
                 'button-group': true,
                 [`button-group--${this.orientation}`]: true,
-            }, role: "group", "aria-label": this.ariaLabel }, h("slot", { key: '345fd927578ab9bef81ab2018117099d9ebcbff9', onSlotchange: () => this.updateChildButtons() }))));
+            }, role: "group", "aria-label": this.ariaLabel }, h("slot", { key: '9dbc20e14eec23655e1a96a9636dbbee874a5b62', onSlotchange: () => this.updateChildButtons() }))));
     }
     static get is() { return "seki-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@
 }
 
 /* Dark mode support */
-:host-context([data-theme='dark']) {
+:host([data-theme='dark']) {
   --seki-calendar-bg: var(--seki-background, hsl(240 10% 3.9%));
   --seki-calendar-text: var(--seki-foreground, hsl(0 0% 98%));
   --seki-calendar-muted: var(--seki-muted-foreground, hsl(240 5% 64.9%));

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { getCalendarDays, getWeekDays, getMonthLabel, getYearLabel, getPreviousMonth, getNextMonth, navigateDay, navigateWeek, isSameDay, startOfMonth, } from "../../utils/calendar/date-utils";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-calendar: A calendar component for date selection
  *
@@ -182,6 +183,12 @@ export class SekiCalendar {
         }
         return classes.join(' ');
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const selectedDate = this.parseDate(this.selected);
         const rangeStart = this.parseDate(this.rangeFrom);
@@ -200,7 +207,7 @@ export class SekiCalendar {
         });
         const monthLabel = getMonthLabel(this.displayMonth);
         const yearLabel = getYearLabel(this.displayMonth);
-        return (h("div", { key: '903b4587e54354f1b51a261dea310ba2254d4de1', class: "seki-calendar", role: "application", "aria-label": "Calendar", onKeyDown: this.handleKeyDown }, h("div", { key: '6b6002c0233214d00da57fee48b20557a60bd16c', class: "seki-calendar__header" }, h("button", { key: '029599517a3c3628d3ce38633942681ad9d721b4', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to previous month", onClick: this.handlePreviousMonth }, h("svg", { key: '8393cf189dc8e6b11b6b3beac79a5111c58a8aab', 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("path", { key: '5a9ff4669f2d6afb41f9aba9c618b00decc85e6c', d: "m15 18-6-6 6-6" }))), h("div", { key: 'eb0f6e91aced59ffa76de321237a85ba9c2ef9de', class: "seki-calendar__heading" }, h("span", { key: 'cc68f622d4169d5133132711dfe94be336a12497', class: "seki-calendar__month" }, monthLabel), h("span", { key: '90707dd4285d146b4b732d584fb1eb092362d8e7', class: "seki-calendar__year" }, yearLabel)), h("button", { key: '8058724972a6071cb58462c950735d30b6a755ba', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to next month", onClick: this.handleNextMonth }, h("svg", { key: 'b1395ddb85a3073f58bf8a2eb83a98bdd4057719', 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("path", { key: 'fe81b15ab03ee5c76d6f67f9752077ca1e7cb1b4', d: "m9 18 6-6-6-6" })))), h("table", { key: 'f0f3e1a8c82bec20c2631d7952d36e6916d4d3eb', class: "seki-calendar__table", role: "grid", "aria-label": `${monthLabel} ${yearLabel}` }, h("thead", { key: '049ac75f909b30b7830ad5f6382f41ea2fa27006' }, h("tr", { key: 'eafb0f4744fc74c6bd3ce5ac2a9c98d217880667', class: "seki-calendar__weekdays" }, this.weekDays.map(day => (h("th", { class: "seki-calendar__weekday", scope: "col", "aria-label": day }, day.slice(0, 2)))))), h("tbody", { key: '3a3a817792a1cf6c5f07f23ca50f524e95e423f0' }, weeks.map((week, weekIndex) => (h("tr", { key: weekIndex, class: "seki-calendar__week" }, week.map((day, dayIndex) => (h("td", { key: dayIndex, class: "seki-calendar__cell", role: "gridcell", "aria-selected": day.isSelected || day.isRangeStart || day.isRangeEnd, "aria-disabled": day.isDisabled }, h("button", { type: "button", class: this.getDayClasses(day), tabIndex: day.isSelected || day.isToday ? 0 : -1, disabled: day.isDisabled, onClick: () => this.handleDayClick(day), "aria-label": day.date.toDateString() }, day.dayOfMonth)))))))))));
+        return (h("div", { key: '6dd085167df7ebde0ea2b2a78cb69c0cb08d189f', class: "seki-calendar", role: "application", "aria-label": "Calendar", onKeyDown: this.handleKeyDown }, h("div", { key: '2039c31e71ac75793b76b9a232494d93a0728ff2', class: "seki-calendar__header" }, h("button", { key: '12cf036cd14c37c50e8fedf34e0dde5bdfca9097', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to previous month", onClick: this.handlePreviousMonth }, h("svg", { key: 'a670a544036a499a6c50e3b2c2d7c04bd25890af', 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("path", { key: '44d54670790caf5a4028cbaf035840838689bb8b', d: "m15 18-6-6 6-6" }))), h("div", { key: 'ca6bdde6daa3f73aed96fcbaa1757f7ba6fd6231', class: "seki-calendar__heading" }, h("span", { key: 'ae1329a37c9b455d2bf1ee4e1c76dd497503ea46', class: "seki-calendar__month" }, monthLabel), h("span", { key: '886f09bd67d3b6616d57a109fce4777ae6198f26', class: "seki-calendar__year" }, yearLabel)), h("button", { key: '2eb3cd2d5285ee950f5d68085f168bf574c0b687', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to next month", onClick: this.handleNextMonth }, h("svg", { key: '1c0b77760c152a1a10fba28354e7187526451174', 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("path", { key: '9dbc344dff2b49deb80439b65f73af6033169a53', d: "m9 18 6-6-6-6" })))), h("table", { key: '39ade9c223d0c5304ce100aafcbb9788a798696a', class: "seki-calendar__table", role: "grid", "aria-label": `${monthLabel} ${yearLabel}` }, h("thead", { key: '7607c9956a0a9e447ecdd9f845c0ddf0db4fc168' }, h("tr", { key: '7fbde7681b884ccf802350372b050d05901ff0ed', class: "seki-calendar__weekdays" }, this.weekDays.map(day => (h("th", { class: "seki-calendar__weekday", scope: "col", "aria-label": day }, day.slice(0, 2)))))), h("tbody", { key: '029dd32bf9fd76f170d59318a60f1ab54d144e2a' }, weeks.map((week, weekIndex) => (h("tr", { key: weekIndex, class: "seki-calendar__week" }, week.map((day, dayIndex) => (h("td", { key: dayIndex, class: "seki-calendar__cell", role: "gridcell", "aria-selected": day.isSelected || day.isRangeStart || day.isRangeEnd, "aria-disabled": day.isDisabled }, h("button", { type: "button", class: this.getDayClasses(day), tabIndex: day.isSelected || day.isToday ? 0 : -1, disabled: day.isDisabled, onClick: () => this.handleDayClick(day), "aria-label": day.date.toDateString() }, day.dayOfMonth)))))))))));
     }
     static get is() { return "seki-calendar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Optional action area within card header for buttons or menus.
  * Provides flex layout with automatic right-alignment.
@@ -9,8 +10,14 @@ import { h } from "@stencil/core";
  * </seki-card-action>
  */
 export class CardAction {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("div", { key: '3b5100339f2ab1088631ca62b7625868dfddfceb', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: '58333d05646fc464964b69263a369ca134d2aa37' })));
+        return (h("div", { key: 'bcdd8cc6786a1afd136ce00291dfab58bb58c27d', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: 'a0ba7209a4ee887f161008c4fef7c86fcf75b4ac' })));
     }
     static get is() { return "seki-card-action"; }
     static get encapsulation() { return "shadow"; }
@@ -47,4 +54,5 @@ export class CardAction {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Main content body of the card.
  * Flexible container for any content (text, forms, lists, etc.)
@@ -10,8 +11,14 @@ import { h } from "@stencil/core";
  * </seki-card-content>
  */
 export class CardContent {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("div", { key: '723cf13a21e569225d661e2cf962ba4f45afc582', class: `card-content ${this.class || ''}` }, h("slot", { key: '919648bc422a5a08a0aba5214ef9fea61415bea5' })));
+        return (h("div", { key: '23be1399344a9bb1bf9bc7891a8c04494eceea42', class: `card-content ${this.class || ''}` }, h("slot", { key: 'b82650596c3082c4feea81480766968852dbffbb' })));
     }
     static get is() { return "seki-card-content"; }
     static get encapsulation() { return "shadow"; }
@@ -48,4 +55,5 @@ export class CardContent {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Secondary descriptive text below the card title.
  * Renders as paragraph with muted text color.
@@ -7,8 +8,14 @@ import { h } from "@stencil/core";
  * <seki-card-description>Description text</seki-card-description>
  */
 export class CardDescription {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("p", { key: '776d97aad3d4a5fd6ec57b55b6b4e0ad8f567fc1', class: `card-description ${this.class || ''}` }, h("slot", { key: '85c7a7a07621df938d844af07729e5c4801d2f74' })));
+        return (h("p", { key: 'a56fd51efa05d0d5e98d10de1bc82eb72c60f5a4', class: `card-description ${this.class || ''}` }, h("slot", { key: 'f8d4b0ce661837d761c579e418d5d70457ab1937' })));
     }
     static get is() { return "seki-card-description"; }
     static get encapsulation() { return "shadow"; }
@@ -45,4 +52,5 @@ export class CardDescription {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }