@brandsync/wc 1.15.0 → 1.16.0

package/dist/types/components.d.ts

@@ -2309,6 +2309,125 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * A vertical list of `bs-list-item` rows, optionally single-select.
+     * ## When to use
+     * - Records, people, files or options shown as rows with leading media and descriptions.
+     * - `selectable` for a single-choice list (e.g. a conversation list next to a detail pane).
+     * ## When not to use
+     * - A popup list of actions -- use `bs-menu`.
+     * - Navigation between app sections -- use `bs-navigation-drawer`.
+     * - Multi-column, sortable or paged data -- use `bs-data-table`.
+     * Built from `bs-list-item` children (light DOM; the list never moves nodes).
+     * @prop --bs-list-gap - Gap between rows. Defaults to `0`.
+     * @prop --bs-list-divider-color - Divider colour when `dividers` is set. Aliased to `--bs-border-neutral-container`.
+     */
+    interface BsList {
+        /**
+          * Accessible name of the list.
+          * @default null
+         */
+        "ariaLabel": string | null;
+        /**
+          * Draws a 1px separator between rows.
+          * @default false
+         */
+        "dividers": boolean;
+        /**
+          * Single-selection mode: role="listbox", rows are `option`s with roving tabindex.
+          * @default false
+         */
+        "selectable": boolean;
+        /**
+          * `value` of the selected item (selectable mode).
+          * @default null
+         */
+        "value": string | null;
+    }
+    /**
+     * A single row of a list: optional leading media (avatar, icon, image), a label, a description and
+     * optional support text, and an optional trailing caret or custom trailing content.
+     * ## When to use
+     * - As a child of `bs-list`, one per record, person, file or option.
+     * - Standalone as a plain information row (non-interactive), or with `interactive` as a button-like row.
+     * ## When not to use
+     * - A popup list of actions -- use `bs-menu` / `bs-menu-item`.
+     * - App navigation with an active route -- use `bs-navigation-drawer-item`.
+     * - Tabular data with columns, sorting or paging -- use `bs-data-table`.
+     * Composed from: leading media (`bs-avatar`) and trailing controls (`bs-icon-button`) are supplied by the
+     * consumer through the `leading` and `trailing` slots; the row itself only reserves layout. The default
+     * trailing caret is inline SVG.
+     * Roles are driven by the parent `bs-list` (via `selectionRole`). Standalone, the row has no role
+     * (`listitem` is only valid inside a list) unless `interactive` is set, which makes it a focusable
+     * `role="button"`.
+     * @prop --bs-list-item-min-height - Minimum row height. Aliased to `--bs-spacing-1000`.
+     * @prop --bs-list-item-padding-y - Aliased to `--bs-spacing-150`.
+     * @prop --bs-list-item-padding-x - Aliased to `--bs-spacing-200`.
+     * @prop --bs-list-item-gap - Gap between leading, content and trailing. Aliased to `--bs-spacing-200`.
+     * @prop --bs-list-item-content-gap - Gap between text lines. Aliased to `--bs-spacing-25`.
+     * @prop --bs-list-item-radius - Aliased to `--bs-border-radius-100`.
+     * @prop --bs-list-item-bg - Enabled background. `transparent`.
+     * @prop --bs-list-item-bg-hover - Aliased to `--bs-surface-hover`.
+     * @prop --bs-list-item-bg-pressed - Aliased to `--bs-surface-pressed`.
+     * @prop --bs-list-item-bg-focus - Aliased to `--bs-surface-focus`.
+     * @prop --bs-list-item-bg-selected - Aliased to `--bs-surface-selected`.
+     * @prop --bs-list-item-bg-selected-hover - Aliased to `--bs-surface-selected-hover`.
+     * @prop --bs-list-item-bg-selected-pressed - Aliased to `--bs-surface-selected-pressed`.
+     * @prop --bs-list-item-bg-selected-focus - Aliased to `--bs-surface-selected-focus`.
+     * @prop --bs-list-item-bg-disabled - Aliased to `--bs-surface-action-disabled`.
+     * @prop --bs-list-item-color - Text colour. Aliased to `--bs-text-default`.
+     * @prop --bs-list-item-color-disabled - Aliased to `--bs-text-on-disabled`.
+     * @prop --bs-list-item-focus-ring - Focus ring colour. Aliased to `--bs-border-neutral-focus`.
+     * @prop --bs-list-item-image-width - Leading image width. 72px.
+     * @prop --bs-list-item-image-height - Leading image height. 56px.
+     */
+    interface BsListItem {
+        /**
+          * Second text line (the "paragraph").
+          * @default null
+         */
+        "description": string | null;
+        /**
+          * Disables the row: dimmed, not focusable, no click event.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Makes a standalone row a focusable `role="button"` that emits `bsItemClick`.
+          * @default false
+         */
+        "interactive": boolean;
+        /**
+          * First text line (semibold).
+          * @default null
+         */
+        "label": string | null;
+        /**
+          * Marks the row as selected. Managed by the parent `bs-list` when it is `selectable`.
+          * @default false
+         */
+        "selected": boolean;
+        /**
+          * Set by the parent `bs-list`: `listitem` (plain list) or `option` (selectable list). Do not set by hand.
+          * @default null
+         */
+        "selectionRole": 'listitem' | 'option' | null;
+        /**
+          * Shows a trailing caret (unless the `trailing` slot has content).
+          * @default false
+         */
+        "showArrow": boolean;
+        /**
+          * Optional third text line.
+          * @default null
+         */
+        "supportText": string | null;
+        /**
+          * Identifies the item; emitted by `bsItemClick` and matched against `bs-list`'s `value`.
+          * @default null
+         */
+        "value": string | null;
+    }
     /**
      * The BrandSync brand mark, as its own standalone component -- shared by `bs-navigation-header`
      * and `bs-navigation-drawer`, which used to each render their own duplicated copy of this SVG
@@ -4089,6 +4208,87 @@ export namespace Components {
          */
         "text": string;
     }
+    /**
+     * A hierarchical list of `bs-tree-item` rows with single selection, expand/collapse and the
+     * WAI-ARIA tree keyboard pattern.
+     * The tree owns `role="tree"`, the roving `tabindex` (exactly one enabled, visible item is
+     * tabbable: the selected one, otherwise the first), selection (kept in sync with each item's
+     * `selected`) and keyboard navigation over the visible (rendered, non-disabled) items. Items own
+     * their expansion state and emit `bsSelect` / `bsToggle`.
+     * Built from: `bs-tree-item` rows.
+     */
+    interface BsTree {
+        /**
+          * Accessible name of the tree. Bound onto the internal `role="tree"` element (an `aria-label` on the host would not reach it).
+          * @default null
+         */
+        "ariaLabel": string | null;
+        /**
+          * Collapses every parent item.
+         */
+        "collapseAll": () => Promise<void>;
+        /**
+          * Expands every parent item.
+         */
+        "expandAll": () => Promise<void>;
+        /**
+          * When `false`, rows do not select (clicks and Enter/Space do nothing) but parents still expand and collapse.
+          * @default true
+         */
+        "selectable": boolean;
+        /**
+          * The `value` (or, when empty, the `label`) of the selected item. Two-way synced with each item's `selected` (single selection). Setting it from code does not emit `bsChange`.
+          * @default ''
+         */
+        "value": string;
+    }
+    /**
+     * A single row of a `bs-tree`. An item that contains child `bs-tree-item` elements is a parent
+     * (it gets an expand/collapse caret and a folder icon); an item without children is a leaf (no
+     * caret, file icon).
+     * The host carries `role="treeitem"` and the `aria-*` state; the owning `bs-tree` manages the
+     * roving `tabindex`, selection and keyboard navigation. Nesting depth is computed automatically
+     * from the number of ancestor `bs-tree-item` elements and exposed as `aria-level` -- it is not a
+     * prop. Clicking the row selects it; clicking the caret (or pressing Right/Left in a tree) toggles
+     * expansion -- the two are deliberately separate.
+     * Built from: inline SVG icons only (no existing `bs-*` component covers a tree row).
+     */
+    interface BsTreeItem {
+        /**
+          * Disables the row: not focusable, ignores clicks, dimmed. Reflected.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Whether the child items are shown. Only meaningful for parents. Mutable: the caret, the keyboard and the owning tree toggle it. Reflected.
+          * @default false
+         */
+        "expanded": boolean;
+        /**
+          * The row's text. Use the `label` slot for rich content.
+          * @default ''
+         */
+        "label": string;
+        /**
+          * Marks the row as selected. Owned by the tree (single selection, synced with its `value`). Reflected.
+          * @default false
+         */
+        "selected": boolean;
+        /**
+          * Sets `expanded` as a user action: updates the prop and emits `bsToggle`. No-op for leaves, disabled items, or when the value would not change.
+         */
+        "setExpanded": (next: boolean) => Promise<void>;
+        /**
+          * Shows the leading icon (default folder / file, or the `icon` slot).
+          * @default true
+         */
+        "showIcon": boolean;
+        /**
+          * Identifier used in events and for the tree's `value`. Falls back to `label` when empty.
+          * @default ''
+         */
+        "value": string;
+    }
     /**
      * A product's "What's new" surface, in three forms matching the Figma component:
      * - `feed` -- a docked panel: heading, "Mark all as read", filter tabs, the list of updates (each a
@@ -4382,6 +4582,14 @@ export interface BsInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsInputElement;
 }
+export interface BsListCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsListElement;
+}
+export interface BsListItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsListItemElement;
+}
 export interface BsMenuItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsMenuItemElement;
@@ -4466,6 +4674,14 @@ export interface BsToastCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsToastElement;
 }
+export interface BsTreeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsTreeElement;
+}
+export interface BsTreeItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsTreeItemElement;
+}
 export interface BsWhatsNewCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsWhatsNewElement;
@@ -5904,6 +6120,90 @@ declare global {
         prototype: HTMLBsInputElement;
         new (): HTMLBsInputElement;
     };
+    interface HTMLBsListElementEventMap {
+        "bsChange": string | null;
+    }
+    /**
+     * A vertical list of `bs-list-item` rows, optionally single-select.
+     * ## When to use
+     * - Records, people, files or options shown as rows with leading media and descriptions.
+     * - `selectable` for a single-choice list (e.g. a conversation list next to a detail pane).
+     * ## When not to use
+     * - A popup list of actions -- use `bs-menu`.
+     * - Navigation between app sections -- use `bs-navigation-drawer`.
+     * - Multi-column, sortable or paged data -- use `bs-data-table`.
+     * Built from `bs-list-item` children (light DOM; the list never moves nodes).
+     * @prop --bs-list-gap - Gap between rows. Defaults to `0`.
+     * @prop --bs-list-divider-color - Divider colour when `dividers` is set. Aliased to `--bs-border-neutral-container`.
+     */
+    interface HTMLBsListElement extends Components.BsList, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsListElementEventMap>(type: K, listener: (this: HTMLBsListElement, ev: BsListCustomEvent<HTMLBsListElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsListElementEventMap>(type: K, listener: (this: HTMLBsListElement, ev: BsListCustomEvent<HTMLBsListElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsListElement: {
+        prototype: HTMLBsListElement;
+        new (): HTMLBsListElement;
+    };
+    interface HTMLBsListItemElementEventMap {
+        "bsItemClick": string | null;
+    }
+    /**
+     * A single row of a list: optional leading media (avatar, icon, image), a label, a description and
+     * optional support text, and an optional trailing caret or custom trailing content.
+     * ## When to use
+     * - As a child of `bs-list`, one per record, person, file or option.
+     * - Standalone as a plain information row (non-interactive), or with `interactive` as a button-like row.
+     * ## When not to use
+     * - A popup list of actions -- use `bs-menu` / `bs-menu-item`.
+     * - App navigation with an active route -- use `bs-navigation-drawer-item`.
+     * - Tabular data with columns, sorting or paging -- use `bs-data-table`.
+     * Composed from: leading media (`bs-avatar`) and trailing controls (`bs-icon-button`) are supplied by the
+     * consumer through the `leading` and `trailing` slots; the row itself only reserves layout. The default
+     * trailing caret is inline SVG.
+     * Roles are driven by the parent `bs-list` (via `selectionRole`). Standalone, the row has no role
+     * (`listitem` is only valid inside a list) unless `interactive` is set, which makes it a focusable
+     * `role="button"`.
+     * @prop --bs-list-item-min-height - Minimum row height. Aliased to `--bs-spacing-1000`.
+     * @prop --bs-list-item-padding-y - Aliased to `--bs-spacing-150`.
+     * @prop --bs-list-item-padding-x - Aliased to `--bs-spacing-200`.
+     * @prop --bs-list-item-gap - Gap between leading, content and trailing. Aliased to `--bs-spacing-200`.
+     * @prop --bs-list-item-content-gap - Gap between text lines. Aliased to `--bs-spacing-25`.
+     * @prop --bs-list-item-radius - Aliased to `--bs-border-radius-100`.
+     * @prop --bs-list-item-bg - Enabled background. `transparent`.
+     * @prop --bs-list-item-bg-hover - Aliased to `--bs-surface-hover`.
+     * @prop --bs-list-item-bg-pressed - Aliased to `--bs-surface-pressed`.
+     * @prop --bs-list-item-bg-focus - Aliased to `--bs-surface-focus`.
+     * @prop --bs-list-item-bg-selected - Aliased to `--bs-surface-selected`.
+     * @prop --bs-list-item-bg-selected-hover - Aliased to `--bs-surface-selected-hover`.
+     * @prop --bs-list-item-bg-selected-pressed - Aliased to `--bs-surface-selected-pressed`.
+     * @prop --bs-list-item-bg-selected-focus - Aliased to `--bs-surface-selected-focus`.
+     * @prop --bs-list-item-bg-disabled - Aliased to `--bs-surface-action-disabled`.
+     * @prop --bs-list-item-color - Text colour. Aliased to `--bs-text-default`.
+     * @prop --bs-list-item-color-disabled - Aliased to `--bs-text-on-disabled`.
+     * @prop --bs-list-item-focus-ring - Focus ring colour. Aliased to `--bs-border-neutral-focus`.
+     * @prop --bs-list-item-image-width - Leading image width. 72px.
+     * @prop --bs-list-item-image-height - Leading image height. 56px.
+     */
+    interface HTMLBsListItemElement extends Components.BsListItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsListItemElementEventMap>(type: K, listener: (this: HTMLBsListItemElement, ev: BsListItemCustomEvent<HTMLBsListItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsListItemElementEventMap>(type: K, listener: (this: HTMLBsListItemElement, ev: BsListItemCustomEvent<HTMLBsListItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsListItemElement: {
+        prototype: HTMLBsListItemElement;
+        new (): HTMLBsListItemElement;
+    };
     /**
      * The BrandSync brand mark, as its own standalone component -- shared by `bs-navigation-header`
      * and `bs-navigation-drawer`, which used to each render their own duplicated copy of this SVG
@@ -7005,6 +7305,61 @@ declare global {
         prototype: HTMLBsTooltipTriggerElement;
         new (): HTMLBsTooltipTriggerElement;
     };
+    interface HTMLBsTreeElementEventMap {
+        "bsChange": string;
+    }
+    /**
+     * A hierarchical list of `bs-tree-item` rows with single selection, expand/collapse and the
+     * WAI-ARIA tree keyboard pattern.
+     * The tree owns `role="tree"`, the roving `tabindex` (exactly one enabled, visible item is
+     * tabbable: the selected one, otherwise the first), selection (kept in sync with each item's
+     * `selected`) and keyboard navigation over the visible (rendered, non-disabled) items. Items own
+     * their expansion state and emit `bsSelect` / `bsToggle`.
+     * Built from: `bs-tree-item` rows.
+     */
+    interface HTMLBsTreeElement extends Components.BsTree, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsTreeElementEventMap>(type: K, listener: (this: HTMLBsTreeElement, ev: BsTreeCustomEvent<HTMLBsTreeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsTreeElementEventMap>(type: K, listener: (this: HTMLBsTreeElement, ev: BsTreeCustomEvent<HTMLBsTreeElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsTreeElement: {
+        prototype: HTMLBsTreeElement;
+        new (): HTMLBsTreeElement;
+    };
+    interface HTMLBsTreeItemElementEventMap {
+        "bsToggle": boolean;
+        "bsSelect": string;
+    }
+    /**
+     * A single row of a `bs-tree`. An item that contains child `bs-tree-item` elements is a parent
+     * (it gets an expand/collapse caret and a folder icon); an item without children is a leaf (no
+     * caret, file icon).
+     * The host carries `role="treeitem"` and the `aria-*` state; the owning `bs-tree` manages the
+     * roving `tabindex`, selection and keyboard navigation. Nesting depth is computed automatically
+     * from the number of ancestor `bs-tree-item` elements and exposed as `aria-level` -- it is not a
+     * prop. Clicking the row selects it; clicking the caret (or pressing Right/Left in a tree) toggles
+     * expansion -- the two are deliberately separate.
+     * Built from: inline SVG icons only (no existing `bs-*` component covers a tree row).
+     */
+    interface HTMLBsTreeItemElement extends Components.BsTreeItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsTreeItemElementEventMap>(type: K, listener: (this: HTMLBsTreeItemElement, ev: BsTreeItemCustomEvent<HTMLBsTreeItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsTreeItemElementEventMap>(type: K, listener: (this: HTMLBsTreeItemElement, ev: BsTreeItemCustomEvent<HTMLBsTreeItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsTreeItemElement: {
+        prototype: HTMLBsTreeItemElement;
+        new (): HTMLBsTreeItemElement;
+    };
     interface HTMLBsWhatsNewElementEventMap {
         "bsMarkAllRead": void;
         "bsEntryAction": { id: string };
@@ -7119,6 +7474,8 @@ declare global {
         "bs-icon-tile": HTMLBsIconTileElement;
         "bs-inline-tab": HTMLBsInlineTabElement;
         "bs-input": HTMLBsInputElement;
+        "bs-list": HTMLBsListElement;
+        "bs-list-item": HTMLBsListItemElement;
         "bs-logo": HTMLBsLogoElement;
         "bs-menu": HTMLBsMenuElement;
         "bs-menu-item": HTMLBsMenuItemElement;
@@ -7153,6 +7510,8 @@ declare global {
         "bs-toast": HTMLBsToastElement;
         "bs-tooltip": HTMLBsTooltipElement;
         "bs-tooltip-trigger": HTMLBsTooltipTriggerElement;
+        "bs-tree": HTMLBsTreeElement;
+        "bs-tree-item": HTMLBsTreeItemElement;
         "bs-whats-new": HTMLBsWhatsNewElement;
         "bs-whats-new-entry": HTMLBsWhatsNewEntryElement;
     }
@@ -9602,6 +9961,133 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * A vertical list of `bs-list-item` rows, optionally single-select.
+     * ## When to use
+     * - Records, people, files or options shown as rows with leading media and descriptions.
+     * - `selectable` for a single-choice list (e.g. a conversation list next to a detail pane).
+     * ## When not to use
+     * - A popup list of actions -- use `bs-menu`.
+     * - Navigation between app sections -- use `bs-navigation-drawer`.
+     * - Multi-column, sortable or paged data -- use `bs-data-table`.
+     * Built from `bs-list-item` children (light DOM; the list never moves nodes).
+     * @prop --bs-list-gap - Gap between rows. Defaults to `0`.
+     * @prop --bs-list-divider-color - Divider colour when `dividers` is set. Aliased to `--bs-border-neutral-container`.
+     */
+    interface BsList {
+        /**
+          * Accessible name of the list.
+          * @default null
+         */
+        "ariaLabel"?: string | null;
+        /**
+          * Draws a 1px separator between rows.
+          * @default false
+         */
+        "dividers"?: boolean;
+        /**
+          * Fires with the new `value` when the user changes the selection.
+         */
+        "onBsChange"?: (event: BsListCustomEvent<string | null>) => void;
+        /**
+          * Single-selection mode: role="listbox", rows are `option`s with roving tabindex.
+          * @default false
+         */
+        "selectable"?: boolean;
+        /**
+          * `value` of the selected item (selectable mode).
+          * @default null
+         */
+        "value"?: string | null;
+    }
+    /**
+     * A single row of a list: optional leading media (avatar, icon, image), a label, a description and
+     * optional support text, and an optional trailing caret or custom trailing content.
+     * ## When to use
+     * - As a child of `bs-list`, one per record, person, file or option.
+     * - Standalone as a plain information row (non-interactive), or with `interactive` as a button-like row.
+     * ## When not to use
+     * - A popup list of actions -- use `bs-menu` / `bs-menu-item`.
+     * - App navigation with an active route -- use `bs-navigation-drawer-item`.
+     * - Tabular data with columns, sorting or paging -- use `bs-data-table`.
+     * Composed from: leading media (`bs-avatar`) and trailing controls (`bs-icon-button`) are supplied by the
+     * consumer through the `leading` and `trailing` slots; the row itself only reserves layout. The default
+     * trailing caret is inline SVG.
+     * Roles are driven by the parent `bs-list` (via `selectionRole`). Standalone, the row has no role
+     * (`listitem` is only valid inside a list) unless `interactive` is set, which makes it a focusable
+     * `role="button"`.
+     * @prop --bs-list-item-min-height - Minimum row height. Aliased to `--bs-spacing-1000`.
+     * @prop --bs-list-item-padding-y - Aliased to `--bs-spacing-150`.
+     * @prop --bs-list-item-padding-x - Aliased to `--bs-spacing-200`.
+     * @prop --bs-list-item-gap - Gap between leading, content and trailing. Aliased to `--bs-spacing-200`.
+     * @prop --bs-list-item-content-gap - Gap between text lines. Aliased to `--bs-spacing-25`.
+     * @prop --bs-list-item-radius - Aliased to `--bs-border-radius-100`.
+     * @prop --bs-list-item-bg - Enabled background. `transparent`.
+     * @prop --bs-list-item-bg-hover - Aliased to `--bs-surface-hover`.
+     * @prop --bs-list-item-bg-pressed - Aliased to `--bs-surface-pressed`.
+     * @prop --bs-list-item-bg-focus - Aliased to `--bs-surface-focus`.
+     * @prop --bs-list-item-bg-selected - Aliased to `--bs-surface-selected`.
+     * @prop --bs-list-item-bg-selected-hover - Aliased to `--bs-surface-selected-hover`.
+     * @prop --bs-list-item-bg-selected-pressed - Aliased to `--bs-surface-selected-pressed`.
+     * @prop --bs-list-item-bg-selected-focus - Aliased to `--bs-surface-selected-focus`.
+     * @prop --bs-list-item-bg-disabled - Aliased to `--bs-surface-action-disabled`.
+     * @prop --bs-list-item-color - Text colour. Aliased to `--bs-text-default`.
+     * @prop --bs-list-item-color-disabled - Aliased to `--bs-text-on-disabled`.
+     * @prop --bs-list-item-focus-ring - Focus ring colour. Aliased to `--bs-border-neutral-focus`.
+     * @prop --bs-list-item-image-width - Leading image width. 72px.
+     * @prop --bs-list-item-image-height - Leading image height. 56px.
+     */
+    interface BsListItem {
+        /**
+          * Second text line (the "paragraph").
+          * @default null
+         */
+        "description"?: string | null;
+        /**
+          * Disables the row: dimmed, not focusable, no click event.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Makes a standalone row a focusable `role="button"` that emits `bsItemClick`.
+          * @default false
+         */
+        "interactive"?: boolean;
+        /**
+          * First text line (semibold).
+          * @default null
+         */
+        "label"?: string | null;
+        /**
+          * Fires on click / Enter / Space when the row is interactive and not disabled. Payload is `value`.
+         */
+        "onBsItemClick"?: (event: BsListItemCustomEvent<string | null>) => void;
+        /**
+          * Marks the row as selected. Managed by the parent `bs-list` when it is `selectable`.
+          * @default false
+         */
+        "selected"?: boolean;
+        /**
+          * Set by the parent `bs-list`: `listitem` (plain list) or `option` (selectable list). Do not set by hand.
+          * @default null
+         */
+        "selectionRole"?: 'listitem' | 'option' | null;
+        /**
+          * Shows a trailing caret (unless the `trailing` slot has content).
+          * @default false
+         */
+        "showArrow"?: boolean;
+        /**
+          * Optional third text line.
+          * @default null
+         */
+        "supportText"?: string | null;
+        /**
+          * Identifies the item; emitted by `bsItemClick` and matched against `bs-list`'s `value`.
+          * @default null
+         */
+        "value"?: string | null;
+    }
     /**
      * The BrandSync brand mark, as its own standalone component -- shared by `bs-navigation-header`
      * and `bs-navigation-drawer`, which used to each render their own duplicated copy of this SVG
@@ -11566,6 +12052,87 @@ declare namespace LocalJSX {
          */
         "text"?: string;
     }
+    /**
+     * A hierarchical list of `bs-tree-item` rows with single selection, expand/collapse and the
+     * WAI-ARIA tree keyboard pattern.
+     * The tree owns `role="tree"`, the roving `tabindex` (exactly one enabled, visible item is
+     * tabbable: the selected one, otherwise the first), selection (kept in sync with each item's
+     * `selected`) and keyboard navigation over the visible (rendered, non-disabled) items. Items own
+     * their expansion state and emit `bsSelect` / `bsToggle`.
+     * Built from: `bs-tree-item` rows.
+     */
+    interface BsTree {
+        /**
+          * Accessible name of the tree. Bound onto the internal `role="tree"` element (an `aria-label` on the host would not reach it).
+          * @default null
+         */
+        "ariaLabel"?: string | null;
+        /**
+          * Emitted when the user changes the selection (click, Enter/Space), with the new value. Not emitted when `value` is set from code.
+         */
+        "onBsChange"?: (event: BsTreeCustomEvent<string>) => void;
+        /**
+          * When `false`, rows do not select (clicks and Enter/Space do nothing) but parents still expand and collapse.
+          * @default true
+         */
+        "selectable"?: boolean;
+        /**
+          * The `value` (or, when empty, the `label`) of the selected item. Two-way synced with each item's `selected` (single selection). Setting it from code does not emit `bsChange`.
+          * @default ''
+         */
+        "value"?: string;
+    }
+    /**
+     * A single row of a `bs-tree`. An item that contains child `bs-tree-item` elements is a parent
+     * (it gets an expand/collapse caret and a folder icon); an item without children is a leaf (no
+     * caret, file icon).
+     * The host carries `role="treeitem"` and the `aria-*` state; the owning `bs-tree` manages the
+     * roving `tabindex`, selection and keyboard navigation. Nesting depth is computed automatically
+     * from the number of ancestor `bs-tree-item` elements and exposed as `aria-level` -- it is not a
+     * prop. Clicking the row selects it; clicking the caret (or pressing Right/Left in a tree) toggles
+     * expansion -- the two are deliberately separate.
+     * Built from: inline SVG icons only (no existing `bs-*` component covers a tree row).
+     */
+    interface BsTreeItem {
+        /**
+          * Disables the row: not focusable, ignores clicks, dimmed. Reflected.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether the child items are shown. Only meaningful for parents. Mutable: the caret, the keyboard and the owning tree toggle it. Reflected.
+          * @default false
+         */
+        "expanded"?: boolean;
+        /**
+          * The row's text. Use the `label` slot for rich content.
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * Emitted (bubbling, composed) when the user activates the row, with the item's value. The owning `bs-tree` listens and updates the selection.
+         */
+        "onBsSelect"?: (event: BsTreeItemCustomEvent<string>) => void;
+        /**
+          * Emitted when the user toggles expansion (caret click or keyboard), with the new `expanded` value. Not emitted when `expanded` is set from code.
+         */
+        "onBsToggle"?: (event: BsTreeItemCustomEvent<boolean>) => void;
+        /**
+          * Marks the row as selected. Owned by the tree (single selection, synced with its `value`). Reflected.
+          * @default false
+         */
+        "selected"?: boolean;
+        /**
+          * Shows the leading icon (default folder / file, or the `icon` slot).
+          * @default true
+         */
+        "showIcon"?: boolean;
+        /**
+          * Identifier used in events and for the tree's `value`. Falls back to `label` when empty.
+          * @default ''
+         */
+        "value"?: string;
+    }
     /**
      * A product's "What's new" surface, in three forms matching the Figma component:
      * - `feed` -- a docked panel: heading, "Mark all as read", filter tabs, the list of updates (each a
@@ -12141,6 +12708,23 @@ declare namespace LocalJSX {
         "length": number;
         "open": boolean;
     }
+    interface BsListAttributes {
+        "selectable": boolean;
+        "value": string | null;
+        "dividers": boolean;
+        "ariaLabel": string | null;
+    }
+    interface BsListItemAttributes {
+        "label": string | null;
+        "description": string | null;
+        "supportText": string | null;
+        "selected": boolean;
+        "disabled": boolean;
+        "showArrow": boolean;
+        "value": string | null;
+        "interactive": boolean;
+        "selectionRole": 'listitem' | 'option' | null;
+    }
     interface BsLogoAttributes {
         "variant": BsLogoVariant;
         "background": BsLogoBackground;
@@ -12425,6 +13009,19 @@ declare namespace LocalJSX {
         "delay": number;
         "placement": BsTooltipTriggerPlacement;
     }
+    interface BsTreeAttributes {
+        "ariaLabel": string | null;
+        "value": string;
+        "selectable": boolean;
+    }
+    interface BsTreeItemAttributes {
+        "label": string;
+        "expanded": boolean;
+        "selected": boolean;
+        "disabled": boolean;
+        "showIcon": boolean;
+        "value": string;
+    }
     interface BsWhatsNewAttributes {
         "type": BsWhatsNewType;
         "heading": string;
@@ -12506,6 +13103,8 @@ declare namespace LocalJSX {
         "bs-icon-tile": Omit<BsIconTile, keyof BsIconTileAttributes> & { [K in keyof BsIconTile & keyof BsIconTileAttributes]?: BsIconTile[K] } & { [K in keyof BsIconTile & keyof BsIconTileAttributes as `attr:${K}`]?: BsIconTileAttributes[K] } & { [K in keyof BsIconTile & keyof BsIconTileAttributes as `prop:${K}`]?: BsIconTile[K] };
         "bs-inline-tab": Omit<BsInlineTab, keyof BsInlineTabAttributes> & { [K in keyof BsInlineTab & keyof BsInlineTabAttributes]?: BsInlineTab[K] } & { [K in keyof BsInlineTab & keyof BsInlineTabAttributes as `attr:${K}`]?: BsInlineTabAttributes[K] } & { [K in keyof BsInlineTab & keyof BsInlineTabAttributes as `prop:${K}`]?: BsInlineTab[K] };
         "bs-input": Omit<BsInput, keyof BsInputAttributes> & { [K in keyof BsInput & keyof BsInputAttributes]?: BsInput[K] } & { [K in keyof BsInput & keyof BsInputAttributes as `attr:${K}`]?: BsInputAttributes[K] } & { [K in keyof BsInput & keyof BsInputAttributes as `prop:${K}`]?: BsInput[K] };
+        "bs-list": Omit<BsList, keyof BsListAttributes> & { [K in keyof BsList & keyof BsListAttributes]?: BsList[K] } & { [K in keyof BsList & keyof BsListAttributes as `attr:${K}`]?: BsListAttributes[K] } & { [K in keyof BsList & keyof BsListAttributes as `prop:${K}`]?: BsList[K] };
+        "bs-list-item": Omit<BsListItem, keyof BsListItemAttributes> & { [K in keyof BsListItem & keyof BsListItemAttributes]?: BsListItem[K] } & { [K in keyof BsListItem & keyof BsListItemAttributes as `attr:${K}`]?: BsListItemAttributes[K] } & { [K in keyof BsListItem & keyof BsListItemAttributes as `prop:${K}`]?: BsListItem[K] };
         "bs-logo": Omit<BsLogo, keyof BsLogoAttributes> & { [K in keyof BsLogo & keyof BsLogoAttributes]?: BsLogo[K] } & { [K in keyof BsLogo & keyof BsLogoAttributes as `attr:${K}`]?: BsLogoAttributes[K] } & { [K in keyof BsLogo & keyof BsLogoAttributes as `prop:${K}`]?: BsLogo[K] };
         "bs-menu": BsMenu;
         "bs-menu-item": Omit<BsMenuItem, keyof BsMenuItemAttributes> & { [K in keyof BsMenuItem & keyof BsMenuItemAttributes]?: BsMenuItem[K] } & { [K in keyof BsMenuItem & keyof BsMenuItemAttributes as `attr:${K}`]?: BsMenuItemAttributes[K] } & { [K in keyof BsMenuItem & keyof BsMenuItemAttributes as `prop:${K}`]?: BsMenuItem[K] };
@@ -12540,6 +13139,8 @@ declare namespace LocalJSX {
         "bs-toast": Omit<BsToast, keyof BsToastAttributes> & { [K in keyof BsToast & keyof BsToastAttributes]?: BsToast[K] } & { [K in keyof BsToast & keyof BsToastAttributes as `attr:${K}`]?: BsToastAttributes[K] } & { [K in keyof BsToast & keyof BsToastAttributes as `prop:${K}`]?: BsToast[K] };
         "bs-tooltip": Omit<BsTooltip, keyof BsTooltipAttributes> & { [K in keyof BsTooltip & keyof BsTooltipAttributes]?: BsTooltip[K] } & { [K in keyof BsTooltip & keyof BsTooltipAttributes as `attr:${K}`]?: BsTooltipAttributes[K] } & { [K in keyof BsTooltip & keyof BsTooltipAttributes as `prop:${K}`]?: BsTooltip[K] };
         "bs-tooltip-trigger": Omit<BsTooltipTrigger, keyof BsTooltipTriggerAttributes> & { [K in keyof BsTooltipTrigger & keyof BsTooltipTriggerAttributes]?: BsTooltipTrigger[K] } & { [K in keyof BsTooltipTrigger & keyof BsTooltipTriggerAttributes as `attr:${K}`]?: BsTooltipTriggerAttributes[K] } & { [K in keyof BsTooltipTrigger & keyof BsTooltipTriggerAttributes as `prop:${K}`]?: BsTooltipTrigger[K] };
+        "bs-tree": Omit<BsTree, keyof BsTreeAttributes> & { [K in keyof BsTree & keyof BsTreeAttributes]?: BsTree[K] } & { [K in keyof BsTree & keyof BsTreeAttributes as `attr:${K}`]?: BsTreeAttributes[K] } & { [K in keyof BsTree & keyof BsTreeAttributes as `prop:${K}`]?: BsTree[K] };
+        "bs-tree-item": Omit<BsTreeItem, keyof BsTreeItemAttributes> & { [K in keyof BsTreeItem & keyof BsTreeItemAttributes]?: BsTreeItem[K] } & { [K in keyof BsTreeItem & keyof BsTreeItemAttributes as `attr:${K}`]?: BsTreeItemAttributes[K] } & { [K in keyof BsTreeItem & keyof BsTreeItemAttributes as `prop:${K}`]?: BsTreeItem[K] };
         "bs-whats-new": Omit<BsWhatsNew, keyof BsWhatsNewAttributes> & { [K in keyof BsWhatsNew & keyof BsWhatsNewAttributes]?: BsWhatsNew[K] } & { [K in keyof BsWhatsNew & keyof BsWhatsNewAttributes as `attr:${K}`]?: BsWhatsNewAttributes[K] } & { [K in keyof BsWhatsNew & keyof BsWhatsNewAttributes as `prop:${K}`]?: BsWhatsNew[K] };
         "bs-whats-new-entry": Omit<BsWhatsNewEntry, keyof BsWhatsNewEntryAttributes> & { [K in keyof BsWhatsNewEntry & keyof BsWhatsNewEntryAttributes]?: BsWhatsNewEntry[K] } & { [K in keyof BsWhatsNewEntry & keyof BsWhatsNewEntryAttributes as `attr:${K}`]?: BsWhatsNewEntryAttributes[K] } & { [K in keyof BsWhatsNewEntry & keyof BsWhatsNewEntryAttributes as `prop:${K}`]?: BsWhatsNewEntry[K] };
     }
@@ -13446,6 +14047,58 @@ declare module "@stencil/core" {
              *   options list at all (freeform chip entry).
              */
             "bs-input": LocalJSX.IntrinsicElements["bs-input"] & JSXBase.HTMLAttributes<HTMLBsInputElement>;
+            /**
+             * A vertical list of `bs-list-item` rows, optionally single-select.
+             * ## When to use
+             * - Records, people, files or options shown as rows with leading media and descriptions.
+             * - `selectable` for a single-choice list (e.g. a conversation list next to a detail pane).
+             * ## When not to use
+             * - A popup list of actions -- use `bs-menu`.
+             * - Navigation between app sections -- use `bs-navigation-drawer`.
+             * - Multi-column, sortable or paged data -- use `bs-data-table`.
+             * Built from `bs-list-item` children (light DOM; the list never moves nodes).
+             * @prop --bs-list-gap - Gap between rows. Defaults to `0`.
+             * @prop --bs-list-divider-color - Divider colour when `dividers` is set. Aliased to `--bs-border-neutral-container`.
+             */
+            "bs-list": LocalJSX.IntrinsicElements["bs-list"] & JSXBase.HTMLAttributes<HTMLBsListElement>;
+            /**
+             * A single row of a list: optional leading media (avatar, icon, image), a label, a description and
+             * optional support text, and an optional trailing caret or custom trailing content.
+             * ## When to use
+             * - As a child of `bs-list`, one per record, person, file or option.
+             * - Standalone as a plain information row (non-interactive), or with `interactive` as a button-like row.
+             * ## When not to use
+             * - A popup list of actions -- use `bs-menu` / `bs-menu-item`.
+             * - App navigation with an active route -- use `bs-navigation-drawer-item`.
+             * - Tabular data with columns, sorting or paging -- use `bs-data-table`.
+             * Composed from: leading media (`bs-avatar`) and trailing controls (`bs-icon-button`) are supplied by the
+             * consumer through the `leading` and `trailing` slots; the row itself only reserves layout. The default
+             * trailing caret is inline SVG.
+             * Roles are driven by the parent `bs-list` (via `selectionRole`). Standalone, the row has no role
+             * (`listitem` is only valid inside a list) unless `interactive` is set, which makes it a focusable
+             * `role="button"`.
+             * @prop --bs-list-item-min-height - Minimum row height. Aliased to `--bs-spacing-1000`.
+             * @prop --bs-list-item-padding-y - Aliased to `--bs-spacing-150`.
+             * @prop --bs-list-item-padding-x - Aliased to `--bs-spacing-200`.
+             * @prop --bs-list-item-gap - Gap between leading, content and trailing. Aliased to `--bs-spacing-200`.
+             * @prop --bs-list-item-content-gap - Gap between text lines. Aliased to `--bs-spacing-25`.
+             * @prop --bs-list-item-radius - Aliased to `--bs-border-radius-100`.
+             * @prop --bs-list-item-bg - Enabled background. `transparent`.
+             * @prop --bs-list-item-bg-hover - Aliased to `--bs-surface-hover`.
+             * @prop --bs-list-item-bg-pressed - Aliased to `--bs-surface-pressed`.
+             * @prop --bs-list-item-bg-focus - Aliased to `--bs-surface-focus`.
+             * @prop --bs-list-item-bg-selected - Aliased to `--bs-surface-selected`.
+             * @prop --bs-list-item-bg-selected-hover - Aliased to `--bs-surface-selected-hover`.
+             * @prop --bs-list-item-bg-selected-pressed - Aliased to `--bs-surface-selected-pressed`.
+             * @prop --bs-list-item-bg-selected-focus - Aliased to `--bs-surface-selected-focus`.
+             * @prop --bs-list-item-bg-disabled - Aliased to `--bs-surface-action-disabled`.
+             * @prop --bs-list-item-color - Text colour. Aliased to `--bs-text-default`.
+             * @prop --bs-list-item-color-disabled - Aliased to `--bs-text-on-disabled`.
+             * @prop --bs-list-item-focus-ring - Focus ring colour. Aliased to `--bs-border-neutral-focus`.
+             * @prop --bs-list-item-image-width - Leading image width. 72px.
+             * @prop --bs-list-item-image-height - Leading image height. 56px.
+             */
+            "bs-list-item": LocalJSX.IntrinsicElements["bs-list-item"] & JSXBase.HTMLAttributes<HTMLBsListItemElement>;
             /**
              * The BrandSync brand mark, as its own standalone component -- shared by `bs-navigation-header`
              * and `bs-navigation-drawer`, which used to each render their own duplicated copy of this SVG
@@ -14124,6 +14777,28 @@ declare module "@stencil/core" {
              * @prop --bs-tooltip-trigger-z-index - Stacking order. Aliased to `--bs-z-index-popover`.
              */
             "bs-tooltip-trigger": LocalJSX.IntrinsicElements["bs-tooltip-trigger"] & JSXBase.HTMLAttributes<HTMLBsTooltipTriggerElement>;
+            /**
+             * A hierarchical list of `bs-tree-item` rows with single selection, expand/collapse and the
+             * WAI-ARIA tree keyboard pattern.
+             * The tree owns `role="tree"`, the roving `tabindex` (exactly one enabled, visible item is
+             * tabbable: the selected one, otherwise the first), selection (kept in sync with each item's
+             * `selected`) and keyboard navigation over the visible (rendered, non-disabled) items. Items own
+             * their expansion state and emit `bsSelect` / `bsToggle`.
+             * Built from: `bs-tree-item` rows.
+             */
+            "bs-tree": LocalJSX.IntrinsicElements["bs-tree"] & JSXBase.HTMLAttributes<HTMLBsTreeElement>;
+            /**
+             * A single row of a `bs-tree`. An item that contains child `bs-tree-item` elements is a parent
+             * (it gets an expand/collapse caret and a folder icon); an item without children is a leaf (no
+             * caret, file icon).
+             * The host carries `role="treeitem"` and the `aria-*` state; the owning `bs-tree` manages the
+             * roving `tabindex`, selection and keyboard navigation. Nesting depth is computed automatically
+             * from the number of ancestor `bs-tree-item` elements and exposed as `aria-level` -- it is not a
+             * prop. Clicking the row selects it; clicking the caret (or pressing Right/Left in a tree) toggles
+             * expansion -- the two are deliberately separate.
+             * Built from: inline SVG icons only (no existing `bs-*` component covers a tree row).
+             */
+            "bs-tree-item": LocalJSX.IntrinsicElements["bs-tree-item"] & JSXBase.HTMLAttributes<HTMLBsTreeItemElement>;
             /**
              * A product's "What's new" surface, in three forms matching the Figma component:
              * - `feed` -- a docked panel: heading, "Mark all as read", filter tabs, the list of updates (each a