@sekiui/elements 0.0.82 → 0.0.84

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

@@ -123,7 +123,17 @@ export class SekiSelect {
             return this.registeredOptions.filter(opt => opt.value === this.internalValue);
         };
         this.registerOption = (option) => {
-            this.registeredOptions = [...this.registeredOptions, option];
+            // Idempotent: replace in place if this value already exists (e.g. an option
+            // re-registering after a DOM move) so reconnects can't create duplicates.
+            const existingIndex = this.registeredOptions.findIndex(opt => opt.value === option.value);
+            if (existingIndex >= 0) {
+                const next = [...this.registeredOptions];
+                next[existingIndex] = option;
+                this.registeredOptions = next;
+            }
+            else {
+                this.registeredOptions = [...this.registeredOptions, option];
+            }
         };
         this.unregisterOption = (value) => {
             this.registeredOptions = this.registeredOptions.filter(opt => opt.value !== value);
@@ -163,6 +173,8 @@ export class SekiSelect {
         }
         // Expose context on the element for child components
         this.el.selectContext = this.selectContext;
+        // Seed the form value so an unchanged select still submits its initial value.
+        this.syncFormValue();
     }
     componentDidLoad() {
         // Expose context on the element for child components
@@ -202,10 +214,45 @@ export class SekiSelect {
     }
     handleInternalValueChange() {
         this.updateContextOnElement();
+        this.syncFormValue();
+    }
+    handleDisabledChange() {
+        this.syncFormValue();
     }
     updateContextOnElement() {
         this.el.selectContext = this.selectContext;
     }
+    /**
+     * Mirror the current selection into the associated form via ElementInternals.
+     * Replaces the previous hidden native control, which lived inside the shadow
+     * root and therefore never participated in form submission.
+     */
+    syncFormValue() {
+        if (!this.internals || typeof this.internals.setFormValue !== 'function') {
+            return;
+        }
+        // Disabled controls do not contribute a value to the form.
+        if (this.disabled) {
+            this.internals.setFormValue(null);
+            return;
+        }
+        if (this.multiple) {
+            const values = Array.isArray(this.internalValue) ? this.internalValue : [];
+            if (!this.name || values.length === 0) {
+                this.internals.setFormValue(null);
+                return;
+            }
+            const formData = new FormData();
+            for (const val of values) {
+                formData.append(this.name, String(val));
+            }
+            this.internals.setFormValue(formData);
+        }
+        else {
+            const value = this.internalValue;
+            this.internals.setFormValue(value === '' || value === undefined || value === null ? null : String(value));
+        }
+    }
     // ===========================
     // Methods
     // ===========================
@@ -268,29 +315,33 @@ export class SekiSelect {
         }
     }
     focusNextOption() {
-        if (this.registeredOptions.length === 0)
+        const options = this.registeredOptions;
+        if (options.length === 0)
             return;
-        let nextIndex = 0;
-        if (this.focusedOptionValue !== null) {
-            const currentIndex = this.registeredOptions.findIndex(opt => opt.value === this.focusedOptionValue);
-            nextIndex = currentIndex >= 0 ? Math.min(currentIndex + 1, this.registeredOptions.length - 1) : 0;
-        }
-        const nextOption = this.registeredOptions[nextIndex];
-        if (nextOption && !nextOption.disabled) {
-            this.handleOptionFocus(nextOption.value);
+        const currentIndex = this.focusedOptionValue !== null
+            ? options.findIndex(opt => opt.value === this.focusedOptionValue)
+            : -1;
+        // Walk forward to the next enabled option, skipping disabled ones.
+        for (let i = currentIndex + 1; i < options.length; i++) {
+            if (!options[i].disabled) {
+                this.handleOptionFocus(options[i].value);
+                return;
+            }
         }
     }
     focusPreviousOption() {
-        if (this.registeredOptions.length === 0)
+        const options = this.registeredOptions;
+        if (options.length === 0)
             return;
-        let prevIndex = this.registeredOptions.length - 1;
-        if (this.focusedOptionValue !== null) {
-            const currentIndex = this.registeredOptions.findIndex(opt => opt.value === this.focusedOptionValue);
-            prevIndex = currentIndex > 0 ? currentIndex - 1 : this.registeredOptions.length - 1;
-        }
-        const prevOption = this.registeredOptions[prevIndex];
-        if (prevOption && !prevOption.disabled) {
-            this.handleOptionFocus(prevOption.value);
+        const currentIndex = this.focusedOptionValue !== null
+            ? options.findIndex(opt => opt.value === this.focusedOptionValue)
+            : options.length;
+        // Walk backward to the previous enabled option, skipping disabled ones.
+        for (let i = currentIndex - 1; i >= 0; i--) {
+            if (!options[i].disabled) {
+                this.handleOptionFocus(options[i].value);
+                return;
+            }
         }
     }
     addToSearchBuffer(char) {
@@ -339,19 +390,11 @@ export class SekiSelect {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: '5a1333b70dd0f6cb4e02c42643cd21b89f896ceb' }, h("slot", { key: 'd67d8ebd047bb146f42a5ce73871324868235137' }), this.name && this.renderHiddenNativeElement()));
-    }
-    renderHiddenNativeElement() {
-        if (this.multiple) {
-            return (h("select", { class: "select-native", name: this.name, multiple: true, required: this.required, disabled: this.disabled, "aria-hidden": "true", tabindex: -1 }, Array.isArray(this.internalValue) &&
-                this.internalValue.map(val => (h("option", { value: val, selected: true }, val)))));
-        }
-        else {
-            return (h("input", { type: "hidden", class: "select-native", name: this.name, value: this.internalValue, required: this.required, disabled: this.disabled }));
-        }
+        return (h(Host, { key: '3fad15b79a53f9ef681d129650f0f533c6c07ff8' }, h("slot", { key: 'f6d571849ceb5fa3459a252a76311df4c2c6dff4' })));
     }
     static get is() { return "seki-select"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-select.css"]
@@ -549,7 +592,7 @@ export class SekiSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name"
             },
             "maxVisiblePills": {
@@ -865,6 +908,10 @@ export class SekiSelect {
             }, {
                 "propName": "internalValue",
                 "methodName": "handleInternalValueChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -18,7 +18,7 @@ export class SekiSelectGroup {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: 'e351318be0e30d57db2ae560dbc7feb719ffeb9a' }, h("div", { key: 'a0974589692fa7a337011bfe7d25e64bbe5e872b', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: '48d45cee86d3a0ef56cea3891691e682dd04e2c6', class: "group-separator", "aria-hidden": "true" }), h("div", { key: '3cfd23915eb4a2d704975aef8749786645426079', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: 'dab4b40a32f9e23cbc94085a5d75162704fa01a8', name: "label" }, this.label)), h("div", { key: 'd3ac276b85ca1e2e5d9bc7c212620bcce6cafc35', class: "group-options" }, h("slot", { key: 'b7746d8cb39704b38b798a694a28f3ed42eab856' })))));
+        return (h(Host, { key: '7867d34d43e681de3888de3eeb2031924a43dd6f' }, h("div", { key: 'e3b8189016809b3c1efb046cff1a472d6d5c59da', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: '24fb1871c80afdc7e0d3f656e95d11d40cbfc269', class: "group-separator", "aria-hidden": "true" }), h("div", { key: '5219a007eb3abddea08b2ecb7d0b4c84985e50e9', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: 'ab8a8a1e12404c9c808020cc51bbb34d48eb7ecf', name: "label" }, this.label)), h("div", { key: '324e7941e25fb1f91542ad0c28f9753aba24f6e1', class: "group-options" }, h("slot", { key: '42069f7464d8cdd1b1c7fb868e8d4e2a24fae48f' })))));
     }
     static get is() { return "seki-select-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,9 +9,9 @@ export class SekiSelectOption {
         /** Whether the option is disabled */
         this.disabled = false;
         // ===========================
-        // State
+        // Lifecycle
         // ===========================
-        this.optionId = `option-${Math.random().toString(36).substr(2, 9)}`;
+        this.hasRegistered = false;
         // ===========================
         // Event Handlers
         // ===========================
@@ -44,21 +44,26 @@ export class SekiSelectOption {
         };
     }
     // ===========================
-    // Lifecycle
+    // State
     // ===========================
+    // Deterministic id so it matches the `option-${value}` reference that
+    // seki-select-trigger emits as aria-activedescendant. (Note: full
+    // cross-shadow IDREF resolution still requires the trigger and options to
+    // share a tree scope — see seki-select-trigger for the known limitation.)
+    get optionId() {
+        return `option-${this.value}`;
+    }
     componentDidLoad() {
-        var _a;
-        // Register this option with parent select
-        const selectContext = this.getSelectContext();
-        const displayLabel = this.label || ((_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
-        selectContext === null || selectContext === void 0 ? void 0 : selectContext.registerOption({
-            value: this.value,
-            label: displayLabel,
-            disabled: this.disabled,
-        });
+        this.registerWithParent();
     }
     connectedCallback() {
         registerThemeSync(this.el);
+        // Re-register on reconnect (after a DOM move). componentDidLoad fires only
+        // once, so without this the option would stay unregistered after being moved.
+        // Parent registration is idempotent, so this never duplicates.
+        if (this.hasRegistered) {
+            this.registerWithParent();
+        }
     }
     disconnectedCallback() {
         unregisterThemeSync(this.el);
@@ -66,6 +71,17 @@ export class SekiSelectOption {
         const selectContext = this.getSelectContext();
         selectContext === null || selectContext === void 0 ? void 0 : selectContext.unregisterOption(this.value);
     }
+    registerWithParent() {
+        var _a;
+        const selectContext = this.getSelectContext();
+        const displayLabel = this.label || ((_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+        selectContext === null || selectContext === void 0 ? void 0 : selectContext.registerOption({
+            value: this.value,
+            label: displayLabel,
+            disabled: this.disabled,
+        });
+        this.hasRegistered = true;
+    }
     // ===========================
     // Helpers
     // ===========================
@@ -80,7 +96,7 @@ export class SekiSelectOption {
         const selectContext = this.getSelectContext();
         const isSelected = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isValueSelected(this.value)) || false;
         const isFocused = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.focusedOptionValue) === this.value;
-        return (h(Host, { key: '8ba7a9bd8c4423bdc87237421bfed49ed485de7f' }, h("div", { key: 'cdeedf3061b3de0a12a56faccd56121fbcd4c7e3', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: '902d9c4caa962efa60eeb697a0595764ca82d822', class: "option-label" }, h("slot", { key: 'd15a6dfa001e33df302e17847aeb4b63ef2ca9fa' })), isSelected && (h("span", { key: '708d5a9eaea23837e6a75df3ae86ae484367b477', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: 'c170f9b1a743ce16aeee0ced9b3b67836c4e2677', name: "selected-indicator" }, h("svg", { key: '230c202c463fbf5912ab900595135e5df69fd6ee', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cad9198c5e438617c840b1e8e97db69e1b5a5a85', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '9d4d802e1b193bf95d139ceffd512756be470779' }, h("div", { key: '28df50bb268b156ebd469525ea24436e3c3004c2', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: '7cf7de57d19d17e2ec48117da0e4315d47b5d8a0', class: "option-label" }, h("slot", { key: '4085971b6c43e6f5e60e3df35e71ead8b67ad14e' })), isSelected && (h("span", { key: '6fc629d0160e5099a7fb2c716a456df083c828ac', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '81e1a764e87689248b2830ef57fe4257905a6545', name: "selected-indicator" }, h("svg", { key: 'e465bc7c15d93ac9a5f457222462c331fff12ca3', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3e1f8d96113cf57df17b9090f5c926201b4e0c4d', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "seki-select-option"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -18,7 +18,7 @@ export class SekiSheetClose {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("div", { key: '1cbac3a45a982cf402b796e8a5d1a2a7a555e967', class: "seki-sheet-close", part: "close", onClick: this.handleClick }, h("slot", { key: 'e0383ad8d5b6be4d9333387eb57a9555cd20f395' })));
+        return (h("div", { key: '6dd2f5309d4da6557f4f570677f80c91c244ab6e', class: "seki-sheet-close", part: "close", onClick: this.handleClick }, h("slot", { key: '39a1f16e2aa3d19e1b9a62b96c4aef6a30278aeb' })));
     }
     static get is() { return "seki-sheet-close"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class SekiSheetDescription {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("p", { key: '1051b675aa3674a86d624b5bb520a6d9f37824bd', class: "seki-sheet-description", part: "description" }, h("slot", { key: '9117ef53a2d4c44ceeacfe9db450725f1ded8cb2' })));
+        return (h("p", { key: '30311fecac67e26c13a4ebf25b16f14c2a2c7dc0', class: "seki-sheet-description", part: "description" }, h("slot", { key: '0fcba9a2e7b525f21bf4ff3a8e5deabf7bc9f861' })));
     }
     static get is() { return "seki-sheet-description"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class SekiSheetFooter {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("div", { key: 'dd056f387174e6588b920f3e42ecbadd05ce85eb', class: "seki-sheet-footer", part: "footer" }, h("slot", { key: '9dc0a77787334c15730e5c9123f90f33a1914d12' })));
+        return (h("div", { key: 'b7fb7fcf90475d33930f27895a565ef588bf4e6f', class: "seki-sheet-footer", part: "footer" }, h("slot", { key: '89fc76ca642736afd2c614a2cf924c2017f0bb47' })));
     }
     static get is() { return "seki-sheet-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class SekiSheetHeader {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("div", { key: '8792fcbb571404574ee5e7f016482b8fdb02edb2', class: "seki-sheet-header", part: "header" }, h("slot", { key: 'd151a643e10d99bca1029414b78ba260931d28fa' })));
+        return (h("div", { key: '6876a4ebeb5ad508f94a02dfd05e1cef1892013b', class: "seki-sheet-header", part: "header" }, h("slot", { key: '3e2019eb8835587cb9aebfd06ad0fb9e20f9bde7' })));
     }
     static get is() { return "seki-sheet-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class SekiSheetTitle {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("h2", { key: 'fa86c77c1e03fd9ab3f974347072def9827d2fa3', class: "seki-sheet-title", part: "title" }, h("slot", { key: '367a5f16a209b6fd0f3dc71f6b7be6bd1ed07573' })));
+        return (h("h2", { key: 'd0cdb3c0743914e4501aeb2b396b75800a183eed', class: "seki-sheet-title", part: "title" }, h("slot", { key: '3d978b2c5a42a971aae11ba31cf6c3b8ed452fe8' })));
     }
     static get is() { return "seki-sheet-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ export class SekiSheetTrigger {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("div", { key: '994e3c0c66b00e3957dd5590c5a66639d1aff515', class: "seki-sheet-trigger", part: "trigger", onClick: this.handleClick }, h("slot", { key: '167575e4915968c6c45efe1a248a27b121c7937d' })));
+        return (h("div", { key: '0139f6ffe5f5039c1c098f194048254ee3cc8c2b', class: "seki-sheet-trigger", part: "trigger", onClick: this.handleClick }, h("slot", { key: 'dd86e3fdd694b556e2112d76279036d8d4252c4c' })));
     }
     static get is() { return "seki-sheet-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -68,10 +68,10 @@ export class SekiSheet {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("div", { key: '614727058a67df99cd883d34eea0fc10c89e07a6', class: {
+        return (h("div", { key: 'bba151ac6fe32ddaa36a6d60b3ebb45209786362', class: {
                 'seki-sheet': true,
                 'seki-sheet--open': this.isOpen,
-            }, part: "sheet" }, h("slot", { key: '8d921a4be67d5ba1f9c27c56b913c46a611e1f76' }), this.isOpen && (h("div", { key: '2ef22f47303aaf10bc632db09dbf7d27380ab69c', class: "seki-sheet-overlay", part: "overlay", onClick: () => this.close() }))));
+            }, part: "sheet" }, h("slot", { key: '6e28341b810135c669581f010e5c3c6d8d276232' }), this.isOpen && (h("div", { key: 'a8382da9411b2b7e1929b938287a28b06628cc46', class: "seki-sheet-overlay", part: "overlay", onClick: () => this.close() }))));
     }
     static get is() { return "seki-sheet"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class SekiSidebarContent {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("div", { key: 'efb6267ec6d84337046779af5c1750f939dddb70', class: "sidebar-content" }, h("slot", { key: '4d2b422428b2616e6c144dc628f15fd70f1122b9' })));
+        return (h("div", { key: '4737da0a0a4d547b659e9b160b07c2923cc1e3e0', class: "sidebar-content" }, h("slot", { key: '90ec37f12264da090fe9ace989dae3c402521e28' })));
     }
     static get is() { return "seki-sidebar-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -24,7 +24,7 @@ export class SekiSidebarFooter {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: '5aa96420d96f1b83b57199a65c7bdd42c3df5211', "data-icon-mode": this._isIconMode ? 'true' : 'false' }, h("div", { key: 'd29f73d957757e1e0737dc3cbb7e540ab97e083b', class: { 'sidebar-footer': true, 'sidebar-footer--icon-mode': this._isIconMode } }, h("slot", { key: '6538184599c0bfeda91dc324ca9a2655dce0b5ea' }))));
+        return (h(Host, { key: '1152c6a4fa0594df739634a51897d2883d30377f', "data-icon-mode": this._isIconMode ? 'true' : 'false' }, h("div", { key: 'ec7d23a6d84fcaa3ccbda15ce237eb76e54ae48d', class: { 'sidebar-footer': true, 'sidebar-footer--icon-mode': this._isIconMode } }, h("slot", { key: 'bb8181e7b3c865bc599d9eb6dc480e484e250a39' }))));
     }
     static get is() { return "seki-sidebar-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,7 +14,7 @@ export class SekiSidebarGroupAction {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: 'a6a84f2617364ca6c7f422010f8834506289bff3' }, h("button", { key: 'fe83283065195ad8bd76a5a4360c3d744812672f', class: "sidebar-group-action", type: "button", disabled: this.disabled, "aria-label": this.ariaLabel }, h("slot", { key: 'af5206dbafaba73927305d054737b8b9cc3eb446' }))));
+        return (h(Host, { key: 'dd28ffe5695923ac553db63ce9fd916911294a9b' }, h("button", { key: '6bc353a3635240cfb30118e6fbbcd66896ff3e9f', class: "sidebar-group-action", type: "button", disabled: this.disabled, "aria-label": this.ariaLabel }, h("slot", { key: '9f917fd544e68ce996283893a8b056467a16c153' }))));
     }
     static get is() { return "seki-sidebar-group-action"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class SekiSidebarGroupContent {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("div", { key: '0b54d0090e51db825125ba86c21be82c08e5f74a', class: "sidebar-group-content" }, h("slot", { key: '23e35cfef208e22808272cf0cf2d55392cae873a' })));
+        return (h("div", { key: 'ad67fd3d5a4d329c748aada24f1e4f3b034ea900', class: "sidebar-group-content" }, h("slot", { key: 'f15f2b6f4f43b44869cfcb7d3bae08ada6089d2b' })));
     }
     static get is() { return "seki-sidebar-group-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class SekiSidebarGroupLabel {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("div", { key: 'a3f5d1d810c990c84570abb1131ec7d7ab7ae7bf', class: "sidebar-group-label" }, h("slot", { key: '3d494ea1b43a7ab858e2cd1a99d8ecae3379855d' })));
+        return (h("div", { key: 'b4a500dc386a3333272a90ab43ace88ba8176fe2', class: "sidebar-group-label" }, h("slot", { key: 'ae0568dcb2cba975c086408e2ea3cd3ed8815c22' })));
     }
     static get is() { return "seki-sidebar-group-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class SekiSidebarGroup {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("div", { key: '57ee8c7f266be7817ef0c2c08d00a8804a73052b', class: "sidebar-group" }, this.label && (h("seki-sidebar-group-label", { key: 'c2f47870898d7c1c256e20a08142660c2af5039d' }, this.label)), h("div", { key: '36b8f12110274b6df9a13214e12296e4e9c06fb3', class: "sidebar-group-content" }, h("slot", { key: 'b827f8839760b048df21bff413e30114e6234e8f' }))));
+        return (h("div", { key: '1d6a7c3473f7af44bd1af50b62ae089d7fc35c81', class: "sidebar-group" }, this.label && (h("seki-sidebar-group-label", { key: '42883a80189fb71391d35c24f303687b9efb7887' }, this.label)), h("div", { key: '429b4273b9511d07e55c34d5118d299c05bf0d0b', class: "sidebar-group-content" }, h("slot", { key: 'cef4eb3f9946caac5c3daae5d824a243d98d887c' }))));
     }
     static get is() { return "seki-sidebar-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -24,7 +24,7 @@ export class SekiSidebarHeader {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: '0f4ec9ec27ba10ab22d2aa80adab6f396d4c371d', "data-icon-mode": this._isIconMode ? 'true' : 'false' }, h("div", { key: '045caea28040bca8270e39ddcb46911e3aba0b4a', class: { 'sidebar-header': true, 'sidebar-header--icon-mode': this._isIconMode } }, h("slot", { key: '62f68e1a0a2dfae1d15586ae88ee3ba69482936d' }))));
+        return (h(Host, { key: 'f9fb878683bbbfae9545a60e489600cab7cd43de', "data-icon-mode": this._isIconMode ? 'true' : 'false' }, h("div", { key: '183ee2acb6d6eb84f07f926e29b206f41bbc351d', class: { 'sidebar-header': true, 'sidebar-header--icon-mode': this._isIconMode } }, h("slot", { key: '4bb0f792eb9b6e3e76284a4e42282eacc400ad95' }))));
     }
     static get is() { return "seki-sidebar-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class SekiSidebarInset {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("div", { key: 'e6a4bd76f1f368ea260bdeb82216214f35489d1c', class: "sidebar-inset" }, h("slot", { key: 'c47810e0a61e203cb4b67f2e52953c6e90e1872e' })));
+        return (h("div", { key: 'd62538c4b0e8288d5fe2298b14033fef14a7422e', class: "sidebar-inset" }, h("slot", { key: '22332275106cabf678d852c9f2d68e5dae431fd4' })));
     }
     static get is() { return "seki-sidebar-inset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,7 +14,7 @@ export class SekiSidebarMenuAction {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("button", { key: '52f62e4805f9cd25af4dfeb71aa39e69222a3c53', class: "sidebar-menu-action", disabled: this.disabled, type: "button", "aria-label": "More options" }, h("slot", { key: '3b0a9b8c54b8295ddc0dc661440d37e981ac7e78' })));
+        return (h("button", { key: 'a0a0a2b9ef20c017f81e95455fdfc95e3abde327', class: "sidebar-menu-action", disabled: this.disabled, type: "button", "aria-label": "More options" }, h("slot", { key: '405909f82702834fa0720dc99bd66d073488bb93' })));
     }
     static get is() { return "seki-sidebar-menu-action"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class SekiSidebarMenuBadge {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("span", { key: '6ae5c7cfb2b951de023cf1279fa283f4dc22c591', class: "sidebar-menu-badge" }, h("slot", { key: '9a64baad72ab4e181519c25f65d2f387cbc705c2' })));
+        return (h("span", { key: '9c93081ef049dc7279a9dc30d84bed26eb90ed81', class: "sidebar-menu-badge" }, h("slot", { key: '829ff0a30a549d5af22f1fb120724ba439fbb6f8' })));
     }
     static get is() { return "seki-sidebar-menu-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,7 +75,7 @@ export class SekiSidebarMenuButton {
                 buttonProps.tabIndex = -1;
             }
         }
-        return (h(Tag, Object.assign({ key: '7fbaba520bf2b28e168deb190d9d0bb6abcbffc9' }, buttonProps), h("span", { key: 'd2f140cb3e39e3356f0edd15d4f4b6445e711774', class: "sidebar-menu-button-content" }, h("slot", { key: 'bb9d89ad6bc654a4ea7c9370b29582489ffdffd9' })), this._isIconMode && this.tooltipText && (h("span", { key: '6d2e98119e4f29b72fb995d17a10602b092d7880', class: "sr-only" }, this.tooltipText))));
+        return (h(Tag, Object.assign({ key: '179d84c9793283ca3bfb1df829aa50716a17bc01' }, buttonProps), h("span", { key: 'db744ac337d23993724b8cffee15ea5cd006ac12', class: "sidebar-menu-button-content" }, h("slot", { key: '76ff227ce25de9d09e42f35bb2899e433b65896c' })), this._isIconMode && this.tooltipText && (h("span", { key: 'edc0c9f934fc2ad1becb26424e26abffd950978b', 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

@@ -8,7 +8,7 @@ export class SekiSidebarMenuItem {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("li", { key: 'fdb8de4eb5aa7b3658957e1a8e27911861efb6a6', class: "sidebar-menu-item", role: "none" }, h("slot", { key: 'c698d4bdb297604a9b5961f1c9a77a8f81bef097' })));
+        return (h("li", { key: '9d40705651a7a5b0ec08bce35d762009d5e13fe5', class: "sidebar-menu-item", role: "none" }, h("slot", { key: 'e60b735684d04569ea8c0c54137e63a50656226f' })));
     }
     static get is() { return "seki-sidebar-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,7 +14,7 @@ export class SekiSidebarMenuSkeleton {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("div", { key: '85a9efb11df2e46c6a60dfeb9edd4a4aa1ef47d6', class: "sidebar-menu-skeleton" }, this.showIcon && h("div", { key: '5792eb27ab44821461349beeaa974b17ba33d034', class: "sidebar-menu-skeleton-icon" }), h("div", { key: '7dd2be2d6ef9e46960fef8a7973f9df32bd02fec', class: "sidebar-menu-skeleton-text" })));
+        return (h("div", { key: '60223e62bc0664334f7c6a053d549fbb815de24c', class: "sidebar-menu-skeleton" }, this.showIcon && h("div", { key: 'cc8deccd40d11dbc6ecd293e8f4d60d0e09058dc', class: "sidebar-menu-skeleton-icon" }), h("div", { key: '2547f0d62fa2d2c759aa9c8e5e870d870636fd16', 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

@@ -18,10 +18,10 @@ export class SekiSidebarMenuSubButton {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("button", { key: '569ded092594cfd100d9c2506505649f1235a59e', class: {
+        return (h("button", { key: 'dbc73fe2fad907f5ec4d7ee134d28b64ab9eb99b', class: {
                 'sidebar-menu-sub-button': true,
                 'sidebar-menu-sub-button--active': this.active,
-            }, disabled: this.disabled, type: "button", role: "menuitem" }, h("slot", { key: '72eebc0d783976bf4b41acb126fcccc4f102ac59' })));
+            }, disabled: this.disabled, type: "button", role: "menuitem" }, h("slot", { key: '4876029f6e54515e9ad84f6884c0dc47cdb5af8c' })));
     }
     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

@@ -8,7 +8,7 @@ export class SekiSidebarMenuSubItem {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("li", { key: '64d04313ca85f7b3596ccfaa1e4582e5376ee400', class: "sidebar-menu-sub-item", role: "none" }, h("slot", { key: '88b826f8fdaf0357bdaf9d3cad064c563f977b9b' })));
+        return (h("li", { key: 'e6ca17f7652ffc8d9f8472cd4a6ec7587e37ce45', class: "sidebar-menu-sub-item", role: "none" }, h("slot", { key: '3b7d4660c701d6af1435304010422c2d25fbd160' })));
     }
     static get is() { return "seki-sidebar-menu-sub-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,6 +12,12 @@ export class SekiSidebarMenuSub {
             this.open = this._open;
             this.openChange.emit(this._open);
         };
+        this.onTriggerSlotChange = () => {
+            const assigned = this.triggerSlotEl.assignedElements();
+            assigned.forEach((el) => {
+                el.addEventListener('click', this.handleTriggerClick);
+            });
+        };
     }
     componentWillLoad() {
         this._open = this.open;
@@ -20,25 +26,20 @@ export class SekiSidebarMenuSub {
         this._open = newValue;
     }
     componentDidLoad() {
-        var _a;
+        var _a, _b, _c;
         // Attach click handler to trigger slot
-        const triggerSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="trigger"]');
-        if (triggerSlot) {
-            triggerSlot.addEventListener('slotchange', () => {
-                const assigned = triggerSlot.assignedElements();
-                assigned.forEach((el) => {
-                    el.addEventListener('click', this.handleTriggerClick);
-                });
-            });
-        }
+        this.triggerSlotEl =
+            (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="trigger"]')) !== null && _b !== void 0 ? _b : undefined;
+        (_c = this.triggerSlotEl) === null || _c === void 0 ? void 0 : _c.addEventListener('slotchange', this.onTriggerSlotChange);
     }
     connectedCallback() {
         registerThemeSync(this.el);
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         unregisterThemeSync(this.el);
-        const triggerSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="trigger"]');
+        (_a = this.triggerSlotEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.onTriggerSlotChange);
+        const triggerSlot = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="trigger"]');
         if (triggerSlot) {
             const assigned = triggerSlot.assignedElements();
             assigned.forEach((el) => {
@@ -47,13 +48,13 @@ export class SekiSidebarMenuSub {
         }
     }
     render() {
-        return (h(Host, { key: '44de65088b7a7af24b58834e2f76b682b82f08ef', "data-state": this._open ? 'open' : 'closed' }, h("div", { key: 'ff6747399742dd5c19935888439e057fa195be69', class: "sidebar-menu-sub" }, h("div", { key: '866de831043299ed1ed6411481435d5df744c5b5', class: "sidebar-menu-sub-trigger" }, h("slot", { key: 'fd2baeae92bffd74fa8c98cb8d3f1d04b99958aa', name: "trigger" }), h("svg", { key: 'c9e661a93f06d9ee5013eca384c0e0e4e8cb22c8', class: {
+        return (h(Host, { key: '99cca69767ffac341239b92bb86111aa9913a00b', "data-state": this._open ? 'open' : 'closed' }, h("div", { key: '2790d32dd4adc4072a52e987b5a37e25c93b9565', class: "sidebar-menu-sub" }, h("div", { key: 'b3176021bcb358b75df5adf6cb4f392c27e4a6be', class: "sidebar-menu-sub-trigger" }, h("slot", { key: '37a6f9dedc8e1c1fcdbd986016b8659e413e5690', name: "trigger" }), h("svg", { key: 'd07288989cf5a67ea984d07d9e02b87be54eef0b', 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: '6a94bb94f0cb912f534f1d47d25c33bfd4e6127a', d: "m9 18 6-6-6-6" }))), h("div", { key: 'da13609b77530ca5489c5e5f140452f2fdbe59cc', 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: 'd10b3b8710cb57681b7fd0a6bc4046d1187efc68', d: "m9 18 6-6-6-6" }))), h("div", { key: 'd37ea17a3391c0f3ea2168e881a832cfee9624d8', class: {
                 'sidebar-menu-sub-wrapper': true,
                 'sidebar-menu-sub-wrapper--open': this._open,
-            } }, h("ul", { key: '5d865c387c6e127975f547cc0f079919c8c015d4', class: "sidebar-menu-sub-content", role: "menu", "aria-hidden": !this._open }, h("slot", { key: 'acb7a4bedcb9e925929855551fb3ec5e2e00fceb' }))))));
+            } }, h("ul", { key: '4e79718513135e7da7787b1474a977514b447d2f', class: "sidebar-menu-sub-content", role: "menu", "aria-hidden": !this._open }, h("slot", { key: 'b9eb1888ecf0a1df66b4880189480dae68b89e96' }))))));
     }
     static get is() { return "seki-sidebar-menu-sub"; }
     static get encapsulation() { return "shadow"; }
@@ -99,7 +100,7 @@ export class SekiSidebarMenuSub {
     static get events() {
         return [{
                 "method": "openChange",
-                "name": "openChange",
+                "name": "sekiOpenChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -8,7 +8,7 @@ export class SekiSidebarMenu {
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h("ul", { key: 'fdd6f79f87a529287a5c1a65c70c0a6899129981', class: "sidebar-menu", role: "menu" }, h("slot", { key: 'd07341579fbdc482519ea75ffc3305d8295a5dcf' })));
+        return (h("ul", { key: 'dda2e45029289d2024c0464e1b2a8303ecfef917', class: "sidebar-menu", role: "menu" }, h("slot", { key: 'dc949a20b097e24953da92936478a201b97a53e9' })));
     }
     static get is() { return "seki-sidebar-menu"; }
     static get encapsulation() { return "shadow"; }