@sekiui/elements 0.1.3 → 0.1.5

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

@@ -20,7 +20,7 @@ export class SekiSidebarRail {
         this.attrMirror = undefined;
     }
     render() {
-        return (h(Host, { key: '1a3deba5ed12c55e1b996f95262ca166ea19b668' }, h("button", { key: '5427c19712ff62396cdbc4d8f5c1766a51735134', class: "sidebar-rail", type: "button", tabIndex: -1, "aria-hidden": "true", onClick: this.handleClick, title: "Toggle sidebar" }, h("slot", { key: '90b1081a091e896ddd16d0174ab4c7b670baa504' }))));
+        return (h(Host, { key: 'd10c80dc23741872cecc4514de1e20c0fd8757f4' }, h("button", { key: '49ce1088c2490d15f25475cbfc7b5194118a2129', class: "sidebar-rail", type: "button", tabIndex: -1, "aria-hidden": "true", onClick: this.handleClick, title: "Toggle sidebar" }, h("slot", { key: '584b142cf34650bdbdf95f0fbfa7a68acd124eb2' }))));
     }
     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: '6215681a505a44f5207a2ebb173781d98a64f2f3', class: "sidebar-separator", role: "separator" }));
+        return (h("div", { key: '13e5c46c871e3d35d61ebfd0362151d9a128faaa', 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.js

@@ -35,7 +35,7 @@ export class SekiSidebarTrigger {
         this._isMobile = event.detail.isMobile;
     }
     render() {
-        return (h(Host, { key: 'eabf405c151f5d6c50cda679872dc11374f31b43' }, h("button", { key: '0942fa0bbc88f7ffed883437e82b52bcceac4155', 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: 'bf77238230a8517534ecaec26f1f5bcfe6e209ca' }, h("svg", { key: 'eda7c6398d845705ee30aa9e38d1d3a5d740e587', 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: '5cef5ddd3c84c76047c8a5a046cb006ed0fe8cd1', width: "18", height: "18", x: "3", y: "3", rx: "2" }), h("path", { key: '896c9ee2e65279ad98899ecccca9b22015ec15ba', d: "M9 3v18" }))), h("span", { key: '3dd393d9f0ad825bcbdf55242a19cb5780b5a376', class: "sr-only" }, this._isOpen ? 'Close sidebar' : 'Open sidebar'))));
+        return (h(Host, { key: '6bdbe3399c3249e5c36d025a5940d60aba89dcf4' }, h("button", { key: 'e1ff54e9dfa9861a78268c9d77ff6c478dc37ffe', 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: '3abc263482fdcf09bbefc9632316cdacd5b5f975' }, h("svg", { key: '94134a51a83cd3f8a4009edb9922f64cb0c5d90b', 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: '97750183b1dbf929d2dde00954df2430c3d93e16', width: "18", height: "18", x: "3", y: "3", rx: "2" }), h("path", { key: 'c0f757370931c43eae8c75fc21b84ccb8b10ab14', d: "M9 3v18" }))), h("span", { key: 'fb09709ebcad0348de797927e188e91df32b05d2', 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.js

@@ -50,10 +50,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: '02209fd08d578cc05fec285163372e04ae3347a8', "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: 'fb1c3bbd22e910370e35b6dd66929edc706e993f', class: "sidebar-overlay", onClick: this.handleOverlayClick, "aria-hidden": "true" })), h("aside", { key: '41ac658195b2a7f02bb8cefbd8916bb863184285', class: {
+        return (h(Host, { key: '63df9be29d717dff6db6cb434b6e2f10564aaa1c', "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: '5fcabdd8291b607e7bbfd7cb9263c091891661e5', class: "sidebar-overlay", onClick: this.handleOverlayClick, "aria-hidden": "true" })), h("aside", { key: '7851ae08a74f8ae28a1f103de970a65576f5d2bb', class: {
                 'sidebar': true,
                 'sidebar--mobile-sheet': showMobileSheet,
-            }, role: "complementary", "aria-label": "Sidebar" }, h("slot", { key: '8d8472418d7a177e9a0bbd43fe77e4c6600bbb7c' }))));
+            }, role: "complementary", "aria-label": "Sidebar" }, h("slot", { key: '1f52d5bce25ce2075690ea02175467759364c3e0' }))));
     }
     static get is() { return "seki-sidebar"; }
     static get encapsulation() { return "shadow"; }

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

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

@@ -306,7 +306,7 @@ export class SekiSlider {
         const thumbStyle = isVertical
             ? { bottom: `${percentage}%` }
             : { left: `${percentage}%` };
-        return (h(Host, { key: 'c60f2f23212de7a70bd0b7980692df677f6e1fca', "data-disabled": this.disabled ? '' : null, "data-orientation": this.orientation }, h("div", { key: '48f1ff8956d509a308798ef6f119f72180ddbfde', class: "slider", part: "slider", ref: el => this.trackEl = el, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { key: '491c9bca41713f8503bbd37377ab840dfe4de027', class: "track", part: "track" }, h("div", { key: '436108700d75865c18d17250efa05ca882b4a2a0', class: "range", part: "range", style: rangeStyle })), h("div", { key: 'a833fe28d0521b372b8b9327e98e37f4ed322f99', 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 }))));
+        return (h(Host, { key: '515d4e0bbbd533fcaf9e629264ca391c1928140a', "data-disabled": this.disabled ? '' : null, "data-orientation": this.orientation }, h("div", { key: 'ad743fc06d8a53ecc016aea53ffcaff1fe734f3e', class: "slider", part: "slider", ref: el => this.trackEl = el, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { key: 'be6aa82302ab35cb05dc99bbe8de828124ef452c', class: "track", part: "track" }, h("div", { key: '5049bce1dec9d107c4814f6c25aaeffdede46860', class: "range", part: "range", style: rangeStyle })), h("div", { key: '3ae64f7bf349c3081723a5aed7023e81a24a7d4d', 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, "aria-description": this.ariaDescription || undefined, "aria-invalid": this.ariaInvalid === 'true' ? 'true' : undefined }))));
     }
     static get is() { return "seki-slider"; }
     static get encapsulation() { return "shadow"; }
@@ -517,6 +517,44 @@ export class SekiSlider {
                 "setter": false,
                 "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"
             }
         };
     }

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

@@ -1,25 +1,49 @@
+/** Max toasts buffered while no <seki-sonner> is mounted; oldest are dropped first. */
+const MAX_PENDING = 10;
+let toastCounter = 0;
+export function nextSonnerToastId() {
+    return `seki-toast-${++toastCounter}`;
+}
 export class SekiSonner {
     static _register(el) {
         SekiSonner._instance = el;
+        const queued = SekiSonner._pending;
+        SekiSonner._pending = [];
+        queued.forEach(p => SekiSonner._deliver(el, p));
     }
     static _unregister(_el) {
-        if (!_el || SekiSonner._instance === _el) {
+        if (!_el) {
+            // Test/reset helper: forget the instance and anything buffered.
+            SekiSonner._instance = null;
+            SekiSonner._pending = [];
+        }
+        else if (SekiSonner._instance === _el) {
             SekiSonner._instance = null;
         }
     }
+    static _deliver(el, p) {
+        var _a, _b, _c, _d;
+        el.addToast({
+            message: p.message,
+            variant: p.variant,
+            duration: (_b = (_a = p.options) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : el.duration,
+            description: (_c = p.options) === null || _c === void 0 ? void 0 : _c.description,
+            action: (_d = p.options) === null || _d === void 0 ? void 0 : _d.action,
+        }, p.id);
+    }
     static _show(message, variant, options) {
-        var _a;
+        const pending = { id: nextSonnerToastId(), message, variant, options };
         if (!SekiSonner._instance) {
-            console.warn('seki-sonner: No <seki-sonner> element found in the document. Add <seki-sonner> to your app layout.');
-            return '';
+            // The element may not be in the DOM yet, or its module may still be loading
+            // (lazy / per-tag loading). Buffer and deliver when it registers.
+            SekiSonner._pending.push(pending);
+            if (SekiSonner._pending.length > MAX_PENDING) {
+                SekiSonner._pending.shift();
+            }
+            return pending.id;
         }
-        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,
-        });
+        SekiSonner._deliver(SekiSonner._instance, pending);
+        return pending.id;
     }
     static success(message, options) {
         return SekiSonner._show(message, 'success', options);
@@ -40,6 +64,8 @@ export class SekiSonner {
         return SekiSonner._show(message, 'default', options);
     }
     static dismiss(id) {
+        // Toasts still buffered never reached the screen; drop them.
+        SekiSonner._pending = id ? SekiSonner._pending.filter(p => p.id !== id) : [];
         if (!SekiSonner._instance) {
             return;
         }
@@ -53,3 +79,5 @@ export class SekiSonner {
     }
 }
 SekiSonner._instance = null;
+/** Toasts fired before any <seki-sonner> was mounted; flushed on _register. */
+SekiSonner._pending = [];

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"; }