@sekiui/elements 0.0.72 → 0.0.75

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: 'cf0a9114e8a5e5abec88abcf4d5ff8f22210738f', 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: 'd713d7c36c213263a0067cc282db7dc1f5232a85' }, h("button", { key: '53abeb429a53aee27ec27fe0da9ec1bd3822e344', 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: '17719b2c92279d09bd73069203e4fedf83eaeab5' }, h("svg", { key: 'af0e670a0fbac8e663677a73a1d561b7b1710b62', 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: 'b883fe77b775c331ebdc38da8ea9e5d84feadd38', width: "18", height: "18", x: "3", y: "3", rx: "2" }), h("path", { key: '750deddae05479c43ff632f3370d620f8d47587e', d: "M9 3v18" }))), h("span", { key: '69e6288f56da61dd4529e5b3ca047d4dc4086005', 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: 'c544eb5732de777311d1891ca13eeb83778bdfe4', "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: '84949eade37c4d05e7044fcf629481b59fd94002', class: "sidebar-overlay", onClick: this.handleOverlayClick, "aria-hidden": "true" })), h("aside", { key: 'b82bb2320677074788ea85e41e1f20f7bc717408', class: {
                 'sidebar': true,
                 'sidebar--mobile-sheet': showMobileSheet,
-            }, role: "complementary", "aria-label": "Sidebar" }, h("slot", { key: '8b4f0a0957a4872cb98087614f0556228ce28faa' }))));
+            }, role: "complementary", "aria-label": "Sidebar" }, h("slot", { key: '27b2f8ee6680107abaf3db47b51d432842f5142b' }))));
     }
     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: 'f194c44dd51a974aac2bc2afac7771892cbfa6d5', 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: '24e416d7853321f540d8af0493d7c69274ce99d6', "data-disabled": this.disabled ? '' : null, "data-orientation": this.orientation }, h("div", { key: 'd77a6424f0ccee474af9565d7c92d24760d25995', class: "slider", part: "slider", ref: el => this.trackEl = el, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { key: '125ce8cc53b8f7020144feb7999692cdb315d786', class: "track", part: "track" }, h("div", { key: '9a5547ab6c4fd4ed20b241f9fb679f810497f8e5', class: "range", part: "range", style: rangeStyle })), h("div", { key: '094981783a52744e02f023cf23db6a730b952731', 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: '5236aa52703118fbaf873ac2b810dc65593f5cdd', 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;
+  }
+}

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

@@ -0,0 +1,151 @@
+import { h, Host } from "@stencil/core";
+import { SekiSonner } from "./seki-sonner-controller";
+const MAX_VISIBLE = 3;
+let toastCounter = 0;
+export class SekiSonnerElement {
+    constructor() {
+        /** Position of the toast container on the screen */
+        this.position = 'bottom-right';
+        /** Default duration in ms for each toast. 0 means persistent. */
+        this.duration = 4000;
+        this.toasts = [];
+        this.timers = new Map();
+    }
+    connectedCallback() {
+        SekiSonner._register(this);
+    }
+    disconnectedCallback() {
+        SekiSonner._unregister(this);
+        this.timers.forEach(t => clearTimeout(t));
+        this.timers.clear();
+    }
+    addToast(data) {
+        const id = `seki-toast-${++toastCounter}`;
+        const toast = Object.assign(Object.assign({}, data), { id });
+        this.toasts = [toast, ...this.toasts];
+        if (toast.duration > 0) {
+            const timer = setTimeout(() => {
+                this.removeToast(id);
+            }, toast.duration);
+            this.timers.set(id, timer);
+        }
+        return id;
+    }
+    removeToast(id) {
+        // Clear timer if it exists
+        const timer = this.timers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this.timers.delete(id);
+        }
+        // Mark as removing for exit animation
+        this.toasts = this.toasts.map(t => t.id === id ? Object.assign(Object.assign({}, t), { removing: true }) : t);
+        // Remove after animation completes
+        setTimeout(() => {
+            this.toasts = this.toasts.filter(t => t.id !== id);
+        }, 200);
+    }
+    handleDismiss(id) {
+        this.removeToast(id);
+    }
+    handleAction(toast) {
+        var _a;
+        if ((_a = toast.action) === null || _a === void 0 ? void 0 : _a.onClick) {
+            toast.action.onClick();
+        }
+        this.removeToast(toast.id);
+    }
+    renderIcon(variant) {
+        switch (variant) {
+            case 'success':
+                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }), h("polyline", { points: "22 4 12 14.01 9 11.01" })));
+            case 'error':
+                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { cx: "12", cy: "12", r: "10" }), h("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), h("line", { x1: "9", y1: "9", x2: "15", y2: "15" })));
+            case 'warning':
+                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }), h("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), h("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })));
+            case 'info':
+                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { cx: "12", cy: "12", r: "10" }), h("line", { x1: "12", y1: "16", x2: "12", y2: "12" }), h("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })));
+            case 'loading':
+                return (h("svg", { class: "seki-sonner__spinner", xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })));
+            default:
+                return null;
+        }
+    }
+    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: {
+                'seki-sonner__toast': true,
+                [`seki-sonner__toast--${toast.variant}`]: true,
+                'seki-sonner__toast--entering': !toast.removing,
+                'seki-sonner__toast--exiting': !!toast.removing,
+            }, style: { '--index': `${index}` }, role: "status", "aria-atomic": "true" }, toast.variant !== 'default' && (h("div", { class: "seki-sonner__icon" }, this.renderIcon(toast.variant))), h("div", { class: "seki-sonner__content" }, h("div", { class: "seki-sonner__message" }, toast.message), toast.description && (h("div", { class: "seki-sonner__description" }, toast.description))), h("div", { class: "seki-sonner__actions" }, toast.action && (h("button", { class: "seki-sonner__action-btn", onClick: () => this.handleAction(toast) }, toast.action.label)), h("button", { class: "seki-sonner__dismiss", onClick: () => this.handleDismiss(toast.id), "aria-label": "Dismiss notification" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))))));
+    }
+    static get is() { return "seki-sonner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sonner.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sonner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SonnerPosition",
+                    "resolved": "\"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"top-center\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "SonnerPosition": {
+                            "location": "local",
+                            "path": "/home/rockia/seki-actions-runner/_work/seki-ui/seki-ui/src/components/sonner/seki-sonner.tsx",
+                            "id": "src/components/sonner/seki-sonner.tsx::SonnerPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the toast container on the screen"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'bottom-right'"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default duration in ms for each toast. 0 means persistent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "duration",
+                "defaultValue": "4000"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "toasts": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/spinner/seki-spinner.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/spinner/seki-spinner.js

@@ -30,11 +30,11 @@ export class SekiSpinner {
         }
     }
     render() {
-        return (h(Host, { key: 'c26c4fb0f2b64e50fb8c47ec7786b2ba6f1e7da6' }, h("div", { key: '3e29ae567e832af8340a7c68302399c5b7e8be39', part: "spinner", class: {
+        return (h(Host, { key: '15827be30c7c48ee8ba6c19f6027471d42ba4e25' }, h("div", { key: '1bf9c9032c3c2cde45eed133c2c340089710689b', part: "spinner", class: {
                 'spinner': true,
                 [`spinner--${this.size}`]: true,
                 [`spinner--${this.color}`]: true,
-            }, role: "status", "aria-label": this.ariaLabel }, h("svg", { key: '642c4ccfed35d24957c8ca20cbd7805b56da6f54', class: "spinner__svg", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'f7abeccd3a8fd8cc57a788495acc9f8971803d55', class: "spinner__track", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3" }), h("circle", { key: '27457de694ea4345e06acd48057d1b64cb7748ae', class: "spinner__circle", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round" })), h("span", { key: '0cab9d252cef18096980f7a0ccd511346f8864c0', class: "spinner__sr-only" }, this.ariaLabel))));
+            }, role: "status", "aria-label": this.ariaLabel }, h("svg", { key: 'b2ab91c56481a7f5820b2296e323e2ffb3d7c30d', class: "spinner__svg", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '3996767ddc39b92bcb65b0e2b725c8d2dd45a9dd', class: "spinner__track", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3" }), h("circle", { key: 'fcb8b3f2137803f14095e9c1c1271b08bb4c99c9', class: "spinner__circle", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round" })), h("span", { key: '65c874ba535bb5c182b85fb625f064251ea0f2ef', class: "spinner__sr-only" }, this.ariaLabel))));
     }
     static get is() { return "seki-spinner"; }
     static get encapsulation() { return "shadow"; }