@brandsync/wc 1.19.0 → 1.20.0

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

@@ -28,17 +28,20 @@ export type BsButtonSize = 'sm' | 'md' | 'lg';
  * @part label - The text label element.
  * @part end-icon - The trailing icon wrapper element.
  * @prop --bs-button-radius - Corner radius. Aliased to `--bs-border-radius-100` by default.
- * @prop --bs-button-padding-x-sm - Left/right padding of a label-only button at `size="sm"`. Aliased to `--bs-spacing-300`.
+ * @prop --bs-button-padding-x-sm - Left/right padding of a label-only button at `size="sm"`. Aliased to `--bs-spacing-150` (12px).
+ * @prop --bs-button-padding-x-md - Left/right padding at `size="md"`. Aliased to `--bs-spacing-150` (12px).
+ * @prop --bs-button-padding-x-lg - Left/right padding at `size="lg"`. Aliased to `--bs-spacing-150` (12px).
  * @prop --bs-button-width - Width of the button. `auto` by default (fits its content); set `100%` for a full-width button, e.g. `bs-button { --bs-button-width: 100%; }`.
  * @prop --bs-button-subtle-color - Label/icon colour, `variant="subtle"`. Aliased to `--bs-color-neutral-default`; set it to `var(--bs-text-action)` for a blue text button.
- * @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
- * @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
- * @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
+ * @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-400` (32px).
+ * @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-550` (44px).
+ * @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-600` (48px).
+ * @prop --bs-button-outlined-color - Label/icon colour, `variant="outlined"`, default. Aliased to `--bs-color-primary-default`.
  * @prop --bs-button-neutral-border - Border color, `variant="neutral"`, default/disabled. Aliased to `--bs-border-neutral-container`.
  * @prop --bs-button-neutral-border-hover - Border color, `variant="neutral"`, hover. Aliased to `--bs-border-neutral-container-hover`.
  * @prop --bs-button-neutral-border-pressed - Border color, `variant="neutral"`, pressed. Aliased to `--bs-border-neutral-container-pressed`.
- * @prop --bs-button-padding-x-icon-side - Horizontal padding on an edge that's adjacent to a leading/trailing icon (tighter than the plain text-only edge). Aliased to `--bs-spacing-150`.
- * @prop --bs-button-padding-x-label-side - Horizontal padding on the opposite edge, when an icon on the other side needs compensating extra space to keep the button optically balanced. Aliased to `--bs-spacing-250`.
+ * @prop --bs-button-padding-x-icon-side - Horizontal padding on an edge that's adjacent to a leading/trailing icon (now equal to the text-only edge). Aliased to `--bs-spacing-150`.
+ * @prop --bs-button-padding-x-label-side - Horizontal padding on the opposite edge, when an icon on the other side needs compensating extra space to keep the button optically balanced. Aliased to `--bs-spacing-150` (no compensation by default).
  */
 export declare class BsButton {
     el: HTMLElement;
@@ -62,6 +65,19 @@ export declare class BsButton {
      * camelCase prop to the `aria-label` HTML attribute automatically.
      */
     ariaLabel: string | null;
+    /**
+     * Makes this a toggle button: sets `aria-pressed` on the inner `<button>` to `true`/`false`. Leave it
+     * unset (the default) for a plain action button, which then has no `aria-pressed` at all. The component
+     * does not toggle itself; the owner flips this on click.
+     */
+    pressed?: boolean;
+    /** Forwarded to the inner `<button>` as `aria-expanded`, for disclosure/menu buttons. */
+    ariaExpanded: 'true' | 'false' | null;
+    /** Forwarded to the inner `<button>` as `aria-controls`. Note an id only resolves inside this
+     * component's shadow tree, so it can't point at an element in the page's light DOM. */
+    ariaControls: string | null;
+    /** Forwarded to the inner `<button>` as `aria-haspopup`. */
+    ariaHasPopup: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
     /** Tracks whether the `icon` slot has assigned content, so the icon/label gap only
      * applies when there's actually an icon. */
     hasIcon: boolean;

package/dist/types/components/bs-button/bs-icon-button/bs-icon-button.d.ts

@@ -51,6 +51,13 @@ export declare class BsIconButton {
      * prop to the `aria-label` HTML attribute automatically.
      */
     ariaLabel: string | null;
+    /** Forwarded to the inner `<button>` as `aria-expanded`, for disclosure/menu buttons. */
+    ariaExpanded: 'true' | 'false' | null;
+    /** Forwarded to the inner `<button>` as `aria-controls`. Note an id only resolves inside this
+     * component's shadow tree, so it can't point at an element in the page's light DOM. */
+    ariaControls: string | null;
+    /** Forwarded to the inner `<button>` as `aria-haspopup`. */
+    ariaHasPopup: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
     /**
      * Makes this a toggle button: sets `aria-pressed` on the inner `<button>` to `true`/`false`. Leave it
      * unset (the default) for a plain action button, which then has no `aria-pressed` at all. The component

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export type BsCardSurface = 'base' | 'raised' | 'container';
 /**
  * A bounded surface for grouping related content — a summary, a form section, a list item.
@@ -14,9 +15,20 @@ export type BsCardSurface = 'base' | 'raised' | 'container';
  * to its top corners. Presence of assigned content is what shows it -- doesn't affect layout when
  * empty.
  * @slot header - Optional heading content above the body.
+ * ## Clickable and selectable cards
+ * Set `href` to make the whole card a link, or `selectable` to make it a toggle (`selected`,
+ * `aria-pressed`). The card stays a plain container with ONE real `<a>`/`<button>` (the "stretched
+ * link" pattern): the `header` slot is rendered inside it, so the header text is the accessible name
+ * (or set `label`), and it is stretched over the whole card, so the card is one tab stop and no
+ * interactive element is nested inside another. Controls in the `body`/`footer` slots stay
+ * individually clickable and focusable as long as they are *direct* children of the slot
+ * (`bs-button`, `a`, `button`, form controls); everything else in those slots passes clicks through
+ * to the card.
+ *
  * @slot - Default slot: the card's main body content.
  * @slot footer - Optional actions/content below the body (e.g. a button).
  * @part container - The outer surface element.
+ * @part action - The `<a>`/`<button>` that makes the card clickable (only when `href` or `selectable` is set).
  * @part image - The hero image wrapper (only visible when the `image` slot has content).
  * @part header - The header wrapper.
  * @part body - The body wrapper.
@@ -26,6 +38,29 @@ export declare class BsCard {
     /** Maps to the brandsync-tokens `--bs-paper-bg-*` set — Brandsync's tokens don't have a
      * dedicated "card" component yet, so this reuses the existing Paper surface tokens. */
     surface: BsCardSurface;
+    /** Makes the whole card a link to this URL (a real `<a>`). Takes precedence over `selectable`. */
+    href?: string;
+    /** Link `target`, only used with `href`. With `_blank`, `rel` defaults to `noopener noreferrer`. */
+    target?: string;
+    /** Link `rel`, only used with `href`. */
+    rel?: string;
+    /** Makes the whole card a toggle (a real `<button aria-pressed>`). Ignored when `href` is set. */
+    selectable: boolean;
+    /** Whether a `selectable` card is selected. Mutable and reflected; toggled by the user. */
+    selected: boolean;
+    /** Accessible name for the clickable card, used instead of the `header` slot text. Set it when
+     * there is no `header` content, or when the header text is not a good name on its own. */
+    label?: string;
+    /** Fires when a `selectable` card is toggled by the user, with the new `selected` value. */
+    bsChange: EventEmitter<boolean>;
+    /** Fires when a link card (`href`) is clicked, before the browser navigates. **Cancelable**:
+     * `preventDefault()` stops the navigation so you can route it yourself. Detail is `{ href }`.
+     * Modified clicks (ctrl/cmd/shift/alt, middle button) are left to the browser. */
+    bsNavigate: EventEmitter<{
+        href: string;
+    }>;
+    private onLinkClick;
+    private onToggleClick;
     /** Tracks whether the `image` slot has assigned content, so the image wrapper only reserves
      * layout space (and clips its top corners) when there's actually an image -- same pattern as
      * `bs-dialog`'s `hasImage`. */

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

@@ -9,3 +9,6 @@ export declare const Raised: Story;
 export declare const Base: Story;
 export declare const Container: Story;
 export declare const WithImage: Story;
+export declare const Clickable: Story;
+export declare const Selectable: Story;
+export declare const ClickableWithFooterAction: Story;

package/dist/types/components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.d.ts

@@ -26,6 +26,9 @@ import { EventEmitter } from '../../stencil-public-runtime';
  *   `--bs-color-primary-container-pressed`.
  * @prop --bs-chatbot-suggestion-button-bg-focus - Background when focused. Aliased to
  *   `--bs-color-primary-container-hover` (same as hover).
+ * @prop --bs-chatbot-suggestion-button-bg-disabled - Background when disabled. Aliased to `--bs-surface-action-disabled`.
+ * @prop --bs-chatbot-suggestion-button-text-disabled - Text color when disabled. Aliased to `--bs-text-on-disabled`.
+ * @prop --bs-chatbot-suggestion-button-border-color-disabled - Border color when disabled. Aliased to `--bs-border-neutral-disabled`.
  * @prop --bs-chatbot-suggestion-button-text-default - Text color in the default state. Aliased to
  *   `--bs-text-action`.
  * @prop --bs-chatbot-suggestion-button-text-hover - Text color on hover, pressed, and focus.

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

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

package/dist/types/components/bs-checkbox-group/bs-checkbox-group.d.ts

@@ -0,0 +1,48 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsCheckboxGroupOrientation = 'vertical' | 'horizontal';
+/**
+ * A labelled group of `bs-checkbox`es: a `<fieldset>` with a `<legend>`, helper or error text, and
+ * a single `value` array of the checked boxes' values.
+ *
+ * Composed from: `bs-checkbox` (slotted by you).
+ *
+ * ## When to use
+ * - A set of related, independent options where any number may be chosen ("Notify me by ...").
+ *
+ * ## When not to use
+ * - Exactly one choice: use `bs-radio-group`.
+ * - A single yes/no: use one `bs-checkbox`, or `bs-switch` for an immediate setting.
+ *
+ * @slot - The `bs-checkbox` elements. Give each a `value`.
+ * @part group - The `fieldset`.
+ * @part label - The `legend`.
+ * @part options - The wrapper laying out the checkboxes (column, or row when `orientation="horizontal"`).
+ * @part description - The helper text (hidden while `error` is set).
+ * @part error - The error message.
+ */
+export declare class BsCheckboxGroup {
+    el: HTMLElement;
+    private id;
+    /** Legend: the visible group label, also its accessible name. */
+    label?: string;
+    /** Helper text under the options. Replaced by `error` while that is set. */
+    description?: string;
+    /** Error message. Sets `aria-invalid`, replaces the helper text, and puts every checkbox in its error style. */
+    error?: string;
+    /** Layout of the checkboxes. */
+    orientation: BsCheckboxGroupOrientation;
+    /** Marks the group as required: shows an asterisk after the label and sets `aria-required`. */
+    required: boolean;
+    /** `value`s of the checked checkboxes. An array, so set it as a JS property, not an attribute. Setting it checks the matching boxes and unchecks the rest. */
+    value: string[];
+    /** Emitted with the new array of checked `value`s when the user toggles a checkbox. Replaces the checkboxes' own `bsChange`, which does not reach listeners outside the group. */
+    bsChange: EventEmitter<string[]>;
+    private boxes;
+    onValue(): void;
+    onError(): void;
+    componentWillLoad(): void;
+    private syncError;
+    private onSlotchange;
+    onBoxChange(ev: CustomEvent<boolean>): void;
+    render(): any;
+}

package/dist/types/components/bs-checkbox-group/bs-checkbox-group.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsCheckboxGroupArgs {
+    label: string;
+    description: string;
+    error: string;
+    orientation: 'vertical' | 'horizontal';
+    required: boolean;
+}
+declare const meta: Meta<BsCheckboxGroupArgs>;
+export default meta;
+type Story = StoryObj<BsCheckboxGroupArgs>;
+export declare const Default: Story;
+export declare const Horizontal: Story;
+export declare const WithHelperText: Story;
+export declare const WithError: Story;

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

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

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

@@ -0,0 +1,68 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A block of code with an optional filename header and a Copy button, or (with `inline`) styled
+ * inline code. Dependency-free: it does no syntax highlighting itself. Pass plain text with `code`,
+ * or slot pre-highlighted markup (e.g. the output of Shiki or Prism: spans coloured with your own
+ * CSS) as the default slot.
+ *
+ * Follows light and dark mode through the surface/text tokens. Long lines scroll horizontally (the
+ * scroll area is keyboard focusable) or, with `wrap`, break onto the next line.
+ *
+ * Copying announces the `copiedLabel` text through a polite live region, and the button label
+ * changes to match for a few seconds.
+ *
+ * Slotted content: keep it flush against the tags (`<bs-code-block><span>..</span></bs-code-block>`),
+ * since whitespace in a `<pre>`-style block is kept. The line count for `lineNumbers` and the text
+ * that is copied are read from the slotted text.
+ *
+ * Composed from: `bs-card` (the surface), `bs-button` and `bs-icon` (the Copy button).
+ *
+ * ## When to use
+ * - Showing a snippet, command or config the reader may want to copy.
+ * - `inline` for a short code term inside a sentence.
+ *
+ * ## When not to use
+ * - Long files that need folding, search or editing: link to the source instead.
+ * - Pre-formatted prose or tables: use ordinary text and table markup.
+ *
+ * @slot - Pre-highlighted code (any markup). Ignored when `code` is set.
+ * @part container - The `bs-card` surface (block mode).
+ * @part header - The header row holding the filename and the Copy button.
+ * @part filename - The filename text.
+ * @part copy-button - The Copy `bs-button`.
+ * @part body - The scrollable code area.
+ * @part line-numbers - The line number gutter (when `lineNumbers` is set).
+ * @part code - The `code` element (block and inline).
+ */
+export declare class BsCodeBlock {
+    el: HTMLElement;
+    /** Plain-text code. When set it is shown (escaped) instead of the default slot, and is what Copy copies. */
+    code?: string;
+    /** Name shown at the left of the header, e.g. `app.config.ts` or `Terminal`. Also names the code region for assistive tech. */
+    filename?: string;
+    /** Show a line number gutter. Line numbers need unwrapped lines, so `wrap` is ignored while this is set. */
+    lineNumbers: boolean;
+    /** Wrap long lines instead of scrolling horizontally. */
+    wrap: boolean;
+    /** Render as inline code (a styled `<code>` inside a sentence): no header, no Copy button, no scrolling. */
+    inline: boolean;
+    /** Remove the Copy button. */
+    hideCopy: boolean;
+    /** Label of the Copy button. */
+    copyLabel: string;
+    /** Label of the Copy button after copying, and the text announced to assistive tech. */
+    copiedLabel: string;
+    /** Accessible name of the code region when there is no `filename`. */
+    regionLabel: string;
+    /** Emitted with the copied text after it was written to the clipboard. */
+    bsCopy: EventEmitter<string>;
+    copied: boolean;
+    slottedText: string;
+    private timer?;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    private text;
+    private onCopy;
+    private onSlotchange;
+    render(): any;
+}

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsCodeBlockArgs {
+    code: string;
+    filename: string;
+    lineNumbers: boolean;
+    wrap: boolean;
+    hideCopy: boolean;
+}
+declare const meta: Meta<BsCodeBlockArgs>;
+export default meta;
+type Story = StoryObj<BsCodeBlockArgs>;
+export declare const Default: Story;
+export declare const LineNumbers: Story;
+export declare const NoHeaderName: Story;
+export declare const NoCopy: Story;
+export declare const LongLines: Story;
+export declare const PreHighlighted: Story;
+export declare const Inline: Story;

package/dist/types/components/bs-data-table/bs-data-table.d.ts

@@ -21,6 +21,14 @@ export type BsDataTableRow = Record<string, unknown> & {
  * - A handful of unrelated key/value pairs — a simple list or card is lighter-weight.
  * - Deeply nested/hierarchical data — this component renders one flat row per record.
  *
+ * ## Rich cells
+ * Without a `cellRenderer`, each cell is a named slot, `cell-{row.id}-{column.key}`, whose fallback
+ * content is the plain-text value. Slot an element into it to put app-owned content (a framework
+ * component, a router link, a badge) in the cell, e.g.
+ * `<a slot="cell-7-name" href="/people/7">Ada</a>`. The slotted element lives in the light DOM, so
+ * it keeps your framework, router and CSP; nothing is parsed as HTML.
+ *
+ * @slot cell-{row.id}-{column.key} - Content for one cell (see "Rich cells"). Falls back to the text value.
  * @part table - The `<table>` element.
  * @part head - The `<thead>` element.
  * @part body - The `<tbody>` element.
@@ -39,6 +47,9 @@ export declare class BsDataTable {
     /** Accessible name of the select-all checkbox in the header (when `selectable`). */
     selectAllLabel: string;
     selectable: boolean;
+    /** Alternates the row background (even rows use `--bs-data-table-stripe-bg`) so wide tables are
+     * easier to scan. Follows dark mode through the token. Row hover still wins. */
+    striped: boolean;
     /** Optional custom cell renderer, for rich cells such as a status badge, a link or an actions
      * column. It returns an **HTML string** that is inserted into the cell as real markup
      * (`innerHTML`), so links, buttons, `<img>` and other web components (e.g. `<bs-badge>`) all render.

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

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

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

@@ -0,0 +1,34 @@
+/**
+ * One term and its detail inside a `bs-description-list` (a label/value pair such as "Owner: Sam Lee").
+ *
+ * ## When to use
+ * - As a child of `bs-description-list`, one per key/value pair.
+ *
+ * ## When not to use
+ * - Rows of records with media and actions -- use `bs-list-item`.
+ * - Many pairs compared across several records -- use `bs-data-table`.
+ *
+ * Each item renders its own `<dl>` containing one `<div>` group with a real `<dt>` and `<dd>`. (A `dl` cannot
+ * span the shadow boundary between a list and its items, so the grouping lives here.)
+ *
+ * @slot term - Rich content for the term (replaces `term`).
+ * @slot - Rich content for the detail (replaces `description`).
+ * @part container - The `dl`.
+ * @part term - The `dt`.
+ * @part description - The `dd`.
+ * @prop --bs-description-item-gap - Gap between term and detail when stacked. Aliased to `--bs-spacing-25`.
+ * @prop --bs-description-item-term-width - Width of the term column when `layout="horizontal"`. `12rem`.
+ * @prop --bs-description-item-column-gap - Gap between the term and detail columns when horizontal. Aliased to `--bs-spacing-200`.
+ * @prop --bs-description-item-padding-y - Vertical padding. Aliased to `--bs-spacing-100`.
+ * @prop --bs-description-item-term-color - Aliased to `--bs-text-secondary`.
+ * @prop --bs-description-item-description-color - Aliased to `--bs-text-default`.
+ */
+export declare class BsDescriptionItem {
+    /** The term (label). */
+    term?: string;
+    /** The detail (value). The default slot overrides it. */
+    description?: string;
+    /** Set by the parent `bs-description-list`: `stacked` (term above detail) or `horizontal` (side by side). */
+    layout: 'stacked' | 'horizontal';
+    render(): any;
+}

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

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

package/dist/types/components/bs-description-list/bs-description-list.d.ts

@@ -0,0 +1,33 @@
+/**
+ * A key/value list of `bs-description-item` pairs (term and detail), for record summaries, settings read-outs
+ * and metadata panels. Terms and details use real `dt`/`dd` semantics.
+ *
+ * ## When to use
+ * - A read-only summary of one record: "Owner", "Created", "Status" with their values.
+ *
+ * ## When not to use
+ * - A list of records with media and actions -- use `bs-list`.
+ * - Editable fields -- use form components.
+ * - Several records compared across columns -- use `bs-data-table`.
+ *
+ * Built from `bs-description-item` children (light DOM; the list never moves nodes). Each item holds its own
+ * `dl`; the list sets the layout on them and draws dividers.
+ *
+ * @slot - The `bs-description-item` children.
+ * @part list - The list container (`role="group"`).
+ * @prop --bs-description-list-divider-color - Divider colour when `dividers` is set. Aliased to `--bs-border-neutral-container`.
+ * @prop --bs-description-list-gap - Gap between items. `0`.
+ */
+export declare class BsDescriptionList {
+    el: HTMLElement;
+    /** `stacked` puts each term above its detail; `horizontal` puts them side by side in two columns. */
+    layout: 'stacked' | 'horizontal';
+    /** Draws a 1px separator between items. */
+    dividers: boolean;
+    /** Accessible name of the group. */
+    ariaLabel: string | null;
+    onLayout(): void;
+    componentDidLoad(): void;
+    private sync;
+    render(): any;
+}

package/dist/types/components/bs-description-list/bs-description-list.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsDescriptionListArgs {
+    layout: 'stacked' | 'horizontal';
+    dividers: boolean;
+}
+declare const meta: Meta<BsDescriptionListArgs>;
+export default meta;
+type Story = StoryObj<BsDescriptionListArgs>;
+export declare const Default: Story;
+export declare const Stacked: Story;
+export declare const WithRichContent: Story;

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

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

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

@@ -0,0 +1,51 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { BsPopoverPlacement } from '../bs-popover/bs-popover';
+export type BsDropdownPlacement = BsPopoverPlacement;
+/**
+ * A menu trigger: a button (slot `trigger`) that opens a `bs-menu` of `bs-menu-item`s in an anchored,
+ * viewport-aware popup, with the menu keyboard pattern and focus management built in.
+ *
+ * Opens on click, Enter, Space (via the trigger button) and ArrowDown. On open focus moves to the
+ * first enabled menu item; Up/Down/Home/End move between items (handled by `bs-menu`). The dropdown
+ * closes on outside click, Escape (focus returns to the trigger), Tab, and after an item is activated.
+ * The trigger gets `aria-haspopup="menu"` and `aria-expanded` kept in sync.
+ *
+ * Composed from `bs-popover` (anchor positioning, flipping, outside-click and Escape dismissal, open
+ * motion), `bs-menu` and `bs-menu-item` (slotted by you), and a `bs-button` / `bs-icon-button` trigger.
+ *
+ * ## When to use
+ * - A header or toolbar action that reveals a short list of commands ("More", "Account", "Sort by").
+ *
+ * ## When not to use
+ * - Free-form popup content such as forms or arbitrary panels (use `bs-popover`).
+ * - Choosing a value for a form field (use `bs-select`).
+ *
+ * @slot trigger - The control that toggles the menu (a `bs-button` or `bs-icon-button`).
+ * @slot - Default slot: a `bs-menu` containing `bs-menu-item`s.
+ * @part popover - The underlying `bs-popover`; tune the popup with `::part(popover) { --bs-popover-min-width: ...; }`.
+ */
+export declare class BsDropdown {
+    el: HTMLElement;
+    /** Whether the menu is shown. */
+    open: boolean;
+    /** Where the menu sits relative to the trigger; flips to stay in the viewport. */
+    placement: BsDropdownPlacement;
+    /** Emitted after the menu opens. */
+    bsOpen: EventEmitter<void>;
+    /** Emitted after the menu closes (outside click, Escape, Tab, item activation or `open = false`). */
+    bsClose: EventEmitter<void>;
+    private triggerSlot?;
+    private focusRun;
+    onOpenChange(next: boolean): void;
+    componentDidLoad(): void;
+    /** Close after an item is activated; the item still emits its own `bsSelect` for the consumer. */
+    onItemSelect(): void;
+    /** Tab leaves the menu: close it and continue tabbing from the trigger. */
+    onKeyDown(ev: KeyboardEvent): void;
+    private trigger;
+    private syncTrigger;
+    private focusTrigger;
+    private focusFirstItem;
+    private onPopoverOpenChange;
+    render(): any;
+}

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsDropdownArgs {
+    open: boolean;
+    placement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+}
+declare const meta: Meta<BsDropdownArgs>;
+export default meta;
+type Story = StoryObj<BsDropdownArgs>;
+export declare const Default: Story;
+export declare const Open: Story;
+export declare const BottomEnd: Story;
+export declare const FlipsNearViewportEdge: Story;

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

@@ -15,10 +15,12 @@ import type { BsIconTileIntent } from '../bs-icon-tile/bs-icon-tile';
  * - A full-page error with a status code -- use `bs-error-page`.
  * - A transient message -- use `bs-toast` or `bs-snackbar`.
  *
+ * @slot illustration - A larger illustration or image that replaces the icon tile (use with `size="page"`).
  * @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 illustration - The illustration wrapper (only rendered while the `illustration` slot is filled).
  * @part icon - The icon tile (`bs-icon-tile`).
  * @part heading - The heading element.
  * @part description - The description paragraph.
@@ -26,6 +28,7 @@ import type { BsIconTileIntent } from '../bs-icon-tile/bs-icon-tile';
  * @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-size - Aliased to `--bs-font-size-xl` (`--bs-font-size-3xl` at `size="page"`).
  * @prop --bs-empty-state-heading-color - Aliased to `--bs-text-default`.
  * @prop --bs-empty-state-description-color - Aliased to `--bs-text-secondary`.
  */
@@ -39,7 +42,10 @@ export declare class BsEmptyState {
     intent: BsIconTileIntent;
     /** Heading level, 2 to 6 (renders `h2`..`h6`). Pick the one that fits the page outline. */
     headingLevel: 2 | 3 | 4 | 5 | 6;
+    /** `panel` (default) fits inside a card, table or section. `page` fills a whole view: more padding, a larger heading and a minimum height. */
+    size: 'panel' | 'page';
     hasIcon: boolean;
+    hasIllustration: boolean;
     hasDescriptionSlot: boolean;
     hasAction: boolean;
     private observer?;

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

@@ -4,6 +4,7 @@ interface BsEmptyStateArgs {
     description: string;
     intent: 'default' | 'success' | 'warning' | 'error' | 'brand' | 'information';
     headingLevel: number;
+    size: 'panel' | 'page';
 }
 declare const meta: Meta<BsEmptyStateArgs>;
 export default meta;
@@ -11,3 +12,5 @@ type Story = StoryObj<BsEmptyStateArgs>;
 export declare const NoResults: Story;
 export declare const Error: Story;
 export declare const WithoutAction: Story;
+export declare const PageSize: Story;
+export declare const WithIllustration: Story;

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

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

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

@@ -0,0 +1,34 @@
+export type BsHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type BsHeadingSize = 'display' | '1' | '2' | '3' | '4' | '5' | '6';
+export type BsHeadingTone = 'default' | 'secondary' | 'muted' | 'action' | 'success' | 'info' | 'warning' | 'error' | 'inverse' | 'inherit';
+export type BsHeadingAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
+/**
+ * A heading whose rendered element and visual style are chosen separately: `level` (or `as`) picks
+ * the element for the document outline, `size` picks the look. Sizes map to the typography tokens
+ * (`--bs-font-size-*`, `--bs-font-weight-*`, `--bs-line-height-*`, `--bs-typography-font-family-heading`).
+ *
+ * Default sizes by level: 1 = 40px, 2 = 32px, 3 = 24px, 4 = 20px, 5 = 18px, 6 = 16px; `display` is 48px.
+ *
+ * Composed from: nothing (leaf).
+ *
+ * ## When to use
+ * - Any page or section title. Keep levels in order (no jumping from 1 to 4); change `size`, not `level`, to restyle.
+ *
+ * ## When not to use
+ * - Body copy, captions and labels: use `bs-text`.
+ * - To make text big without it being a heading: use `bs-text` with `as="p"`.
+ *
+ * @slot - The heading text.
+ * @part heading - The rendered heading element.
+ */
+export declare class BsHeading {
+    /** Heading level 1-6: chooses the element (`h1`-`h6`) and, unless `size` is set, the visual size. */
+    level: BsHeadingLevel;
+    /** Overrides the rendered element, e.g. `as="p"` for a heading-looking line that is not part of the outline. When set, `level` only drives the default size. */
+    as?: BsHeadingAs;
+    /** Visual size, independent of the element: `display` or `1`-`6` (the default sizes of levels 1-6). Defaults to `level`. */
+    size?: BsHeadingSize;
+    /** Text colour from the text tokens. `inherit` uses the surrounding colour. */
+    tone: BsHeadingTone;
+    render(): any;
+}

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsHeadingArgs {
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    size: string;
+    tone: string;
+    text: string;
+}
+declare const meta: Meta<BsHeadingArgs>;
+export default meta;
+type Story = StoryObj<BsHeadingArgs>;
+export declare const Default: Story;
+export declare const Levels: Story;
+export declare const Display: Story;
+export declare const SizeIndependentOfLevel: Story;
+export declare const Tones: Story;

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

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

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

@@ -0,0 +1,39 @@
+export type BsIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type BsIconTone = 'default' | 'muted' | 'action' | 'success' | 'info' | 'warning' | 'error' | 'inverse' | 'inherit';
+/**
+ * A sized, coloured icon. Renders inline SVG from a named registry (`name`), or any SVG you slot in.
+ *
+ * Built-in names: `menu`, `arrow-right`, `arrow-left`, `check`, `close`, `chevron-down`,
+ * `external-link`, `copy`, `search`, plus Phosphor glyphs `user`, `star`, `star-fill`, `x`,
+ * `paper-plane-right`, `note-pencil`, `clock-counter-clockwise`, `arrows-out-simple` (256x256 filled). Add more with `registerIcons({ name: '<path d="..."/>' })`
+ * (exported from the package entry): each value is the inner markup of a 24x24, `currentColor`
+ * stroke icon, or pass `{ viewBox, body }` for a filled glyph on another grid.
+ *
+ * Decorative by default (`aria-hidden`). Set `label` when the icon alone conveys meaning; it is then
+ * exposed as an image with that name. An icon inside a button never needs `label`: name the button.
+ *
+ * Composed from: nothing (leaf). Used by `bs-code-block`.
+ *
+ * ## When to use
+ * - A glyph beside text or inside a button, sized and coloured from tokens.
+ *
+ * ## When not to use
+ * - As a control by itself: wrap it in `bs-icon-button`.
+ * - For a tinted status square: use `bs-icon-tile`.
+ *
+ * @slot - Optional SVG (or `img`) shown when `name` is not set or not registered. Sized to the icon; draw with `currentColor` to follow `tone`.
+ * @part icon - The wrapper around the glyph.
+ */
+export declare class BsIcon {
+    el: HTMLElement;
+    /** Registered icon name (see the component description for the built-in set). */
+    name?: string;
+    /** Size: `xs` 12px, `sm` 16px, `md` 24px, `lg` 32px, `xl` 48px. */
+    size: BsIconSize;
+    /** Colour from the icon tokens. `inherit` uses the surrounding text colour (`currentColor`). */
+    tone: BsIconTone;
+    /** Accessible name. When set the icon is exposed as an image with this name; when empty it is
+     * decorative and hidden from assistive tech. */
+    label?: string;
+    render(): any;
+}