@brandsync/wc 1.16.0 → 1.18.0

package/dist/collection/components/bs-global-search/bs-global-search.js

@@ -0,0 +1,1024 @@
+import { h } from "@stencil/core";
+/** Sections shown per status, in display (and keyboard) order. */
+const SECTIONS = {
+    default: ['recent', 'jump-to'],
+    results: ['top-matches', 'search-in'],
+    empty: [],
+    error: [],
+};
+const ALL_SECTIONS = ['recent', 'jump-to', 'top-matches', 'search-in'];
+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 global search combobox: a search field with a dropdown panel of suggestions, results, an empty state
+ * or an error state, plus a keyboard-hint footer. The data, the filtering and the recent-search storage
+ * are all yours: you slot `bs-search-item`s into the sections and tell the component which `status` to show.
+ *
+ * Built from `bs-input` (type="search"), `bs-search-item`, `bs-empty-state` (and so `bs-icon-tile`),
+ * `bs-button` and `bs-key` (the footer keycaps).
+ *
+ * ## When to use
+ * - An app-wide "find anything" field with recent searches, jump-to shortcuts and grouped results.
+ *
+ * ## When not to use
+ * - Filtering the list or table that is already on screen -- use `bs-input type="search"`.
+ * - A list of commands or actions -- use `bs-menu`.
+ * - The complete result set -- link to a full search results page ("See all results").
+ *
+ * Put `bs-search-item` children in the light DOM with `slot="recent"`, `slot="jump-to"`,
+ * `slot="top-matches"` or `slot="search-in"`. A section (and its header) is only rendered when its slot has
+ * content. Up/Down arrows move a highlight through the visible items; focus never leaves the field.
+ *
+ * Known limit: the items are in your light DOM and the combobox in this shadow root, so
+ * `aria-activedescendant` (an id reference) does not resolve across that boundary in every browser; the
+ * highlighted option also gets `aria-selected="true"`.
+ *
+ * @slot recent - `bs-search-item`s for the "Recent searches" section (status `default`).
+ * @slot jump-to - `bs-search-item`s for the "Jump to" section (status `default`).
+ * @slot top-matches - `bs-search-item`s for the "Top matches" section (status `results`).
+ * @slot search-in - `bs-search-item`s for the "Search in" section (status `results`).
+ * @slot empty - Replaces the whole empty-state block (status `empty`).
+ * @slot error - Replaces the whole error-state block (status `error`).
+ * @part field - The combobox wrapper around the search field.
+ * @part panel - The dropdown panel.
+ * @part section - One section (header and items).
+ * @part section-header - A section header.
+ * @part empty - The built-in empty or error state (`bs-empty-state`).
+ * @part footer - The footer row.
+ * @part hint - One keyboard hint (keycaps and text).
+ * @part clear-recent - The "Clear recent" button wrapper.
+ * @part see-all - The "See all results" button wrapper.
+ * @prop --bs-global-search-width - Field and panel width. Defaults to `480px` (Figma); capped at 100%.
+ * @prop --bs-global-search-panel-radius - Aliased to `--bs-border-radius-100`.
+ * @prop --bs-global-search-panel-padding - Aliased to `--bs-spacing-100`.
+ * @prop --bs-global-search-gap - Gap between sections, and between the field and the panel. Aliased to `--bs-spacing-100`.
+ * @prop --bs-global-search-panel-bg - Panel background. Aliased to `--bs-surface-base`.
+ * @prop --bs-global-search-shadow - Panel shadow: Figma elevation level 3 (`0 4px 8px` in `--bs-elevation-high`, 10% black in light mode and 30% in dark mode).
+ * @prop --bs-global-search-z-index - Panel stacking. Aliased to `--bs-z-index-dropdown`.
+ * @prop --bs-global-search-divider-color - Footer divider. Aliased to `--bs-border-default`.
+ * @prop --bs-global-search-header-border-color - Section header underline. Aliased to `--bs-border-neutral-container`.
+ * @prop --bs-global-search-header-color - Section header text. Aliased to `--bs-text-muted`.
+ * @prop --bs-global-search-hint-color - Footer hint text. Aliased to `--bs-text-secondary`.
+ */
+export class BsGlobalSearch {
+    el;
+    id = `bs-gs-${++uid}`;
+    itemSeq = 0;
+    observer;
+    inputEl;
+    /** The query. Two-way with the field. */
+    value = '';
+    /** Placeholder of the field (also its accessible name unless `label` is set). */
+    placeholder = 'Search customers, orders, products…';
+    /** Accessible name of the search field. Falls back to the placeholder. `bs-input` has no aria-label prop, so this names the combobox wrapper. */
+    label;
+    /** Disables the field; the panel cannot open. */
+    disabled = false;
+    /** Whether the dropdown panel is open. Opens on focus, click and typing; closes on Escape, outside click and selection. */
+    open = false;
+    /** Which view the panel shows. You choose it; nothing is inferred from `value`. */
+    status = 'default';
+    /** Total number of results (status `results`): shown as "See all {n} results" and announced to screen readers. */
+    totalResults;
+    /** Shows the footer (hints and the Clear recent / See all button) for the `default` and `results` views. */
+    showFooter = true;
+    /** Accessible name of the suggestions listbox. */
+    listLabel = 'Search suggestions';
+    /** Header of the `recent` section. */
+    recentLabel = 'Recent searches';
+    /** Header of the `jump-to` section. */
+    jumpToLabel = 'Jump to';
+    /** Header of the `top-matches` section. */
+    topMatchesLabel = 'Top matches';
+    /** Header of the `search-in` section. */
+    searchInLabel = 'Search in';
+    /** Footer hint text after the arrow keys. */
+    navigateLabel = 'Navigate';
+    /** Footer hint text after the Enter key (default view). */
+    searchLabel = 'Search';
+    /** Footer hint text after the Esc key. */
+    closeLabel = 'Close';
+    /** Footer hint text after the Enter key (results view). */
+    fullResultsLabel = 'Full results';
+    /** Text of the footer button that clears recent searches. */
+    clearRecentLabel = 'Clear recent';
+    /** Text of the footer button of the results view, when `totalResults` is not set. */
+    seeAllLabel = 'See all results';
+    /** Heading of the built-in empty state. */
+    emptyHeading = 'No results';
+    /** Description of the built-in empty state. */
+    emptyDescription = 'Try a different search.';
+    /** Text of the empty state's action. */
+    clearSearchLabel = 'Clear search';
+    /** Heading of the built-in error state. */
+    errorHeading = 'Search isn’t available right now';
+    /** Description of the built-in error state. */
+    errorDescription = 'We couldn’t reach the server. Your query is kept — try again in a moment.';
+    /** Text of the error state's action. */
+    retryLabel = 'Try again';
+    /** Which sections currently have content in their slot. */
+    filled = { recent: false, 'jump-to': false, 'top-matches': false, 'search-in': false };
+    /** Id of the highlighted item. */
+    activeId = null;
+    /** Fires on every keystroke with the query. The component filters nothing itself. */
+    bsInput;
+    /** Fires on Enter with no highlighted item, with the query. */
+    bsSearch;
+    /** Fires when an item is chosen (click or Enter), with its `value` and section (slot name). */
+    bsSelect;
+    /** Fires when the panel opens or closes through user interaction, with the new state. */
+    bsOpenChange;
+    /** Fires when "Clear recent" is pressed. */
+    bsClearRecent;
+    /** Fires when the empty state's "Clear search" is pressed; the value is also cleared. */
+    bsClearSearch;
+    /** Fires when "See all results" is pressed. */
+    bsSeeAll;
+    /** Fires when the error state's "Try again" is pressed. */
+    bsRetry;
+    resetActive() {
+        this.activeId = null;
+    }
+    componentWillLoad() {
+        this.readFilled();
+        this.prepareItems();
+    }
+    connectedCallback() {
+        document.addEventListener('pointerdown', this.onDocPointerDown, true);
+        this.observer = new MutationObserver(() => {
+            this.readFilled();
+            this.prepareItems();
+            this.paintActive();
+        });
+        this.observer.observe(this.el, { childList: true });
+    }
+    disconnectedCallback() {
+        document.removeEventListener('pointerdown', this.onDocPointerDown, true);
+        this.observer?.disconnect();
+    }
+    componentDidRender() {
+        this.prepareItems();
+        this.paintActive();
+    }
+    allItems() {
+        return Array.from(this.el.children).filter(c => c.tagName === 'BS-SEARCH-ITEM' && ALL_SECTIONS.includes(c.getAttribute('slot')));
+    }
+    /** Visible items, section by section (display order), then DOM order within a section. */
+    visibleItems() {
+        if (!this.open)
+            return [];
+        const items = this.allItems();
+        return (SECTIONS[this.status] ?? []).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;
+    }
+    /** Gives every item the option role and a stable id, like `bs-list` does for its rows. */
+    prepareItems() {
+        for (const item of this.allItems()) {
+            if (item.selectionRole !== 'option')
+                item.selectionRole = 'option';
+            if (!item.id)
+                item.id = `${this.id}-opt-${++this.itemSeq}`;
+        }
+    }
+    paintActive() {
+        for (const item of this.allItems()) {
+            const on = !!this.activeId && item.id === this.activeId;
+            if (item.active !== on)
+                item.active = on;
+        }
+    }
+    setOpen(next) {
+        if (next && this.disabled)
+            return;
+        if (this.open === next)
+            return;
+        this.open = next;
+        this.bsOpenChange.emit(next);
+    }
+    setActive(item) {
+        this.activeId = item ? item.id : null;
+        this.paintActive();
+        item?.scrollIntoView?.({ block: 'nearest' });
+    }
+    onDocPointerDown = (ev) => {
+        if (!this.open)
+            return;
+        if (!ev.composedPath().includes(this.el))
+            this.setOpen(false);
+    };
+    onInput = (ev) => {
+        // The inner bs-input's own bsInput would bubble out of this host too; ours replaces it.
+        ev.stopPropagation();
+        this.value = ev.detail;
+        this.activeId = null;
+        this.bsInput.emit(ev.detail);
+        this.setOpen(true);
+    };
+    onKeyDown = (ev) => {
+        switch (ev.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                ev.preventDefault();
+                if (!this.open) {
+                    this.setOpen(true);
+                    return;
+                }
+                const items = this.enabledItems();
+                if (!items.length)
+                    return;
+                const idx = items.findIndex(i => i.id === this.activeId);
+                const down = ev.key === 'ArrowDown';
+                const next = down ? (idx + 1) % items.length : idx <= 0 ? items.length - 1 : idx - 1;
+                this.setActive(items[next]);
+                return;
+            }
+            case 'Enter': {
+                const active = this.open ? this.enabledItems().find(i => i.id === this.activeId) : undefined;
+                if (active) {
+                    ev.preventDefault();
+                    active.click();
+                }
+                else {
+                    this.bsSearch.emit(this.value);
+                    this.setOpen(false);
+                }
+                return;
+            }
+            case 'Escape':
+                if (this.open) {
+                    // Native search fields clear themselves on Escape; the first Escape only closes.
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this.setOpen(false);
+                }
+                return;
+        }
+    };
+    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') ?? '' });
+        this.setOpen(false);
+    }
+    onPanelMouseOver = (ev) => {
+        const item = ev.composedPath().find(n => n.tagName === 'BS-SEARCH-ITEM');
+        if (item && !item.disabled && item.id !== this.activeId)
+            this.setActive(item);
+    };
+    clearSearch = () => {
+        this.value = '';
+        this.bsClearSearch.emit();
+        this.inputEl?.focus();
+    };
+    sectionLabel(s) {
+        return { recent: this.recentLabel, 'jump-to': this.jumpToLabel, 'top-matches': this.topMatchesLabel, 'search-in': this.searchInLabel }[s];
+    }
+    renderHint(keys, label) {
+        return (h("span", { part: "hint", class: "bs-global-search__hint" }, keys, h("span", { class: "bs-global-search__hint-text" }, label)));
+    }
+    renderFooter() {
+        const hasTotal = typeof this.totalResults === 'number';
+        const enter = (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" }))));
+        if (this.status === 'results') {
+            return (h("div", { part: "footer", class: "bs-global-search__footer" }, h("div", { part: "see-all", class: "bs-global-search__action", onClick: this.onActionWrapperClick(() => this.seeAll()) }, h("bs-button", { class: "bs-global-search__text-button", variant: "subtle", size: "sm", onClick: () => this.seeAll() }, hasTotal ? `See all ${this.totalResults} results` : this.seeAllLabel)), h("span", { class: "bs-global-search__spacer" }), this.renderHint([enter], this.fullResultsLabel)));
+        }
+        return (h("div", { part: "footer", class: "bs-global-search__footer" }, this.renderHint([
+            h("bs-key", null, h("svg", { slot: "icon", ...svgProps }, h("path", { d: "M12 19V5M5 12l7-7 7 7" }))),
+            h("bs-key", null, h("svg", { slot: "icon", ...svgProps }, h("path", { d: "M12 5v14M5 12l7 7 7-7" }))),
+        ], this.navigateLabel), this.renderHint([enter], this.searchLabel), this.renderHint([h("bs-key", { label: "Esc" })], this.closeLabel), h("span", { class: "bs-global-search__spacer" }), this.filled.recent && (h("div", { part: "clear-recent", class: "bs-global-search__action", onClick: this.onActionWrapperClick(() => this.bsClearRecent.emit()) }, h("bs-button", { class: "bs-global-search__text-button", variant: "subtle", size: "sm", onClick: () => this.bsClearRecent.emit() }, this.clearRecentLabel)))));
+    }
+    seeAll() {
+        this.bsSeeAll.emit();
+        this.setOpen(false);
+    }
+    /** Makes the whole 44px wrapper clickable while the button itself is 32px high. */
+    onActionWrapperClick = (fn) => (ev) => {
+        if (ev.target === ev.currentTarget)
+            fn();
+    };
+    renderStateBlock(kind) {
+        const isEmpty = kind === 'empty';
+        return (h("slot", { name: kind }, h("bs-empty-state", { part: "empty", intent: isEmpty ? 'default' : 'error', heading: isEmpty ? this.emptyHeading : this.errorHeading, description: isEmpty ? this.emptyDescription : this.errorDescription }, isEmpty ? (h("svg", { slot: "icon", ...svgProps }, h("circle", { cx: "11", cy: "11", r: "7" }), h("path", { d: "m20 20-3.5-3.5" }))) : (h("svg", { slot: "icon", ...svgProps }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M12 7.5v5M12 16.2v.1" }))), h("bs-button", { slot: "action", variant: "outlined", onClick: () => (isEmpty ? this.clearSearch() : this.bsRetry.emit()) }, isEmpty ? this.clearSearchLabel : this.retryLabel))));
+    }
+    announcement() {
+        if (!this.open)
+            return '';
+        if (this.status === 'results')
+            return typeof this.totalResults === 'number' ? `${this.totalResults} results` : '';
+        if (this.status === 'empty')
+            return this.emptyHeading;
+        if (this.status === 'error')
+            return this.errorHeading;
+        return '';
+    }
+    render() {
+        const sections = (SECTIONS[this.status] ?? []).filter(s => this.filled[s]);
+        const showList = sections.length > 0;
+        const listId = `${this.id}-listbox`;
+        const isList = this.status === 'default' || this.status === 'results';
+        const showFooter = this.showFooter && isList;
+        return (h("div", { key: '48912c3c2e6fdfefa05d234fa037e4b47e36cbd9', class: "bs-global-search" }, h("div", { key: 'aeb8a5d41463b5df24502aecb85290f2535184d6', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, h("bs-input", { key: '0aec5505a09ca9fa08e152983b17e3a35619e5ce', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (h("div", { key: 'c9b1589c7602b0522a5a33d895e50e2f57ae7e66', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (h("div", { key: 'aa49f77c49ea3aa5337a01aa8cf2e760ac8f6125', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
+            const hid = `${this.id}-h-${s}`;
+            return (h("div", { part: "section", class: "bs-global-search__section", role: "group", "aria-labelledby": hid }, h("div", { part: "section-header", id: hid, class: "bs-global-search__section-header" }, this.sectionLabel(s)), h("slot", { name: s })));
+        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), h("span", { key: '591953d910a7986705dde045c325c3043df1387b', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
+    }
+    static get is() { return "bs-global-search"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-global-search.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-global-search.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The query. Two-way with the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder of the field (also its accessible name unless `label` is set)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Search customers, orders, products\u2026'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the search field. Falls back to the placeholder. `bs-input` has no aria-label prop, so this names the combobox wrapper."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the field; the panel cannot open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dropdown panel is open. Opens on focus, click and typing; closes on Escape, outside click and selection."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsGlobalSearchStatus",
+                    "resolved": "\"default\" | \"empty\" | \"error\" | \"results\"",
+                    "references": {
+                        "BsGlobalSearchStatus": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-global-search/bs-global-search.tsx",
+                            "id": "src/components/bs-global-search/bs-global-search.tsx::BsGlobalSearchStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which view the panel shows. You choose it; nothing is inferred from `value`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "totalResults": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of results (status `results`): shown as \"See all {n} results\" and announced to screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-results"
+            },
+            "showFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the footer (hints and the Clear recent / See all button) for the `default` and `results` views."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-footer",
+                "defaultValue": "true"
+            },
+            "listLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the suggestions listbox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "list-label",
+                "defaultValue": "'Search suggestions'"
+            },
+            "recentLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header of the `recent` section."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "recent-label",
+                "defaultValue": "'Recent searches'"
+            },
+            "jumpToLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header of the `jump-to` section."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "jump-to-label",
+                "defaultValue": "'Jump to'"
+            },
+            "topMatchesLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header of the `top-matches` section."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "top-matches-label",
+                "defaultValue": "'Top matches'"
+            },
+            "searchInLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header of the `search-in` section."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-in-label",
+                "defaultValue": "'Search in'"
+            },
+            "navigateLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Footer hint text after the arrow keys."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "navigate-label",
+                "defaultValue": "'Navigate'"
+            },
+            "searchLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Footer hint text after the Enter key (default view)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-label",
+                "defaultValue": "'Search'"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Footer hint text after the Esc key."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Close'"
+            },
+            "fullResultsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Footer hint text after the Enter key (results view)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-results-label",
+                "defaultValue": "'Full results'"
+            },
+            "clearRecentLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the footer button that clears recent searches."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-recent-label",
+                "defaultValue": "'Clear recent'"
+            },
+            "seeAllLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the footer button of the results view, when `totalResults` is not set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "see-all-label",
+                "defaultValue": "'See all results'"
+            },
+            "emptyHeading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading of the built-in empty state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-heading",
+                "defaultValue": "'No results'"
+            },
+            "emptyDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Description of the built-in empty state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-description",
+                "defaultValue": "'Try a different search.'"
+            },
+            "clearSearchLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the empty state's action."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-search-label",
+                "defaultValue": "'Clear search'"
+            },
+            "errorHeading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading of the built-in error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-heading",
+                "defaultValue": "'Search isn\u2019t available right now'"
+            },
+            "errorDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Description of the built-in error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-description",
+                "defaultValue": "'We couldn\u2019t reach the server. Your query is kept \u2014 try again in a moment.'"
+            },
+            "retryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the error state's action."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "retry-label",
+                "defaultValue": "'Try again'"
+            }
+        };
+    }
+    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 the query. The component filters nothing itself."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "bsSearch",
+                "name": "bsSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on Enter with no highlighted item, with the query."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "bsSelect",
+                "name": "bsSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when an item is chosen (click or Enter), with its `value` and section (slot name)."
+                },
+                "complexType": {
+                    "original": "BsGlobalSearchSelectDetail",
+                    "resolved": "BsGlobalSearchSelectDetail",
+                    "references": {
+                        "BsGlobalSearchSelectDetail": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-global-search/bs-global-search.tsx",
+                            "id": "src/components/bs-global-search/bs-global-search.tsx::BsGlobalSearchSelectDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "bsOpenChange",
+                "name": "bsOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the panel opens or closes through user interaction, with the new state."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "bsClearRecent",
+                "name": "bsClearRecent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when \"Clear recent\" is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsClearSearch",
+                "name": "bsClearSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the empty state's \"Clear search\" is pressed; the value is also cleared."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsSeeAll",
+                "name": "bsSeeAll",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when \"See all results\" is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsRetry",
+                "name": "bsRetry",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the error state's \"Try again\" is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "status",
+                "methodName": "resetActive"
+            }, {
+                "propName": "open",
+                "methodName": "resetActive"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bsItemSelect",
+                "method": "onItemSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}