@sekiui/elements 0.0.80 → 0.0.81

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-native-select: Styled native HTML select wrapper
  *
@@ -27,8 +28,14 @@ export class SekiNativeSelect {
             this.sekiChange.emit({ value: select.value });
         };
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '8f1bad88434857a6a0d9e11789a59dc9dc5bd65b', class: { 'seki-native-select--disabled': this.disabled } }, h("div", { key: 'b78c09b9536e42d64ce478276e973e043123fe89', class: "seki-native-select" }, h("select", { key: 'f593959bb9601962e612944c36aeb57abc2fbf7f', class: "seki-native-select__select", name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.ariaLabel, onChange: this.handleChange }, this.placeholder && (h("option", { key: '0785b1ae6dc07faf190644a80b00a55f01921d1b', value: "", disabled: true, selected: !this.value && !this.defaultValue }, this.placeholder)), h("slot", { key: 'bf81ecba782783c4839ab7d3fbceb15b8fa74e1c' })), h("svg", { key: '500a8bd3de14952bded1cb5c7ef8283d9424b6e1', class: "seki-native-select__chevron", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: 'e71d6349f6603e7d7ecdbabe06d507ce00cc9d50', d: "m6 9 6 6 6-6" })))));
+        return (h(Host, { key: '473d0b3862ba2bfb6a54819317446f6fc89bec55', class: { 'seki-native-select--disabled': this.disabled } }, h("div", { key: '5c11b0326bcc5fdcff93053000ce9afcc18b5c88', class: "seki-native-select" }, h("select", { key: '059b10b0119e3861e9836663031c382fd77bccf3', class: "seki-native-select__select", name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.ariaLabel, onChange: this.handleChange }, this.placeholder && (h("option", { key: 'c23508ccd0472e76440cc464a0b775b2bc326b94', value: "", disabled: true, selected: !this.value && !this.defaultValue }, this.placeholder)), h("slot", { key: '700efca1da6876a2b4e495fb5cb19f38b27ee323' })), h("svg", { key: 'a1ae14642a4ed5fd2f0a7aca9c1e0bdd24729054', class: "seki-native-select__chevron", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '82bdd10cbb31ab91392cc8723c153735d76f68c5', d: "m6 9 6 6 6-6" })))));
     }
     static get is() { return "seki-native-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/navigation-menu/seki-navigation-menu-content.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiNavigationMenuContent {
     constructor() {
         // =========================================================================
@@ -62,7 +63,11 @@ export class SekiNavigationMenuContent {
     componentDidLoad() {
         this.setupContentInteractions();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         this.cleanupContentInteractions();
     }
     // =========================================================================
@@ -193,13 +198,13 @@ export class SekiNavigationMenuContent {
         if (this.layout === 'grid') {
             customStyles['--content-columns'] = String(this.columns);
         }
-        return (h(Host, { key: '66ff833f203aec61698dd3ea8c215ec21b986bc6', class: {
+        return (h(Host, { key: '3ac376eb7a89b0051be8d32d52917ae8fa76ed63', class: {
                 'navigation-menu-content': true,
                 'navigation-menu-content--open': this.isOpen,
                 'navigation-menu-content--mobile': this.isMobile,
                 [`navigation-menu-content--layout-${this.layout}`]: true,
                 [`navigation-menu-content--align-${this.align}`]: true,
-            }, style: customStyles }, h("div", { key: '7cecc1f1d9bf627ae982991722dc977483c39892', id: `content-${itemId}`, class: "navigation-menu-content__inner", role: "menu", "aria-labelledby": `trigger-${itemId}` }, h("slot", { key: 'db6b30eb556ebed0907ead2a3182a9691e8e784f' }))));
+            }, style: customStyles }, h("div", { key: 'e11577bb89474433f31fb195999cbfc6b51c5af7', id: `content-${itemId}`, class: "navigation-menu-content__inner", role: "menu", "aria-labelledby": `trigger-${itemId}` }, h("slot", { key: '863bf44d927def8b4ae4c306d8b41e8a169e8eaa' }))));
     }
     static get is() { return "seki-navigation-menu-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 let itemIdCounter = 0;
 export class SekiNavigationMenuItem {
     constructor() {
@@ -29,7 +30,11 @@ export class SekiNavigationMenuItem {
     componentDidLoad() {
         this.registerWithParent();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         this.unregisterFromParent();
     }
     // =========================================================================
@@ -86,12 +91,12 @@ export class SekiNavigationMenuItem {
         return this.parentMenu;
     }
     render() {
-        return (h(Host, { key: '7fefb0c419a0d84ce1c56eb8e9be3ed9df0fa97a', class: {
+        return (h(Host, { key: '0a5551472dc486b00e5228e4dfc8aa1d61fa89b8', class: {
                 'navigation-menu-item': true,
                 'navigation-menu-item--open': this.isOpen,
                 'navigation-menu-item--mobile': this.isMobile,
                 'navigation-menu-item--mobile-expanded': this.mobileExpanded,
-            }, "data-item-id": this.itemId }, h("li", { key: '5eee0169ffaf8af408abfabab8fa0db20db7d2b9', class: "navigation-menu-item__container", role: "none" }, h("slot", { key: 'fdf76b7494dbc8377540b1407544c8ab99b68ef5' }))));
+            }, "data-item-id": this.itemId }, h("li", { key: '4bcd8edafa25aff059eb81933543239dbba486fe', class: "navigation-menu-item__container", role: "none" }, h("slot", { key: '93988867d4cd9f8d02af17a8f9569b213638cd6b' }))));
     }
     static get is() { return "seki-navigation-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation-menu/seki-navigation-menu-link.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiNavigationMenuLink {
     constructor() {
         // =========================================================================
@@ -65,15 +66,21 @@ export class SekiNavigationMenuLink {
             parent = parent.parentElement;
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const hasDescription = Boolean(this.description);
-        return (h(Host, { key: 'ab26e14f38e14d8691840a943eb0dffcd5012258', class: {
+        return (h(Host, { key: '502ddacfbfbf646b1e59e14c61aeafdb6f88abfc', class: {
                 'navigation-menu-link': true,
                 'navigation-menu-link--active': this.active,
                 'navigation-menu-link--disabled': this.disabled,
                 'navigation-menu-link--in-content': this.isInContent,
                 'navigation-menu-link--with-description': hasDescription,
-            } }, h("a", { key: '89080bdcab9b2b71ab8f1c7a3658040a484d8d99', class: "navigation-menu-link__anchor", href: this.disabled ? undefined : this.href, target: this.target || undefined, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, role: this.isInContent ? 'menuitem' : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, hasDescription ? (h("div", { class: "navigation-menu-link__content" }, h("span", { class: "navigation-menu-link__title" }, h("slot", null)), h("span", { class: "navigation-menu-link__description" }, this.description))) : (h("slot", null)))));
+            } }, h("a", { key: 'b51e731ebc66a823e3e3a4f8d5cab5b65f97f087', class: "navigation-menu-link__anchor", href: this.disabled ? undefined : this.href, target: this.target || undefined, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, role: this.isInContent ? 'menuitem' : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, hasDescription ? (h("div", { class: "navigation-menu-link__content" }, h("span", { class: "navigation-menu-link__title" }, h("slot", null)), h("span", { class: "navigation-menu-link__description" }, this.description))) : (h("slot", null)))));
     }
     static get is() { return "seki-navigation-menu-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation-menu/seki-navigation-menu-list.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiNavigationMenuList {
     constructor() {
         /** Whether in mobile mode */
@@ -32,7 +33,11 @@ export class SekiNavigationMenuList {
     componentDidLoad() {
         this.setupKeyboardNavigation();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         this.cleanupKeyboardNavigation();
     }
     setupKeyboardNavigation() {
@@ -96,7 +101,7 @@ export class SekiNavigationMenuList {
         this.focusedIndex = index;
     }
     render() {
-        return (h(Host, { key: 'fc64604bce44c5a514ba7bf31dcb1c37a54cece9' }, h("ul", { key: '6f0b9bc015d8ff64bdc175624a869e742017f1b4', class: "navigation-menu-list", role: "menubar" }, h("slot", { key: 'be61b54b93c3a61d1ff18fc0010c2e1681ccc480' }))));
+        return (h(Host, { key: '38071b4039c5dfadab5c58be53d02684825cdce2' }, h("ul", { key: '44553ecd9d84dcb380414da8cf3251213a7abdc1', class: "navigation-menu-list", role: "menubar" }, h("slot", { key: 'e664d20108a1fa84918b4b14670c4f6c4c7fdaf4' }))));
     }
     static get is() { return "seki-navigation-menu-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation-menu/seki-navigation-menu-trigger.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiNavigationMenuTrigger {
     constructor() {
         // =========================================================================
@@ -172,14 +173,20 @@ export class SekiNavigationMenuTrigger {
     setMobile(mobile) {
         this.isMobile = mobile;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const itemId = this.getItemId();
-        return (h(Host, { key: 'c87073cccc2ec87cb72c766e1ff808917318fb2e', class: {
+        return (h(Host, { key: '9361deb1ef34c980f4ccff32037ffb53e972cf91', class: {
                 'navigation-menu-trigger': true,
                 'navigation-menu-trigger--open': this.isOpen,
                 'navigation-menu-trigger--disabled': this.disabled,
                 'navigation-menu-trigger--mobile': this.isMobile,
-            } }, h("button", { key: 'cc5ef6c4e29a2c8e5e5c75dbac1573a706fb1112', ref: el => (this.buttonRef = el), type: "button", class: "navigation-menu-trigger__button", role: "menuitem", "aria-haspopup": "true", "aria-expanded": String(this.isOpen), "aria-controls": `content-${itemId}`, disabled: this.disabled, tabindex: this.isOpen ? '0' : '-1', onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onKeyDown: this.handleKeyDown }, h("span", { key: '52e0775682e3b12a18b2985dadc86fffaca6a7f8', class: "navigation-menu-trigger__label" }, h("slot", { key: '34f7ffb02b73dfc72e794a4e7f53001db584b8e6' })), h("svg", { key: '436e45326da389a3d15075db07e39b4ba100723c', class: "navigation-menu-trigger__chevron", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'c8fbe13815ccce7debfc79f111bedfa3dc0fa3b8', points: "2 4 6 8 10 4" })))));
+            } }, h("button", { key: '5736fd94663ff3b16d2770917a965538ef55cda1', ref: el => (this.buttonRef = el), type: "button", class: "navigation-menu-trigger__button", role: "menuitem", "aria-haspopup": "true", "aria-expanded": String(this.isOpen), "aria-controls": `content-${itemId}`, disabled: this.disabled, tabindex: this.isOpen ? '0' : '-1', onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onKeyDown: this.handleKeyDown }, h("span", { key: 'fa626a6050e2ec49596d6c35ae2e7d211f6f41a2', class: "navigation-menu-trigger__label" }, h("slot", { key: '301f87d67ba40a52803bdabd8b92387f0303b44b' })), h("svg", { key: '9b4c4f91c5d3580e14b1ff1ac3f7fb6ea20cb4f5', class: "navigation-menu-trigger__chevron", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '9ca5be90f35f5757eeb7ea706505e83f59b221a9', points: "2 4 6 8 10 4" })))));
     }
     static get is() { return "seki-navigation-menu-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation-menu/seki-navigation-menu-viewport.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiNavigationMenuViewport {
     constructor() {
         // =========================================================================
@@ -26,7 +27,11 @@ export class SekiNavigationMenuViewport {
     componentDidLoad() {
         this.setupResizeObserver();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         this.cleanupResizeObserver();
     }
     // =========================================================================
@@ -138,14 +143,14 @@ export class SekiNavigationMenuViewport {
         return h("slot", null);
     }
     render() {
-        return (h(Host, { key: '8aae278c53014c06a9f9162116abc53b6b0e624e', class: {
+        return (h(Host, { key: 'd6488e7ee474b8a5c14bda3c4354a18c8f95e2bd', class: {
                 'navigation-menu-viewport': true,
                 'navigation-menu-viewport--visible': this.isVisible,
             }, style: {
                 '--indicator-left': `${this.indicatorLeft}px`,
                 '--content-offset': `${this.contentOffset}px`,
                 '--content-height': `${this.contentHeight}px`,
-            } }, h("div", { key: '2ca0f31b1f0fb5149b9c76a828e290af243cffb3', class: "navigation-menu-viewport__indicator" }, h("svg", { key: '77f9881f67462b6a46c2a747bffa0b977d3f1933', width: "20", height: "10", viewBox: "0 0 20 10", fill: "currentColor" }, h("polygon", { key: '5af582fa0d357e121a017d288795fad0cec76725', points: "10,0 20,10 0,10" }))), h("div", { key: 'b7869f693dc107977e377eaf4f20d971b38fe529', ref: el => (this.contentRef = el), class: "navigation-menu-viewport__content" }, this.renderContent())));
+            } }, h("div", { key: 'c154a11e43e35c612c8516ce48e90ce963f120cd', class: "navigation-menu-viewport__indicator" }, h("svg", { key: '20963cf39499036ed89db44f1b34cf6b3064e3c8', width: "20", height: "10", viewBox: "0 0 20 10", fill: "currentColor" }, h("polygon", { key: 'd69af8e0581c22acf673595deef3bdce3aa12189', points: "10,0 20,10 0,10" }))), h("div", { key: '558cd698c2a894070a80b137e36dc62d25977043', ref: el => (this.contentRef = el), class: "navigation-menu-viewport__content" }, this.renderContent())));
     }
     static get is() { return "seki-navigation-menu-viewport"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiNavigationMenu {
     constructor() {
         // =========================================================================
@@ -50,7 +51,11 @@ export class SekiNavigationMenu {
         this.setupResizeObserver();
         this.setupClickOutside();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         this.cleanupResizeObserver();
         this.cleanupClickOutside();
     }
@@ -195,10 +200,10 @@ export class SekiNavigationMenu {
     // Render
     // =========================================================================
     render() {
-        return (h(Host, { key: '06ab5b4a05f02cde28a65f2f5b2643c51cd763ea', class: {
+        return (h(Host, { key: '92a88df19e0f9b8ca9f3e61d4ee2069ca4de88e6', class: {
                 'navigation-menu': true,
                 'navigation-menu--mobile': this.isMobile,
-            } }, h("nav", { key: '9738113287f83970a6dd3a4993337186e0d7912a', class: "navigation-menu__nav", role: "navigation", "aria-label": this.ariaLabel }, this.isMobile ? this.renderMobileNav() : this.renderDesktopNav())));
+            } }, h("nav", { key: '27723ddaff49efe3255ff27643bfaf773bb6587d', class: "navigation-menu__nav", role: "navigation", "aria-label": this.ariaLabel }, this.isMobile ? this.renderMobileNav() : this.renderDesktopNav())));
     }
     renderDesktopNav() {
         return [

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

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-pagination-content: Content container for pagination items
  *
  * @component PaginationContent
  */
 export class SekiPaginationContent {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("ul", { key: '4cc959e3fe5cf9b1870a5d78fa98a027b5762c26', class: "seki-pagination-content", part: "content" }, h("slot", { key: 'd5842c876afc4944274a9866cd9d676d7f341363' })));
+        return (h("ul", { key: '0eef5df2fbff0ec8f5db67936442132e7533b644', class: "seki-pagination-content", part: "content" }, h("slot", { key: 'c94e0346dd8691971bbc35533ba5e21ef4b2f016' })));
     }
     static get is() { return "seki-pagination-content"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiPaginationContent {
             "$": ["seki-pagination.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-pagination-ellipsis: Visual indicator for skipped pages
  *
  * @component PaginationEllipsis
  */
 export class SekiPaginationEllipsis {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("span", { key: '46490efca7224ad6012c02a6f8881ae441b6d266', "aria-hidden": "true", class: "seki-pagination-ellipsis", part: "ellipsis" }, h("svg", { key: 'dedb88f2eb424c2080514474dee8017755abd5eb', 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: '5a037c1ca86a9aea3bbaeed5ebd8c533ed6bcd92', cx: "12", cy: "12", r: "1" }), h("circle", { key: 'fde882ffaaac253544293dcc494e8895614e0183', cx: "19", cy: "12", r: "1" }), h("circle", { key: 'ed13773a070b10dd316a8ef6744aed2bf774b4eb', cx: "5", cy: "12", r: "1" })), h("span", { key: 'e68f64f659ff543c97175be8f2727ba9b9cc5370', class: "sr-only" }, "More pages")));
+        return (h("span", { key: 'e5da769c4014e32a068b14f782a51004c2c38ff1', "aria-hidden": "true", class: "seki-pagination-ellipsis", part: "ellipsis" }, h("svg", { key: 'ae6e59fa83ece765609c86b9d4497456788a30fa', 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: '082f189f59a792748ec544fbb70216e64f93eb88', cx: "12", cy: "12", r: "1" }), h("circle", { key: '8275a7a6c3609af95fe65e6c041bfbd9cda6daab', cx: "19", cy: "12", r: "1" }), h("circle", { key: '3132f541937f0a7b919ba419a211825c6ec856d6', cx: "5", cy: "12", r: "1" })), h("span", { key: '00ea25eab6b6c2bada2b50693b6e249e54a1e04b', class: "sr-only" }, "More pages")));
     }
     static get is() { return "seki-pagination-ellipsis"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiPaginationEllipsis {
             "$": ["seki-pagination.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-pagination-item: Individual pagination item wrapper
  *
  * @component PaginationItem
  */
 export class SekiPaginationItem {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("li", { key: 'c0f0edc8d93ed4342f6d3e899c10f96d724b85ef', class: "seki-pagination-item", part: "item" }, h("slot", { key: 'a6973fc40b6790ccd11cd0b45ae48cff03e3d325' })));
+        return (h("li", { key: '0ee2bdea0480c4628d356e0ce62c02e48933ce79', class: "seki-pagination-item", part: "item" }, h("slot", { key: '258953b60e2e3359e3072c212c29a47e237dc6b6' })));
     }
     static get is() { return "seki-pagination-item"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiPaginationItem {
             "$": ["seki-pagination.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-pagination-link: Clickable page number link
  *
@@ -15,13 +16,19 @@ export class SekiPaginationLink {
          */
         this.disabled = false;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const Tag = this.href && !this.disabled ? 'a' : 'span';
-        return (h(Tag, { key: '8d454a19ea4373fa208e8d2c8dfe62af59f64257', href: this.href && !this.disabled ? this.href : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: {
+        return (h(Tag, { key: 'fd072e785c7d4eb8c4d2559c4b9c237b6b837580', href: this.href && !this.disabled ? this.href : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: {
                 'seki-pagination-link': true,
                 'seki-pagination-link--active': !!this.active,
                 'seki-pagination-link--disabled': !!this.disabled,
-            }, part: "link" }, h("slot", { key: '2291abe68aa04cbf49cb7624754463d0d0e1a19d' })));
+            }, part: "link" }, h("slot", { key: 'a3dcd8928129282c981c1de6f49c906304d76179' })));
     }
     static get is() { return "seki-pagination-link"; }
     static get encapsulation() { return "shadow"; }
@@ -98,4 +105,5 @@ export class SekiPaginationLink {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/pagination/seki-pagination-next.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-pagination-next: Next page navigation button
  *
@@ -11,13 +12,19 @@ export class SekiPaginationNext {
          */
         this.disabled = false;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const Tag = this.href && !this.disabled ? 'a' : 'span';
-        return (h(Tag, { key: '13114af2a724f7fbb8d67dc3882696c7c6103ab0', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to next page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
+        return (h(Tag, { key: '1175280e4938aa058ab7c8e644966a12f89b21d5', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to next page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
                 'seki-pagination-link': true,
                 'seki-pagination-nav': true,
                 'seki-pagination-link--disabled': !!this.disabled,
-            }, part: "next" }, h("span", { key: '08cc90e1a75637297b73bfcbeb923ae96370a757' }, "Next"), h("svg", { key: 'b4811948c2631d8af500b76eb06b518b0bbfd3cc', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: 'b45f5e476f0c22b7931d4ed31283d03e84be0a77', d: "m9 18 6-6-6-6" }))));
+            }, part: "next" }, h("span", { key: '1d4d9ff0373abac23d3e4aa9eb04d2e4f182ffdc' }, "Next"), h("svg", { key: '7c2a26387e55c8acf82b0a4c3d104bb284b1fe19', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: 'f4009a3e8ffe7004be2ec9a7d8a6d941facc41ef', d: "m9 18 6-6-6-6" }))));
     }
     static get is() { return "seki-pagination-next"; }
     static get encapsulation() { return "shadow"; }
@@ -74,4 +81,5 @@ export class SekiPaginationNext {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/pagination/seki-pagination-previous.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-pagination-previous: Previous page navigation button
  *
@@ -11,13 +12,19 @@ export class SekiPaginationPrevious {
          */
         this.disabled = false;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const Tag = this.href && !this.disabled ? 'a' : 'span';
-        return (h(Tag, { key: '9195b831a924418c6a08ce79f67e33db29e9297e', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to previous page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
+        return (h(Tag, { key: '14f566cd8937714764002b877b7598133e62a9a0', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to previous page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
                 'seki-pagination-link': true,
                 'seki-pagination-nav': true,
                 'seki-pagination-link--disabled': !!this.disabled,
-            }, part: "previous" }, h("svg", { key: 'd2d27b81309b2855be8c59de67ef564bbb191e91', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '86128075e4e297251043a45ca4f24ba9ea87a554', d: "m15 18-6-6 6-6" })), h("span", { key: '3147eaca5cbdf12c8b3c847657795d1f32b596a1' }, "Previous")));
+            }, part: "previous" }, h("svg", { key: '92005951a8344d359e670450c615320a95fc8228', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: 'afd0983e2b2479bbb74d0b6a84c0fec6cc97c67e', d: "m15 18-6-6 6-6" })), h("span", { key: '4c98e96c6f985ae9cc816e37c514b97e42faf54c' }, "Previous")));
     }
     static get is() { return "seki-pagination-previous"; }
     static get encapsulation() { return "shadow"; }
@@ -74,4 +81,5 @@ export class SekiPaginationPrevious {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-pagination: Root pagination navigation component
  *
@@ -19,8 +20,14 @@ import { h } from "@stencil/core";
  * </seki-pagination>
  */
 export class SekiPagination {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("nav", { key: '627850809d2aaf231a9254329dd3906574be4d8d', role: "navigation", "aria-label": "pagination", class: "seki-pagination", part: "pagination" }, h("slot", { key: '11fbbd4dc836d19f52d7301f9ff2808490c33596' })));
+        return (h("nav", { key: '6b96cf15c5ea0e5ab63c3f2bf548715f3e047fd8', role: "navigation", "aria-label": "pagination", class: "seki-pagination", part: "pagination" }, h("slot", { key: '1a03c02c329fd24ad34796891794ca3bce3b1470' })));
     }
     static get is() { return "seki-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -34,4 +41,5 @@ export class SekiPagination {
             "$": ["seki-pagination.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/popover/seki-popover-close.css

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

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Popover close button
  *
@@ -10,8 +11,14 @@ export class SekiPopoverClose {
     handleClick() {
         this.closePopover.emit();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: 'ee09b646b2935243b0b138683be493e399cc523e' }, h("button", { key: '7f6a9693611a8597a7c467bbbffaf1d5fcf36bb4', part: "close", type: "button", class: "popover-close", "aria-label": "Close" }, h("slot", { key: '41df880a88b199ec29ed5c4db23a22eabfdb4cbb' }, h("svg", { key: 'c19d5030668db12045880ef2e0783bba70cad855', 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: '9b83da119013f112fc1b6a2d6adf45f2c60e184b', d: "M18 6 6 18" }), h("path", { key: 'a006e7a1101d195f333f0e3639d9732ffe77a3aa', d: "m6 6 12 12" }))))));
+        return (h(Host, { key: '7312370b1be55cacbdf497e982635fce855af1b6' }, h("button", { key: '407bca7106d71e4ce1c87fbc95aac669f6904d79', part: "close", type: "button", class: "popover-close", "aria-label": "Close" }, h("slot", { key: '01814bdd47a683cb6ddb1b499f3ee7c0e5a7e751' }, h("svg", { key: 'fb566b8768c0255c0943204cbe2fdffcc4ddef22', 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: '2055fda483bad415580b14893cccf68e4cc86916', d: "M18 6 6 18" }), h("path", { key: '41b3f6a8ea41caf93d3dff8677babf2a2148a739', d: "m6 6 12 12" }))))));
     }
     static get is() { return "seki-popover-close"; }
     static get encapsulation() { return "shadow"; }
@@ -43,6 +50,7 @@ export class SekiPopoverClose {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get listeners() {
         return [{
                 "name": "click",

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

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Popover content panel with positioning
  *
@@ -117,6 +118,12 @@ export class SekiPopoverContent {
         this._position = { top: `${top}px`, left: `${left}px` };
         this._actualSide = side;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         if (!this._isOpen) {
             return null;

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Popover trigger - click to toggle popover
  *
@@ -11,8 +12,14 @@ export class SekiPopoverTrigger {
         event.stopPropagation();
         this.triggerClick.emit();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: 'fef9f1e92982ba53f179466a4407e4573a464b9a' }, h("span", { key: '382a66da70827299cc15c5fe311b853bb42e053e', part: "trigger", class: "popover-trigger" }, h("slot", { key: '52282cbdaa2275d93e9b5d7589c39a044d5bc001' }))));
+        return (h(Host, { key: '5319e1dae174db072fcf0bd62e136f527e12be88' }, h("span", { key: 'a60281f22833faeb0a830f2204828b50827e8b87', part: "trigger", class: "popover-trigger" }, h("slot", { key: '10e40070717c60fec8eebb12619330639275d41d' }))));
     }
     static get is() { return "seki-popover-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Popover component - floating content triggered by click
  *
@@ -143,11 +144,15 @@ export class SekiPopover {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.el._popoverContext = this.getContext();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         this.removeClickOutside();
     }
     render() {
-        return (h(Host, { key: 'd75007d41acb09b7500ccb6e533f2b23e72ab129', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '9f170c69dab28430f609f2ec35470fc820d41af9', part: "popover", class: "popover" }, h("slot", { key: '74adb8ee39da12f890d326121b0fb75d17b043ec' }))));
+        return (h(Host, { key: '7b968558f37aa4a7afae25a7d4dccf819157884b', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'b92504499e50da2607d298f295c6cbe48f582577', part: "popover", class: "popover" }, h("slot", { key: 'a130d9a553ce561c9dc64a3be26d890ed8f8271b' }))));
     }
     static get is() { return "seki-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Progress component for displaying completion progress of a task.
  * Supports determinate and indeterminate states with smooth animations.
@@ -62,11 +63,17 @@ export class SekiProgress {
         }
         return `${Math.round(this.getPercentage())}%`;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const state = this.getState();
         const percentage = this.getPercentage();
         const isIndeterminate = state === 'indeterminate';
-        return (h("div", { key: '17c93a4d1f1840b33b88643cb06ebb326ec67fb5', class: "seki-progress", role: "progressbar", "aria-valuenow": isIndeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-valuetext": this.getValueLabel(), "aria-label": this.ariaLabel, "data-state": state, "data-value": this.value, "data-max": this.max }, h("div", { key: '95a3f19ed02330c1cb53afe9e90c6692c87c5f41', class: {
+        return (h("div", { key: '0191aa314387c1b184879b543477ea71eea94bb9', class: "seki-progress", role: "progressbar", "aria-valuenow": isIndeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-valuetext": this.getValueLabel(), "aria-label": this.ariaLabel, "data-state": state, "data-value": this.value, "data-max": this.max }, h("div", { key: 'ad9c6549def836c9c259fd82c7cd5ea1b4b5df20', class: {
                 'seki-progress__indicator': true,
                 'seki-progress__indicator--indeterminate': isIndeterminate,
             }, "data-state": state, "data-value": this.value, "data-max": this.max, style: {
@@ -150,6 +157,7 @@ export class SekiProgress {
             }
         };
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "value",