@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/collection/components/pf-command-palette/pf-command-palette.js

@@ -0,0 +1,503 @@
+import { getEnabledIndexes, Keys, lockPageScroll, matchesCommandQuery, resolveListMove, } from "@pitchfork-ui/core";
+import { h, Host, } from "@stencil/core";
+/*
+ * `toggleAttribute` does not exist on Stencil's mock DOM -- measured, and
+ * worth knowing how it fails: Stencil's `safeCall` swallows the TypeError, so
+ * the filter silently did nothing and the palette rendered "No results found"
+ * over a full list. Not exported, so this file still has one export.
+ */
+const setHidden = (element, hidden) => {
+    if (hidden)
+        element.setAttribute('hidden', '');
+    else
+        element.removeAttribute('hidden');
+};
+/**
+ * A searchable command list in a modal dialog.
+ *
+ * A native `<dialog>` opened with `showModal()`, like `pf-modal` and
+ * `pf-slideout-menu`: the focus trap, Escape and the backdrop come free, and
+ * the React component's `useFocusTrap` has no equivalent here. Page scroll is
+ * the one part the dialog does not do, so that is core's reference-counted
+ * lock.
+ *
+ * **The active option is set as an element, not an IDREF.** The input lives in
+ * this shadow root and the options are slotted light-DOM children, and
+ * `aria-activedescendant` does not cross a shadow boundary — measured against
+ * Chromium's accessibility tree, where a cross-root IDREF is simply absent
+ * from it. `ariaActiveDescendantElement` does resolve, because the option sits
+ * in an ancestor scope of the input's tree, which is the direction element
+ * reflection allows. (`pf-tooltip` needed the opposite direction — a trigger
+ * referencing something inside a shadow root it does not own — and that one
+ * reads back empty, which is why it copies text into `aria-description`
+ * instead.)
+ *
+ * @slot - `pf-command-item` and `pf-command-group` children.
+ * @part dialog - the native dialog, which is also the backdrop.
+ * @part panel - the floating panel.
+ * @part input - the search input.
+ * @part list - the listbox the items are slotted into.
+ * @part empty - the message shown when nothing matches.
+ */
+export class PfCommandPalette {
+    el;
+    /** Whether the palette is showing. Reflected so the stylesheet selects on it. */
+    open = false;
+    /** Placeholder for the search input. */
+    placeholder = 'Search commands…';
+    /** Shown when the query matches nothing. */
+    emptyMessage = 'No results found.';
+    /** Accessible name for the dialog. */
+    label = 'Command palette';
+    /** Close on Escape or a click on the backdrop. Defaults to true. */
+    dismissable = true;
+    /** Fires whenever the palette opens or closes, whoever caused it. */
+    pfOpenChange;
+    /** Fires with the chosen item's `value`. The palette then closes. */
+    pfSelect;
+    query = '';
+    matchCount = 0;
+    releaseScroll = null;
+    activeItem = null;
+    /*
+     * Read the light DOM on the way in, not after mounting, so the first paint
+     * is right: filtering from `componentDidLoad` leaves `matchCount` at 0 for
+     * that first render and flashes "No results found" over a full list.
+     */
+    componentWillLoad() {
+        this.applyQuery();
+    }
+    componentDidLoad() {
+        if (this.open)
+            this.showDialog();
+    }
+    componentDidRender() {
+        /*
+         * Re-applied after every render because the active option is held as a
+         * *property* on the input, and Stencil's re-render replaces nothing of the
+         * light DOM but does reset nothing of this either — the property survives,
+         * but the matching set may have changed under it, so the one place that is
+         * always right is after the render that changed it.
+         */
+        this.syncActiveDescendant();
+    }
+    disconnectedCallback() {
+        this.unlockScroll();
+    }
+    /** Opens the palette. */
+    async show() {
+        this.open = true;
+    }
+    /** Closes the palette. */
+    async hide() {
+        this.open = false;
+    }
+    syncOpen(next, previous) {
+        if (next)
+            this.showDialog();
+        else
+            this.closeDialog();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    /** A child asking to be run. The palette decides, reports and closes. */
+    handleCommandSelect(event) {
+        event.stopPropagation();
+        this.pfSelect.emit({ value: event.detail.value });
+        this.open = false;
+    }
+    /*
+     * Items may be added, removed or relabelled while the palette is open, so
+     * the filter is re-applied when the assignment changes. Text edited inside
+     * an already-assigned node does not fire this — the same caveat pf-tooltip
+     * documents — which is why `refresh()` exists.
+     */
+    onSlotChange = () => {
+        this.applyQuery();
+    };
+    /** Re-reads the children and re-applies the current query. */
+    async refresh() {
+        this.applyQuery();
+    }
+    get dialog() {
+        return this.el.shadowRoot?.querySelector('dialog') ?? null;
+    }
+    get input() {
+        return this.el.shadowRoot?.querySelector('input') ?? null;
+    }
+    items() {
+        return Array.from(this.el.querySelectorAll('pf-command-item'));
+    }
+    /** The items a query left showing, which is what the arrows move through. */
+    visibleItems() {
+        return this.items().filter((item) => !item.hasAttribute('hidden'));
+    }
+    lockScroll() {
+        if (this.releaseScroll)
+            return;
+        this.releaseScroll = lockPageScroll();
+    }
+    unlockScroll() {
+        this.releaseScroll?.();
+        this.releaseScroll = null;
+    }
+    showDialog() {
+        const dialog = this.dialog;
+        if (!dialog || dialog.open)
+            return;
+        dialog.showModal();
+        this.lockScroll();
+        // A fresh query each time it opens, matching the React component.
+        this.query = '';
+        this.applyQuery();
+        requestAnimationFrame(() => this.input?.focus());
+    }
+    closeDialog() {
+        const dialog = this.dialog;
+        this.unlockScroll();
+        if (dialog?.open)
+            dialog.close();
+    }
+    onCancel = (event) => {
+        if (!this.dismissable)
+            event.preventDefault();
+    };
+    onClose = () => {
+        this.unlockScroll();
+        if (this.open)
+            this.open = false;
+    };
+    /** A click on the dialog itself landed on the backdrop, not the panel. */
+    onDialogClick = (event) => {
+        if (!this.dismissable || event.target !== this.dialog)
+            return;
+        this.open = false;
+    };
+    onInput = (event) => {
+        this.query = event.target.value;
+        this.applyQuery();
+    };
+    /**
+     * Hides the items a query excludes, and any group left with none showing.
+     *
+     * The group's own label counts towards each of its items, so typing a
+     * section name narrows to that section — which is what the React component
+     * does with its `group` field.
+     */
+    applyQuery() {
+        const query = this.query;
+        for (const item of this.items()) {
+            const group = item.closest('pf-command-group');
+            const matches = matchesCommandQuery({
+                label: item.textContent?.trim() ?? '',
+                description: item.getAttribute('description'),
+                group: group?.getAttribute('label') ?? null,
+            }, query);
+            setHidden(item, !matches);
+        }
+        for (const group of Array.from(this.el.querySelectorAll('pf-command-group'))) {
+            const showing = group.querySelectorAll('pf-command-item:not([hidden])').length;
+            setHidden(group, showing === 0);
+        }
+        const visible = this.visibleItems();
+        this.matchCount = visible.length;
+        // A new query starts at the top, as the React component does.
+        this.setActive(visible.find((item) => !item.hasAttribute('disabled')) ?? null);
+    }
+    setActive(item) {
+        if (this.activeItem && this.activeItem !== item) {
+            this.activeItem.removeAttribute('aria-selected');
+        }
+        this.activeItem = item;
+        item?.setAttribute('aria-selected', 'true');
+        this.syncActiveDescendant();
+        // Guarded: this also runs from componentWillLoad, and the mock DOM has no
+        // scrollIntoView at all.
+        if (item && typeof item.scrollIntoView === 'function') {
+            item.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    /**
+     * Feature-detected: where ARIA element reflection is missing there is no
+     * cross-root equivalent, so the active option stops being *announced* while
+     * the arrows, the highlight and Enter all still work. Recorded in `todo.md`.
+     */
+    syncActiveDescendant() {
+        const input = this.input;
+        if (!input || !('ariaActiveDescendantElement' in input))
+            return;
+        input.ariaActiveDescendantElement = this.activeItem;
+    }
+    move(action) {
+        const visible = this.visibleItems();
+        const enabled = getEnabledIndexes(visible, (item) => item.hasAttribute('disabled'));
+        const current = this.activeItem ? visible.indexOf(this.activeItem) : -1;
+        const next = resolveListMove(action, enabled, current);
+        if (next !== -1)
+            this.setActive(visible[next] ?? null);
+    }
+    runActive() {
+        const item = this.activeItem;
+        if (!item || item.hasAttribute('disabled'))
+            return;
+        // The property, not the attribute: a binding that sets props would leave
+        // the attribute absent, and the reported value silently empty.
+        const value = item.value;
+        this.pfSelect.emit({ value: value ?? item.getAttribute('value') ?? '' });
+        this.open = false;
+    }
+    /*
+     * On the panel rather than the input, so a pointer that has moved focus
+     * elsewhere inside the dialog still drives the list. Escape is left to the
+     * dialog, which handles it natively.
+     */
+    onKeyDown = (event) => {
+        const actions = {
+            [Keys.ArrowDown]: 'next',
+            [Keys.ArrowUp]: 'previous',
+            [Keys.Home]: 'first',
+            [Keys.End]: 'last',
+        };
+        const action = actions[event.key];
+        if (action) {
+            event.preventDefault();
+            this.move(action);
+            return;
+        }
+        if (event.key === Keys.Enter) {
+            event.preventDefault();
+            this.runActive();
+        }
+    };
+    render() {
+        const empty = this.matchCount === 0;
+        return (h(Host, { key: '14df0ee38242c1ba49d494ee1147d86cd64e4de7' }, h("dialog", { key: '027c426b6cd73ad22cddba96c28333d69b105278', part: "dialog", class: "dialog", "aria-label": this.label, onCancel: this.onCancel, onClose: this.onClose, onClick: this.onDialogClick }, h("div", { key: '1b4356fa25736a00d91bf5166d22443338be1030', class: "panel", part: "panel", onKeyDown: this.onKeyDown }, h("div", { key: '4676d0175b1669e7d2ae9e8f27f2cecb964d3add', class: "search" }, h("pf-icon", { key: '1e5d5c8a7b19468e46941eca84a622144d0475b5', name: "magnifying-glass", class: "search-icon" }), h("input", { key: '6dba34b19089a31e17ae4b5516362e5b11c8dd28', part: "input", class: "input", type: "text", role: "combobox", autocomplete: "off", spellcheck: false, "aria-autocomplete": "list", "aria-expanded": "true", "aria-label": this.placeholder, placeholder: this.placeholder, value: this.query, onInput: this.onInput }), h("pf-kbd", { key: '95147d6a01d46da45fac53795d64adaebcf88b87', class: "hint" }, "esc")), h("div", { key: '5472730ca3196d9cbb1459da99e199ffdd601db7', class: "list", part: "list", role: "listbox", "aria-label": this.label }, h("slot", { key: 'bd5a204461aafd49f4e1af9864daac3cdfe12d33', onSlotchange: this.onSlotChange }), empty && (h("p", { key: '7c092f8c728c0b716c28b8b0a94407f979874e5b', class: "empty", part: "empty" }, this.emptyMessage)))))));
+    }
+    static get is() { return "pf-command-palette"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-command-palette.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-command-palette.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the palette is showing. Reflected so the stylesheet selects on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder for the search input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Search commands\u2026'"
+            },
+            "emptyMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shown when the query matches nothing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-message",
+                "defaultValue": "'No results found.'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the dialog."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Command palette'"
+            },
+            "dismissable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close on Escape or a click on the backdrop. Defaults to true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissable",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "query": {},
+            "matchCount": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfOpenChange",
+                "name": "pfOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires whenever the palette opens or closes, whoever caused it."
+                },
+                "complexType": {
+                    "original": "{ open: boolean }",
+                    "resolved": "{ open: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "pfSelect",
+                "name": "pfSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires with the chosen item's `value`. The palette then closes."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the palette.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the palette.",
+                    "tags": []
+                }
+            },
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Re-reads the children and re-applies the current query.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "syncOpen"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "pfCommandSelect",
+                "method": "handleCommandSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pf-command-palette.js.map

package/dist/collection/components/pf-command-palette/pf-command-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-command-palette.js","sourceRoot":"","sources":["../../../src/components/pf-command-palette/pf-command-palette.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  getEnabledIndexes,\n  Keys,\n  lockPageScroll,\n  matchesCommandQuery,\n  resolveListMove,\n  type ListNavigationAction,\n} from '@pitchfork-ui/core';\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n/*\n * `toggleAttribute` does not exist on Stencil's mock DOM -- measured, and\n * worth knowing how it fails: Stencil's `safeCall` swallows the TypeError, so\n * the filter silently did nothing and the palette rendered \"No results found\"\n * over a full list. Not exported, so this file still has one export.\n */\nconst setHidden = (element: Element, hidden: boolean) => {\n  if (hidden) element.setAttribute('hidden', '');\n  else element.removeAttribute('hidden');\n};\n\n/**\n * A searchable command list in a modal dialog.\n *\n * A native `<dialog>` opened with `showModal()`, like `pf-modal` and\n * `pf-slideout-menu`: the focus trap, Escape and the backdrop come free, and\n * the React component's `useFocusTrap` has no equivalent here. Page scroll is\n * the one part the dialog does not do, so that is core's reference-counted\n * lock.\n *\n * **The active option is set as an element, not an IDREF.** The input lives in\n * this shadow root and the options are slotted light-DOM children, and\n * `aria-activedescendant` does not cross a shadow boundary — measured against\n * Chromium's accessibility tree, where a cross-root IDREF is simply absent\n * from it. `ariaActiveDescendantElement` does resolve, because the option sits\n * in an ancestor scope of the input's tree, which is the direction element\n * reflection allows. (`pf-tooltip` needed the opposite direction — a trigger\n * referencing something inside a shadow root it does not own — and that one\n * reads back empty, which is why it copies text into `aria-description`\n * instead.)\n *\n * @slot - `pf-command-item` and `pf-command-group` children.\n * @part dialog - the native dialog, which is also the backdrop.\n * @part panel - the floating panel.\n * @part input - the search input.\n * @part list - the listbox the items are slotted into.\n * @part empty - the message shown when nothing matches.\n */\n@Component({\n  tag: 'pf-command-palette',\n  styleUrl: 'pf-command-palette.css',\n  shadow: true,\n})\nexport class PfCommandPalette {\n  @Element() el!: HTMLElement;\n\n  /** Whether the palette is showing. Reflected so the stylesheet selects on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Placeholder for the search input. */\n  @Prop() placeholder = 'Search commands…';\n\n  /** Shown when the query matches nothing. */\n  @Prop() emptyMessage = 'No results found.';\n\n  /** Accessible name for the dialog. */\n  @Prop() label = 'Command palette';\n\n  /** Close on Escape or a click on the backdrop. Defaults to true. */\n  @Prop() dismissable = true;\n\n  /** Fires whenever the palette opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** Fires with the chosen item's `value`. The palette then closes. */\n  @Event() pfSelect!: EventEmitter<{ value: string }>;\n\n  @State() query = '';\n  @State() matchCount = 0;\n\n  private releaseScroll: (() => void) | null = null;\n  private activeItem: HTMLElement | null = null;\n\n  /*\n   * Read the light DOM on the way in, not after mounting, so the first paint\n   * is right: filtering from `componentDidLoad` leaves `matchCount` at 0 for\n   * that first render and flashes \"No results found\" over a full list.\n   */\n  componentWillLoad() {\n    this.applyQuery();\n  }\n\n  componentDidLoad() {\n    if (this.open) this.showDialog();\n  }\n\n  componentDidRender() {\n    /*\n     * Re-applied after every render because the active option is held as a\n     * *property* on the input, and Stencil's re-render replaces nothing of the\n     * light DOM but does reset nothing of this either — the property survives,\n     * but the matching set may have changed under it, so the one place that is\n     * always right is after the render that changed it.\n     */\n    this.syncActiveDescendant();\n  }\n\n  disconnectedCallback() {\n    this.unlockScroll();\n  }\n\n  /** Opens the palette. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Closes the palette. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showDialog();\n    else this.closeDialog();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  /** A child asking to be run. The palette decides, reports and closes. */\n  @Listen('pfCommandSelect')\n  handleCommandSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.pfSelect.emit({ value: event.detail.value });\n    this.open = false;\n  }\n\n  /*\n   * Items may be added, removed or relabelled while the palette is open, so\n   * the filter is re-applied when the assignment changes. Text edited inside\n   * an already-assigned node does not fire this — the same caveat pf-tooltip\n   * documents — which is why `refresh()` exists.\n   */\n  private onSlotChange = () => {\n    this.applyQuery();\n  };\n\n  /** Re-reads the children and re-applies the current query. */\n  @Method()\n  async refresh(): Promise<void> {\n    this.applyQuery();\n  }\n\n  private get dialog() {\n    return this.el.shadowRoot?.querySelector('dialog') ?? null;\n  }\n\n  private get input() {\n    return this.el.shadowRoot?.querySelector('input') ?? null;\n  }\n\n  private items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-command-item'));\n  }\n\n  /** The items a query left showing, which is what the arrows move through. */\n  private visibleItems(): HTMLElement[] {\n    return this.items().filter((item) => !item.hasAttribute('hidden'));\n  }\n\n  private lockScroll() {\n    if (this.releaseScroll) return;\n    this.releaseScroll = lockPageScroll();\n  }\n\n  private unlockScroll() {\n    this.releaseScroll?.();\n    this.releaseScroll = null;\n  }\n\n  private showDialog() {\n    const dialog = this.dialog;\n    if (!dialog || dialog.open) return;\n    dialog.showModal();\n    this.lockScroll();\n\n    // A fresh query each time it opens, matching the React component.\n    this.query = '';\n    this.applyQuery();\n    requestAnimationFrame(() => this.input?.focus());\n  }\n\n  private closeDialog() {\n    const dialog = this.dialog;\n    this.unlockScroll();\n    if (dialog?.open) dialog.close();\n  }\n\n  private onCancel = (event: Event) => {\n    if (!this.dismissable) event.preventDefault();\n  };\n\n  private onClose = () => {\n    this.unlockScroll();\n    if (this.open) this.open = false;\n  };\n\n  /** A click on the dialog itself landed on the backdrop, not the panel. */\n  private onDialogClick = (event: MouseEvent) => {\n    if (!this.dismissable || event.target !== this.dialog) return;\n    this.open = false;\n  };\n\n  private onInput = (event: Event) => {\n    this.query = (event.target as HTMLInputElement).value;\n    this.applyQuery();\n  };\n\n  /**\n   * Hides the items a query excludes, and any group left with none showing.\n   *\n   * The group's own label counts towards each of its items, so typing a\n   * section name narrows to that section — which is what the React component\n   * does with its `group` field.\n   */\n  private applyQuery() {\n    const query = this.query;\n\n    for (const item of this.items()) {\n      const group = item.closest('pf-command-group');\n      const matches = matchesCommandQuery(\n        {\n          label: item.textContent?.trim() ?? '',\n          description: item.getAttribute('description'),\n          group: group?.getAttribute('label') ?? null,\n        },\n        query,\n      );\n      setHidden(item, !matches);\n    }\n\n    for (const group of Array.from(this.el.querySelectorAll<HTMLElement>('pf-command-group'))) {\n      const showing = group.querySelectorAll('pf-command-item:not([hidden])').length;\n      setHidden(group, showing === 0);\n    }\n\n    const visible = this.visibleItems();\n    this.matchCount = visible.length;\n\n    // A new query starts at the top, as the React component does.\n    this.setActive(visible.find((item) => !item.hasAttribute('disabled')) ?? null);\n  }\n\n  private setActive(item: HTMLElement | null) {\n    if (this.activeItem && this.activeItem !== item) {\n      this.activeItem.removeAttribute('aria-selected');\n    }\n    this.activeItem = item;\n    item?.setAttribute('aria-selected', 'true');\n    this.syncActiveDescendant();\n    // Guarded: this also runs from componentWillLoad, and the mock DOM has no\n    // scrollIntoView at all.\n    if (item && typeof item.scrollIntoView === 'function') {\n      item.scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  /**\n   * Feature-detected: where ARIA element reflection is missing there is no\n   * cross-root equivalent, so the active option stops being *announced* while\n   * the arrows, the highlight and Enter all still work. Recorded in `todo.md`.\n   */\n  private syncActiveDescendant() {\n    const input = this.input;\n    if (!input || !('ariaActiveDescendantElement' in input)) return;\n    (\n      input as unknown as { ariaActiveDescendantElement: Element | null }\n    ).ariaActiveDescendantElement = this.activeItem;\n  }\n\n  private move(action: ListNavigationAction) {\n    const visible = this.visibleItems();\n    const enabled = getEnabledIndexes(visible, (item) => item.hasAttribute('disabled'));\n    const current = this.activeItem ? visible.indexOf(this.activeItem) : -1;\n    const next = resolveListMove(action, enabled, current);\n    if (next !== -1) this.setActive(visible[next] ?? null);\n  }\n\n  private runActive() {\n    const item = this.activeItem;\n    if (!item || item.hasAttribute('disabled')) return;\n    // The property, not the attribute: a binding that sets props would leave\n    // the attribute absent, and the reported value silently empty.\n    const value = (item as HTMLElement & { value?: string }).value;\n    this.pfSelect.emit({ value: value ?? item.getAttribute('value') ?? '' });\n    this.open = false;\n  }\n\n  /*\n   * On the panel rather than the input, so a pointer that has moved focus\n   * elsewhere inside the dialog still drives the list. Escape is left to the\n   * dialog, which handles it natively.\n   */\n  private onKeyDown = (event: KeyboardEvent) => {\n    const actions: Record<string, ListNavigationAction> = {\n      [Keys.ArrowDown]: 'next',\n      [Keys.ArrowUp]: 'previous',\n      [Keys.Home]: 'first',\n      [Keys.End]: 'last',\n    };\n\n    const action = actions[event.key];\n    if (action) {\n      event.preventDefault();\n      this.move(action);\n      return;\n    }\n\n    if (event.key === Keys.Enter) {\n      event.preventDefault();\n      this.runActive();\n    }\n  };\n\n  render() {\n    const empty = this.matchCount === 0;\n\n    return (\n      <Host>\n        <dialog\n          part=\"dialog\"\n          class=\"dialog\"\n          aria-label={this.label}\n          onCancel={this.onCancel}\n          onClose={this.onClose}\n          onClick={this.onDialogClick}\n        >\n          <div class=\"panel\" part=\"panel\" onKeyDown={this.onKeyDown}>\n            <div class=\"search\">\n              <pf-icon name=\"magnifying-glass\" class=\"search-icon\"></pf-icon>\n              <input\n                part=\"input\"\n                class=\"input\"\n                type=\"text\"\n                role=\"combobox\"\n                autocomplete=\"off\"\n                spellcheck={false}\n                aria-autocomplete=\"list\"\n                aria-expanded=\"true\"\n                aria-label={this.placeholder}\n                placeholder={this.placeholder}\n                value={this.query}\n                onInput={this.onInput}\n              />\n              <pf-kbd class=\"hint\">esc</pf-kbd>\n            </div>\n\n            <div class=\"list\" part=\"list\" role=\"listbox\" aria-label={this.label}>\n              <slot onSlotchange={this.onSlotChange} />\n              {empty && (\n                <p class=\"empty\" part=\"empty\">\n                  {this.emptyMessage}\n                </p>\n              )}\n            </div>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-content-divider/pf-content-divider.css

@@ -0,0 +1,61 @@
+:host {
+  align-items: center;
+  color: var(--pf-content-divider-text);
+  display: flex;
+  gap: var(--space-3);
+  width: 100%;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([inset]) {
+  padding-inline-end: var(--space-2);
+  padding-inline-start: var(--space-2);
+}
+
+.line {
+  background: var(--pf-content-divider-line);
+  display: block;
+  flex: 1;
+  height: 1px;
+}
+
+.label {
+  color: var(--pf-content-divider-text);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+/*
+ * `display: none` rather than omitting the nodes: the slot has to stay in the
+ * shadow tree for `slotchange` to fire at all, and the trailing rule would
+ * otherwise double the gap around a zero-width label.
+ */
+.label--empty,
+.line--hidden {
+  display: none;
+}
+
+/*
+ * Vertical is a different shape, not a variant of the horizontal one: the host
+ * itself is the rule, so its own children have no part to play.
+ */
+:host([orientation='vertical']) {
+  align-self: stretch;
+  background: var(--pf-content-divider-line);
+  display: inline-block;
+  flex: 0 0 auto;
+  height: auto;
+  min-height: 100%;
+  width: 1px;
+}
+
+:host([orientation='vertical']) .line,
+:host([orientation='vertical']) .label {
+  display: none;
+}