@sekiui/elements 0.0.88 → 0.1.1

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { buildOptionId } from "../../utils/select";
 import { syncTheme } from "../../utils/theme-sync";
 import { subscribeToContextChange } from "../../utils/context-bridge";
 /**
@@ -15,19 +16,20 @@ export class SekiSelectOption {
         this.hasRegistered = false;
         this.contextSubscription = { parent: null, unsubscribe: () => { } };
         /**
-         * Refresh aria-selected/data-selected/data-focused directly on the shadow
-         * DOM whenever the parent's value/focus state changes post-mount. This is
-         * applied imperatively rather than through a Stencil @State bump + render()
+         * Refresh aria-selected/data-selected/data-focused directly on the
+         * rendered DOM whenever the parent's value/focus state changes post-mount.
+         * This is applied imperatively rather than through a Stencil @State bump +
+         * render()
          * — a component that reads a parent's state via closest() + an
          * addEventListener callback and relies on render() re-invoking to reflect
          * it is a confirmed-unreliable shape in this codebase (#244). Mutating the
-         * shadow DOM directly here side-steps that entirely.
+         * DOM directly here side-steps that entirely.
          */
         this.handleParentContextChange = () => {
-            var _a;
-            const optionEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.option');
+            const optionEl = this.el.querySelector('.option');
             if (!optionEl)
                 return;
+            optionEl.id = this.optionId;
             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;
@@ -75,15 +77,21 @@ export class SekiSelectOption {
     // ===========================
     // State
     // ===========================
-    // Deterministic id, scoped to this option's own shadow root. seki-select-trigger
-    // no longer references it via aria-activedescendant (see #292 — the id lives in
-    // a different tree scope than the trigger's button, so that IDREF could never
-    // resolve); kept for scrollToOption() and as a stable hook for tests/consumers.
+    // Real, page-scoped DOM id as of #300 (scoped, non-shadow rendering) —
+    // seki-select-trigger's aria-activedescendant references this directly, so
+    // it must stay collision-free across multiple <seki-select> instances on
+    // one page. Prefixed with the parent select's own randomized contentId via
+    // buildOptionId (shared with seki-select-trigger so both compute the exact
+    // same string); falls back to the literal string 'select' if no parent
+    // context is available yet (e.g. before componentDidLoad registers it).
     get optionId() {
-        return `option-${this.value}`;
+        var _a;
+        const selectContext = this.getSelectContext();
+        return buildOptionId((_a = selectContext === null || selectContext === void 0 ? void 0 : selectContext.contentId) !== null && _a !== void 0 ? _a : 'select', this.value);
     }
     componentDidLoad() {
         this.registerWithParent();
+        this.refreshOptionId();
         this.contextSubscription = subscribeToContextChange(this.el, 'seki-select', this.handleParentContextChange);
     }
     connectedCallback() {
@@ -101,6 +109,17 @@ export class SekiSelectOption {
         selectContext === null || selectContext === void 0 ? void 0 : selectContext.unregisterOption(this.value);
         this.contextSubscription.unsubscribe();
     }
+    // If render() ran before the parent's selectContext was available (see the
+    // 'select' fallback in optionId's getter above), the DOM id was baked in as
+    // a non-unique placeholder. componentDidLoad and every later context change
+    // both call this to correct it once the real contentId is known — cheap
+    // because it's just an attribute write, not a structural re-render.
+    refreshOptionId() {
+        const optionEl = this.el.querySelector('.option');
+        if (optionEl) {
+            optionEl.id = this.optionId;
+        }
+    }
     registerWithParent() {
         var _a;
         const selectContext = this.getSelectContext();
@@ -126,10 +145,10 @@ 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: '0b45512c5e13b194e043e47fb5b45706e17742f6' }, h("div", { key: '500cf182ac44ea1fced2d7bb095bed0300140fe2', 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: '5760df03485c8a319df0f47e11e7812daf975b90', class: "option-label" }, h("slot", { key: 'e8f30da45607a6ac80c4091e33109134e1860d62' })), h("span", { key: '59646b48367babc22ef134f298194fde8a493085', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '7729ba2b454001bb5d71f5c3af7aaf2702999df2', name: "selected-indicator" }, h("svg", { key: 'ac6b0035fae24b5532e6c14ee2339b618abcb1e8', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ec5d88d49bd03bbafde5a7bfcd746665cd5e02c6', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h(Host, { key: '5e81a06da7048aeea965ec7a1f3be01c38610b14' }, h("div", { key: '3129f00c2f8be28153ea68d4ad3552d5fe5babf2', 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: 'fa3daec06f3f25a8339cde8ed9e19778bec0f515', class: "option-label" }, h("slot", { key: 'd778727c4ad82c8b155c6157b2f2c13f7b20bd56' })), h("span", { key: 'a0103ece80cb3a52cf1aa0afaaab801093fa9118', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '6d17a76a97fec448881f315bfbd41714604325f5', name: "selected-indicator" }, h("svg", { key: '1b4066f6025db32d6d0e9c4c6e3cc6ee12844631', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c60be1174d75bc7f6f96e87d6f90a1ba4185d43e', 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"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-select-option.css"]

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { buildOptionId } from "../../utils/select";
 import { syncTheme } from "../../utils/theme-sync";
 import { subscribeToContextChange } from "../../utils/context-bridge";
 /**
@@ -124,12 +125,14 @@ 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-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
+        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
+                ? 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
             ? 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" })))));
     }
     static get is() { return "seki-select-trigger"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-select-trigger.css"]

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

@@ -20,66 +20,99 @@ import { syncTheme } from "../../utils/theme-sync";
  */
 export class SekiSheet {
     constructor() {
+        /**
+         * Controlled open state. Also readable/writable as the `open` attribute, so
+         * `<seki-sheet open>` renders open with no script involved.
+         */
+        this.open = false;
+        /**
+         * Initial open state for uncontrolled usage
+         */
+        this.defaultOpen = false;
         /**
          * Internal state for sheet open/closed
          */
-        this.isOpen = false;
+        this._isOpen = false;
+    }
+    componentWillLoad() {
+        this._isOpen = this.open || this.defaultOpen;
+        this.open = this._isOpen;
+    }
+    componentDidLoad() {
+        this.updateContext();
+    }
+    handleOpenPropChange(newValue) {
+        // An outside assignment (`sheet.open = true`) has to win after first render;
+        // `open` is only read once in componentWillLoad otherwise.
+        if (newValue === this._isOpen)
+            return;
+        if (newValue) {
+            this.openSheet();
+        }
+        else {
+            this.closeSheet();
+        }
     }
     /**
      * Opens the sheet
      */
-    async open() {
-        this.isOpen = true;
+    async openSheet() {
+        if (this._isOpen)
+            return;
+        this._isOpen = true;
+        this.open = true;
         this.updateContext();
         this.sheetOpen.emit();
+        this.sekiOpenChange.emit(true);
     }
     /**
      * Closes the sheet
      */
-    async close() {
-        this.isOpen = false;
+    async closeSheet() {
+        if (!this._isOpen)
+            return;
+        this._isOpen = false;
+        this.open = false;
         this.updateContext();
         this.sheetClose.emit();
-    }
-    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 };
-    }
-    componentDidLoad() {
-        this.updateContext();
+        this.sekiOpenChange.emit(false);
     }
     /**
      * Toggles the sheet
      */
-    async toggle() {
-        if (this.isOpen) {
-            await this.close();
+    async toggleSheet() {
+        if (this._isOpen) {
+            await this.closeSheet();
         }
         else {
-            await this.open();
+            await this.openSheet();
         }
     }
+    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 };
+    }
     handleTriggerClick() {
-        this.toggle();
+        this.toggleSheet();
     }
     handleCloseSheet() {
-        this.close();
+        this.closeSheet();
     }
     handleKeydown(ev) {
-        if (this.isOpen && ev.key === 'Escape') {
-            this.close();
+        if (this._isOpen && ev.key === 'Escape') {
+            this.closeSheet();
         }
     }
     connectedCallback() {
         syncTheme(this.el);
     }
     render() {
-        return (h("div", { key: '2cfec9307b44b6b51ce1414392b4c2463fc24c96', class: {
+        return (h("div", { key: '0d7f939728b7332e649e79b9189215f6ec2ee0ad', class: {
                 'seki-sheet': true,
-                'seki-sheet--open': this.isOpen,
-            }, part: "sheet" }, h("slot", { key: 'a8785aaf5f121ab236840527c54aefce477197d3' }), this.isOpen && (h("div", { key: '60727f47bb3426fded9d40202811d363e082c93e', class: "seki-sheet-overlay", part: "overlay", onClick: () => this.close() }))));
+                'seki-sheet--open': this._isOpen,
+            }, part: "sheet" }, h("slot", { key: '2ab893341627204176329e2a40ac342f9d92f93c' }), this._isOpen && (h("div", { key: 'f7f131f3a2a287926d1547ad656f8125a00a1150', class: "seki-sheet-overlay", part: "overlay", onClick: () => this.closeSheet() }))));
     }
     static get is() { return "seki-sheet"; }
     static get encapsulation() { return "shadow"; }
@@ -93,9 +126,53 @@ export class SekiSheet {
             "$": ["seki-sheet.css"]
         };
     }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled open state. Also readable/writable as the `open` attribute, so\n`<seki-sheet open>` renders open with no script involved."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "defaultOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial open state for uncontrolled usage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-open",
+                "defaultValue": "false"
+            }
+        };
+    }
     static get states() {
         return {
-            "isOpen": {}
+            "_isOpen": {}
         };
     }
     static get events() {
@@ -129,11 +206,26 @@ export class SekiSheet {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "sekiOpenChange",
+                "name": "sekiOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the open state changes. Matches the dialog/popover/collapsible\nevent shape so a consumer can listen to one event name across every overlay."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
         return {
-            "open": {
+            "openSheet": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -150,7 +242,7 @@ export class SekiSheet {
                     "tags": []
                 }
             },
-            "close": {
+            "closeSheet": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -167,7 +259,7 @@ export class SekiSheet {
                     "tags": []
                 }
             },
-            "toggle": {
+            "toggleSheet": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -187,6 +279,12 @@ export class SekiSheet {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenPropChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "triggerClick",

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { syncTheme } from "../../utils/theme-sync";
+import { whenDefined } from "../../utils/when-defined";
 export class SekiSidebarFooter {
     constructor() {
         this._isIconMode = false;
@@ -10,6 +11,7 @@ export class SekiSidebarFooter {
     async syncWithProvider() {
         const provider = document.querySelector('seki-sidebar-provider');
         if (provider) {
+            await whenDefined('seki-sidebar-provider');
             const state = await provider.getState();
             this._isIconMode = !state.open && !state.isMobile;
         }
@@ -21,7 +23,7 @@ export class SekiSidebarFooter {
         syncTheme(this.el);
     }
     render() {
-        return (h(Host, { key: '9a2ebdc291b6ed7daa648c4b76684791b434477f', "data-icon-mode": this._isIconMode ? 'true' : 'false' }, h("div", { key: '8d3748862827f9d9173d8a567defaf4945b729e3', class: { 'sidebar-footer': true, 'sidebar-footer--icon-mode': this._isIconMode } }, h("slot", { key: '499a4a2e38198ed2e7c808d4b8671f2828e72e3a' }))));
+        return (h(Host, { key: '97bbed99c8e35ed1d85fa6267e47350a1d0c61bb', "data-icon-mode": this._isIconMode ? 'true' : 'false' }, h("div", { key: 'e951a73db7bfb322726ff0db795808d7ce99b3a6', class: { 'sidebar-footer': true, 'sidebar-footer--icon-mode': this._isIconMode } }, h("slot", { key: 'ae12b7373d704f56fcb75bba1f5c000cf19d6c90' }))));
     }
     static get is() { return "seki-sidebar-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { syncTheme } from "../../utils/theme-sync";
+import { whenDefined } from "../../utils/when-defined";
 export class SekiSidebarHeader {
     constructor() {
         this._isIconMode = false;
@@ -10,6 +11,7 @@ export class SekiSidebarHeader {
     async syncWithProvider() {
         const provider = document.querySelector('seki-sidebar-provider');
         if (provider) {
+            await whenDefined('seki-sidebar-provider');
             const state = await provider.getState();
             this._isIconMode = !state.open && !state.isMobile;
         }
@@ -21,7 +23,7 @@ export class SekiSidebarHeader {
         syncTheme(this.el);
     }
     render() {
-        return (h(Host, { key: 'dffab004a98884d98974fb7bd513d36c58a614f6', "data-icon-mode": this._isIconMode ? 'true' : 'false' }, h("div", { key: '3779d79509479f6e2e03d67e17f480ce833f79d2', class: { 'sidebar-header': true, 'sidebar-header--icon-mode': this._isIconMode } }, h("slot", { key: 'bd0dc0a0ffb50302594a82a5d66baee214228c89' }))));
+        return (h(Host, { key: 'db0e734d2c3a823fdee113913da5dc8d77b2c74a', "data-icon-mode": this._isIconMode ? 'true' : 'false' }, h("div", { key: 'f3bc87e475391af3f6bd1914e11647aaefdcb28f', class: { 'sidebar-header': true, 'sidebar-header--icon-mode': this._isIconMode } }, h("slot", { key: '9936d52c8d5c835be4db99fdea7b4133464f0bfe' }))));
     }
     static get is() { return "seki-sidebar-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { syncTheme } from "../../utils/theme-sync";
+import { whenDefined } from "../../utils/when-defined";
 export class SekiSidebarMenuButton {
     constructor() {
         /**
@@ -30,6 +31,7 @@ export class SekiSidebarMenuButton {
     async syncWithProvider() {
         const provider = document.querySelector('seki-sidebar-provider');
         if (provider) {
+            await whenDefined('seki-sidebar-provider');
             const state = await provider.getState();
             this._isIconMode = !state.open && !state.isMobile;
         }
@@ -72,7 +74,7 @@ export class SekiSidebarMenuButton {
                 buttonProps.tabIndex = -1;
             }
         }
-        return (h(Tag, Object.assign({ key: '4ad764a828d94c36bd2c2f3da03021de7c840033' }, buttonProps), h("span", { key: '46d54d1c9c00da9ff872cbea5005e259a32b2bf1', class: "sidebar-menu-button-content" }, h("slot", { key: '74e7c32ee30b69e7a8e34339983657cda40ca604' })), this._isIconMode && this.tooltipText && (h("span", { key: 'dac5cc781bcbe62e5fd66e6fcd2278710218af92', class: "sr-only" }, this.tooltipText))));
+        return (h(Tag, Object.assign({ key: '5a9ae3864bd0f81f6a97016287654bf75daf781b' }, buttonProps), h("span", { key: '49aca3cd6870bed8b365ccd943b5ec2de09ff51b', class: "sidebar-menu-button-content" }, h("slot", { key: 'cf0ecec0ded3870521788cd0c7113e8c98d521f4' })), this._isIconMode && this.tooltipText && (h("span", { key: '272d33f45b0ad14a51de4f1af56b33549dcfb2c4', 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-rail.js

@@ -1,11 +1,13 @@
 import { h, Host } from "@stencil/core";
 import { syncTheme } from "../../utils/theme-sync";
+import { whenDefined } from "../../utils/when-defined";
 import { mirrorAncestorAttributes } from "../../utils/ancestor-attrs";
 export class SekiSidebarRail {
     constructor() {
         this.handleClick = async () => {
             const provider = document.querySelector('seki-sidebar-provider');
             if (provider) {
+                await whenDefined('seki-sidebar-provider');
                 await provider.toggleSidebar();
             }
         };
@@ -20,7 +22,7 @@ export class SekiSidebarRail {
         this.attrMirror = undefined;
     }
     render() {
-        return (h(Host, { key: '79ffed26bc4327ba5f1de9b8bad97875e577bcc8' }, h("button", { key: 'd2239a1ee3fd2d7cb4af24e2d57bb776850d93a6', class: "sidebar-rail", type: "button", tabIndex: -1, "aria-hidden": "true", onClick: this.handleClick, title: "Toggle sidebar" }, h("slot", { key: 'd9677dcf1739a26c2c50d5297d86302e6deef5a4' }))));
+        return (h(Host, { key: '08ed37b7a0967238dfad84a8bd0f0f11fd750ccf' }, h("button", { key: '6c2dc41d659807fe6ce5f66a228d1157f8598b02', class: "sidebar-rail", type: "button", tabIndex: -1, "aria-hidden": "true", onClick: this.handleClick, title: "Toggle sidebar" }, h("slot", { key: 'd11d9face59e5aca55f21749376d6cb9464f612d' }))));
     }
     static get is() { return "seki-sidebar-rail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { syncTheme } from "../../utils/theme-sync";
+import { whenDefined } from "../../utils/when-defined";
 export class SekiSidebarTrigger {
     constructor() {
         /**
@@ -11,6 +12,7 @@ export class SekiSidebarTrigger {
         this.provider = null;
         this.handleClick = async () => {
             if (this.provider && !this.disabled) {
+                await whenDefined('seki-sidebar-provider');
                 await this.provider.toggleSidebar();
             }
         };
@@ -21,6 +23,9 @@ export class SekiSidebarTrigger {
     }
     async syncWithProvider() {
         if (this.provider) {
+            // In the per-tag custom-elements build the provider may still be an
+            // un-upgraded HTMLElement here; its @Methods only exist after definition.
+            await whenDefined('seki-sidebar-provider');
             const state = await this.provider.getState();
             this._isOpen = state.isMobile ? state.openMobile : state.open;
             this._isMobile = state.isMobile;
@@ -34,7 +39,7 @@ export class SekiSidebarTrigger {
         syncTheme(this.el);
     }
     render() {
-        return (h(Host, { key: '710c2e498aba73505947fdd40ef4ebfa2fd6f452' }, h("button", { key: 'd08c906afe57f392fc09ce3cb165199bac889cb5', 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: 'd8a51ef01bdbf22fd04efc33195b83b583a0f80c' }, h("svg", { key: 'e78789a27515ea2478cb4ef0bac254b605a95cb0', 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: '55b0d78be2313cc2c4f6188747517c0723cdaa73', width: "18", height: "18", x: "3", y: "3", rx: "2" }), h("path", { key: '436522322595a5db692bbc25e8cd7eca1d55057f', d: "M9 3v18" }))), h("span", { key: 'db23ca2266166ba0271c3b5baf6ac16ec8c8ba4c', class: "sr-only" }, this._isOpen ? 'Close sidebar' : 'Open sidebar'))));
+        return (h(Host, { key: 'a18bf01eca1a28a9b4f7043af9d175582c842793' }, h("button", { key: '7dd9593f5a61a5162dfd57c63e6d07d21607a3c6', 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: '2a99e96d6ae89b2b9fe6278b8abebd07a49b1bba' }, h("svg", { key: '1f4d96e67ed5a0db4040de3a29747bd2b95d30cf', 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: '697fbbd25bfee694b0a58c736852ba61e8474552', width: "18", height: "18", x: "3", y: "3", rx: "2" }), h("path", { key: '0ccd3b41479789c19bd0c535665c562bd0d72e26', d: "M9 3v18" }))), h("span", { key: '172d3a201a80b474002ba5eded4ca56f025970cb', 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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { syncTheme } from "../../utils/theme-sync";
+import { whenDefined } from "../../utils/when-defined";
 export class SekiSidebar {
     constructor() {
         /**
@@ -20,6 +21,7 @@ export class SekiSidebar {
         this.handleOverlayClick = async () => {
             const provider = this.el.closest('seki-sidebar-provider');
             if (provider && this._isMobile) {
+                await whenDefined('seki-sidebar-provider');
                 await provider.setOpenMobile(false);
             }
         };
@@ -31,6 +33,7 @@ export class SekiSidebar {
     async syncWithProvider() {
         const provider = this.el.closest('seki-sidebar-provider');
         if (provider) {
+            await whenDefined('seki-sidebar-provider');
             const state = await provider.getState();
             this._open = state.open;
             this._openMobile = state.openMobile;
@@ -51,10 +54,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: 'd0c658a422f9df8dfffb5b999950a30a55f7691e', "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: '9349459bcee006b9ab721a838542e83fe230be54', class: "sidebar-overlay", onClick: this.handleOverlayClick, "aria-hidden": "true" })), h("aside", { key: '742b7a834dc63ceee602415005222c0317f66a3b', class: {
+        return (h(Host, { key: '191942c5c2d3d3c543b398f7bcbec0ae7e4177b8', "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: 'bbdcc59f534b71525ae15c797bb2a9685d254e66', class: "sidebar-overlay", onClick: this.handleOverlayClick, "aria-hidden": "true" })), h("aside", { key: '8b8d5e372ef31d6d7fcad96284b02d55049e5344', class: {
                 'sidebar': true,
                 'sidebar--mobile-sheet': showMobileSheet,
-            }, role: "complementary", "aria-label": "Sidebar" }, h("slot", { key: 'a2097f110bb64dbb251002f8e7fb566cd3b91158' }))));
+            }, role: "complementary", "aria-label": "Sidebar" }, h("slot", { key: 'c52ad8d438101ac1a5d339a4fac427587ae88be5' }))));
     }
     static get is() { return "seki-sidebar"; }
     static get encapsulation() { return "shadow"; }