@sekiui/elements 0.1.4 → 0.1.5

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

@@ -1,7 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { SekiSonner } from "./seki-sonner-controller";
+import { SekiSonner, nextSonnerToastId } from "./seki-sonner-controller";
 const MAX_VISIBLE = 3;
-let toastCounter = 0;
 export class SekiSonnerElement {
     constructor() {
         /** Position of the toast container on the screen */
@@ -10,25 +9,34 @@ export class SekiSonnerElement {
         this.duration = 4000;
         this.toasts = [];
         this.timers = new Map();
+        /** Exit-animation timers; tracked so they cannot fire after disconnect. */
+        this.removalTimers = new Map();
     }
     connectedCallback() {
+        // On a DOM move the element reconnects with toasts still in state, but
+        // disconnectedCallback cleared their timers: finish exits, restart auto-dismiss.
+        if (this.toasts.some(t => t.removing)) {
+            this.toasts = this.toasts.filter(t => !t.removing);
+        }
+        this.toasts.forEach(t => this.startTimer(t));
         SekiSonner._register(this);
     }
     disconnectedCallback() {
         SekiSonner._unregister(this);
         this.timers.forEach(t => clearTimeout(t));
         this.timers.clear();
+        this.removalTimers.forEach(t => clearTimeout(t));
+        this.removalTimers.clear();
+    }
+    startTimer(toast) {
+        if (toast.duration > 0 && !this.timers.has(toast.id)) {
+            this.timers.set(toast.id, setTimeout(() => this.removeToast(toast.id), toast.duration));
+        }
     }
-    addToast(data) {
-        const id = `seki-toast-${++toastCounter}`;
+    addToast(data, id = nextSonnerToastId()) {
         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);
-        }
+        this.startTimer(toast);
         return id;
     }
     removeToast(id) {
@@ -41,9 +49,13 @@ export class SekiSonnerElement {
         // 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(() => {
+        if (this.removalTimers.has(id)) {
+            return;
+        }
+        this.removalTimers.set(id, setTimeout(() => {
+            this.removalTimers.delete(id);
             this.toasts = this.toasts.filter(t => t.id !== id);
-        }, 200);
+        }, 200));
     }
     handleDismiss(id) {
         this.removeToast(id);
@@ -73,7 +85,7 @@ export class SekiSonnerElement {
     }
     render() {
         const visibleToasts = this.toasts.slice(0, MAX_VISIBLE);
-        return (h(Host, { key: '54fe4b0586a7bf12555fc91a81b20d438efa9ffe' }, h("div", { key: '42769c29e0f135b6f1c49b169b2abacf0fa179aa', 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: 'ecf65ee2602127c167ded85807aed8f5b92686b8' }, h("div", { key: 'c504e8ba64b1a60db816616c130d8d4da756452f', 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.js

@@ -30,11 +30,11 @@ export class SekiSpinner {
         }
     }
     render() {
-        return (h(Host, { key: 'fac2cabdecaf748b661624a76f87bc2e68f375f9' }, h("div", { key: '2bdfe70024b2587c1732fa847d53b62cb9cd4e76', part: "spinner", class: {
+        return (h(Host, { key: '4b650a54f940949b074da621cfd714b21b799233' }, h("div", { key: '8554f51445fcdbc3e86009a11989e1e1dd91dbc7', part: "spinner", class: {
                 'spinner': true,
                 [`spinner--${this.size}`]: true,
                 [`spinner--${this.color}`]: true,
-            }, role: "status", "aria-label": this.ariaLabel }, h("svg", { key: '0e394c30e7009876970551086fbfb577831a4d4d', class: "spinner__svg", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '192d06ff9ef7cf90b09ece011d714172f72f9c8d', class: "spinner__track", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3" }), h("circle", { key: '96de8566ff192df67e8e7f121cc40ba1341340a8', class: "spinner__circle", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round" })), h("span", { key: '202bd6c034b9eb7dd8fc9f9dcfb0f46f0a5bd3d2', class: "spinner__sr-only" }, this.ariaLabel))));
+            }, role: "status", "aria-label": this.ariaLabel }, h("svg", { key: '4b9a1854b0656f3499b126f9e56ad15c291dfc8d', class: "spinner__svg", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '1bbdc24dcf8b7c1d1e7648f72f1017cedb8449f9', class: "spinner__track", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3" }), h("circle", { key: 'c57005f80ecd90e49bd8ff44c8aa9f49cf7f4f56', class: "spinner__circle", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round" })), h("span", { key: '0b55efa6fb807a54e273ddb543ea01574a7012df', class: "spinner__sr-only" }, this.ariaLabel))));
     }
     static get is() { return "seki-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -133,7 +133,7 @@ export class SekiSwitch {
     render() {
         const isChecked = this.isChecked;
         const dataState = isChecked ? 'checked' : 'unchecked';
-        return (h(Host, { key: '983eb8c2197906c08015b1ba03c990ba45d63b50', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: '4cf34435488f7dc545572a8d20509d9c12e08f06', class: "switch", ref: el => (this.switchEl = el), 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: 'f637e58d2af875cac10ef3b2dc073c4deb8e574f', class: "thumb", part: "thumb" }))));
+        return (h(Host, { key: '1710cdafc415bf5180f6ebbe81e366e2ab923961', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: '313f6e13aba4f32ca4681d125b28c34b505188cb', class: "switch", ref: el => (this.switchEl = el), part: "switch", role: "switch", "aria-checked": isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-description": this.ariaDescription || undefined, "aria-invalid": this.ariaInvalid === 'true' ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick }, h("span", { key: '7e4b0bad5b4822ef94226e3bf6677149d1004560', class: "thumb", part: "thumb" }))));
     }
     static get is() { return "seki-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -307,6 +307,44 @@ export class SekiSwitch {
                 "setter": false,
                 "reflect": false,
                 "attribute": "aria-label"
+            },
+            "ariaDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that describes this control. Set by `seki-field` from its description\n(and error) slot, because an `aria-describedby` id cannot cross the shadow\nboundary to the inner element (#358)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-description"
+            },
+            "ariaInvalid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the control invalid for assistive technology. Set by `seki-field` (#358)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-invalid"
             }
         };
     }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiTableBody {
     render() {
-        return (h("tbody", { key: 'f5981324a6f45c757cac2f77ac2f5089a61b8a40', class: "seki-table-body" }, h("slot", { key: '8ab8f464909e6609ffc285f966dae860d1ce30ff' })));
+        return (h("tbody", { key: '841499795000e8859eba562c881d1e5f50c169b7', class: "seki-table-body" }, h("slot", { key: '38ac4a2215b784d9d207eaa9afe8897d9ecd805a' })));
     }
     static get is() { return "seki-table-body"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiTableCaption {
     render() {
-        return (h("caption", { key: '8219ba932a5d4d87f30e2c875cf664452e47255a', class: "seki-table-caption" }, h("slot", { key: '05349cd6394dfc01b2ecbe62859ea9bffd179087' })));
+        return (h("caption", { key: 'a2444e1e8090d8164f2ed46a9e0b6c94970e20c1', class: "seki-table-caption" }, h("slot", { key: 'b62d12cce9d66efe8caaac32127b5f70c3bbdbe8' })));
     }
     static get is() { return "seki-table-caption"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiTableFooter {
     render() {
-        return (h("tfoot", { key: 'db2408a04dd0d5e3b07b1da0245ecf7d259c5733', class: "seki-table-footer" }, h("slot", { key: 'c6a9c39e3c804cf03c1648b12a74e423afc289fd' })));
+        return (h("tfoot", { key: '8dc8f75857782a4020afd27667e3015e3e72f076', class: "seki-table-footer" }, h("slot", { key: '641e74b96ed55e7a67973a0430d66b69fedbc45f' })));
     }
     static get is() { return "seki-table-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiTableHeader {
     render() {
-        return (h("thead", { key: '4b8adfef34d2fda04bbd98bdc1c2339edfe7d5ff', class: "seki-table-header" }, h("slot", { key: '6e072c030f07f0e4f63f487957bd558b4e00fe7a' })));
+        return (h("thead", { key: '319717d23971ce1005b991aa4c499b81839ebd21', class: "seki-table-header" }, h("slot", { key: '58f3270aa2f7c023a205d86aef69d1b4686dc3f5' })));
     }
     static get is() { return "seki-table-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,10 +12,10 @@ export class SekiTableRow {
         this.selected = false;
     }
     render() {
-        return (h("tr", { key: '936933c64722148561d230aad3d3c871502516f8', class: {
+        return (h("tr", { key: '3b3ad4de32b68b01ce521a1881bbe0a5412f4f32', class: {
                 'seki-table-row': true,
                 'seki-table-row--selected': this.selected,
-            }, "data-state": this.selected ? 'selected' : undefined }, h("slot", { key: '4ee5223be10a00b003a16fb6cc6db62cfd06dd43' })));
+            }, "data-state": this.selected ? 'selected' : undefined }, h("slot", { key: 'e68a95c94a65fa125df246f44f0de9572b3c9c67' })));
     }
     static get is() { return "seki-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ import { h } from "@stencil/core";
  */
 export class SekiTable {
     render() {
-        return (h("div", { key: '697a54067129107735ff7c479aec45198e1ff6b0', class: "seki-table-container" }, h("table", { key: '08889e2dd1e18f8463ab0f0241ef947d955d8820', class: "seki-table", role: "table", "aria-label": this.ariaLabel }, h("slot", { key: '372fbc76ab05cc0e180b2b78229d1810feda4e4c' }))));
+        return (h("div", { key: '3baee27e11229c968b75f8bafd01e0aca61bd1c6', class: "seki-table-container" }, h("table", { key: 'eaa766e5b5c79509472bc1f7c1060089ceffb6ed', class: "seki-table", role: "table", "aria-label": this.ariaLabel }, h("slot", { key: '0ad70f2faa262fd06b7026a4fdf1357bce58cd1c' }))));
     }
     static get is() { return "seki-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,10 +44,10 @@ export class SekiTabsContent {
     }
     render() {
         const isSelected = this._isSelected;
-        return (h(Host, { key: '8ce697ce9c3e4f14842f5e811947175da73106bc', "data-state": isSelected ? 'active' : 'inactive', role: "tabpanel", id: this.panelId, "aria-labelledby": this.triggerId, hidden: !isSelected, tabindex: isSelected ? 0 : -1 }, h("div", { key: 'b3dc86c00ae6b86ff97c56092f5f252905e6482c', part: "content", class: {
+        return (h(Host, { key: 'e1637e6393df87d033a7c46e480212b0840241da', "data-state": isSelected ? 'active' : 'inactive', role: "tabpanel", id: this.panelId, "aria-labelledby": this.triggerId, hidden: !isSelected, tabindex: isSelected ? 0 : -1 }, h("div", { key: '98c1135323278b256c3f6a5715da5f054d25331a', part: "content", class: {
                 'tabs-content': true,
                 'tabs-content--active': isSelected,
-            } }, h("slot", { key: '5287ccfae58ddebc22b48eebef360076b5514c1f' }))));
+            } }, h("slot", { key: '4d116623afa076f2fb015080e18681f188b0b2f2' }))));
     }
     static get is() { return "seki-tabs-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,10 +39,10 @@ export class SekiTabsList {
     }
     render() {
         const orientation = this._orientation;
-        return (h(Host, { key: 'b5eac5d14f684c1bea205ea79af87c77a8cffdc4', "data-orientation": orientation }, h("div", { key: '1171b109358ef3d70f02a31c97d43ef40d834249', part: "list", role: "tablist", "aria-orientation": orientation, class: {
+        return (h(Host, { key: 'fe9b44507284c1b0b9ce1ebcf8b37e143ac971ce', "data-orientation": orientation }, h("div", { key: '33aec6c7f47545ca3fa448288aaea07cb2e6fd5f', part: "list", role: "tablist", "aria-orientation": orientation, class: {
                 'tabs-list': true,
                 [`tabs-list--${orientation}`]: true,
-            } }, h("slot", { key: '8705c725a33915df66c592e20c0c6c780f764b0a' }))));
+            } }, h("slot", { key: '11b4a3e8dd650963f08cf5b61e0e36f7d2119d5e' }))));
     }
     static get is() { return "seki-tabs-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -158,10 +158,10 @@ export class SekiTabsTrigger {
     }
     render() {
         const isSelected = this._isSelected;
-        return (h(Host, { key: 'c458ce588fa3a739434ce41190c6bb0fafdd7f32', "data-state": isSelected ? 'active' : 'inactive', "data-disabled": this.disabled ? '' : undefined, tabindex: this.disabled ? -1 : 0, role: "tab", "aria-selected": isSelected ? 'true' : 'false', "aria-controls": this.panelId }, h("button", { key: 'c3f4d26a8af5e8d88fccf21bbdf6abf04843c749', part: "trigger", type: "button", id: this.triggerId, class: {
+        return (h(Host, { key: '2146c6c804c58ab62cf8e08a72204a637dd53c41', "data-state": isSelected ? 'active' : 'inactive', "data-disabled": this.disabled ? '' : undefined, tabindex: this.disabled ? -1 : 0, role: "tab", "aria-selected": isSelected ? 'true' : 'false', "aria-controls": this.panelId }, h("button", { key: 'c3bd3b9e89176e33a7346f80aa2e7317503ee9bb', part: "trigger", type: "button", id: this.triggerId, class: {
                 'tabs-trigger': true,
                 'tabs-trigger--active': isSelected,
-            }, disabled: this.disabled, tabindex: -1 }, h("slot", { key: '2457ef64b5c8617f02c9982dd71ee14affe4bfdc' }))));
+            }, disabled: this.disabled, tabindex: -1 }, h("slot", { key: '609849d3ad8214fc62063915b2e09620fff3b14a' }))));
     }
     static get is() { return "seki-tabs-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -67,10 +67,10 @@ export class SekiTabs {
         this.el._tabsContext = this.getContext();
     }
     render() {
-        return (h(Host, { key: '1149fdb2518385903e435eac44bf1cd0a2fbf7a6', "data-orientation": this.orientation }, h("div", { key: '608f3328a14a3aa6e83680c32b5c3a0d53671fe8', part: "tabs", class: {
+        return (h(Host, { key: '2e935b475aa29f814214673dded36ea15a4c32a9', "data-orientation": this.orientation }, h("div", { key: '86d27c9cc1d50705be39690aca185a1cda0f5ca9', part: "tabs", class: {
                 'tabs': true,
                 [`tabs--${this.orientation}`]: true,
-            } }, h("slot", { key: '841f020f76e132f4c21422c09f399ebc662e7175' }))));
+            } }, h("slot", { key: 'd47d8652358e2aebf020e0ea384880f8d45e1462' }))));
     }
     static get is() { return "seki-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -111,7 +111,7 @@ export class SekiTextarea {
         (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
     }
     render() {
-        return (h("textarea", { key: '575577a2754c1721b3dc01a0e513a4e3f93b3830', ref: el => (this.textareaEl = el), value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, rows: this.rows, cols: this.cols, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autocomplete, class: `textarea textarea--resize-${this.resize}${this.invalid ? ' textarea--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
+        return (h("textarea", { key: 'f15e2eb07dd151b6dd6296ef1460639c9f93eda4', ref: el => (this.textareaEl = el), value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, rows: this.rows, cols: this.cols, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autocomplete, class: `textarea textarea--resize-${this.resize}${this.invalid ? ' textarea--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-description": this.ariaDescription, "aria-invalid": this.invalid || this.ariaInvalid === 'true' ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
     }
     static get is() { return "seki-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -401,6 +401,44 @@ export class SekiTextarea {
                 "reflect": false,
                 "attribute": "aria-describedby"
             },
+            "ariaDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that describes this control. Set by `seki-field` from its description\n(and error) slot, because an `aria-describedby` id cannot cross the shadow\nboundary to the inner element (#358)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-description"
+            },
+            "ariaInvalid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the control invalid for assistive technology. Set by `seki-field` (#358)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-invalid"
+            },
             "autocomplete": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/toast/seki-toaster.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { registerToaster, unregisterToaster } from "./toast";
 /**
  * Toaster component that manages and displays toast notifications.
  * Place this component once in your app layout.
@@ -93,17 +94,29 @@ export class SekiToaster {
         }
         this.removeToast(toast.id);
     }
+    connectedCallback() {
+        // Replay toasts fired via toast() before any toaster was listening.
+        registerToaster().forEach(({ message, options }) => this.addToast(Object.assign({ message }, options)));
+        // On a DOM move, disconnectedCallback cleared the timers: restart them.
+        this.toasts.forEach((t) => this.startTimer(t));
+    }
     disconnectedCallback() {
+        unregisterToaster();
         // Clean up all timers
         this.timers.forEach((timer) => clearTimeout(timer));
         this.timers.clear();
     }
+    startTimer(toast) {
+        if (toast.duration > 0 && !this.timers.has(toast.id)) {
+            this.timers.set(toast.id, setTimeout(() => this.removeToast(toast.id), toast.duration));
+        }
+    }
     render() {
         const positionClasses = {
             'seki-toaster': true,
             [`seki-toaster--${this.position}`]: true,
         };
-        return (h("div", { key: 'f9137e5c8542135f9f6182654af0c08732d26e03', class: positionClasses, role: "region", "aria-label": "Notifications", "aria-live": "polite" }, this.toasts.map((toast) => (h("div", { key: toast.id, class: {
+        return (h("div", { key: '7aabb5f4eb32d371bd29229f617373a678a08d96', class: positionClasses, role: "region", "aria-label": "Notifications", "aria-live": "polite" }, this.toasts.map((toast) => (h("div", { key: toast.id, class: {
                 'seki-toast': true,
                 [`seki-toast--${toast.type}`]: true,
             }, role: "alert", "aria-atomic": "true", onMouseEnter: () => this.handleMouseEnter(toast.id), onMouseLeave: () => this.handleMouseLeave(toast) }, h("div", { class: "seki-toast__icon" }, this.renderIcon(toast.type)), h("div", { class: "seki-toast__content" }, h("div", { class: "seki-toast__message" }, toast.message), toast.description && (h("div", { class: "seki-toast__description" }, toast.description))), h("div", { class: "seki-toast__actions" }, toast.action && (h("button", { class: "seki-toast__action-btn", onClick: () => this.handleActionClick(toast) }, toast.action.label)), h("button", { class: "seki-toast__dismiss", "aria-label": "Dismiss notification", onClick: () => this.handleDismiss(toast.id) }, h("svg", { 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("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))))))));

package/dist/collection/components/toast/toast.js

@@ -23,7 +23,36 @@
  *   }
  * });
  */
+/** Number of connected <seki-toaster> elements currently listening. */
+let activeToasters = 0;
+/** Toasts fired while no toaster was listening; flushed when one connects. */
+let pending = [];
+const MAX_PENDING = 10;
+/** @internal Called by <seki-toaster> when it connects. Returns buffered toasts to replay. */
+export function registerToaster() {
+    activeToasters++;
+    const queued = pending;
+    pending = [];
+    return queued;
+}
+/** @internal Called by <seki-toaster> when it disconnects. */
+export function unregisterToaster() {
+    activeToasters = Math.max(0, activeToasters - 1);
+}
+/** @internal Test helper. */
+export function resetToastQueue() {
+    activeToasters = 0;
+    pending = [];
+}
 function dispatchToast(message, options = {}) {
+    if (activeToasters === 0) {
+        // No toaster is mounted yet (not in the DOM, or its module is still loading).
+        pending.push({ message, options });
+        if (pending.length > MAX_PENDING) {
+            pending.shift();
+        }
+        return;
+    }
     const event = new CustomEvent('seki-toast', {
         detail: {
             message,

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

@@ -207,7 +207,7 @@ export class SekiToggle {
                 tabIndex = focusedValue === this.value ? 0 : -1;
             }
         }
-        return (h(Host, { key: 'de621bb09cab9bb640b9c64e8982cb03b09d2aa8', "data-state": dataState, "data-disabled": effectiveDisabled ? '' : null }, h("button", { key: 'f810787ed8f769be413a4098e37b824abd1197fd', type: "button", class: `toggle toggle--${effectiveVariant} toggle--${effectiveSize}`, part: "toggle", "aria-pressed": isPressed ? 'true' : 'false', "aria-disabled": effectiveDisabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, disabled: effectiveDisabled, tabindex: tabIndex, onClick: this.handleClick }, h("slot", { key: 'dec9fae49ddae2411c7529fd5ab0da34c5de3d58' }))));
+        return (h(Host, { key: '6e9d3e809557196554e54c5346eaa568a011dac0', "data-state": dataState, "data-disabled": effectiveDisabled ? '' : null }, h("button", { key: 'ffa6659e2b6a162cd0ef6034cef7937fee7925b8', type: "button", class: `toggle toggle--${effectiveVariant} toggle--${effectiveSize}`, part: "toggle", "aria-pressed": isPressed ? 'true' : 'false', "aria-disabled": effectiveDisabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, disabled: effectiveDisabled, tabindex: tabIndex, onClick: this.handleClick }, h("slot", { key: 'd3a7a6da395304dd7892deb5f68720dda33d41d4' }))));
     }
     static get is() { return "seki-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle-group/seki-toggle-group.js

@@ -147,7 +147,7 @@ export class SekiToggleGroup {
         };
     }
     render() {
-        return (h(Host, { key: '240caaea2c488953ea25fbdd88df793b60af92bd', role: "group", "aria-label": this.ariaLabel, "aria-orientation": this.orientation }, h("slot", { key: '61107f87af8bc991b836cbdd6849ceb38eb108a1' })));
+        return (h(Host, { key: 'e95eb2311e5dfed5948ef8e7bea8e4a61fc471f1', role: "group", "aria-label": this.ariaLabel, "aria-orientation": this.orientation }, h("slot", { key: 'b075eecef5aa7ab7421c79e663d450047e6686e9' })));
     }
     static get is() { return "seki-toggle-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { OverlayLayer } from "../../utils/overlay";
 /**
  * Tooltip Component
  *
@@ -104,6 +105,25 @@ export class SekiTooltip {
                 this.hide();
             }, 100);
         };
+        /**
+         * Pointer entered the tooltip itself: keep it open (WCAG 1.4.13 "hoverable").
+         * Cancels the grace-period hide started when the pointer left the trigger.
+         */
+        this.onTooltipMouseEnter = () => {
+            if (this.hideTimer) {
+                clearTimeout(this.hideTimer);
+                this.hideTimer = null;
+            }
+        };
+        /**
+         * Pointer left the tooltip: start the same grace-period hide as leaving the
+         * trigger, so moving back onto the trigger keeps it open.
+         */
+        this.onTooltipMouseLeave = () => {
+            if (!this.isVisible)
+                return;
+            this.onTriggerMouseLeave();
+        };
         /**
          * Handle focus on trigger (accessibility)
          */
@@ -172,6 +192,11 @@ export class SekiTooltip {
                 this.longPressTimer = null;
             }
         };
+        /**
+         * A visible tooltip is a layer on the overlay stack (utils/overlay.ts), as
+         * in Radix: Escape hides it first and leaves an enclosing dialog open.
+         */
+        this.layer = new OverlayLayer({ onEscape: (event) => this.onEscapeKey(event) });
         /**
          * Handle Escape key to dismiss tooltip
          */
@@ -192,6 +217,16 @@ export class SekiTooltip {
          */
         this.onTriggerSlotChange = () => {
             this.attachTriggerListeners();
+            if (!this.boundTrigger) {
+                // Trigger removed while open: nothing left to anchor to.
+                this.triggerEl = null;
+                if (this.isVisible)
+                    this.hide();
+            }
+            else if (this.isVisible) {
+                // Trigger swapped while open: re-anchor to the new element.
+                this.calculatePosition();
+            }
         };
     }
     /**
@@ -340,8 +375,6 @@ export class SekiTooltip {
         trigger.addEventListener('touchstart', this.onTriggerTouchStart);
         trigger.addEventListener('touchmove', this.onTriggerTouchMove);
         trigger.addEventListener('touchend', this.onTriggerTouchEnd);
-        // Escape key on document
-        document.addEventListener('keydown', this.onEscapeKey);
         // Apply aria-describedby to trigger (idempotent — keep the existing id so a
         // re-attach after a DOM move doesn't regenerate it).
         const contentSlot = this.el.querySelector('[slot="content"]');
@@ -368,9 +401,6 @@ export class SekiTooltip {
             this.removeTriggerListeners(this.boundTrigger);
             this.boundTrigger = null;
         }
-        // Escape key was registered on document in attachTriggerListeners; remove it
-        // here so it does not leak (and keep firing) after the tooltip is detached.
-        document.removeEventListener('keydown', this.onEscapeKey);
     }
     componentWillLoad() {
         // `disabled` wins over a requested initial open state.
@@ -407,8 +437,12 @@ export class SekiTooltip {
             this.attachTriggerListeners();
         }
     }
+    componentDidRender() {
+        this.layer.setActive(this.isVisible);
+    }
     disconnectedCallback() {
         this.detachTriggerListeners();
+        this.layer.setActive(false);
         // Clean up timers
         if (this.showTimer)
             clearTimeout(this.showTimer);
@@ -418,7 +452,7 @@ export class SekiTooltip {
             clearTimeout(this.longPressTimer);
     }
     render() {
-        return (h(Host, { key: '4904953ae5d7a0d67942898104f81e36bd5d9ab2' }, h("span", { key: '30a69b56ab401b6c28214360feff10c7a246f698', class: "trigger-wrapper" }, h("slot", { key: 'd15e4b6b7a83a462857b8670d1394718f1af688a', name: "trigger", onSlotchange: this.onTriggerSlotChange })), h("div", { key: '817b9ef07ada7e8018250f721e4384d2692559f7', class: `tooltip ${this.isVisible ? 'tooltip--visible' : ''}`, role: "tooltip" }, h("slot", { key: 'd4e19072ceaabeb7fadd73f336876b2faedcdba6', name: "content" }), h("div", { key: '76fcd6d32a10202aabae4c3b14b4ba40c415770a', class: "tooltip-arrow" }))));
+        return (h(Host, { key: '7c714fcc3092f4a38990c6bc97e6b02699c204e7' }, h("span", { key: 'ec5b2be8e913e917d70b767de17ce0ddf7a067af', class: "trigger-wrapper" }, h("slot", { key: 'a586b19cbdc1481eb7ddb087662bbcb4a92b8c0e', name: "trigger", onSlotchange: this.onTriggerSlotChange })), h("div", { key: '9a1d43f039edc0b3ed3dda9306cbf425c2f854c0', class: `tooltip ${this.isVisible ? 'tooltip--visible' : ''}`, role: "tooltip", onMouseEnter: this.onTooltipMouseEnter, onMouseLeave: this.onTooltipMouseLeave }, h("slot", { key: '949262f9a555cec595aa98b1bee3da1b388228f7', name: "content" }), h("div", { key: '221555f0885ace177f03b5d42d48c9cc09128c5c', class: "tooltip-arrow" }))));
     }
     static get is() { return "seki-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js

@@ -10,3 +10,5 @@ export * from './types';
 // Sonner toast
 export { SekiSonnerElement } from './components/sonner/seki-sonner';
 export { SekiSonner } from './components/sonner/seki-sonner-controller';
+// Toaster (event-based) helper
+export { toast } from './components/toast/toast';

package/dist/collection/utils/calendar/date-utils.js

@@ -137,4 +137,32 @@ export function navigateWeek(date, direction) {
 export function getDayOfWeek(date) {
     return getDay(date);
 }
+/**
+ * Parse a user-supplied date. Date-only ISO strings (`YYYY-MM-DD`) are calendar
+ * dates, so they become local midnight; `new Date('2024-01-15')` would be UTC
+ * midnight and display a day early west of UTC. Anything invalid (including an
+ * invalid `Date` instance) yields `null`.
+ */
+export function parseDateInput(value) {
+    if (!value)
+        return null;
+    if (value instanceof Date)
+        return isNaN(value.getTime()) ? null : value;
+    if (typeof value !== 'string')
+        return null;
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
+    if (match) {
+        const [y, m, d] = [Number(match[1]), Number(match[2]), Number(match[3])];
+        const date = new Date(y, m - 1, d);
+        // Reject overflow such as 2024-02-31 (would silently roll into March).
+        return date.getFullYear() === y && date.getMonth() === m - 1 && date.getDate() === d ? date : null;
+    }
+    const parsed = new Date(value);
+    return isNaN(parsed.getTime()) ? null : parsed;
+}
+/** Serialize the local calendar day of `date` as `YYYY-MM-DD`. */
+export function toISODate(date) {
+    const pad = (n, w = 2) => String(n).padStart(w, '0');
+    return `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
 export { isSameDay, isSameMonth, isToday, startOfMonth, startOfDay, format, };

package/dist/collection/utils/dialog/focus-trap.js

@@ -129,39 +129,3 @@ export function trapFocus(container, event) {
         }
     }
 }
-// ---------------------------------------------------------------------------
-// Body scroll lock (reference-counted so stacked modals don't unlock early).
-// ---------------------------------------------------------------------------
-let scrollLockCount = 0;
-let savedOverflow = '';
-let savedPaddingRight = '';
-/**
- * Lock body scroll when a modal opens. Safe to nest: the lock is only applied
- * on the first call and the original inline styles are restored on the last
- * matching unlock.
- */
-export function lockBodyScroll() {
-    if (scrollLockCount === 0) {
-        savedOverflow = document.body.style.overflow;
-        savedPaddingRight = document.body.style.paddingRight;
-        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        document.body.style.overflow = 'hidden';
-        if (scrollbarWidth > 0) {
-            document.body.style.paddingRight = `${scrollbarWidth}px`;
-        }
-    }
-    scrollLockCount++;
-}
-/**
- * Unlock body scroll when a modal closes. Only the final unlock restores the
- * original inline styles.
- */
-export function unlockBodyScroll() {
-    if (scrollLockCount === 0)
-        return;
-    scrollLockCount--;
-    if (scrollLockCount === 0) {
-        document.body.style.overflow = savedOverflow;
-        document.body.style.paddingRight = savedPaddingRight;
-    }
-}