@brandsync/wc 1.15.0 → 1.16.0

package/custom-elements.json

@@ -9734,189 +9734,115 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/bs-logo/bs-logo.tsx",
+      "path": "src/components/bs-list/bs-list.tsx",
       "declarations": [
         {
           "kind": "class",
           "customElement": true,
-          "tagName": "bs-logo",
-          "name": "BsLogo",
-          "description": "The BrandSync brand mark, as its own standalone component -- shared by `bs-navigation-header`\nand `bs-navigation-drawer`, which used to each render their own duplicated copy of this SVG\n(the drawer's collapsed state even faked an icon-only look by clipping the full wordmark asset\ndown to a narrowed box, rather than using a real icon-only asset).\n\n## When to use\n- Anywhere the BrandSync logo/icon needs to render: a navigation header, a nav drawer, etc.\n\n## When not to use\n- The Genie AI chat panel's own brand mark -- that's a different logo (`bs-chatbot-header`'s\n  own inline Genie asset), not this one.\n\n`variant` mirrors Figma's \"Logo\" component set (node 10909:30421) `Device` property\n(\"Desktop\" / \"Tab and mobile\"), which was originally meant to distinguish the full lockup from\nthe icon-only mark at different responsive breakpoints -- renamed here to\n`variant: 'full' | 'mark'` since that's what it actually controls (how much of the logo\nrenders), not literally a device/breakpoint switch.\n\n`variant=\"custom\"` is not a Figma variant at all -- it's an escape hatch for a consuming app\nthat needs to show a DIFFERENT product's logo in the same slot (e.g. a white-labeled deployment,\nor a logo fetched at runtime from a service like brand.dev), via `src`/`alt`, instead of the\nbuilt-in BrandSync assets. This component deliberately does NOT fetch that image itself --\nnetwork calls, loading/error states, and caching are the consuming app's responsibility, same as\nevery other component in this library (e.g. `bs-attachment` takes `imageSrc` rather than fetching\nan image on its own). `background` has no effect on `variant=\"custom\"` -- a consumer's own image\nis already designed for whatever surface it's placed on.",
+          "tagName": "bs-list",
+          "name": "BsList",
+          "description": "A vertical list of `bs-list-item` rows, optionally single-select.\n\n## When to use\n- Records, people, files or options shown as rows with leading media and descriptions.\n- `selectable` for a single-choice list (e.g. a conversation list next to a detail pane).\n\n## When not to use\n- A popup list of actions -- use `bs-menu`.\n- Navigation between app sections -- use `bs-navigation-drawer`.\n- Multi-column, sortable or paged data -- use `bs-data-table`.\n\nBuilt from `bs-list-item` children (light DOM; the list never moves nodes).",
           "attributes": [
             {
-              "name": "alt",
-              "description": "`variant=\"custom\"` only: accessible alt text for the image -- a product logo is meaningful\ncontent (whose brand is this?), not decorative, so set this to something real (e.g. the\nproduct/company name). Falls back to `alt=\"\"` (marking the image decorative to assistive\ntech) when unset, rather than omitting the `alt` attribute entirely -- an `<img>` with no\n`alt` attribute at all is a harder accessibility failure than one explicitly marked\ndecorative, but an empty fallback is still worse than a real name, so don't rely on it.\nIgnored for `full`/`mark` (those already carry their own fixed `aria-label=\"BrandSync\"`).",
+              "name": "aria-label",
+              "description": "Accessible name of the list.",
               "type": {
                 "text": "string"
               },
               "default": "null",
-              "fieldName": "alt"
+              "fieldName": "ariaLabel"
             },
             {
-              "name": "background",
-              "description": "Which pre-built asset to use for `variant=\"full\"` -- Figma ships a genuinely separate,\ndifferently-drawn dark-background asset (every wordmark path filled solid white, and the\nicon's outer shape a single solid-white path instead of the light version's two-path\nwhite-fill-plus-border-ring), not a CSS currentColor swap of identical paths.\n\n`\"auto\"` (default) renders both assets and lets CSS pick one via\n`--bs-logo-asset-light-display`/`--bs-logo-asset-dark-display` (defined in\n`src/global/base.css`, flipped by the same `[data-theme=\"dark\"]` attribute every other\n`--bs-*` token already reacts to) -- so the logo just follows the ambient theme with no wiring\nneeded, the same way a consuming app's own dark mode already re-themes every other part of\nthis library via ordinary CSS custom property inheritance. Set `\"light\"`/`\"dark\"` explicitly\nto pin one regardless of the ambient theme -- e.g. a dark sidebar that isn't otherwise\ndark-themed.\n\nHas no effect on `variant=\"mark\"`: Figma's component set only has one real designed instance\nof the icon-only mark (`Device=\"Tab and mobile\"`, `Background=\"Default\"`) -- there's no\nseparate dark version of it, so the mark renders identically regardless of this prop.",
+              "name": "dividers",
+              "description": "Draws a 1px separator between rows.",
               "type": {
-                "text": "\"auto\" | \"dark\" | \"light\"",
-                "references": [
-                  {
-                    "name": "BsLogoBackground"
-                  }
-                ]
+                "text": "boolean"
               },
-              "default": "'auto'",
-              "fieldName": "background"
+              "default": "false",
+              "fieldName": "dividers"
             },
             {
-              "name": "src",
-              "description": "`variant=\"custom\"` only: the image URL to render (e.g. a URL your app already fetched from a\nlogo API). Ignored for `full`/`mark`.",
+              "name": "selectable",
+              "description": "Single-selection mode: role=\"listbox\", rows are `option`s with roving tabindex.",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "null",
-              "fieldName": "src"
+              "default": "false",
+              "fieldName": "selectable"
             },
             {
-              "name": "variant",
-              "description": "How much of the logo to render. `full` is the icon + \"EG BrandSync\" wordmark (190.977x44\nnatural size); `mark` is just the icon (44x44 natural size), no wordmark; `custom` renders a\nconsumer-supplied image via `src`/`alt` instead of a built-in BrandSync asset -- see the class\ndoc above.",
+              "name": "value",
+              "description": "`value` of the selected item (selectable mode).",
               "type": {
-                "text": "\"custom\" | \"full\" | \"mark\"",
-                "references": [
-                  {
-                    "name": "BsLogoVariant"
-                  }
-                ]
+                "text": "string"
               },
-              "default": "'full'",
-              "fieldName": "variant"
+              "default": "null",
+              "fieldName": "value"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "alt",
-              "description": "`variant=\"custom\"` only: accessible alt text for the image -- a product logo is meaningful\ncontent (whose brand is this?), not decorative, so set this to something real (e.g. the\nproduct/company name). Falls back to `alt=\"\"` (marking the image decorative to assistive\ntech) when unset, rather than omitting the `alt` attribute entirely -- an `<img>` with no\n`alt` attribute at all is a harder accessibility failure than one explicitly marked\ndecorative, but an empty fallback is still worse than a real name, so don't rely on it.\nIgnored for `full`/`mark` (those already carry their own fixed `aria-label=\"BrandSync\"`).",
+              "name": "ariaLabel",
+              "description": "Accessible name of the list.",
               "type": {
                 "text": "string"
               },
               "default": "null",
-              "attribute": "alt"
+              "attribute": "aria-label"
             },
             {
               "kind": "field",
-              "name": "background",
-              "description": "Which pre-built asset to use for `variant=\"full\"` -- Figma ships a genuinely separate,\ndifferently-drawn dark-background asset (every wordmark path filled solid white, and the\nicon's outer shape a single solid-white path instead of the light version's two-path\nwhite-fill-plus-border-ring), not a CSS currentColor swap of identical paths.\n\n`\"auto\"` (default) renders both assets and lets CSS pick one via\n`--bs-logo-asset-light-display`/`--bs-logo-asset-dark-display` (defined in\n`src/global/base.css`, flipped by the same `[data-theme=\"dark\"]` attribute every other\n`--bs-*` token already reacts to) -- so the logo just follows the ambient theme with no wiring\nneeded, the same way a consuming app's own dark mode already re-themes every other part of\nthis library via ordinary CSS custom property inheritance. Set `\"light\"`/`\"dark\"` explicitly\nto pin one regardless of the ambient theme -- e.g. a dark sidebar that isn't otherwise\ndark-themed.\n\nHas no effect on `variant=\"mark\"`: Figma's component set only has one real designed instance\nof the icon-only mark (`Device=\"Tab and mobile\"`, `Background=\"Default\"`) -- there's no\nseparate dark version of it, so the mark renders identically regardless of this prop.",
+              "name": "dividers",
+              "description": "Draws a 1px separator between rows.",
               "type": {
-                "text": "\"auto\" | \"dark\" | \"light\"",
-                "references": [
-                  {
-                    "name": "BsLogoBackground"
-                  }
-                ]
+                "text": "boolean"
               },
-              "default": "'auto'",
-              "attribute": "background"
+              "default": "false",
+              "attribute": "dividers",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "src",
-              "description": "`variant=\"custom\"` only: the image URL to render (e.g. a URL your app already fetched from a\nlogo API). Ignored for `full`/`mark`.",
+              "name": "selectable",
+              "description": "Single-selection mode: role=\"listbox\", rows are `option`s with roving tabindex.",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "null",
-              "attribute": "src"
+              "default": "false",
+              "attribute": "selectable"
             },
             {
               "kind": "field",
-              "name": "variant",
-              "description": "How much of the logo to render. `full` is the icon + \"EG BrandSync\" wordmark (190.977x44\nnatural size); `mark` is just the icon (44x44 natural size), no wordmark; `custom` renders a\nconsumer-supplied image via `src`/`alt` instead of a built-in BrandSync asset -- see the class\ndoc above.",
+              "name": "value",
+              "description": "`value` of the selected item (selectable mode).",
               "type": {
-                "text": "\"custom\" | \"full\" | \"mark\"",
-                "references": [
-                  {
-                    "name": "BsLogoVariant"
-                  }
-                ]
+                "text": "string"
               },
-              "default": "'full'",
-              "attribute": "variant"
+              "default": "null",
+              "attribute": "value",
+              "reflects": true
             }
           ],
-          "cssParts": [
+          "events": [
             {
-              "name": "logo",
-              "description": "The rendered SVG/image's wrapper."
+              "name": "bsChange",
+              "description": "Fires with the new `value` when the user changes the selection.",
+              "type": {
+                "text": "CustomEvent<string>"
+              }
             }
           ],
-          "cssProperties": [
-            {
-              "name": "--bs-logo-asset-dark-display",
-              "description": "The background=\"auto\" counterpart to --bs-logo-asset-light-display above -- see that entry."
-            },
-            {
-              "name": "--bs-logo-asset-light-display",
-              "description": "Only read when background=\"auto\" (the default). Defined in src/global/base.css, not here -- that's this library's own bridge from the ambient [data-theme=\"dark\"] attribute to which full-wordmark asset shows, not a per-component override point most consumers need to touch directly."
-            },
-            {
-              "name": "--bs-logo-height-custom",
-              "description": "Height of the rendered image when variant=\"custom\". Width is `auto` (not a fixed custom property) so a consumer's own logo keeps its natural aspect ratio -- only the height is constrained, matching `full`/`mark`'s shared 44px height. Defaults to 44px."
-            },
-            {
-              "name": "--bs-logo-height-full",
-              "description": "Height of the rendered logo when variant=\"full\". 44px."
-            },
-            {
-              "name": "--bs-logo-height-mark",
-              "description": "Height of the rendered logo when variant=\"mark\". 44px."
-            },
-            {
-              "name": "--bs-logo-width-full",
-              "description": "Width of the rendered logo when variant=\"full\". 190.977px -- the light asset's natural width after its icon-to-wordmark gap was tightened from Figma's own exported spacing (see brandsync-logo-full-light.ts) -- a literal size, not a brandsync-tokens alias, since this is a fixed asset's natural dimensions rather than a themeable design token."
-            },
-            {
-              "name": "--bs-logo-width-mark",
-              "description": "Width of the rendered logo when variant=\"mark\". 44px."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BsLogo",
-          "declaration": {
-            "name": "BsLogo"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bs-logo",
-          "declaration": {
-            "name": "BsLogo"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/bs-menu/bs-menu.tsx",
-      "declarations": [
-        {
-          "kind": "class",
-          "customElement": true,
-          "tagName": "bs-menu",
-          "name": "BsMenu",
-          "description": "A generic dropdown/popup menu container: a rounded, elevated list of items (typically\n`bs-menu-item` elements).\n\n## When to use\n- A popup list of actions/options triggered by another control (e.g. a \"more options\" kebab\n  button), such as `bs-chatbot-response-action`'s `menu` slot.\n\n## When not to use\n- A persistent, always-visible list of options -- this component is purpose-built as a popup\n  surface (rounded corners, elevation shadow), not a plain list.",
           "slots": [
             {
               "name": "",
-              "description": "Default slot: the menu's items (typically `bs-menu-item` elements, though anything can\nbe slotted in -- this component doesn't restrict slot content via JS)."
+              "description": "The `bs-list-item` rows."
             }
           ],
           "cssParts": [
             {
               "name": "list",
-              "description": "The rounded, elevated box wrapping the slotted items."
+              "description": "The list container."
             }
           ]
         }
@@ -9924,251 +9850,424 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BsMenu",
+          "name": "BsList",
           "declaration": {
-            "name": "BsMenu"
+            "name": "BsList"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bs-menu",
+          "name": "bs-list",
           "declaration": {
-            "name": "BsMenu"
+            "name": "BsList"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/bs-menu-item/bs-menu-item.tsx",
+      "path": "src/components/bs-list-item/bs-list-item.tsx",
       "declarations": [
         {
           "kind": "class",
           "customElement": true,
-          "tagName": "bs-menu-item",
-          "name": "BsMenuItem",
-          "description": "A single selectable row inside a `bs-menu`: an optional icon plus a text label, rendered as a\nreal `<button>` for correct keyboard/click semantics.\n\n## When to use\n- As a child of `bs-menu`, one per selectable action/option.\n\n## When not to use\n- Outside of `bs-menu` -- this component's sizing/hover treatment is designed to sit inside the\n  menu's rounded, padded list box.",
+          "tagName": "bs-list-item",
+          "name": "BsListItem",
+          "description": "A single row of a list: optional leading media (avatar, icon, image), a label, a description and\noptional support text, and an optional trailing caret or custom trailing content.\n\n## When to use\n- As a child of `bs-list`, one per record, person, file or option.\n- Standalone as a plain information row (non-interactive), or with `interactive` as a button-like row.\n\n## When not to use\n- A popup list of actions -- use `bs-menu` / `bs-menu-item`.\n- App navigation with an active route -- use `bs-navigation-drawer-item`.\n- Tabular data with columns, sorting or paging -- use `bs-data-table`.\n\nComposed from: leading media (`bs-avatar`) and trailing controls (`bs-icon-button`) are supplied by the\nconsumer through the `leading` and `trailing` slots; the row itself only reserves layout. The default\ntrailing caret is inline SVG.\n\nRoles are driven by the parent `bs-list` (via `selectionRole`). Standalone, the row has no role\n(`listitem` is only valid inside a list) unless `interactive` is set, which makes it a focusable\n`role=\"button\"`.",
           "attributes": [
+            {
+              "name": "description",
+              "description": "Second text line (the \"paragraph\").",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "fieldName": "description"
+            },
             {
               "name": "disabled",
-              "description": "Disables the item: no hover/pressed/focus styling, no pointer cursor, not reachable by\nkeyboard tabbing, and clicking it does not emit `bsSelect`.",
+              "description": "Disables the row: dimmed, not focusable, no click event.",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "fieldName": "disabled"
-            }
-          ],
-          "members": [
+            },
             {
-              "kind": "field",
-              "name": "disabled",
-              "description": "Disables the item: no hover/pressed/focus styling, no pointer cursor, not reachable by\nkeyboard tabbing, and clicking it does not emit `bsSelect`.",
+              "name": "interactive",
+              "description": "Makes a standalone row a focusable `role=\"button\"` that emits `bsItemClick`.",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "disabled"
-            }
-          ],
-          "events": [
+              "fieldName": "interactive"
+            },
             {
-              "name": "bsSelect",
-              "description": "Fires when the item is clicked.",
+              "name": "label",
+              "description": "First text line (semibold).",
               "type": {
-                "text": "CustomEvent<void>"
-              }
-            }
-          ],
-          "slots": [
+                "text": "string"
+              },
+              "default": "null",
+              "fieldName": "label"
+            },
             {
-              "name": "",
-              "description": "Default slot: the item's text label."
+              "name": "selected",
+              "description": "Marks the row as selected. Managed by the parent `bs-list` when it is `selectable`.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selected"
             },
             {
-              "name": "icon",
-              "description": "Optional leading icon (24x24). When left empty, no icon space is reserved."
+              "name": "selection-role",
+              "description": "Set by the parent `bs-list`: `listitem` (plain list) or `option` (selectable list). Do not set by hand.",
+              "type": {
+                "text": "\"listitem\" | \"option\""
+              },
+              "default": "null",
+              "fieldName": "selectionRole"
+            },
+            {
+              "name": "show-arrow",
+              "description": "Shows a trailing caret (unless the `trailing` slot has content).",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "showArrow"
+            },
+            {
+              "name": "support-text",
+              "description": "Optional third text line.",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "fieldName": "supportText"
+            },
+            {
+              "name": "value",
+              "description": "Identifies the item; emitted by `bsItemClick` and matched against `bs-list`'s `value`.",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "fieldName": "value"
             }
           ],
-          "cssParts": [
+          "members": [
             {
-              "name": "icon",
-              "description": "The icon wrapper."
+              "kind": "field",
+              "name": "description",
+              "description": "Second text line (the \"paragraph\").",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "attribute": "description"
             },
             {
-              "name": "item",
-              "description": "The button element."
+              "kind": "field",
+              "name": "disabled",
+              "description": "Disables the row: dimmed, not focusable, no click event.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "name": "label",
-              "description": "The label wrapper."
-            }
-          ]
-        }
+              "kind": "field",
+              "name": "interactive",
+              "description": "Makes a standalone row a focusable `role=\"button\"` that emits `bsItemClick`.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "interactive",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "description": "First text line (semibold).",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "description": "Marks the row as selected. Managed by the parent `bs-list` when it is `selectable`.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "selectionRole",
+              "description": "Set by the parent `bs-list`: `listitem` (plain list) or `option` (selectable list). Do not set by hand.",
+              "type": {
+                "text": "\"listitem\" | \"option\""
+              },
+              "default": "null",
+              "attribute": "selection-role"
+            },
+            {
+              "kind": "field",
+              "name": "showArrow",
+              "description": "Shows a trailing caret (unless the `trailing` slot has content).",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "show-arrow"
+            },
+            {
+              "kind": "field",
+              "name": "supportText",
+              "description": "Optional third text line.",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "attribute": "support-text"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "description": "Identifies the item; emitted by `bsItemClick` and matched against `bs-list`'s `value`.",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "attribute": "value"
+            }
+          ],
+          "events": [
+            {
+              "name": "bsItemClick",
+              "description": "Fires on click / Enter / Space when the row is interactive and not disabled. Payload is `value`.",
+              "type": {
+                "text": "CustomEvent<string>"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Rich content that replaces `label`, `description` and `supportText` entirely."
+            },
+            {
+              "name": "leading",
+              "description": "Leading media: a `bs-avatar size=\"lg\"` (64px), a 32px icon, or a 72x56 `<img>`."
+            },
+            {
+              "name": "trailing",
+              "description": "Replaces the default caret. Rendered when `showArrow` is set or the slot has content."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "container",
+              "description": "The row."
+            },
+            {
+              "name": "content",
+              "description": "The text column."
+            },
+            {
+              "name": "description",
+              "description": "The description line."
+            },
+            {
+              "name": "label",
+              "description": "The label line."
+            },
+            {
+              "name": "leading",
+              "description": "Wrapper around the leading slot."
+            },
+            {
+              "name": "support-text",
+              "description": "The support text line."
+            },
+            {
+              "name": "trailing",
+              "description": "Wrapper around the trailing slot / caret."
+            }
+          ]
+        }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BsMenuItem",
+          "name": "BsListItem",
           "declaration": {
-            "name": "BsMenuItem"
+            "name": "BsListItem"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bs-menu-item",
+          "name": "bs-list-item",
           "declaration": {
-            "name": "BsMenuItem"
+            "name": "BsListItem"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/bs-message/bs-message.tsx",
+      "path": "src/components/bs-logo/bs-logo.tsx",
       "declarations": [
         {
           "kind": "class",
           "customElement": true,
-          "tagName": "bs-message",
-          "name": "BsMessage",
-          "description": "A single chat message bubble. User messages align to the end with a primary-tinted bubble;\nassistant messages align to the start on a neutral bubble. The consumer renders the content\n(e.g. markdown) into the default slot.\n\nComposed from: `bs-card` (the bubble surface).\n\n## When to use\n- One entry per turn in a chat transcript, usually inside `bs-message-list`.\n\n## When not to use\n- For transient notices or system banners -- use `bs-toast` / `bs-composer-status-banner`.",
+          "tagName": "bs-logo",
+          "name": "BsLogo",
+          "description": "The BrandSync brand mark, as its own standalone component -- shared by `bs-navigation-header`\nand `bs-navigation-drawer`, which used to each render their own duplicated copy of this SVG\n(the drawer's collapsed state even faked an icon-only look by clipping the full wordmark asset\ndown to a narrowed box, rather than using a real icon-only asset).\n\n## When to use\n- Anywhere the BrandSync logo/icon needs to render: a navigation header, a nav drawer, etc.\n\n## When not to use\n- The Genie AI chat panel's own brand mark -- that's a different logo (`bs-chatbot-header`'s\n  own inline Genie asset), not this one.\n\n`variant` mirrors Figma's \"Logo\" component set (node 10909:30421) `Device` property\n(\"Desktop\" / \"Tab and mobile\"), which was originally meant to distinguish the full lockup from\nthe icon-only mark at different responsive breakpoints -- renamed here to\n`variant: 'full' | 'mark'` since that's what it actually controls (how much of the logo\nrenders), not literally a device/breakpoint switch.\n\n`variant=\"custom\"` is not a Figma variant at all -- it's an escape hatch for a consuming app\nthat needs to show a DIFFERENT product's logo in the same slot (e.g. a white-labeled deployment,\nor a logo fetched at runtime from a service like brand.dev), via `src`/`alt`, instead of the\nbuilt-in BrandSync assets. This component deliberately does NOT fetch that image itself --\nnetwork calls, loading/error states, and caching are the consuming app's responsibility, same as\nevery other component in this library (e.g. `bs-attachment` takes `imageSrc` rather than fetching\nan image on its own). `background` has no effect on `variant=\"custom\"` -- a consumer's own image\nis already designed for whatever surface it's placed on.",
           "attributes": [
             {
-              "name": "datetime",
-              "description": "Machine-readable value for the `<time>` element's `datetime` attribute.",
+              "name": "alt",
+              "description": "`variant=\"custom\"` only: accessible alt text for the image -- a product logo is meaningful\ncontent (whose brand is this?), not decorative, so set this to something real (e.g. the\nproduct/company name). Falls back to `alt=\"\"` (marking the image decorative to assistive\ntech) when unset, rather than omitting the `alt` attribute entirely -- an `<img>` with no\n`alt` attribute at all is a harder accessibility failure than one explicitly marked\ndecorative, but an empty fallback is still worse than a real name, so don't rely on it.\nIgnored for `full`/`mark` (those already carry their own fixed `aria-label=\"BrandSync\"`).",
               "type": {
                 "text": "string"
               },
-              "fieldName": "datetime"
+              "default": "null",
+              "fieldName": "alt"
             },
             {
-              "name": "role",
-              "description": "Who sent the message. Controls alignment and colour.",
+              "name": "background",
+              "description": "Which pre-built asset to use for `variant=\"full\"` -- Figma ships a genuinely separate,\ndifferently-drawn dark-background asset (every wordmark path filled solid white, and the\nicon's outer shape a single solid-white path instead of the light version's two-path\nwhite-fill-plus-border-ring), not a CSS currentColor swap of identical paths.\n\n`\"auto\"` (default) renders both assets and lets CSS pick one via\n`--bs-logo-asset-light-display`/`--bs-logo-asset-dark-display` (defined in\n`src/global/base.css`, flipped by the same `[data-theme=\"dark\"]` attribute every other\n`--bs-*` token already reacts to) -- so the logo just follows the ambient theme with no wiring\nneeded, the same way a consuming app's own dark mode already re-themes every other part of\nthis library via ordinary CSS custom property inheritance. Set `\"light\"`/`\"dark\"` explicitly\nto pin one regardless of the ambient theme -- e.g. a dark sidebar that isn't otherwise\ndark-themed.\n\nHas no effect on `variant=\"mark\"`: Figma's component set only has one real designed instance\nof the icon-only mark (`Device=\"Tab and mobile\"`, `Background=\"Default\"`) -- there's no\nseparate dark version of it, so the mark renders identically regardless of this prop.",
               "type": {
-                "text": "\"assistant\" | \"user\"",
+                "text": "\"auto\" | \"dark\" | \"light\"",
                 "references": [
                   {
-                    "name": "BsMessageRole"
+                    "name": "BsLogoBackground"
                   }
                 ]
               },
-              "default": "'assistant'",
-              "fieldName": "role"
+              "default": "'auto'",
+              "fieldName": "background"
             },
             {
-              "name": "status",
-              "description": "Delivery/render state. `error` uses error colours; `pending` dims the bubble and sets `aria-busy`.",
+              "name": "src",
+              "description": "`variant=\"custom\"` only: the image URL to render (e.g. a URL your app already fetched from a\nlogo API). Ignored for `full`/`mark`.",
               "type": {
-                "text": "\"default\" | \"error\" | \"pending\"",
-                "references": [
-                  {
-                    "name": "BsMessageStatus"
-                  }
-                ]
+                "text": "string"
               },
-              "default": "'default'",
-              "fieldName": "status"
+              "default": "null",
+              "fieldName": "src"
             },
             {
-              "name": "timestamp",
-              "description": "Human-readable timestamp text shown inside a `<time>` element. Omit to render none.",
+              "name": "variant",
+              "description": "How much of the logo to render. `full` is the icon + \"EG BrandSync\" wordmark (190.977x44\nnatural size); `mark` is just the icon (44x44 natural size), no wordmark; `custom` renders a\nconsumer-supplied image via `src`/`alt` instead of a built-in BrandSync asset -- see the class\ndoc above.",
               "type": {
-                "text": "string"
+                "text": "\"custom\" | \"full\" | \"mark\"",
+                "references": [
+                  {
+                    "name": "BsLogoVariant"
+                  }
+                ]
               },
-              "fieldName": "timestamp"
+              "default": "'full'",
+              "fieldName": "variant"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "datetime",
-              "description": "Machine-readable value for the `<time>` element's `datetime` attribute.",
+              "name": "alt",
+              "description": "`variant=\"custom\"` only: accessible alt text for the image -- a product logo is meaningful\ncontent (whose brand is this?), not decorative, so set this to something real (e.g. the\nproduct/company name). Falls back to `alt=\"\"` (marking the image decorative to assistive\ntech) when unset, rather than omitting the `alt` attribute entirely -- an `<img>` with no\n`alt` attribute at all is a harder accessibility failure than one explicitly marked\ndecorative, but an empty fallback is still worse than a real name, so don't rely on it.\nIgnored for `full`/`mark` (those already carry their own fixed `aria-label=\"BrandSync\"`).",
               "type": {
                 "text": "string"
               },
-              "attribute": "datetime"
+              "default": "null",
+              "attribute": "alt"
             },
             {
               "kind": "field",
-              "name": "role",
-              "description": "Who sent the message. Controls alignment and colour.",
+              "name": "background",
+              "description": "Which pre-built asset to use for `variant=\"full\"` -- Figma ships a genuinely separate,\ndifferently-drawn dark-background asset (every wordmark path filled solid white, and the\nicon's outer shape a single solid-white path instead of the light version's two-path\nwhite-fill-plus-border-ring), not a CSS currentColor swap of identical paths.\n\n`\"auto\"` (default) renders both assets and lets CSS pick one via\n`--bs-logo-asset-light-display`/`--bs-logo-asset-dark-display` (defined in\n`src/global/base.css`, flipped by the same `[data-theme=\"dark\"]` attribute every other\n`--bs-*` token already reacts to) -- so the logo just follows the ambient theme with no wiring\nneeded, the same way a consuming app's own dark mode already re-themes every other part of\nthis library via ordinary CSS custom property inheritance. Set `\"light\"`/`\"dark\"` explicitly\nto pin one regardless of the ambient theme -- e.g. a dark sidebar that isn't otherwise\ndark-themed.\n\nHas no effect on `variant=\"mark\"`: Figma's component set only has one real designed instance\nof the icon-only mark (`Device=\"Tab and mobile\"`, `Background=\"Default\"`) -- there's no\nseparate dark version of it, so the mark renders identically regardless of this prop.",
               "type": {
-                "text": "\"assistant\" | \"user\"",
+                "text": "\"auto\" | \"dark\" | \"light\"",
                 "references": [
                   {
-                    "name": "BsMessageRole"
+                    "name": "BsLogoBackground"
                   }
                 ]
               },
-              "default": "'assistant'",
-              "attribute": "role",
-              "reflects": true
+              "default": "'auto'",
+              "attribute": "background"
             },
             {
               "kind": "field",
-              "name": "status",
-              "description": "Delivery/render state. `error` uses error colours; `pending` dims the bubble and sets `aria-busy`.",
+              "name": "src",
+              "description": "`variant=\"custom\"` only: the image URL to render (e.g. a URL your app already fetched from a\nlogo API). Ignored for `full`/`mark`.",
               "type": {
-                "text": "\"default\" | \"error\" | \"pending\"",
-                "references": [
-                  {
-                    "name": "BsMessageStatus"
-                  }
-                ]
+                "text": "string"
               },
-              "default": "'default'",
-              "attribute": "status",
-              "reflects": true
+              "default": "null",
+              "attribute": "src"
             },
             {
               "kind": "field",
-              "name": "timestamp",
-              "description": "Human-readable timestamp text shown inside a `<time>` element. Omit to render none.",
+              "name": "variant",
+              "description": "How much of the logo to render. `full` is the icon + \"EG BrandSync\" wordmark (190.977x44\nnatural size); `mark` is just the icon (44x44 natural size), no wordmark; `custom` renders a\nconsumer-supplied image via `src`/`alt` instead of a built-in BrandSync asset -- see the class\ndoc above.",
               "type": {
-                "text": "string"
+                "text": "\"custom\" | \"full\" | \"mark\"",
+                "references": [
+                  {
+                    "name": "BsLogoVariant"
+                  }
+                ]
               },
-              "attribute": "timestamp"
+              "default": "'full'",
+              "attribute": "variant"
             }
           ],
-          "slots": [
+          "cssParts": [
             {
-              "name": "",
-              "description": "The message content. The consumer renders markdown/rich content here."
-            },
+              "name": "logo",
+              "description": "The rendered SVG/image's wrapper."
+            }
+          ],
+          "cssProperties": [
             {
-              "name": "avatar",
-              "description": "Optional avatar (e.g. `bs-avatar`) beside the bubble."
+              "name": "--bs-logo-asset-dark-display",
+              "description": "The background=\"auto\" counterpart to --bs-logo-asset-light-display above -- see that entry."
             },
             {
-              "name": "footer",
-              "description": "Optional content below the bubble (e.g. `bs-chatbot-response-action`)."
+              "name": "--bs-logo-asset-light-display",
+              "description": "Only read when background=\"auto\" (the default). Defined in src/global/base.css, not here -- that's this library's own bridge from the ambient [data-theme=\"dark\"] attribute to which full-wordmark asset shows, not a per-component override point most consumers need to touch directly."
             },
             {
-              "name": "timestamp",
-              "description": "Overrides the default `<time>` element rendered from `timestamp`."
-            }
-          ],
-          "cssParts": [
-            {
-              "name": "avatar",
-              "description": "The avatar wrapper."
+              "name": "--bs-logo-height-custom",
+              "description": "Height of the rendered image when variant=\"custom\". Width is `auto` (not a fixed custom property) so a consumer's own logo keeps its natural aspect ratio -- only the height is constrained, matching `full`/`mark`'s shared 44px height. Defaults to 44px."
             },
             {
-              "name": "container",
-              "description": "The bubble (`bs-card`)."
+              "name": "--bs-logo-height-full",
+              "description": "Height of the rendered logo when variant=\"full\". 44px."
             },
             {
-              "name": "content",
-              "description": "The message content wrapper."
+              "name": "--bs-logo-height-mark",
+              "description": "Height of the rendered logo when variant=\"mark\". 44px."
             },
             {
-              "name": "footer",
-              "description": "The footer wrapper."
+              "name": "--bs-logo-width-full",
+              "description": "Width of the rendered logo when variant=\"full\". 190.977px -- the light asset's natural width after its icon-to-wordmark gap was tightened from Figma's own exported spacing (see brandsync-logo-full-light.ts) -- a literal size, not a brandsync-tokens alias, since this is a fixed asset's natural dimensions rather than a themeable design token."
             },
             {
-              "name": "timestamp",
-              "description": "The timestamp wrapper."
+              "name": "--bs-logo-width-mark",
+              "description": "Width of the rendered logo when variant=\"mark\". 44px."
             }
           ]
         }
@@ -10176,73 +10275,98 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BsMessage",
+          "name": "BsLogo",
           "declaration": {
-            "name": "BsMessage"
+            "name": "BsLogo"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bs-message",
+          "name": "bs-logo",
           "declaration": {
-            "name": "BsMessage"
+            "name": "BsLogo"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/bs-message-list/bs-message-list.tsx",
+      "path": "src/components/bs-menu/bs-menu.tsx",
       "declarations": [
         {
           "kind": "class",
           "customElement": true,
-          "tagName": "bs-message-list",
-          "name": "BsMessageList",
-          "description": "Scrollable chat transcript container (`role=\"log\"`, `aria-live=\"polite\"`) for `bs-message`\nchildren. It keeps itself pinned to the newest message while the user is near the bottom; when\nthe user has scrolled up and new content arrives, it shows a \"scroll to latest\" button instead\nof yanking the viewport.\n\nComposed from: `bs-icon-button` (the scroll-to-latest control).\n\n## When to use\n- Holding the messages of a chat conversation.\n\n## When not to use\n- For generic scrollable lists -- this is built around append-at-the-bottom transcripts.",
+          "tagName": "bs-menu",
+          "name": "BsMenu",
+          "description": "A generic dropdown/popup menu container: a rounded, elevated list of items (typically\n`bs-menu-item` elements).\n\n## When to use\n- A popup list of actions/options triggered by another control (e.g. a \"more options\" kebab\n  button), such as `bs-chatbot-response-action`'s `menu` slot.\n\n## When not to use\n- A persistent, always-visible list of options -- this component is purpose-built as a popup\n  surface (rounded corners, elevation shadow), not a plain list.",
+          "slots": [
+            {
+              "name": "",
+              "description": "Default slot: the menu's items (typically `bs-menu-item` elements, though anything can\nbe slotted in -- this component doesn't restrict slot content via JS)."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "list",
+              "description": "The rounded, elevated box wrapping the slotted items."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BsMenu",
+          "declaration": {
+            "name": "BsMenu"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bs-menu",
+          "declaration": {
+            "name": "BsMenu"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/bs-menu-item/bs-menu-item.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "bs-menu-item",
+          "name": "BsMenuItem",
+          "description": "A single selectable row inside a `bs-menu`: an optional icon plus a text label, rendered as a\nreal `<button>` for correct keyboard/click semantics.\n\n## When to use\n- As a child of `bs-menu`, one per selectable action/option.\n\n## When not to use\n- Outside of `bs-menu` -- this component's sizing/hover treatment is designed to sit inside the\n  menu's rounded, padded list box.",
           "attributes": [
             {
-              "name": "scroll-to-latest-label",
-              "description": "Accessible name of the scroll-to-latest button.",
+              "name": "disabled",
+              "description": "Disables the item: no hover/pressed/focus styling, no pointer cursor, not reachable by\nkeyboard tabbing, and clicking it does not emit `bsSelect`.",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'Scroll to latest message'",
-              "fieldName": "scrollToLatestLabel"
+              "default": "false",
+              "fieldName": "disabled"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "scrollToLatestLabel",
-              "description": "Accessible name of the scroll-to-latest button.",
+              "name": "disabled",
+              "description": "Disables the item: no hover/pressed/focus styling, no pointer cursor, not reachable by\nkeyboard tabbing, and clicking it does not emit `bsSelect`.",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'Scroll to latest message'",
-              "attribute": "scroll-to-latest-label"
-            },
-            {
-              "kind": "method",
-              "name": "scrollToLatest",
-              "description": "Scrolls to the newest message and re-enables auto-follow.",
-              "return": {
-                "type": {
-                  "text": "Promise<void>",
-                  "references": [
-                    {
-                      "name": "Promise",
-                      "package": "global:"
-                    }
-                  ]
-                }
-              }
+              "default": "false",
+              "attribute": "disabled"
             }
           ],
           "events": [
             {
-              "name": "bsScrollToLatest",
-              "description": "Fires when the scroll-to-latest button is activated or `scrollToLatest()` is called.",
+              "name": "bsSelect",
+              "description": "Fires when the item is clicked.",
               "type": {
                 "text": "CustomEvent<void>"
               }
@@ -10251,17 +10375,25 @@
           "slots": [
             {
               "name": "",
-              "description": "`bs-message` elements."
+              "description": "Default slot: the item's text label."
+            },
+            {
+              "name": "icon",
+              "description": "Optional leading icon (24x24). When left empty, no icon space is reserved."
             }
           ],
           "cssParts": [
             {
-              "name": "scroll-to-latest",
-              "description": "The scroll-to-latest `bs-icon-button`."
+              "name": "icon",
+              "description": "The icon wrapper."
             },
             {
-              "name": "viewport",
-              "description": "The scrollable region."
+              "name": "item",
+              "description": "The button element."
+            },
+            {
+              "name": "label",
+              "description": "The label wrapper."
             }
           ]
         }
@@ -10269,155 +10401,415 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BsMessageList",
+          "name": "BsMenuItem",
           "declaration": {
-            "name": "BsMessageList"
+            "name": "BsMenuItem"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bs-message-list",
+          "name": "bs-menu-item",
           "declaration": {
-            "name": "BsMessageList"
+            "name": "BsMenuItem"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.tsx",
+      "path": "src/components/bs-message/bs-message.tsx",
       "declarations": [
         {
           "kind": "class",
           "customElement": true,
-          "tagName": "bs-navigation-drawer",
-          "name": "BsNavigationDrawer",
-          "description": "A left-side persistent navigation sidebar: the BrandSync logo, a \"Main Menu\" title with a\ncollapse toggle, a reserved slot for a search field, and a scrollable list of nav items.\n\n## When to use\n- The primary in-app navigation, shown alongside `bs-navigation-header` (typically that\n  header's `with-navigation-drawer` alignment, which omits its own logo since this component\n  already renders one -- or the reverse pairing, this drawer's own `showLogo={false}` alongside\n  a header that keeps its logo instead, see that prop's own docs).\n\n## When not to use\n- The top navigation bar itself -- use `bs-navigation-header` instead.\n\nThis component renders a real `<nav>` landmark (no explicit `role` needed -- `<nav>` already\ncarries the implicit `navigation` role), labeled via `aria-label={heading}` so the landmark\nstill has a name even when collapsed (see below).\n\n`collapsed` narrows the drawer to a 96px icon-only rail, per Figma node 8028:135374\n(\"Type=Collapsed\"): the title text disappears, the logo swaps from the full \"EG BrandSync\"\nwordmark (`bs-logo variant=\"full\"`) to the real icon-only mark (`bs-logo variant=\"mark\"` -- a\nsecond, properly-designed asset, not a CSS crop of the full one) via CSS visibility toggling on\nboth, the same `:host([collapsed])` attribute-selector pattern already used for the\n`search`/`search-trigger` swap below, the `search` slot is replaced by a compact built-in\nsearch-trigger button (this component can't meaningfully shrink arbitrary slotted search-field\ncontent down to icon size itself, so it emits `bsSearchClick` instead -- e.g. to open a full\nsearch overlay), and every top-level\n`bs-navigation-drawer-item`'s layout switches from icon-beside-label to icon-above-caption.\nThat last part is real prop propagation, not a CSS trick: this component keeps each direct-child\nitem's own `collapsed` prop in sync with its own (see `syncItemsCollapsed` below), the same\ndirect-children-prop-sync approach `bs-tabs` already uses for coordinating `selected` across its\n`bs-tab` children. Clicking the toggle self-toggles `collapsed` (simple local UI state, not\nsomething needing cross-component coordination -- closer to `bs-switch`'s self-toggling\n`checked` than `bs-tab`'s non-self-toggling `selected`) and emits `bsCollapse` with the new\nvalue. The toggle's own caret icon does NOT rotate when collapsed -- Figma's collapsed mock\nreuses the identical left-pointing \"CaretLeft\" asset unchanged, confirmed by directly inspecting\nthat state, so this deliberately does not add the same \"flip on toggle\" idiom the drawer item's\nown disclosure chevron does (that one really is an unconfirmed addition; this one was checked).\n\n**Small screens (768px and below)** switch to an off-canvas overlay instead of a permanent rail:\nthe drawer is hidden until `open` is set, then slides in over the page with a backdrop, fully\nexpanded (labels visible, nested items reachable). Escape or a click on the backdrop closes it and\nemits `bsClose`; focus moves into it on open and back to whatever opened it on close. The\ncollapse toggle and the compact search trigger are not shown in this mode (nothing sits behind\nthem). The drawer has no trigger of its own -- put a button in your header and set `open` from it.\nOn wider screens `open` is ignored and nothing changes.",
+          "tagName": "bs-message",
+          "name": "BsMessage",
+          "description": "A single chat message bubble. User messages align to the end with a primary-tinted bubble;\nassistant messages align to the start on a neutral bubble. The consumer renders the content\n(e.g. markdown) into the default slot.\n\nComposed from: `bs-card` (the bubble surface).\n\n## When to use\n- One entry per turn in a chat transcript, usually inside `bs-message-list`.\n\n## When not to use\n- For transient notices or system banners -- use `bs-toast` / `bs-composer-status-banner`.",
           "attributes": [
             {
-              "name": "collapse-label",
-              "description": "Accessible name of the collapse toggle while the drawer is expanded.",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Collapse'",
-              "fieldName": "collapseLabel"
-            },
-            {
-              "name": "collapsed",
-              "description": "Narrows the drawer to a 96px icon-only rail (Figma node 8028:135374). Mutable and reflected\n-- clicking the collapse toggle toggles this directly (self-toggling, see the class doc above\nfor why), and this component keeps every direct-child `bs-navigation-drawer-item`'s own\n`collapsed` prop synced to match (see `syncItemsCollapsed`).",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "collapsed"
-            },
-            {
-              "name": "collapsible",
-              "description": "Whether this drawer can be collapsed at all. `false` renders no collapse toggle/chevron --\na \"fixed\" side nav (Carbon's terminology: a `Fixed Side Nav` never collapses, as opposed to a\nrail-capable one) that's always fully expanded. `collapsed` is ignored while this is `false`.",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "fieldName": "collapsible"
-            },
-            {
-              "name": "expand-label",
-              "description": "Accessible name of the collapse toggle while the drawer is collapsed.",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Expand'",
-              "fieldName": "expandLabel"
-            },
-            {
-              "name": "heading",
-              "description": "Heading text shown next to the collapse toggle, and used as the `<nav>` landmark's\n`aria-label` (so the landmark keeps a name even when `collapsed` hides the visible text).",
+              "name": "datetime",
+              "description": "Machine-readable value for the `<time>` element's `datetime` attribute.",
               "type": {
                 "text": "string"
               },
-              "default": "'Main Menu'",
-              "fieldName": "heading"
+              "fieldName": "datetime"
             },
             {
-              "name": "logo-background",
-              "description": "Forwarded straight to both internal `bs-logo` elements' own `background` prop. Defaults to\n`\"auto\"`, which follows the ambient `[data-theme=\"dark\"]` state automatically (see `bs-logo`'s\nown docs) -- so if this drawer ends up on a dark surface via the normal theming mechanism, the\nlogo switches to its dedicated dark-background asset with no wiring needed. Set\n`\"light\"`/`\"dark\"` explicitly only if you've overridden `--bs-navigation-drawer-bg` to\nsomething dark yourself *without* setting `[data-theme=\"dark\"]`, and need to pin the logo\nregardless of theme. Has no visible effect on the `variant=\"mark\"` logo shown while\n`collapsed` (see `bs-logo`'s own docs -- there's only one real designed mark asset, it's\nbackground-agnostic).",
+              "name": "role",
+              "description": "Who sent the message. Controls alignment and colour.",
               "type": {
-                "text": "\"auto\" | \"dark\" | \"light\""
+                "text": "\"assistant\" | \"user\"",
+                "references": [
+                  {
+                    "name": "BsMessageRole"
+                  }
+                ]
               },
-              "default": "'auto'",
-              "fieldName": "logoBackground"
+              "default": "'assistant'",
+              "fieldName": "role"
             },
             {
-              "name": "open",
-              "description": "Small screens only (768px and below): whether the off-canvas overlay is shown. Mutable and\nreflected -- the drawer sets it back to `false` itself when the user dismisses it (Escape or\nthe backdrop), and emits `bsClose`. Ignored on wider screens, where the drawer is always in\nthe page flow. There is no built-in trigger: set this from your own button.",
+              "name": "status",
+              "description": "Delivery/render state. `error` uses error colours; `pending` dims the bubble and sets `aria-busy`.",
               "type": {
-                "text": "boolean"
+                "text": "\"default\" | \"error\" | \"pending\"",
+                "references": [
+                  {
+                    "name": "BsMessageStatus"
+                  }
+                ]
               },
-              "default": "false",
-              "fieldName": "open"
+              "default": "'default'",
+              "fieldName": "status"
             },
             {
-              "name": "search-label",
-              "description": "Accessible name of the search trigger.",
+              "name": "timestamp",
+              "description": "Human-readable timestamp text shown inside a `<time>` element. Omit to render none.",
               "type": {
                 "text": "string"
               },
-              "default": "'Search'",
-              "fieldName": "searchLabel"
-            },
-            {
-              "name": "show-logo",
-              "description": "Whether to render the BrandSync logo at all. Defaults to `true`. This drawer is normally the\none that owns the logo when paired with a `bs-navigation-header` (that header's own\n`with-navigation-drawer` alignment omits its logo for exactly this reason) -- but the reverse\npairing works too: a header that keeps its own logo (`alignment=\"default\"`) paired with this\ndrawer set to `showLogo={false}`, so the brand mark only ever appears once.",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "fieldName": "showLogo"
+              "fieldName": "timestamp"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "collapseLabel",
-              "description": "Accessible name of the collapse toggle while the drawer is expanded.",
+              "name": "datetime",
+              "description": "Machine-readable value for the `<time>` element's `datetime` attribute.",
               "type": {
                 "text": "string"
               },
-              "default": "'Collapse'",
-              "attribute": "collapse-label"
+              "attribute": "datetime"
             },
             {
               "kind": "field",
-              "name": "collapsed",
-              "description": "Narrows the drawer to a 96px icon-only rail (Figma node 8028:135374). Mutable and reflected\n-- clicking the collapse toggle toggles this directly (self-toggling, see the class doc above\nfor why), and this component keeps every direct-child `bs-navigation-drawer-item`'s own\n`collapsed` prop synced to match (see `syncItemsCollapsed`).",
+              "name": "role",
+              "description": "Who sent the message. Controls alignment and colour.",
               "type": {
-                "text": "boolean"
+                "text": "\"assistant\" | \"user\"",
+                "references": [
+                  {
+                    "name": "BsMessageRole"
+                  }
+                ]
               },
-              "default": "false",
-              "attribute": "collapsed",
+              "default": "'assistant'",
+              "attribute": "role",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "collapsible",
-              "description": "Whether this drawer can be collapsed at all. `false` renders no collapse toggle/chevron --\na \"fixed\" side nav (Carbon's terminology: a `Fixed Side Nav` never collapses, as opposed to a\nrail-capable one) that's always fully expanded. `collapsed` is ignored while this is `false`.",
+              "name": "status",
+              "description": "Delivery/render state. `error` uses error colours; `pending` dims the bubble and sets `aria-busy`.",
               "type": {
-                "text": "boolean"
+                "text": "\"default\" | \"error\" | \"pending\"",
+                "references": [
+                  {
+                    "name": "BsMessageStatus"
+                  }
+                ]
               },
-              "default": "true",
-              "attribute": "collapsible"
+              "default": "'default'",
+              "attribute": "status",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "expandLabel",
-              "description": "Accessible name of the collapse toggle while the drawer is collapsed.",
+              "name": "timestamp",
+              "description": "Human-readable timestamp text shown inside a `<time>` element. Omit to render none.",
               "type": {
                 "text": "string"
               },
-              "default": "'Expand'",
-              "attribute": "expand-label"
-            },
+              "attribute": "timestamp"
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The message content. The consumer renders markdown/rich content here."
+            },
+            {
+              "name": "avatar",
+              "description": "Optional avatar (e.g. `bs-avatar`) beside the bubble."
+            },
+            {
+              "name": "footer",
+              "description": "Optional content below the bubble (e.g. `bs-chatbot-response-action`)."
+            },
+            {
+              "name": "timestamp",
+              "description": "Overrides the default `<time>` element rendered from `timestamp`."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "avatar",
+              "description": "The avatar wrapper."
+            },
+            {
+              "name": "container",
+              "description": "The bubble (`bs-card`)."
+            },
+            {
+              "name": "content",
+              "description": "The message content wrapper."
+            },
+            {
+              "name": "footer",
+              "description": "The footer wrapper."
+            },
+            {
+              "name": "timestamp",
+              "description": "The timestamp wrapper."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BsMessage",
+          "declaration": {
+            "name": "BsMessage"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bs-message",
+          "declaration": {
+            "name": "BsMessage"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/bs-message-list/bs-message-list.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "bs-message-list",
+          "name": "BsMessageList",
+          "description": "Scrollable chat transcript container (`role=\"log\"`, `aria-live=\"polite\"`) for `bs-message`\nchildren. It keeps itself pinned to the newest message while the user is near the bottom; when\nthe user has scrolled up and new content arrives, it shows a \"scroll to latest\" button instead\nof yanking the viewport.\n\nComposed from: `bs-icon-button` (the scroll-to-latest control).\n\n## When to use\n- Holding the messages of a chat conversation.\n\n## When not to use\n- For generic scrollable lists -- this is built around append-at-the-bottom transcripts.",
+          "attributes": [
+            {
+              "name": "scroll-to-latest-label",
+              "description": "Accessible name of the scroll-to-latest button.",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Scroll to latest message'",
+              "fieldName": "scrollToLatestLabel"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "scrollToLatestLabel",
+              "description": "Accessible name of the scroll-to-latest button.",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Scroll to latest message'",
+              "attribute": "scroll-to-latest-label"
+            },
+            {
+              "kind": "method",
+              "name": "scrollToLatest",
+              "description": "Scrolls to the newest message and re-enables auto-follow.",
+              "return": {
+                "type": {
+                  "text": "Promise<void>",
+                  "references": [
+                    {
+                      "name": "Promise",
+                      "package": "global:"
+                    }
+                  ]
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "bsScrollToLatest",
+              "description": "Fires when the scroll-to-latest button is activated or `scrollToLatest()` is called.",
+              "type": {
+                "text": "CustomEvent<void>"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "`bs-message` elements."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "scroll-to-latest",
+              "description": "The scroll-to-latest `bs-icon-button`."
+            },
+            {
+              "name": "viewport",
+              "description": "The scrollable region."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BsMessageList",
+          "declaration": {
+            "name": "BsMessageList"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bs-message-list",
+          "declaration": {
+            "name": "BsMessageList"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "bs-navigation-drawer",
+          "name": "BsNavigationDrawer",
+          "description": "A left-side persistent navigation sidebar: the BrandSync logo, a \"Main Menu\" title with a\ncollapse toggle, a reserved slot for a search field, and a scrollable list of nav items.\n\n## When to use\n- The primary in-app navigation, shown alongside `bs-navigation-header` (typically that\n  header's `with-navigation-drawer` alignment, which omits its own logo since this component\n  already renders one -- or the reverse pairing, this drawer's own `showLogo={false}` alongside\n  a header that keeps its logo instead, see that prop's own docs).\n\n## When not to use\n- The top navigation bar itself -- use `bs-navigation-header` instead.\n\nThis component renders a real `<nav>` landmark (no explicit `role` needed -- `<nav>` already\ncarries the implicit `navigation` role), labeled via `aria-label={heading}` so the landmark\nstill has a name even when collapsed (see below).\n\n`collapsed` narrows the drawer to a 96px icon-only rail, per Figma node 8028:135374\n(\"Type=Collapsed\"): the title text disappears, the logo swaps from the full \"EG BrandSync\"\nwordmark (`bs-logo variant=\"full\"`) to the real icon-only mark (`bs-logo variant=\"mark\"` -- a\nsecond, properly-designed asset, not a CSS crop of the full one) via CSS visibility toggling on\nboth, the same `:host([collapsed])` attribute-selector pattern already used for the\n`search`/`search-trigger` swap below, the `search` slot is replaced by a compact built-in\nsearch-trigger button (this component can't meaningfully shrink arbitrary slotted search-field\ncontent down to icon size itself, so it emits `bsSearchClick` instead -- e.g. to open a full\nsearch overlay), and every top-level\n`bs-navigation-drawer-item`'s layout switches from icon-beside-label to icon-above-caption.\nThat last part is real prop propagation, not a CSS trick: this component keeps each direct-child\nitem's own `collapsed` prop in sync with its own (see `syncItemsCollapsed` below), the same\ndirect-children-prop-sync approach `bs-tabs` already uses for coordinating `selected` across its\n`bs-tab` children. Clicking the toggle self-toggles `collapsed` (simple local UI state, not\nsomething needing cross-component coordination -- closer to `bs-switch`'s self-toggling\n`checked` than `bs-tab`'s non-self-toggling `selected`) and emits `bsCollapse` with the new\nvalue. The toggle's own caret icon does NOT rotate when collapsed -- Figma's collapsed mock\nreuses the identical left-pointing \"CaretLeft\" asset unchanged, confirmed by directly inspecting\nthat state, so this deliberately does not add the same \"flip on toggle\" idiom the drawer item's\nown disclosure chevron does (that one really is an unconfirmed addition; this one was checked).\n\n**Small screens (768px and below)** switch to an off-canvas overlay instead of a permanent rail:\nthe drawer is hidden until `open` is set, then slides in over the page with a backdrop, fully\nexpanded (labels visible, nested items reachable). Escape or a click on the backdrop closes it and\nemits `bsClose`; focus moves into it on open and back to whatever opened it on close. The\ncollapse toggle and the compact search trigger are not shown in this mode (nothing sits behind\nthem). The drawer has no trigger of its own -- put a button in your header and set `open` from it.\nOn wider screens `open` is ignored and nothing changes.",
+          "attributes": [
+            {
+              "name": "collapse-label",
+              "description": "Accessible name of the collapse toggle while the drawer is expanded.",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Collapse'",
+              "fieldName": "collapseLabel"
+            },
+            {
+              "name": "collapsed",
+              "description": "Narrows the drawer to a 96px icon-only rail (Figma node 8028:135374). Mutable and reflected\n-- clicking the collapse toggle toggles this directly (self-toggling, see the class doc above\nfor why), and this component keeps every direct-child `bs-navigation-drawer-item`'s own\n`collapsed` prop synced to match (see `syncItemsCollapsed`).",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "collapsed"
+            },
+            {
+              "name": "collapsible",
+              "description": "Whether this drawer can be collapsed at all. `false` renders no collapse toggle/chevron --\na \"fixed\" side nav (Carbon's terminology: a `Fixed Side Nav` never collapses, as opposed to a\nrail-capable one) that's always fully expanded. `collapsed` is ignored while this is `false`.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "collapsible"
+            },
+            {
+              "name": "expand-label",
+              "description": "Accessible name of the collapse toggle while the drawer is collapsed.",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Expand'",
+              "fieldName": "expandLabel"
+            },
+            {
+              "name": "heading",
+              "description": "Heading text shown next to the collapse toggle, and used as the `<nav>` landmark's\n`aria-label` (so the landmark keeps a name even when `collapsed` hides the visible text).",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Main Menu'",
+              "fieldName": "heading"
+            },
+            {
+              "name": "logo-background",
+              "description": "Forwarded straight to both internal `bs-logo` elements' own `background` prop. Defaults to\n`\"auto\"`, which follows the ambient `[data-theme=\"dark\"]` state automatically (see `bs-logo`'s\nown docs) -- so if this drawer ends up on a dark surface via the normal theming mechanism, the\nlogo switches to its dedicated dark-background asset with no wiring needed. Set\n`\"light\"`/`\"dark\"` explicitly only if you've overridden `--bs-navigation-drawer-bg` to\nsomething dark yourself *without* setting `[data-theme=\"dark\"]`, and need to pin the logo\nregardless of theme. Has no visible effect on the `variant=\"mark\"` logo shown while\n`collapsed` (see `bs-logo`'s own docs -- there's only one real designed mark asset, it's\nbackground-agnostic).",
+              "type": {
+                "text": "\"auto\" | \"dark\" | \"light\""
+              },
+              "default": "'auto'",
+              "fieldName": "logoBackground"
+            },
+            {
+              "name": "open",
+              "description": "Small screens only (768px and below): whether the off-canvas overlay is shown. Mutable and\nreflected -- the drawer sets it back to `false` itself when the user dismisses it (Escape or\nthe backdrop), and emits `bsClose`. Ignored on wider screens, where the drawer is always in\nthe page flow. There is no built-in trigger: set this from your own button.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "open"
+            },
+            {
+              "name": "search-label",
+              "description": "Accessible name of the search trigger.",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Search'",
+              "fieldName": "searchLabel"
+            },
+            {
+              "name": "show-logo",
+              "description": "Whether to render the BrandSync logo at all. Defaults to `true`. This drawer is normally the\none that owns the logo when paired with a `bs-navigation-header` (that header's own\n`with-navigation-drawer` alignment omits its logo for exactly this reason) -- but the reverse\npairing works too: a header that keeps its own logo (`alignment=\"default\"`) paired with this\ndrawer set to `showLogo={false}`, so the brand mark only ever appears once.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "showLogo"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "collapseLabel",
+              "description": "Accessible name of the collapse toggle while the drawer is expanded.",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Collapse'",
+              "attribute": "collapse-label"
+            },
+            {
+              "kind": "field",
+              "name": "collapsed",
+              "description": "Narrows the drawer to a 96px icon-only rail (Figma node 8028:135374). Mutable and reflected\n-- clicking the collapse toggle toggles this directly (self-toggling, see the class doc above\nfor why), and this component keeps every direct-child `bs-navigation-drawer-item`'s own\n`collapsed` prop synced to match (see `syncItemsCollapsed`).",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "collapsed",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "collapsible",
+              "description": "Whether this drawer can be collapsed at all. `false` renders no collapse toggle/chevron --\na \"fixed\" side nav (Carbon's terminology: a `Fixed Side Nav` never collapses, as opposed to a\nrail-capable one) that's always fully expanded. `collapsed` is ignored while this is `false`.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "attribute": "collapsible"
+            },
+            {
+              "kind": "field",
+              "name": "expandLabel",
+              "description": "Accessible name of the collapse toggle while the drawer is collapsed.",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Expand'",
+              "attribute": "expand-label"
+            },
             {
               "kind": "field",
               "name": "heading",
@@ -17917,32 +18309,293 @@
               "fieldName": "placement"
             }
           ],
-          "members": [
+          "members": [
+            {
+              "kind": "field",
+              "name": "placement",
+              "description": "Which edge of the bubble the arrow points from, and therefore which side of a trigger the\nbubble should be placed on. `'top'` is the only value implemented -- it is the only variant\nconfirmed from the Figma \"EG Tooltip\" component (arrow at the top of the bubble, pointing\nup). Bottom/left/right variants aren't implemented pending further Figma design confirmation.",
+              "type": {
+                "text": "\"top\""
+              },
+              "default": "'top'",
+              "attribute": "placement"
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Default slot: the tooltip's message content."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "arrow",
+              "description": "The triangular pointer arrow."
+            },
+            {
+              "name": "bubble",
+              "description": "The dark rounded box containing the slotted content."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BsTooltip",
+          "declaration": {
+            "name": "BsTooltip"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bs-tooltip",
+          "declaration": {
+            "name": "BsTooltip"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/bs-tooltip-trigger/bs-tooltip-trigger.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "bs-tooltip-trigger",
+          "name": "BsTooltipTrigger",
+          "description": "Wraps a trigger element and shows a `bs-tooltip` on hover or keyboard focus, after an optional\ndelay. Escape dismisses it. The tooltip is linked to the trigger with `aria-describedby`.\n\nComposed from `bs-tooltip`.\n\n## When to use\n- A short hint for an icon button or truncated label.\n\n## When not to use\n- Interactive content or long text (use `bs-popover`).",
+          "attributes": [
+            {
+              "name": "delay",
+              "description": "Milliseconds to wait before showing the tooltip.",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "fieldName": "delay"
+            },
+            {
+              "name": "placement",
+              "description": "Side of the trigger the tooltip appears on. The bs-tooltip arrow is only drawn for 'bottom'.",
+              "type": {
+                "text": "\"bottom\" | \"end\" | \"start\" | \"top\"",
+                "references": [
+                  {
+                    "name": "BsTooltipTriggerPlacement"
+                  }
+                ]
+              },
+              "default": "'bottom'",
+              "fieldName": "placement"
+            },
+            {
+              "name": "text",
+              "description": "Tooltip message.",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "text"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "delay",
+              "description": "Milliseconds to wait before showing the tooltip.",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "attribute": "delay"
+            },
+            {
+              "kind": "field",
+              "name": "placement",
+              "description": "Side of the trigger the tooltip appears on. The bs-tooltip arrow is only drawn for 'bottom'.",
+              "type": {
+                "text": "\"bottom\" | \"end\" | \"start\" | \"top\"",
+                "references": [
+                  {
+                    "name": "BsTooltipTriggerPlacement"
+                  }
+                ]
+              },
+              "default": "'bottom'",
+              "attribute": "placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "text",
+              "description": "Tooltip message.",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "text"
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Default slot: the trigger element."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "tooltip",
+              "description": "The positioned tooltip wrapper (role=\"tooltip\")."
+            },
+            {
+              "name": "trigger",
+              "description": "The wrapper around the trigger; carries aria-describedby."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BsTooltipTrigger",
+          "declaration": {
+            "name": "BsTooltipTrigger"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bs-tooltip-trigger",
+          "declaration": {
+            "name": "BsTooltipTrigger"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/bs-tree/bs-tree.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "bs-tree",
+          "name": "BsTree",
+          "description": "A hierarchical list of `bs-tree-item` rows with single selection, expand/collapse and the\nWAI-ARIA tree keyboard pattern.\n\nThe tree owns `role=\"tree\"`, the roving `tabindex` (exactly one enabled, visible item is\ntabbable: the selected one, otherwise the first), selection (kept in sync with each item's\n`selected`) and keyboard navigation over the visible (rendered, non-disabled) items. Items own\ntheir expansion state and emit `bsSelect` / `bsToggle`.\n\nBuilt from: `bs-tree-item` rows.",
+          "attributes": [
+            {
+              "name": "aria-label",
+              "description": "Accessible name of the tree. Bound onto the internal `role=\"tree\"` element (an `aria-label`\non the host would not reach it).",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "selectable",
+              "description": "When `false`, rows do not select (clicks and Enter/Space do nothing) but parents still\nexpand and collapse.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "selectable"
+            },
+            {
+              "name": "value",
+              "description": "The `value` (or, when empty, the `label`) of the selected item. Two-way synced with each\nitem's `selected` (single selection). Setting it from code does not emit `bsChange`.",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "value"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "description": "Accessible name of the tree. Bound onto the internal `role=\"tree\"` element (an `aria-label`\non the host would not reach it).",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "selectable",
+              "description": "When `false`, rows do not select (clicks and Enter/Space do nothing) but parents still\nexpand and collapse.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "attribute": "selectable"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "description": "The `value` (or, when empty, the `label`) of the selected item. Two-way synced with each\nitem's `selected` (single selection). Setting it from code does not emit `bsChange`.",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "collapseAll",
+              "description": "Collapses every parent item.",
+              "return": {
+                "type": {
+                  "text": "Promise<void>",
+                  "references": [
+                    {
+                      "name": "Promise",
+                      "package": "global:"
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "expandAll",
+              "description": "Expands every parent item.",
+              "return": {
+                "type": {
+                  "text": "Promise<void>",
+                  "references": [
+                    {
+                      "name": "Promise",
+                      "package": "global:"
+                    }
+                  ]
+                }
+              }
+            }
+          ],
+          "events": [
             {
-              "kind": "field",
-              "name": "placement",
-              "description": "Which edge of the bubble the arrow points from, and therefore which side of a trigger the\nbubble should be placed on. `'top'` is the only value implemented -- it is the only variant\nconfirmed from the Figma \"EG Tooltip\" component (arrow at the top of the bubble, pointing\nup). Bottom/left/right variants aren't implemented pending further Figma design confirmation.",
+              "name": "bsChange",
+              "description": "Emitted when the user changes the selection (click, Enter/Space), with the new value. Not\nemitted when `value` is set from code.",
               "type": {
-                "text": "\"top\""
-              },
-              "default": "'top'",
-              "attribute": "placement"
+                "text": "CustomEvent<string>"
+              }
             }
           ],
           "slots": [
             {
               "name": "",
-              "description": "Default slot: the tooltip's message content."
+              "description": "Default slot: top-level `bs-tree-item` elements (nested ones go inside their parent item)."
             }
           ],
           "cssParts": [
             {
-              "name": "arrow",
-              "description": "The triangular pointer arrow."
-            },
-            {
-              "name": "bubble",
-              "description": "The dark rounded box containing the slotted content."
+              "name": "container",
+              "description": "The `role=\"tree\"` wrapper."
             }
           ]
         }
@@ -17950,116 +18603,313 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BsTooltip",
+          "name": "BsTree",
           "declaration": {
-            "name": "BsTooltip"
+            "name": "BsTree"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bs-tooltip",
+          "name": "bs-tree",
           "declaration": {
-            "name": "BsTooltip"
+            "name": "BsTree"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/bs-tooltip-trigger/bs-tooltip-trigger.tsx",
+      "path": "src/components/bs-tree-item/bs-tree-item.tsx",
       "declarations": [
         {
           "kind": "class",
           "customElement": true,
-          "tagName": "bs-tooltip-trigger",
-          "name": "BsTooltipTrigger",
-          "description": "Wraps a trigger element and shows a `bs-tooltip` on hover or keyboard focus, after an optional\ndelay. Escape dismisses it. The tooltip is linked to the trigger with `aria-describedby`.\n\nComposed from `bs-tooltip`.\n\n## When to use\n- A short hint for an icon button or truncated label.\n\n## When not to use\n- Interactive content or long text (use `bs-popover`).",
+          "tagName": "bs-tree-item",
+          "name": "BsTreeItem",
+          "description": "A single row of a `bs-tree`. An item that contains child `bs-tree-item` elements is a parent\n(it gets an expand/collapse caret and a folder icon); an item without children is a leaf (no\ncaret, file icon).\n\nThe host carries `role=\"treeitem\"` and the `aria-*` state; the owning `bs-tree` manages the\nroving `tabindex`, selection and keyboard navigation. Nesting depth is computed automatically\nfrom the number of ancestor `bs-tree-item` elements and exposed as `aria-level` -- it is not a\nprop. Clicking the row selects it; clicking the caret (or pressing Right/Left in a tree) toggles\nexpansion -- the two are deliberately separate.\n\nBuilt from: inline SVG icons only (no existing `bs-*` component covers a tree row).",
           "attributes": [
             {
-              "name": "delay",
-              "description": "Milliseconds to wait before showing the tooltip.",
+              "name": "disabled",
+              "description": "Disables the row: not focusable, ignores clicks, dimmed. Reflected.",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "0",
-              "fieldName": "delay"
+              "default": "false",
+              "fieldName": "disabled"
             },
             {
-              "name": "placement",
-              "description": "Side of the trigger the tooltip appears on. The bs-tooltip arrow is only drawn for 'bottom'.",
+              "name": "expanded",
+              "description": "Whether the child items are shown. Only meaningful for parents. Mutable: the caret, the\nkeyboard and the owning tree toggle it. Reflected.",
               "type": {
-                "text": "\"bottom\" | \"end\" | \"start\" | \"top\"",
-                "references": [
-                  {
-                    "name": "BsTooltipTriggerPlacement"
-                  }
-                ]
+                "text": "boolean"
               },
-              "default": "'bottom'",
-              "fieldName": "placement"
+              "default": "false",
+              "fieldName": "expanded"
             },
             {
-              "name": "text",
-              "description": "Tooltip message.",
+              "name": "label",
+              "description": "The row's text. Use the `label` slot for rich content.",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "text"
+              "fieldName": "label"
+            },
+            {
+              "name": "selected",
+              "description": "Marks the row as selected. Owned by the tree (single selection, synced with its `value`).\nReflected.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selected"
+            },
+            {
+              "name": "show-icon",
+              "description": "Shows the leading icon (default folder / file, or the `icon` slot).",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "showIcon"
+            },
+            {
+              "name": "value",
+              "description": "Identifier used in events and for the tree's `value`. Falls back to `label` when empty.",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "value"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "delay",
-              "description": "Milliseconds to wait before showing the tooltip.",
+              "name": "disabled",
+              "description": "Disables the row: not focusable, ignores clicks, dimmed. Reflected.",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "0",
-              "attribute": "delay"
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "placement",
-              "description": "Side of the trigger the tooltip appears on. The bs-tooltip arrow is only drawn for 'bottom'.",
+              "name": "expanded",
+              "description": "Whether the child items are shown. Only meaningful for parents. Mutable: the caret, the\nkeyboard and the owning tree toggle it. Reflected.",
               "type": {
-                "text": "\"bottom\" | \"end\" | \"start\" | \"top\"",
-                "references": [
-                  {
-                    "name": "BsTooltipTriggerPlacement"
-                  }
-                ]
+                "text": "boolean"
               },
-              "default": "'bottom'",
-              "attribute": "placement",
+              "default": "false",
+              "attribute": "expanded",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "text",
-              "description": "Tooltip message.",
+              "name": "label",
+              "description": "The row's text. Use the `label` slot for rich content.",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "text"
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "description": "Marks the row as selected. Owned by the tree (single selection, synced with its `value`).\nReflected.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "showIcon",
+              "description": "Shows the leading icon (default folder / file, or the `icon` slot).",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "attribute": "show-icon"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "description": "Identifier used in events and for the tree's `value`. Falls back to `label` when empty.",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "value"
+            },
+            {
+              "kind": "method",
+              "name": "setExpanded",
+              "description": "Sets `expanded` as a user action: updates the prop and emits `bsToggle`. No-op for leaves,\ndisabled items, or when the value would not change.",
+              "parameters": [
+                {
+                  "name": "next",
+                  "type": {
+                    "text": "boolean",
+                    "references": [
+                      {
+                        "name": "Promise",
+                        "package": "global:"
+                      }
+                    ]
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "Promise<void>",
+                  "references": [
+                    {
+                      "name": "Promise",
+                      "package": "global:"
+                    }
+                  ]
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "bsSelect",
+              "description": "Emitted (bubbling, composed) when the user activates the row, with the item's value. The\nowning `bs-tree` listens and updates the selection.",
+              "type": {
+                "text": "CustomEvent<string>"
+              }
+            },
+            {
+              "name": "bsToggle",
+              "description": "Emitted when the user toggles expansion (caret click or keyboard), with the new `expanded`\nvalue. Not emitted when `expanded` is set from code.",
+              "type": {
+                "text": "CustomEvent<boolean>"
+              }
             }
           ],
           "slots": [
             {
               "name": "",
-              "description": "Default slot: the trigger element."
+              "description": "Default slot: child `bs-tree-item` elements (the subtree). Only rendered, inside a\n`role=\"group\"` wrapper, while the item is expanded; collapsed children are not accessible."
+            },
+            {
+              "name": "icon",
+              "description": "Overrides the default folder / file icon. Only used when `showIcon` is `true`."
+            },
+            {
+              "name": "label",
+              "description": "Overrides the `label` text."
             }
           ],
           "cssParts": [
             {
-              "name": "tooltip",
-              "description": "The positioned tooltip wrapper (role=\"tooltip\")."
+              "name": "caret",
+              "description": "The expand/collapse caret (parents only)."
             },
             {
-              "name": "trigger",
-              "description": "The wrapper around the trigger; carries aria-describedby."
+              "name": "container",
+              "description": "The highlighted row pill (carries the hover / selected / focus states)."
+            },
+            {
+              "name": "group",
+              "description": "The `role=\"group\"` wrapper around the child items (while expanded)."
+            },
+            {
+              "name": "icon",
+              "description": "The icon wrapper."
+            },
+            {
+              "name": "label",
+              "description": "The label wrapper."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--bs-tree-item-bg-focus",
+              "description": "Pill background, keyboard-focused. Aliased to --bs-surface-focus."
+            },
+            {
+              "name": "--bs-tree-item-bg-hover",
+              "description": "Pill background, hovered. Aliased to --bs-surface-hover."
+            },
+            {
+              "name": "--bs-tree-item-bg-pressed",
+              "description": "Pill background, pressed. Aliased to --bs-surface-pressed."
+            },
+            {
+              "name": "--bs-tree-item-bg-selected",
+              "description": "Pill background, selected. Aliased to --bs-surface-selected."
+            },
+            {
+              "name": "--bs-tree-item-bg-selected-focus",
+              "description": "Pill background, selected and keyboard-focused. Aliased to --bs-surface-selected-focus."
+            },
+            {
+              "name": "--bs-tree-item-bg-selected-hover",
+              "description": "Pill background, selected and hovered. Aliased to --bs-surface-selected-hover."
+            },
+            {
+              "name": "--bs-tree-item-bg-selected-pressed",
+              "description": "Pill background, selected and pressed. Aliased to --bs-surface-selected-pressed."
+            },
+            {
+              "name": "--bs-tree-item-caret-gap",
+              "description": "Gap between the caret and the icon/label group. Aliased to --bs-spacing-150."
+            },
+            {
+              "name": "--bs-tree-item-content-gap",
+              "description": "Gap between the icon and the label. Aliased to --bs-spacing-100."
+            },
+            {
+              "name": "--bs-tree-item-focus-ring",
+              "description": "Focus ring colour. Aliased to --bs-border-primary-hover."
+            },
+            {
+              "name": "--bs-tree-item-font-size",
+              "description": "Label font size. Aliased to --bs-font-size-md."
+            },
+            {
+              "name": "--bs-tree-item-height",
+              "description": "Row height (48px). Aliased to --bs-spacing-600."
+            },
+            {
+              "name": "--bs-tree-item-icon",
+              "description": "Icon and caret colour. Aliased to --bs-icon-default."
+            },
+            {
+              "name": "--bs-tree-item-icon-disabled",
+              "description": "Icon and caret colour, disabled. Aliased to --bs-icon-disabled."
+            },
+            {
+              "name": "--bs-tree-item-indent",
+              "description": "Extra indent per nesting level. Set directly in px (no 40px spacing token), matching Figma."
+            },
+            {
+              "name": "--bs-tree-item-line-height",
+              "description": "Label line height (unitless px number). Aliased to --bs-line-height-body-md."
+            },
+            {
+              "name": "--bs-tree-item-padding-x",
+              "description": "Pill horizontal padding. Aliased to --bs-spacing-50."
+            },
+            {
+              "name": "--bs-tree-item-radius",
+              "description": "Pill corner radius. Aliased to --bs-border-radius-100."
+            },
+            {
+              "name": "--bs-tree-item-text",
+              "description": "Label colour. Aliased to --bs-text-default."
+            },
+            {
+              "name": "--bs-tree-item-text-disabled",
+              "description": "Label colour, disabled. Aliased to --bs-text-on-disabled."
             }
           ]
         }
@@ -18067,16 +18917,16 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BsTooltipTrigger",
+          "name": "BsTreeItem",
           "declaration": {
-            "name": "BsTooltipTrigger"
+            "name": "BsTreeItem"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bs-tooltip-trigger",
+          "name": "bs-tree-item",
           "declaration": {
-            "name": "BsTooltipTrigger"
+            "name": "BsTreeItem"
           }
         }
       ]