@brandsync/wc 1.16.0 → 1.18.0

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

@@ -0,0 +1,1114 @@
+import { h } from "@stencil/core";
+/** The result sections, in display (and keyboard) order. */
+const RESULT_SECTIONS = ['recent', 'suggested', 'commands', 'navigation', 'records'];
+const ALL_SECTIONS = [...RESULT_SECTIONS, 'try-instead'];
+let uid = 0;
+const svgProps = {
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': '1.8',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'aria-hidden': 'true',
+};
+/**
+ * A Ctrl+K command palette: a modal with a search field, grouped commands, navigation and records, a
+ * no-results view and a keyboard-hint footer. The data, the filtering, the command registry and the
+ * recent-items storage are all yours: you slot `bs-search-item`s into the sections and set `status`.
+ *
+ * Built from a native `<dialog>` (opened with `showModal()`, so focus is trapped, the page behind is inert
+ * and the backdrop is the scrim), `bs-input` (type="search"), `bs-search-item`, `bs-key` (footer hints and
+ * the Esc cap), `bs-chip-informative` (the scope chip) and `bs-spinner` (loading). Slot a `bs-key-caps` with
+ * `slot="trailing"` inside an item to show a command's shortcut.
+ *
+ * ## When to use
+ * - An app-wide "do anything" entry point opened with a hotkey: run commands, navigate, open records.
+ *
+ * ## When not to use
+ * - A plain search box with a dropdown -- use `bs-global-search`.
+ * - A small list of actions on one control -- use `bs-menu`.
+ *
+ * A `>` as the first character of the field switches to commands-only mode (`commandsOnly`, reflected as
+ * `commands-only`). The component filters nothing: listen to `bsInput`, swap the slotted items, set `status`.
+ * Nested (sub-command) palettes are a consumer pattern: swap the slotted commands and set `scopeLabel`.
+ *
+ * @slot recent - `bs-search-item`s for the "Recent" section.
+ * @slot suggested - `bs-search-item`s for the "Suggested" section.
+ * @slot commands - `bs-search-item`s for the "Commands" section.
+ * @slot navigation - `bs-search-item`s for the "Navigation" section.
+ * @slot records - `bs-search-item`s for the "Records" section.
+ * @slot try-instead - `bs-search-item`s under "Try instead" in the no-results view (status `empty`).
+ * @part dialog - The native `<dialog>`.
+ * @part panel - The palette surface.
+ * @part search - The search bar row.
+ * @part input - The `bs-input`.
+ * @part results - The scrolling results area.
+ * @part section - One section (header and items).
+ * @part section-header - A section header.
+ * @part empty - The no-results message block.
+ * @part footer - The footer row.
+ * @part hint - One keyboard hint (keycaps and text).
+ * @prop --bs-command-palette-width - Panel width. Defaults to `640px` (Figma); capped to the viewport.
+ * @prop --bs-command-palette-top - Distance from the top of the viewport. Defaults to `12vh`.
+ * @prop --bs-command-palette-max-height - Max height of the results area. Defaults to `60vh`.
+ * @prop --bs-command-palette-radius - Aliased to `--bs-border-radius-150`.
+ * @prop --bs-command-palette-bg - Panel background. Aliased to `--bs-surface-base`.
+ * @prop --bs-command-palette-shadow - Figma elevation level 4: `0 8px 16px` in `--bs-elevation-higher` (stronger in dark mode).
+ * @prop --bs-command-palette-overlay - Scrim colour. Aliased to `--bs-surface-overlay`.
+ * @prop --bs-command-palette-footer-bg - Aliased to `--bs-surface-container`.
+ * @prop --bs-command-palette-divider-color - Aliased to `--bs-border-default`.
+ * @prop --bs-command-palette-header-border-color - Aliased to `--bs-border-neutral-container`.
+ * @prop --bs-command-palette-header-color - Aliased to `--bs-text-muted`.
+ * @prop --bs-command-palette-hint-color - Aliased to `--bs-text-secondary`.
+ * @prop --bs-command-palette-z-index - Aliased to `--bs-z-index-modal`.
+ */
+export class BsCommandPalette {
+    el;
+    id = `bs-cp-${++uid}`;
+    itemSeq = 0;
+    observer;
+    dialogEl;
+    comboEl;
+    inputEl;
+    previousFocus;
+    userMoved = false;
+    /** The field value. Two-way. A leading `>` means commands-only mode. */
+    value = '';
+    /** Whether the palette is open. */
+    open = false;
+    /** Derived from `value` (it starts with `>`). Read-only; set `value` instead. */
+    commandsOnly = false;
+    /** Which view to show. You choose it; nothing is inferred from `value`. `default` and `results` render the same; they differ for screen readers only. */
+    status = 'default';
+    /** Accessible name of the dialog. */
+    label = 'Command palette';
+    /** Placeholder of the field. */
+    placeholder = 'Type a command or search…';
+    /** Keep the palette open after an item is chosen. */
+    keepOpenOnSelect = false;
+    /** Shows the footer of keyboard hints. */
+    showFooter = true;
+    /** Global shortcut that toggles the palette, e.g. `mod+k` (`mod` is Cmd on Mac, Ctrl elsewhere). Empty = off. */
+    hotkey = '';
+    /** Nested scope: shows this text as a chip before the field. Backspace on an empty field emits `bsScopeExit`. */
+    scopeLabel;
+    /** Section headers. */
+    recentLabel = 'Recent';
+    suggestedLabel = 'Suggested';
+    commandsLabel = 'Commands';
+    navigationLabel = 'Navigation';
+    recordsLabel = 'Records';
+    tryInsteadLabel = 'Try instead';
+    /** Footer hint texts. */
+    navigateLabel = 'Navigate';
+    openLabel = 'Open';
+    closeLabel = 'Close';
+    commandsOnlyLabel = 'Commands only';
+    allResultsLabel = 'All results';
+    /** No-results view copy. Include the query in `emptyHeading` yourself. */
+    emptyHeading = 'No commands or records';
+    emptyDescription = 'Check the spelling, or search records instead.';
+    /** A suggested correction; the "Did you mean" line shows while it is set. */
+    didYouMean;
+    didYouMeanLabel = 'Did you mean';
+    /** Text of the loading row. */
+    loadingLabel = 'Loading…';
+    /** Accessible name of the results listbox. */
+    listLabel = 'Results';
+    filled = { recent: false, suggested: false, commands: false, navigation: false, records: false, 'try-instead': false };
+    activeId = null;
+    /** Fires on every keystroke with `{ value, query, commandsOnly }`. */
+    bsInput;
+    /** Fires when an item is chosen (click or Enter) with `{ value, section, commandsOnly }`. */
+    bsSelect;
+    /** Fires when the "Did you mean" suggestion is pressed, with its text. */
+    bsSuggestion;
+    /** Fires when the palette opens or closes through user interaction (hotkey, Esc, scrim, selection). */
+    bsOpenChange;
+    /** Fires on Backspace in an empty field while `scopeLabel` is set. */
+    bsScopeExit;
+    /** Opens the palette. */
+    async show() {
+        this.open = true;
+    }
+    /** Closes the palette and restores focus. */
+    async close() {
+        this.open = false;
+    }
+    onValueChange() {
+        this.commandsOnly = this.value.startsWith('>');
+    }
+    resetMoved() {
+        this.userMoved = false;
+    }
+    componentWillLoad() {
+        this.commandsOnly = this.value.startsWith('>');
+        this.readFilled();
+        this.prepareItems();
+    }
+    connectedCallback() {
+        document.addEventListener('keydown', this.onDocKeyDown);
+        this.observer = new MutationObserver(() => {
+            this.readFilled();
+            this.prepareItems();
+            this.syncActive();
+        });
+        this.observer.observe(this.el, { childList: true });
+    }
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this.onDocKeyDown);
+        this.observer?.disconnect();
+        if (this.dialogEl?.open)
+            this.dialogEl.close();
+    }
+    componentDidRender() {
+        this.syncDialog();
+        this.prepareItems();
+        this.syncActive();
+    }
+    syncDialog() {
+        const d = this.dialogEl;
+        if (!d)
+            return;
+        if (this.open && !d.open) {
+            this.previousFocus = document.activeElement;
+            d.showModal();
+            this.focusInput();
+        }
+        else if (!this.open && d.open) {
+            d.close();
+            const prev = this.previousFocus;
+            this.previousFocus = null;
+            if (prev && prev.isConnected)
+                prev.focus?.();
+        }
+    }
+    focusInput() {
+        this.inputEl?.focus();
+        const native = this.inputEl?.shadowRoot?.querySelector('input');
+        native?.select?.();
+    }
+    onDocKeyDown = (ev) => {
+        if (!this.hotkey || ev.defaultPrevented)
+            return;
+        const parts = this.hotkey.toLowerCase().split('+').map(p => p.trim());
+        const key = parts[parts.length - 1];
+        const mods = parts.slice(0, -1);
+        const isMac = /mac|iphone|ipad/i.test(navigator.platform || navigator.userAgent);
+        const want = (m) => mods.includes(m);
+        const wantMeta = want('meta') || want('cmd') || (want('mod') && isMac);
+        const wantCtrl = want('ctrl') || (want('mod') && !isMac);
+        if (ev.key.toLowerCase() !== key)
+            return;
+        if (ev.metaKey !== wantMeta || ev.ctrlKey !== wantCtrl || ev.altKey !== want('alt') || ev.shiftKey !== want('shift'))
+            return;
+        ev.preventDefault();
+        this.setOpen(!this.open);
+    };
+    setOpen(next) {
+        if (this.open === next)
+            return;
+        this.open = next;
+        this.bsOpenChange.emit(next);
+    }
+    allItems() {
+        return Array.from(this.el.children).filter(c => c.tagName === 'BS-SEARCH-ITEM' && ALL_SECTIONS.includes(c.getAttribute('slot')));
+    }
+    shownSections() {
+        if (this.status === 'loading')
+            return [];
+        if (this.status === 'empty')
+            return ['try-instead'];
+        return RESULT_SECTIONS;
+    }
+    visibleItems() {
+        if (!this.open)
+            return [];
+        const items = this.allItems();
+        return this.shownSections().flatMap(s => items.filter(i => i.getAttribute('slot') === s));
+    }
+    enabledItems() {
+        return this.visibleItems().filter(i => !i.disabled);
+    }
+    readFilled() {
+        const next = { ...this.filled };
+        let changed = false;
+        for (const s of ALL_SECTIONS) {
+            const has = Array.from(this.el.children).some(c => c.getAttribute('slot') === s);
+            if (next[s] !== has) {
+                next[s] = has;
+                changed = true;
+            }
+        }
+        if (changed)
+            this.filled = next;
+    }
+    prepareItems() {
+        for (const item of this.allItems()) {
+            if (item.selectionRole !== 'option')
+                item.selectionRole = 'option';
+            if (!item.id)
+                item.id = `${this.id}-opt-${++this.itemSeq}`;
+        }
+    }
+    /** First enabled item is active unless the user moved the highlight (and it still exists). */
+    syncActive() {
+        const enabled = this.enabledItems();
+        let id = this.activeId;
+        if (!this.open || !enabled.length)
+            id = null;
+        else if (!this.userMoved || !enabled.some(i => i.id === id))
+            id = enabled[0].id;
+        if (id !== this.activeId)
+            this.activeId = id;
+        let activeItem;
+        for (const item of this.allItems()) {
+            const on = !!id && item.id === id;
+            if (on)
+                activeItem = item;
+            if (item.active !== on)
+                item.active = on;
+        }
+        // The items live in the light DOM, so an id reference cannot reach them from this shadow root; the
+        // element-reference property can (the light DOM is an ancestor scope).
+        if (this.comboEl)
+            this.comboEl.ariaActiveDescendantElement = activeItem ?? null;
+    }
+    setActive(item) {
+        this.userMoved = true;
+        this.activeId = item.id;
+        for (const i of this.allItems())
+            i.active = i.id === item.id;
+        if (this.comboEl)
+            this.comboEl.ariaActiveDescendantElement = item;
+        item.scrollIntoView?.({ block: 'nearest' });
+    }
+    onInput = (ev) => {
+        ev.stopPropagation();
+        this.value = ev.detail;
+        this.userMoved = false;
+        const commandsOnly = this.value.startsWith('>');
+        this.bsInput.emit({ value: this.value, query: (commandsOnly ? this.value.slice(1) : this.value).trim(), commandsOnly });
+    };
+    onKeyDown = (ev) => {
+        switch (ev.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                ev.preventDefault();
+                const items = this.enabledItems();
+                if (!items.length)
+                    return;
+                const idx = items.findIndex(i => i.id === this.activeId);
+                const next = ev.key === 'ArrowDown' ? (idx + 1) % items.length : idx <= 0 ? items.length - 1 : idx - 1;
+                this.setActive(items[next]);
+                return;
+            }
+            case 'Enter': {
+                const active = this.enabledItems().find(i => i.id === this.activeId);
+                if (active) {
+                    ev.preventDefault();
+                    active.click();
+                }
+                return;
+            }
+            case 'Backspace':
+                if (this.scopeLabel && this.value === '')
+                    this.bsScopeExit.emit();
+                return;
+        }
+    };
+    onDialogKeyDown = (ev) => {
+        if (ev.key === 'Escape') {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.setOpen(false);
+        }
+    };
+    /** Native cancel (Esc through another path): handle it ourselves so state and focus stay in sync. */
+    onCancel = (ev) => {
+        ev.preventDefault();
+        this.setOpen(false);
+    };
+    /** A click that lands on the `<dialog>` itself is a click on the backdrop (the scrim). */
+    onDialogClick = (ev) => {
+        if (ev.target === this.dialogEl)
+            this.setOpen(false);
+    };
+    onItemSelect(ev) {
+        const item = ev.target;
+        if (!item || item.tagName !== 'BS-SEARCH-ITEM')
+            return;
+        ev.stopPropagation();
+        this.bsSelect.emit({ value: ev.detail, section: item.getAttribute('slot') ?? '', commandsOnly: this.commandsOnly });
+        if (!this.keepOpenOnSelect)
+            this.setOpen(false);
+    }
+    onResultsMouseOver = (ev) => {
+        const item = ev.composedPath().find(n => n.tagName === 'BS-SEARCH-ITEM');
+        if (item && !item.disabled && item.id !== this.activeId)
+            this.setActive(item);
+    };
+    sectionLabel(s) {
+        return {
+            recent: this.recentLabel,
+            suggested: this.suggestedLabel,
+            commands: this.commandsLabel,
+            navigation: this.navigationLabel,
+            records: this.recordsLabel,
+            'try-instead': this.tryInsteadLabel,
+        }[s];
+    }
+    renderSection(s) {
+        const hid = `${this.id}-h-${s}`;
+        return (h("div", { part: "section", class: "bs-command-palette__section", role: "group", "aria-labelledby": hid }, h("div", { part: "section-header", id: hid, class: "bs-command-palette__section-header" }, this.sectionLabel(s)), h("slot", { name: s })));
+    }
+    renderHint(keys, label) {
+        return (h("span", { part: "hint", class: "bs-command-palette__hint" }, keys, h("span", { class: "bs-command-palette__hint-text" }, label)));
+    }
+    renderFooter() {
+        const arrow = (d) => (h("bs-key", null, h("svg", { slot: "icon", ...svgProps }, h("path", { d: d }))));
+        return (h("div", { part: "footer", class: "bs-command-palette__footer" }, this.renderHint([arrow('M12 19V5M5 12l7-7 7 7'), arrow('M12 5v14M5 12l7 7 7-7')], this.navigateLabel), this.renderHint([
+            h("bs-key", null, h("svg", { slot: "icon", ...svgProps }, h("path", { d: "M9 14 4 9l5-5" }), h("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" }))),
+        ], this.openLabel), this.renderHint([h("bs-key", { label: "Esc" })], this.closeLabel), h("span", { class: "bs-command-palette__spacer" }), this.commandsOnly
+            ? this.renderHint([h("bs-key", { label: "Backspace" })], this.allResultsLabel)
+            : this.renderHint([h("bs-key", { label: ">" })], this.commandsOnlyLabel)));
+    }
+    renderEmpty() {
+        return (h("div", { part: "empty", class: "bs-command-palette__empty" }, h("svg", { class: "bs-command-palette__empty-icon", ...svgProps, "stroke-width": "1.5" }, h("circle", { cx: "11", cy: "11", r: "7" }), h("path", { d: "m20 20-3.5-3.5M8.5 11h5" })), h("div", { class: "bs-command-palette__empty-heading" }, this.emptyHeading), h("div", { class: "bs-command-palette__empty-description" }, this.emptyDescription), this.didYouMean && (h("div", { class: "bs-command-palette__empty-description" }, this.didYouMeanLabel, ' ', h("button", { type: "button", class: "bs-command-palette__link", onClick: () => this.bsSuggestion.emit(this.didYouMean) }, this.didYouMean)))));
+    }
+    announcement() {
+        if (!this.open)
+            return '';
+        if (this.status === 'empty')
+            return this.emptyHeading;
+        if (this.status === 'loading')
+            return this.loadingLabel;
+        return '';
+    }
+    render() {
+        const listId = `${this.id}-listbox`;
+        const loading = this.status === 'loading';
+        const empty = this.status === 'empty';
+        const sections = this.shownSections().filter(s => this.filled[s]);
+        const hasList = sections.length > 0;
+        const showResults = loading || empty || hasList;
+        return (h("dialog", { key: '6a561ea62b6c339d10be7c860ca78ec1980c196e', ref: el => (this.dialogEl = el), part: "dialog", class: "bs-command-palette", "aria-label": this.label, "aria-modal": "true", role: "dialog", onCancel: this.onCancel, onClose: () => this.open && this.setOpen(false), onClick: this.onDialogClick, onKeyDown: this.onDialogKeyDown }, h("div", { key: 'b4592134ab30548ceebe592c83a6aef96d4f30fa', part: "panel", class: "bs-command-palette__panel" }, h("div", { key: '803431fd163a7bec9ef8b2d29f40b010b82c562e', part: "search", class: "bs-command-palette__search" }, this.scopeLabel && (h("bs-chip-informative", { key: '66eea31c8b70c0ce11407e48088580f04f6f79a3', class: "bs-command-palette__scope", color: "info" }, this.scopeLabel)), h("div", { key: '6210de6dc47a703c20de9ea6f49f48ec7f0440ef', class: "bs-command-palette__field", ref: el => (this.comboEl = el), role: "combobox", "aria-label": this.placeholder, "aria-expanded": String(hasList), "aria-haspopup": "listbox", "aria-controls": hasList ? listId : undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: '6b74b215fe9b4336297179bf3200d78111bfd151', part: "input", ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, onBsInput: this.onInput })), h("span", { key: '0512eecf3b1e247e6258d583e339d98a2015aa01', class: "bs-command-palette__esc", "aria-hidden": "true" }, h("bs-key", { key: '1ec651c3432aaa92eb741e7e93b3389de386079d', label: "Esc" }))), showResults && h("div", { key: 'e59e86456dd91a126ef7ae2cb130764c5929331c', class: "bs-command-palette__divider", role: "presentation" }), showResults && (h("div", { key: '738aed619a5a63ab17be147720b0c70e0b5a9bbe', part: "results", class: "bs-command-palette__results", "aria-busy": String(loading), onMouseOver: this.onResultsMouseOver }, loading && (h("div", { key: 'de7b2c46f0e2c18ffe0052564d75c77eb967bbba', class: "bs-command-palette__loading", role: "status" }, h("bs-spinner", { key: 'cc14ce65a1bc976936a7b426495242a195cb198d', size: "sm" }), h("span", { key: 'b32b2df7f17043367242eccfe3bc0e1bed12b8ea' }, this.loadingLabel))), empty && this.renderEmpty(), hasList && (h("div", { key: 'f3dd45741f74456e063ac547e2a578a9b085ddab', id: listId, class: "bs-command-palette__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => this.renderSection(s)))))), this.showFooter && this.renderFooter()), h("span", { key: '34e1b38ed74e053dabdd28890a11aee77937db01', class: "bs-command-palette__live", "aria-live": "polite" }, this.announcement())));
+    }
+    static get is() { return "bs-command-palette"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-command-palette.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-command-palette.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The field value. Two-way. A leading `>` means commands-only mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the palette is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "commandsOnly": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Derived from `value` (it starts with `>`). Read-only; set `value` instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "commands-only",
+                "defaultValue": "false"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsCommandPaletteStatus",
+                    "resolved": "\"default\" | \"empty\" | \"loading\" | \"results\"",
+                    "references": {
+                        "BsCommandPaletteStatus": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-command-palette/bs-command-palette.tsx",
+                            "id": "src/components/bs-command-palette/bs-command-palette.tsx::BsCommandPaletteStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which view to show. You choose it; nothing is inferred from `value`. `default` and `results` render the same; they differ for screen readers only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the dialog."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Command palette'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder of the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Type a command or search\u2026'"
+            },
+            "keepOpenOnSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Keep the palette open after an item is chosen."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keep-open-on-select",
+                "defaultValue": "false"
+            },
+            "showFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the footer of keyboard hints."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-footer",
+                "defaultValue": "true"
+            },
+            "hotkey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Global shortcut that toggles the palette, e.g. `mod+k` (`mod` is Cmd on Mac, Ctrl elsewhere). Empty = off."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hotkey",
+                "defaultValue": "''"
+            },
+            "scopeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nested scope: shows this text as a chip before the field. Backspace on an empty field emits `bsScopeExit`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scope-label"
+            },
+            "recentLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Section headers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "recent-label",
+                "defaultValue": "'Recent'"
+            },
+            "suggestedLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suggested-label",
+                "defaultValue": "'Suggested'"
+            },
+            "commandsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "commands-label",
+                "defaultValue": "'Commands'"
+            },
+            "navigationLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "navigation-label",
+                "defaultValue": "'Navigation'"
+            },
+            "recordsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "records-label",
+                "defaultValue": "'Records'"
+            },
+            "tryInsteadLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "try-instead-label",
+                "defaultValue": "'Try instead'"
+            },
+            "navigateLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Footer hint texts."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "navigate-label",
+                "defaultValue": "'Navigate'"
+            },
+            "openLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open-label",
+                "defaultValue": "'Open'"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Close'"
+            },
+            "commandsOnlyLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "commands-only-label",
+                "defaultValue": "'Commands only'"
+            },
+            "allResultsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "all-results-label",
+                "defaultValue": "'All results'"
+            },
+            "emptyHeading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "No-results view copy. Include the query in `emptyHeading` yourself."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-heading",
+                "defaultValue": "'No commands or records'"
+            },
+            "emptyDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-description",
+                "defaultValue": "'Check the spelling, or search records instead.'"
+            },
+            "didYouMean": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A suggested correction; the \"Did you mean\" line shows while it is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "did-you-mean"
+            },
+            "didYouMeanLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "did-you-mean-label",
+                "defaultValue": "'Did you mean'"
+            },
+            "loadingLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the loading row."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading-label",
+                "defaultValue": "'Loading\u2026'"
+            },
+            "listLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the results listbox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "list-label",
+                "defaultValue": "'Results'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "filled": {},
+            "activeId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsInput",
+                "name": "bsInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on every keystroke with `{ value, query, commandsOnly }`."
+                },
+                "complexType": {
+                    "original": "BsCommandPaletteInputDetail",
+                    "resolved": "BsCommandPaletteInputDetail",
+                    "references": {
+                        "BsCommandPaletteInputDetail": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-command-palette/bs-command-palette.tsx",
+                            "id": "src/components/bs-command-palette/bs-command-palette.tsx::BsCommandPaletteInputDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "bsSelect",
+                "name": "bsSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when an item is chosen (click or Enter) with `{ value, section, commandsOnly }`."
+                },
+                "complexType": {
+                    "original": "BsCommandPaletteSelectDetail",
+                    "resolved": "BsCommandPaletteSelectDetail",
+                    "references": {
+                        "BsCommandPaletteSelectDetail": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-command-palette/bs-command-palette.tsx",
+                            "id": "src/components/bs-command-palette/bs-command-palette.tsx::BsCommandPaletteSelectDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "bsSuggestion",
+                "name": "bsSuggestion",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the \"Did you mean\" suggestion is pressed, with its text."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "bsOpenChange",
+                "name": "bsOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the palette opens or closes through user interaction (hotkey, Esc, scrim, selection)."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "bsScopeExit",
+                "name": "bsScopeExit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on Backspace in an empty field while `scopeLabel` is set."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "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": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the palette and restores focus.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "status",
+                "methodName": "resetMoved"
+            }, {
+                "propName": "open",
+                "methodName": "resetMoved"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bsItemSelect",
+                "method": "onItemSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}