@sekiui/elements 0.1.3 → 0.1.5

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * @slot - Combobox items
  */
@@ -8,32 +9,24 @@ export class SekiComboboxContent {
         this.maxHeight = '15rem';
         this.isOpen = false;
         this.listboxId = '';
+        // Follow the published context, not the host's aria-expanded attribute: the
+        // old MutationObserver only worked because seki-combobox happens to reflect
+        // its open state there, and it was never disconnected (#323).
+        this.comboboxConsumer = new ContextConsumer('seki-combobox', 'comboboxContext', ctx => {
+            if (ctx) {
+                this.isOpen = ctx.open;
+                this.listboxId = ctx.listboxId;
+            }
+        });
     }
-    getContext() {
-        const combobox = this.el.closest('seki-combobox');
-        return (combobox === null || combobox === void 0 ? void 0 : combobox.comboboxContext) || null;
-    }
-    componentDidLoad() {
-        this.updateState();
-        // Set up mutation observer to watch for context changes
-        this.observeParent();
-    }
-    observeParent() {
-        const combobox = this.el.closest('seki-combobox');
-        if (combobox) {
-            const observer = new MutationObserver(() => this.updateState());
-            observer.observe(combobox, { attributes: true, subtree: false });
-        }
+    connectedCallback() {
+        this.comboboxConsumer.connect(this.el);
     }
-    updateState() {
-        const ctx = this.getContext();
-        if (ctx) {
-            this.isOpen = ctx.open;
-            this.listboxId = ctx.listboxId;
-        }
+    disconnectedCallback() {
+        this.comboboxConsumer.disconnect();
     }
     render() {
-        return (h(Host, { key: '9ca02f1ae2ea34a674798ba7ef378a4bfff89f15', class: { 'hidden': !this.isOpen } }, h("div", { key: 'e6c7d6b245e31be15e474458a9037fd237d1d389', id: this.listboxId, class: "combobox-content", role: "listbox", style: { maxHeight: this.maxHeight } }, h("slot", { key: '1fe0843f17b6a75214ff6ca16e5ca79929192025' }))));
+        return (h(Host, { key: 'dadd512de72baac4185c9134a02660e5b3311d39', class: { 'hidden': !this.isOpen } }, h("div", { key: 'ba931cc323906f18f7eb212c0af76f0e18d06464', id: this.listboxId, class: "combobox-content", role: "listbox", style: { maxHeight: this.maxHeight } }, h("slot", { key: '6dfb8a765894b5128fe5dd9e6d50c61e120dd6e8' }))));
     }
     static get is() { return "seki-combobox-content"; }
     static get encapsulation() { return "shadow"; }

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-empty.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Command empty state - shown when no results match
  *
@@ -9,33 +10,16 @@ import { h, Host } from "@stencil/core";
 export class SekiCommandEmpty {
     constructor() {
         this._visible = false;
-        this.handleValueChange = () => {
+        this.commandConsumer = new ContextConsumer('seki-command', '_commandContext', context => {
             var _a;
-            const context = this.getContext();
             this._visible = (_a = context === null || context === void 0 ? void 0 : context.isEmpty) !== null && _a !== void 0 ? _a : false;
-        };
-    }
-    getContext() {
-        const command = this.el.closest('seki-command');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return command ? command._commandContext : null;
+        });
     }
-    componentWillRender() {
-        var _a;
-        const context = this.getContext();
-        this._visible = (_a = context === null || context === void 0 ? void 0 : context.isEmpty) !== null && _a !== void 0 ? _a : false;
-    }
-    componentDidLoad() {
-        const command = this.el.closest('seki-command');
-        if (command) {
-            command.addEventListener('sekiValueChange', this.handleValueChange);
-        }
+    connectedCallback() {
+        this.commandConsumer.connect(this.el);
     }
     disconnectedCallback() {
-        const command = this.el.closest('seki-command');
-        if (command) {
-            command.removeEventListener('sekiValueChange', this.handleValueChange);
-        }
+        this.commandConsumer.disconnect();
     }
     render() {
         if (!this._visible) {

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Command group - groups related items with a heading
  *
@@ -9,10 +10,9 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiCommandGroup {
     constructor() {
-        this.onCommandValueChange = () => {
-            // Small delay to allow items to update first
-            requestAnimationFrame(() => this.updateVisibility());
-        };
+        // Recomputed from the parent's context on every publish, including a
+        // `value` set from outside (which never fired sekiValueChange) (#323).
+        this.commandConsumer = new ContextConsumer('seki-command', '_commandContext', () => this.updateVisibility());
         /**
          * Show even when all items are filtered out
          */
@@ -33,18 +33,16 @@ export class SekiCommandGroup {
      * Update visibility based on child items
      */
     updateVisibility() {
-        const items = this.getItems();
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this._hasVisibleItems = items.some((item) => { var _a, _b; return (_b = (_a = item.isVisible) === null || _a === void 0 ? void 0 : _a.call(item)) !== null && _b !== void 0 ? _b : true; });
+        const context = this.commandConsumer.context;
+        if (!context)
+            return;
+        this._hasVisibleItems = this.getItems().some(item => context.isItemMatch(item));
     }
-    componentDidLoad() {
-        var _a, _b;
-        this.commandEl = (_a = this.el.closest('seki-command')) !== null && _a !== void 0 ? _a : undefined;
-        (_b = this.commandEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiValueChange', this.onCommandValueChange);
+    connectedCallback() {
+        this.commandConsumer.connect(this.el);
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.commandEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiValueChange', this.onCommandValueChange);
+        this.commandConsumer.disconnect();
     }
     render() {
         const shouldShow = this.forceMount || this._hasVisibleItems;

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Command input - search field for filtering items
  *
@@ -12,6 +13,20 @@ export class SekiCommandInput {
          * Placeholder text
          */
         this.placeholder = 'Type a command or search...';
+        /** The parent command's search value, mirrored from its context. */
+        this._value = '';
+        // Follow the parent's value so `<seki-command value="...">` and
+        // `command.value = ...` show up in the field, not just typed input (#323).
+        this.commandConsumer = new ContextConsumer('seki-command', '_commandContext', context => {
+            var _a;
+            const value = (_a = context === null || context === void 0 ? void 0 : context.value) !== null && _a !== void 0 ? _a : '';
+            this._value = value;
+            // Keep the live field in step even when the re-render is skipped because
+            // _value did not change (e.g. the user typed it).
+            if (this.inputRef && this.inputRef.value !== value) {
+                this.inputRef.value = value;
+            }
+        });
         this.handleInput = (event) => {
             const target = event.target;
             this.sekiCommandInputChange.emit(target.value);
@@ -23,10 +38,11 @@ export class SekiCommandInput {
             }
         };
     }
-    getContext() {
-        const command = this.el.closest('seki-command');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return command ? command._commandContext : null;
+    connectedCallback() {
+        this.commandConsumer.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.commandConsumer.disconnect();
     }
     /**
      * Focus the input
@@ -43,10 +59,8 @@ export class SekiCommandInput {
         });
     }
     render() {
-        var _a;
-        const context = this.getContext();
-        const value = (_a = context === null || context === void 0 ? void 0 : context.value) !== null && _a !== void 0 ? _a : '';
-        return (h(Host, { key: '5652d7fbc44c5fc236e73991632631885273144f' }, h("div", { key: 'e1ae542f5aac09fb7d145d2b093c4a7f2905ee3a', part: "input-wrapper", class: "command-input-wrapper" }, h("svg", { key: '63c9c6f7e9285e08b497452caf7e323cac76d7d4', 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: '9d270ed1fe6610db1f2803d5b058fdd846b93cb3', cx: "11", cy: "11", r: "8" }), h("path", { key: '840ca57335907d4a358d97e2da3f3d8393ecaf9e', d: "m21 21-4.3-4.3" })), h("input", { key: 'e79f08cebbd4f59f18a813644b902fa5ac93d966', 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 }))));
+        const value = this._value;
+        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"; }
@@ -84,6 +98,11 @@ export class SekiCommandInput {
             }
         };
     }
+    static get states() {
+        return {
+            "_value": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "sekiCommandInputChange",