@brandsync/wc 1.16.0 → 1.18.0

package/dist/types/components/bs-command-palette/bs-command-palette.d.ts

@@ -0,0 +1,172 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsCommandPaletteStatus = 'default' | 'results' | 'empty' | 'loading';
+export type BsCommandPaletteSection = 'recent' | 'suggested' | 'commands' | 'navigation' | 'records' | 'try-instead';
+export interface BsCommandPaletteInputDetail {
+    /** The raw field value, including a leading `>`. */
+    value: string;
+    /** The value without a leading `>`, trimmed. */
+    query: string;
+    commandsOnly: boolean;
+}
+export interface BsCommandPaletteSelectDetail {
+    value?: string;
+    /** The slot name of the section the item sits in. */
+    section: string;
+    commandsOnly: boolean;
+}
+/**
+ * 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 declare class BsCommandPalette {
+    el: HTMLElement;
+    private id;
+    private itemSeq;
+    private observer?;
+    private dialogEl?;
+    private comboEl?;
+    private inputEl?;
+    private previousFocus?;
+    private userMoved;
+    /** The field value. Two-way. A leading `>` means commands-only mode. */
+    value: string;
+    /** Whether the palette is open. */
+    open: boolean;
+    /** Derived from `value` (it starts with `>`). Read-only; set `value` instead. */
+    commandsOnly: boolean;
+    /** 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: BsCommandPaletteStatus;
+    /** Accessible name of the dialog. */
+    label: string;
+    /** Placeholder of the field. */
+    placeholder: string;
+    /** Keep the palette open after an item is chosen. */
+    keepOpenOnSelect: boolean;
+    /** Shows the footer of keyboard hints. */
+    showFooter: boolean;
+    /** Global shortcut that toggles the palette, e.g. `mod+k` (`mod` is Cmd on Mac, Ctrl elsewhere). Empty = off. */
+    hotkey: string;
+    /** Nested scope: shows this text as a chip before the field. Backspace on an empty field emits `bsScopeExit`. */
+    scopeLabel?: string;
+    /** Section headers. */
+    recentLabel: string;
+    suggestedLabel: string;
+    commandsLabel: string;
+    navigationLabel: string;
+    recordsLabel: string;
+    tryInsteadLabel: string;
+    /** Footer hint texts. */
+    navigateLabel: string;
+    openLabel: string;
+    closeLabel: string;
+    commandsOnlyLabel: string;
+    allResultsLabel: string;
+    /** No-results view copy. Include the query in `emptyHeading` yourself. */
+    emptyHeading: string;
+    emptyDescription: string;
+    /** A suggested correction; the "Did you mean" line shows while it is set. */
+    didYouMean?: string;
+    didYouMeanLabel: string;
+    /** Text of the loading row. */
+    loadingLabel: string;
+    /** Accessible name of the results listbox. */
+    listLabel: string;
+    filled: Record<BsCommandPaletteSection, boolean>;
+    activeId: string | null;
+    /** Fires on every keystroke with `{ value, query, commandsOnly }`. */
+    bsInput: EventEmitter<BsCommandPaletteInputDetail>;
+    /** Fires when an item is chosen (click or Enter) with `{ value, section, commandsOnly }`. */
+    bsSelect: EventEmitter<BsCommandPaletteSelectDetail>;
+    /** Fires when the "Did you mean" suggestion is pressed, with its text. */
+    bsSuggestion: EventEmitter<string>;
+    /** Fires when the palette opens or closes through user interaction (hotkey, Esc, scrim, selection). */
+    bsOpenChange: EventEmitter<boolean>;
+    /** Fires on Backspace in an empty field while `scopeLabel` is set. */
+    bsScopeExit: EventEmitter<void>;
+    /** Opens the palette. */
+    show(): Promise<void>;
+    /** Closes the palette and restores focus. */
+    close(): Promise<void>;
+    onValueChange(): void;
+    resetMoved(): void;
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidRender(): void;
+    private syncDialog;
+    private focusInput;
+    private onDocKeyDown;
+    private setOpen;
+    private allItems;
+    private shownSections;
+    private visibleItems;
+    private enabledItems;
+    private readFilled;
+    private prepareItems;
+    /** First enabled item is active unless the user moved the highlight (and it still exists). */
+    private syncActive;
+    private setActive;
+    private onInput;
+    private onKeyDown;
+    private onDialogKeyDown;
+    /** Native cancel (Esc through another path): handle it ourselves so state and focus stay in sync. */
+    private onCancel;
+    /** A click that lands on the `<dialog>` itself is a click on the backdrop (the scrim). */
+    private onDialogClick;
+    onItemSelect(ev: CustomEvent<string | undefined>): void;
+    private onResultsMouseOver;
+    private sectionLabel;
+    private renderSection;
+    private renderHint;
+    private renderFooter;
+    private renderEmpty;
+    private announcement;
+    render(): any;
+}

package/dist/types/components/bs-command-palette/bs-command-palette.stories.d.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+/** Inline icon paths (no external URLs). */
+export declare const ICON_PATHS: {
+    users: string;
+    invoice: string;
+    plus: string;
+    package: string;
+    store: string;
+    arrow: string;
+    moon: string;
+    sun: string;
+    monitor: string;
+    download: string;
+    search: string;
+    list: string;
+};
+export interface PaletteRow {
+    value: string;
+    section: string;
+    label: string;
+    /** Bold part of the label. */
+    match?: string;
+    rest?: string;
+    description?: string;
+    trailing?: string;
+    keys?: string;
+    icon: keyof typeof ICON_PATHS;
+}
+/** Figma "Command Palette" data, shared by the stories and the tests. */
+export declare const DEFAULT_ROWS: PaletteRow[];
+export declare const SEARCHING_ROWS: PaletteRow[];
+export declare const COMMANDS_ONLY_ROWS: PaletteRow[];
+export declare const TRY_INSTEAD_ROWS: PaletteRow[];
+interface BsCommandPaletteArgs {
+    open: boolean;
+    value: string;
+    status: 'default' | 'results' | 'empty' | 'loading';
+    placeholder: string;
+    showFooter: boolean;
+    keepOpenOnSelect: boolean;
+    hotkey: string;
+    scopeLabel?: string;
+    emptyHeading: string;
+    emptyDescription: string;
+    didYouMean?: string;
+}
+declare const meta: Meta<BsCommandPaletteArgs>;
+export default meta;
+type Story = StoryObj<BsCommandPaletteArgs>;
+export declare const Closed: Story;
+export declare const Default: Story;
+export declare const Searching: Story;
+export declare const CommandsOnly: Story;
+export declare const NoResults: Story;
+export declare const Loading: Story;
+export declare const Interactive: Story;

package/dist/types/components/bs-compact-menu-block/bs-compact-menu-block.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-compact-menu-block/bs-compact-menu-block.d.ts

@@ -0,0 +1,28 @@
+/**
+ * A plain text entry in a mega menu: one line, no icon. Matches the Figma "Compact menu block" component
+ * (Default, Hover, Pressed and Focused).
+ *
+ * The block is always a native button and only emits events; it never navigates. Hover, pressed and focus come from the
+ * native element.
+ *
+ * ## When to use
+ * - A dense list of destinations in a mega menu, usually inside `bs-mega-menu` with `type="compact"`.
+ *
+ * ## When not to use
+ * - A destination that needs an icon or a description -- use `bs-menu-block`.
+ * - A command in a dropdown list -- use `bs-menu-item`.
+ *
+ * @part container - The button.
+ * @prop --bs-compact-menu-block-padding - Padding inside the block. Aliased to `--bs-spacing-100`.
+ * @prop --bs-compact-menu-block-radius - Corner radius. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-compact-menu-block-bg - Resting background. `transparent`.
+ * @prop --bs-compact-menu-block-bg-hover - Aliased to `--bs-surface-hover`.
+ * @prop --bs-compact-menu-block-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-compact-menu-block-color - Text colour. Aliased to `--bs-text-default`.
+ * @prop --bs-compact-menu-block-focus-ring - Focus ring colour. Aliased to `--bs-border-info`.
+ */
+export declare class BsCompactMenuBlock {
+    /** The text, and the accessible name. */
+    name: string;
+    render(): any;
+}

package/dist/types/components/bs-compact-menu-block/bs-compact-menu-block.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsCompactMenuBlockArgs {
+    name: string;
+}
+declare const meta: Meta<BsCompactMenuBlockArgs>;
+export default meta;
+type Story = StoryObj<BsCompactMenuBlockArgs>;
+export declare const Default: Story;
+/** A list of blocks. Hover, pressed and focus come from the native element: point at a block, press it, or Tab to it. */
+export declare const States: Story;

package/dist/types/components/bs-company-switcher/bs-company-switcher.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-company-switcher/bs-company-switcher.d.ts

@@ -0,0 +1,130 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface BsCompany {
+    id: string;
+    name: string;
+    /** Organisation number, shown as "Org. no. {orgNumber}". */
+    orgNumber: string;
+    /** Country code shown before the org. number, e.g. "NO". */
+    country: string;
+}
+/**
+ * A company (tenant) switcher: a trigger showing the current company, and a panel to find and switch to
+ * another one. The panel has a search field, the current / recent / all groups, a filtered "matches" view,
+ * a no-results state and a footer with "Manage Companies" and "Add companies" actions.
+ *
+ * Built from `bs-popover` (open/close, Escape, outside click, flipping), `bs-card` (panel surface),
+ * `bs-input` (search), `bs-list-item` (rows), `bs-avatar` (initials), `bs-spinner` (switching),
+ * `bs-empty-state` (no results), `bs-divider` and `bs-button` (footer). The trigger is a native `<button>`:
+ * no `bs-*` component is a composite "avatar + two lines + chevron" button.
+ *
+ * ## When to use
+ * - An app header or side navigation where a user belongs to several companies and works in one at a time.
+ *
+ * ## When not to use
+ * - Picking a value in a form -- use `bs-input type="dropdown"`.
+ * - Switching between a handful of fixed views -- use `bs-tab`.
+ *
+ * `companies` is an array and must be set as a JS property. You own the data and the switch itself: listen to
+ * `bsCompanySwitch`, do the work, then update `currentId`. To show the switching state set `switchingId`
+ * (from the `bsCompanySwitch` handler, or later) and the panel stays open until you clear it and set `open`
+ * to `false`. If `switchingId` is not set by the time the handler returns, the panel closes immediately.
+ *
+ * @part trigger - The trigger button.
+ * @part avatar - The trigger's `bs-avatar`.
+ * @part name - The company name in the trigger.
+ * @part subtitle - The org. number (or "Switching…") line in the trigger.
+ * @part panel - The panel surface (`bs-card`).
+ * @part search - The search field wrapper (combobox).
+ * @part list - The listbox.
+ * @part group - One group (header and rows).
+ * @part group-header - A group header.
+ * @part row - A company row (`bs-list-item`).
+ * @part empty - The no-results state (`bs-empty-state`).
+ * @part footer - The footer actions.
+ * @prop --bs-company-switcher-width - Trigger width. Defaults to `260px` (Figma); capped at 100%.
+ * @prop --bs-company-switcher-panel-width - Panel width. Defaults to `360px` (Figma); capped at the viewport.
+ * @prop --bs-company-switcher-radius - Trigger and panel corner radius. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-company-switcher-trigger-bg - Trigger resting background. `transparent`.
+ * @prop --bs-company-switcher-trigger-bg-hover - Aliased to `--bs-surface-hover`.
+ * @prop --bs-company-switcher-trigger-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-company-switcher-trigger-bg-open - Aliased to `--bs-surface-selected`.
+ * @prop --bs-company-switcher-focus-ring - Trigger focus outline. Aliased to `--bs-border-neutral-focus`.
+ * @prop --bs-company-switcher-panel-bg - Panel background. Aliased to `--bs-surface-base`.
+ * @prop --bs-company-switcher-panel-border-color - Panel border. Aliased to `--bs-border-default`.
+ * @prop --bs-company-switcher-shadow - Panel shadow. Aliased to `--bs-shadow-md`.
+ * @prop --bs-company-switcher-max-height - Maximum height of the scrolling list. Defaults to `320px`.
+ * @prop --bs-company-switcher-text-color - Names. Aliased to `--bs-text-default`.
+ * @prop --bs-company-switcher-muted-color - Org. numbers. Aliased to `--bs-text-secondary`.
+ * @prop --bs-company-switcher-header-color - Group headers. Aliased to `--bs-text-muted`.
+ * @prop --bs-company-switcher-z-index - Panel stacking. Aliased to `--bs-z-index-popover`.
+ */
+export declare class BsCompanySwitcher {
+    el: HTMLElement;
+    private id;
+    private inputEl?;
+    private focusSearch;
+    /** The companies the user can switch between. JS property only (an array cannot be an attribute). */
+    companies: BsCompany[];
+    /** `id` of the current company. */
+    currentId?: string;
+    /** `id`s of recently used companies, most recent first. The current company is not repeated in the Recent group. */
+    recentIds: string[];
+    /** `id` of the company being switched to. Shows the switching state: a spinner in the trigger and on that row. */
+    switchingId?: string;
+    /** Whether the panel is open. */
+    open: boolean;
+    /** Text of the trigger when there is no current company. */
+    placeholderLabel: string;
+    /** Placeholder (and accessible name) of the search field. */
+    searchPlaceholder: string;
+    /** Accessible name of the company listbox. */
+    listLabel: string;
+    /** Header of the current company group. */
+    currentLabel: string;
+    /** Header of the recent companies group. */
+    recentLabel: string;
+    /** Header of the all companies group (the count is appended). */
+    allLabel: string;
+    /** Header of the search view when there are several matches ("3 matches"). */
+    matchesLabel: string;
+    /** Header of the search view when there is one match ("1 match"). */
+    matchLabel: string;
+    /** Prefix of the org. number, e.g. "Org. no.". */
+    orgNumberLabel: string;
+    /** Trigger subtitle while switching. */
+    switchingLabel: string;
+    /** No-results heading. `{query}` is replaced by the query. */
+    emptyHeading: string;
+    /** No-results description. */
+    emptyDescription: string;
+    /** Text of the "Manage Companies" footer button. */
+    manageLabel: string;
+    /** Text of the "Add companies" footer button. */
+    addLabel: string;
+    query: string;
+    activeId: string | null;
+    /** Fires when a company other than the current one is chosen (click or Enter), with the company. */
+    bsCompanySwitch: EventEmitter<BsCompany>;
+    /** Fires when "Manage Companies" is pressed. */
+    bsManageCompanies: EventEmitter<void>;
+    /** Fires when "Add companies" is pressed. */
+    bsAddCompanies: EventEmitter<void>;
+    /** Fires when the panel opens or closes through user interaction, with the new state. */
+    bsOpenChange: EventEmitter<boolean>;
+    onOpen(next: boolean): void;
+    componentDidRender(): void;
+    private byId;
+    private get q();
+    private matches;
+    private groups;
+    private rowId;
+    private setOpen;
+    private choose;
+    private onPopoverOpenChange;
+    private onInput;
+    private onKeyDown;
+    private subtitle;
+    private renderTrigger;
+    private renderRow;
+    render(): any;
+}

package/dist/types/components/bs-company-switcher/bs-company-switcher.stories.d.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+/** Sample data (invented for the stories and tests, not real organisations). */
+export declare const COMPANIES: {
+    id: string;
+    name: string;
+    orgNumber: string;
+    country: string;
+}[];
+export declare const RECENT_IDS: string[];
+interface BsCompanySwitcherArgs {
+    currentId?: string;
+    recentIds: string[];
+    switchingId?: string;
+    open: boolean;
+}
+declare const meta: Meta<BsCompanySwitcherArgs>;
+export default meta;
+type Story = StoryObj<BsCompanySwitcherArgs>;
+export declare const Closed: Story;
+export declare const Open: Story;
+export declare const Switching: Story;
+export declare const SwitchingClosed: Story;
+export declare const Search: Story;
+export declare const NoResults: Story;
+export declare const Interactive: Story;

package/dist/types/components/bs-empty-state/bs-empty-state.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-empty-state/bs-empty-state.d.ts

@@ -0,0 +1,50 @@
+import type { BsIconTileIntent } from '../bs-icon-tile/bs-icon-tile';
+/**
+ * A centered "nothing to show" block: an icon tile, a heading, a description and an optional action.
+ * Used for empty lists, "no results" and error states inside a panel, card or page section.
+ *
+ * Built from `bs-icon-tile` (and, in your `action` slot, usually a `bs-button`).
+ *
+ * The component has no role. Live regions belong on a wrapper you control (e.g. `role="status"` on the
+ * element that stays in the DOM while this block appears and disappears).
+ *
+ * ## When to use
+ * - A list, table or search result that has nothing to show, or failed to load.
+ *
+ * ## When not to use
+ * - A full-page error with a status code -- use `bs-error-page`.
+ * - A transient message -- use `bs-toast` or `bs-snackbar`.
+ *
+ * @slot icon - The glyph inside the icon tile (24px, `currentColor`). Falls back to the tile's intent glyph.
+ * @slot - The description (overrides the `description` prop).
+ * @slot action - An optional action, e.g. `<bs-button variant="outlined">`.
+ * @part container - The centered column.
+ * @part icon - The icon tile (`bs-icon-tile`).
+ * @part heading - The heading element.
+ * @part description - The description paragraph.
+ * @part action - The action wrapper (only rendered while the `action` slot is filled).
+ * @prop --bs-empty-state-padding-y - Vertical padding. Aliased to `--bs-spacing-700` (56px).
+ * @prop --bs-empty-state-padding-x - Horizontal padding. Aliased to `--bs-spacing-300` (24px).
+ * @prop --bs-empty-state-gap - Gap between tile, heading, description and action. Aliased to `--bs-spacing-150`.
+ * @prop --bs-empty-state-heading-color - Aliased to `--bs-text-default`.
+ * @prop --bs-empty-state-description-color - Aliased to `--bs-text-secondary`.
+ */
+export declare class BsEmptyState {
+    el: HTMLElement;
+    /** The heading text. */
+    heading?: string;
+    /** The description text. The default slot overrides it. */
+    description?: string;
+    /** Colour and default glyph of the icon tile. Use `error` for failures. */
+    intent: BsIconTileIntent;
+    /** Heading level, 2 to 6 (renders `h2`..`h6`). Pick the one that fits the page outline. */
+    headingLevel: 2 | 3 | 4 | 5 | 6;
+    hasIcon: boolean;
+    hasDescriptionSlot: boolean;
+    hasAction: boolean;
+    private observer?;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    private readSlots;
+    render(): any;
+}

package/dist/types/components/bs-empty-state/bs-empty-state.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsEmptyStateArgs {
+    heading: string;
+    description: string;
+    intent: 'default' | 'success' | 'warning' | 'error' | 'brand' | 'information';
+    headingLevel: number;
+}
+declare const meta: Meta<BsEmptyStateArgs>;
+export default meta;
+type Story = StoryObj<BsEmptyStateArgs>;
+export declare const NoResults: Story;
+export declare const Error: Story;
+export declare const WithoutAction: Story;

package/dist/types/components/bs-global-search/bs-global-search.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-global-search/bs-global-search.d.ts

@@ -0,0 +1,166 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsGlobalSearchStatus = 'default' | 'results' | 'empty' | 'error';
+export type BsGlobalSearchSection = 'recent' | 'jump-to' | 'top-matches' | 'search-in';
+export interface BsGlobalSearchSelectDetail {
+    value?: string;
+    /** The slot name of the section the item sits in. */
+    section: string;
+}
+/**
+ * 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 declare class BsGlobalSearch {
+    el: HTMLElement;
+    private id;
+    private itemSeq;
+    private observer?;
+    private inputEl?;
+    /** The query. Two-way with the field. */
+    value: string;
+    /** Placeholder of the field (also its accessible name unless `label` is set). */
+    placeholder: string;
+    /** 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?: string;
+    /** Disables the field; the panel cannot open. */
+    disabled: boolean;
+    /** Whether the dropdown panel is open. Opens on focus, click and typing; closes on Escape, outside click and selection. */
+    open: boolean;
+    /** Which view the panel shows. You choose it; nothing is inferred from `value`. */
+    status: BsGlobalSearchStatus;
+    /** Total number of results (status `results`): shown as "See all {n} results" and announced to screen readers. */
+    totalResults?: number;
+    /** Shows the footer (hints and the Clear recent / See all button) for the `default` and `results` views. */
+    showFooter: boolean;
+    /** Accessible name of the suggestions listbox. */
+    listLabel: string;
+    /** Header of the `recent` section. */
+    recentLabel: string;
+    /** Header of the `jump-to` section. */
+    jumpToLabel: string;
+    /** Header of the `top-matches` section. */
+    topMatchesLabel: string;
+    /** Header of the `search-in` section. */
+    searchInLabel: string;
+    /** Footer hint text after the arrow keys. */
+    navigateLabel: string;
+    /** Footer hint text after the Enter key (default view). */
+    searchLabel: string;
+    /** Footer hint text after the Esc key. */
+    closeLabel: string;
+    /** Footer hint text after the Enter key (results view). */
+    fullResultsLabel: string;
+    /** Text of the footer button that clears recent searches. */
+    clearRecentLabel: string;
+    /** Text of the footer button of the results view, when `totalResults` is not set. */
+    seeAllLabel: string;
+    /** Heading of the built-in empty state. */
+    emptyHeading: string;
+    /** Description of the built-in empty state. */
+    emptyDescription: string;
+    /** Text of the empty state's action. */
+    clearSearchLabel: string;
+    /** Heading of the built-in error state. */
+    errorHeading: string;
+    /** Description of the built-in error state. */
+    errorDescription: string;
+    /** Text of the error state's action. */
+    retryLabel: string;
+    /** Which sections currently have content in their slot. */
+    filled: Record<BsGlobalSearchSection, boolean>;
+    /** Id of the highlighted item. */
+    activeId: string | null;
+    /** Fires on every keystroke with the query. The component filters nothing itself. */
+    bsInput: EventEmitter<string>;
+    /** Fires on Enter with no highlighted item, with the query. */
+    bsSearch: EventEmitter<string>;
+    /** Fires when an item is chosen (click or Enter), with its `value` and section (slot name). */
+    bsSelect: EventEmitter<BsGlobalSearchSelectDetail>;
+    /** Fires when the panel opens or closes through user interaction, with the new state. */
+    bsOpenChange: EventEmitter<boolean>;
+    /** Fires when "Clear recent" is pressed. */
+    bsClearRecent: EventEmitter<void>;
+    /** Fires when the empty state's "Clear search" is pressed; the value is also cleared. */
+    bsClearSearch: EventEmitter<void>;
+    /** Fires when "See all results" is pressed. */
+    bsSeeAll: EventEmitter<void>;
+    /** Fires when the error state's "Try again" is pressed. */
+    bsRetry: EventEmitter<void>;
+    resetActive(): void;
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidRender(): void;
+    private allItems;
+    /** Visible items, section by section (display order), then DOM order within a section. */
+    private visibleItems;
+    private enabledItems;
+    private readFilled;
+    /** Gives every item the option role and a stable id, like `bs-list` does for its rows. */
+    private prepareItems;
+    private paintActive;
+    private setOpen;
+    private setActive;
+    private onDocPointerDown;
+    private onInput;
+    private onKeyDown;
+    onItemSelect(ev: CustomEvent<string | undefined>): void;
+    private onPanelMouseOver;
+    private clearSearch;
+    private sectionLabel;
+    private renderHint;
+    private renderFooter;
+    private seeAll;
+    /** Makes the whole 44px wrapper clickable while the button itself is 32px high. */
+    private onActionWrapperClick;
+    private renderStateBlock;
+    private announcement;
+    render(): any;
+}