@brandsync/wc 0.0.12 → 0.1.0

package/custom-elements.json

@@ -447,6 +447,300 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/bs-avatar/bs-avatar.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "bs-avatar",
+          "name": "BsAvatar",
+          "description": "A circular representation of a person or entity -- a photo, initials, or (as a fallback when\nneither is available) a generic user-silhouette icon.\n\n## When to use\n- Representing a specific user or account: in a header, a comment, a member list, etc.\n- `type=\"initials\"` when a photo isn't available but a name is (e.g. \"Sam Lee\" -> \"SL\").\n- `type=\"icon\"` (the default) as the generic fallback when neither a photo nor a name/initials\n  is available yet.\n\n## When not to use\n- A company/brand logo -- use `bs-logo` instead.\n\nThis component is decorative/informational by default, not an interactive control -- it renders\na plain `<span>`/`<img>`, not a `<button>`. Figma's own component set includes hover/focused/\npressed states (e.g. for an account-switcher trigger use case), which this implements as real\n`:hover`/`:focus-visible`/`:active` CSS on the host itself -- so wrapping this in your own\n`<button>`, or setting `tabindex` and a click handler on the `<bs-avatar>` element directly, gets\nthe matching visual treatment for free with no extra wiring. Left genuinely non-interactive\n(no implicit role/tabindex of its own) so it doesn't misrepresent a purely decorative avatar\n(e.g. next to a comment) as a control when it isn't one.",
+          "attributes": [
+            {
+              "name": "alt",
+              "description": "`type=\"image\"` only: accessible alt text for the photo, set directly on the real `<img>`\nthis renders -- a person's photo is meaningful content, not decorative, so pass something\nreal (e.g. their name). Falls back to `alt=\"\"` (decorative to assistive tech) when unset,\nrather than omitting the attribute entirely, but don't rely on that fallback. Ignored for\n`icon`/`initials` -- see `ariaLabel` for those instead.",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "fieldName": "alt"
+            },
+            {
+              "name": "aria-label",
+              "description": "`type=\"icon\"`/`\"initials\"` only: accessible name for the avatar, set as `aria-label` on the\n`role=\"img\"` wrapper this renders (neither is a real `<img>`, so there's no native `alt` to\nset). Setting a plain `aria-label` attribute on the `<bs-avatar>` host does NOT work for this\n-- that attribute stays on the light-DOM host and never crosses into the shadow DOM, so the\nactual `role=\"img\"` element stays nameless. Same pattern as `bs-checkbox`'s identical\n`ariaLabel` prop. Ignored for `image` -- see `alt` for that instead.",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "disabled",
+              "description": "Applies the disabled treatment (50% opacity) and suppresses the hover/focus/pressed CSS\nstates -- this doesn't set a native `disabled` attribute (this component renders no native\nform control), it's purely a visual/interaction-state flag for when a consuming app has\nwrapped this in its own disabled control. Reflected so the `:host([disabled])` CSS selector\nthat drives all of the above still matches when a consumer sets the JS property directly\n(`el.disabled = true`) rather than the HTML attribute.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "initials",
+              "description": "`type=\"initials\"` only: the initials text to display (e.g. `\"SL\"` for \"Sam Lee\"). Ignored\nfor `icon`/`image`.",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "fieldName": "initials"
+            },
+            {
+              "name": "size",
+              "description": "Sizing scale -- `xs` (24px) through `xxl` (128px), matching Figma's own six-step scale.",
+              "type": {
+                "text": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\"",
+                "references": [
+                  {
+                    "name": "BsAvatarSize"
+                  }
+                ]
+              },
+              "default": "'md'",
+              "fieldName": "size"
+            },
+            {
+              "name": "src",
+              "description": "`type=\"image\"` only: the photo URL. This component does not fetch it itself -- network\ncalls, loading/error states, and caching are the consuming app's responsibility, same\nconvention as `bs-logo`'s own `src` prop. Ignored for `icon`/`initials`.",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "fieldName": "src"
+            },
+            {
+              "name": "type",
+              "description": "What to render inside the circle. `icon` (default) is the generic fallback for when neither\na photo nor initials are available yet.",
+              "type": {
+                "text": "\"icon\" | \"image\" | \"initials\"",
+                "references": [
+                  {
+                    "name": "BsAvatarType"
+                  }
+                ]
+              },
+              "default": "'icon'",
+              "fieldName": "type"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "alt",
+              "description": "`type=\"image\"` only: accessible alt text for the photo, set directly on the real `<img>`\nthis renders -- a person's photo is meaningful content, not decorative, so pass something\nreal (e.g. their name). Falls back to `alt=\"\"` (decorative to assistive tech) when unset,\nrather than omitting the attribute entirely, but don't rely on that fallback. Ignored for\n`icon`/`initials` -- see `ariaLabel` for those instead.",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "readonly": true,
+              "attribute": "alt"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "description": "`type=\"icon\"`/`\"initials\"` only: accessible name for the avatar, set as `aria-label` on the\n`role=\"img\"` wrapper this renders (neither is a real `<img>`, so there's no native `alt` to\nset). Setting a plain `aria-label` attribute on the `<bs-avatar>` host does NOT work for this\n-- that attribute stays on the light-DOM host and never crosses into the shadow DOM, so the\nactual `role=\"img\"` element stays nameless. Same pattern as `bs-checkbox`'s identical\n`ariaLabel` prop. Ignored for `image` -- see `alt` for that instead.",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "readonly": true,
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "description": "Applies the disabled treatment (50% opacity) and suppresses the hover/focus/pressed CSS\nstates -- this doesn't set a native `disabled` attribute (this component renders no native\nform control), it's purely a visual/interaction-state flag for when a consuming app has\nwrapped this in its own disabled control. Reflected so the `:host([disabled])` CSS selector\nthat drives all of the above still matches when a consumer sets the JS property directly\n(`el.disabled = true`) rather than the HTML attribute.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "readonly": true,
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "initials",
+              "description": "`type=\"initials\"` only: the initials text to display (e.g. `\"SL\"` for \"Sam Lee\"). Ignored\nfor `icon`/`image`.",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "readonly": true,
+              "attribute": "initials"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "description": "Sizing scale -- `xs` (24px) through `xxl` (128px), matching Figma's own six-step scale.",
+              "type": {
+                "text": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\"",
+                "references": [
+                  {
+                    "name": "BsAvatarSize"
+                  }
+                ]
+              },
+              "default": "'md'",
+              "readonly": true,
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "description": "`type=\"image\"` only: the photo URL. This component does not fetch it itself -- network\ncalls, loading/error states, and caching are the consuming app's responsibility, same\nconvention as `bs-logo`'s own `src` prop. Ignored for `icon`/`initials`.",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "readonly": true,
+              "attribute": "src"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "description": "What to render inside the circle. `icon` (default) is the generic fallback for when neither\na photo nor initials are available yet.",
+              "type": {
+                "text": "\"icon\" | \"image\" | \"initials\"",
+                "references": [
+                  {
+                    "name": "BsAvatarType"
+                  }
+                ]
+              },
+              "default": "'icon'",
+              "readonly": true,
+              "attribute": "type"
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "container",
+              "description": "The circular wrapper (all three `type`s render this; `image` additionally\nwraps a real `<img>` inside it, since the border/background/radius treatment is identical\nacross types and factoring it into one shared part keeps `::part(container)` overrides\nconsistent regardless of which `type` ends up rendering)."
+            },
+            {
+              "name": "icon",
+              "description": "The fallback user-silhouette icon. Only rendered for `type=\"icon\"`."
+            },
+            {
+              "name": "image",
+              "description": "The `<img>` itself. Only rendered for `type=\"image\"`."
+            },
+            {
+              "name": "initials",
+              "description": "The initials text. Only rendered for `type=\"initials\"`."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--bs-avatar-bg-dafault",
+              "description": "Background, resting. Aliased to --bs-surface-raised. Named \"dafault\" (not a typo introduced here) -- this is this library's own vendored brandsync-tokens token verbatim; see CLAUDE.md's note on pre-existing malformed vendored token names."
+            },
+            {
+              "name": "--bs-avatar-bg-focused",
+              "description": "Background while focused. Aliased to --bs-surface-raised, same reasoning as hover."
+            },
+            {
+              "name": "--bs-avatar-bg-hover",
+              "description": "Background on hover. Aliased to --bs-surface-raised -- identical to the resting value; only the border recolors on hover (see below)."
+            },
+            {
+              "name": "--bs-avatar-bg-pressed",
+              "description": "Background while pressed. Aliased to --bs-surface-raised, same reasoning as hover."
+            },
+            {
+              "name": "--bs-avatar-border-focus",
+              "description": "Focus ring color -- a separate ring drawn just outside the avatar's own border, not the border's own color (see --bs-avatar-border-focused above). Aliased to --bs-border-neutral-focus."
+            },
+            {
+              "name": "--bs-avatar-border-focused",
+              "description": "Border color while focused -- Figma keeps this identical to the resting --bs-avatar-border-primary; the focus ring (--bs-avatar-border-focus below) is a separate, additional ring, not a border recolor."
+            },
+            {
+              "name": "--bs-avatar-border-hover",
+              "description": "Border color on hover. Aliased to --bs-border-neutral-container-hover."
+            },
+            {
+              "name": "--bs-avatar-border-pressed",
+              "description": "Border color while pressed. Aliased to --bs-border-neutral-container-pressed."
+            },
+            {
+              "name": "--bs-avatar-border-primary",
+              "description": "Border color, resting. Aliased to --bs-border-neutral-container."
+            },
+            {
+              "name": "--bs-avatar-border-width",
+              "description": "Border width at every size except xxl. Aliased to --bs-border-width-thin (1px)."
+            },
+            {
+              "name": "--bs-avatar-border-width-xxl",
+              "description": "Border width at size=\"xxl\" specifically -- Figma specs this one size a hair thicker (1.333px) than the other five, not a rounding artifact."
+            },
+            {
+              "name": "--bs-avatar-icon-primary",
+              "description": "Fallback user-icon color (type=\"icon\"). Aliased to --bs-icon-muted."
+            },
+            {
+              "name": "--bs-avatar-radius",
+              "description": "Corner radius -- always a full circle regardless of size. Aliased to --bs-border-radius-full."
+            },
+            {
+              "name": "--bs-avatar-size-lg",
+              "description": "Width/height at size=\"lg\". 64px."
+            },
+            {
+              "name": "--bs-avatar-size-md",
+              "description": "Width/height at size=\"md\". 44px."
+            },
+            {
+              "name": "--bs-avatar-size-sm",
+              "description": "Width/height at size=\"sm\". 32px."
+            },
+            {
+              "name": "--bs-avatar-size-xl",
+              "description": "Width/height at size=\"xl\". 96px."
+            },
+            {
+              "name": "--bs-avatar-size-xs",
+              "description": "Width/height at size=\"xs\". 24px, matching Figma's own six-step scale."
+            },
+            {
+              "name": "--bs-avatar-size-xxl",
+              "description": "Width/height at size=\"xxl\". 128px."
+            },
+            {
+              "name": "--bs-avatar-text-default",
+              "description": "Initials text color (type=\"initials\"). Aliased to --bs-text-default. All of the --bs-avatar-* custom properties above are this library's existing vendored brandsync-tokens tokens (see tokens.css), not new ones invented for this component -- brandsync-tokens already ships a full avatar-specific token set, referenced here directly rather than re-aliased through component-local names the way most other components in this library do, since there's nothing left to add a layer of indirection over."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BsAvatar",
+          "declaration": {
+            "name": "BsAvatar"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bs-avatar",
+          "declaration": {
+            "name": "BsAvatar"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/bs-badge/bs-badge.tsx",
@@ -454,53 +748,405 @@
         {
           "kind": "class",
           "customElement": true,
-          "tagName": "bs-badge",
-          "name": "BsBadge",
-          "description": "A small status or category pill, usually paired with a label or list item.\n\n## When to use\n- Communicating a short, fixed status (e.g. \"Active\", \"On leave\") or category label.\n\n## When not to use\n- As an interactive/clickable element — a badge is a label, not a control. Use a button\n  or chip component if it needs to be clickable.\n- For long text — badges are sized for one or two words.",
+          "tagName": "bs-badge",
+          "name": "BsBadge",
+          "description": "A small status or category pill, usually paired with a label or list item.\n\n## When to use\n- Communicating a short, fixed status (e.g. \"Active\", \"On leave\") or category label.\n\n## When not to use\n- As an interactive/clickable element — a badge is a label, not a control. Use a button\n  or chip component if it needs to be clickable.\n- For long text — badges are sized for one or two words.",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "Maps directly to the brandsync-tokens `--bs-badge-bg-*` / `--bs-badge-text-*` sets.",
+              "type": {
+                "text": "\"default\" | \"error\" | \"info\" | \"inverse\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
+                "references": [
+                  {
+                    "name": "BsBadgeVariant"
+                  }
+                ]
+              },
+              "default": "'default'",
+              "fieldName": "variant"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "description": "Maps directly to the brandsync-tokens `--bs-badge-bg-*` / `--bs-badge-text-*` sets.",
+              "type": {
+                "text": "\"default\" | \"error\" | \"info\" | \"inverse\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
+                "references": [
+                  {
+                    "name": "BsBadgeVariant"
+                  }
+                ]
+              },
+              "default": "'default'",
+              "readonly": true,
+              "attribute": "variant"
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Default slot: the badge's label text."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "container",
+              "description": "The pill element."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BsBadge",
+          "declaration": {
+            "name": "BsBadge"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bs-badge",
+          "declaration": {
+            "name": "BsBadge"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "bs-breadcrumb",
+          "name": "BsBreadcrumb",
+          "description": "A single crumb within a `<bs-breadcrumbs>` trail: a leading separator icon plus either a link,\nplain text, or the current-page label, depending on `current`/`href`.\n\nRendering follows the W3C ARIA Authoring Practices breadcrumb pattern\n(https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/): the current page is marked\n`aria-current=\"page\"` and is never a link -- this holds even when `href` is also set, unlike\nCarbon Design System's `cds-breadcrumb-item`, which allows a link on the current item.\n\nSets `role=\"listitem\"` on the host, mirroring Carbon's own `CDSBreadcrumbItem.connectedCallback()`\n-- since this is a custom-element child of a real `<ol>` rather than a real `<li>`, the\naccessibility tree needs this explicit role to preserve the list's semantics.\n\n## When to use\n- As one crumb inside a `<bs-breadcrumbs>` trail.\n\n## When not to use\n- Standalone, outside a `<bs-breadcrumbs>` wrapper -- its `<ol>`/`<nav>` context and\n  first-child-aware separator hiding depend on that parent structure.",
+          "attributes": [
+            {
+              "name": "current",
+              "description": "Whether this crumb is the current page. Renders as plain (non-link) text marked\n`aria-current=\"page\"`, reflected as an attribute so consumers/CSS can target\n`bs-breadcrumb[current]`.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "current"
+            },
+            {
+              "name": "href",
+              "description": "Destination for a non-current crumb. Ignored when `current` is true -- the current page is\nnever a link, even if `href` is set (see the class JSDoc).",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "href"
+            },
+            {
+              "name": "size",
+              "description": "Size variant. Normally set automatically by a parent `<bs-breadcrumbs size=\"...\">` -- the\ncontainer propagates its own `size` as a JS property to every slotted `bs-breadcrumb`/\n`bs-breadcrumb-overflow` child (see `bs-breadcrumbs.tsx`'s `propagateSize`), since CSS custom\nproperties can't carry an enum that switches rules on their own. Can also be set directly on a\nstandalone crumb. `sm` scales down font-size/line-height only -- the separator icon's pixel\nsize is unchanged, since Figma didn't specify a `sm` icon size and guessing one risked drifting\noff-brand. Reflected so consumers/CSS can target `bs-breadcrumb[size=\"sm\"]`.",
+              "type": {
+                "text": "\"md\" | \"sm\"",
+                "references": [
+                  {
+                    "name": "BsBreadcrumbSize"
+                  }
+                ]
+              },
+              "default": "'md'",
+              "fieldName": "size"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "current",
+              "description": "Whether this crumb is the current page. Renders as plain (non-link) text marked\n`aria-current=\"page\"`, reflected as an attribute so consumers/CSS can target\n`bs-breadcrumb[current]`.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "readonly": true,
+              "attribute": "current",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "description": "Destination for a non-current crumb. Ignored when `current` is true -- the current page is\nnever a link, even if `href` is set (see the class JSDoc).",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true,
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "description": "Size variant. Normally set automatically by a parent `<bs-breadcrumbs size=\"...\">` -- the\ncontainer propagates its own `size` as a JS property to every slotted `bs-breadcrumb`/\n`bs-breadcrumb-overflow` child (see `bs-breadcrumbs.tsx`'s `propagateSize`), since CSS custom\nproperties can't carry an enum that switches rules on their own. Can also be set directly on a\nstandalone crumb. `sm` scales down font-size/line-height only -- the separator icon's pixel\nsize is unchanged, since Figma didn't specify a `sm` icon size and guessing one risked drifting\noff-brand. Reflected so consumers/CSS can target `bs-breadcrumb[size=\"sm\"]`.",
+              "type": {
+                "text": "\"md\" | \"sm\"",
+                "references": [
+                  {
+                    "name": "BsBreadcrumbSize"
+                  }
+                ]
+              },
+              "default": "'md'",
+              "readonly": true,
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Default slot: the crumb's label content/text."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "current",
+              "description": "The current-page text element."
+            },
+            {
+              "name": "link",
+              "description": "The anchor (or, when there's no `href`, plain `<span>`) for a non-current crumb."
+            },
+            {
+              "name": "separator",
+              "description": "The leading separator icon wrapper."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--bs-breadcrumb-color-current",
+              "description": "Text color, the current-page crumb. Aliased to --bs-text-default."
+            },
+            {
+              "name": "--bs-breadcrumb-color-default",
+              "description": "Text color, non-current crumb. Aliased to --bs-text-muted."
+            },
+            {
+              "name": "--bs-breadcrumb-color-hover",
+              "description": "Text color, non-current link crumb on hover/focus. Aliased to --bs-text-default."
+            },
+            {
+              "name": "--bs-breadcrumb-focus-ring-color",
+              "description": "Focus ring color for a link crumb. Aliased to --bs-border-neutral-focus."
+            },
+            {
+              "name": "--bs-breadcrumb-font-size",
+              "description": "Aliased to --bs-font-size-md."
+            },
+            {
+              "name": "--bs-breadcrumb-font-size-sm",
+              "description": "Font size at size=\"sm\". Aliased to --bs-font-size-sm."
+            },
+            {
+              "name": "--bs-breadcrumb-font-weight-current",
+              "description": "Font weight, the current-page crumb. Aliased to --bs-font-weight-semibold."
+            },
+            {
+              "name": "--bs-breadcrumb-font-weight-default",
+              "description": "Font weight, non-current crumb. Aliased to --bs-font-weight-regular."
+            },
+            {
+              "name": "--bs-breadcrumb-gap",
+              "description": "Gap between the separator icon and this crumb's own content. Aliased to --bs-spacing-50."
+            },
+            {
+              "name": "--bs-breadcrumb-line-height",
+              "description": "Aliased to --bs-line-height-body-md."
+            },
+            {
+              "name": "--bs-breadcrumb-line-height-sm",
+              "description": "Line height at size=\"sm\". Aliased to --bs-line-height-body-sm."
+            },
+            {
+              "name": "--bs-breadcrumb-radius",
+              "description": "Border radius for a link crumb's focus ring. Aliased to --bs-border-radius-50."
+            },
+            {
+              "name": "--bs-breadcrumb-separator-color",
+              "description": "Separator icon color. Aliased to --bs-icon-default."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BsBreadcrumb",
+          "declaration": {
+            "name": "BsBreadcrumb"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bs-breadcrumb",
+          "declaration": {
+            "name": "BsBreadcrumb"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "bs-breadcrumb-overflow",
+          "name": "BsBreadcrumbOverflow",
+          "description": "A manually-placed collapsed-items disclosure for a `<bs-breadcrumbs>` trail: a leading separator\nplus an icon-only ellipsis button that reveals a `bs-menu` popup listing every hidden crumb.\n\n`items` is JS-property-only -- must be set as a JS property (`el.items = [...]`), not an HTML\nattribute, since attributes can only carry strings. See CONVENTIONS.md.\n\nUnlike an earlier `bs-breadcrumbs`-owned automatic `maxItems` collapse, this component does no\ncollapsing logic itself -- the consumer decides which crumbs to hide and places this element\nwherever they want the disclosure, exactly matching Carbon Design System's own approach (Carbon\ndoesn't auto-collapse breadcrumbs either; a consumer there manually decides what's visible).\n\nHidden items with an `href` render as real `<a href>` rows inside the popup, not `bs-menu-item`\n(which renders a `<button>`) -- this matters because consuming apps commonly use client-side\nrouters that intercept clicks on real `<a>` tags to do `preventDefault` + push-state navigation.\nRendering hidden links any other way (e.g. `window.location`) would silently break client-side\nrouting for hidden crumbs while working fine for visible ones. Hidden items without an `href`\nrender as plain non-interactive text, matching how `bs-breadcrumb` itself handles link vs.\nno-link crumbs.\n\nSets `role=\"listitem\"` on the host, mirroring Carbon's own `CDSBreadcrumbItem.connectedCallback()`\n-- since this is a custom-element child of a real `<ol>` rather than a real `<li>`, the\naccessibility tree needs this explicit role to preserve the list's semantics.\n\n## When to use\n- Inside a `<bs-breadcrumbs>` trail, wherever the consumer wants an interactive disclosure for\n  crumbs they've chosen not to render directly.\n\n## When not to use\n- As an automatic collapsing mechanism -- there is none; the consumer decides what's hidden.",
           "attributes": [
             {
-              "name": "variant",
-              "description": "Maps directly to the brandsync-tokens `--bs-badge-bg-*` / `--bs-badge-text-*` sets.",
+              "name": "overflow-label",
+              "description": "Accessible name (`aria-label`) for the icon-only ellipsis trigger button.",
               "type": {
-                "text": "\"default\" | \"error\" | \"info\" | \"inverse\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
+                "text": "string"
+              },
+              "default": "'Show hidden breadcrumbs'",
+              "fieldName": "overflowLabel"
+            },
+            {
+              "name": "size",
+              "description": "Size variant. Normally set automatically by a parent `<bs-breadcrumbs size=\"...\">` -- see\n`bs-breadcrumb`'s identical `size` prop doc comment for why this is propagated as a JS\nproperty rather than inherited via CSS. Scales the popup rows' font-size/line-height only; the\nseparator/ellipsis icons' pixel sizes are unchanged. Reflected so consumers/CSS can target\n`bs-breadcrumb-overflow[size=\"sm\"]`.",
+              "type": {
+                "text": "\"md\" | \"sm\"",
                 "references": [
                   {
-                    "name": "BsBadgeVariant"
+                    "name": "BsBreadcrumbSize",
+                    "module": "../bs-breadcrumb/bs-breadcrumb"
                   }
                 ]
               },
-              "default": "'default'",
-              "fieldName": "variant"
+              "default": "'md'",
+              "fieldName": "size"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
-              "description": "Maps directly to the brandsync-tokens `--bs-badge-bg-*` / `--bs-badge-text-*` sets.",
+              "name": "items",
+              "description": "Array prop -- must be set as a JS property (`el.items = [...]`), not an HTML attribute, since\nattributes can only carry strings. See CONVENTIONS.md. The hidden crumbs reachable via this\ndisclosure -- no collapsing logic here, the consumer decides what goes in this list.",
               "type": {
-                "text": "\"default\" | \"error\" | \"info\" | \"inverse\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
+                "text": "BsBreadcrumbOverflowItem[]",
                 "references": [
                   {
-                    "name": "BsBadgeVariant"
+                    "name": "BsBreadcrumbOverflowItem"
                   }
                 ]
               },
-              "default": "'default'",
+              "default": "[]",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "overflowLabel",
+              "description": "Accessible name (`aria-label`) for the icon-only ellipsis trigger button.",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Show hidden breadcrumbs'",
               "readonly": true,
-              "attribute": "variant"
+              "attribute": "overflow-label"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "description": "Size variant. Normally set automatically by a parent `<bs-breadcrumbs size=\"...\">` -- see\n`bs-breadcrumb`'s identical `size` prop doc comment for why this is propagated as a JS\nproperty rather than inherited via CSS. Scales the popup rows' font-size/line-height only; the\nseparator/ellipsis icons' pixel sizes are unchanged. Reflected so consumers/CSS can target\n`bs-breadcrumb-overflow[size=\"sm\"]`.",
+              "type": {
+                "text": "\"md\" | \"sm\"",
+                "references": [
+                  {
+                    "name": "BsBreadcrumbSize",
+                    "module": "../bs-breadcrumb/bs-breadcrumb"
+                  }
+                ]
+              },
+              "default": "'md'",
+              "readonly": true,
+              "attribute": "size",
+              "reflects": true
             }
           ],
           "slots": [
             {
               "name": "",
-              "description": "Default slot: the badge's label text."
+              "description": "None: `items` fully drives the popup's contents."
             }
           ],
           "cssParts": [
             {
-              "name": "container",
-              "description": "The pill element."
+              "name": "ellipsis",
+              "description": "The icon-only disclosure button."
+            },
+            {
+              "name": "link",
+              "description": "Each anchor/span row inside the popup."
+            },
+            {
+              "name": "menu",
+              "description": "The `bs-menu` popup revealed by the ellipsis button."
+            },
+            {
+              "name": "separator",
+              "description": "The leading separator icon wrapper."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--bs-breadcrumb-overflow-color",
+              "description": "Text color of a row in the popup. Aliased to --bs-text-muted."
+            },
+            {
+              "name": "--bs-breadcrumb-overflow-ellipsis-color",
+              "description": "Ellipsis icon color. Aliased to --bs-icon-muted."
+            },
+            {
+              "name": "--bs-breadcrumb-overflow-font-size",
+              "description": "Aliased to --bs-font-size-md."
+            },
+            {
+              "name": "--bs-breadcrumb-overflow-font-size-sm",
+              "description": "Popup row font size at size=\"sm\". Aliased to --bs-font-size-sm."
+            },
+            {
+              "name": "--bs-breadcrumb-overflow-gap",
+              "description": "Gap between the separator icon and the ellipsis, and the popup's offset below the button. Aliased to --bs-spacing-50."
+            },
+            {
+              "name": "--bs-breadcrumb-overflow-hover",
+              "description": "Background color of a row in the popup on hover/focus. Aliased to --bs-color-neutral-container-hover."
+            },
+            {
+              "name": "--bs-breadcrumb-overflow-line-height",
+              "description": "Aliased to --bs-line-height-body-md."
+            },
+            {
+              "name": "--bs-breadcrumb-overflow-line-height-sm",
+              "description": "Popup row line height at size=\"sm\". Aliased to --bs-line-height-body-sm."
+            },
+            {
+              "name": "--bs-breadcrumb-overflow-padding-x",
+              "description": "Left/right padding of each row in the popup. Aliased to --bs-spacing-150."
+            },
+            {
+              "name": "--bs-breadcrumb-overflow-padding-y",
+              "description": "Top/bottom padding of each row in the popup. Aliased to --bs-spacing-100."
+            },
+            {
+              "name": "--bs-breadcrumb-overflow-radius",
+              "description": "Border radius of each row in the popup. Aliased to --bs-border-radius-100."
+            },
+            {
+              "name": "--bs-breadcrumb-overflow-separator-color",
+              "description": "Separator icon color. Aliased to --bs-icon-default."
             }
           ]
         }
@@ -508,16 +1154,119 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BsBadge",
+          "name": "BsBreadcrumbOverflow",
           "declaration": {
-            "name": "BsBadge"
+            "name": "BsBreadcrumbOverflow"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bs-badge",
+          "name": "bs-breadcrumb-overflow",
           "declaration": {
-            "name": "BsBadge"
+            "name": "BsBreadcrumbOverflow"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/bs-breadcrumb/bs-breadcrumbs/bs-breadcrumbs.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "bs-breadcrumbs",
+          "name": "BsBreadcrumbs",
+          "description": "A breadcrumb trail container: a real `<nav>` landmark wrapping an `<ol>`, meant to be populated\nwith slotted `<bs-breadcrumb>` (and, where the consumer wants a collapsed-items disclosure,\n`<bs-breadcrumb-overflow>`) children -- same composition-over-configuration architecture as\nCarbon Design System's `cds-breadcrumb`/`cds-breadcrumb-item`/`cds-breadcrumb-link`.\n\nThis component is intentionally thin: it owns only the `<nav>` landmark and list semantics.\nUnlike an earlier `items`-array-driven design, there is no automatic collapsing here -- exactly\nlike Carbon, the consumer decides what's visible and manually places a `<bs-breadcrumb-overflow>`\nwherever they want a collapsed-items disclosure. See `bs-breadcrumbs.mdx` for the consolidated\ndocs covering all three components in this feature area.\n\n## When to use\n- Showing a user's current location within a hierarchical page structure, with a path back to\n  its ancestors.\n\n## When not to use\n- Primary in-app navigation -- use `bs-navigation-drawer`/`bs-navigation-header` instead.\n- A flat set of unrelated pages with no hierarchy -- breadcrumbs imply ancestry, not just history.",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "Accessible name for the `<nav>` landmark, via `aria-label`. Same pattern as\n`bs-navigation-drawer`'s `heading` prop.",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Breadcrumb'",
+              "fieldName": "label"
+            },
+            {
+              "name": "size",
+              "description": "Size variant, propagated as a JS property to every slotted `bs-breadcrumb`/\n`bs-breadcrumb-overflow` child -- this container has no visual sizing of its own (font/spacing\nlive on the item components, see `bs-breadcrumb.tsx`'s identical `size` prop), so propagation\nis the only way setting `size` here reaches every crumb. CSS custom properties can't carry an\nenum that switches rules on their own, which is why this is pushed via JS property instead of\nCSS inheritance -- same reasoning as `bs-tabs` setting `selected` directly on its slotted\n`bs-tab`/`bs-inline-tab` children. Re-propagated on `size` changes and whenever the slotted\nchildren change (e.g. a crumb added later).",
+              "type": {
+                "text": "\"md\" | \"sm\"",
+                "references": [
+                  {
+                    "name": "BsBreadcrumbSize",
+                    "module": "../bs-breadcrumb/bs-breadcrumb"
+                  }
+                ]
+              },
+              "default": "'md'",
+              "fieldName": "size"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "description": "Accessible name for the `<nav>` landmark, via `aria-label`. Same pattern as\n`bs-navigation-drawer`'s `heading` prop.",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Breadcrumb'",
+              "readonly": true,
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "description": "Size variant, propagated as a JS property to every slotted `bs-breadcrumb`/\n`bs-breadcrumb-overflow` child -- this container has no visual sizing of its own (font/spacing\nlive on the item components, see `bs-breadcrumb.tsx`'s identical `size` prop), so propagation\nis the only way setting `size` here reaches every crumb. CSS custom properties can't carry an\nenum that switches rules on their own, which is why this is pushed via JS property instead of\nCSS inheritance -- same reasoning as `bs-tabs` setting `selected` directly on its slotted\n`bs-tab`/`bs-inline-tab` children. Re-propagated on `size` changes and whenever the slotted\nchildren change (e.g. a crumb added later).",
+              "type": {
+                "text": "\"md\" | \"sm\"",
+                "references": [
+                  {
+                    "name": "BsBreadcrumbSize",
+                    "module": "../bs-breadcrumb/bs-breadcrumb"
+                  }
+                ]
+              },
+              "default": "'md'",
+              "readonly": true,
+              "attribute": "size"
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Default slot: the trail's crumbs, `<bs-breadcrumb>` and/or `<bs-breadcrumb-overflow>`\nelements, in visual order."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "list",
+              "description": "The `<ol>` element."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--bs-breadcrumbs-gap",
+              "description": "Gap between slotted crumbs (bs-breadcrumb/bs-breadcrumb-overflow). Aliased to --bs-spacing-50."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BsBreadcrumbs",
+          "declaration": {
+            "name": "BsBreadcrumbs"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bs-breadcrumbs",
+          "declaration": {
+            "name": "BsBreadcrumbs"
           }
         }
       ]
@@ -830,6 +1579,10 @@
             {
               "name": "header",
               "description": "Optional heading content above the body."
+            },
+            {
+              "name": "image",
+              "description": "Optional hero image across the top of the card, flush with its edges and clipped\nto its top corners. Presence of assigned content is what shows it -- doesn't affect layout when\nempty."
             }
           ],
           "cssParts": [
@@ -839,7 +1592,7 @@
             },
             {
               "name": "container",
-              "description": "The outer bordered surface element."
+              "description": "The outer surface element."
             },
             {
               "name": "footer",
@@ -848,6 +1601,10 @@
             {
               "name": "header",
               "description": "The header wrapper."
+            },
+            {
+              "name": "image",
+              "description": "The hero image wrapper (only visible when the `image` slot has content)."
             }
           ]
         }
@@ -1851,8 +2608,87 @@
               "description": "Box width/height at size=\"md\". Aliased to --bs-spacing-250."
             },
             {
-              "name": "--bs-checkbox-size-sm",
-              "description": "Box width/height at size=\"sm\". Aliased to --bs-spacing-200."
+              "name": "--bs-checkbox-size-sm",
+              "description": "Box width/height at size=\"sm\". Aliased to --bs-spacing-200."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BsCheckbox",
+          "declaration": {
+            "name": "BsCheckbox"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bs-checkbox",
+          "declaration": {
+            "name": "BsCheckbox"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/bs-checkbox/bs-checkbox-skeleton/bs-checkbox-skeleton.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "bs-checkbox-skeleton",
+          "name": "BsCheckboxSkeleton",
+          "description": "A shape-matched loading placeholder for `bs-checkbox`, shown while the real label text isn't\nknown yet (e.g. still being fetched from an API). Renders a small square (matching the\ncheckbox's own box) beside a text-bar placeholder (standing in for the label), both pulsing\ntogether, sized to match `bs-checkbox`'s `sm`/`md`/`lg` box dimensions so layout doesn't shift\nonce the real checkbox renders.\n\n## When to use\n- In place of a `bs-checkbox` whose label/checked state depends on data that hasn't loaded yet.\n\n## When not to use\n- While a checkbox's own change handler is running (e.g. a save request in flight) -- render the\n  real `bs-checkbox` itself; this component is not a saving-in-progress spinner.",
+          "attributes": [
+            {
+              "name": "size",
+              "description": "Sizing scale, matching the `bs-checkbox` size it stands in for. Defaults to `lg`, the same\n(unusual) default `bs-checkbox` itself uses.",
+              "type": {
+                "text": "\"lg\" | \"md\" | \"sm\"",
+                "references": [
+                  {
+                    "name": "BsCheckboxSize",
+                    "module": "../bs-checkbox"
+                  }
+                ]
+              },
+              "default": "'lg'",
+              "fieldName": "size"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "description": "Sizing scale, matching the `bs-checkbox` size it stands in for. Defaults to `lg`, the same\n(unusual) default `bs-checkbox` itself uses.",
+              "type": {
+                "text": "\"lg\" | \"md\" | \"sm\"",
+                "references": [
+                  {
+                    "name": "BsCheckboxSize",
+                    "module": "../bs-checkbox"
+                  }
+                ]
+              },
+              "default": "'lg'",
+              "readonly": true,
+              "attribute": "size"
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "box",
+              "description": "The pulsing placeholder standing in for the checkbox's own box."
+            },
+            {
+              "name": "container",
+              "description": "The outer wrapper holding both placeholder pieces."
+            },
+            {
+              "name": "label",
+              "description": "The pulsing placeholder bar standing in for the label text."
             }
           ]
         }
@@ -1860,16 +2696,16 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BsCheckbox",
+          "name": "BsCheckboxSkeleton",
           "declaration": {
-            "name": "BsCheckbox"
+            "name": "BsCheckboxSkeleton"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bs-checkbox",
+          "name": "bs-checkbox-skeleton",
           "declaration": {
-            "name": "BsCheckbox"
+            "name": "BsCheckboxSkeleton"
           }
         }
       ]
@@ -2476,6 +3312,184 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/bs-dialog/bs-dialog.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "bs-dialog",
+          "name": "BsDialog",
+          "description": "An overlay dialog that interrupts the current flow for a focused task or confirmation.\nCloses itself on backdrop click, Escape, or its own close button, and emits `bsClose`.\n\n## When to use\n- Confirming a consequential action (e.g. \"Confirm booking\") before it takes effect.\n- A short, focused task that doesn't warrant navigating to a new page.\n\n## When not to use\n- For non-blocking status messages — use a toast/notification instead of interrupting the user.\n- For a long, multi-step flow — a full page or a dedicated route is usually a better fit than a\n  dialog that just gets taller and taller.\n\nTwo additional slots cover the Figma \"Dialog\" component's other states: `image` (a hero image\nacross the top, close button floats over it instead of sitting in the header row) and `icon`\n(only rendered when `centered` is set, e.g. a success checkmark above a centered heading). The\nclose button \"floats\" (absolute-positioned, top-right of the dialog, with its own background)\nwhenever `centered` is true or the `image` slot has content -- otherwise it's the plain inline\nbutton in the header row next to the heading, same as before this addition.",
+          "attributes": [
+            {
+              "name": "centered",
+              "description": "Switches to the Figma \"Icon Centered\" layout: heading/body text centered, the `icon` slot\nrendered above the heading, and the close button floating top-right of the dialog instead of\ninline in the header row. Doesn't hide a slotted `image` if one is also provided -- Figma's\nspec doesn't show the two combined, so this is unspecified rather than actively blocked.\nReflected so consumers/CSS can target `bs-dialog[centered]`.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "centered"
+            },
+            {
+              "name": "heading",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "heading"
+            },
+            {
+              "name": "open",
+              "description": "Mutable + reflected so the component can close itself (backdrop click, Escape, close button)\nthe same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "open"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"lg\" | \"md\" | \"sm\"",
+                "references": [
+                  {
+                    "name": "BsDialogSize"
+                  }
+                ]
+              },
+              "default": "'md'",
+              "fieldName": "size"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "centered",
+              "description": "Switches to the Figma \"Icon Centered\" layout: heading/body text centered, the `icon` slot\nrendered above the heading, and the close button floating top-right of the dialog instead of\ninline in the header row. Doesn't hide a slotted `image` if one is also provided -- Figma's\nspec doesn't show the two combined, so this is unspecified rather than actively blocked.\nReflected so consumers/CSS can target `bs-dialog[centered]`.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "readonly": true,
+              "attribute": "centered",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "heading",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true,
+              "attribute": "heading"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "description": "Mutable + reflected so the component can close itself (backdrop click, Escape, close button)\nthe same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"lg\" | \"md\" | \"sm\"",
+                "references": [
+                  {
+                    "name": "BsDialogSize"
+                  }
+                ]
+              },
+              "default": "'md'",
+              "readonly": true,
+              "attribute": "size"
+            }
+          ],
+          "events": [
+            {
+              "name": "bsClose",
+              "type": {
+                "text": "CustomEvent<void>"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Default slot: the dialog body content."
+            },
+            {
+              "name": "footer",
+              "description": "Optional footer content (typically action buttons)."
+            },
+            {
+              "name": "icon",
+              "description": "Optional icon shown above the heading, only rendered at all when `centered` is true."
+            },
+            {
+              "name": "image",
+              "description": "Optional hero image across the top of the dialog. Presence of assigned content\nswitches the close button to float over it; doesn't affect layout when empty."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "backdrop",
+              "description": "The full-viewport overlay behind the dialog."
+            },
+            {
+              "name": "body",
+              "description": "The body content wrapper."
+            },
+            {
+              "name": "close",
+              "description": "The close button (inline in the header, or floating -- see the class doc above)."
+            },
+            {
+              "name": "dialog",
+              "description": "The dialog box itself."
+            },
+            {
+              "name": "footer",
+              "description": "The footer wrapper (only visible when the footer slot has content)."
+            },
+            {
+              "name": "header",
+              "description": "The header row (heading + close button, when the close button isn't floating)."
+            },
+            {
+              "name": "icon",
+              "description": "The icon wrapper (only rendered when `centered` is true)."
+            },
+            {
+              "name": "image",
+              "description": "The hero image wrapper (only visible when the `image` slot has content)."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BsDialog",
+          "declaration": {
+            "name": "BsDialog"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bs-dialog",
+          "declaration": {
+            "name": "BsDialog"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/bs-button/bs-icon-button/bs-icon-button.tsx",
@@ -3495,7 +4509,7 @@
             },
             {
               "name": "field",
-              "description": "The bordered field wrapper containing the icon(s) and native control(s)."
+              "description": "The bordered field wrapper containing the icon(s) and native control(s).\n`type=\"initials\"` renders this part on TWO separate elements instead of one (the title\n`<select>`'s own small box, and the name `<input>`'s own box) -- Figma specs these as two\ngenuinely independent bordered containers with a gap between them, not one shared field the\nway every other composite type (`country` included) renders, so `::part(field)` reaches\nwhichever of the two a given selector context matches, same \"multiple elements, one shared\npart name\" convention as `bs-attachment`'s own `star` part."
             },
             {
               "name": "icon",
@@ -3591,6 +4605,14 @@
               "name": "--bs-input-icon-size",
               "description": "Width/height of the leading/trailing icon. Aliased to --bs-spacing-300."
             },
+            {
+              "name": "--bs-input-initials-gap",
+              "description": "Gap between the title box and the name box for type=\"initials\". Aliased to --bs-spacing-50 (4px), matching Figma's own gap-[4px] on this same pairing exactly."
+            },
+            {
+              "name": "--bs-input-initials-title-width",
+              "description": "Width of the title box for type=\"initials\" (e.g. \"Mrs.\"/\"Mr.\"/\"Dr.\"). A literal 80px, not aliased to a spacing token -- Figma specs this sub-field as a fixed, compact width regardless of option content (node 10306:101047), not content-based sizing. Applied to the box itself (`.bs-input__field--initials-title`), not the `<select>` directly -- see that class's own comment for why type=\"initials\" renders two separate bordered boxes instead of sharing one field the way every other composite type does."
+            },
             {
               "name": "--bs-input-label-color",
               "description": "Label text color. Aliased to --bs-input-label."
@@ -3854,160 +4876,31 @@
           "attributes": [
             {
               "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": "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`.",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "readonly": true,
-              "attribute": "disabled"
-            }
-          ],
-          "events": [
-            {
-              "name": "bsSelect",
-              "description": "Fires when the item is clicked.",
-              "type": {
-                "text": "CustomEvent<void>"
-              }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "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": "icon",
-              "description": "The icon wrapper."
-            },
-            {
-              "name": "item",
-              "description": "The button element."
-            },
-            {
-              "name": "label",
-              "description": "The label wrapper."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BsMenuItem",
-          "declaration": {
-            "name": "BsMenuItem"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bs-menu-item",
-          "declaration": {
-            "name": "BsMenuItem"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/bs-modal/bs-modal.tsx",
-      "declarations": [
-        {
-          "kind": "class",
-          "customElement": true,
-          "tagName": "bs-modal",
-          "name": "BsModal",
-          "description": "An overlay dialog that interrupts the current flow for a focused task or confirmation.\nCloses itself on backdrop click, Escape, or its own close button, and emits `bsClose`.\n\n## When to use\n- Confirming a consequential action (e.g. \"Confirm booking\") before it takes effect.\n- A short, focused task that doesn't warrant navigating to a new page.\n\n## When not to use\n- For non-blocking status messages — use a toast/notification instead of interrupting the user.\n- For a long, multi-step flow — a full page or a dedicated route is usually a better fit than a\n  modal that just gets taller and taller.",
-          "attributes": [
-            {
-              "name": "heading",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "heading"
-            },
-            {
-              "name": "open",
-              "description": "Mutable + reflected so the component can close itself (backdrop click, Escape, close button)\nthe same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to.",
+              "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": "boolean"
               },
               "default": "false",
-              "fieldName": "open"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "\"lg\" | \"md\" | \"sm\"",
-                "references": [
-                  {
-                    "name": "BsModalSize"
-                  }
-                ]
-              },
-              "default": "'md'",
-              "fieldName": "size"
+              "fieldName": "disabled"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "heading",
-              "type": {
-                "text": "string"
-              },
-              "readonly": true,
-              "attribute": "heading"
-            },
-            {
-              "kind": "field",
-              "name": "open",
-              "description": "Mutable + reflected so the component can close itself (backdrop click, Escape, close button)\nthe same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to.",
+              "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": "boolean"
               },
               "default": "false",
-              "attribute": "open",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"lg\" | \"md\" | \"sm\"",
-                "references": [
-                  {
-                    "name": "BsModalSize"
-                  }
-                ]
-              },
-              "default": "'md'",
               "readonly": true,
-              "attribute": "size"
+              "attribute": "disabled"
             }
           ],
           "events": [
             {
-              "name": "bsClose",
+              "name": "bsSelect",
+              "description": "Fires when the item is clicked.",
               "type": {
                 "text": "CustomEvent<void>"
               }
@@ -4016,37 +4909,25 @@
           "slots": [
             {
               "name": "",
-              "description": "Default slot: the dialog body content."
+              "description": "Default slot: the item's text label."
             },
             {
-              "name": "footer",
-              "description": "Optional footer content (typically action buttons)."
+              "name": "icon",
+              "description": "Optional leading icon (24x24). When left empty, no icon space is reserved."
             }
           ],
           "cssParts": [
             {
-              "name": "backdrop",
-              "description": "The full-viewport overlay behind the dialog."
-            },
-            {
-              "name": "body",
-              "description": "The body content wrapper."
-            },
-            {
-              "name": "close",
-              "description": "The close button."
-            },
-            {
-              "name": "dialog",
-              "description": "The dialog box itself."
+              "name": "icon",
+              "description": "The icon wrapper."
             },
             {
-              "name": "footer",
-              "description": "The footer wrapper (only visible when the footer slot has content)."
+              "name": "item",
+              "description": "The button element."
             },
             {
-              "name": "header",
-              "description": "The header row (heading + close button)."
+              "name": "label",
+              "description": "The label wrapper."
             }
           ]
         }
@@ -4054,16 +4935,16 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BsModal",
+          "name": "BsMenuItem",
           "declaration": {
-            "name": "BsModal"
+            "name": "BsMenuItem"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bs-modal",
+          "name": "bs-menu-item",
           "declaration": {
-            "name": "BsModal"
+            "name": "BsMenuItem"
           }
         }
       ]
@@ -4077,7 +4958,7 @@
           "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).\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).",
+          "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).",
           "attributes": [
             {
               "name": "collapsed",
@@ -4114,6 +4995,15 @@
               },
               "default": "'auto'",
               "fieldName": "logoBackground"
+            },
+            {
+              "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": [
@@ -4160,6 +5050,17 @@
               "default": "'auto'",
               "readonly": true,
               "attribute": "logo-background"
+            },
+            {
+              "kind": "field",
+              "name": "showLogo",
+              "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",
+              "readonly": true,
+              "attribute": "show-logo"
             }
           ],
           "events": [
@@ -4199,7 +5100,7 @@
             },
             {
               "name": "logo",
-              "description": "The wrapper around the BrandSync brand mark. Two of these exist in the shadow DOM\nat once (one wrapping a `bs-logo variant=\"full\"`, one wrapping a `bs-logo variant=\"mark\"`),\nboth carrying this same part name (the same \"multiple elements, one shared part name\"\napproach `bs-attachment`'s `star` part uses) -- only one is visible at a time, toggled by\nplain CSS on `collapsed` (see above), so `::part(logo)` always reaches whichever is showing."
+              "description": "The wrapper around the BrandSync brand mark. Two of these exist in the shadow DOM\nat once while `showLogo` is `true` (one wrapping a `bs-logo variant=\"full\"`, one wrapping a\n`bs-logo variant=\"mark\"`), both carrying this same part name (the same \"multiple elements, one\nshared part name\" approach `bs-attachment`'s `star` part uses) -- only one is visible at a\ntime, toggled by plain CSS on `collapsed` (see above), so `::part(logo)` always reaches\nwhichever is showing. Neither renders at all while `showLogo` is `false`."
             },
             {
               "name": "search",
@@ -4558,7 +5459,7 @@
             },
             {
               "name": "--bs-navigation-drawer-item-collapsed-icon-padding-x",
-              "description": "Left/right padding of the small rounded chip behind a `collapsed` row's icon (the `selected` tint applies to just this chip, not the full column). Aliased to --bs-spacing-100."
+              "description": "Left/right padding of the small rounded chip behind a `collapsed` row's icon (the `selected` tint applies to just this chip, not the full column). Aliased to --bs-spacing-300 -- widened from the original Figma-node-8028:135374 value (--bs-spacing-100) at the user's request after seeing the chip rendered too narrow relative to the rail's own width. Not a Figma re-measurement -- a deliberate deviation, same as bs-logo's icon-to-wordmark gap earlier this session."
             },
             {
               "name": "--bs-navigation-drawer-item-collapsed-icon-padding-y",
@@ -4776,62 +5677,292 @@
           ],
           "cssParts": [
             {
-              "name": "left",
-              "description": "The wrapper around the `left` slot."
+              "name": "left",
+              "description": "The wrapper around the `left` slot."
+            },
+            {
+              "name": "logo",
+              "description": "The BrandSync brand mark, rendered via a nested `bs-logo` element (`part=\"logo\"` is\nset directly on that element -- the same pattern `bs-attachment` uses for its own nested\n`bs-icon-button`'s `remove` part -- so `bs-navigation-header::part(logo)` still targets it\ndirectly, no forwarding needed). Not rendered in `with-navigation-drawer` mode."
+            },
+            {
+              "name": "right",
+              "description": "The wrapper around the `right` slot."
+            },
+            {
+              "name": "skip-link",
+              "description": "The \"Skip to main content\" link (only rendered when `skipToContentHref` is set)."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--bs-navigation-header-bg",
+              "description": "Background of the bar. Aliased to --bs-surface-base."
+            },
+            {
+              "name": "--bs-navigation-header-border",
+              "description": "Bottom border color. Aliased to --bs-border-default."
+            },
+            {
+              "name": "--bs-navigation-header-item-gap",
+              "description": "Gap between the logo and the `left` slot (`default` alignment), or between the `left` and `right` slots (`with-navigation-drawer` alignment, which has no logo). Not used in `center` alignment -- see the class doc in bs-navigation-header.tsx. The global vendored --bs-navigation-header-gap token is also malformed (a bare unitless `40`, which is an invalid `gap` value and silently falls back to `normal`/0), so this multiplies it into a real length instead of aliasing directly."
+            },
+            {
+              "name": "--bs-navigation-header-max-width",
+              "description": "Overall max-width of the bar. The global vendored --bs-breakpoints-max-width token is malformed (`1920rem` instead of `1920px` -- at a 16px root font size that's ~30720px, effectively unconstrained), so this is a literal 1920px instead of aliasing to it."
+            },
+            {
+              "name": "--bs-navigation-header-padding-bottom",
+              "description": "Aliased to --bs-spacing-100."
+            },
+            {
+              "name": "--bs-navigation-header-padding-top",
+              "description": "Aliased to --bs-spacing-200."
+            },
+            {
+              "name": "--bs-navigation-header-padding-x",
+              "description": "Aliased to --bs-margin-fluid."
+            },
+            {
+              "name": "--bs-navigation-header-skip-link-bg",
+              "description": "Skip-to-content link background, once focused into view. Aliased to --bs-surface-action."
+            },
+            {
+              "name": "--bs-navigation-header-skip-link-color",
+              "description": "Skip-to-content link text color, once focused into view. Aliased to --bs-text-inverse."
+            },
+            {
+              "name": "--bs-navigation-header-slot-gap",
+              "description": "Gap between items within a single `left`/`right` slot. Aliased to --bs-spacing-100."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BsNavigationHeader",
+          "declaration": {
+            "name": "BsNavigationHeader"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bs-navigation-header",
+          "declaration": {
+            "name": "BsNavigationHeader"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/bs-pagination/bs-pagination.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "bs-pagination",
+          "name": "BsPagination",
+          "description": "A numbered page control -- previous/next chevrons, page-number buttons, and `...` overflow for\nlarge page counts. Matches the Figma \"Pagination\" component's \"Default\" type (the classic\nnumbered pagination); its other type (\"jumper\" -- a rows-per-page dropdown plus a page-jump\ninput) is a structurally different composite widget and isn't covered by this component.\n\n`totalPages`/`currentPage` drive everything -- this computes which page numbers to show and\nwhere to collapse into `...` itself, the consumer never builds the button list by hand.\n\n## When to use\n- Paging through a large, ordered result set (a table, a search results list) where jumping\n  directly to a specific page number is useful.\n\n## When not to use\n- Infinite-scroll or \"load more\" patterns -- those don't have a fixed, addressable page number.\n- A huge page count where users realistically only ever go forward/back one page at a time --\n  plain prev/next controls (no numbers) are simpler there.",
+          "attributes": [
+            {
+              "name": "current-page",
+              "description": "The active page (1-indexed). Mutable + reflected so clicking a page button updates it\ndirectly, the same way `bs-modal`'s `open` self-manages, while `bsPageChange` still fires for\nthe consumer to react to (e.g. fetching that page's data).",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "fieldName": "currentPage"
+            },
+            {
+              "name": "next-label",
+              "description": "Accessible name for the next-page button.",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Next page'",
+              "fieldName": "nextLabel"
+            },
+            {
+              "name": "previous-label",
+              "description": "Accessible name for the previous-page button.",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Previous page'",
+              "fieldName": "previousLabel"
+            },
+            {
+              "name": "sibling-count",
+              "description": "How many page numbers to show on each side of the current page before collapsing the rest\ninto `...`. `1` (the default) reproduces the Figma spec's example exactly (page 1 of 12 shows\n`1 2 3 ... 12`).",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "fieldName": "siblingCount"
+            },
+            {
+              "name": "total-pages",
+              "description": "Total number of pages. Must be a positive integer -- there's always at least one page.",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "fieldName": "totalPages"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "currentPage",
+              "description": "The active page (1-indexed). Mutable + reflected so clicking a page button updates it\ndirectly, the same way `bs-modal`'s `open` self-manages, while `bsPageChange` still fires for\nthe consumer to react to (e.g. fetching that page's data).",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "attribute": "current-page",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "nextLabel",
+              "description": "Accessible name for the next-page button.",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Next page'",
+              "readonly": true,
+              "attribute": "next-label"
+            },
+            {
+              "kind": "field",
+              "name": "previousLabel",
+              "description": "Accessible name for the previous-page button.",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Previous page'",
+              "readonly": true,
+              "attribute": "previous-label"
+            },
+            {
+              "kind": "field",
+              "name": "siblingCount",
+              "description": "How many page numbers to show on each side of the current page before collapsing the rest\ninto `...`. `1` (the default) reproduces the Figma spec's example exactly (page 1 of 12 shows\n`1 2 3 ... 12`).",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "readonly": true,
+              "attribute": "sibling-count"
+            },
+            {
+              "kind": "field",
+              "name": "totalPages",
+              "description": "Total number of pages. Must be a positive integer -- there's always at least one page.",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "readonly": true,
+              "attribute": "total-pages"
+            }
+          ],
+          "events": [
+            {
+              "name": "bsPageChange",
+              "description": "Fires whenever the active page changes as a result of the user clicking a page/prev/next\nbutton -- not when `currentPage` is set programmatically from outside.",
+              "type": {
+                "text": "CustomEvent<number>"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "current",
+              "description": "The current page's button (in addition to `page`)."
             },
             {
-              "name": "logo",
-              "description": "The BrandSync brand mark, rendered via a nested `bs-logo` element (`part=\"logo\"` is\nset directly on that element -- the same pattern `bs-attachment` uses for its own nested\n`bs-icon-button`'s `remove` part -- so `bs-navigation-header::part(logo)` still targets it\ndirectly, no forwarding needed). Not rendered in `with-navigation-drawer` mode."
+              "name": "ellipsis",
+              "description": "Each collapsed-range indicator."
             },
             {
-              "name": "right",
-              "description": "The wrapper around the `right` slot."
+              "name": "item",
+              "description": "Each `<li>` in the list."
             },
             {
-              "name": "skip-link",
-              "description": "The \"Skip to main content\" link (only rendered when `skipToContentHref` is set)."
+              "name": "list",
+              "description": "The `<ul>` element."
+            },
+            {
+              "name": "next",
+              "description": "The next-page button."
+            },
+            {
+              "name": "page",
+              "description": "Each page-number button."
+            },
+            {
+              "name": "prev",
+              "description": "The previous-page button."
             }
           ],
           "cssProperties": [
             {
-              "name": "--bs-navigation-header-bg",
-              "description": "Background of the bar. Aliased to --bs-surface-base."
+              "name": "--bs-pagination-color",
+              "description": "Icon/page-number color, unselected. Aliased to --bs-text-secondary."
             },
             {
-              "name": "--bs-navigation-header-border",
-              "description": "Bottom border color. Aliased to --bs-border-default."
+              "name": "--bs-pagination-color-disabled",
+              "description": "Prev/next icon color when at the first/last page. Aliased to --bs-icon-disabled."
             },
             {
-              "name": "--bs-navigation-header-item-gap",
-              "description": "Gap between the logo and the `left` slot (`default` alignment), or between the `left` and `right` slots (`with-navigation-drawer` alignment, which has no logo). Not used in `center` alignment -- see the class doc in bs-navigation-header.tsx. The global vendored --bs-navigation-header-gap token is also malformed (a bare unitless `40`, which is an invalid `gap` value and silently falls back to `normal`/0), so this multiplies it into a real length instead of aliasing directly."
+              "name": "--bs-pagination-current-bg",
+              "description": "Background of the current page's button. Aliased to --bs-color-primary-default."
             },
             {
-              "name": "--bs-navigation-header-max-width",
-              "description": "Overall max-width of the bar. The global vendored --bs-breakpoints-max-width token is malformed (`1920rem` instead of `1920px` -- at a 16px root font size that's ~30720px, effectively unconstrained), so this is a literal 1920px instead of aliasing to it."
+              "name": "--bs-pagination-current-bg-hover",
+              "description": "Background of the current page's button on hover. Aliased to --bs-color-primary-hover."
             },
             {
-              "name": "--bs-navigation-header-padding-bottom",
-              "description": "Aliased to --bs-spacing-100."
+              "name": "--bs-pagination-current-bg-pressed",
+              "description": "Background of the current page's button when pressed. Aliased to --bs-color-primary-pressed."
             },
             {
-              "name": "--bs-navigation-header-padding-top",
-              "description": "Aliased to --bs-spacing-200."
+              "name": "--bs-pagination-current-color",
+              "description": "Text color of the current page's button. Aliased to --bs-text-on-action."
             },
             {
-              "name": "--bs-navigation-header-padding-x",
-              "description": "Aliased to --bs-margin-fluid."
+              "name": "--bs-pagination-focus-ring-color",
+              "description": "Focus ring color. Aliased to --bs-border-neutral-focus."
             },
             {
-              "name": "--bs-navigation-header-skip-link-bg",
-              "description": "Skip-to-content link background, once focused into view. Aliased to --bs-surface-action."
+              "name": "--bs-pagination-font-size",
+              "description": "Aliased to --bs-font-size-md."
             },
             {
-              "name": "--bs-navigation-header-skip-link-color",
-              "description": "Skip-to-content link text color, once focused into view. Aliased to --bs-text-inverse."
+              "name": "--bs-pagination-gap",
+              "description": "Gap between items. Aliased to --bs-spacing-50."
             },
             {
-              "name": "--bs-navigation-header-slot-gap",
-              "description": "Gap between items within a single `left`/`right` slot. Aliased to --bs-spacing-100."
+              "name": "--bs-pagination-hover",
+              "description": "Background of an unselected page button on hover. Aliased to --bs-color-neutral-container-hover."
+            },
+            {
+              "name": "--bs-pagination-line-height",
+              "description": "Aliased to --bs-line-height-body-md."
+            },
+            {
+              "name": "--bs-pagination-pressed",
+              "description": "Background of an unselected page button when pressed. Aliased to --bs-color-neutral-container-pressed."
+            },
+            {
+              "name": "--bs-pagination-radius",
+              "description": "Corner radius of each control. Aliased to --bs-border-radius-100."
+            },
+            {
+              "name": "--bs-pagination-size",
+              "description": "Width/height of each control (prev/next/page/ellipsis). Aliased to --bs-spacing-550 (44px, exact match to Figma)."
             }
           ]
         }
@@ -4839,16 +5970,16 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BsNavigationHeader",
+          "name": "BsPagination",
           "declaration": {
-            "name": "BsNavigationHeader"
+            "name": "BsPagination"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bs-navigation-header",
+          "name": "bs-pagination",
           "declaration": {
-            "name": "BsNavigationHeader"
+            "name": "BsPagination"
           }
         }
       ]
@@ -5449,6 +6580,321 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/bs-snackbar/bs-snackbar.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "bs-snackbar",
+          "name": "BsSnackbar",
+          "description": "A transient status bar for confirming the result of an action (e.g. \"Files uploaded\nsuccessfully.\") -- an icon (or loading spinner), a message, an optional action, and a close\nbutton.\n\nThis component only renders the bar itself -- it doesn't manage its own visibility, timing, or\nstacking. A consumer (typically a small \"toast manager\" utility) creates one per message and\nremoves it from the DOM again, whether on a timer or on `bsDismiss`. Figma's spec doesn't show\nauto-dismiss timing at all (it's a static visual spec), so this deliberately doesn't invent one.\n\nThe icon is always the same checkmark glyph across every `variant`, just recolored -- matching\nthe Figma spec exactly, even though a checkmark for `variant=\"error\"` reads a little oddly\nsemantically. Worth revisiting with severity-specific icons (warning triangle, error circle,\netc.) if the design updates to specify them.\n\n## When to use\n- Confirming the outcome of an action that just happened (save succeeded, upload failed) without\n  interrupting the user's flow.\n\n## When not to use\n- For a response that requires the user to make a decision before continuing -- use `bs-dialog`.\n- For persistent, always-visible status -- a snackbar is inherently transient.",
+          "attributes": [
+            {
+              "name": "action-label",
+              "description": "Label for the optional action button (e.g. \"Undo\", \"Retry\"). Omit this prop entirely to\nrender no action button at all -- its presence, not a boolean flag, is what shows it.",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "actionLabel"
+            },
+            {
+              "name": "loading",
+              "description": "Replaces the checkmark icon with a spinning loading indicator, for a message describing\nin-progress work (e.g. \"Uploading files...\") rather than a completed result.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "loading"
+            },
+            {
+              "name": "variant",
+              "description": "Color/semantic variant. `default` is the neutral (dark, inverse-surface) bar Figma shows as\nthe baseline; `info`/`warning`/`success`/`error` use their matching container/text tokens.",
+              "type": {
+                "text": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+                "references": [
+                  {
+                    "name": "BsSnackbarVariant"
+                  }
+                ]
+              },
+              "default": "'default'",
+              "fieldName": "variant"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "actionLabel",
+              "description": "Label for the optional action button (e.g. \"Undo\", \"Retry\"). Omit this prop entirely to\nrender no action button at all -- its presence, not a boolean flag, is what shows it.",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true,
+              "attribute": "action-label"
+            },
+            {
+              "kind": "field",
+              "name": "loading",
+              "description": "Replaces the checkmark icon with a spinning loading indicator, for a message describing\nin-progress work (e.g. \"Uploading files...\") rather than a completed result.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "readonly": true,
+              "attribute": "loading"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "description": "Color/semantic variant. `default` is the neutral (dark, inverse-surface) bar Figma shows as\nthe baseline; `info`/`warning`/`success`/`error` use their matching container/text tokens.",
+              "type": {
+                "text": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+                "references": [
+                  {
+                    "name": "BsSnackbarVariant"
+                  }
+                ]
+              },
+              "default": "'default'",
+              "readonly": true,
+              "attribute": "variant"
+            }
+          ],
+          "events": [
+            {
+              "name": "bsAction",
+              "description": "Fires when the action button is clicked. Ignored/never fires if `actionLabel` isn't set.",
+              "type": {
+                "text": "CustomEvent<void>"
+              }
+            },
+            {
+              "name": "bsDismiss",
+              "description": "Fires when the close button is clicked. This component doesn't remove itself from the DOM --\nthe consumer is expected to do that (or hide it) in response to this event.",
+              "type": {
+                "text": "CustomEvent<void>"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Default slot: the message text."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "action",
+              "description": "The optional action button (only rendered when `actionLabel` is set)."
+            },
+            {
+              "name": "close",
+              "description": "The close button."
+            },
+            {
+              "name": "container",
+              "description": "The outer bar."
+            },
+            {
+              "name": "icon",
+              "description": "The leading icon/spinner wrapper."
+            },
+            {
+              "name": "message",
+              "description": "The message text wrapper."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--bs-snackbar-action-bg-error",
+              "description": "Action button background, variant=\"error\". Aliased to --bs-snackbar-bg-error (brandsync-tokens)."
+            },
+            {
+              "name": "--bs-snackbar-action-bg-error-hover",
+              "description": "Action button background, variant=\"error\", hover. Aliased to --bs-color-error-hover."
+            },
+            {
+              "name": "--bs-snackbar-action-bg-error-pressed",
+              "description": "Action button background, variant=\"error\", pressed. Aliased to --bs-color-error-pressed."
+            },
+            {
+              "name": "--bs-snackbar-action-bg-info",
+              "description": "Action button background, variant=\"info\". Aliased to --bs-snackbar-bg-info (brandsync-tokens)."
+            },
+            {
+              "name": "--bs-snackbar-action-bg-info-hover",
+              "description": "Action button background, variant=\"info\", hover. Aliased to --bs-color-info-hover."
+            },
+            {
+              "name": "--bs-snackbar-action-bg-info-pressed",
+              "description": "Action button background, variant=\"info\", pressed. Aliased to --bs-color-info-pressed."
+            },
+            {
+              "name": "--bs-snackbar-action-bg-success",
+              "description": "Action button background, variant=\"success\". Aliased to --bs-snackbar-bg-success (brandsync-tokens)."
+            },
+            {
+              "name": "--bs-snackbar-action-bg-success-hover",
+              "description": "Action button background, variant=\"success\", hover. Aliased to --bs-color-success-hover."
+            },
+            {
+              "name": "--bs-snackbar-action-bg-success-pressed",
+              "description": "Action button background, variant=\"success\", pressed. Aliased to --bs-color-success-pressed."
+            },
+            {
+              "name": "--bs-snackbar-action-bg-warning",
+              "description": "Action button background, variant=\"warning\". Aliased to --bs-snackbar-bg-warning (brandsync-tokens)."
+            },
+            {
+              "name": "--bs-snackbar-action-bg-warning-hover",
+              "description": "Action button background, variant=\"warning\", hover. Aliased to --bs-color-warning-hover."
+            },
+            {
+              "name": "--bs-snackbar-action-bg-warning-pressed",
+              "description": "Action button background, variant=\"warning\", pressed. Aliased to --bs-color-warning-pressed."
+            },
+            {
+              "name": "--bs-snackbar-action-border-default",
+              "description": "Action button border, variant=\"default\" (outlined, not filled). Aliased to --bs-blue-300."
+            },
+            {
+              "name": "--bs-snackbar-action-font-size",
+              "description": "Action button font size. Aliased to --bs-font-size-sm."
+            },
+            {
+              "name": "--bs-snackbar-action-font-weight",
+              "description": "Action button font weight. Aliased to --bs-font-weight-medium."
+            },
+            {
+              "name": "--bs-snackbar-action-line-height",
+              "description": "Action button line height. Aliased to --bs-line-height-body-sm."
+            },
+            {
+              "name": "--bs-snackbar-action-radius",
+              "description": "Corner radius of the action button. Aliased to --bs-border-radius-100."
+            },
+            {
+              "name": "--bs-snackbar-action-text-default",
+              "description": "Action button text, variant=\"default\". Aliased to --bs-snackbar-action-text (brandsync-tokens)."
+            },
+            {
+              "name": "--bs-snackbar-action-text-on-action",
+              "description": "Action button text, every colored (filled) variant. Aliased to --bs-text-on-action."
+            },
+            {
+              "name": "--bs-snackbar-actions-gap",
+              "description": "Gap between the action button and the close button. Aliased to --bs-spacing-50."
+            },
+            {
+              "name": "--bs-snackbar-actions-padding-x",
+              "description": "Right padding of the actions area (the bar's own right edge). Aliased to --bs-spacing-100."
+            },
+            {
+              "name": "--bs-snackbar-actions-padding-y",
+              "description": "Top/bottom padding of the actions area. Aliased to --bs-spacing-50."
+            },
+            {
+              "name": "--bs-snackbar-close-radius",
+              "description": "Corner radius of the close button. Aliased to --bs-border-radius-100."
+            },
+            {
+              "name": "--bs-snackbar-color-default",
+              "description": "Icon/message/close color, variant=\"default\". Aliased to --bs-snackbar-text-default (brandsync-tokens) -- named \"-color-\", not \"-text-\", solely to avoid colliding with that vendored token's own name."
+            },
+            {
+              "name": "--bs-snackbar-content-gap",
+              "description": "Gap between the icon and the message. Aliased to --bs-spacing-150."
+            },
+            {
+              "name": "--bs-snackbar-content-padding-x",
+              "description": "Left padding of the content area (the bar's own left edge). Aliased to --bs-spacing-200."
+            },
+            {
+              "name": "--bs-snackbar-content-padding-y",
+              "description": "Top/bottom padding of the content area. Aliased to --bs-spacing-200."
+            },
+            {
+              "name": "--bs-snackbar-font-size",
+              "description": "Message font size. Aliased to --bs-font-size-md."
+            },
+            {
+              "name": "--bs-snackbar-gap",
+              "description": "Gap between the content area and the actions area. Aliased to --bs-spacing-100."
+            },
+            {
+              "name": "--bs-snackbar-line-height",
+              "description": "Message line height. Aliased to --bs-line-height-body-md."
+            },
+            {
+              "name": "--bs-snackbar-radius",
+              "description": "Corner radius of the bar. Aliased to --bs-border-radius-100."
+            },
+            {
+              "name": "--bs-snackbar-shadow",
+              "description": "Elevation shadow, since a snackbar floats above page content. Aliased to --bs-shadow-md."
+            },
+            {
+              "name": "--bs-snackbar-spinner-track",
+              "description": "Loading spinner's background ring. Aliased to --bs-neutral-200."
+            },
+            {
+              "name": "--bs-snackbar-surface-default",
+              "description": "Bar background, variant=\"default\". Aliased to --bs-snackbar-bg-default (brandsync-tokens)."
+            },
+            {
+              "name": "--bs-snackbar-surface-error",
+              "description": "Bar background, variant=\"error\". Aliased to --bs-color-error-container."
+            },
+            {
+              "name": "--bs-snackbar-surface-info",
+              "description": "Bar background, variant=\"info\". Aliased to --bs-color-info-container."
+            },
+            {
+              "name": "--bs-snackbar-surface-success",
+              "description": "Bar background, variant=\"success\". Aliased to --bs-color-success-container."
+            },
+            {
+              "name": "--bs-snackbar-surface-warning",
+              "description": "Bar background, variant=\"warning\". Aliased to --bs-color-warning-container."
+            },
+            {
+              "name": "--bs-snackbar-text-error",
+              "description": "Icon/message/close color, variant=\"error\". Aliased to --bs-text-error."
+            },
+            {
+              "name": "--bs-snackbar-text-info",
+              "description": "Icon/message/close color, variant=\"info\". Aliased to --bs-text-info."
+            },
+            {
+              "name": "--bs-snackbar-text-success",
+              "description": "Icon/message/close color, variant=\"success\". Aliased to --bs-text-success."
+            },
+            {
+              "name": "--bs-snackbar-text-warning",
+              "description": "Icon/message/close color, variant=\"warning\". Aliased to --bs-text-warning."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BsSnackbar",
+          "declaration": {
+            "name": "BsSnackbar"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bs-snackbar",
+          "declaration": {
+            "name": "BsSnackbar"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/bs-source-link/bs-source-link.tsx",