@brandsync/wc 1.16.0 → 1.18.0

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-icon-tile/bs-icon-tile.d.ts

@@ -25,6 +25,7 @@ export type BsIconTileIntent = 'default' | 'success' | 'warning' | 'error' | 'br
  * @part text - The wrapper around the `text` slot (only shown when something is slotted).
  */
 export declare class BsIconTile {
+    el: HTMLElement;
     /** Tile size: `sm` 24px, `md` 32px, `lg` 48px. */
     size: BsIconTileSize;
     /** Colour and default glyph. `brand` uses the brand colours; `information` the info palette. */
@@ -36,5 +37,9 @@ export declare class BsIconTile {
     hasCustomIcon: boolean;
     /** True while something is assigned to the `text` slot, so the text wrapper (and its gap) only exists then. */
     hasText: boolean;
+    /** `slotchange` alone is not enough: when the icon is already a child at first render (or is added in the same
+     * pass that upgrades this element) the event can fire before the handler is attached, leaving the default
+     * glyph drawn next to the slotted icon. Read the light DOM once up front. */
+    componentWillLoad(): void;
     render(): any[];
 }

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-mega-menu/bs-mega-menu.cmp.test.d.ts

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

package/dist/types/components/bs-mega-menu/bs-mega-menu.d.ts

@@ -0,0 +1,110 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface BsMegaMenuItem {
+    id: string;
+    /** The link text. */
+    label: string;
+    /** One line under the label. Only shown in `type="columns"`. */
+    description?: string;
+    /** URL of a monochrome SVG, painted with the icon colour. Only shown in `type="columns"`. */
+    icon?: string;
+    /** Short chip text beside the label, e.g. "New". Only shown in `type="columns"`. */
+    badge?: string;
+}
+export interface BsMegaMenuColumn {
+    id: string;
+    /** The group heading, e.g. "Sell". */
+    label: string;
+    items: BsMegaMenuItem[];
+}
+export interface BsMegaMenuFeatured {
+    title: string;
+    description?: string;
+}
+export type BsMegaMenuType = 'columns' | 'compact';
+/**
+ * The dropdown panel under a navigation header tab: columns of links grouped under headings, an optional
+ * featured area on the right, and a footer with recently used items and a shortcut hint. Matches the Figma
+ * "Mega menu" (types Columns, Column with featured, Compact and Compact with featured).
+ *
+ * This is the panel only. Put it in `bs-navigation-header`'s `menu` slot, which anchors it under the bar at the
+ * header's full width, and toggle the host's `hidden` attribute from the tab that
+ * opens it; the panel does not open or close itself. Escape inside the panel fires `bsClose` so you can close it.
+ *
+ * Built from `bs-card` (panel surface), `bs-menu-block` or `bs-compact-menu-block` (the links), `bs-divider` and
+ * `bs-key-caps` (the shortcut). The column layout, headings, featured text and footer row are plain layout
+ * markup: no component covers them.
+ *
+ * ## Responsive
+ * The panel reacts to its own width (a container query), not the viewport's. Below 600px it becomes one column (heading
+ * above its links, featured area below), titles and descriptions wrap, links are at least 44px tall, the footer stacks
+ * and the default shortcut hint is hidden (`display: none`; a keyboard hint means nothing on a touch screen). A custom
+ * `footer-end` slot is not hidden.
+ *
+ * ## When to use
+ * - A header tab that leads to many destinations that need grouping (Sell, Finance, Inventory).
+ *
+ * ## When not to use
+ * - A short list of commands -- use `bs-menu` in a `bs-popover`.
+ * - Switching app or company -- use `bs-app-switcher` or `bs-company-switcher`.
+ *
+ * `columns`, `featured` and `recent` are arrays or objects and must be set as JS properties. Each item's `icon` is
+ * the URL of a monochrome SVG. You own the data: listen to `bsMenuSelect` (cancelable: `preventDefault()` cancels the
+ * originating click).
+ *
+ * @slot featured - The featured area on the right. Overrides the `featured` prop.
+ * @slot footer-start - Left side of the footer. Overrides the recently used line.
+ * @slot footer-end - Right side of the footer. Overrides the shortcut hint.
+ * @part panel - The panel surface (`bs-card`).
+ * @part columns - The grid of columns and the featured area.
+ * @part column - One column (group).
+ * @part heading - A column heading.
+ * @part list - A column's list of links.
+ * @part block - A link (`bs-menu-block` or `bs-compact-menu-block`).
+ * @part featured - The featured area.
+ * @part featured-title - The featured title.
+ * @part featured-description - The featured description.
+ * @part footer - The footer.
+ * @part shortcut - The shortcut hint's key caps (`bs-key-caps`).
+ * @prop --bs-mega-menu-width - Panel width. Defaults to `1100px` (Figma); capped at the viewport.
+ * @prop --bs-mega-menu-radius - Panel corner radius. Aliased to `--bs-border-radius-150`.
+ * @prop --bs-mega-menu-bg - Panel background. Aliased to `--bs-surface-base`.
+ * @prop --bs-mega-menu-border-color - Panel border. Aliased to `--bs-border-default`.
+ * @prop --bs-mega-menu-shadow - Panel shadow (elevation level 3). Aliased to the `--bs-shadow-*` position and blur tokens and `--bs-elevation-high`.
+ * @prop --bs-mega-menu-padding - Padding around the columns. Aliased to `--bs-spacing-300` and `--bs-spacing-350`.
+ * @prop --bs-mega-menu-gap - Gap between columns. Aliased to `--bs-spacing-300`.
+ * @prop --bs-mega-menu-heading-color - Column headings. Aliased to `--bs-text-muted`.
+ * @prop --bs-mega-menu-text-color - Featured title. Aliased to `--bs-text-default`.
+ * @prop --bs-mega-menu-muted-color - Featured description and footer text. Aliased to `--bs-text-secondary`.
+ */
+export declare class BsMegaMenu {
+    el: HTMLElement;
+    private id;
+    /** `columns` shows menu blocks with icon and description; `compact` plain text links. */
+    type: BsMegaMenuType;
+    /** The groups of links. JS property only (an array cannot be an attribute). */
+    columns: BsMegaMenuColumn[];
+    /** The featured area on the right. JS property only. The `featured` slot overrides it. */
+    featured?: BsMegaMenuFeatured;
+    /** Recently used destinations, already translated, shown in the footer. JS property only. */
+    recent: string[];
+    /** Accessible name of the panel. */
+    label: string;
+    /** Text before the recently used items. */
+    recentLabel: string;
+    /** Text before the shortcut keys. */
+    shortcutLabel: string;
+    /** The shortcut keys, joined by "+". */
+    shortcutKeys: string;
+    /** Accessible name of the shortcut keys. Defaults to the keys joined with " plus ". */
+    shortcutKeysLabel?: string;
+    /** Fires when a link is chosen (click or Enter), with the item. Cancelable: `preventDefault()` cancels the originating click. */
+    bsMenuSelect: EventEmitter<BsMegaMenuItem>;
+    /** Fires when Escape is pressed inside the panel, so you can close it. */
+    bsClose: EventEmitter<void>;
+    private select;
+    private onKeyDown;
+    private renderItem;
+    private renderColumn;
+    private renderFeatured;
+    render(): any;
+}

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

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+/** Phosphor (regular) icons as monochrome SVG data URIs; a real app supplies its own URLs. */
+export declare const ICONS: Record<string, string>;
+/** Sample data (invented for the stories and tests; not real EG products). */
+export declare const COLUMNS: {
+    id: string;
+    label: string;
+    items: ({
+        id: string;
+        label: string;
+        description: string;
+        icon: string;
+        badge?: undefined;
+    } | {
+        id: string;
+        label: string;
+        description: string;
+        icon: string;
+        badge: string;
+    })[];
+}[];
+export declare const COMPACT_COLUMNS: {
+    id: string;
+    label: string;
+    items: {
+        id: string;
+        label: string;
+    }[];
+}[];
+export declare const FEATURED: {
+    title: string;
+    description: string;
+};
+export declare const RECENT: string[];
+interface BsMegaMenuArgs {
+    type: 'columns' | 'compact';
+    featured: boolean;
+}
+declare const meta: Meta<BsMegaMenuArgs>;
+export default meta;
+type Story = StoryObj<BsMegaMenuArgs>;
+export declare const Columns: Story;
+export declare const ColumnWithFeatured: Story;
+export declare const Compact: Story;
+export declare const CompactWithFeatured: Story;
+/** Wired up: pick a link, press Escape, and the last event is printed below. */
+export declare const Interactive: Story;
+/** The mega menu in `bs-navigation-header`'s `menu` slot, opened by the "Sales" tab (sample data; columns type). */
+export declare const InNavigationHeader: Story;
+/** Compact type with the featured area, in the same header composition. */
+export declare const InNavigationHeaderCompact: Story;
+/** The same composition at 375px: the tabs scroll inside the bar, the panel is one column with no shortcut hint. */
+export declare const InNavigationHeaderMobile: Story;
+/** Compact with featured at 375px. */
+export declare const InNavigationHeaderCompactMobile: Story;

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

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

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

@@ -0,0 +1,47 @@
+/**
+ * A rich entry in a mega menu: an icon tile, a title with an optional "New" chip, and a one-line description.
+ * Matches the Figma "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. Its accessible name is its text: the title, the badge and the description, read once.
+ *
+ * Built from `bs-icon-tile` (the icon) and `bs-chip-informative` (the badge). The icon is either a URL of a
+ * monochrome SVG in `icon` (painted with the theme's icon colour through a CSS mask, so it follows light and
+ * dark mode), or any element in the default slot (an `<svg>` drawn with `currentColor`).
+ *
+ * ## When to use
+ * - A destination in a mega menu that needs an icon and a sentence of explanation, usually inside `bs-mega-menu`.
+ *
+ * ## When not to use
+ * - A plain text destination -- use `bs-compact-menu-block`.
+ * - A command in a dropdown list -- use `bs-menu-item`.
+ *
+ * @slot - The icon (16px, `currentColor`). Overrides the `icon` prop.
+ * @part container - The button.
+ * @part icon - The icon tile (`bs-icon-tile`).
+ * @part name - The title.
+ * @part badge - The badge chip (`bs-chip-informative`).
+ * @part description - The description.
+ * @prop --bs-menu-block-padding - Padding inside the block. Aliased to `--bs-spacing-150`.
+ * @prop --bs-menu-block-gap - Gap between icon and text. Aliased to `--bs-spacing-150`.
+ * @prop --bs-menu-block-radius - Corner radius. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-menu-block-bg - Resting background. `transparent`.
+ * @prop --bs-menu-block-bg-hover - Aliased to `--bs-surface-hover`.
+ * @prop --bs-menu-block-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-menu-block-icon-bg - Icon square background. Aliased to `--bs-color-neutral-container`; `--bs-surface-base` while hovered or pressed.
+ * @prop --bs-menu-block-color - Title colour. Aliased to `--bs-text-default`.
+ * @prop --bs-menu-block-color-muted - Description colour. Aliased to `--bs-text-secondary`.
+ * @prop --bs-menu-block-focus-ring - Focus ring colour. Aliased to `--bs-border-info`.
+ * @prop --bs-menu-block-white-space - `white-space` of the title and description. `nowrap` (single line, ellipsis); set `normal` to let them wrap.
+ */
+export declare class BsMenuBlock {
+    /** The title, and the start of the accessible name. */
+    name: string;
+    /** One line under the title; part of the accessible name. */
+    description?: string;
+    /** URL of a monochrome SVG painted with the icon colour. The default slot overrides it. */
+    icon?: string;
+    /** Short text for a chip beside the title, e.g. "New". */
+    badge?: string;
+    render(): any;
+}

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsMenuBlockArgs {
+    name: string;
+    description: string;
+    badge: string;
+}
+declare const meta: Meta<BsMenuBlockArgs>;
+export default meta;
+type Story = StoryObj<BsMenuBlockArgs>;
+export declare const Default: Story;
+export declare const WithBadge: Story;
+/** The four states in the design. Hover, pressed and focus come from the native element: point at a block, press it, or Tab to it. */
+export declare const States: Story;
+/** A slotted `<svg>` instead of the `icon` URL. */
+export declare const SlottedIcon: Story;

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

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