@sekiui/elements 0.1.4 → 0.1.5

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * seki-combobox-empty: Display empty/loading/error states for combobox dropdown
  *
@@ -26,8 +27,44 @@ export class SekiComboboxEmpty {
          * @default 'no-results'
          */
         this.reason = 'no-results';
+        /** Whether the current combobox state calls for this message. */
+        this.shouldShow = true;
+        // Driven by the combobox's published state (like seki-command-empty) so the
+        // message tracks the live results, in the lazy build too (#331).
+        this.comboboxConsumer = new ContextConsumer('seki-combobox', 'comboboxContext', () => this.sync());
+    }
+    connectedCallback() {
+        this.comboboxConsumer.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.comboboxConsumer.disconnect();
+    }
+    sync() {
+        const ctx = this.comboboxConsumer.context;
+        // Outside a combobox there is nothing to react to: stay visible.
+        if (!ctx) {
+            this.shouldShow = true;
+            return;
+        }
+        switch (this.reason) {
+            case 'loading':
+                this.shouldShow = ctx.loading;
+                break;
+            case 'no-input':
+                this.shouldShow = !ctx.loading && ctx.searchQuery.trim() === '';
+                break;
+            case 'error':
+                // The combobox has no error state; the consumer mounts this on error.
+                this.shouldShow = true;
+                break;
+            default:
+                this.shouldShow = !ctx.loading && ctx.getFilteredItems().length === 0;
+        }
     }
     render() {
+        if (!this.shouldShow) {
+            return h(Host, { style: { display: 'none' } });
+        }
         const containerClasses = {
             'seki-combobox-empty': true,
             [`seki-combobox-empty--${this.reason}`]: true,
@@ -36,7 +73,7 @@ export class SekiComboboxEmpty {
             .filter(([, active]) => active)
             .map(([name]) => name)
             .join(' ');
-        return (h(Host, { key: '566e2263c75599621b7b5558f175af1f88399337' }, h("div", { key: '6fc3062a0d268b8f8d244d79fdc1f1cf223e38e7', class: classString, role: "status" }, this.renderSlotForReason(), h("slot", { key: '657fb14465fddad9b0155b81404d8b1ddfd5e483' }))));
+        return (h(Host, null, h("div", { class: classString, role: "status" }, this.renderSlotForReason(), h("slot", null))));
     }
     /**
      * Renders the appropriate named slot based on the current reason
@@ -100,5 +137,10 @@ export class SekiComboboxEmpty {
             }
         };
     }
+    static get states() {
+        return {
+            "shouldShow": {}
+        };
+    }
     static get elementRef() { return "el"; }
 }

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

@@ -1,13 +1,38 @@
 import { Host, h } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * @slot - Group items
  */
 export class SekiComboboxGroup {
     constructor() {
+        /** Show even when every item in the group is filtered out */
+        this.forceMount = false;
+        /** False once the search filters out every item in this group. */
+        this.hasVisibleItems = true;
+        this.comboboxConsumer = new ContextConsumer('seki-combobox', 'comboboxContext', () => this.updateVisibility());
         this.groupId = `combobox-group-${Math.random().toString(36).substr(2, 9)}`;
     }
+    connectedCallback() {
+        this.comboboxConsumer.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.comboboxConsumer.disconnect();
+    }
+    updateVisibility() {
+        const ctx = this.comboboxConsumer.context;
+        if (!ctx || !ctx.searchQuery.trim()) {
+            this.hasVisibleItems = true;
+            return;
+        }
+        const matching = new Set(ctx.getFilteredItems().map(item => item.value));
+        const items = Array.from(this.el.querySelectorAll('seki-combobox-item'));
+        this.hasVisibleItems = items.some(item => { var _a, _b; return matching.has((_b = (_a = item.value) !== null && _a !== void 0 ? _a : item.getAttribute('value')) !== null && _b !== void 0 ? _b : ''); });
+    }
     render() {
-        return (h(Host, { key: 'fd5f5cdc19d8510ac4735d7df9cf28426d6a6849' }, h("div", { key: 'cdcbde78ef984210227c8313069d0ea71b40d68b', class: "combobox-group", role: "group", "aria-labelledby": this.groupId }, h("div", { key: '4c8f983792f67824392b2a00bdee59a003532903', id: this.groupId, class: "combobox-group-label" }, this.label), h("div", { key: 'b7bb79d7bc54dd0906282786ba4937a9499e45e9', class: "combobox-group-items" }, h("slot", { key: '2469eb0a661193b3dee8e0901caffe1f9b8e4b73' })))));
+        if (!this.forceMount && !this.hasVisibleItems) {
+            return h(Host, { style: { display: 'none' } });
+        }
+        return (h(Host, null, h("div", { class: "combobox-group", role: "group", "aria-labelledby": this.groupId }, h("div", { id: this.groupId, class: "combobox-group-label" }, this.label), h("div", { class: "combobox-group-items" }, h("slot", null)))));
     }
     static get is() { return "seki-combobox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -41,8 +66,33 @@ export class SekiComboboxGroup {
                 "setter": false,
                 "reflect": false,
                 "attribute": "label"
+            },
+            "forceMount": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show even when every item in the group is filtered out"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "force-mount",
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "hasVisibleItems": {}
+        };
+    }
     static get elementRef() { return "el"; }
 }

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { subscribeToContextChange } from "../../utils/context-bridge";
+import { ContextConsumer } from "../../utils/context-bridge";
 export class SekiComboboxInput {
     constructor() {
         this.searchQuery = '';
@@ -12,51 +12,28 @@ export class SekiComboboxInput {
         this.listboxId = '';
         this.inputId = '';
         this.focusedItemValue = null;
-        this.contextSubscription = { parent: null, unsubscribe: () => { } };
         /**
-         * Re-sync local state whenever the parent's context changes post-mount —
-         * slotted children don't re-render with the parent, so without this the
-         * chips, aria-expanded, and aria-activedescendant freeze at mount values
-         * (#258). The @State assignments in updateState() drive the structural
-         * re-render (chips) — the same shape as seki-select-trigger's working
-         * forceUpdate counter — while the ARIA attributes the accessibility tree
-         * depends on are additionally applied imperatively, since a render()
-         * re-invoke from a closest()-based listener has proven unreliable for some
-         * components in this codebase (#244).
+         * True while the user is typing a query. In single-select mode the input
+         * shows the selected item's label otherwise, so clearing the text does not
+         * snap the label back mid-edit (shadcn/Radix comboboxes behave the same).
          */
-        this.handleParentContextChange = () => {
-            var _a;
-            this.updateState();
-            const ctx = this.getContext();
-            const input = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
-            if (!ctx || !input)
-                return;
-            input.setAttribute('aria-expanded', ctx.open ? 'true' : 'false');
-            if (ctx.focusedItemValue) {
-                input.setAttribute('aria-activedescendant', `combobox-item-${ctx.focusedItemValue}`);
-            }
-            else {
-                input.removeAttribute('aria-activedescendant');
-            }
-            if (ctx.disabled) {
-                input.setAttribute('disabled', '');
-            }
-            else {
-                input.removeAttribute('disabled');
-            }
-            if (input.value !== ctx.searchQuery) {
-                input.value = ctx.searchQuery;
-            }
-        };
+        this.editing = false;
+        this.comboboxConsumer = new ContextConsumer('seki-combobox', 'comboboxContext', () => this.handleParentContextChange());
         this.handleInput = (event) => {
             const input = event.target;
+            this.editing = true;
             this.searchQuery = input.value;
             const ctx = this.getContext();
             if (ctx) {
                 ctx.onSearchChange(input.value);
             }
         };
-        this.handleFocus = () => {
+        this.handleFocus = (event) => {
+            // Select the shown label so typing replaces it instead of appending.
+            const input = event.target;
+            if (!this.editing && input.value && input.value === this.displayValue && !this.searchQuery) {
+                input.select();
+            }
             const ctx = this.getContext();
             if (ctx && !this.disabled) {
                 ctx.onOpenChange(true);
@@ -90,6 +67,11 @@ export class SekiComboboxInput {
                     break;
                 case 'Escape':
                     event.preventDefault();
+                    // While open, Escape belongs to the combobox: don't let it also close
+                    // an ancestor overlay (dialog/popover/sheet listen on window).
+                    if (this.isOpen)
+                        event.stopPropagation();
+                    this.editing = false;
                     ctx.onOpenChange(false);
                     this.searchQuery = '';
                     ctx.onSearchChange('');
@@ -126,13 +108,53 @@ export class SekiComboboxInput {
         const combobox = this.el.closest('seki-combobox');
         return (combobox === null || combobox === void 0 ? void 0 : combobox.comboboxContext) || null;
     }
+    connectedCallback() {
+        this.comboboxConsumer.connect(this.el);
+    }
     componentDidLoad() {
         this.updateState();
-        this.contextSubscription = subscribeToContextChange(this.el, 'seki-combobox', this.handleParentContextChange);
+    }
+    /** What the text box shows: the typed query, else the selected label (single mode). */
+    get displayValue() {
+        if (!this.multiple && !this.editing && !this.searchQuery && this.selectedItems.length > 0) {
+            return this.selectedItems[0].label;
+        }
+        return this.searchQuery;
+    }
+    /**
+     * Re-sync local state whenever the parent's context changes post-mount —
+     * slotted children don't re-render with the parent, so without this the
+     * chips, aria-expanded, and aria-activedescendant freeze at mount values
+     * (#258). The @State assignments in updateState() drive the structural
+     * re-render (chips) — the same shape as seki-select-trigger's working
+     * forceUpdate counter — while the ARIA attributes the accessibility tree
+     * depends on are additionally applied imperatively, since a render()
+     * re-invoke from a closest()-based listener has proven unreliable for some
+     * components in this codebase (#244).
+     */
+    handleParentContextChange() {
+        var _a;
+        this.updateState();
+        const ctx = this.getContext();
+        const input = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+        if (!ctx || !input)
+            return;
+        input.setAttribute('aria-expanded', ctx.open ? 'true' : 'false');
+        if (ctx.disabled) {
+            input.setAttribute('disabled', '');
+        }
+        else {
+            input.removeAttribute('disabled');
+        }
+        if (input.value !== this.displayValue) {
+            input.value = this.displayValue;
+        }
     }
     updateState() {
         const ctx = this.getContext();
         if (ctx) {
+            if (!ctx.open)
+                this.editing = false;
             this.searchQuery = ctx.searchQuery;
             this.isOpen = ctx.open;
             this.selectedItems = ctx.getSelectedItems();
@@ -185,13 +207,13 @@ export class SekiComboboxInput {
         }
     }
     disconnectedCallback() {
-        this.contextSubscription.unsubscribe();
+        this.comboboxConsumer.disconnect();
     }
     render() {
-        const focusedItemId = this.focusedItemValue
-            ? `combobox-item-${this.focusedItemValue}`
-            : undefined;
-        return (h(Host, { key: 'c32b343830db117ab9022ab6bc3a7eb2a12a81d8' }, h("div", { key: '48dbfaf1d49550b80d6ac5da593a36df7d9b6c9a', class: "combobox-input-wrapper" }, this.renderSelectedDisplay(), h("input", { key: 'b95c67eb94146b7eda94d705863e809c7e6f4803', id: this.inputId, type: "text", class: "combobox-input", value: this.searchQuery, placeholder: this.selectedItems.length > 0 && this.multiple ? '' : this.placeholder, disabled: this.disabled, "aria-autocomplete": "list", "aria-controls": this.listboxId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-activedescendant": focusedItemId, onInput: this.handleInput, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }))));
+        // aria-activedescendant is intentionally not set: the options live in other
+        // components' shadow roots, so an IDREF from this input cannot resolve
+        // (same reason seki-select dropped it, #292/#299).
+        return (h(Host, { key: '65889d8eaf19d7d39560f45f95e90af52549989c' }, h("div", { key: '757b5703116dfdccee2f397b0bfd55d35df6cb66', class: "combobox-input-wrapper" }, this.renderSelectedDisplay(), h("input", { key: '872629473e220d81140644397a91c3de6e384824', id: this.inputId, type: "text", class: "combobox-input", value: this.displayValue, placeholder: this.selectedItems.length > 0 && this.multiple ? '' : this.placeholder, disabled: this.disabled, "aria-autocomplete": "list", "aria-controls": this.listboxId, "aria-expanded": this.isOpen ? 'true' : 'false', onInput: this.handleInput, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown }))));
     }
     static get is() { return "seki-combobox-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/combobox-item/seki-combobox-item.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { subscribeToContextChange } from "../../utils/context-bridge";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * @slot - Item label content
  */
@@ -9,32 +9,14 @@ export class SekiComboboxItem {
         this.disabled = false;
         this.isSelected = false;
         this.isFocused = false;
+        /** False while the parent's search filters this item out. */
+        this.isVisible = true;
         this.itemId = `combobox-item-${Math.random().toString(36).substr(2, 9)}`;
         this.hasRegistered = false;
-        this.contextSubscription = { parent: null, unsubscribe: () => { } };
-        /**
-         * Refresh selected/focused visuals whenever the parent's state changes
-         * post-mount. Applied imperatively to the shadow DOM rather than through a
-         * Stencil @State bump + render() — a component that reads a parent's state
-         * via closest() + an addEventListener callback and relies on render()
-         * re-invoking to reflect it is a confirmed-unreliable shape in this
-         * codebase (#244). The check icon is always rendered with its visibility
-         * toggled by the `selected` class in CSS for the same reason.
-         */
-        this.handleParentContextChange = () => {
-            var _a;
-            const ctx = this.getContext();
-            if (!ctx)
-                return;
-            const itemEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.combobox-item');
-            if (!itemEl)
-                return;
-            this.isSelected = ctx.isValueSelected(this.value);
-            this.isFocused = ctx.focusedItemValue === this.value;
-            itemEl.setAttribute('aria-selected', this.isSelected ? 'true' : 'false');
-            itemEl.classList.toggle('selected', this.isSelected);
-            itemEl.classList.toggle('focused', this.isFocused);
-        };
+        // Reads filtering from the parent's context (not by the parent calling
+        // methods on this element, which do not exist on the host in the lazy
+        // build, #323/#331), so an item added after mount is filtered right away.
+        this.comboboxConsumer = new ContextConsumer('seki-combobox', 'comboboxContext', () => this.handleParentContextChange());
         this.handleClick = () => {
             if (this.disabled)
                 return;
@@ -61,9 +43,9 @@ export class SekiComboboxItem {
     }
     componentDidLoad() {
         this.updateState();
-        this.contextSubscription = subscribeToContextChange(this.el, 'seki-combobox', this.handleParentContextChange);
     }
     connectedCallback() {
+        this.comboboxConsumer.connect(this.el);
         // Re-register on reconnect (after a DOM move). componentWillLoad fires only
         // once; parent registration is idempotent so this never duplicates.
         if (this.hasRegistered) {
@@ -75,7 +57,36 @@ export class SekiComboboxItem {
         if (ctx) {
             ctx.unregisterItem(this.value);
         }
-        this.contextSubscription.unsubscribe();
+        this.comboboxConsumer.disconnect();
+    }
+    /**
+     * Refresh selected/focused visuals whenever the parent's state changes
+     * post-mount. Applied imperatively to the shadow DOM rather than through a
+     * Stencil @State bump + render() — a component that reads a parent's state
+     * via closest() + an addEventListener callback and relies on render()
+     * re-invoking to reflect it is a confirmed-unreliable shape in this
+     * codebase (#244). The check icon is always rendered with its visibility
+     * toggled by the `selected` class in CSS for the same reason.
+     */
+    handleParentContextChange() {
+        var _a;
+        const ctx = this.getContext();
+        if (!ctx)
+            return;
+        this.isVisible = this.matchesFilter(ctx);
+        const itemEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.combobox-item');
+        if (!itemEl)
+            return;
+        this.isSelected = ctx.isValueSelected(this.value);
+        this.isFocused = ctx.focusedItemValue === this.value;
+        itemEl.setAttribute('aria-selected', this.isSelected ? 'true' : 'false');
+        itemEl.classList.toggle('selected', this.isSelected);
+        itemEl.classList.toggle('focused', this.isFocused);
+    }
+    matchesFilter(ctx) {
+        if (!ctx.searchQuery.trim())
+            return true;
+        return ctx.getFilteredItems().some(item => item.value === this.value);
     }
     handlePropsChange() {
         this.registerWithContext();
@@ -102,12 +113,12 @@ export class SekiComboboxItem {
         }
     }
     render() {
-        return (h(Host, { key: '4ee1ea3588c790bca71e6d11772a251cf953d575' }, h("div", { key: '0eb501a0db8419bc6e7385420d94ec221376530f', id: this.itemId, class: {
+        return (h(Host, { key: '876c3ed4ade9288c79376ffd9ae20498731b5a19', style: this.isVisible ? undefined : { display: 'none' } }, h("div", { key: 'ed32e7bb944974453a52dd0de0cab1595e9b684a', id: this.itemId, class: {
                 'combobox-item': true,
                 'selected': this.isSelected,
                 'focused': this.isFocused,
                 'disabled': this.disabled,
-            }, role: "option", "aria-selected": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter }, h("slot", { key: '96a0fd2a9b163575471b90b4905b8dfd16f20e44' }), h("svg", { key: 'b865e02030f517c3d6b557b3a35a37c30d92ff61', class: "check-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true" }, h("polyline", { key: '5b3126475b060889596cd10507b21d5aa75dec4b', points: "20 6 9 17 4 12" })))));
+            }, role: "option", "aria-selected": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter }, h("slot", { key: 'f52d1efb3675f20f60d6bb6e33f8c3f7bc154ca3' }), h("svg", { key: 'a7b68a1ab8d38fb3046ecaaa6b2cac7d9773bc69', class: "check-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true" }, h("polyline", { key: '8d23df17fe3b5d046fc77702e7f3ab1e698d0435', points: "20 6 9 17 4 12" })))));
     }
     static get is() { return "seki-combobox-item"; }
     static get encapsulation() { return "shadow"; }
@@ -167,7 +178,8 @@ export class SekiComboboxItem {
     static get states() {
         return {
             "isSelected": {},
-            "isFocused": {}
+            "isFocused": {},
+            "isVisible": {}
         };
     }
     static get elementRef() { return "el"; }

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

@@ -60,7 +60,7 @@ export class SekiCommandInput {
     }
     render() {
         const value = this._value;
-        return (h(Host, { key: 'b12d460fd004bb51fffe1736e1cf508a38174bc2' }, h("div", { key: '6f7dfca8a574b79c28b747d8a256507cffbd03ac', part: "input-wrapper", class: "command-input-wrapper" }, h("svg", { key: 'a7a04d003ce6ff04abfe0db3ccddd1d15b1891dc', part: "icon", class: "command-input-icon", 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("circle", { key: 'df534fd0e6f6472ab8b3a09adae7cf15d3be6724', cx: "11", cy: "11", r: "8" }), h("path", { key: '60b0ef61ea3dd7f64446a13173ecd171afb02f4c', d: "m21 21-4.3-4.3" })), h("input", { key: '1aa9388b9aae712482eabbc0aa8b6832af954782', ref: (el) => (this.inputRef = el), part: "input", type: "text", class: "command-input", placeholder: this.placeholder, value: value, role: "combobox", "aria-expanded": "true", "aria-controls": "command-list", "aria-autocomplete": "list", onInput: this.handleInput, onKeyDown: this.handleKeyDown }))));
+        return (h(Host, { key: 'eaed90389c92ec4a2fa7f60aa248448d97e9f338' }, h("div", { key: '0e54023a29a9537800eda2bd212adc206a512a92', part: "input-wrapper", class: "command-input-wrapper" }, h("svg", { key: '9a3b18e1cccf7912396475c8dcd8f552db180358', part: "icon", class: "command-input-icon", 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("circle", { key: '8b6c2443a64af3ca6d7a96152f06dc782c0ead3c', cx: "11", cy: "11", r: "8" }), h("path", { key: '1b5eb27f881aa64fa1db2415cdbc084e15de98e8', d: "m21 21-4.3-4.3" })), h("input", { key: '5e671837542c747e0bb24bc257427a95b573e932', ref: (el) => (this.inputRef = el), part: "input", type: "text", class: "command-input", placeholder: this.placeholder, value: value, role: "combobox", "aria-expanded": "true", "aria-controls": "command-list", "aria-autocomplete": "list", onInput: this.handleInput, onKeyDown: this.handleKeyDown }))));
     }
     static get is() { return "seki-command-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/command/seki-command-list.js

@@ -8,7 +8,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiCommandList {
     render() {
-        return (h(Host, { key: '0dd7fcd6cdfe1838518b67883ed44e754c25057b' }, h("div", { key: '246f9d3c04d0e19297e0de8276576fc2ef3b799c', part: "list", role: "listbox", class: "command-list" }, h("slot", { key: 'ea9c8b0680e8c9a7a13560b4c00fc6d8428fd3df' }))));
+        return (h(Host, { key: '292b7c7bb59dfe3936168c8c8a16db64cfa724d0' }, h("div", { key: '11cf25240d8708959eebc774ee1cf8b11c8db6be', part: "list", role: "listbox", class: "command-list" }, h("slot", { key: 'ad145cf40c56deca70a2ed2d6e213bf294444fda' }))));
     }
     static get is() { return "seki-command-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/command/seki-command-separator.js

@@ -6,7 +6,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiCommandSeparator {
     render() {
-        return (h(Host, { key: 'de5946e6f4f370a50a35acdb785e0b94e30ccaae' }, h("div", { key: '3ce9e5a654e110f8e7bec6b5b058f8a8688e41c0', part: "separator", role: "separator", class: "command-separator" })));
+        return (h(Host, { key: '4a32f7e1ad9a8d159257742a73ae1c55b7f16c30' }, h("div", { key: '164ada9cec84397e7fedcca5967ff945a253a5df', part: "separator", role: "separator", class: "command-separator" })));
     }
     static get is() { return "seki-command-separator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -184,7 +184,7 @@ export class SekiCommand {
         publishContext(this.el, '_commandContext', this.getContext(), this.commandContextChange);
     }
     render() {
-        return (h(Host, { key: '7f80dd8be39e51feac86933c35ddf845b99b76ef' }, h("div", { key: 'cbc2a0040641591e9036e863ec45d9b11c9c2a42', part: "command", class: "command" }, h("slot", { key: 'abf6c4cdb4ee49b69997de1618c9ce96df753633' }))));
+        return (h(Host, { key: 'dcc26f27f62734cf346ed59ac9d6c7cdd7a271de' }, h("div", { key: '39977b01a9f1908ca3dc156d958b4a237da54dc8', part: "command", class: "command" }, h("slot", { key: 'af15a5d125e224c752ab20c4a54c986be2f673b6' }))));
     }
     static get is() { return "seki-command"; }
     static get encapsulation() { return "shadow"; }

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

@@ -77,7 +77,7 @@ export class SekiContextMenuTrigger {
         this.cancelLongPress();
     }
     render() {
-        return (h(Host, { key: 'd15079dc6048db3b250d49b9a4805a9277d587fd', onContextMenu: this.handleContextMenu, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, onTouchCancel: this.handleTouchEnd }, h("slot", { key: '56b4c1128093d7fccf4c5463195c1ea3cd4eefe0' })));
+        return (h(Host, { key: '3105e26b352f1c544a67e35f723dcc180a14da69', onContextMenu: this.handleContextMenu, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, onTouchCancel: this.handleTouchEnd }, h("slot", { key: 'cadea7d9c1769b9c859099ac51c0b09e20cce43d' })));
     }
     static get is() { return "seki-context-menu-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { composedContains, getDeepActiveElement } from "../../utils/menu-navigation";
+import { OverlayLayer } from "../../utils/overlay";
 /**
  * Context Menu component - right-click context menu with items
  *
@@ -25,6 +26,19 @@ export class SekiContextMenu {
          * Y coordinate for menu position
          */
         this._y = 0;
+        /**
+         * 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;
@@ -88,15 +102,6 @@ export class SekiContextMenu {
         this.sekiSelect.emit(event.detail);
         this.closeMenu();
     }
-    /**
-     * Handle Escape key to close menu
-     */
-    handleKeyDown(event) {
-        if (this._isOpen && event.key === 'Escape') {
-            event.preventDefault();
-            this.closeMenu();
-        }
-    }
     /**
      * Return focus to the element that had it before the menu opened (Radix
      * context menu does not focus the trigger). Skipped when focus already moved
@@ -160,11 +165,15 @@ export class SekiContextMenu {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.el._contextMenuContext = this.getContext();
     }
+    componentDidRender() {
+        this.layer.setActive(this._isOpen);
+    }
     disconnectedCallback() {
         this.removeClickOutside();
+        this.layer.setActive(false);
     }
     render() {
-        return (h(Host, { key: 'ccb4e37bea995adf6cc2cbc688274d182a8f90ec', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '1d11eb89125f7c75f1d3409440cf1516f73a9a01', part: "context-menu", class: "context-menu" }, h("slot", { key: 'd6f08c4aacf8f581a08e1ffd2015471472e98ab3' }))));
+        return (h(Host, { key: '3b5bcf8bddbf856566437a16af2b78d667d6b9aa', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'cfb47dcf5c79696cf6fbe2746e2be3c59d79cb81', part: "context-menu", class: "context-menu" }, h("slot", { key: 'b4f31ddb24fb5ca635f9e1f503c70201a81b1d5a' }))));
     }
     static get is() { return "seki-context-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -314,12 +323,6 @@ export class SekiContextMenu {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKeyDown",
-                "target": "window",
-                "capture": false,
-                "passive": false
             }];
     }
 }