@sekiui/elements 0.1.0 → 0.1.1

package/dist/collection/components/resizable/seki-resizable-panel-group.js

@@ -1,6 +1,7 @@
 // src/components/resizable/seki-resizable-panel-group.tsx
 import { h, Host } from "@stencil/core";
 import { syncTheme } from "../../utils/theme-sync";
+import { publishContext } from "../../utils/context-bridge";
 const STORAGE_KEY_PREFIX = 'seki-resizable:';
 function clamp(value, min, max) {
     return Math.min(Math.max(value, min), max);
@@ -247,7 +248,7 @@ export class SekiResizablePanelGroup {
         this.restoreLayout();
     }
     updateContext() {
-        this._resizableContext = {
+        const context = {
             direction: this.direction,
             disabled: this.disabled,
             registerPanel: this.registerPanel,
@@ -260,6 +261,10 @@ export class SekiResizablePanelGroup {
             isCollapsed: this.isCollapsed,
             getHandleIndex: this.getHandleIndex,
         };
+        this._resizableContext = context;
+        // Publish on the host so children reach it via closest() in every build,
+        // and notify any child that mounted before this group was defined.
+        publishContext(this.el, '_resizableContext', context, this.contextChange);
     }
     emitLayoutChange() {
         const sizes = this._panelOrder.map((id) => { var _a, _b; return (_b = (_a = this._panels.get(id)) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 0; });
@@ -311,11 +316,11 @@ export class SekiResizablePanelGroup {
         syncTheme(this.el);
     }
     render() {
-        return (h(Host, { key: '1d6170c745798c0608abae51b7d2bbbf51b10f99' }, h("div", { key: '517e36739e6857b55d9719f191f4cb0695ca5aaa', part: "group", role: "group", "aria-label": "Resizable panel group", class: {
+        return (h(Host, { key: '4050d03c828d3bd09ddd73ab9009b81ffcb2a2cd' }, h("div", { key: '148dba7f6173a023c861cfdd49e626773e317c23', part: "group", role: "group", "aria-label": "Resizable panel group", class: {
                 'resizable-panel-group': true,
                 'resizable-panel-group--horizontal': this.direction === 'horizontal',
                 'resizable-panel-group--vertical': this.direction === 'vertical',
-            } }, h("slot", { key: '66621ac830e9e164ad833b58124504df9812c930' }))));
+            } }, h("slot", { key: '076d2200fad74c84d01970985d443a8cdd7d00ff' }))));
     }
     static get is() { return "seki-resizable-panel-group"; }
     static get encapsulation() { return "shadow"; }
@@ -429,6 +434,21 @@ export class SekiResizablePanelGroup {
                     "resolved": "\"horizontal\" | \"vertical\"",
                     "references": {}
                 }
+            }, {
+                "method": "contextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: fired whenever `_resizableContext` is (re)published so panels and\nhandles that mounted before this group was defined can register late.\nSee utils/context-bridge.ts \u2014 no payload by design."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }

package/dist/collection/components/resizable/seki-resizable-panel.js

@@ -1,6 +1,7 @@
 // src/components/resizable/seki-resizable-panel.tsx
 import { h, Host } from "@stencil/core";
 import { syncTheme } from "../../utils/theme-sync";
+import { subscribeToContextChange } from "../../utils/context-bridge";
 let panelIdCounter = 0;
 /**
  * Resizable panel - individual content panel with size constraints
@@ -31,9 +32,35 @@ export class SekiResizablePanel {
         this.collapsedSize = 0;
         this._size = 0;
         this._isCollapsed = false;
+        this.hasRegistered = false;
+        this.contextSubscription = null;
         this.handleLayoutChange = () => {
             this.updateSize();
         };
+        /**
+         * The group publishes its context when *it* loads, which in the per-tag
+         * custom-elements build can be after this panel's componentWillLoad. Register
+         * whenever the context is (re)published; the group ignores duplicates.
+         */
+        this.handleParentContextChange = () => {
+            this.registerWithGroup();
+            this.updateSize();
+        };
+    }
+    registerWithGroup() {
+        if (this.hasRegistered)
+            return;
+        const context = this.getContext();
+        if (!context)
+            return;
+        context.registerPanel(this.panelId, {
+            defaultSize: this.defaultSize,
+            minSize: this.minSize,
+            maxSize: this.maxSize,
+            collapsible: this.collapsible,
+            collapsedSize: this.collapsedSize,
+        });
+        this.hasRegistered = true;
     }
     getContext() {
         const group = this.el.closest('seki-resizable-panel-group');
@@ -42,16 +69,7 @@ export class SekiResizablePanel {
     }
     componentWillLoad() {
         this.panelId = `panel-${++panelIdCounter}`;
-        const context = this.getContext();
-        if (context) {
-            context.registerPanel(this.panelId, {
-                defaultSize: this.defaultSize,
-                minSize: this.minSize,
-                maxSize: this.maxSize,
-                collapsible: this.collapsible,
-                collapsedSize: this.collapsedSize,
-            });
-        }
+        this.registerWithGroup();
     }
     componentDidLoad() {
         const group = this.el.closest('seki-resizable-panel-group');
@@ -59,34 +77,38 @@ export class SekiResizablePanel {
             this.groupElement = group;
             group.addEventListener('sekiLayoutChange', this.handleLayoutChange);
         }
+        this.contextSubscription = subscribeToContextChange(this.el, 'seki-resizable-panel-group', this.handleParentContextChange);
+        this.registerWithGroup();
         this.updateSize();
     }
     connectedCallback() {
         syncTheme(this.el);
+        // Re-register after a DOM move; componentWillLoad only fires once.
+        if (this.panelId)
+            this.registerWithGroup();
     }
     disconnectedCallback() {
+        var _a;
         // Remove event listener to prevent memory leak
         if (this.groupElement) {
             this.groupElement.removeEventListener('sekiLayoutChange', this.handleLayoutChange);
         }
+        (_a = this.contextSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.contextSubscription = null;
         // Unregister panel from group
         const context = this.getContext();
         if (context) {
             context.unregisterPanel(this.panelId);
         }
+        this.hasRegistered = false;
     }
     handleConstraintChange() {
         const context = this.getContext();
         if (context) {
             // Re-register with new constraints
             context.unregisterPanel(this.panelId);
-            context.registerPanel(this.panelId, {
-                defaultSize: this.defaultSize,
-                minSize: this.minSize,
-                maxSize: this.maxSize,
-                collapsible: this.collapsible,
-                collapsedSize: this.collapsedSize,
-            });
+            this.hasRegistered = false;
+            this.registerWithGroup();
         }
     }
     updateSize() {
@@ -144,14 +166,14 @@ export class SekiResizablePanel {
         return this.panelId;
     }
     render() {
-        return (h(Host, { key: '6b53e0ef0f75bbde83bb9e318a55ab8261498737', style: {
+        return (h(Host, { key: '69f32198c8537b16e91222dcfcbb23c18dc37782', style: {
                 flexBasis: `${this._size}%`,
                 flexGrow: '0',
                 flexShrink: '0',
-            } }, h("div", { key: 'dd9e5c4165ed0e65aa5949373871240fdacd3e44', part: "panel", role: "region", class: {
+            } }, h("div", { key: 'f45c47381a87eca45473a2da2a035bbff4c1b745', part: "panel", role: "region", class: {
                 'resizable-panel': true,
                 'resizable-panel--collapsed': this._isCollapsed,
-            } }, h("slot", { key: '230de96b3ac24f7f0bbd470bf92d91e43a56f374' }))));
+            } }, h("slot", { key: '1f9f46fd08e315a79cc806b72c56a450c75c7ed5' }))));
     }
     static get is() { return "seki-resizable-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -86,7 +86,7 @@ export class SekiSelect {
                 this.hasBeenActivated = true;
             }
             // Emit event
-            this.sekiOpenChange.emit({ open });
+            this.sekiOpenChange.emit(open);
             // Validate on close if required
             if (!open && this.required && this.hasBeenActivated) {
                 this.validateRequired();
@@ -396,7 +396,7 @@ export class SekiSelect {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: '4a9f13dc6746a13b0b99bf03b8092d48ab475677' }, h("slot", { key: '9c49228973bc8e62ec2129c5c3f72fadf608081f' })));
+        return (h(Host, { key: 'd89c2754151f8faf545b616b5dce64b4dbbfd1a4' }, h("slot", { key: 'b5bf2a24deed68b33849b9fbcb6b091297885367' })));
     }
     static get is() { return "seki-select"; }
     static get encapsulation() { return "shadow"; }
@@ -767,18 +767,12 @@ export class SekiSelect {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when dropdown open state changes"
+                    "text": "Emitted when dropdown open state changes; `detail` is the new open state as a bare boolean"
                 },
                 "complexType": {
-                    "original": "SelectOpenChangeEventDetail",
-                    "resolved": "SelectOpenChangeEventDetail",
-                    "references": {
-                        "SelectOpenChangeEventDetail": {
-                            "location": "import",
-                            "path": "../../utils/select",
-                            "id": "src/utils/select/index.ts::SelectOpenChangeEventDetail"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 }
             }, {
                 "method": "sekiValidate",

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

package/dist/collection/utils/when-defined.js

@@ -0,0 +1,31 @@
+/**
+ * Custom-element definition helpers for compound components.
+ *
+ * In the lazy-loaded build every tag is registered up front (as a proxy), so a
+ * child can always reach its parent's `@Method`s. In the `dist/components`
+ * custom-elements build each tag is defined by its own module, in whatever
+ * order those modules resolve — over a CDN that can be seconds apart. A child
+ * that calls `closest('seki-parent').someMethod()` while the parent is still
+ * an un-upgraded `HTMLElement` throws "someMethod is not a function" and the
+ * component silently loses its initial state (#314).
+ *
+ * `whenDefined(tag)` resolves immediately when the tag is already registered
+ * or when there is no `customElements` registry (SSR, some test runners), so
+ * awaiting it costs nothing on the happy path.
+ */
+function registry() {
+    return typeof globalThis !== 'undefined' && globalThis.customElements ? globalThis.customElements : null;
+}
+/** True when `tag` is registered (or when there is no registry to ask). */
+export function isDefined(tag) {
+    const reg = registry();
+    return !reg || typeof reg.get !== 'function' || !!reg.get(tag);
+}
+/** Resolves once `tag` is registered. Never rejects. */
+export function whenDefined(tag) {
+    const reg = registry();
+    if (!reg || typeof reg.whenDefined !== 'function' || isDefined(tag)) {
+        return Promise.resolve();
+    }
+    return reg.whenDefined(tag).then(() => undefined, () => undefined);
+}

package/dist/components/p-C9-yH6MD.js

@@ -0,0 +1,33 @@
+/**
+ * Custom-element definition helpers for compound components.
+ *
+ * In the lazy-loaded build every tag is registered up front (as a proxy), so a
+ * child can always reach its parent's `@Method`s. In the `dist/components`
+ * custom-elements build each tag is defined by its own module, in whatever
+ * order those modules resolve — over a CDN that can be seconds apart. A child
+ * that calls `closest('seki-parent').someMethod()` while the parent is still
+ * an un-upgraded `HTMLElement` throws "someMethod is not a function" and the
+ * component silently loses its initial state (#314).
+ *
+ * `whenDefined(tag)` resolves immediately when the tag is already registered
+ * or when there is no `customElements` registry (SSR, some test runners), so
+ * awaiting it costs nothing on the happy path.
+ */
+function registry() {
+    return typeof globalThis !== 'undefined' && globalThis.customElements ? globalThis.customElements : null;
+}
+/** True when `tag` is registered (or when there is no registry to ask). */
+function isDefined(tag) {
+    const reg = registry();
+    return !reg || typeof reg.get !== 'function' || !!reg.get(tag);
+}
+/** Resolves once `tag` is registered. Never rejects. */
+function whenDefined(tag) {
+    const reg = registry();
+    if (!reg || typeof reg.whenDefined !== 'function' || isDefined(tag)) {
+        return Promise.resolve();
+    }
+    return reg.whenDefined(tag).then(() => undefined, () => undefined);
+}
+
+export { isDefined as i, whenDefined as w };

package/dist/components/seki-carousel-dots.js

@@ -1,5 +1,6 @@
 import { p as proxyCustomElement, H, d as syncTheme, h, e as Host } from './p-BGFP3hxa.js';
 import { s as subscribeToContextChange } from './p-DJMgrCw3.js';
+import { w as whenDefined } from './p-C9-yH6MD.js';
 
 const sekiCarouselDotsCss = ":host{display:flex;justify-content:center;width:100%;padding-top:0.75rem}.carousel-dots__container{display:flex;align-items:center;justify-content:center;gap:var(--seki-carousel-dot-gap, 0.5rem)}.carousel-dots__dot{display:flex;align-items:center;justify-content:center;padding:0.25rem;border:none;background:transparent;cursor:pointer;transition:transform 0.2s ease}.carousel-dots__dot:hover{transform:scale(1.2)}.carousel-dots__dot:focus-visible{outline:2px solid var(--seki-ring, hsl(0, 0%, 3.9%));outline-offset:2px;border-radius:50%}.carousel-dots__dot-inner{display:block;width:var(--seki-carousel-dot-size, 0.5rem);height:var(--seki-carousel-dot-size, 0.5rem);border-radius:50%;background:var(--seki-carousel-dot-color, var(--seki-muted-foreground, hsl(0, 0%, 42%)));transition:background-color 0.2s ease, width 0.2s ease, height 0.2s ease}.carousel-dots__dot--active .carousel-dots__dot-inner{width:var(--seki-carousel-dot-active-size, 0.625rem);height:var(--seki-carousel-dot-active-size, 0.625rem);background:var(--seki-carousel-dot-active-color, var(--seki-foreground, hsl(0, 0%, 3.9%)))}@media (prefers-reduced-motion: reduce){.carousel-dots__dot,.carousel-dots__dot-inner{transition:none}}";
 
@@ -73,12 +74,15 @@ const SekiCarouselDots$1 = /*@__PURE__*/ proxyCustomElement(class SekiCarouselDo
     async subscribeToCarousel() {
         if (!this.parentCarousel)
             return;
-        // Initial state
+        // Subscribe first so a context change can never be missed, then wait for
+        // <seki-carousel> to be *defined* — in the per-tag custom-elements build its
+        // @Methods do not exist until then (#314).
+        this.unsubscribe = subscribeToContextChange(this.el, 'seki-carousel', this.handleContextChange).unsubscribe;
+        await whenDefined('seki-carousel');
         await this.updateState();
         // Re-sync on every carousel context change — including embla's async init
         // and reInit, not just user navigation — so the dots reflect the real slide
         // count/position instead of freezing at their premature mount-time state (#274).
-        this.unsubscribe = subscribeToContextChange(this.el, 'seki-carousel', this.handleContextChange).unsubscribe;
     }
     async updateState() {
         if (!this.parentCarousel)
@@ -89,7 +93,7 @@ const SekiCarouselDots$1 = /*@__PURE__*/ proxyCustomElement(class SekiCarouselDo
     }
     render() {
         const dots = Array.from({ length: this.scrollSnapCount }, (_, i) => i);
-        return (h(Host, { key: '26e61e1799d34e8d750c02c1287f85461d8e99a6', class: "carousel-dots" }, h("div", { key: '8fea8befb4cfc3859da4c5f1ee1c6b8c1485e8da', class: "carousel-dots__container", role: "tablist", "aria-label": "Carousel pagination" }, dots.map((index) => (h("button", { key: index, type: "button", class: {
+        return (h(Host, { key: '3bc07e8ad34358f497c99b4a4a51d84efe3f0f5b', class: "carousel-dots" }, h("div", { key: 'b779622f331bb7899737f51eea87469980269f52', class: "carousel-dots__container", role: "tablist", "aria-label": "Carousel pagination" }, dots.map((index) => (h("button", { key: index, type: "button", class: {
                 'carousel-dots__dot': true,
                 'carousel-dots__dot--active': index === this.selectedIndex,
             }, role: "tab", "aria-selected": index === this.selectedIndex ? 'true' : 'false', "aria-label": `Go to slide ${index + 1}`, tabindex: index === this.selectedIndex ? '0' : '-1', onClick: () => this.handleDotClick(index), onKeyDown: (e) => this.handleKeyDown(e, index) }, h("span", { class: "carousel-dots__dot-inner" })))))));

package/dist/components/seki-carousel-next.js

@@ -1,5 +1,6 @@
 import { p as proxyCustomElement, H, d as syncTheme, h, e as Host } from './p-BGFP3hxa.js';
 import { s as subscribeToContextChange } from './p-DJMgrCw3.js';
+import { w as whenDefined } from './p-C9-yH6MD.js';
 
 const sekiCarouselNavigationCss = ":host{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);z-index:10}:host(.carousel-nav--prev){left:0.5rem}:host(.carousel-nav--next){right:0.5rem}.carousel-nav__button{display:flex;align-items:center;justify-content:center;width:var(--seki-carousel-arrow-size, 2.5rem);height:var(--seki-carousel-arrow-size, 2.5rem);padding:0;border:none;border-radius:50%;background:var(--seki-carousel-arrow-bg, var(--seki-background, hsl(0, 0%, 100%)));color:var(--seki-carousel-arrow-color, var(--seki-foreground, hsl(0, 0%, 3.9%)));cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1)}.carousel-nav__button:hover:not(:disabled){background:var(--seki-carousel-arrow-bg-hover, var(--seki-accent, hsl(0, 0%, 96.1%)));transform:scale(1.05)}.carousel-nav__button:focus-visible{outline:2px solid var(--seki-ring, hsl(0, 0%, 3.9%));outline-offset:2px}.carousel-nav__button:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.carousel-nav__icon{width:1.25rem;height:1.25rem;flex-shrink:0}@media (max-width: 480px){:host(.carousel-nav--prev){left:0.25rem}:host(.carousel-nav--next){right:0.25rem}.carousel-nav__button{width:2rem;height:2rem}.carousel-nav__icon{width:1rem;height:1rem}}@media (prefers-reduced-motion: reduce){.carousel-nav__button{transition:none}.carousel-nav__button:hover:not(:disabled){transform:none}}";
 
@@ -19,6 +20,7 @@ const SekiCarouselNext$1 = /*@__PURE__*/ proxyCustomElement(class SekiCarouselNe
         this.handleClick = async () => {
             if (this.disabled || !this.parentCarousel)
                 return;
+            await whenDefined('seki-carousel');
             await this.parentCarousel.scrollNext();
         };
     }
@@ -41,12 +43,12 @@ const SekiCarouselNext$1 = /*@__PURE__*/ proxyCustomElement(class SekiCarouselNe
     async subscribeToCarousel() {
         if (!this.parentCarousel)
             return;
-        // Initial state
-        await this.updateState();
-        // Re-sync on every carousel context change — including embla's async init
-        // and reInit, not just user navigation — so the button never freezes at its
-        // premature mount-time disabled state (#274).
+        // Subscribe first so a context change can never be missed, then wait for
+        // <seki-carousel> to be *defined* — in the per-tag custom-elements build its
+        // @Methods do not exist until then (#314).
         this.unsubscribe = subscribeToContextChange(this.el, 'seki-carousel', this.handleContextChange).unsubscribe;
+        await whenDefined('seki-carousel');
+        await this.updateState();
     }
     async updateState() {
         if (!this.parentCarousel)
@@ -55,7 +57,7 @@ const SekiCarouselNext$1 = /*@__PURE__*/ proxyCustomElement(class SekiCarouselNe
         this.disabled = !context.canScrollNext;
     }
     render() {
-        return (h(Host, { key: 'cda7dd0b081d69e07d6500d8b6830368f5770e3a', class: { 'carousel-nav': true, 'carousel-nav--next': true } }, h("button", { key: 'ab3ddbdf211f90841ceef622701911554cd1c401', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Next slide", onClick: this.handleClick }, h("svg", { key: 'a296c67e267f504ac3d7cecd996130b9b95c8523', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '1fb366e06a5412c87c30c340ed95959f498ea9f3', points: "9 18 15 12 9 6" })))));
+        return (h(Host, { key: 'ec0cc2d2aee02283fb71b03ae501f7150adc4fd6', class: { 'carousel-nav': true, 'carousel-nav--next': true } }, h("button", { key: '2716d69d315b40127449d4d7979fec4ad418598d', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Next slide", onClick: this.handleClick }, h("svg", { key: '820491a74df7479bcb96c4da9e4366bee6cce26b', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '4d3220a8f9369961e1af6ede4921b1ae4b433908', points: "9 18 15 12 9 6" })))));
     }
     get el() { return this; }
     static get style() { return sekiCarouselNavigationCss; }

package/dist/components/seki-carousel-previous.js

@@ -1,5 +1,6 @@
 import { p as proxyCustomElement, H, d as syncTheme, h, e as Host } from './p-BGFP3hxa.js';
 import { s as subscribeToContextChange } from './p-DJMgrCw3.js';
+import { w as whenDefined } from './p-C9-yH6MD.js';
 
 const sekiCarouselNavigationCss = ":host{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);z-index:10}:host(.carousel-nav--prev){left:0.5rem}:host(.carousel-nav--next){right:0.5rem}.carousel-nav__button{display:flex;align-items:center;justify-content:center;width:var(--seki-carousel-arrow-size, 2.5rem);height:var(--seki-carousel-arrow-size, 2.5rem);padding:0;border:none;border-radius:50%;background:var(--seki-carousel-arrow-bg, var(--seki-background, hsl(0, 0%, 100%)));color:var(--seki-carousel-arrow-color, var(--seki-foreground, hsl(0, 0%, 3.9%)));cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1)}.carousel-nav__button:hover:not(:disabled){background:var(--seki-carousel-arrow-bg-hover, var(--seki-accent, hsl(0, 0%, 96.1%)));transform:scale(1.05)}.carousel-nav__button:focus-visible{outline:2px solid var(--seki-ring, hsl(0, 0%, 3.9%));outline-offset:2px}.carousel-nav__button:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.carousel-nav__icon{width:1.25rem;height:1.25rem;flex-shrink:0}@media (max-width: 480px){:host(.carousel-nav--prev){left:0.25rem}:host(.carousel-nav--next){right:0.25rem}.carousel-nav__button{width:2rem;height:2rem}.carousel-nav__icon{width:1rem;height:1rem}}@media (prefers-reduced-motion: reduce){.carousel-nav__button{transition:none}.carousel-nav__button:hover:not(:disabled){transform:none}}";
 
@@ -19,6 +20,7 @@ const SekiCarouselPrevious$1 = /*@__PURE__*/ proxyCustomElement(class SekiCarous
         this.handleClick = async () => {
             if (this.disabled || !this.parentCarousel)
                 return;
+            await whenDefined('seki-carousel');
             await this.parentCarousel.scrollPrev();
         };
     }
@@ -41,12 +43,12 @@ const SekiCarouselPrevious$1 = /*@__PURE__*/ proxyCustomElement(class SekiCarous
     async subscribeToCarousel() {
         if (!this.parentCarousel)
             return;
-        // Initial state
-        await this.updateState();
-        // Re-sync on every carousel context change — including embla's async init
-        // and reInit, not just user navigation — so the button never freezes at its
-        // premature mount-time disabled state (#274).
+        // Subscribe first so a context change can never be missed, then wait for
+        // <seki-carousel> to be *defined* — in the per-tag custom-elements build its
+        // @Methods do not exist until then (#314).
         this.unsubscribe = subscribeToContextChange(this.el, 'seki-carousel', this.handleContextChange).unsubscribe;
+        await whenDefined('seki-carousel');
+        await this.updateState();
     }
     async updateState() {
         if (!this.parentCarousel)
@@ -55,7 +57,7 @@ const SekiCarouselPrevious$1 = /*@__PURE__*/ proxyCustomElement(class SekiCarous
         this.disabled = !context.canScrollPrev;
     }
     render() {
-        return (h(Host, { key: '90cf829ea5c684141c0014b3b1388aabe15f3852', class: { 'carousel-nav': true, 'carousel-nav--prev': true } }, h("button", { key: '80dcc7bf4cb81588e1cc2f570165af98c7263295', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Previous slide", onClick: this.handleClick }, h("svg", { key: '0dd255a633d1fc835a9fbbfcefa967373fc8975c', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '6e1b90ac947f0949bc4a2f34e1b7972ddde631bd', points: "15 18 9 12 15 6" })))));
+        return (h(Host, { key: '8ab6f4c404f5cf04e7256c3e4d364a8377121280', class: { 'carousel-nav': true, 'carousel-nav--prev': true } }, h("button", { key: '9048cad871a4f793b3cc3ec1ba45543c9b137652', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Previous slide", onClick: this.handleClick }, h("svg", { key: '14c6000381fbb99e71ce69ae5627d82d7ec8c8ee', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '7d65b0ee40aeb412642ce27e2c0e46e90bd5d985', points: "15 18 9 12 15 6" })))));
     }
     get el() { return this; }
     static get style() { return sekiCarouselNavigationCss; }