@sekiui/elements 0.0.80 → 0.0.82

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Command list - scrollable container for items and groups
  *
@@ -7,8 +8,14 @@ import { h, Host } from "@stencil/core";
  * @part list - The list container
  */
 export class SekiCommandList {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '1c4cbfc9a3529056fc6562d32544a05d10dd0a74' }, h("div", { key: '548881c3455f87b1ec550a093974fc777d77c67f', part: "list", role: "listbox", class: "command-list" }, h("slot", { key: 'e1c24b6435f09ff2670f93fee9068d8985d98c20' }))));
+        return (h(Host, { key: 'cb8bdfe395d2c4277cfa01cd5a77e8e2c96693e0' }, h("div", { key: 'aea17104ac447f8ca79dddeecca5eaa5714ce161', part: "list", role: "listbox", class: "command-list" }, h("slot", { key: '4fc910699da21c4b00af85da3cb90b8b00769487' }))));
     }
     static get is() { return "seki-command-list"; }
     static get encapsulation() { return "shadow"; }
@@ -22,4 +29,5 @@ export class SekiCommandList {
             "$": ["seki-command-list.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -770,6 +770,6 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .command-separator {
+:host([data-theme='dark']) .command-separator {
   background-color: var(--seki-border, hsl(240 3.7% 15.9%));
 }

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

@@ -1,12 +1,19 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Command separator/divider
  *
  * @part separator - The separator line
  */
 export class SekiCommandSeparator {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '27f1b71235f92088bc2c55578f718540c849fcf7' }, h("div", { key: 'bca4f35f42eb8ef6ec0223d7fc5570156c2a5cdb', part: "separator", role: "separator", class: "command-separator" })));
+        return (h(Host, { key: '79f30edbb1417056cafd86983340a62d4314ad8f' }, h("div", { key: '7e04630db08a108301ae3d319f6a7174db0f910b', part: "separator", role: "separator", class: "command-separator" })));
     }
     static get is() { return "seki-command-separator"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiCommandSeparator {
             "$": ["seki-command-separator.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Command root component - command palette for navigation
  *
@@ -171,8 +172,14 @@ export class SekiCommand {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.el._commandContext = this.getContext();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: 'd8047091403fd6f965da569aa08d2d2fc6deace9' }, h("div", { key: '70b35ab946aa2ae4491e2c14b6b3f5eafa187e87', part: "command", class: "command" }, h("slot", { key: 'a50c5e10e4a81834c0c4634e85352ac02cfdf2a1' }))));
+        return (h(Host, { key: 'bc0f1600f49191e9a64dcfb3a1f01f60ce5642b1' }, h("div", { key: '8df1ba61d4a05aad8ce0a58db29c069fe0be0e75', part: "command", class: "command" }, h("slot", { key: '73b3312a01b2e435315a1bb59f32ebdcd890469e' }))));
     }
     static get is() { return "seki-command"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/context-menu/seki-context-menu-content.css

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Context Menu content panel - displays at cursor position
  *
@@ -127,6 +128,12 @@ export class SekiContextMenuContent {
         top = Math.max(margin, Math.min(top, viewport.height - contentRect.height - margin));
         this._position = { top: `${top}px`, left: `${left}px` };
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         if (!this._isOpen) {
             return null;

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Context Menu trigger component
  * Handles right-click (desktop) and long-press (touch) to open context menu
@@ -73,11 +74,15 @@ export class SekiContextMenuTrigger {
             this.longPressTimer = null;
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         this.cancelLongPress();
     }
     render() {
-        return (h(Host, { key: 'bf2e3d788c86d5a6749ff3807812409c48d1c0f6', onContextMenu: this.handleContextMenu, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, onTouchCancel: this.handleTouchEnd }, h("slot", { key: '55bf79f8ed88538cf5f8e110487230e0bc421b4c' })));
+        return (h(Host, { key: 'a5e12c0966dddf22658040b18ee8fbea44e62852', onContextMenu: this.handleContextMenu, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, onTouchCancel: this.handleTouchEnd }, h("slot", { key: 'b8a0a9d6c2eaf58117b1c8f139a959e2e5dd8066' })));
     }
     static get is() { return "seki-context-menu-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -173,4 +178,5 @@ export class SekiContextMenuTrigger {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Context Menu component - right-click context menu with items
  *
@@ -126,11 +127,15 @@ export class SekiContextMenu {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.el._contextMenuContext = this.getContext();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         this.removeClickOutside();
     }
     render() {
-        return (h(Host, { key: '960655d79557869d8b8dd1a3a777c02c35adea55', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'b15779469c6941575c0d4a3c31a90696fe773046', part: "context-menu", class: "context-menu" }, h("slot", { key: 'b4eeb0ab82cfd6c1aff8ba95d63e105efe7003fa' }))));
+        return (h(Host, { key: '82ae20d56c6474122933af9d63cf7fd671d12787', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '9a976b7c139ebd532c0096d1e80ebce309c9cb85', part: "context-menu", class: "context-menu" }, h("slot", { key: '2257fc5c3a809e1083d8bc37999b0b2d6c6e474a' }))));
     }
     static get is() { return "seki-context-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/data-table/seki-data-table.css

@@ -1035,7 +1035,7 @@
 }
 
 .data-table__row--selected:hover {
-  background: hsl(210, 100%, 94%);
+  background: var(--seki-table-row-bg-selected-hover, hsl(210, 100%, 94%));
 }
 
 .data-table__row--expanded {

package/dist/collection/components/data-table/seki-data-table.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { calculateVirtualScroll } from "./utils/virtual-scroll";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 export class SekiDataTable {
     constructor() {
         // =========================================================================
@@ -203,7 +204,11 @@ export class SekiDataTable {
         this.loadData();
         this.setupVirtualScroll();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         this.cleanupVirtualScroll();
     }
     // =========================================================================
@@ -417,10 +422,10 @@ export class SekiDataTable {
         const visibleColumns = this.getVisibleColumns();
         const totalPages = this.getTotalPages();
         const isLoading = this.state.loading || this.loading;
-        return (h(Host, { key: '9fc368527fee5479b1b9b492d7f8c7bcf5ba589a' }, h("div", { key: '628a41e98731719a10b44ec1467b53fffbd6e678', class: "data-table" }, (this.searchable || this.columnPicker) && (h("div", { key: 'fc2247fd00884cbba9dd2eb18a4082f30d662b56', class: "data-table__toolbar" }, this.searchable && (h("div", { key: '1ade4e45dca8f98e264f049a60e115ac760989fb', class: "data-table__search" }, h("input", { key: 'b655babdeecefcd0b30190453ce855d15483bb46', type: "text", class: "data-table__search-input", placeholder: this.searchPlaceholder, value: this.searchInputValue, onInput: this.handleSearchInput }), this.searchInputValue && (h("button", { key: '4553c8415c712be2f39adc6fca70e9193c8fb45c', type: "button", class: "data-table__search-clear", onClick: this.handleClearSearch, "aria-label": "Clear search" }, "\u00D7")))), h("div", { key: '59a9b65971f9a18f14dad09e9536568fd0d26bec', class: "data-table__toolbar-spacer" }), this.columnPicker && (h("button", { key: '9458f03cf668dc3de9a08be26105e6f7e4bf6331', type: "button", class: "data-table__column-picker-btn" }, "Columns")))), h("div", { key: '2de5a449632d437969d5547b9601027cf59e5f48', class: {
+        return (h(Host, { key: 'daac334a0c51a2c38d2462e69668b49b9cf0845f' }, h("div", { key: '320239a41874b49a54a36499ee9599203cc144fa', class: "data-table" }, (this.searchable || this.columnPicker) && (h("div", { key: 'e8e5e43d6a5dedf533c988a423c02f97ff7695d7', class: "data-table__toolbar" }, this.searchable && (h("div", { key: '84315865dea83f917544b7b5046f3a537bf5091c', class: "data-table__search" }, h("input", { key: '1fb3f653e5a7b9d9112837fd217f9b373f1436d9', type: "text", class: "data-table__search-input", placeholder: this.searchPlaceholder, value: this.searchInputValue, onInput: this.handleSearchInput }), this.searchInputValue && (h("button", { key: '1ae069c19e0324d3a5b7563b4857e1dc5a182f1f', type: "button", class: "data-table__search-clear", onClick: this.handleClearSearch, "aria-label": "Clear search" }, "\u00D7")))), h("div", { key: '19e524688fb1a3313038c28368305ce73cf5d418', class: "data-table__toolbar-spacer" }), this.columnPicker && (h("button", { key: 'a66bb36f6a964a7b3a7a93ba1c01753468f6eea3', type: "button", class: "data-table__column-picker-btn" }, "Columns")))), h("div", { key: 'ceecb98492c47a58e235bebf9d0d689b7efc1453', class: {
                 'data-table__container': true,
                 'data-table__container--virtual': this.virtualScroll,
-            }, ref: el => (this.scrollContainerRef = el), onScroll: this.handleScroll }, h("table", { key: '9830df916a806aefd3f3a277a424dabb0489c063', class: "data-table__table", role: "grid" }, h("thead", { key: '0e0c0b63ad05188d8ab4ab50edfc629fbac8f7e1', class: "data-table__head" }, h("tr", { key: '81308834c6489a934c0e8f08f5f5ffdbb3a97bf0', class: "data-table__header-row", role: "row" }, this.selectable && (h("th", { key: '80220c8d506067a923fb8289416685156d67e7aa', class: "data-table__th data-table__th--checkbox", role: "columnheader" }, h("input", { key: '0c4cee178a08d7458ee67f719128aefdc765319d', type: "checkbox", class: "data-table__checkbox", checked: this.isAllSelected(), indeterminate: this.isSomeSelected(), onChange: (e) => this.handleSelectAll(e.target.checked), "aria-label": "Select all rows" }))), this.expandable && (h("th", { key: 'c78c3d1d85828fffeb0b38140797f61e2daa3d17', class: "data-table__th data-table__th--expand", role: "columnheader" }, h("span", { key: '47099b66a092f732694f9e09e6391929507eb993', class: "sr-only" }, "Expand"))), visibleColumns.map(column => {
+            }, ref: el => (this.scrollContainerRef = el), onScroll: this.handleScroll }, h("table", { key: '80a809c5b512f17ed773a40728b36d174c025896', class: "data-table__table", role: "grid" }, h("thead", { key: 'bb85f8ec33fbcc335869f8e5de2e204f0512741c', class: "data-table__head" }, h("tr", { key: '371a5747df1b723be42f75de681a80211af54f8a', class: "data-table__header-row", role: "row" }, this.selectable && (h("th", { key: 'ec51e2cbbb1922ee163814bf89bd4a6e0daf1e87', class: "data-table__th data-table__th--checkbox", role: "columnheader" }, h("input", { key: '3e686e9d830035c7c95dc1978a63b353dbde72e0', type: "checkbox", class: "data-table__checkbox", checked: this.isAllSelected(), indeterminate: this.isSomeSelected(), onChange: (e) => this.handleSelectAll(e.target.checked), "aria-label": "Select all rows" }))), this.expandable && (h("th", { key: '8df31b80c23d2860932ee2a65cae7aa2e34a5388', class: "data-table__th data-table__th--expand", role: "columnheader" }, h("span", { key: '0bbf124d977839604872a9c538567d569d77d51e', class: "sr-only" }, "Expand"))), visibleColumns.map(column => {
             var _a, _b, _c;
             return (h("th", { key: column.field, class: {
                     'data-table__th': true,
@@ -436,7 +441,7 @@ export class SekiDataTable {
                     ? '↑'
                     : '↓'
                 : '↕'))), column.resizable && (h("div", { class: "data-table__resize-handle", onMouseDown: (e) => this.startResize(e, column) }))));
-        }))), h("tbody", { key: '12623fb5bc07208391929c6b05ce61f070c56a1a', class: "data-table__body", style: this.virtualScroll
+        }))), h("tbody", { key: 'cb6c923b7757fe9687556c53621defce89ee7248', class: "data-table__body", style: this.virtualScroll
                 ? {
                     height: `${this.virtualScrollState.totalHeight}px`,
                     position: 'relative',
@@ -479,12 +484,12 @@ export class SekiDataTable {
                 /* Expanded content row */
                 isExpanded && this.renderExpandedRow && (h("tr", { key: `${rowKey}-expanded`, class: "data-table__row data-table__row--expanded-content" }, h("td", { class: "data-table__td data-table__td--expanded-content", colSpan: visibleColumns.length + (this.selectable ? 1 : 0) + (this.expandable ? 1 : 0) }, h("div", { class: "data-table__expanded-content", innerHTML: this.renderExpandedRow(row) })))),
             ];
-        })))), isLoading && this.state.rows.length > 0 && (h("div", { key: '08c26b44c5ad9fa0f159007471e8f7775b2af0bb', class: "data-table__loading-overlay" }, h("div", { key: '4b561858aba01bb7f56c9096fe4753f19d17abb0', class: "data-table__loading" }, "Loading...")))), h("div", { key: 'b9f2b0129108796aeda67b4bd8d9adf966f30a61', class: "data-table__pagination" }, h("div", { key: '166cd61aecb3bb06673edddc438cc1d10923c762', class: "data-table__pagination-info" }, this.state.totalRows > 0
+        })))), isLoading && this.state.rows.length > 0 && (h("div", { key: 'f935cd42e1b83fafe8599f817e6967a81f33bb6f', class: "data-table__loading-overlay" }, h("div", { key: '77b3a15b7699f06b706cdfac8c4f6c7ad27dd732', class: "data-table__loading" }, "Loading...")))), h("div", { key: '553c6094c40a7ab852fcc84b7af4b27c1bbe473c', class: "data-table__pagination" }, h("div", { key: 'c287f97df2f2391de1f003cc1f5bb68ec65fb135', class: "data-table__pagination-info" }, this.state.totalRows > 0
             ? `${this.state.page * this.state.pageSize + 1}-${Math.min((this.state.page + 1) * this.state.pageSize, this.state.totalRows)} of ${this.state.totalRows}`
-            : '0 results'), h("div", { key: 'ca0e0318d12cbcd3183026d8dad65c405f5f273a', class: "data-table__pagination-controls" }, h("select", { key: '8f488e50d088b02db9f0f4356867362a159c769f', class: "data-table__page-size", onChange: (e) => {
+            : '0 results'), h("div", { key: '82992dabc9c7673409c3449bcc73d07156e41745', class: "data-table__pagination-controls" }, h("select", { key: '571b8039e8cc6719311d8ac03be984e2bacb53e1', class: "data-table__page-size", onChange: (e) => {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 this.handlePageSizeChange(Number(e.target.value));
-            } }, this.parsePageSizeOptions().map(size => (h("option", { key: size, value: size, selected: size === this.state.pageSize }, size, " / page")))), h("button", { key: '54d2ee6f28f01e86add900a4994d6465a8ad1c34', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(0), "aria-label": "First page" }, "\u00AB\u00AB"), h("button", { key: '152a46e4bace8a6b1773f2b1a9a1fc7db3138469', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(this.state.page - 1), "aria-label": "Previous page" }, "\u00AB"), h("span", { key: '11beadde4a2d85a96c2bf5f8799ef13892697970', class: "data-table__page-indicator" }, "Page ", this.state.page + 1, " of ", totalPages || 1), h("button", { key: '2d977d163562b236abbcdf134793fcd301366845', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(this.state.page + 1), "aria-label": "Next page" }, "\u00BB"), h("button", { key: '6a2f9e12faab5cc377f7a15c13a25115cde9ccb5', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(totalPages - 1), "aria-label": "Last page" }, "\u00BB\u00BB"))))));
+            } }, this.parsePageSizeOptions().map(size => (h("option", { key: size, value: size, selected: size === this.state.pageSize }, size, " / page")))), h("button", { key: '5104ef001a34d25f584f9fda57d16ad7c4719b41', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(0), "aria-label": "First page" }, "\u00AB\u00AB"), h("button", { key: 'fed06e6f73a10d00c360a8a5cb6911a6aa8abf0e', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(this.state.page - 1), "aria-label": "Previous page" }, "\u00AB"), h("span", { key: '52b311be026f7b0781d22f53f78782fb82e44a80', class: "data-table__page-indicator" }, "Page ", this.state.page + 1, " of ", totalPages || 1), h("button", { key: '5e9ab2a1b7efece851a231fc4988cb018133eda1', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(this.state.page + 1), "aria-label": "Next page" }, "\u00BB"), h("button", { key: 'cd203d0be8db372fe7b02aca12850ad8676d28f0', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(totalPages - 1), "aria-label": "Last page" }, "\u00BB\u00BB"))))));
     }
     static get is() { return "seki-data-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-picker/seki-date-picker.css

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

package/dist/collection/components/date-picker/seki-date-picker.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { format } from "../../utils/calendar/date-utils";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-date-picker: A date picker component with popover calendar
  *
@@ -179,18 +180,24 @@ export class SekiDatePicker {
             await this.open();
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const displayValue = this.formatDisplayValue();
         const hasValue = !!displayValue;
         const selectedDate = this.parseDate(this.value);
         const rangeFrom = this.parseDate(this.rangeFrom);
         const rangeTo = this.parseDate(this.rangeTo);
-        return (h("div", { key: '3e4341bd87e8a57a2fbc2271059e9ef0a8e0fbc6', class: "seki-date-picker" }, h("button", { key: 'd89c4b76c261196bc53ddb650a27c9c0376482ff', type: "button", ref: el => (this.triggerRef = el), class: {
+        return (h("div", { key: 'bbabba5f60a17b62bda235f9cc3ff358670fe224', class: "seki-date-picker" }, h("button", { key: 'd6b9b8567ddcedef2ff5d67870783b86bb1696e7', type: "button", ref: el => (this.triggerRef = el), class: {
                 'seki-date-picker__trigger': true,
                 'seki-date-picker__trigger--open': this.isOpen,
                 'seki-date-picker__trigger--disabled': this.disabled,
                 'seki-date-picker__trigger--has-value': hasValue,
-            }, disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.ariaLabel || this.placeholder, onClick: this.handleTriggerClick }, h("svg", { key: 'c4967f30946b4821607c15b6ac24bce3ed0d60ef', class: "seki-date-picker__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("rect", { key: 'f858f6dbd87d74ae4f879a5160ae4a6135e5479a', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: 'b83e62142e88cfbafb15a352e4b458d5e592e64d', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: 'e1fa31f7387de210a72abdb0c4d30e6c34e3b1e3', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: '56c1c6fa8c322a994609f9aecf052b51e3f3da5f', x1: "3", y1: "10", x2: "21", y2: "10" })), h("span", { key: '20209887258513bba9703a1df64f1ffed652f6f5', class: "seki-date-picker__value" }, hasValue ? displayValue : this.placeholder)), this.isOpen && (h("div", { key: 'e23dffba75bd4e6be7a7bca710b1167f1c618a52', ref: el => (this.popoverRef = el), class: "seki-date-picker__popover", role: "dialog", "aria-modal": "true", "aria-label": "Choose date" }, h("seki-calendar", { key: 'd8812610fc7edabad686536049dba6156452fbd6', mode: this.mode, selected: selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toISOString(), "range-from": rangeFrom === null || rangeFrom === void 0 ? void 0 : rangeFrom.toISOString(), "range-to": rangeTo === null || rangeTo === void 0 ? void 0 : rangeTo.toISOString(), "min-date": this.minDate, "max-date": this.maxDate, onSekiSelect: this.handleDateSelect, onSekiRangeSelect: this.handleRangeSelect })))));
+            }, disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.ariaLabel || this.placeholder, onClick: this.handleTriggerClick }, h("svg", { key: '33398d631adc72387779938b31c10775002ecd37', class: "seki-date-picker__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("rect", { key: '136391dc961c87a188d7991bcd2eee5f89e9106f', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: 'e52d4818bb75a988e85b4f9f87dca848b37482b2', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: '6695799fa2d52e8727962a658e105fb4e338ba67', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: 'e302ca230317b08a9b30582bb00fd103ed0a6f52', x1: "3", y1: "10", x2: "21", y2: "10" })), h("span", { key: '8bdad8da5be6500030cf08f4cea9be006936cd39', class: "seki-date-picker__value" }, hasValue ? displayValue : this.placeholder)), this.isOpen && (h("div", { key: 'c5d29be2df5911eb1c142c80f02e7f776722e2e3', ref: el => (this.popoverRef = el), class: "seki-date-picker__popover", role: "dialog", "aria-modal": "true", "aria-label": "Choose date" }, h("seki-calendar", { key: '98024aa83f64038eca16300f123faa0d10d563ec', mode: this.mode, selected: selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toISOString(), "range-from": rangeFrom === null || rangeFrom === void 0 ? void 0 : rangeFrom.toISOString(), "range-to": rangeTo === null || rangeTo === void 0 ? void 0 : rangeTo.toISOString(), "min-date": this.minDate, "max-date": this.maxDate, onSekiSelect: this.handleDateSelect, onSekiRangeSelect: this.handleRangeSelect })))));
     }
     static get is() { return "seki-date-picker"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dialog close button
  *
@@ -10,8 +11,14 @@ export class SekiDialogClose {
     handleClick() {
         this.closeDialog.emit();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: 'f705161cdc9feb586726e0ad1ec1dd8ded703d6a' }, h("button", { key: '68d8e18f3aeafe44b24640983e81d8061c37cdad', part: "close", type: "button", class: "dialog-close", "aria-label": "Close" }, h("slot", { key: 'e14d6f4f4cdb27f68cb2e31d0eefb7594502d666' }, h("svg", { key: 'e49c1c867252ea57e5a35adcb190e48aac953913', 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: '0960455191c1ef331a44516c92d7f9719506e086', d: "M18 6 6 18" }), h("path", { key: '6a104fe02409176caafa78542e56855395b531b1', d: "m6 6 12 12" }))), h("span", { key: 'fedf74324f5c3ebf42a1670ef79999f68c9c8fdf', class: "sr-only" }, "Close"))));
+        return (h(Host, { key: '763eba72e8bf5afb8195734ec32f8acaf3a5913a' }, h("button", { key: '03fd84d4d7c4dd98a11adc77ff86279f7fb98742', part: "close", type: "button", class: "dialog-close", "aria-label": "Close" }, h("slot", { key: '7b90c59384714d936ea74f15fbfe48d17690632a' }, h("svg", { key: '696ae556e2bbedbf2576b6741ba14d275830df71', 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: 'fcb1349484fe1c0980ab05172ed15d25ec22996b', d: "M18 6 6 18" }), h("path", { key: '4184faaead27d0ff448c72e2fa12cbfd225795f4', d: "m6 6 12 12" }))), h("span", { key: 'd14ddcc202117da5f6c06df6e233bde99a3258f0', class: "sr-only" }, "Close"))));
     }
     static get is() { return "seki-dialog-close"; }
     static get encapsulation() { return "shadow"; }
@@ -43,6 +50,7 @@ export class SekiDialogClose {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get listeners() {
         return [{
                 "name": "click",

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

@@ -799,7 +799,7 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .dialog-content {
+:host([data-theme='dark']) .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/dialog/seki-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";
 /**
  * Dialog content panel
  *
@@ -84,6 +85,12 @@ export class SekiDialogContent {
             trapFocus(this.contentRef, event);
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const context = this.getContext();
         if (!this._isOpen) {

package/dist/collection/components/dialog/seki-dialog-description.css

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

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dialog description
  *
@@ -12,9 +13,15 @@ export class SekiDialogDescription {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return dialog ? dialog._dialogContext : null;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const context = this.getContext();
-        return (h(Host, { key: 'a1ae6b847570a20430ac64232db4728c4192502d' }, h("p", { key: 'a770cf6988fd67ea52029c772e62287408a95f2e', part: "description", id: context === null || context === void 0 ? void 0 : context.descriptionId, class: "dialog-description" }, h("slot", { key: '2c01ae052d8dcc4d630079f25bbccfa0dd377182' }))));
+        return (h(Host, { key: 'a96cd28563d60287a81f3552bb24dd5a0848ce6f' }, h("p", { key: 'bb3c0fd40320017d2547049d31eb28ebcbfa6b0f', part: "description", id: context === null || context === void 0 ? void 0 : context.descriptionId, class: "dialog-description" }, h("slot", { key: 'f7238ce8bf74e7b0b38b006718548ffbd34e3628' }))));
     }
     static get is() { return "seki-dialog-description"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dialog footer container
  *
@@ -7,8 +8,14 @@ import { h, Host } from "@stencil/core";
  * @part footer - The footer container
  */
 export class SekiDialogFooter {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '5e06f6f301e7282e9eca799f8096e0dbe6fb92fc' }, h("div", { key: '659ae25bd5d66b9e555c4eef87a39e35b9a3c797', part: "footer", class: "dialog-footer" }, h("slot", { key: '92bf5764c84e010451ca07051a2e13e4957b61bd' }))));
+        return (h(Host, { key: '37ceeb33c1d6466cd1b54ed5292c6512e5d2da84' }, h("div", { key: 'dffb1016865443a7c30d51cdad7b761098a16749', part: "footer", class: "dialog-footer" }, h("slot", { key: 'dd1e6bc2135e9558dc512a40b5ac1dac8b05059f' }))));
     }
     static get is() { return "seki-dialog-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -22,4 +29,5 @@ export class SekiDialogFooter {
             "$": ["seki-dialog-footer.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dialog header container
  *
@@ -7,8 +8,14 @@ import { h, Host } from "@stencil/core";
  * @part header - The header container
  */
 export class SekiDialogHeader {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '814a0d086ecb48a8b4502a0ab5c86e3ef978f64d' }, h("div", { key: '14de697f93aefee18ad7aed53bc5ee9fbedec62f', part: "header", class: "dialog-header" }, h("slot", { key: 'd337de4928432827a3ebccdacde6fe1b0b3ad267' }))));
+        return (h(Host, { key: '8d9709cf2c39e45a670d1d84b3cd9600fd3b7a65' }, h("div", { key: '88d9ccd6f783453778f3b1ca3fc864fe2784f60a', part: "header", class: "dialog-header" }, h("slot", { key: 'a44b414a36ab84c97cc7fe0ef134f8e2d8b0673d' }))));
     }
     static get is() { return "seki-dialog-header"; }
     static get encapsulation() { return "shadow"; }
@@ -22,4 +29,5 @@ export class SekiDialogHeader {
             "$": ["seki-dialog-header.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dialog overlay (backdrop)
  *
@@ -38,6 +39,12 @@ export class SekiDialogOverlay {
             });
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         if (!this._isOpen) {
             return null;

package/dist/collection/components/dialog/seki-dialog-title.css

@@ -774,6 +774,6 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .dialog-title {
+:host([data-theme='dark']) .dialog-title {
   color: var(--seki-foreground, hsl(0 0% 98%));
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dialog title
  *
@@ -12,9 +13,15 @@ export class SekiDialogTitle {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return dialog ? dialog._dialogContext : null;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const context = this.getContext();
-        return (h(Host, { key: '37ee8e7f055b63724703101fb78657a6df1b47d9' }, h("h2", { key: 'cdbe88f96f601a24767691c6f0136f043c043238', part: "title", id: context === null || context === void 0 ? void 0 : context.titleId, class: "dialog-title" }, h("slot", { key: '9d96525ec7e3c5fe89e1969151a05e1ba56c9f72' }))));
+        return (h(Host, { key: '9b7f47a843512d5bab94ced45479fd0652ee3d14' }, h("h2", { key: '1713e948af886fea7a30e49c07a0dd923528c386', part: "title", id: context === null || context === void 0 ? void 0 : context.titleId, class: "dialog-title" }, h("slot", { key: '5b56d42f609e866f45a7c60f18b63d0aa6a15f33' }))));
     }
     static get is() { return "seki-dialog-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dialog trigger button
  *
@@ -10,8 +11,14 @@ export class SekiDialogTrigger {
     handleClick() {
         this.triggerClick.emit();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: 'f37c5bf54c9a0f23cb814de72ad45d89baa5ad6b' }, h("span", { key: '864202bf9a278826c65f853dc177890ebb50cd41', part: "trigger", class: "dialog-trigger" }, h("slot", { key: '9334d5f125ecc1992043b9a0b39ea178ae9e8dea' }))));
+        return (h(Host, { key: '060b32ae8bc7f523c16069017be71489dc1cb5dc' }, h("span", { key: 'e80af13c510611694f95e3359605370bac8580c3', part: "trigger", class: "dialog-trigger" }, h("slot", { key: 'b0b1b40326ca45cfb0d7948a8e522e2e3e2a0021' }))));
     }
     static get is() { return "seki-dialog-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { lockBodyScroll, unlockBodyScroll } from "../../utils/dialog/focus-trap";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Dialog root component for modal dialogs
  *
@@ -92,14 +93,18 @@ export class SekiDialog {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.el._dialogContext = this.getContext();
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         // Ensure body scroll is unlocked if component is removed while open
         if (this._isOpen && this.modal) {
             unlockBodyScroll();
         }
     }
     render() {
-        return (h(Host, { key: '8fd11b0e6eefe0954d582eb6ccc64ce45a8f3b2c', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '21c3c32ba69f6cb65f511fcbe752ab6d377e3ea6', part: "dialog", class: "dialog" }, h("slot", { key: '76a33312d51ceeae5d5032b281cb82bdb397861c' }))));
+        return (h(Host, { key: 'b26d6665d7cbd7cb94f53e78855c7e0018c38c8d', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '416347fc9cd44970c3a5dec4bc562692f36562d4', part: "dialog", class: "dialog" }, h("slot", { key: '116af2368448782b7c65af0bf039a8f2186d508c' }))));
     }
     static get is() { return "seki-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-direction: Direction provider for RTL/LTR text direction
  *
@@ -17,8 +18,14 @@ export class SekiDirection {
          */
         this.dir = 'ltr';
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '87ce3f9c98aa0e4d9de2cdd817899477021f2321', dir: this.dir }, h("slot", { key: 'ce19d4a3da7c8044b296c3e35f1da82a0258afcb' })));
+        return (h(Host, { key: 'ab74c2d5ab1bd283f23e63724044eb446256135f', dir: this.dir }, h("slot", { key: '78b500a0870a88e3c8210b499fabae06fd39f0ee' })));
     }
     static get is() { return "seki-direction"; }
     static get encapsulation() { return "shadow"; }
@@ -59,4 +66,5 @@ export class SekiDirection {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }