@sekiui/elements 0.1.4 → 0.1.5

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

@@ -1,8 +1,13 @@
 import { h, Host } from "@stencil/core";
 import { ContextConsumer } from "../../utils/context-bridge";
+import { DialogLabelSource, OverlayLayer } from "../../utils/overlay";
 /**
  * seki-sheet-content: Container for sheet content
  *
+ * A modal panel: while open it moves focus inside, traps Tab, locks page
+ * scroll, closes on Escape when nothing is open on top of it, and returns
+ * focus to the element that opened it (utils/overlay.ts).
+ *
  * @component SheetContent
  */
 export class SekiSheetContent {
@@ -17,7 +22,25 @@ export class SekiSheetContent {
          * seki-sheet parent (e.g. mounted standalone).
          */
         this._isOpen = true;
+        /** Title text mirrored for the accessible name (#357). */
+        this._label = '';
+        /** Description text mirrored for the accessible description (#357). */
+        this._description = '';
         this.sheetConsumer = new ContextConsumer('seki-sheet', '_sheetContext', () => this.syncOpenState());
+        this.layer = new OverlayLayer({
+            modal: true,
+            container: () => this.contentRef,
+            onEscape: (event) => {
+                if (!this._isOpen)
+                    return;
+                event.preventDefault();
+                this.closeSheet.emit();
+            },
+        });
+        this.labels = new DialogLabelSource((label, description) => {
+            this._label = label;
+            this._description = description;
+        });
         this.handleCloseClick = () => {
             this.closeSheet.emit();
         };
@@ -28,17 +51,27 @@ export class SekiSheetContent {
      */
     syncOpenState() {
         var _a, _b;
-        // No seki-sheet parent: stay open (standalone use).
-        if (!this.sheetConsumer.parent)
-            return;
-        this._isOpen = (_b = (_a = this.sheetConsumer.context) === null || _a === void 0 ? void 0 : _a.isOpen) !== null && _b !== void 0 ? _b : false;
+        // No seki-sheet parent: stay open (standalone use) without modal behaviour.
+        if (this.sheetConsumer.parent) {
+            this._isOpen = (_b = (_a = this.sheetConsumer.context) === null || _a === void 0 ? void 0 : _a.isOpen) !== null && _b !== void 0 ? _b : false;
+            this.layer.setActive(this._isOpen);
+        }
+        if (this._isOpen)
+            this.labels.observe(this.el);
+        else
+            this.labels.disconnect();
     }
     connectedCallback() {
         this.sheetConsumer.connect(this.el);
         this.propagateSide();
     }
+    componentDidRender() {
+        this.layer.didRender();
+    }
     disconnectedCallback() {
         this.sheetConsumer.disconnect();
+        this.layer.setActive(false);
+        this.labels.disconnect();
     }
     /** Propagate the side attribute to the parent for CSS targeting. */
     propagateSide() {
@@ -49,10 +82,10 @@ export class SekiSheetContent {
         if (!this._isOpen) {
             return null;
         }
-        return (h(Host, { "data-side": this.side }, h("div", { role: "dialog", "aria-modal": "true", class: {
+        return (h(Host, { "data-side": this.side }, h("div", { ref: (el) => (this.contentRef = el), role: "dialog", tabindex: "-1", "aria-modal": "true", "aria-labelledby": this._label ? 'label' : undefined, "aria-describedby": this._description ? 'description' : undefined, class: {
                 'seki-sheet-content': true,
                 [`seki-sheet-content--${this.side}`]: true,
-            }, part: "content" }, h("button", { type: "button", class: "seki-sheet-close-button", "aria-label": "Close", onClick: this.handleCloseClick }, 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", "aria-hidden": "true" }, h("path", { d: "M18 6 6 18" }), h("path", { d: "m6 6 12 12" }))), h("slot", null))));
+            }, part: "content" }, h("slot", null), h("button", { type: "button", class: "seki-sheet-close-button", "aria-label": "Close", onClick: this.handleCloseClick }, 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", "aria-hidden": "true" }, h("path", { d: "M18 6 6 18" }), h("path", { d: "m6 6 12 12" }))), h("span", { id: "label", hidden: true }, this._label), h("span", { id: "description", hidden: true }, this._description))));
     }
     static get is() { return "seki-sheet-content"; }
     static get encapsulation() { return "shadow"; }
@@ -101,7 +134,9 @@ export class SekiSheetContent {
     }
     static get states() {
         return {
-            "_isOpen": {}
+            "_isOpen": {},
+            "_label": {},
+            "_description": {}
         };
     }
     static get events() {

package/dist/collection/components/sheet/seki-sheet-description.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiSheetDescription {
     render() {
-        return (h("p", { key: 'ed2bc89377165fc7e6693bcbc09a8e2fee78b42f', class: "seki-sheet-description", part: "description" }, h("slot", { key: 'eaff95aa950d47fce57e9e1b12bc7fadb88cd7db' })));
+        return (h("p", { key: '7c3b11e21365a884a086dce0ea9cc52166997a03', class: "seki-sheet-description", part: "description" }, h("slot", { key: '4e1fd1119c695cc43ac47a53ef769dcda6a24895' })));
     }
     static get is() { return "seki-sheet-description"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiSheetFooter {
     render() {
-        return (h("div", { key: 'ceaf6cda1e7229c9d30863cfb37e7670e2e50a87', class: "seki-sheet-footer", part: "footer" }, h("slot", { key: '49ab030f3ea9e9760693e122c6b47eaf1718adb9' })));
+        return (h("div", { key: '8d3463f966459b30420ad7b7127f09e350c3d500', class: "seki-sheet-footer", part: "footer" }, h("slot", { key: 'afb96e610bae0fa1eff78275d59ba0e2be907a2c' })));
     }
     static get is() { return "seki-sheet-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiSheetHeader {
     render() {
-        return (h("div", { key: '0e57dfe5cf2e4a1b657a0fccbfe58cea62b656c3', class: "seki-sheet-header", part: "header" }, h("slot", { key: 'd960f7e6405ac44bd0a8503f1d3d7cd963ce57e9' })));
+        return (h("div", { key: '68deeb83a6e5babe45dd38b9728f138779b87ef9', class: "seki-sheet-header", part: "header" }, h("slot", { key: 'df62196233707817e3d6161769549eab28a2446a' })));
     }
     static get is() { return "seki-sheet-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sheet/seki-sheet-title.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiSheetTitle {
     render() {
-        return (h("h2", { key: '2a7c3a3b16b89feb98155085f415219a60e71b08', class: "seki-sheet-title", part: "title" }, h("slot", { key: '9720609fb2bdcbe3f802bf8fb73608c9e183181d' })));
+        return (h("h2", { key: '29a67ace34e621ead143d99d4ebd4b125c7c1394', class: "seki-sheet-title", part: "title" }, h("slot", { key: '7e21592285328724c681118d084ce4d7f15245f4' })));
     }
     static get is() { return "seki-sheet-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class SekiSheetTrigger {
         };
     }
     render() {
-        return (h("div", { key: '6d27b18621176d44da896773f8957c337a867b69', class: "seki-sheet-trigger", part: "trigger", onClick: this.handleClick }, h("slot", { key: '4da14ebcf022c04a57d953560dd1b49ab7ec8432' })));
+        return (h("div", { key: '46224755412bb1ab8b5fb95f3ae9a1c48c4b8091', class: "seki-sheet-trigger", part: "trigger", onClick: this.handleClick }, h("slot", { key: '723a68ac08c094c672001e26c67abb9cf10f741b' })));
     }
     static get is() { return "seki-sheet-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -233,3 +233,9 @@
     transition: none;
   }
 }
+
+/* The panel itself takes focus only when it holds nothing focusable
+   (tabindex="-1", see utils/overlay.ts); no ring on the whole panel. */
+.seki-sheet-content:focus {
+  outline: none;
+}

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

@@ -99,16 +99,11 @@ export class SekiSheet {
     handleCloseSheet() {
         this.closeSheet();
     }
-    handleKeydown(ev) {
-        if (this._isOpen && ev.key === 'Escape') {
-            this.closeSheet();
-        }
-    }
     render() {
-        return (h("div", { key: 'dda645ffb1445b876a53d3713777ed25e7f85998', class: {
+        return (h("div", { key: '0f6638e00fd4e0d82ca019e2282cc310cc6c10f6', class: {
                 'seki-sheet': true,
                 'seki-sheet--open': this._isOpen,
-            }, part: "sheet" }, h("slot", { key: '8c7fca42b42eb4c81ce3a4ab7f01d9ddf284a469' }), this._isOpen && (h("div", { key: '2fc1c0d783f8f39656ace7f065d326d4a70c2da6', class: "seki-sheet-overlay", part: "overlay", onClick: () => this.closeSheet() }))));
+            }, part: "sheet" }, h("slot", { key: 'f682eabe0bb68d4539826e095b14edd96037177a' }), this._isOpen && (h("div", { key: 'db5b19c6441cd0e485723a4c606f385c2dea643c', class: "seki-sheet-overlay", part: "overlay", onClick: () => this.closeSheet() }))));
     }
     static get is() { return "seki-sheet"; }
     static get encapsulation() { return "shadow"; }
@@ -309,12 +304,6 @@ export class SekiSheet {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKeydown",
-                "target": "window",
-                "capture": false,
-                "passive": false
             }];
     }
 }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarContent {
     render() {
-        return (h("div", { key: 'f979ec48c8bf89667c79a4ebfa79ee2a61604114', class: "sidebar-content" }, h("slot", { key: '41412c1311cff9e1cc7ff31dc85d2ac2f8f1ad29' })));
+        return (h("div", { key: '500dfab4642b35ee677124e26be2d9407180b43e', class: "sidebar-content" }, h("slot", { key: '90c96d96d2f1d1f23ecca671a578ed1a0719e15a' })));
     }
     static get is() { return "seki-sidebar-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class SekiSidebarFooter {
         this._isIconMode = !event.detail.open && !event.detail.isMobile;
     }
     render() {
-        return (h(Host, { key: 'a1302521251beaf9f08cf44dd3fa6b4ea3ec8077', "data-icon-mode": this._isIconMode ? 'true' : 'false' }, h("div", { key: 'b91a33678008cf825bcbf746aad9954353a34dc9', class: { 'sidebar-footer': true, 'sidebar-footer--icon-mode': this._isIconMode } }, h("slot", { key: 'f7cd857699b0291f939bf11fd58bc49227d3a39d' }))));
+        return (h(Host, { key: 'd26c902e84bafdc94d1c4c4e10f6d134fb4ae0dc', "data-icon-mode": this._isIconMode ? 'true' : 'false' }, h("div", { key: '2ddc22006e409723f76d0ae4663005d25779fb8e', class: { 'sidebar-footer': true, 'sidebar-footer--icon-mode': this._isIconMode } }, h("slot", { key: '042761deb15b766fc01b0443ac755b1c14c1c420' }))));
     }
     static get is() { return "seki-sidebar-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class SekiSidebarGroupAction {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: 'bb5c399d6f81f5a9eca25b3ac60ef258784ea930' }, h("button", { key: 'a42660d8aca0d71d53f0df7bb9b4200e1d6ab60b', class: "sidebar-group-action", type: "button", disabled: this.disabled, "aria-label": this.ariaLabel }, h("slot", { key: 'ab0625c2d39127abdb2cae30b5fc752b7ba78115' }))));
+        return (h(Host, { key: 'bce7dde6f77adb86a338dee0c2ac1cc024319471' }, h("button", { key: 'a5994a09e7c6a641f1c97608b841fb77ad6332fb', class: "sidebar-group-action", type: "button", disabled: this.disabled, "aria-label": this.ariaLabel }, h("slot", { key: '24a4d78855effc72f39839b9213fb1e6797fd78a' }))));
     }
     static get is() { return "seki-sidebar-group-action"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarGroupContent {
     render() {
-        return (h("div", { key: 'cd0abc5918e667162cb14a0a3f0912075a7d1920', class: "sidebar-group-content" }, h("slot", { key: '7e15f4ad7845e324c1b42db8fa5bc742fbcfdb84' })));
+        return (h("div", { key: 'e0c6b6be91907f1ca794bb2beb53f8ae9474a92c', class: "sidebar-group-content" }, h("slot", { key: 'dca9e8a73217143ef52a0b0b6c7a6a115c8d0a63' })));
     }
     static get is() { return "seki-sidebar-group-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarGroupLabel {
     render() {
-        return (h("div", { key: 'bf9489c5a1fc64ec51a3f5f1b1d464f83f677b14', class: "sidebar-group-label" }, h("slot", { key: '6a996782b24a511b2923f035bbd9e1fbb694a181' })));
+        return (h("div", { key: 'd370c5f6d3d11d192d4fb79e6b1f516a1b62ac9f', class: "sidebar-group-label" }, h("slot", { key: 'dab9ad78f2cf62236db031d07b8e9701caf7ae13' })));
     }
     static get is() { return "seki-sidebar-group-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarGroup {
     render() {
-        return (h("div", { key: '55bf84d6e20757d9e4180db5f9c537d927f8138e', class: "sidebar-group" }, this.label && (h("seki-sidebar-group-label", { key: 'f7f12ab0c7a718142a1b5e8a1d660dc188f3f118' }, this.label)), h("div", { key: '4fa25cfaf3ab74c8704c69410843f53afe3e85ab', class: "sidebar-group-content" }, h("slot", { key: '1b2d3fc656193f909cf49365a3dd5d6eeb1fcf12' }))));
+        return (h("div", { key: '1c05d1d589af1417bf7f3c7173d335ed22b083e0', class: "sidebar-group" }, this.label && (h("seki-sidebar-group-label", { key: 'bce26c2457ddd39f73e6743604d99866b2fb747b' }, this.label)), h("div", { key: '655dabcf8eac6267a53a24ec1a984899c58e6ade', class: "sidebar-group-content" }, h("slot", { key: 'ffd0618eb21fa92326e5210104a593eed0212e1f' }))));
     }
     static get is() { return "seki-sidebar-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class SekiSidebarHeader {
         this._isIconMode = !event.detail.open && !event.detail.isMobile;
     }
     render() {
-        return (h(Host, { key: 'deb9351916fb52948da41aa87f5678da98a60b7a', "data-icon-mode": this._isIconMode ? 'true' : 'false' }, h("div", { key: 'fa95cdee4653bc60903c20799d660bc31416e77e', class: { 'sidebar-header': true, 'sidebar-header--icon-mode': this._isIconMode } }, h("slot", { key: '3bf41542bc7f53f9dade0ef49ab079528e4161ee' }))));
+        return (h(Host, { key: 'd05d5bfd09c90ae1a5e5ec4ec0e798ef9dae0772', "data-icon-mode": this._isIconMode ? 'true' : 'false' }, h("div", { key: 'fd41101b446c7c1134090bec1a2b638eb38c1f71', class: { 'sidebar-header': true, 'sidebar-header--icon-mode': this._isIconMode } }, h("slot", { key: 'cf761f2ad816608166af1d3b451bf17097c8f67f' }))));
     }
     static get is() { return "seki-sidebar-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarInset {
     render() {
-        return (h("div", { key: '4d8ce4d654f9fac64f54d67d849df178109b52db', class: "sidebar-inset" }, h("slot", { key: '48079f3507ace26ee7d1b286c3ed4d6d72254b90' })));
+        return (h("div", { key: '15c812c1a0befe8053755bb0144d1efa57dcfa30', class: "sidebar-inset" }, h("slot", { key: 'eb2087648ef1ba1a53e0364dd16e7535d7fd5db6' })));
     }
     static get is() { return "seki-sidebar-inset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class SekiSidebarMenuAction {
         this.disabled = false;
     }
     render() {
-        return (h("button", { key: '14fb8795b79d5e245df9bbd72a164a07575c38ff', class: "sidebar-menu-action", disabled: this.disabled, type: "button", "aria-label": "More options" }, h("slot", { key: 'd6cedb778375fb451b4752c72719b761c5d3851f' })));
+        return (h("button", { key: 'a4a1b19c7f0fda2f15ff6aa5c2eae4bfeeb2ffae', class: "sidebar-menu-action", disabled: this.disabled, type: "button", "aria-label": "More options" }, h("slot", { key: '5aab1989735ee8732bebe5334f1e98028c6b2033' })));
     }
     static get is() { return "seki-sidebar-menu-action"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarMenuBadge {
     render() {
-        return (h("span", { key: 'de0d939a28e74478babb5b7c7c10e6355f8cb5e7', class: "sidebar-menu-badge" }, h("slot", { key: '79c931a1a5fbe8cd7b035e4f75213c9559fd1909' })));
+        return (h("span", { key: 'a9cd0fafb1489b51f1dad0b90578b929407187f7', class: "sidebar-menu-badge" }, h("slot", { key: 'f0a836e0cab1cb2236db7aa674197636274ddbc9' })));
     }
     static get is() { return "seki-sidebar-menu-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,7 +70,7 @@ export class SekiSidebarMenuButton {
                 buttonProps.tabIndex = -1;
             }
         }
-        return (h(Tag, Object.assign({ key: '4f354a7f16e0cd5c5bfb964d9f2e3e755244b114' }, buttonProps), h("span", { key: 'fb9a50b871759a9a9af1875805de1401becf4b2a', class: "sidebar-menu-button-content" }, h("slot", { key: '29c2251161a1e34cbd7e436e7e16ce472a0f4458' })), this._isIconMode && this.tooltipText && (h("span", { key: 'b41f1aa18d4492b5873710909914d77a1f8ea83b', class: "sr-only" }, this.tooltipText))));
+        return (h(Tag, Object.assign({ key: '13d71d3ec15737884ac9f96856e14fdfefe1d93d' }, buttonProps), h("span", { key: '3236cdb0e330ef4ed332d40974bcc94b5d38ded1', class: "sidebar-menu-button-content" }, h("slot", { key: 'fb8297fbb9b7ae184385ef05425e5e5298106d67' })), this._isIconMode && this.tooltipText && (h("span", { key: '43aad0cec61c4049d1c0d0cd81915328af0e87c5', class: "sr-only" }, this.tooltipText))));
     }
     static get is() { return "seki-sidebar-menu-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarMenuItem {
     render() {
-        return (h("li", { key: 'b9a05f95ea471d6a20fbeb6ff0c240954a31d998', class: "sidebar-menu-item", role: "none" }, h("slot", { key: '31cbbe36cebf89e10327563457a501176e2bf1f1' })));
+        return (h("li", { key: '0f6a6b325c9876ea07088268091d30eab0a22ff5', class: "sidebar-menu-item", role: "none" }, h("slot", { key: '7c772b41b4040f1c97b83bb7a5086d547a986e50' })));
     }
     static get is() { return "seki-sidebar-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class SekiSidebarMenuSkeleton {
         this.showIcon = false;
     }
     render() {
-        return (h("div", { key: '2636167c173d3b5216490d961e680a359af54643', class: "sidebar-menu-skeleton" }, this.showIcon && h("div", { key: '8d0fccd9f0469e35669cca5b46d29ee9b532bebc', class: "sidebar-menu-skeleton-icon" }), h("div", { key: '05fc14d888065cb219bf21902e39ca84b229dd23', class: "sidebar-menu-skeleton-text" })));
+        return (h("div", { key: '0eecf362036d5ae849108068e8303502d0e7599d', class: "sidebar-menu-skeleton" }, this.showIcon && h("div", { key: '93b6b2a888000edf7c96938eecd9d9ed306e6935', class: "sidebar-menu-skeleton-icon" }), h("div", { key: 'de7d9bf22f57a28578a3cfa5ad729e03661b13a8', class: "sidebar-menu-skeleton-text" })));
     }
     static get is() { return "seki-sidebar-menu-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,10 +11,10 @@ export class SekiSidebarMenuSubButton {
         this.disabled = false;
     }
     render() {
-        return (h("button", { key: '6725b620bd7ca278317d5fb61222232a6ba700d2', class: {
+        return (h("button", { key: '4a5cc688711df89dafa5b7ccb8645ba9723c7493', class: {
                 'sidebar-menu-sub-button': true,
                 'sidebar-menu-sub-button--active': this.active,
-            }, disabled: this.disabled, type: "button", role: "menuitem" }, h("slot", { key: '374fa3869e5cdcbbf026636a1f43f64b1474f6c0' })));
+            }, disabled: this.disabled, type: "button", role: "menuitem" }, h("slot", { key: '46c3f925a7d8266730f3c893727bb9d973dbba0a' })));
     }
     static get is() { return "seki-sidebar-menu-sub-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarMenuSubItem {
     render() {
-        return (h("li", { key: '29920cab40c87aca765241e267dc819ecde12823', class: "sidebar-menu-sub-item", role: "none" }, h("slot", { key: '718e921c6ca2f8e1dd3d5b163ed288bd71f1be4e' })));
+        return (h("li", { key: '7363948b18505aaa73ce98d171f1b98bed131109', class: "sidebar-menu-sub-item", role: "none" }, h("slot", { key: '29ecba2ee129e963a930dd627f99aef988aead71' })));
     }
     static get is() { return "seki-sidebar-menu-sub-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -43,13 +43,13 @@ export class SekiSidebarMenuSub {
         }
     }
     render() {
-        return (h(Host, { key: '709d9ae8cd2708691618ef05e8e2535b37e8b3b3', "data-state": this._open ? 'open' : 'closed' }, h("div", { key: '52f592821dc4d1bf7e3a706c0093e44d3f0f027c', class: "sidebar-menu-sub" }, h("div", { key: '78545dafc9c26dcd4c1d382f453a9cea5b2a2341', class: "sidebar-menu-sub-trigger" }, h("slot", { key: 'd8046ae2004129e050f94195c4cdac11602c0db8', name: "trigger" }), h("svg", { key: '07abe4498b1194c9e984e503378c9437458dc252', class: {
+        return (h(Host, { key: 'e543430cb5e1c5d9133145003e20eedc95cd57c4', "data-state": this._open ? 'open' : 'closed' }, h("div", { key: '34a1940f4200e2e593132b08778e6a1db63005e5', class: "sidebar-menu-sub" }, h("div", { key: '0b5ce83b1aa61b4e00f040dc46a19cc777ab740c', class: "sidebar-menu-sub-trigger" }, h("slot", { key: '5a9e0ad9b011d535074c51820e3b5fbe414b6f68', name: "trigger" }), h("svg", { key: 'eb548ed91a10b8b8e80d62d1090848d88a33d431', class: {
                 'sidebar-menu-sub-chevron': true,
                 'sidebar-menu-sub-chevron--open': this._open,
-            }, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: 'af06f1c31ddeb49f9d20f1c6d2bf6839d4f74dc6', d: "m9 18 6-6-6-6" }))), h("div", { key: '0cfa1c2a09e61d4fbaf2239bdc01b541edbe4c35', class: {
+            }, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '85b05df24f7a1deab3c9e8faf7b7bad3efe4ce38', d: "m9 18 6-6-6-6" }))), h("div", { key: '34dd07171039567ce478db1287285e751fb21cf1', class: {
                 'sidebar-menu-sub-wrapper': true,
                 'sidebar-menu-sub-wrapper--open': this._open,
-            } }, h("ul", { key: '7e7dc9c90cd1eaa2026dd83247b0c86b573b3bfd', class: "sidebar-menu-sub-content", role: "menu", "aria-hidden": !this._open }, h("slot", { key: 'ae1d307ca26299e09381fd83a8d2d6874275ef27' }))))));
+            } }, h("ul", { key: '94b160785917ae2ba8aa17433f25c2b1414373ea', class: "sidebar-menu-sub-content", role: "menu", "aria-hidden": !this._open }, h("slot", { key: 'f5d22c83a653c8400215434d77f780ecfa991927' }))))));
     }
     static get is() { return "seki-sidebar-menu-sub"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiSidebarMenu {
     render() {
-        return (h("ul", { key: 'a7f27bd597907ceabfab084d54cc5959a3bd1c45', class: "sidebar-menu", role: "menu" }, h("slot", { key: '4f713c44eb316dc19642c17129aa7d5d461c9c26' })));
+        return (h("ul", { key: '57f7f7ca67ce0a3022882c63c284ad6274b14cab', class: "sidebar-menu", role: "menu" }, h("slot", { key: '1d09db6d9a7638b7cf8ef7a2324cca00aa151942' })));
     }
     static get is() { return "seki-sidebar-menu"; }
     static get encapsulation() { return "shadow"; }

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 = [];