@sekiui/elements 0.0.72 → 0.0.78

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

@@ -7,7 +7,7 @@ export class SekiSidebarMenuSkeleton {
         this.showIcon = false;
     }
     render() {
-        return (h("div", { key: 'b2780ed63983851c52cb84f504ddc5766c06e276', class: "sidebar-menu-skeleton" }, this.showIcon && h("div", { key: 'ac65f4fb8d4a7a8b0818fa2edfdaaf881d6e3068', class: "sidebar-menu-skeleton-icon" }), h("div", { key: '17c4004936ba5b7ff53c302dc6ed50944f99c757', class: "sidebar-menu-skeleton-text" })));
+        return (h("div", { key: '51708748769c1cda5f0c3324fb8308014e55bf8c', class: "sidebar-menu-skeleton" }, this.showIcon && h("div", { key: 'a182d8134c960bb416196e8ec9c890d6e55f6223', class: "sidebar-menu-skeleton-icon" }), h("div", { key: '55fbadd7be8b0470dce9eda76695d4e0b1a55b7e', class: "sidebar-menu-skeleton-text" })));
     }
     static get is() { return "seki-sidebar-menu-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sidebar/seki-sidebar-menu-sub-button.js

@@ -11,10 +11,10 @@ export class SekiSidebarMenuSubButton {
         this.disabled = false;
     }
     render() {
-        return (h("button", { key: '7c8f8dea65ec5fdae22049db234e1d3378426e5f', class: {
+        return (h("button", { key: 'b3caad25851c0380cff68ff53ddc3b0eba8d9b5e', class: {
                 'sidebar-menu-sub-button': true,
                 'sidebar-menu-sub-button--active': this.active,
-            }, disabled: this.disabled, type: "button", role: "menuitem" }, h("slot", { key: 'b38bd03e83abfe3bae661e38b835fd0ecbbdd17f' })));
+            }, disabled: this.disabled, type: "button", role: "menuitem" }, h("slot", { key: '8a16f6b2ab6682358b324a35361b1edbc9b869cb' })));
     }
     static get is() { return "seki-sidebar-menu-sub-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sidebar/seki-sidebar-menu-sub-item.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarMenuSubItem {
     render() {
-        return (h("li", { key: 'b9428a0df99658e7d40a6375a64f343ce040c401', class: "sidebar-menu-sub-item", role: "none" }, h("slot", { key: '1280494dd1923c8c7b80854a8c4d8012b8cf7210' })));
+        return (h("li", { key: 'da6e3f063785d75d55df4ec3f02c5abd7cc75ce8', class: "sidebar-menu-sub-item", role: "none" }, h("slot", { key: '5eb437e35c51ef3b90d71aed91f1a82d47a5c8ba' })));
     }
     static get is() { return "seki-sidebar-menu-sub-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sidebar/seki-sidebar-menu-sub.css

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;
@@ -860,7 +861,7 @@
   font-family: var(--seki-font-sans, system-ui, sans-serif);
   font-size: var(--seki-font-size-xs, 0.75rem);
   font-weight: var(--seki-font-weight-medium, 500);
-  line-height: 1;
+  line-height: var(--seki-leading-none, 1);
   color: var(--sidebar-foreground);
   background: transparent;
   border: none;

package/dist/collection/components/sidebar/seki-sidebar-menu-sub.js

@@ -42,13 +42,13 @@ export class SekiSidebarMenuSub {
         }
     }
     render() {
-        return (h(Host, { key: '9f160d3df68dc414f843b2b29ead4243615d19b6', "data-state": this._open ? 'open' : 'closed' }, h("div", { key: 'abab7d9799e07e30c031fbc6fea1f6370b0f4779', class: "sidebar-menu-sub" }, h("div", { key: '896e81413d42b0751384e371681297fd66d6921a', class: "sidebar-menu-sub-trigger" }, h("slot", { key: '2ee05345cb9d0b25094a3fad7f0e2e494d58b195', name: "trigger" }), h("svg", { key: 'da77ad175e5822c159f566b452f45db7d074b445', class: {
+        return (h(Host, { key: '270a4c6e8476a9c1c632adeadfb7e600cab4f4d1', "data-state": this._open ? 'open' : 'closed' }, h("div", { key: '220e31e48920b6bceafb03189bf7504e57a0afbe', class: "sidebar-menu-sub" }, h("div", { key: '67e75750cd15c30d43ad96d0f824c04d7d240d20', class: "sidebar-menu-sub-trigger" }, h("slot", { key: 'c8ba6e5194b62dd1f3c0df3b0263eec3d43f3d61', name: "trigger" }), h("svg", { key: 'd574446a8d95af718ae61e5c23e9c481d38eff1f', class: {
                 'sidebar-menu-sub-chevron': true,
                 'sidebar-menu-sub-chevron--open': this._open,
-            }, 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: 'f6cf8ab391311da9331e0b12e95b3a01577c09be', d: "m9 18 6-6-6-6" }))), h("div", { key: '28e2bdc51b0d6271666fb93ac918dd6bb5063dbc', class: {
+            }, 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: '865120802e3ffd8c54625369868578ee5b97489a', d: "m9 18 6-6-6-6" }))), h("div", { key: '31202317c60de9b380602c0eb9430da6a1ecb7ab', class: {
                 'sidebar-menu-sub-wrapper': true,
                 'sidebar-menu-sub-wrapper--open': this._open,
-            } }, h("ul", { key: 'fc2dfd789ec45422c7e38409ba9569806c4e6d7c', class: "sidebar-menu-sub-content", role: "menu", "aria-hidden": !this._open }, h("slot", { key: 'b416ed1e4fffe789e38fed65ff0cc2b480d78d5c' }))))));
+            } }, h("ul", { key: 'd112a372062a9911e7b5790e6ccc0edd55546f61', class: "sidebar-menu-sub-content", role: "menu", "aria-hidden": !this._open }, h("slot", { key: '8e34ed90e44b500287cd2f0dc217ca66eaa9084b' }))))));
     }
     static get is() { return "seki-sidebar-menu-sub"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sidebar/seki-sidebar-menu.css

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;
@@ -805,7 +806,7 @@
   font-family: var(--seki-font-sans, system-ui, sans-serif);
   font-size: var(--seki-font-size-sm, 0.875rem);
   font-weight: var(--seki-font-weight-medium, 500);
-  line-height: 1;
+  line-height: var(--seki-leading-none, 1);
   color: var(--sidebar-foreground);
   background: transparent;
   border: none;
@@ -999,7 +1000,7 @@
   padding: 0.125rem 0.375rem;
   font-size: var(--seki-font-size-xs, 0.75rem);
   font-weight: var(--seki-font-weight-medium, 500);
-  line-height: 1;
+  line-height: var(--seki-leading-none, 1);
   border-radius: var(--seki-radius-md, 0.375rem);
   background-color: var(--sidebar-primary);
   color: var(--sidebar-primary-foreground);

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarMenu {
     render() {
-        return (h("ul", { key: '935a75876257b5905110b0a5ff91d280d96d1967', class: "sidebar-menu", role: "menu" }, h("slot", { key: '6add61018c3ac7281b70647bd08d7f14e7af9f96' })));
+        return (h("ul", { key: '0952257762d7200dafe46b138ddecc836e58bf6e', class: "sidebar-menu", role: "menu" }, h("slot", { key: 'ee9977566a7f3e625db19311fd72ae7f4894a1af' })));
     }
     static get is() { return "seki-sidebar-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sidebar/seki-sidebar-provider.css

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/sidebar/seki-sidebar-provider.js

@@ -287,7 +287,7 @@ export class SekiSidebarProvider {
                     "references": {
                         "SidebarStateChangeDetail": {
                             "location": "local",
-                            "path": "/home/rockia/seki-actions-runner/_work/seki-ui/seki-ui/src/components/sidebar/seki-sidebar-provider.tsx",
+                            "path": "/__w/seki-ui/seki-ui/src/components/sidebar/seki-sidebar-provider.tsx",
                             "id": "src/components/sidebar/seki-sidebar-provider.tsx::SidebarStateChangeDetail"
                         }
                     }

package/dist/collection/components/sidebar/seki-sidebar-rail.css

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/sidebar/seki-sidebar-rail.js

@@ -9,7 +9,7 @@ export class SekiSidebarRail {
         };
     }
     render() {
-        return (h(Host, { key: 'b5d7d7ee8f50c5a3c5e1677f3bc36fc393461ff5' }, h("button", { key: '14a757cd4bef62dc789a9391139cb91b27f5d3d4', class: "sidebar-rail", type: "button", tabIndex: -1, "aria-hidden": "true", onClick: this.handleClick, title: "Toggle sidebar" }, h("slot", { key: '366a1677f0ed66a5b723783a6fc075bf165f50b0' }))));
+        return (h(Host, { key: '14562534455b696a935593052ea64e8903e0929e' }, h("button", { key: '8df6770fe2194de8a60899b4ca3b2a243df921d4', class: "sidebar-rail", type: "button", tabIndex: -1, "aria-hidden": "true", onClick: this.handleClick, title: "Toggle sidebar" }, h("slot", { key: '44795ce59ad5452c200721a04a36c50c09755b11' }))));
     }
     static get is() { return "seki-sidebar-rail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarSeparator {
     render() {
-        return (h("div", { key: '1e15eed56c1cc1d3a7e4f54800198928f127ae9c', class: "sidebar-separator", role: "separator" }));
+        return (h("div", { key: 'd30c3d1c8491d86a49b85f6063d911cd43f8ab1c', class: "sidebar-separator", role: "separator" }));
     }
     static get is() { return "seki-sidebar-separator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -30,7 +30,7 @@ export class SekiSidebarTrigger {
         this._isMobile = event.detail.isMobile;
     }
     render() {
-        return (h(Host, { key: '78c9fa0c819e80128368896afffba042e26045bd' }, h("button", { key: 'd9a46543ea2fcad836f087633d3eb5a830bd3f25', class: "sidebar-trigger", type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this._isOpen ? 'Close sidebar' : 'Open sidebar', "aria-expanded": this._isOpen ? 'true' : 'false', "data-state": this._isOpen ? 'open' : 'closed' }, h("slot", { key: '04670a9be8fc10a5e4917f6568a901131d8f896c' }, h("svg", { key: 'a5de654412aadb1d39534cec77597cbadb231828', 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: '70ebebdbb665e8639bc50efd783201067ecf41f1', width: "18", height: "18", x: "3", y: "3", rx: "2" }), h("path", { key: 'c14ca4bb0fe69d906d3700664b40d0442fb2a752', d: "M9 3v18" }))), h("span", { key: '06090a10fe7b7b7cf0ba8208dac5c07b62727839', class: "sr-only" }, this._isOpen ? 'Close sidebar' : 'Open sidebar'))));
+        return (h(Host, { key: 'a0417c0c7a1655219287b62a1ec269d335fb980d' }, h("button", { key: '7a6bc6c5543057e02e09ad1a884cea091fed3ae1', class: "sidebar-trigger", type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this._isOpen ? 'Close sidebar' : 'Open sidebar', "aria-expanded": this._isOpen ? 'true' : 'false', "data-state": this._isOpen ? 'open' : 'closed' }, h("slot", { key: '417e0988bc0311efe0d4af0d2a0827edea841368' }, h("svg", { key: '365b0f69d14d323bb470bebdebb9455547d44e57', 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: '8deed4f98c0204d0a747fbef9cd0dbf16c17fa5a', width: "18", height: "18", x: "3", y: "3", rx: "2" }), h("path", { key: 'fd51a35b556983180c11022a27219a70ad664974', d: "M9 3v18" }))), h("span", { key: '393f5d121450b1af6426f0ffcdfcfc5a2bdaaf91', class: "sr-only" }, this._isOpen ? 'Close sidebar' : 'Open sidebar'))));
     }
     static get is() { return "seki-sidebar-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -47,10 +47,10 @@ export class SekiSidebar {
         const isIconMode = this.collapsible === 'icon' && isClosed && !this._isMobile;
         const isOffcanvas = this.collapsible === 'offcanvas' && isClosed && !this._isMobile;
         const showMobileSheet = this._isMobile && this._openMobile;
-        return (h(Host, { key: '9c593a14c324e1aaa2b053f9b93f28f52388ee84', "data-variant": this.variant, "data-collapsible": this.collapsible, "data-side": this.side, "data-state": isOpen ? 'open' : 'closed', "data-mobile": this._isMobile ? 'true' : 'false', "data-icon-mode": isIconMode ? 'true' : 'false', "data-offcanvas": isOffcanvas ? 'true' : 'false' }, showMobileSheet && (h("div", { key: '250e88b3898a4c16818b77e54e7776874ad1e4e7', class: "sidebar-overlay", onClick: this.handleOverlayClick, "aria-hidden": "true" })), h("aside", { key: 'e369c1820c8c030517351509227f146af16e9227', class: {
+        return (h(Host, { key: '47d8c9c51c9eb1ce690164b2759dc9730a44a9a0', "data-variant": this.variant, "data-collapsible": this.collapsible, "data-side": this.side, "data-state": isOpen ? 'open' : 'closed', "data-mobile": this._isMobile ? 'true' : 'false', "data-icon-mode": isIconMode ? 'true' : 'false', "data-offcanvas": isOffcanvas ? 'true' : 'false' }, showMobileSheet && (h("div", { key: '6523b42a75a9d79b1ac93751aa8a4a2334c67746', class: "sidebar-overlay", onClick: this.handleOverlayClick, "aria-hidden": "true" })), h("aside", { key: '307271a9db2cb17f3d5387e64caa1bc683b6214e', class: {
                 'sidebar': true,
                 'sidebar--mobile-sheet': showMobileSheet,
-            }, role: "complementary", "aria-label": "Sidebar" }, h("slot", { key: '8b4f0a0957a4872cb98087614f0556228ce28faa' }))));
+            }, role: "complementary", "aria-label": "Sidebar" }, h("slot", { key: 'adc989e01ffcc2d5d2d5df25c38a60a18e85c4fd' }))));
     }
     static get is() { return "seki-sidebar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -15,7 +15,7 @@ export class SekiSkeleton {
         }
     }
     render() {
-        return (h("div", { key: '1b054ace60e6218f105cc71ee96694f2ef4291d6', class: "skeleton", part: "skeleton", role: "status", "aria-busy": "true", "aria-label": this.ariaLabel || undefined }));
+        return (h("div", { key: 'a9b228fb094ae04f6500bba677c04543b7e3b9b1', 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"; }

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

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
 
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -250,7 +250,7 @@ export class SekiSlider {
         const thumbStyle = isVertical
             ? { bottom: `${percentage}%` }
             : { left: `${percentage}%` };
-        return (h(Host, { key: '2275584be18d9fe7794e4f47f2a637cdf92b7979', "data-disabled": this.disabled ? '' : null, "data-orientation": this.orientation }, h("div", { key: 'f8efce43707f448b3069ece4d0d10dab7bbb74ba', class: "slider", part: "slider", ref: el => this.trackEl = el, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { key: 'ff64b060e389fa730e7949782036789a7af9bc65', class: "track", part: "track" }, h("div", { key: 'ff8cb1187e741e68dd36b40198911bf136fd8c1e', class: "range", part: "range", style: rangeStyle })), h("div", { key: '9bf15fafb4fd4930f34e7be4a2bd525558248ffd', 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: '00014ab63d2edb20273128a96fc41b02f8b8296e', type: "hidden", name: this.name, value: this.currentValue.toString() }))));
+        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() }))));
     }
     static get is() { return "seki-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,55 @@
+export class SekiSonner {
+    static _register(el) {
+        SekiSonner._instance = el;
+    }
+    static _unregister(_el) {
+        if (!_el || SekiSonner._instance === _el) {
+            SekiSonner._instance = null;
+        }
+    }
+    static _show(message, variant, options) {
+        var _a;
+        if (!SekiSonner._instance) {
+            console.warn('seki-sonner: No <seki-sonner> element found in the document. Add <seki-sonner> to your app layout.');
+            return '';
+        }
+        return SekiSonner._instance.addToast({
+            message,
+            variant,
+            duration: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : SekiSonner._instance.duration,
+            description: options === null || options === void 0 ? void 0 : options.description,
+            action: options === null || options === void 0 ? void 0 : options.action,
+        });
+    }
+    static success(message, options) {
+        return SekiSonner._show(message, 'success', options);
+    }
+    static error(message, options) {
+        return SekiSonner._show(message, 'error', options);
+    }
+    static warning(message, options) {
+        return SekiSonner._show(message, 'warning', options);
+    }
+    static info(message, options) {
+        return SekiSonner._show(message, 'info', options);
+    }
+    static loading(message, options) {
+        return SekiSonner._show(message, 'loading', Object.assign({ duration: 0 }, options));
+    }
+    static message(message, options) {
+        return SekiSonner._show(message, 'default', options);
+    }
+    static dismiss(id) {
+        if (!SekiSonner._instance) {
+            return;
+        }
+        if (id) {
+            SekiSonner._instance.removeToast(id);
+        }
+        else {
+            const toasts = [...SekiSonner._instance.toasts];
+            toasts.forEach(t => SekiSonner._instance.removeToast(t.id));
+        }
+    }
+}
+SekiSonner._instance = null;

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

@@ -0,0 +1,333 @@
+/* Sonner Toast Component Styles with Design Tokens
+ * Uses typography system for text sizing
+ * Reference: src/styles/typography/tokens.css
+ */
+
+:host {
+  /* Typography tokens */
+  --seki-sonner-font-size: var(--seki-font-size-base, 14px);
+  --seki-sonner-font-weight: var(--seki-font-weight-normal, 400);
+  --seki-sonner-font-weight-medium: var(--seki-font-weight-medium, 500);
+  --seki-sonner-font-weight-semibold: var(--seki-font-weight-semibold, 600);
+  --seki-sonner-font-family: var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  --seki-sonner-line-height: var(--seki-line-height-normal, 1.5);
+  --seki-sonner-description-font-size: var(--seki-font-size-sm, 12px);
+
+  /* Color tokens */
+  --seki-sonner-bg: var(--color-surface, #ffffff);
+  --seki-sonner-fg: var(--color-text-primary, #1f2937);
+  --seki-sonner-border: var(--color-border, #e5e7eb);
+  --seki-sonner-description-color: var(--color-text-secondary, #6b7280);
+
+  /* Variant colors */
+  --seki-sonner-success: var(--color-success, #22c55e);
+  --seki-sonner-error: var(--color-destructive, #ef4444);
+  --seki-sonner-warning: var(--color-warning, #f59e0b);
+  --seki-sonner-info: var(--color-primary, #2563eb);
+
+  /* Spacing tokens */
+  --seki-sonner-padding: var(--seki-spacing-4, 16px);
+  --seki-sonner-gap: var(--seki-spacing-3, 12px);
+  --seki-sonner-radius: var(--seki-radius-lg, 0.5rem);
+  --seki-sonner-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+  --seki-sonner-width: 356px;
+  --seki-sonner-offset: 24px;
+
+  display: contents;
+}
+
+/* Dark mode support */
+:host([data-theme='dark']) {
+  --seki-sonner-bg: var(--color-surface-dark, #1f2937);
+  --seki-sonner-fg: var(--color-text-primary-dark, #f3f4f6);
+  --seki-sonner-border: var(--color-border-dark, #374151);
+  --seki-sonner-description-color: var(--color-text-secondary-dark, #9ca3af);
+  --seki-sonner-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+/* Container */
+.seki-sonner {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: var(--seki-sonner-width);
+  max-width: calc(100vw - var(--seki-sonner-offset) * 2);
+  pointer-events: none;
+}
+
+/* Position variants */
+.seki-sonner--bottom-right {
+  bottom: var(--seki-sonner-offset);
+  right: var(--seki-sonner-offset);
+}
+
+.seki-sonner--bottom-left {
+  bottom: var(--seki-sonner-offset);
+  left: var(--seki-sonner-offset);
+}
+
+.seki-sonner--bottom-center {
+  bottom: var(--seki-sonner-offset);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.seki-sonner--top-right {
+  top: var(--seki-sonner-offset);
+  right: var(--seki-sonner-offset);
+}
+
+.seki-sonner--top-left {
+  top: var(--seki-sonner-offset);
+  left: var(--seki-sonner-offset);
+}
+
+.seki-sonner--top-center {
+  top: var(--seki-sonner-offset);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Toast item */
+.seki-sonner__toast {
+  --offset: calc(var(--index, 0) * 8px);
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--seki-sonner-gap);
+  padding: var(--seki-sonner-padding);
+  background: var(--seki-sonner-bg);
+  color: var(--seki-sonner-fg);
+  border: 1px solid var(--seki-sonner-border);
+  border-radius: var(--seki-sonner-radius);
+  box-shadow: var(--seki-sonner-shadow);
+  font-family: var(--seki-sonner-font-family);
+  font-size: var(--seki-sonner-font-size);
+  font-weight: var(--seki-sonner-font-weight);
+  line-height: var(--seki-sonner-line-height);
+  pointer-events: auto;
+  box-sizing: border-box;
+  width: 100%;
+  transform: translateY(var(--offset)) scale(calc(1 - var(--index, 0) * 0.05));
+  opacity: calc(1 - var(--index, 0) * 0.15);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Entrance animation */
+.seki-sonner__toast--entering {
+  animation: seki-sonner-enter 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+/* Exit animation */
+.seki-sonner__toast--exiting {
+  animation: seki-sonner-exit 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+/* Slide-in from bottom for bottom positions */
+@keyframes seki-sonner-enter {
+  from {
+    opacity: 0;
+    transform: translateY(calc(var(--offset) + 16px)) scale(calc(1 - var(--index, 0) * 0.05));
+  }
+  to {
+    opacity: calc(1 - var(--index, 0) * 0.15);
+    transform: translateY(var(--offset)) scale(calc(1 - var(--index, 0) * 0.05));
+  }
+}
+
+@keyframes seki-sonner-exit {
+  from {
+    opacity: calc(1 - var(--index, 0) * 0.15);
+    transform: translateY(var(--offset)) scale(calc(1 - var(--index, 0) * 0.05));
+  }
+  to {
+    opacity: 0;
+    transform: translateY(calc(var(--offset) - 16px)) scale(calc(1 - var(--index, 0) * 0.05 - 0.05));
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .seki-sonner__toast {
+    transition: none;
+  }
+
+  .seki-sonner__toast--entering {
+    animation: none;
+    opacity: calc(1 - var(--index, 0) * 0.15);
+    transform: translateY(var(--offset)) scale(calc(1 - var(--index, 0) * 0.05));
+  }
+
+  .seki-sonner__toast--exiting {
+    animation: none;
+    opacity: 0;
+  }
+}
+
+/* Variant color accents via left border */
+.seki-sonner__toast--success {
+  border-left: 4px solid var(--seki-sonner-success);
+}
+
+.seki-sonner__toast--success .seki-sonner__icon {
+  color: var(--seki-sonner-success);
+}
+
+.seki-sonner__toast--error {
+  border-left: 4px solid var(--seki-sonner-error);
+}
+
+.seki-sonner__toast--error .seki-sonner__icon {
+  color: var(--seki-sonner-error);
+}
+
+.seki-sonner__toast--warning {
+  border-left: 4px solid var(--seki-sonner-warning);
+}
+
+.seki-sonner__toast--warning .seki-sonner__icon {
+  color: var(--seki-sonner-warning);
+}
+
+.seki-sonner__toast--info {
+  border-left: 4px solid var(--seki-sonner-info);
+}
+
+.seki-sonner__toast--info .seki-sonner__icon {
+  color: var(--seki-sonner-info);
+}
+
+.seki-sonner__toast--loading .seki-sonner__icon {
+  color: var(--seki-sonner-description-color);
+}
+
+/* Icon container */
+.seki-sonner__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+/* Loading spinner animation */
+.seki-sonner__spinner {
+  animation: seki-sonner-spin 1s linear infinite;
+}
+
+@keyframes seki-sonner-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .seki-sonner__spinner {
+    animation-duration: 2s;
+  }
+}
+
+/* Content area */
+.seki-sonner__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.seki-sonner__message {
+  font-weight: var(--seki-sonner-font-weight-medium);
+  line-height: var(--seki-sonner-line-height);
+  word-break: break-word;
+}
+
+.seki-sonner__description {
+  margin-top: 4px;
+  font-size: var(--seki-sonner-description-font-size);
+  color: var(--seki-sonner-description-color);
+  line-height: var(--seki-sonner-line-height);
+  word-break: break-word;
+}
+
+/* Actions area */
+.seki-sonner__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+/* Action button */
+.seki-sonner__action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 12px;
+  border: 1px solid var(--seki-sonner-border);
+  border-radius: var(--seki-radius-sm, 0.25rem);
+  background: transparent;
+  color: var(--seki-sonner-fg);
+  font-family: var(--seki-sonner-font-family);
+  font-size: var(--seki-sonner-description-font-size);
+  font-weight: var(--seki-sonner-font-weight-medium);
+  line-height: var(--seki-sonner-line-height);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.seki-sonner__action-btn:hover {
+  background: var(--color-surface-secondary, #f3f4f6);
+}
+
+.seki-sonner__action-btn:focus-visible {
+  outline: 2px solid var(--seki-sonner-info);
+  outline-offset: 2px;
+}
+
+/* Dismiss button */
+.seki-sonner__dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: var(--seki-radius-sm, 0.25rem);
+  background: transparent;
+  color: var(--seki-sonner-description-color);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+              background 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.seki-sonner__dismiss:hover {
+  color: var(--seki-sonner-fg);
+  background: var(--color-surface-secondary, #f3f4f6);
+}
+
+.seki-sonner__dismiss:focus-visible {
+  outline: 2px solid var(--seki-sonner-info);
+  outline-offset: 2px;
+}
+
+/* Accessibility: High contrast mode support */
+@media (prefers-contrast: more) {
+  .seki-sonner__toast {
+    border-width: 2px;
+  }
+
+  .seki-sonner__toast--success,
+  .seki-sonner__toast--error,
+  .seki-sonner__toast--warning,
+  .seki-sonner__toast--info {
+    border-left-width: 4px;
+  }
+}