@sekiui/elements 0.1.3 → 0.1.5

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { buildOptionId } from "../../utils/select";
-import { subscribeToContextChange } from "../../utils/context-bridge";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * @slot - Custom trigger content
  * @slot pill - Custom pill rendering in multi-select mode
@@ -11,16 +11,16 @@ export class SekiSelectTrigger {
         // ===========================
         // Lifecycle
         // ===========================
-        this.contextSubscription = { parent: null, unsubscribe: () => { } };
+        // One consumer covers value, open, focus, disabled and option registration:
+        // seki-select republishes on each of them. connect() reads the context right
+        // away, so a trigger that connects after the select already published still
+        // starts from the current value.
+        this.selectConsumer = new ContextConsumer('seki-select', 'selectContext', () => this.handleParentContextChange());
         // ===========================
         // Parent Event Listeners
         // ===========================
-        this.handleParentOpenChange = () => {
-            // Force re-render when parent's open state changes
-            this.forceUpdate++;
-        };
-        this.handleParentValueChange = () => {
-            // Force re-render when parent's value changes
+        this.handleParentContextChange = () => {
+            // Force re-render when the parent's context changes
             this.forceUpdate++;
         };
         // ===========================
@@ -47,42 +47,36 @@ export class SekiSelectTrigger {
             }
         };
     }
-    componentDidLoad() {
-        // Manually attach event listeners to ensure they work
-        if (this.buttonRef) {
-            this.buttonRef.addEventListener('click', this.handleButtonClick);
-            this.buttonRef.addEventListener('keydown', this.handleButtonKeyDown);
-        }
-        // Listen for state changes from parent
-        const parent = this.el.closest('seki-select');
-        if (parent) {
-            parent.addEventListener('sekiOpenChange', this.handleParentOpenChange);
-            parent.addEventListener('sekiChange', this.handleParentValueChange);
-        }
-        // sekiChange only fires for user-driven selection; programmatic value/
-        // focus/disabled changes (e.g. controlled-mode `select.value = x`) only
-        // emit the shared context-change event, so this needs its own subscription too.
-        this.contextSubscription = subscribeToContextChange(this.el, 'seki-select', this.handleParentValueChange);
+    connectedCallback() {
+        this.selectConsumer.connect(this.el);
     }
     disconnectedCallback() {
-        // Clean up event listeners
-        if (this.buttonRef) {
-            this.buttonRef.removeEventListener('click', this.handleButtonClick);
-            this.buttonRef.removeEventListener('keydown', this.handleButtonKeyDown);
-        }
-        const parent = this.el.closest('seki-select');
-        if (parent) {
-            parent.removeEventListener('sekiOpenChange', this.handleParentOpenChange);
-            parent.removeEventListener('sekiChange', this.handleParentValueChange);
-        }
-        this.contextSubscription.unsubscribe();
+        // The button's own listeners need no cleanup: they live and die with it.
+        this.selectConsumer.disconnect();
+    }
+    /**
+     * Listeners follow the button element itself: the button only exists once a
+     * context is available (the first render may be the "Loading..." fallback
+     * when this trigger upgrades before its seki-select), so binding once in
+     * componentDidLoad could miss it entirely.
+     */
+    setButtonRef(ref) {
+        var _a, _b;
+        const el = ref !== null && ref !== void 0 ? ref : undefined;
+        if (el === this.buttonRef)
+            return;
+        (_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.handleButtonClick);
+        (_b = this.buttonRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', this.handleButtonKeyDown);
+        this.buttonRef = el;
+        el === null || el === void 0 ? void 0 : el.addEventListener('click', this.handleButtonClick);
+        el === null || el === void 0 ? void 0 : el.addEventListener('keydown', this.handleButtonKeyDown);
     }
     // ===========================
     // Helpers
     // ===========================
     getSelectContext() {
-        const parent = this.el.closest('seki-select');
-        return parent === null || parent === void 0 ? void 0 : parent.selectContext;
+        var _a;
+        return (_a = this.selectConsumer.context) !== null && _a !== void 0 ? _a : undefined;
     }
     renderPlaceholder() {
         const parent = this.el.closest('seki-select');
@@ -121,9 +115,9 @@ export class SekiSelectTrigger {
         }
         const isOpen = selectContext.open;
         const isDisabled = selectContext.disabled;
-        return (h(Host, null, h("button", { ref: (el) => (this.buttonRef = el), type: "button", class: "trigger-button", role: "combobox", "aria-expanded": isOpen ? 'true' : 'false', "aria-controls": selectContext.contentId, "aria-activedescendant": selectContext.focusedOptionValue !== null
+        return (h(Host, null, h("button", { ref: (el) => this.setButtonRef(el), type: "button", class: "trigger-button", role: "combobox", "aria-expanded": isOpen ? 'true' : 'false', "aria-controls": selectContext.contentId, "aria-activedescendant": selectContext.focusedOptionValue !== null
                 ? buildOptionId(selectContext.contentId, selectContext.focusedOptionValue)
-                : undefined, "aria-label": selectContext.ariaLabel, "aria-labelledby": selectContext.ariaLabelledby, "aria-disabled": isDisabled ? 'true' : undefined, disabled: isDisabled, "data-disabled": isDisabled ? 'true' : undefined, "data-state": isOpen ? 'open' : 'closed' }, selectContext.multiple
+                : undefined, "aria-label": selectContext.ariaLabel, "aria-labelledby": selectContext.ariaLabelledby, "aria-description": selectContext.ariaDescription, "aria-invalid": selectContext.ariaInvalid === 'true' ? 'true' : undefined, "aria-disabled": isDisabled ? 'true' : undefined, disabled: isDisabled, "data-disabled": isDisabled ? 'true' : undefined, "data-state": isOpen ? 'open' : 'closed' }, selectContext.multiple
             ? this.renderMultiValue(selectContext)
             : this.renderSingleValue(selectContext), h("svg", { class: "trigger-chevron", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }

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

@@ -23,7 +23,7 @@ export class SekiSeparator {
     }
     render() {
         const isVertical = this.orientation === 'vertical';
-        return (h("div", { key: 'ee0a6075ad39effed579fcf238fd7a0ae1187cc9', class: {
+        return (h("div", { key: '8f0ba61d0c6c5b848b3a32343a2ed6efd7b8775f', class: {
                 'seki-separator': true,
                 'seki-separator--horizontal': !isVertical,
                 'seki-separator--vertical': isVertical,

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

@@ -11,7 +11,7 @@ export class SekiSheetClose {
         };
     }
     render() {
-        return (h("div", { key: '2a211518fb3c5764720299775870e506fa51e0a0', class: "seki-sheet-close", part: "close", onClick: this.handleClick }, h("slot", { key: '8882072920feb646fb253933d2f0e2f3548e6efe' })));
+        return (h("div", { key: '41a3bf71c3ed63cd8715f1deb68468ee304b7f82', class: "seki-sheet-close", part: "close", onClick: this.handleClick }, h("slot", { key: '3d5d7fa1c217ac82ddb308d1388a9c08df5c0bd2' })));
     }
     static get is() { return "seki-sheet-close"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +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 {
@@ -16,48 +22,70 @@ 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();
         };
-        this.onSheetOpenChange = () => {
-            this.syncOpenState();
-        };
     }
+    /**
+     * Re-read the parent's open state. Runs once on connect (picking up a sheet
+     * that is already open, e.g. `<seki-sheet open>`) and on every publish.
+     */
     syncOpenState() {
-        var _a;
-        if (!this.sheetEl)
-            return;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const context = this.sheetEl._sheetContext;
-        this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
-    }
-    componentWillLoad() {
-        var _a;
-        this.sheetEl = (_a = this.el.closest('seki-sheet')) !== null && _a !== void 0 ? _a : undefined;
-        // Propagate side attribute to parent for CSS targeting
-        if (this.sheetEl) {
-            this.sheetEl.setAttribute('data-side', this.side || 'right');
-            this.syncOpenState();
+        var _a, _b;
+        // 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();
     }
-    componentDidLoad() {
-        var _a, _b;
-        (_a = this.sheetEl) === null || _a === void 0 ? void 0 : _a.addEventListener('sheetOpen', this.onSheetOpenChange);
-        (_b = this.sheetEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sheetClose', this.onSheetOpenChange);
+    connectedCallback() {
+        this.sheetConsumer.connect(this.el);
+        this.propagateSide();
+    }
+    componentDidRender() {
+        this.layer.didRender();
     }
     disconnectedCallback() {
-        var _a, _b;
-        (_a = this.sheetEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sheetOpen', this.onSheetOpenChange);
-        (_b = this.sheetEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('sheetClose', this.onSheetOpenChange);
+        this.sheetConsumer.disconnect();
+        this.layer.setActive(false);
+        this.labels.disconnect();
+    }
+    /** Propagate the side attribute to the parent for CSS targeting. */
+    propagateSide() {
+        var _a;
+        (_a = this.sheetConsumer.parent) === null || _a === void 0 ? void 0 : _a.setAttribute('data-side', this.side || 'right');
     }
     render() {
         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"; }
@@ -106,7 +134,9 @@ export class SekiSheetContent {
     }
     static get states() {
         return {
-            "_isOpen": {}
+            "_isOpen": {},
+            "_label": {},
+            "_description": {}
         };
     }
     static get events() {
@@ -128,4 +158,10 @@ export class SekiSheetContent {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "side",
+                "methodName": "propagateSide"
+            }];
+    }
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * seki-sheet: Root sheet component (slide-out panel)
  *
@@ -36,8 +37,8 @@ export class SekiSheet {
     componentWillLoad() {
         this._isOpen = this.open || this.defaultOpen;
         this.open = this._isOpen;
-    }
-    componentDidLoad() {
+        // Publish before the first render so `<seki-sheet open>` shows its content
+        // at first paint (#323).
         this.updateContext();
     }
     handleOpenPropChange(newValue) {
@@ -89,9 +90,8 @@ export class SekiSheet {
     }
     updateContext() {
         // seki-sheet-content has no other way to know this sheet's open state — it
-        // reads this off the host element via closest('seki-sheet').
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._sheetContext = { isOpen: this._isOpen };
+        // reads this off the host element (see consumeContext in context-bridge).
+        publishContext(this.el, '_sheetContext', { isOpen: this._isOpen }, this.sheetContextChange);
     }
     handleTriggerClick() {
         this.toggleSheet();
@@ -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: 'a368d95081a628a104171c11b046a5acaf0c5a61', class: {
+        return (h("div", { key: '0f6638e00fd4e0d82ca019e2282cc310cc6c10f6', class: {
                 'seki-sheet': true,
                 'seki-sheet--open': this._isOpen,
-            }, part: "sheet" }, h("slot", { key: '29b5012870238b5859216c681db33b13e88185d0' }), this._isOpen && (h("div", { key: '6914c57abd54a1d3b02458708955d9c13ba98db1', 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"; }
@@ -217,6 +212,21 @@ export class SekiSheet {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "sheetContextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: notifies seki-sheet-content that `_sheetContext` changed. Not\npart of the public API; listen to `sekiOpenChange` instead."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -294,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"; }