@sekiui/elements 0.0.78 → 0.0.81

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @component seki-skeleton
  * @description A loading placeholder component that displays an animated skeleton while content is loading
@@ -14,8 +15,14 @@ export class SekiSkeleton {
                 `Consider using a shorter, more concise label.`);
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("div", { key: 'a9b228fb094ae04f6500bba677c04543b7e3b9b1', class: "skeleton", part: "skeleton", role: "status", "aria-busy": "true", "aria-label": this.ariaLabel || undefined }));
+        return (h("div", { key: '89611b9f9a34c2a81d172ac96f5277c4c9ffb48a', class: "skeleton", part: "skeleton", role: "status", "aria-busy": "true", "aria-label": this.ariaLabel || undefined }));
     }
     static get is() { return "seki-skeleton"; }
     static get encapsulation() { return "shadow"; }
@@ -58,4 +65,5 @@ export class SekiSkeleton {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @component seki-slider
  * @description An input where the user selects a value from within a given range.
@@ -233,7 +234,11 @@ export class SekiSlider {
     /**
      * Clean up event listeners on disconnect
      */
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         document.removeEventListener('mousemove', this.handleMouseMove);
         document.removeEventListener('mouseup', this.handleMouseUp);
         document.removeEventListener('touchmove', this.handleTouchMove);
@@ -250,7 +255,7 @@ export class SekiSlider {
         const thumbStyle = isVertical
             ? { bottom: `${percentage}%` }
             : { left: `${percentage}%` };
-        return (h(Host, { key: 'd6c8db8fb463452365008e6531cc6c9aa02410de', "data-disabled": this.disabled ? '' : null, "data-orientation": this.orientation }, h("div", { key: '02f43778cb9da71b51ca1a77b92e721ac81f449b', class: "slider", part: "slider", ref: el => this.trackEl = el, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { key: '9af0dcf1d07145db3e47dcf2702dbbb8ed8afdb3', class: "track", part: "track" }, h("div", { key: 'c434caeb355571bc8b180eefd71a3f1a565c1f96', class: "range", part: "range", style: rangeStyle })), h("div", { key: '3db4b41dcfb35dd7f5cfe2a19199be8bea845d88', class: "thumb", part: "thumb", ref: el => this.thumbEl = el, style: thumbStyle, role: "slider", tabindex: this.disabled ? -1 : 0, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.currentValue, "aria-orientation": this.orientation, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined })), this.name && (h("input", { key: '74b8a4e3512b73c69e76a7488dd53ef7f8f04811', type: "hidden", name: this.name, value: this.currentValue.toString() }))));
+        return (h(Host, { key: '5573329ccefbfdffa8fa7024555cb1a152edcc9e', "data-disabled": this.disabled ? '' : null, "data-orientation": this.orientation }, h("div", { key: '2056459f7c94a4bb44fe8404649c30dc4b33744f', class: "slider", part: "slider", ref: el => this.trackEl = el, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { key: '9b32b83d3df56b1a2bf7f9d482274a43b20ad7cf', class: "track", part: "track" }, h("div", { key: '39bca5eb52f9fb502ffc57823c0211fa4e41ee8b', class: "range", part: "range", style: rangeStyle })), h("div", { key: 'e0b3ba5336643b9bac59ab7ec3dafe728e51324e', class: "thumb", part: "thumb", ref: el => this.thumbEl = el, style: thumbStyle, role: "slider", tabindex: this.disabled ? -1 : 0, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.currentValue, "aria-orientation": this.orientation, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined })), this.name && (h("input", { key: '3821457fa093b2edd4493e61a11f799755ffb7a4', type: "hidden", name: this.name, value: this.currentValue.toString() }))));
     }
     static get is() { return "seki-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { SekiSonner } from "./seki-sonner-controller";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 const MAX_VISIBLE = 3;
 let toastCounter = 0;
 export class SekiSonnerElement {
@@ -12,9 +13,11 @@ export class SekiSonnerElement {
         this.timers = new Map();
     }
     connectedCallback() {
+        registerThemeSync(this.el);
         SekiSonner._register(this);
     }
     disconnectedCallback() {
+        unregisterThemeSync(this.el);
         SekiSonner._unregister(this);
         this.timers.forEach(t => clearTimeout(t));
         this.timers.clear();
@@ -73,7 +76,7 @@ export class SekiSonnerElement {
     }
     render() {
         const visibleToasts = this.toasts.slice(0, MAX_VISIBLE);
-        return (h(Host, { key: '73ef2ec5135be326359f27a86d0bd1795e368a9b' }, h("div", { key: 'dd802c70d969ee716d61008d4df1cfc666573106', class: `seki-sonner seki-sonner--${this.position}`, role: "region", "aria-label": "Notifications", "aria-live": "polite" }, visibleToasts.map((toast, index) => (h("div", { key: toast.id, class: {
+        return (h(Host, { key: '280d972f5c5753265dbcbaee418e9fbc5e803147' }, h("div", { key: '9c84905072f361394a026f0f0f6c64a8c2636bff', class: `seki-sonner seki-sonner--${this.position}`, role: "region", "aria-label": "Notifications", "aria-live": "polite" }, visibleToasts.map((toast, index) => (h("div", { key: toast.id, class: {
                 'seki-sonner__toast': true,
                 [`seki-sonner__toast--${toast.variant}`]: true,
                 'seki-sonner__toast--entering': !toast.removing,

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

@@ -831,19 +831,19 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .spinner--default {
+:host([data-theme='dark']) .spinner--default {
   color: var(--seki-foreground, hsl(0 0% 98%));
 }
 
-:host-context([data-theme="dark"]) .spinner--primary {
+:host([data-theme='dark']) .spinner--primary {
   color: var(--seki-primary, hsl(0 0% 98%));
 }
 
-:host-context([data-theme="dark"]) .spinner--secondary {
+:host([data-theme='dark']) .spinner--secondary {
   color: var(--seki-muted-foreground, hsl(240 5% 64.9%));
 }
 
-:host-context([data-theme="dark"]) .spinner--muted {
+:host([data-theme='dark']) .spinner--muted {
   color: var(--seki-muted, hsl(240 3.7% 15.9%));
 }
 

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Spinner component for loading states
  *
@@ -29,12 +30,18 @@ export class SekiSpinner {
             console.warn(`Invalid color "${this.color}". Must be one of: ${this.validColors.join(', ')}`);
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h(Host, { key: '8ce954d9721a101fad06bb1636f97fa3688095f0' }, h("div", { key: 'b7d94c02649e8fa5a7c8cc9eb13c05deed64c16f', part: "spinner", class: {
+        return (h(Host, { key: 'c70e0a20920e6e4aab01729012e2134c70130586' }, h("div", { key: 'ea809f6b39c89407b4477230d7a91a2e8f170fde', part: "spinner", class: {
                 'spinner': true,
                 [`spinner--${this.size}`]: true,
                 [`spinner--${this.color}`]: true,
-            }, role: "status", "aria-label": this.ariaLabel }, h("svg", { key: '1f5ef45771891cbb457ee3c4567ce705126eb51c', class: "spinner__svg", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '9f8936f64bb1839f2d3e9c40211d9f8f599a0732', class: "spinner__track", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3" }), h("circle", { key: 'f4673f9fc6d14a6dec19ead78eb049536173dda4', class: "spinner__circle", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round" })), h("span", { key: 'dfa12c2fc610237b513f4390a09ddb6ac2844382', class: "spinner__sr-only" }, this.ariaLabel))));
+            }, role: "status", "aria-label": this.ariaLabel }, h("svg", { key: '38e801bac216aac621b29adf9718a07f82cc91f6', class: "spinner__svg", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '811d328a3debd392fc1593ec567790506efb9994', class: "spinner__track", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3" }), h("circle", { key: 'a5a6930f917fcdcbc213b88c5f6e4f8886ff78a1', class: "spinner__circle", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round" })), h("span", { key: '5eb67c366bb3f9aa7c7259a1b7b9016167ce8d33', class: "spinner__sr-only" }, this.ariaLabel))));
     }
     static get is() { return "seki-spinner"; }
     static get encapsulation() { return "shadow"; }
@@ -124,4 +131,5 @@ export class SekiSpinner {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * @component seki-switch
  * @description An accessible toggle control for binary on/off states with full keyboard navigation,
@@ -77,10 +78,16 @@ export class SekiSwitch {
             this.toggle();
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const isChecked = this.isChecked;
         const dataState = isChecked ? 'checked' : 'unchecked';
-        return (h(Host, { key: 'a4a584667a29a11a950021cac3ba3e4e4cda9685', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: '1ac6f9b7bd0c90c0f3091707872da56b957b5432', class: "switch", part: "switch", role: "switch", "aria-checked": isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick }, h("span", { key: '528078b82e93f37bb0d1d2290e3f2807b6ac9d77', class: "thumb", part: "thumb" })), this.name && (h("input", { key: '277b3eac3450a5548866a97c699d0d9ccbbf5ce3', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
+        return (h(Host, { key: '70deb9f0982509c4a958444b1a095bad5ffa4d5e', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: '88b7f61aaf76c64f5b287989b03f3aab8e33e66f', class: "switch", part: "switch", role: "switch", "aria-checked": isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick }, h("span", { key: '2634d8fce3ef5bbffc02eef26e95bcb83e20be1d', class: "thumb", part: "thumb" })), this.name && (h("input", { key: '1bb7c00eb059fb6f4a766ac8f95cd5430578abce', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
     }
     static get is() { return "seki-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -282,6 +289,7 @@ export class SekiSwitch {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get listeners() {
         return [{
                 "name": "keydown",

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

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-table-body: Table body wrapper (tbody)
  *
  * @component TableBody
  */
 export class SekiTableBody {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("tbody", { key: '6e01dc17e137f1629a0543667ba30f22f67dd2c8', class: "seki-table-body" }, h("slot", { key: 'a06bce33c7afde54d0d3117025f6dbe2c64bc0cc' })));
+        return (h("tbody", { key: '1e4fd919a75e461100508728d1c3eb6d2ad6d710', class: "seki-table-body" }, h("slot", { key: 'e6009c842c42b631b469ced9af61c0321c21bdd0' })));
     }
     static get is() { return "seki-table-body"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiTableBody {
             "$": ["seki-table-body.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -14,6 +14,6 @@
   text-align: center;
 }
 
-:host-context([data-theme='dark']) .seki-table-caption {
+:host([data-theme='dark']) .seki-table-caption {
   color: var(--seki-muted-foreground, hsl(240 5% 64.9%));
 }

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

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-table-caption: Table caption element
  *
  * @component TableCaption
  */
 export class SekiTableCaption {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("caption", { key: '4db6f5f195c9609bf7be0d98c777fbe36f18fce6', class: "seki-table-caption" }, h("slot", { key: '24ceabc8f08bcae1a4e72a0fb52607fc51dcd432' })));
+        return (h("caption", { key: '7f45506111c2cc76a87ad486947b2599555afb47', class: "seki-table-caption" }, h("slot", { key: '8863c4103dc3f378367109485eedfa305dd4fd2f' })));
     }
     static get is() { return "seki-table-caption"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiTableCaption {
             "$": ["seki-table-caption.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -11,7 +11,7 @@
   color: var(--seki-foreground, hsl(240 10% 3.9%));
 }
 
-:host-context([data-theme='dark']) .seki-table-cell {
+:host([data-theme='dark']) .seki-table-cell {
   color: var(--seki-foreground, hsl(0 0% 98%));
 }
 

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-table-cell: Table data cell (td)
  *
@@ -11,12 +12,18 @@ export class SekiTableCell {
          */
         this.align = 'left';
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const style = this.width ? { width: this.width } : {};
-        return (h("td", { key: '6b7e3cf898c064855309691580f37ffa4d5e6dc7', class: {
+        return (h("td", { key: '3cab56eedd0727a8ae9d03d290fbc83443c0da7d', class: {
                 'seki-table-cell': true,
                 [`seki-table-cell--${this.align}`]: true,
-            }, style: style }, h("slot", { key: '97a2481e87713586b817166f8c3ac8753c5d24a7' })));
+            }, style: style }, h("slot", { key: '6d8a52a85a6144c34692813b08c8ee333c91dc5e' })));
     }
     static get is() { return "seki-table-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -79,4 +86,5 @@ export class SekiTableCell {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -12,7 +12,7 @@
   font-weight: var(--seki-font-weight-medium, 500);
 }
 
-:host-context([data-theme='dark']) .seki-table-footer {
+:host([data-theme='dark']) .seki-table-footer {
   border-color: var(--seki-border, hsl(240 3.7% 15.9%));
   background-color: var(--seki-muted, hsl(240 3.7% 15.9%));
 }

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

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-table-footer: Table footer wrapper (tfoot)
  *
  * @component TableFooter
  */
 export class SekiTableFooter {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("tfoot", { key: 'c076054235743711ada85fd15ae4b05332965a8a', class: "seki-table-footer" }, h("slot", { key: '50dd3181979d9dcbbacbb37c2b7a5454d4e2cce4' })));
+        return (h("tfoot", { key: '8fac6b2f1684a0c13867b8583b04d3e4c290ea7b', class: "seki-table-footer" }, h("slot", { key: '0d8a58873856f6714f3cabb7eba091d8f82a62ed' })));
     }
     static get is() { return "seki-table-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiTableFooter {
             "$": ["seki-table-footer.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -16,7 +16,7 @@
   white-space: nowrap;
 }
 
-:host-context([data-theme='dark']) .seki-table-head {
+:host([data-theme='dark']) .seki-table-head {
   color: var(--seki-muted-foreground, hsl(240 5% 64.9%));
 }
 
@@ -43,7 +43,7 @@
   color: var(--seki-foreground, hsl(240 10% 3.9%));
 }
 
-:host-context([data-theme='dark']) .seki-table-head--sortable:hover {
+:host([data-theme='dark']) .seki-table-head--sortable:hover {
   color: var(--seki-foreground, hsl(0 0% 98%));
 }
 

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-table-head: Table header cell (th)
  *
@@ -15,9 +16,15 @@ export class SekiTableHead {
          */
         this.sortable = false;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const style = this.width ? { width: this.width } : {};
-        return (h("th", { key: '1d891b2d15f6f97b98e12a8c4345d06618b2935f', class: {
+        return (h("th", { key: 'ed29045b3e433ef627dcfbf6f2a9291d366c8271', class: {
                 'seki-table-head': true,
                 [`seki-table-head--${this.align}`]: true,
                 'seki-table-head--sortable': this.sortable,
@@ -25,7 +32,7 @@ export class SekiTableHead {
                 ? 'ascending'
                 : this.sortDirection === 'desc'
                     ? 'descending'
-                    : undefined }, h("slot", { key: 'b8af7604076a9dae2184dfb13779a9dc50e595c9' }), this.sortable && this.sortDirection && (h("span", { key: '25e6578c8161903c196b4cb50afd0ccab6805627', class: "seki-table-head__sort-icon" }, this.sortDirection === 'asc' ? '↑' : '↓'))));
+                    : undefined }, h("slot", { key: '14c90fcc9faaaa396b706dec5b0a63a5aaa32c26' }), this.sortable && this.sortDirection && (h("span", { key: '5b72eaec8a900da8eccc4d6605a4e5373cfc8142', class: "seki-table-head__sort-icon" }, this.sortDirection === 'asc' ? '↑' : '↓'))));
     }
     static get is() { return "seki-table-head"; }
     static get encapsulation() { return "shadow"; }
@@ -127,4 +134,5 @@ export class SekiTableHead {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -8,7 +8,7 @@
   border-bottom: 1px solid var(--seki-border, hsl(240 5.9% 90%));
 }
 
-:host-context([data-theme='dark']) .seki-table-header {
+:host([data-theme='dark']) .seki-table-header {
   border-color: var(--seki-border, hsl(240 3.7% 15.9%));
 }
 

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

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-table-header: Table header wrapper (thead)
  *
  * @component TableHeader
  */
 export class SekiTableHeader {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("thead", { key: 'b0d7752a29e4913320abd32f309d9c21ce4c0ba2', class: "seki-table-header" }, h("slot", { key: '6793d2abc2c61adc75d4aec98fc153b874e42842' })));
+        return (h("thead", { key: '000a032fa5f4901d03a8c07441638e06d82e363e', class: "seki-table-header" }, h("slot", { key: '84f733f1f6d8b84b281fdd9346c916ed05fb3edc' })));
     }
     static get is() { return "seki-table-header"; }
     static get encapsulation() { return "shadow"; }
@@ -20,4 +27,5 @@ export class SekiTableHeader {
             "$": ["seki-table-header.css"]
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -5,7 +5,7 @@
   --seki-table-row-border: 1px solid var(--seki-border, hsl(240 5.9% 90%));
 }
 
-:host-context([data-theme='dark']) {
+:host([data-theme='dark']) {
   --seki-table-row-border: 1px solid var(--seki-border, hsl(240 3.7% 15.9%));
 }
 
@@ -19,7 +19,7 @@
   background-color: var(--seki-muted, hsl(240 4.8% 95.9%));
 }
 
-:host-context([data-theme='dark']) .seki-table-row:hover {
+:host([data-theme='dark']) .seki-table-row:hover {
   background-color: var(--seki-muted, hsl(240 3.7% 15.9%));
 }
 
@@ -27,7 +27,7 @@
   background-color: var(--seki-muted, hsl(240 4.8% 95.9%));
 }
 
-:host-context([data-theme='dark']) .seki-table-row--selected {
+:host([data-theme='dark']) .seki-table-row--selected {
   background-color: var(--seki-muted, hsl(240 3.7% 15.9%));
 }
 

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-table-row: Table row wrapper (tr)
  *
@@ -11,11 +12,17 @@ export class SekiTableRow {
          */
         this.selected = false;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("tr", { key: 'a1c4223c16bc669bd0eb61d75cdbe843537c9a19', class: {
+        return (h("tr", { key: '7064ca866bd0a0efea5552b40be304c98c5221d7', class: {
                 'seki-table-row': true,
                 'seki-table-row--selected': this.selected,
-            }, "data-state": this.selected ? 'selected' : undefined }, h("slot", { key: '0c26c48a0e6d6596a1b46d091ecd80e2b3761525' })));
+            }, "data-state": this.selected ? 'selected' : undefined }, h("slot", { key: '2a5e6c2cf9b524f730775e11685f76bf5ae5bdc7' })));
     }
     static get is() { return "seki-table-row"; }
     static get encapsulation() { return "shadow"; }
@@ -53,4 +60,5 @@ export class SekiTableRow {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

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

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * seki-table: A semantic table wrapper component
  *
@@ -18,8 +19,14 @@ import { h } from "@stencil/core";
  * </seki-table>
  */
 export class SekiTable {
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
-        return (h("div", { key: '2c514ba9293c98387826bad57731dade9aebe5e6', class: "seki-table-container" }, h("table", { key: 'fff5f04b52db6dcfd3e3ab19ac3fa4e1b27822fb', class: "seki-table", role: "table", "aria-label": this.ariaLabel }, h("slot", { key: 'ab148f8045c208faf5c257c17d7814cdd6057fb4' }))));
+        return (h("div", { key: '11d097f420a1e128a1db645f9f9f22654432ab8e', class: "seki-table-container" }, h("table", { key: '284dfa560d84e5984affcab895e981a2ca4feb31', class: "seki-table", role: "table", "aria-label": this.ariaLabel }, h("slot", { key: '321c7ee41d9d3c8ef3b9b7c1f84b96f77dc94ce9' }))));
     }
     static get is() { return "seki-table"; }
     static get encapsulation() { return "shadow"; }
@@ -56,4 +63,5 @@ export class SekiTable {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Tab content panel
  *
@@ -38,12 +39,18 @@ export class SekiTabsContent {
             });
         }
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         const isSelected = this._isSelected;
-        return (h(Host, { key: '9a6ef97de7be49c638037275b89c320ce42de415', "data-state": isSelected ? 'active' : 'inactive', role: "tabpanel", id: this.panelId, "aria-labelledby": this.triggerId, hidden: !isSelected, tabindex: isSelected ? 0 : -1 }, h("div", { key: 'dec2ea69d9479278826a7bb1066442ecdf5a0889', part: "content", class: {
+        return (h(Host, { key: '5a23d8c5925c8defc774709f4cd70938158a2a41', "data-state": isSelected ? 'active' : 'inactive', role: "tabpanel", id: this.panelId, "aria-labelledby": this.triggerId, hidden: !isSelected, tabindex: isSelected ? 0 : -1 }, h("div", { key: 'd3ed6e061c072006e2a0c804d67f21cfd29d8bee', part: "content", class: {
                 'tabs-content': true,
                 'tabs-content--active': isSelected,
-            } }, h("slot", { key: '11172c2a749e080c5fccd8c36eee86843e481e62' }))));
+            } }, h("slot", { key: 'c53d3801200719e7d73cc0220c0abf7f03b6f597' }))));
     }
     static get is() { return "seki-tabs-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -780,6 +780,6 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .tabs-list {
-  background-color: var(--seki-muted, hsl(240 3.7% 15.9%));
+:host([data-theme='dark']) .tabs-list {
+  background-color: var(--seki-muted, hsl(0, 0%, 14.9%));
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
 /**
  * Container for tab triggers
  *
@@ -12,14 +13,20 @@ export class SekiTabsList {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return tabs ? tabs._tabsContext : null;
     }
+    connectedCallback() {
+        registerThemeSync(this.el);
+    }
+    disconnectedCallback() {
+        unregisterThemeSync(this.el);
+    }
     render() {
         var _a;
         const context = this.getContext();
         const orientation = (_a = context === null || context === void 0 ? void 0 : context.orientation) !== null && _a !== void 0 ? _a : 'horizontal';
-        return (h(Host, { key: '1fd4b1af4b5659b410def2185adfaa25371668aa', "data-orientation": orientation }, h("div", { key: 'ca61e5cb06dc93d6c489515a5ca9fd5414b6b1d9', part: "list", role: "tablist", "aria-orientation": orientation, class: {
+        return (h(Host, { key: '7c6791eaaa2d7cc1defca94611c41104ae50925c', "data-orientation": orientation }, h("div", { key: '473a1f344b7f491a4d356575391784c52d6e77b6', part: "list", role: "tablist", "aria-orientation": orientation, class: {
                 'tabs-list': true,
                 [`tabs-list--${orientation}`]: true,
-            } }, h("slot", { key: '2f392142055631cb6aa72c3125f303aeef2b3124' }))));
+            } }, h("slot", { key: 'cbd529fd23f8cb23ef239caa1e0da02b635f803b' }))));
     }
     static get is() { return "seki-tabs-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/seki-tabs-trigger.css

@@ -785,7 +785,7 @@
   font-size: var(--seki-font-size-sm, 0.875rem);
   font-weight: var(--seki-font-weight-medium, 500);
   line-height: var(--seki-line-height-tight, 1.25);
-  color: var(--seki-muted-foreground, hsl(240 3.8% 46.1%));
+  color: var(--seki-muted-foreground, hsl(0, 0%, 45.1%));
   background: transparent;
   border: none;
   border-radius: var(--seki-radius-md, 0.375rem);
@@ -796,12 +796,12 @@
 }
 
 .tabs-trigger:hover:not(:disabled) {
-  color: var(--seki-foreground, hsl(240 10% 3.9%));
+  color: var(--seki-foreground, hsl(0, 0%, 3.9%));
 }
 
 .tabs-trigger--active {
-  color: var(--seki-foreground, hsl(240 10% 3.9%));
-  background-color: var(--seki-background, hsl(0 0% 100%));
+  color: var(--seki-foreground, hsl(0, 0%, 3.9%));
+  background-color: var(--seki-background, hsl(0, 0%, 100%));
   box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 }
 
@@ -811,15 +811,15 @@
 }
 
 /* Dark mode */
-:host-context([data-theme="dark"]) .tabs-trigger {
-  color: var(--seki-muted-foreground, hsl(240 5% 64.9%));
+:host([data-theme='dark']) .tabs-trigger {
+  color: var(--seki-muted-foreground, hsl(0, 0%, 63.9%));
 }
 
-:host-context([data-theme="dark"]) .tabs-trigger:hover:not(:disabled) {
-  color: var(--seki-foreground, hsl(0 0% 98%));
+:host([data-theme='dark']) .tabs-trigger:hover:not(:disabled) {
+  color: var(--seki-foreground, hsl(0, 0%, 98%));
 }
 
-:host-context([data-theme="dark"]) .tabs-trigger--active {
-  color: var(--seki-foreground, hsl(0 0% 98%));
-  background-color: var(--seki-background, hsl(240 10% 3.9%));
+:host([data-theme='dark']) .tabs-trigger--active {
+  color: var(--seki-foreground, hsl(0, 0%, 98%));
+  background-color: var(--seki-background, hsl(0, 0%, 3.9%));
 }