@brandsync/wc 1.16.0 → 1.17.0

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-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;
+}

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+/** Inline icon paths (no external URLs). */
+export declare const ICON_PATHS: {
+    history: string;
+    users: string;
+    package: string;
+    receipt: string;
+    invoice: string;
+    search: string;
+};
+/** Figma "Global Search" data, shared by the stories. */
+export declare const RECENT: {
+    value: string;
+    label: string;
+    trailing: string;
+}[];
+export declare const JUMP_TO: {
+    value: string;
+    label: string;
+    trailing: string;
+    icon: string;
+}[];
+export declare const TOP_MATCHES: ({
+    value: string;
+    match: string;
+    rest: string;
+    description: string;
+    trailing: string;
+    icon: string;
+    prefix?: undefined;
+} | {
+    value: string;
+    prefix: string;
+    match: string;
+    rest: string;
+    description: string;
+    trailing: string;
+    icon: string;
+})[];
+export declare const SEARCH_IN: {
+    value: string;
+    label: string;
+    trailing: string;
+}[];
+interface BsGlobalSearchArgs {
+    value: string;
+    open: boolean;
+    status: 'default' | 'results' | 'empty' | 'error';
+    totalResults?: number;
+    placeholder: string;
+    disabled: boolean;
+}
+declare const meta: Meta<BsGlobalSearchArgs>;
+export default meta;
+type Story = StoryObj<BsGlobalSearchArgs>;
+export declare const Closed: Story;
+export declare const Default: Story;
+export declare const Results: Story;
+export declare const NoResults: Story;
+export declare const Error: Story;
+export declare const Interactive: Story;

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

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

package/dist/types/components/bs-key/bs-key.d.ts

@@ -0,0 +1,36 @@
+/**
+ * One key of a keyboard shortcut, e.g. `Ctrl`, `K` or `Esc` -- rendered as a `<kbd>` keycap.
+ * Shows a text label, or an icon (e.g. a return arrow) via the `icon` slot.
+ *
+ * ## When to use
+ * - Showing a keyboard shortcut hint next to a control or inside a search field.
+ * - Alone for a single key, or as the children of `bs-key-caps` for a multi-key shortcut.
+ *
+ * ## When not to use
+ * - As a button or any clickable control -- a key is a static hint, not interactive.
+ *
+ * @slot - The key's label text (overrides the `label` prop), e.g. `Ctrl`.
+ * @slot icon - An icon shown instead of the label (16px), e.g. a return arrow.
+ * @part container - The `<kbd>` cap.
+ * @part label - The label text wrapper (not rendered while the `icon` slot is filled).
+ * @part icon - The icon wrapper (only rendered while the `icon` slot is filled).
+ * @prop --bs-key-bg - Cap background. Aliased to `--bs-surface-base`.
+ * @prop --bs-key-border-color - Cap border colour. Aliased to `--bs-border-default`.
+ * @prop --bs-key-radius - Cap corner radius. Aliased to `--bs-border-radius-50`.
+ * @prop --bs-key-padding-x - Horizontal padding. Aliased to `--bs-spacing-75`.
+ * @prop --bs-key-padding-y - Vertical padding. Aliased to `--bs-spacing-50`.
+ * @prop --bs-key-min-width - Smallest cap width, so single characters keep a keycap shape. Defaults to `25px` (Figma).
+ * @prop --bs-key-color - Label colour. Aliased to `--bs-text-secondary`.
+ * @prop --bs-key-font-size - Label size. Aliased to `--bs-font-size-xs` (12px).
+ * @prop --bs-key-icon-size - Icon size. Defaults to `16px` (Figma).
+ */
+export declare class BsKey {
+    el: HTMLElement;
+    /** The key's text, e.g. `Ctrl`. The default slot overrides it. */
+    label?: string;
+    /** Tracks whether the `icon` slot has content, so the label is replaced by the icon. */
+    hasIcon: boolean;
+    componentWillLoad(): void;
+    private onIconSlotChange;
+    render(): any;
+}

package/dist/types/components/bs-key/bs-key.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsKeyArgs {
+    label: string;
+}
+declare const meta: Meta<BsKeyArgs>;
+export default meta;
+type Story = StoryObj<BsKeyArgs>;
+export declare const Text: Story;
+export declare const Icon: Story;
+export declare const SingleCharacter: Story;
+export declare const LabelFromSlot: Story;

package/dist/types/components/bs-key-caps/bs-key-caps.cmp.test.d.ts

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

package/dist/types/components/bs-key-caps/bs-key-caps.d.ts

@@ -0,0 +1,31 @@
+/**
+ * A keyboard shortcut of one to four keys joined by "+", e.g. `Ctrl + K`. Give it a `keys` string
+ * (`"Ctrl+Shift+K"`) or array (`['Ctrl', '+']` for a literal plus key), or slot your own `bs-key`
+ * elements -- for example when a key is an icon.
+ *
+ * ## When to use
+ * - A shortcut hint beside a menu item, button or inside a search field.
+ *
+ * ## When not to use
+ * - Instructions that need prose ("press Enter to submit") -- write a sentence and use a single `bs-key` inline.
+ * - Anything interactive -- keys are static hints.
+ *
+ * @slot - `bs-key` elements. A "+" separator is drawn before every key except the first.
+ * @part container - The group wrapper.
+ * @prop --bs-key-caps-gap - Gap between keys and separators. Aliased to `--bs-spacing-100`.
+ * @prop --bs-key-caps-separator-color - Colour of the "+" separators. Aliased to `--bs-text-muted`.
+ * @prop --bs-key-caps-disabled-opacity - Opacity of the whole shortcut while `disabled`. Defaults to `0.38` (Figma).
+ */
+export declare class BsKeyCaps {
+    /**
+     * The keys as text. A string is split on `+` (`"Ctrl+K"`); use an array to include a literal
+     * plus key. Ignored when `bs-key` elements are slotted instead. Figma defines one to four keys.
+     */
+    keys?: string | string[];
+    /** Dims the whole shortcut and marks it `aria-disabled`. */
+    disabled: boolean;
+    /** Accessible name of the shortcut, e.g. "Control plus K". Defaults to the keys joined with " plus ". */
+    label?: string;
+    private keyList;
+    render(): any;
+}

package/dist/types/components/bs-key-caps/bs-key-caps.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsKeyCapsArgs {
+    keys: string;
+    disabled: boolean;
+}
+declare const meta: Meta<BsKeyCapsArgs>;
+export default meta;
+type Story = StoryObj<BsKeyCapsArgs>;
+export declare const Default: Story;
+export declare const OneKey: Story;
+export declare const ThreeKeys: Story;
+export declare const FourKeys: Story;
+export declare const Disabled: Story;
+export declare const WithIconKey: Story;
+export declare const LiteralPlusKey: Story;

package/dist/types/components/bs-keyboard-shortcuts/bs-keyboard-shortcuts.cmp.test.d.ts

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

package/dist/types/components/bs-keyboard-shortcuts/bs-keyboard-shortcuts.d.ts

@@ -0,0 +1,95 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface BsShortcut {
+    action: string;
+    keys: string | string[];
+    /** Single-key shortcut (turned off by the single-key switch). Defaults to: exactly one key of one character. */
+    singleKey?: boolean;
+    disabled?: boolean;
+}
+export interface BsShortcutGroup {
+    title: string;
+    shortcuts: BsShortcut[];
+}
+/**
+ * A searchable reference panel of keyboard shortcuts: heading and close button, a search field, an
+ * optional single-key on/off switch, shortcut groups in two columns and a footer hint. It is a
+ * surface, not a modal -- place it inside `bs-dialog` or a popover.
+ *
+ * Built from `bs-card`, `bs-icon-button`, `bs-input`, `bs-switch`, `bs-shortcut-row` (and so
+ * `bs-key-caps` / `bs-key`).
+ *
+ * ## When to use
+ * - A "press ? to see shortcuts" help overlay for an app with many shortcuts.
+ *
+ * ## When not to use
+ * - A long-form help page or documentation -- link to it instead.
+ * - A list of commands the user can run from it -- use `bs-menu`.
+ *
+ * @slot heading - Replaces the heading text.
+ * @slot footer - Replaces the footer hint.
+ * @part container - The panel surface (a `bs-card`).
+ * @part head - The heading row.
+ * @part heading - The heading element.
+ * @part close - The close button.
+ * @part search - The search field.
+ * @part switch - The single-key switch row.
+ * @part groups - The columns wrapper.
+ * @part group - One group.
+ * @part group-title - A group title.
+ * @part row - A shortcut row (`bs-shortcut-row`).
+ * @part empty - The "no results" line.
+ * @part footer - The footer hint.
+ * @prop --bs-keyboard-shortcuts-width - Panel width and min-width. Defaults to `720px` (Figma).
+ * @prop --bs-keyboard-shortcuts-bg - Panel background. Aliased to `--bs-surface-base`.
+ * @prop --bs-keyboard-shortcuts-radius - Aliased to `--bs-border-radius-150`.
+ * @prop --bs-keyboard-shortcuts-padding - Aliased to `--bs-spacing-200`.
+ * @prop --bs-keyboard-shortcuts-gap - Gap between sections. Aliased to `--bs-spacing-200`.
+ * @prop --bs-keyboard-shortcuts-shadow - Figma elevation level 4 (`0 8px 8px` in `--bs-elevation-higher`, 12% black in light mode and 25% in dark mode).
+ * @prop --bs-keyboard-shortcuts-column-gap - Gap between the two columns. Aliased to `--bs-spacing-600`.
+ * @prop --bs-keyboard-shortcuts-color - Main text colour. Aliased to `--bs-text-default`.
+ * @prop --bs-keyboard-shortcuts-color-secondary - Titles, captions, footer. Aliased to `--bs-text-secondary`.
+ */
+export declare class BsKeyboardShortcuts {
+    private id;
+    /** Property only: the shortcut groups. */
+    groups: BsShortcutGroup[];
+    /** Heading text. The `heading` slot overrides it. */
+    heading: string;
+    /** Accessible name of the close button. */
+    closeLabel: string;
+    /** Search field placeholder (also its accessible name: `bs-input` has no aria-label prop). */
+    searchPlaceholder: string;
+    /** Current search text. Filters by action or keys text, case-insensitively. */
+    query: string;
+    /** Shows the single-key switch row. */
+    showSingleKeySwitch: boolean;
+    /** Whether single-key shortcuts are on. When off they are shown dimmed. */
+    singleKeyEnabled: boolean;
+    /** Switch title. */
+    singleKeyLabel: string;
+    /** Switch caption. */
+    singleKeyDescription: string;
+    /** Shows the footer hint. */
+    showFooterHint: boolean;
+    /** The key shown in the footer hint. */
+    footerKey: string;
+    /** Footer text after the key. */
+    footerText: string;
+    /** Text before the footer key. */
+    footerPrefix: string;
+    /** Line shown when the query matches nothing. */
+    noResultsText: string;
+    /** Emitted by the close button and by Escape. */
+    bsClose: EventEmitter<void>;
+    /** Emitted when the search text changes, with the new text. */
+    bsQueryChange: EventEmitter<string>;
+    /** Emitted when the single-key switch changes, with the new value. */
+    bsSingleKeyChange: EventEmitter<boolean>;
+    private visibleGroups;
+    /** Greedy column split: a group stays in column 1 while countBefore + size/2 <= total/2. */
+    private columns;
+    private onKeyDown;
+    private onInput;
+    private onSwitch;
+    render(): any;
+}

package/dist/types/components/bs-keyboard-shortcuts/bs-keyboard-shortcuts.stories.d.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+/** Figma "Keyboard shortcuts" data, shared by the stories. */
+export declare const SHORTCUT_GROUPS: {
+    title: string;
+    shortcuts: {
+        action: string;
+        keys: string;
+    }[];
+}[];
+/** Same data for the single-key-off frame: Figma also dims Esc, so it is marked single-key explicitly. */
+export declare const SHORTCUT_GROUPS_SINGLE_KEY_OFF: {
+    shortcuts: ({
+        action: string;
+        keys: string;
+    } | {
+        singleKey: boolean;
+        action: string;
+        keys: string;
+    })[];
+    title: string;
+}[];
+export declare const FILTERED_GROUPS: {
+    title: string;
+    shortcuts: {
+        action: string;
+        keys: string;
+    }[];
+}[];
+interface BsKeyboardShortcutsArgs {
+    query: string;
+    singleKeyEnabled: boolean;
+    showSingleKeySwitch: boolean;
+    showFooterHint: boolean;
+}
+declare const meta: Meta<BsKeyboardShortcutsArgs>;
+export default meta;
+type Story = StoryObj<BsKeyboardShortcutsArgs>;
+export declare const AllShortcuts: Story;
+export declare const SingleKeyOff: Story;
+export declare const FilteredResults: Story;
+export declare const FilteredSingleKeyOff: Story;
+export declare const NoResults: Story;
+export declare const InDialog: Story;

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

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

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

@@ -0,0 +1,61 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * One result or suggestion row of a search dropdown: a leading icon, a primary line, an optional
+ * description line and trailing text. Static, not focusable -- focus stays in the search field and the
+ * parent (`bs-global-search`) marks the highlighted row with `active`.
+ *
+ * Standalone it has no role. `bs-global-search` sets `selectionRole="option"` (and an `id`) on its rows,
+ * the same pattern as `bs-list-item` and `bs-shortcut-row`.
+ *
+ * ## When to use
+ * - A suggestion, recent search or result inside `bs-global-search`.
+ *
+ * ## When not to use
+ * - A row in a generic list -- use `bs-list-item`.
+ * - A command in a popup menu -- use `bs-menu-item`.
+ *
+ * @slot icon - A leading glyph (24px, `currentColor`).
+ * @slot - The primary text. Wrap the matched part in `<strong>` or `<b>` to show it semibold.
+ * @slot description - An optional second line.
+ * @slot trailing - Trailing text (overrides the `trailing` prop).
+ * @part container - The row.
+ * @part icon - The icon wrapper.
+ * @part content - The text column.
+ * @part label - The primary line.
+ * @part description - The description line.
+ * @part trailing - The trailing text wrapper.
+ * @prop --bs-search-item-min-height - Aliased to `--bs-spacing-600` (48px).
+ * @prop --bs-search-item-padding-y - Aliased to `--bs-spacing-100`.
+ * @prop --bs-search-item-padding-x - Aliased to `--bs-spacing-150`.
+ * @prop --bs-search-item-gap - Aliased to `--bs-spacing-100`.
+ * @prop --bs-search-item-radius - Aliased to `--bs-border-radius-100`.
+ * @prop --bs-search-item-bg - Resting background. `transparent`.
+ * @prop --bs-search-item-bg-active - Active (highlighted) and hover background. Aliased to `--bs-surface-hover`.
+ * @prop --bs-search-item-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-search-item-color - Primary text. Aliased to `--bs-text-default`.
+ * @prop --bs-search-item-color-muted - Description and trailing text. Aliased to `--bs-text-muted`.
+ * @prop --bs-search-item-color-disabled - Aliased to `--bs-text-on-disabled`.
+ * @prop --bs-search-item-icon-color - Aliased to `--bs-icon-default`.
+ */
+export declare class BsSearchItem {
+    el: HTMLElement;
+    /** Identifies the item; emitted by `bsItemSelect`. */
+    value?: string;
+    /** Highlighted row (keyboard or hover). Set by the parent. */
+    active: boolean;
+    /** Dims the row and ignores clicks. */
+    disabled: boolean;
+    /** Trailing text shorthand. The `trailing` slot overrides it. */
+    trailing?: string;
+    /** Set by the parent (`"option"`). Standalone rows have no role. */
+    selectionRole: 'option' | null;
+    hasIcon: boolean;
+    hasDescription: boolean;
+    hasTrailingSlot: boolean;
+    /** Fires with `value` when the row is clicked, or when the parent selects it with Enter. */
+    bsItemSelect: EventEmitter<string | undefined>;
+    componentWillLoad(): void;
+    onClick(): void;
+    private slotFilled;
+    render(): any;
+}