@sekiui/elements 0.1.3 → 0.1.5

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { lockBodyScroll, unlockBodyScroll } from "../../utils/dialog/focus-trap";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * Dialog root component for modal dialogs
  *
@@ -20,6 +20,8 @@ export class SekiDialog {
         /**
          * Whether the dialog is modal (traps focus, blocks scroll)
          */
+        // The modal behaviour itself lives in seki-dialog-content (utils/overlay.ts),
+        // so a dialog declared open in HTML gets it as soon as its content connects.
         this.modal = true;
         /**
          * Internal state for open
@@ -29,6 +31,13 @@ export class SekiDialog {
     }
     componentWillLoad() {
         this._isOpen = this.open || this.defaultOpen;
+        // Publish before the first render so parts that render with this dialog
+        // (or upgrade before it, under one-module-per-tag loading) see `open`
+        // declared in HTML (#323).
+        this.publish();
+    }
+    handleModalChange() {
+        this.publish();
     }
     handleOpenPropChange(newValue) {
         // Honour controlled `open` updates after first render. Without this, setting
@@ -57,12 +66,8 @@ export class SekiDialog {
         // Update context for child components before emitting, so that any listener
         // reading _dialogContext synchronously (e.g. seki-dialog-content) sees isOpen
         // already updated.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._dialogContext = this.getContext();
+        this.publish();
         this.sekiOpenChange.emit(true);
-        if (this.modal) {
-            lockBodyScroll();
-        }
     }
     /**
      * Closes the dialog
@@ -75,12 +80,8 @@ export class SekiDialog {
         // Update context for child components before emitting, so that any listener
         // reading _dialogContext synchronously (e.g. seki-dialog-content) sees isOpen
         // already updated.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._dialogContext = this.getContext();
+        this.publish();
         this.sekiOpenChange.emit(false);
-        if (this.modal) {
-            unlockBodyScroll();
-        }
     }
     handleTriggerClick() {
         this.openDialog();
@@ -98,22 +99,11 @@ export class SekiDialog {
             close: () => this.closeDialog(),
         };
     }
-    componentDidLoad() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._dialogContext = this.getContext();
-    }
-    componentDidUpdate() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._dialogContext = this.getContext();
-    }
-    disconnectedCallback() {
-        // Ensure body scroll is unlocked if component is removed while open
-        if (this._isOpen && this.modal) {
-            unlockBodyScroll();
-        }
+    publish() {
+        publishContext(this.el, '_dialogContext', this.getContext(), this.dialogContextChange);
     }
     render() {
-        return (h(Host, { key: 'e647d4403eb9d3d3fa4a8da8b218659f9942c9e5', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '16eaa11585e656a62da1cf02a75d7d49610d65ae', part: "dialog", class: "dialog" }, h("slot", { key: 'a281ff724e3518a74f87bd9cab3bd70304e38cde' }))));
+        return (h(Host, { key: 'e4cc2d1e5e3f258b5ce1b3170c324f2398c069a3', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '134502ada4d3f700d511366673c1fd01c6e5568b', part: "dialog", class: "dialog" }, h("slot", { key: '1c871fcd3297aca804b75c001f9bf5f7942a70d8' }))));
     }
     static get is() { return "seki-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -212,6 +202,21 @@ export class SekiDialog {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "dialogContextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: notifies dialog parts (content, overlay, title, description)\nthat `_dialogContext` changed. Not part of the public API; listen to\n`sekiOpenChange` instead."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -255,6 +260,9 @@ export class SekiDialog {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "modal",
+                "methodName": "handleModalChange"
+            }, {
                 "propName": "open",
                 "methodName": "handleOpenPropChange"
             }];

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

@@ -18,7 +18,7 @@ export class SekiDirection {
         this.dir = 'ltr';
     }
     render() {
-        return (h(Host, { key: 'f88b2b2f5141ab10202a945ae3a437b383c59fed', dir: this.dir }, h("slot", { key: 'c14e1f5265bce7da29534426f339e32e8f576361' })));
+        return (h(Host, { key: '6990a0dde32ef9fcc2b2fe461693ff171e9508e5', dir: this.dir }, h("slot", { key: '34ae45b7c82fc4836923f5ebca79b50348e98418' })));
     }
     static get is() { return "seki-direction"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,6 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
+import { DialogLabelSource, OverlayLayer } from "../../utils/overlay";
 /**
  * seki-drawer-content: Container for drawer content with gesture support
  *
@@ -47,14 +49,35 @@ export class SekiDrawerContent {
          * seki-drawer parent (e.g. mounted standalone).
          */
         this._isOpen = true;
+        /** Title text mirrored for the accessible name (#357). */
+        this._label = '';
+        /** Description text mirrored for the accessible description (#357). */
+        this._description = '';
         // Gesture tracking state
         this.startY = 0;
         this.startX = 0;
         this.contentEl = null;
         this.positions = [];
-        this.onDrawerOpenChange = () => {
-            this.syncOpenState();
-        };
+        this.drawerConsumer = new ContextConsumer('seki-drawer', '_drawerContext', () => this.syncOpenState());
+        /**
+         * Modal behaviour (utils/overlay.ts): focus moved in and trapped, page
+         * scroll locked, focus restored on close, Escape closes this drawer only
+         * when nothing is open on top of it.
+         */
+        this.layer = new OverlayLayer({
+            modal: true,
+            container: () => this.contentEl,
+            onEscape: (event) => {
+                if (!this._isOpen)
+                    return;
+                event.preventDefault();
+                this.requestClose.emit();
+            },
+        });
+        this.labels = new DialogLabelSource((label, description) => {
+            this._label = label;
+            this._description = description;
+        });
         this.handleCloseClick = () => {
             this.requestClose.emit();
         };
@@ -152,29 +175,36 @@ 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)
-            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;
+        var _a, _b;
+        // No seki-drawer parent: stay open (standalone use) without modal behaviour.
+        if (this.drawerConsumer.parent) {
+            this._isOpen = (_b = (_a = this.drawerConsumer.context) === null || _a === void 0 ? void 0 : _a.isOpen) !== null && _b !== void 0 ? _b : false;
+            this.layer.setActive(this._isOpen);
+        }
+        if (this._isOpen)
+            this.labels.observe(this.el);
+        else
+            this.labels.disconnect();
+    }
+    componentDidRender() {
+        this.layer.didRender();
     }
     parseSnapPoints() {
         const points = this.snapPoints
@@ -237,20 +267,19 @@ 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();
+        this.layer.setActive(false);
+        this.labels.disconnect();
     }
     render() {
         if (!this._isOpen) {
             return null;
         }
         const transformStyle = this.getTransformStyle();
-        return (h(Host, { "data-direction": this.direction }, h("div", { ref: (el) => (this.contentEl = el !== null && el !== void 0 ? el : null), role: "dialog", "aria-modal": "true", "aria-label": this.ariaLabel, class: {
+        return (h(Host, { "data-direction": this.direction }, h("div", { ref: (el) => (this.contentEl = el !== null && el !== void 0 ? el : null), role: "dialog", tabindex: "-1", "aria-modal": "true", "aria-label": this.ariaLabel, "aria-labelledby": !this.ariaLabel && this._label ? 'label' : undefined, "aria-describedby": this._description ? 'description' : undefined, class: {
                 'seki-drawer-content': true,
                 [`seki-drawer-content--${this.direction}`]: true,
-            }, style: transformStyle ? { transform: transformStyle } : {}, part: "content", onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }, this.shouldShowHandle && (h("div", { class: "seki-drawer-handle", part: "handle" })), h("button", { type: "button", class: "seki-drawer-close-button", "aria-label": "Close", onClick: this.handleCloseClick }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M18 6 6 18" }), h("path", { d: "m6 6 12 12" }))), h("div", { class: "seki-drawer-body" }, h("slot", null)))));
+            }, style: transformStyle ? { transform: transformStyle } : {}, part: "content", onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }, this.shouldShowHandle && (h("div", { class: "seki-drawer-handle", part: "handle" })), h("div", { class: "seki-drawer-body" }, h("slot", null)), h("button", { type: "button", class: "seki-drawer-close-button", "aria-label": "Close", onClick: this.handleCloseClick }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M18 6 6 18" }), h("path", { d: "m6 6 12 12" }))), h("span", { id: "label", hidden: true }, this._label), h("span", { id: "description", hidden: true }, this._description))));
     }
     static get is() { return "seki-drawer-content"; }
     static get encapsulation() { return "shadow"; }
@@ -410,7 +439,9 @@ export class SekiDrawerContent {
             "isDragging": {},
             "dragOffset": {},
             "openPercent": {},
-            "_isOpen": {}
+            "_isOpen": {},
+            "_label": {},
+            "_description": {}
         };
     }
     static get events() {
@@ -449,6 +480,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.css

@@ -929,3 +929,9 @@
     transition: none;
   }
 }
+
+/* The panel itself takes focus only when it holds nothing focusable
+   (tabindex="-1", see utils/overlay.ts); no ring on the whole panel. */
+.seki-drawer-content:focus {
+  outline: none;
+}

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();
@@ -124,16 +124,11 @@ export class SekiDrawer {
     handleRequestSnap(event) {
         this.snapTo(event.detail.point);
     }
-    handleKeydown(ev) {
-        if (this._isOpen && ev.key === 'Escape') {
-            this.closeDrawer();
-        }
-    }
     render() {
-        return (h("div", { key: '8740a2d8aad6119d9388b744fd0f7679c771e572', class: {
+        return (h("div", { key: '1edc079ff8822bc212c400c1821f19672c951713', class: {
                 'seki-drawer': true,
                 'seki-drawer--open': this._isOpen,
-            }, "data-snap-point": this.currentSnapPoint, part: "drawer" }, h("slot", { key: '54a1e6c7293e36038e24ee64c463f3329843fe35' }), this._isOpen && (h("div", { key: '89d7c1556c00b8e1faba0e96a6d66016d9790ade', class: "seki-drawer-overlay", part: "overlay", onClick: () => this.closeDrawer() }))));
+            }, "data-snap-point": this.currentSnapPoint, part: "drawer" }, h("slot", { key: 'ed3f5a4f4f24d67450857441a1e9b2c5661adddb' }), this._isOpen && (h("div", { key: 'a25e13edbaea3d4c806f3df597907697e5567cc1', class: "seki-drawer-overlay", part: "overlay", onClick: () => this.closeDrawer() }))));
     }
     static get is() { return "seki-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -258,6 +253,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() {
@@ -362,12 +372,6 @@ export class SekiDrawer {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKeydown",
-                "target": "window",
-                "capture": false,
-                "passive": false
             }];
     }
 }

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: 'f61e3aeafd885b38dd5a0d1c9e21f74181a0ea6e' }, h("div", { key: '105eb348995c6f73239dacb264f69e402c5d988a', part: "item", role: "menuitemcheckbox", class: {
+        return (h(Host, { key: '789c90482b2a1d36d64931476d7ff723fcbe84b0' }, h("div", { key: '72267fa9bcb86220c63257220933929239227362', 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: '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' }))));
+            }, 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: 'e06e00421fc1c4f4df97011aaaad5b7009d273c8', part: "indicator", class: "dropdown-menu-checkbox__indicator" }, this._checked && (h("svg", { key: 'aadc5c3c4ec647796480f1d0571dae9345563793', 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: 'f947e862671277f48ddff0b5d1b1f50896ba64bd', points: "20 6 9 17 4 12" })))), h("slot", { key: 'e6d371a6e51c0932e27a99a04925425594c81b0a' }))));
     }
     static get is() { return "seki-dropdown-menu-checkbox"; }
     static get encapsulation() { return "shadow"; }

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: 'f764e955a24f2a5773b0b864d19ab848a00bbbb5' }, h("div", { key: '6873dde34f3e8b8047894085088e68ea43b030bc', part: "item", role: "menuitem", class: {
+        return (h(Host, { key: 'b21450ab7988b9bceb6514e63d8538a028a83716' }, h("div", { key: 'cbe6c542cf6328d902cfb444e3f42f217bbe04c0', 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: 'ff9bd2e58459493839f1972e2626fbe7490941ed' }))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'eb54d4b348f5029ae71327be6f2dafd315fb2755' }))));
     }
     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: 'b5baef712363be03ae38b111985f99284045d6dc' }, h("div", { key: '1fa78035b435336dc34d07c8ca3b8f7095b8b1b4', part: "label", class: {
+        return (h(Host, { key: 'c002d572570a8d10e7fa19156bcfe8bf6f9264e1' }, h("div", { key: '9ac7433b82ed5c1a03b091dc249c82bc417aa8f8', part: "label", class: {
                 'dropdown-menu-label': true,
                 'dropdown-menu-label--inset': this.inset,
-            } }, h("slot", { key: '2d708c5f350a4357a7991eec867b058b14879f4f' }))));
+            } }, h("slot", { key: 'b81aafd9fbfe849b01a2339fd1c2f397791e51c7' }))));
     }
     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: 'c20c8ece70e718e5f12a91b42d81718722809690' }, h("div", { key: 'd1fdbcfe8417bd96ef653f758800348966058492', part: "group", role: "group", class: "dropdown-menu-radio-group" }, h("slot", { key: '4beef06164621caa280f3a9faf0c8de04ca585e3' }))));
+        return (h(Host, { key: '7d295c8956a32c1f457a719896910a98b2a8d411' }, h("div", { key: '99cd568e35f60311065ed51d739da52871e2c016', part: "group", role: "group", class: "dropdown-menu-radio-group" }, h("slot", { key: 'd77939be6f8ca959973d0088f70a723cf9add4b6' }))));
     }
     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: '7485187f86093c86220c8acf913f669476e105ad' }, h("div", { key: 'b0afc97b01b0d03cddad61c13d6c8a77d9714365', part: "item", role: "menuitemradio", class: {
+        return (h(Host, { key: 'faedbaf3e3f08c2875a51aed9ecdb06b99e35e0d' }, h("div", { key: '160811965fd5b353fc128f94707f086e3669ff95', 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: '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' }))));
+            }, 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: '3a1eb8357a28e5ad8398788d1f8d00ba7f0dd87b', part: "indicator", class: "dropdown-menu-radio__indicator" }, this._isChecked && (h("svg", { key: '0df50df802f3e25b99d15f6e44794d6309c41d76', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: '1d1ebc8da8461803698e35b18c59e72fbdd80a4e', cx: "12", cy: "12", r: "4" })))), h("slot", { key: '868c9d14e224e73da7640d7171cdd566552a23ec' }))));
     }
     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: 'e277d197b3ad7cf1862d37b0d63e1b520838f1ef' }, h("div", { key: '764e6e0a987a8a13ccd80cbbabb776f85b344357', part: "separator", role: "separator", class: "dropdown-menu-separator" })));
+        return (h(Host, { key: '33ddef28d709b0686dba9d68aeddc2971b385456' }, h("div", { key: '2fb22bc6a5cc011538c37f196b2c25cc44acf53c', 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: '757df249cd29ce449d103f7486db0861036ce994' }, h("span", { key: 'fec1096f80617b2d2757ce80e4471d599a039362', part: "shortcut", class: "dropdown-menu-shortcut" }, h("slot", { key: '6ee03441c5280c4c9d4715e431c9695d9c0b21f7' }))));
+        return (h(Host, { key: '22467b88dc7273fb3c7d250daa5a5d683d3ae094' }, h("span", { key: 'cbe43eaeaaa13885317b88e7d51980e12a5b2798', part: "shortcut", class: "dropdown-menu-shortcut" }, h("slot", { key: '1b53a8d1304e318383a0e10a553920c6237c4c17' }))));
     }
     static get is() { return "seki-dropdown-menu-shortcut"; }
     static get encapsulation() { return "shadow"; }

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

@@ -136,10 +136,10 @@ export class SekiDropdownMenuSub {
         }
     }
     render() {
-        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: {
+        return (h(Host, { key: '1c735704b9ab9d0179443c71c61ccd3daca808eb', "data-state": this._isOpen ? 'open' : 'closed', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '6aca8c142fe38b482bf9f408495a5c870c3aed7b', 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: '768308d374e999da7b5cd93950b7e2fdf421eb94', name: "trigger" })), this._isOpen && (h("div", { key: '2f72e8c3919a5d2faa5666d3e0ad275b9cd73531', 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: '47ca91a0421510ac7fcb089f9c1b70c1130a9afc', name: "content" })))));
+            }, role: "menu" }, h("slot", { key: '831aeda65b6649382a915c2331c588ec11cb8500', 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: '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' }))));
+        return (h(Host, { key: '041b282d798f5eb9c79bca05058680187068e64a', "data-state": this._isOpen ? 'open' : 'closed' }, h("span", { key: '1d6e9fadfb4ef2ccfc5ec2ac1ba29cc9940c1f23', part: "trigger", class: "dropdown-menu-trigger", "aria-haspopup": "menu", "aria-expanded": this._isOpen ? 'true' : 'false' }, h("slot", { key: '14ffb1dae82ed4f10583e73306212d3089f07d06' }))));
     }
     static get is() { return "seki-dropdown-menu-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { composedContains, getDeepActiveElement } from "../../utils/menu-navigation";
+import { OverlayLayer } from "../../utils/overlay";
 /**
  * Dropdown Menu component - context menu with items
  *
@@ -33,6 +34,19 @@ export class SekiDropdownMenu {
          * Internal open state
          */
         this._isOpen = false;
+        /**
+         * Place on the overlay stack (utils/overlay.ts): Escape reaches this
+         * component only when nothing is open on top of it, so one key press closes
+         * one layer (#332).
+         */
+        this.layer = new OverlayLayer({
+            onEscape: (event) => {
+                if (this._isOpen) {
+                    event.preventDefault();
+                    this.closeMenu();
+                }
+            },
+        });
     }
     componentWillLoad() {
         this._isOpen = this.open || this.defaultOpen;
@@ -96,12 +110,6 @@ export class SekiDropdownMenu {
         this.sekiSelect.emit(event.detail);
         this.closeMenu();
     }
-    handleKeyDown(event) {
-        if (this._isOpen && event.key === 'Escape') {
-            event.preventDefault();
-            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
@@ -171,11 +179,15 @@ export class SekiDropdownMenu {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.el._dropdownMenuContext = this.getContext();
     }
+    componentDidRender() {
+        this.layer.setActive(this._isOpen);
+    }
     disconnectedCallback() {
         this.removeClickOutside();
+        this.layer.setActive(false);
     }
     render() {
-        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' }))));
+        return (h(Host, { key: '6ff61abf4391bf30cbda771351eec17c6e4849bc', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'a27b1fe18d83d7a34bed20c4fda6c3e0de6f25e2', part: "dropdown-menu", class: "dropdown-menu" }, h("slot", { key: '30eb41187d2deaec7c6b4d92d83d94ce3c0f4fd2' }))));
     }
     static get is() { return "seki-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -401,12 +413,6 @@ export class SekiDropdownMenu {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKeyDown",
-                "target": "window",
-                "capture": false,
-                "passive": false
             }];
     }
 }

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: '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" })))));
+        return (h(Host, { key: '07f038897ee4345d206bd0deb8f326234ef9cc64' }, h("div", { key: '1d75a0d827397e224d0b7073d8d493b90052590e', class: "seki-empty", part: "empty", role: "status" }, h("div", { key: '56595ea15ac9bdd74b3ccda1d42806f5d04a3cde', class: "seki-empty__icon", part: "icon" }, h("slot", { key: '03a1d210eecfdd557f5e0ac74cc4333eca30b2a0', name: "icon" })), this.heading && (h("h3", { key: 'c70151a2161b3eb5a6ab993bb3cee03b75782e26', class: "seki-empty__title", part: "title" }, this.heading)), this.description && (h("p", { key: 'a2d8606f7ab4a9a4ef1e269e8f5cec57015f79c0', class: "seki-empty__description", part: "description" }, this.description)), h("div", { key: '87111b111a8c4e463c05e62bb70faf0509e7a2e8', class: "seki-empty__content", part: "content" }, h("slot", { key: 'f5fece88ee5dbf9fde843f797598beb51bed117a' })), h("div", { key: '627258fd12d161ec6df3278ae4a63ef5f201ecf7', class: "seki-empty__action", part: "action" }, h("slot", { key: 'a07c81e608e9dfa486c95b93b8d8c84f650dcf38', name: "action" })))));
     }
     static get is() { return "seki-empty"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { FieldDescriptionBinding } from "../../utils/field-description";
 export class SekiField {
     constructor() {
         /**
@@ -14,6 +15,23 @@ export class SekiField {
          */
         this.invalid = false;
     }
+    onInvalidChange() {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync();
+    }
+    connectedCallback() {
+        this.binding = new FieldDescriptionBinding(this.el, () => this.invalid);
+    }
+    componentDidLoad() {
+        var _a, _b;
+        // Link the description and error text to the control (#358).
+        (_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();
+    }
     /**
      * Check if multiple interactive controls are present in the default slot
      * If true, apply role="group" for accessibility
@@ -32,7 +50,7 @@ export class SekiField {
     }
     render() {
         const hasMultiple = this.hasMultipleControls();
-        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" })))));
+        return (h(Host, { key: '444ca86afa6f79554b28259910c41b31fe66426b', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: '952774c5752cd941b56fbf006133f7df4fba822a', class: "field" }, h("div", { key: '95dbbd3248ab7e2b866dd75b951fdcfa8cb1d77c', class: "field-label" }, h("slot", { key: 'efc5a0fcf0ea04812a104c007ca62d6dd794683a', name: "label" })), h("div", { key: '78579f8fac8e3b7964aa91a49682bb653d9199c8', class: "field-control" }, h("slot", { key: 'fd2333f7c09b98d9119ae9cb66a6619847ca026b', onSlotchange: () => { var _a; return (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync(); } })), h("div", { key: '17402cd9252added366d05b9e4eb51fad4098d88', class: "field-description" }, h("slot", { key: 'f7decd19103900466d38eaf90b53f79b23a4fc2a', name: "description", onSlotchange: () => { var _a; return (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync(); } })), h("div", { key: '5e5c67b6ce1ccb9772c07f907d5ed7354deda22a', class: "field-error" }, h("slot", { key: 'ed5793a5c2a2c950ec009e5cda75d0a2826fbde1', name: "error", onSlotchange: () => { var _a; return (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync(); } })))));
     }
     static get is() { return "seki-field"; }
     static get encapsulation() { return "shadow"; }
@@ -91,4 +109,10 @@ export class SekiField {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "invalid",
+                "methodName": "onInvalidChange"
+            }];
+    }
 }