@sekiui/elements 0.1.4 → 0.1.5

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,5 +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
  *
@@ -48,12 +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.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();
         };
@@ -169,10 +193,18 @@ export class SekiDrawerContent {
      */
     syncOpenState() {
         var _a, _b;
-        // No seki-drawer parent: stay open (standalone use).
-        if (!this.drawerConsumer.parent)
-            return;
-        this._isOpen = (_b = (_a = this.drawerConsumer.context) === null || _a === void 0 ? void 0 : _a.isOpen) !== null && _b !== void 0 ? _b : false;
+        // 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
@@ -236,16 +268,18 @@ export class SekiDrawerContent {
     }
     disconnectedCallback() {
         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"; }
@@ -405,7 +439,9 @@ export class SekiDrawerContent {
             "isDragging": {},
             "dragOffset": {},
             "openPercent": {},
-            "_isOpen": {}
+            "_isOpen": {},
+            "_label": {},
+            "_description": {}
         };
     }
     static get events() {

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

@@ -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: '8e9c6c60ed2747b2e04f9057031fb98e98e39554', 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: '8366502b9a1aa0404dfbabaaeedbb4d6b5c52080' }), this._isOpen && (h("div", { key: '693cb80fc7442b8eb3083dbc13704cd6a8b87685', 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"; }
@@ -377,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"
+            }];
+    }
 }

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: '576382295b9ed414e1039bdc342ffee29b2d5531', id: this.componentId, class: "description" }, h("slot", { key: 'a5b79dba0790e1b69738889d61a48b44dacc5149' })));
+        return (h("div", { key: '1d0ae69c4ef0d62e3a8c838baae3def3c5b40241', id: this.componentId, class: "description" }, h("slot", { key: 'b1dedec7a7691d0c6de1334cfe8edbcea50a5e70' })));
     }
     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: '44e891a1d8e637906933ece17fee66dec2ffb613', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '741fe900c84f9fa797ae58e7e8e6c58532fa0495' })));
+        return (h("div", { key: '2b32f6a3fcf0f40c656217eb66d91136e59b26dd', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '679c15ed40b2b09267c85d354db5d129d295ba29' })));
     }
     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: 'bcf7e18784e4f315bc6b4574ef639c154dcc8a24', class: "field-group", style: style }, h("slot", { key: '501913c4d4aa7f6e19f86d593279e439beb4e811' })));
+        return (h("div", { key: 'edf85ce8fd761153d58e9ff90149242ceac4882b', class: "field-group", style: style }, h("slot", { key: '6198f3a3e815c2c5288f4ccec11604e9f227aced' })));
     }
     static get is() { return "seki-field-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,7 +30,7 @@ export class SekiFieldLabel {
         (_a = this.binding) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        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" }, " *")));
+        return (h("label", { key: 'e61bee3d97e492d88d45b6c46e2dc2ee1d0c21f7' }, h("slot", { key: '78ce2f61a8e49bbee2eee4aae0d973ba12090bdb', onSlotchange: () => { var _a; return (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync(); } }), this.required && h("span", { key: '4afad8c8a9912bac396bad34f850d83be20f6786', class: "required-indicator" }, " *")));
     }
     static get is() { return "seki-field-label"; }
     static get encapsulation() { return "shadow"; }

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: 'c14c84629f3c727c7ad791b12eee95dc858a0755' }, h("slot", { key: 'd60f085ed640d10ab60540203c4fedee245c3d7d' })));
+        return (h("legend", { key: '8d11800c3ff3408e103f13ccb617911b28855855' }, h("slot", { key: '97e7d4e70a738092f708716cf5c9c38ea6155f9f' })));
     }
     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: 'a8dbcc839ed3bd9f0ab171ab7e144259e0e21bb6', disabled: this.disabled, class: "fieldset" }, h("slot", { key: '0ecb3a16e59e70f0c2ac7d8bcfaa43da1709c8ea', name: "legend" }), h("div", { key: '9cd636d991d0f984f0262cb9c9fcfc4c11319698', class: "fieldset-content" }, h("slot", { key: '658de18e7c5f1a19b422be729091c57f475888eb' }))));
+        return (h("fieldset", { key: '585d494005fbe79e54a5a7823a0904ca396d4910', disabled: this.disabled, class: "fieldset" }, h("slot", { key: '54f8949c4e082781d6cf9ff34c745cedb34269a2', name: "legend" }), h("div", { key: '310ef349628daaa64feecf4e366e522bc0d252a0', class: "fieldset-content" }, h("slot", { key: '65f973f69f1aabf76d956c143845887cca330d03' }))));
     }
     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: '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' }))));
+        return (h(Host, { key: '32dae264e134487c7a81bcbc4cf2c4e02fbd2c3c' }, h("span", { key: 'b46dda7c7a42086d4f0abd1dced54b4160c55a21', 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: '0d7667574dbb5aebe2bd824b5e68c79e477c9ad1' }))));
     }
     static get is() { return "seki-hover-card-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { OverlayLayer } from "../../utils/overlay";
 /**
  * Hover Card Container Component
  *
@@ -123,6 +124,19 @@ export class SekiHoverCard {
                 this.closeTimer = null;
             }
         };
+        /**
+         * 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.closeAndFocusTrigger();
+                }
+            },
+        });
     }
     componentWillLoad() {
         // `disabled` wins over a requested initial open state.
@@ -257,12 +271,8 @@ export class SekiHoverCard {
     handleCancelClose() {
         this.cancelClose();
     }
-    // Listen for Escape key to close the hover card
-    handleKeyDown(event) {
-        if (this._isOpen && event.key === 'Escape') {
-            event.preventDefault();
-            this.closeAndFocusTrigger();
-        }
+    componentDidRender() {
+        this.layer.setActive(this._isOpen);
     }
     componentDidLoad() {
         this.updateContext();
@@ -276,9 +286,10 @@ export class SekiHoverCard {
         this.cancelClose();
         // Clean up scroll listener
         this.removeScrollListener();
+        this.layer.setActive(false);
     }
     render() {
-        return (h(Host, { key: '963edd7c2f5b74e79ae6046a7d99e3e541307382', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '119ed497c413b30042e2fda8a4eb3e4a7938b55b', class: "hover-card" }, h("slot", { key: '8b27c6f348da84239f3fe8b14d90e532d81dafa8' }))));
+        return (h(Host, { key: '2c9f5dd4788bc39af9881cc5a4d4f4e400347e10', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '0f8f5ed75e8049fd30df5a312e474cbf40d44e69', class: "hover-card" }, h("slot", { key: 'c5d4bf92063b24e49679e49837d11cc96a969f2f' }))));
     }
     static get is() { return "seki-hover-card"; }
     static get encapsulation() { return "shadow"; }
@@ -565,12 +576,6 @@ export class SekiHoverCard {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKeyDown",
-                "target": "window",
-                "capture": false,
-                "passive": false
             }];
     }
 }

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

@@ -103,7 +103,7 @@ export class SekiInput {
         (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
     }
     render() {
-        return (h("input", { key: 'c80ba362f1672729688d2faa5aad3c24ea5680fe', ref: el => (this.inputEl = el), type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
+        return (h("input", { key: 'cc8d5fddec8d4164b4fab439779087133ec81f83', ref: el => (this.inputEl = el), type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid || this.ariaInvalid === 'true' ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-description": this.ariaDescription, "aria-invalid": this.invalid || this.ariaInvalid === 'true' ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
     }
     static get is() { return "seki-input"; }
     static get encapsulation() { return "shadow"; }
@@ -468,6 +468,44 @@ export class SekiInput {
                 "setter": false,
                 "reflect": false,
                 "attribute": "aria-describedby"
+            },
+            "ariaDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that describes this control. Set by `seki-field` from its description\n(and error) slot, because an `aria-describedby` id cannot cross the shadow\nboundary to the inner element (#358)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-description"
+            },
+            "ariaInvalid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the control invalid for assistive technology. Set by `seki-field` (#358)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-invalid"
             }
         };
     }