@sekiui/elements 0.1.2 → 0.1.4

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * seki-drawer-content: Container for drawer content with gesture support
  *
@@ -52,9 +53,7 @@ export class SekiDrawerContent {
         this.startX = 0;
         this.contentEl = null;
         this.positions = [];
-        this.onDrawerOpenChange = () => {
-            this.syncOpenState();
-        };
+        this.drawerConsumer = new ContextConsumer('seki-drawer', '_drawerContext', () => this.syncOpenState());
         this.handleCloseClick = () => {
             this.requestClose.emit();
         };
@@ -152,29 +151,28 @@ export class SekiDrawerContent {
     get isHorizontal() {
         return this.direction === 'left' || this.direction === 'right';
     }
+    connectedCallback() {
+        this.drawerConsumer.connect(this.el);
+        this.propagateDirection();
+    }
     componentWillLoad() {
-        var _a;
         this.parseSnapPoints();
-        this.drawerEl = (_a = this.el.closest('seki-drawer')) !== null && _a !== void 0 ? _a : undefined;
-        // Propagate direction to parent for styling
-        if (this.drawerEl) {
-            this.drawerEl.setAttribute('data-direction', this.direction);
-            this.syncOpenState();
-        }
     }
-    componentDidLoad() {
-        var _a, _b, _c;
-        (_a = this.drawerEl) === null || _a === void 0 ? void 0 : _a.addEventListener('drawerOpen', this.onDrawerOpenChange);
-        (_b = this.drawerEl) === null || _b === void 0 ? void 0 : _b.addEventListener('drawerClose', this.onDrawerOpenChange);
-        (_c = this.drawerEl) === null || _c === void 0 ? void 0 : _c.addEventListener('drawerSnap', this.onDrawerOpenChange);
+    /** Propagate the direction to the parent for styling. */
+    propagateDirection() {
+        var _a;
+        (_a = this.drawerConsumer.parent) === null || _a === void 0 ? void 0 : _a.setAttribute('data-direction', this.direction);
     }
+    /**
+     * Re-read the parent's open state. Runs once on connect (picking up a drawer
+     * that is already open, e.g. `<seki-drawer open>`) and on every publish.
+     */
     syncOpenState() {
-        var _a;
-        if (!this.drawerEl)
+        var _a, _b;
+        // No seki-drawer parent: stay open (standalone use).
+        if (!this.drawerConsumer.parent)
             return;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const context = this.drawerEl._drawerContext;
-        this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+        this._isOpen = (_b = (_a = this.drawerConsumer.context) === null || _a === void 0 ? void 0 : _a.isOpen) !== null && _b !== void 0 ? _b : false;
     }
     parseSnapPoints() {
         const points = this.snapPoints
@@ -237,10 +235,7 @@ export class SekiDrawerContent {
         }
     }
     disconnectedCallback() {
-        var _a, _b, _c;
-        (_a = this.drawerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('drawerOpen', this.onDrawerOpenChange);
-        (_b = this.drawerEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('drawerClose', this.onDrawerOpenChange);
-        (_c = this.drawerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('drawerSnap', this.onDrawerOpenChange);
+        this.drawerConsumer.disconnect();
     }
     render() {
         if (!this._isOpen) {
@@ -449,6 +444,9 @@ export class SekiDrawerContent {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "direction",
+                "methodName": "propagateDirection"
+            }, {
                 "propName": "snapPoints",
                 "methodName": "parseSnapPoints"
             }];

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * seki-drawer: Mobile-friendly drawer component with swipe gestures
  *
@@ -40,8 +41,8 @@ export class SekiDrawer {
         this._isOpen = this.open || this.defaultOpen;
         this.open = this._isOpen;
         this.currentSnapPoint = this._isOpen ? 1 : 0;
-    }
-    componentDidLoad() {
+        // Publish before the first render so `<seki-drawer open>` shows its content
+        // at first paint (#323).
         this.updateContext();
     }
     handleOpenPropChange(newValue) {
@@ -111,9 +112,8 @@ export class SekiDrawer {
     }
     updateContext() {
         // seki-drawer-content has no other way to know this drawer's open state —
-        // it reads this off the host element via closest('seki-drawer').
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._drawerContext = { isOpen: this._isOpen };
+        // it reads this off the host element (see consumeContext in context-bridge).
+        publishContext(this.el, '_drawerContext', { isOpen: this._isOpen }, this.drawerContextChange);
     }
     handleTriggerClick() {
         this.toggleDrawer();
@@ -130,10 +130,10 @@ export class SekiDrawer {
         }
     }
     render() {
-        return (h("div", { key: '9af06912c56c84a47175fd1510a9e3cb54fd78e3', class: {
+        return (h("div", { key: '8e9c6c60ed2747b2e04f9057031fb98e98e39554', class: {
                 'seki-drawer': true,
                 'seki-drawer--open': this._isOpen,
-            }, "data-snap-point": this.currentSnapPoint, part: "drawer" }, h("slot", { key: '432b694a9917d5bf2785f110f279eab4ac9364fd' }), this._isOpen && (h("div", { key: '06e37e45daf8b6debdbbe3228dc0b5fc1b4148c5', class: "seki-drawer-overlay", part: "overlay", onClick: () => this.closeDrawer() }))));
+            }, "data-snap-point": this.currentSnapPoint, part: "drawer" }, h("slot", { key: '8366502b9a1aa0404dfbabaaeedbb4d6b5c52080' }), this._isOpen && (h("div", { key: '693cb80fc7442b8eb3083dbc13704cd6a8b87685', class: "seki-drawer-overlay", part: "overlay", onClick: () => this.closeDrawer() }))));
     }
     static get is() { return "seki-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -258,6 +258,21 @@ export class SekiDrawer {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "drawerContextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: notifies seki-drawer-content that `_drawerContext` changed. Not\npart of the public API; listen to `sekiOpenChange` instead."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-checkbox.js

@@ -41,10 +41,10 @@ export class SekiDropdownMenuCheckbox {
         this._checked = this.checked;
     }
     render() {
-        return (h(Host, { key: '05b177fed9a6e5e50b7b7f9d0fb9e8d0f0c34b27' }, h("div", { key: '2fd0cb60b4ced71fb71f735013e3187152e594e5', part: "item", role: "menuitemcheckbox", class: {
+        return (h(Host, { key: 'f61e3aeafd885b38dd5a0d1c9e21f74181a0ea6e' }, h("div", { key: '105eb348995c6f73239dacb264f69e402c5d988a', part: "item", role: "menuitemcheckbox", class: {
                 'dropdown-menu-checkbox': true,
                 'dropdown-menu-checkbox--disabled': this.disabled,
-            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '91cf55bfe54a853d634fbaf2160b4f90bfb85705', part: "indicator", class: "dropdown-menu-checkbox__indicator" }, this._checked && (h("svg", { key: '01f8eaee860cb80773634131d18fdd694ea421a4', 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("polyline", { key: 'fc7072b7be93ca0e635e01ac3871e16d4efd1a18', points: "20 6 9 17 4 12" })))), h("slot", { key: '29a25a99ecab1c7668e6b999e1f6e653fab066e0' }))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '6708475db714b0e60136e31c21b8c7bbc7af40d3', part: "indicator", class: "dropdown-menu-checkbox__indicator" }, this._checked && (h("svg", { key: 'd4d98e594e5ada55221cfd3233803a1f306be441', 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("polyline", { key: 'fabbd649bd52fe291190eb903e845db821d509b5', points: "20 6 9 17 4 12" })))), h("slot", { key: '79d60f22d6e7afc764e1219393c069206eeea15a' }))));
     }
     static get is() { return "seki-dropdown-menu-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-content.js

@@ -1,5 +1,10 @@
 import { h, Host } from "@stencil/core";
 import { computeAnchoredPosition } from "../../utils/positioning";
+import { clearTypeahead, focusFirstMenuItem, handleMenuKeyDown } from "../../utils/menu-navigation";
+const NAV_CONFIG = {
+    itemSelector: 'seki-dropdown-menu-item, seki-dropdown-menu-checkbox, seki-dropdown-menu-radio, seki-dropdown-menu-sub',
+    subContentSelector: 'seki-dropdown-menu-sub [slot="content"]',
+};
 /**
  * Dropdown Menu content panel
  *
@@ -9,15 +14,15 @@ import { computeAnchoredPosition } from "../../utils/positioning";
  */
 export class SekiDropdownMenuContent {
     constructor() {
+        this.typeahead = { buffer: '' };
         this.onMenuOpenChange = () => {
             var _a;
             const context = this.getContext();
             this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
             if (this._isOpen) {
-                this._focusedIndex = 0;
                 requestAnimationFrame(() => {
                     this.updatePosition();
-                    this.focusItem(0);
+                    void focusFirstMenuItem(this.el, NAV_CONFIG);
                 });
             }
         };
@@ -27,18 +32,12 @@ export class SekiDropdownMenuContent {
         this.sideOffset = 4;
         this._isOpen = false;
         this._position = { top: '0', left: '0' };
-        this._focusedIndex = -1;
     }
     getContext() {
         const menu = this.el.closest('seki-dropdown-menu');
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return menu ? menu._dropdownMenuContext : null;
     }
-    getMenuItems() {
-        if (!this.contentRef)
-            return [];
-        return Array.from(this.contentRef.querySelectorAll('seki-dropdown-menu-item:not([disabled]), seki-dropdown-menu-checkbox:not([disabled]), seki-dropdown-menu-radio:not([disabled])'));
-    }
     componentWillRender() {
         var _a;
         const context = this.getContext();
@@ -57,44 +56,12 @@ export class SekiDropdownMenuContent {
     handleKeyDown(event) {
         if (!this._isOpen)
             return;
-        const items = this.getMenuItems();
-        if (items.length === 0)
+        if (event.key === 'Tab') {
+            // Radix keeps focus inside an open menu.
+            event.preventDefault();
             return;
-        switch (event.key) {
-            case 'ArrowDown':
-                event.preventDefault();
-                this._focusedIndex = (this._focusedIndex + 1) % items.length;
-                this.focusItem(this._focusedIndex);
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                this._focusedIndex = this._focusedIndex <= 0 ? items.length - 1 : this._focusedIndex - 1;
-                this.focusItem(this._focusedIndex);
-                break;
-            case 'Home':
-                event.preventDefault();
-                this._focusedIndex = 0;
-                this.focusItem(0);
-                break;
-            case 'End':
-                event.preventDefault();
-                this._focusedIndex = items.length - 1;
-                this.focusItem(items.length - 1);
-                break;
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                if (this._focusedIndex >= 0 && this._focusedIndex < items.length) {
-                    items[this._focusedIndex].click();
-                }
-                break;
-        }
-    }
-    focusItem(index) {
-        const items = this.getMenuItems();
-        if (index >= 0 && index < items.length) {
-            items[index].focus();
         }
+        handleMenuKeyDown(event, this.el, NAV_CONFIG, this.typeahead);
     }
     updatePosition() {
         var _a, _b, _c, _d;
@@ -123,6 +90,7 @@ export class SekiDropdownMenuContent {
     }
     disconnectedCallback() {
         var _a;
+        clearTypeahead(this.typeahead);
         (_a = this.menuEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onMenuOpenChange);
     }
     render() {
@@ -225,8 +193,7 @@ export class SekiDropdownMenuContent {
     static get states() {
         return {
             "_isOpen": {},
-            "_position": {},
-            "_focusedIndex": {}
+            "_position": {}
         };
     }
     static get elementRef() { return "el"; }

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

@@ -48,11 +48,11 @@ export class SekiDropdownMenuItem {
         return null;
     }
     render() {
-        return (h(Host, { key: '6f24a1c9f375312a66b1ee400c99414f7f58704b' }, h("div", { key: 'ac508b1b30328238560f20475b7fe0b317fe4492', part: "item", role: "menuitem", class: {
+        return (h(Host, { key: 'f764e955a24f2a5773b0b864d19ab848a00bbbb5' }, h("div", { key: '6873dde34f3e8b8047894085088e68ea43b030bc', part: "item", role: "menuitem", class: {
                 'dropdown-menu-item': true,
                 'dropdown-menu-item--disabled': this.disabled,
                 'dropdown-menu-item--inset': this.inset,
-            }, tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'b7ea43556e66446614d596db71883f00f8806062' }))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'ff9bd2e58459493839f1972e2626fbe7490941ed' }))));
     }
     static get is() { return "seki-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-label.js

@@ -14,10 +14,10 @@ export class SekiDropdownMenuLabel {
         this.inset = false;
     }
     render() {
-        return (h(Host, { key: '0f93d64c67ffdfabee5c88f2bf5a513efb6d7fad' }, h("div", { key: '6dd15f78bf502d6359fce12c8f762b4514c0ff5b', part: "label", class: {
+        return (h(Host, { key: 'b5baef712363be03ae38b111985f99284045d6dc' }, h("div", { key: '1fa78035b435336dc34d07c8ca3b8f7095b8b1b4', part: "label", class: {
                 'dropdown-menu-label': true,
                 'dropdown-menu-label--inset': this.inset,
-            } }, h("slot", { key: 'ec8f51f85a8282005beccd5ed99a1c3247cf2df8' }))));
+            } }, h("slot", { key: '2d708c5f350a4357a7991eec867b058b14879f4f' }))));
     }
     static get is() { return "seki-dropdown-menu-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-radio-group.js

@@ -35,7 +35,7 @@ export class SekiDropdownMenuRadioGroup {
         this._radioGroupContext.setValue(event.detail);
     }
     render() {
-        return (h(Host, { key: '7715975c0588110e6052de1f0bf7cb4992cb60e8' }, h("div", { key: 'd99c7a2dc16527488a66aaa282478e90d4cd2fe9', part: "group", role: "group", class: "dropdown-menu-radio-group" }, h("slot", { key: 'ccb0ee90a273c6c6ed4b3b46f28e62409b7c938e' }))));
+        return (h(Host, { key: 'c20c8ece70e718e5f12a91b42d81718722809690' }, h("div", { key: 'd1fdbcfe8417bd96ef653f758800348966058492', part: "group", role: "group", class: "dropdown-menu-radio-group" }, h("slot", { key: '4beef06164621caa280f3a9faf0c8de04ca585e3' }))));
     }
     static get is() { return "seki-dropdown-menu-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-radio.js

@@ -51,10 +51,10 @@ export class SekiDropdownMenuRadio {
         (_a = this.radioGroupEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiValueChange', this.onRadioGroupValueChange);
     }
     render() {
-        return (h(Host, { key: '691da6aa0a7d7755cae23afcdf7d0c7fafe69835' }, h("div", { key: '2b6e246b14e1f6aa05a475a0505f3447524174ec', part: "item", role: "menuitemradio", class: {
+        return (h(Host, { key: '7485187f86093c86220c8acf913f669476e105ad' }, h("div", { key: 'b0afc97b01b0d03cddad61c13d6c8a77d9714365', part: "item", role: "menuitemradio", class: {
                 'dropdown-menu-radio': true,
                 'dropdown-menu-radio--disabled': this.disabled,
-            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '20ea87b69c75e33209705b6e0f081095aa53d5cd', part: "indicator", class: "dropdown-menu-radio__indicator" }, this._isChecked && (h("svg", { key: '2fdc12148f4ebfb55d8d7da59b5a299e15d24676', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: '3d3a71339be3bef249235d941100d99a38e699b4', cx: "12", cy: "12", r: "4" })))), h("slot", { key: '08ecfc92fc495dabbfac3fcf51371648d2e841e8' }))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'b60661b70dbea6a3ab2558dc04dbb13770ddf457', part: "indicator", class: "dropdown-menu-radio__indicator" }, this._isChecked && (h("svg", { key: '0a2e60ac00fab727509f3ca21e3bb46757e782b8', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: '07aedd47c4eef20c63398998e6ba20bcbb15d995', cx: "12", cy: "12", r: "4" })))), h("slot", { key: '78b92bcb4942cfad7760827295ee4ccbcb4c303f' }))));
     }
     static get is() { return "seki-dropdown-menu-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiDropdownMenuSeparator {
     render() {
-        return (h(Host, { key: '4200f2e64112ce955620647accecf7999b1c85c3' }, h("div", { key: '675a6b70796d6228e8c2b2617c6f7edb929f7247', part: "separator", role: "separator", class: "dropdown-menu-separator" })));
+        return (h(Host, { key: 'e277d197b3ad7cf1862d37b0d63e1b520838f1ef' }, h("div", { key: '764e6e0a987a8a13ccd80cbbabb776f85b344357', part: "separator", role: "separator", class: "dropdown-menu-separator" })));
     }
     static get is() { return "seki-dropdown-menu-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-shortcut.js

@@ -8,7 +8,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiDropdownMenuShortcut {
     render() {
-        return (h(Host, { key: 'bfbe679129428549194736e9b91ebb45853ddf42' }, h("span", { key: '6eed4631c973e370f024317c16aec68fd6003cf0', part: "shortcut", class: "dropdown-menu-shortcut" }, h("slot", { key: '41eab2e7f2118d9151352c7cb953107aead24eca' }))));
+        return (h(Host, { key: '757df249cd29ce449d103f7486db0861036ce994' }, h("span", { key: 'fec1096f80617b2d2757ce80e4471d599a039362', part: "shortcut", class: "dropdown-menu-shortcut" }, h("slot", { key: '6ee03441c5280c4c9d4715e431c9695d9c0b21f7' }))));
     }
     static get is() { return "seki-dropdown-menu-shortcut"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { focusMenuItem } from "../../utils/menu-navigation";
 /**
  * Dropdown Menu Sub - A submenu component for nested dropdown menus
  *
@@ -122,12 +123,12 @@ export class SekiDropdownMenuSub {
                 const assignedElements = slot.assignedElements();
                 for (const element of assignedElements) {
                     if (element.matches(focusableSelectors)) {
-                        element.focus();
+                        focusMenuItem(element);
                         return;
                     }
                     const focusable = element.querySelector(focusableSelectors);
                     if (focusable) {
-                        focusable.focus();
+                        focusMenuItem(focusable);
                         return;
                     }
                 }
@@ -135,10 +136,10 @@ export class SekiDropdownMenuSub {
         }
     }
     render() {
-        return (h(Host, { key: '47270b9a251c8e6a64fd27542a7c2b8147169c6c', "data-state": this._isOpen ? 'open' : 'closed', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '0d0302f67138b65c490a501d0c25874886a1bffe', ref: (el) => (this.triggerRef = el), part: "trigger", class: "dropdown-menu-sub-trigger", role: "menuitem", "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false', tabindex: "0" }, h("slot", { key: '9f08e0e9ee8130f767573ec0a28f9c19c19c7b2c', name: "trigger" })), this._isOpen && (h("div", { key: 'f0a4a31e4b5f1adebc3df5dc9b1db722a92187ca', ref: (el) => (this.contentRef = el), part: "content", class: {
+        return (h(Host, { key: '4adc94fe5f9ffffb87f21402b38cf2009036125b', "data-state": this._isOpen ? 'open' : 'closed', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '08fa7ef92573423f8ce0e229d8f6c5027ad54e07', ref: (el) => (this.triggerRef = el), part: "trigger", class: "dropdown-menu-sub-trigger", role: "menuitem", "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false', tabindex: "0" }, h("slot", { key: 'cd1406f9f3cc86e88ed8a991afdb8da80ec7c85e', name: "trigger" })), this._isOpen && (h("div", { key: 'fd8d80fbfb0378fe2e6aa52160b972e04794a113', ref: (el) => (this.contentRef = el), part: "content", class: {
                 'dropdown-menu-sub-content': true,
                 'dropdown-menu-sub-content--left': this._openToLeft,
-            }, role: "menu" }, h("slot", { key: '8fe254dcc23bcfadc18e0c65eab37628ba571a8d', name: "content" })))));
+            }, role: "menu" }, h("slot", { key: '47ca91a0421510ac7fcb089f9c1b70c1130a9afc', name: "content" })))));
     }
     static get is() { return "seki-dropdown-menu-sub"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-menu/seki-dropdown-menu-trigger.js

@@ -34,7 +34,7 @@ export class SekiDropdownMenuTrigger {
         (_a = this.menuEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onMenuOpenChange);
     }
     render() {
-        return (h(Host, { key: 'aa628a8f98f857df0056d58ff9c848e8a4054b44', "data-state": this._isOpen ? 'open' : 'closed' }, h("span", { key: '1f312b5c85b6b69c6640941332af1d507b6fb9c7', part: "trigger", class: "dropdown-menu-trigger", "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false' }, h("slot", { key: '5e2f7588140525948a214e78de199a7aa07cba82' }))));
+        return (h(Host, { key: '1fe322c4d92019fd065fe556b29566f0355f1971', "data-state": this._isOpen ? 'open' : 'closed' }, h("span", { key: 'b80a41c7d5246dd5352491a2420e668e830d77c2', part: "trigger", class: "dropdown-menu-trigger", "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false' }, h("slot", { key: '163027c46c93de9bf537b2839eb684d78763d37f' }))));
     }
     static get is() { return "seki-dropdown-menu-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { composedContains, getDeepActiveElement } from "../../utils/menu-navigation";
 /**
  * Dropdown Menu component - context menu with items
  *
@@ -39,10 +40,12 @@ export class SekiDropdownMenu {
     openChanged(newValue) {
         this._isOpen = newValue;
         if (this._isOpen) {
+            this.returnFocusTo = getDeepActiveElement();
             this.setupClickOutside();
         }
         else {
             this.removeClickOutside();
+            this.restoreFocus();
         }
         // Programmatic `menuEl.open = x` must notify already-mounted children the
         // same way openMenu()/closeMenu() do (found during the #261 audit).
@@ -99,6 +102,25 @@ export class SekiDropdownMenu {
             this.closeMenu();
         }
     }
+    /**
+     * Return focus to the trigger (or whatever had focus when the menu opened)
+     * after the menu closes. Skipped when focus already moved somewhere outside
+     * the menu, e.g. the user clicked another focusable element.
+     */
+    restoreFocus() {
+        const content = this.el.querySelector('seki-dropdown-menu-content');
+        const active = getDeepActiveElement();
+        const focusInMenu = !active || active === document.body || (!!content && composedContains(content, active));
+        const previous = this.returnFocusTo;
+        this.returnFocusTo = undefined;
+        if (!focusInMenu)
+            return;
+        const trigger = this.el.querySelector('seki-dropdown-menu-trigger');
+        const target = previous && previous !== document.body && previous.isConnected && !(content && composedContains(content, previous))
+            ? previous
+            : trigger === null || trigger === void 0 ? void 0 : trigger.querySelector('button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        target === null || target === void 0 ? void 0 : target.focus();
+    }
     setupClickOutside() {
         // Clear any pending timeout/handler first so a rapid open→close→open cannot
         // leave a leaked listener or double-schedule.
@@ -153,7 +175,7 @@ export class SekiDropdownMenu {
         this.removeClickOutside();
     }
     render() {
-        return (h(Host, { key: 'c0e2e2a03959e42f69fb687c4b8674523cb8206f', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '9210d19dfd727713f137b3ebdf93f86ed2153d31', part: "dropdown-menu", class: "dropdown-menu" }, h("slot", { key: 'ef57018b73ef42a8f0f411689d115a0358bafbfe' }))));
+        return (h(Host, { key: '5aa46bca99cbd85e5502c003931f26e36b612790', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'e7a528864da3024287324a32c85d15d52c23220e', part: "dropdown-menu", class: "dropdown-menu" }, h("slot", { key: 'c199df3c379535822edb7cf20a73da64f2f9b5c4' }))));
     }
     static get is() { return "seki-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ import { Host, h } from "@stencil/core";
  */
 export class SekiEmpty {
     render() {
-        return (h(Host, { key: '8e216b9cf08f891086ff834dfea2fbd54419a40e' }, h("div", { key: '5b3b7594d5c3df3a4a0ddf8e4eae636baa4159cb', class: "seki-empty", part: "empty", role: "status" }, h("div", { key: 'e3b86de6eae76012c0d48134eb5e31e246659d20', class: "seki-empty__icon", part: "icon" }, h("slot", { key: '44413e591757d2a010d26c2d423538517f391407', name: "icon" })), this.heading && (h("h3", { key: '9ed112f7a228f408e1eb1acef87d403d9375e72e', class: "seki-empty__title", part: "title" }, this.heading)), this.description && (h("p", { key: '4e9f6387c22d3a9089df6ffd36b0506388f11843', class: "seki-empty__description", part: "description" }, this.description)), h("div", { key: '37c3572e328a542019a8e1682cc903fb949372de', class: "seki-empty__content", part: "content" }, h("slot", { key: 'd853d9233200b852335b7030f9f81e4c7f540b63' })), h("div", { key: '7b7f69b8f57e1dfaaafc10c9e5adbd28f4d36ca8', class: "seki-empty__action", part: "action" }, h("slot", { key: 'e992c763b281451fc1f829ef7c11b9034caedf50', name: "action" })))));
+        return (h(Host, { key: '5f412cfece32e3d1f8e0cdf36b5230665704bd05' }, h("div", { key: '8baf34fe27a7418bc25354fe982220615207bbcf', class: "seki-empty", part: "empty", role: "status" }, h("div", { key: '486918a0a49740a1c55ce2cb9afc793584eee26c', class: "seki-empty__icon", part: "icon" }, h("slot", { key: '875da7a7a3f9d9eb036f443c05da874612f25bd6', name: "icon" })), this.heading && (h("h3", { key: 'cb0e52fbe2f3b4f4059faa394064db432fefbc2a', class: "seki-empty__title", part: "title" }, this.heading)), this.description && (h("p", { key: '2be58514722b58bd79074c68ffca0117195d792e', class: "seki-empty__description", part: "description" }, this.description)), h("div", { key: '0c444d6b558e95eb548a628177a5189a7864954a', class: "seki-empty__content", part: "content" }, h("slot", { key: '0ba8cdb879551138e696ed0125de2d7d18481d0b' })), h("div", { key: 'fba4f83a754f8175a67eeb8ff27e333dbd698d45', class: "seki-empty__action", part: "action" }, h("slot", { key: 'e07313e7c9197d3bfe1532d9d5f8d7817d9b09a3', name: "action" })))));
     }
     static get is() { return "seki-empty"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ export class SekiField {
     }
     render() {
         const hasMultiple = this.hasMultipleControls();
-        return (h(Host, { key: '3e8cb8af3695f4679c99e548b7a8d5fe390d9075', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: 'ae2ef92cb8d2a8df641b333bfbec2bcbc9b3143f', class: "field" }, h("div", { key: '04ef1bafee80a43066ff8dcbf00f7d70dbba4a75', class: "field-label" }, h("slot", { key: '0a9d4f1dc7fe2a7d8a85c0acb8d095cf14f87233', name: "label" })), h("div", { key: 'd986e0f95988069ab855189f6c2a4f2f8c49d10c', class: "field-control" }, h("slot", { key: '8e96a205c5a3c594101dbc88c2718043b30e325f' })), h("div", { key: 'dd5dd36bb35e9e690789954b173d981f1978fbaa', class: "field-description" }, h("slot", { key: '1ca0a6eb01c468eb0ce80e3f261107d05f6890f3', name: "description" })), h("div", { key: '78b7ba058f6ecd393676141218efd711b556c91e', class: "field-error" }, h("slot", { key: 'd9c6623cda2de4ff79670806be7d424907785d9d', name: "error" })))));
+        return (h(Host, { key: '6d5c0dc39e92ad0783b6755035823a878ac95500', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: '708937237bc63b11a1ba4746351810abb0f6904c', class: "field" }, h("div", { key: 'a077c2034ea590b714969c4ad6ebeddd6dfa9a28', class: "field-label" }, h("slot", { key: 'ba94a250be531af1be18a9d8ed9d0a145a5e49f0', name: "label" })), h("div", { key: '3a032748960267bd4f5919b44c4cd4d01a17fa00', class: "field-control" }, h("slot", { key: 'd5632dfb857dcfebe7f9b6f45354903561545be1' })), h("div", { key: '02f109075a54d838db01b7b760a8277911517cc2', class: "field-description" }, h("slot", { key: '553db4a5434be4277c2507f3af33ea940a8c04a4', name: "description" })), h("div", { key: '98941dfeac3b40136e39706595936829f1e94f6d', class: "field-error" }, h("slot", { key: 'ffd9f2c146073b12d302bfc026817bcb5b5405ef', name: "error" })))));
     }
     static get is() { return "seki-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,7 +29,7 @@ export class SekiFieldDescription {
         return this.componentId;
     }
     render() {
-        return (h("div", { key: '7dcd3f2ded081d952ec498805308e6d89d644b65', id: this.componentId, class: "description" }, h("slot", { key: 'cabc7002b8b8b2714cd77bf0bb530b5d107da932' })));
+        return (h("div", { key: '576382295b9ed414e1039bdc342ffee29b2d5531', id: this.componentId, class: "description" }, h("slot", { key: 'a5b79dba0790e1b69738889d61a48b44dacc5149' })));
     }
     static get is() { return "seki-field-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-error/seki-field-error.js

@@ -57,7 +57,7 @@ export class SekiFieldError {
     }
     render() {
         const style = this._visible ? {} : { display: 'none' };
-        return (h("div", { key: '0bdb96401638104e42d6be802cc5d997136c34a4', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: 'ca00b6eac2d88a4ab8a21ab458698e8964232e84' })));
+        return (h("div", { key: '44e891a1d8e637906933ece17fee66dec2ffb613', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '741fe900c84f9fa797ae58e7e8e6c58532fa0495' })));
     }
     static get is() { return "seki-field-error"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class SekiFieldGroup {
         const style = {
             '--seki-field-group-gap': this.gap,
         };
-        return (h("div", { key: 'f674336b32a31deb9895afe4f3b7b40afd3a66e1', class: "field-group", style: style }, h("slot", { key: '0373b8f5d14f211d26d3a324da5db3140f924223' })));
+        return (h("div", { key: 'bcf7e18784e4f315bc6b4574ef639c154dcc8a24', class: "field-group", style: style }, h("slot", { key: '501913c4d4aa7f6e19f86d593279e439beb4e811' })));
     }
     static get is() { return "seki-field-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-label/seki-field-label.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { LabelBinding } from "../../utils/label-association";
 export class SekiFieldLabel {
     constructor() {
         /**
@@ -7,9 +8,29 @@ export class SekiFieldLabel {
          */
         this.required = false;
     }
+    onForChange() {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync();
+    }
+    /** Forward clicks to the labelled control (see utils/label-association.ts). */
+    onClick(event) {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.handleClick(event);
+    }
+    connectedCallback() {
+        this.binding = new LabelBinding(this.el, () => this.htmlFor);
+    }
+    componentDidLoad() {
+        var _a, _b;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync();
+        (_b = this.binding) === null || _b === void 0 ? void 0 : _b.observe();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     render() {
-        const labelProps = this.htmlFor ? { for: this.htmlFor } : {};
-        return (h("label", Object.assign({ key: '833e8251b976202c5cd8090cfff13e11da9c10ed' }, labelProps), h("slot", { key: '8297e06835347162543b24031f72d6fc0170274f' }), this.required && h("span", { key: '6c1e0a03528c0294b47f83cb65564d70ade01a5c', class: "required-indicator" }, " *")));
+        return (h("label", { key: '012428a2524290c08330f7e9163c4f040a01c5c4' }, h("slot", { key: 'fec4e4466151bf66657c4326fa8978dac8137692', onSlotchange: () => { var _a; return (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync(); } }), this.required && h("span", { key: 'b21ecf7ad0432714e7160bf0ec911450eb1f7027', class: "required-indicator" }, " *")));
     }
     static get is() { return "seki-field-label"; }
     static get encapsulation() { return "shadow"; }
@@ -37,7 +58,7 @@ export class SekiFieldLabel {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "ID of the form control this label is for\nSets the `for` attribute on the label element"
+                    "text": "ID of the form control this label is for\nResolved in the label's own root node (not this component's shadow root), so it\nreaches light-DOM controls. Falls back to the control nested in the label."
                 },
                 "getter": false,
                 "setter": false,
@@ -67,4 +88,19 @@ export class SekiFieldLabel {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "htmlFor",
+                "methodName": "onForChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/field-legend/seki-field-legend.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiFieldLegend {
     render() {
-        return (h("legend", { key: '22f6f51379b519bc26834497183b38af18cd6458' }, h("slot", { key: '6b597982452b392d745d94dceb8808ff928a1dfd' })));
+        return (h("legend", { key: 'c14c84629f3c727c7ad791b12eee95dc858a0755' }, h("slot", { key: 'd60f085ed640d10ab60540203c4fedee245c3d7d' })));
     }
     static get is() { return "seki-field-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class SekiFieldset {
         this.disabled = false;
     }
     render() {
-        return (h("fieldset", { key: 'e9483655f9440b01e02233963dc7af96677e7ae9', disabled: this.disabled, class: "fieldset" }, h("slot", { key: 'd4131ebbfe94e985f3d1e5d2c97870e30b4dcf7d', name: "legend" }), h("div", { key: '28b91f73c7dcce6d5073349cd42ee8eb699f185a', class: "fieldset-content" }, h("slot", { key: '62b7ad096b8a3bf4c9bd315575784d7e0e0094fb' }))));
+        return (h("fieldset", { key: 'a8dbcc839ed3bd9f0ab171ab7e144259e0e21bb6', disabled: this.disabled, class: "fieldset" }, h("slot", { key: '0ecb3a16e59e70f0c2ac7d8bcfaa43da1709c8ea', name: "legend" }), h("div", { key: '9cd636d991d0f984f0262cb9c9fcfc4c11319698', class: "fieldset-content" }, h("slot", { key: '658de18e7c5f1a19b422be729091c57f475888eb' }))));
     }
     static get is() { return "seki-fieldset"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hover-card/seki-hover-card-trigger.js

@@ -124,7 +124,7 @@ export class SekiHoverCardTrigger {
         }
     }
     render() {
-        return (h(Host, { key: 'fae9927cd8cc2807257fb55b905f45e90b0e6a0d' }, h("span", { key: 'e4c8b4a08481a07604698e7a9b1225d8122abbe9', part: "trigger", class: "hover-card-trigger", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick }, h("slot", { key: 'e611398a19d7798ee0eb11dd8ad5bf83e14f9007' }))));
+        return (h(Host, { key: '9462d58ce8e053ed887f31f1d7ab18741427cde8' }, h("span", { key: '5ea522dcfca85f250aef551f9528a455de3204ca', part: "trigger", class: "hover-card-trigger", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick }, h("slot", { key: '0d89d77b3ff786f60c7a5fdc12dd052611b4727c' }))));
     }
     static get is() { return "seki-hover-card-trigger"; }
     static get encapsulation() { return "shadow"; }