@brandsync/wc 0.0.11 → 0.1.0

package/dist/types/components.d.ts

@@ -6,25 +6,51 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BsAttachmentType } from "./components/bs-attachment/bs-attachment";
+import { BsAvatarSize, BsAvatarType } from "./components/bs-avatar/bs-avatar";
 import { BsBadgeVariant } from "./components/bs-badge/bs-badge";
-import { BsButtonSize, BsButtonVariant } from "./components/bs-button/bs-button";
-import { BsButtonSize as BsButtonSize1 } from "./components/bs-button/bs-button";
+import { BsBreadcrumbSize } from "./components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb";
+import { BsBreadcrumbOverflowItem } from "./components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow";
+import { BsBreadcrumbSize as BsBreadcrumbSize1 } from "./components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb";
+import { BsButtonSize, BsButtonVariant } from "./components/bs-button/bs-button/bs-button";
+import { BsButtonSize as BsButtonSize1 } from "./components/bs-button/bs-button/bs-button";
 import { BsCardSurface } from "./components/bs-card/bs-card";
 import { BsCheckboxSize } from "./components/bs-checkbox/bs-checkbox";
+import { BsCheckboxSize as BsCheckboxSize1 } from "./components/bs-checkbox/bs-checkbox";
 import { BsComposerState, BsComposerVariant } from "./components/bs-composer/bs-composer";
 import { BsComposerStatusBannerType } from "./components/bs-composer-status-banner/bs-composer-status-banner";
 import { BsDataTableColumn, BsDataTableRow } from "./components/bs-data-table/bs-data-table";
-import { BsModalSize } from "./components/bs-modal/bs-modal";
+import { BsDialogSize } from "./components/bs-dialog/bs-dialog";
+import { BsIconButtonSize, BsIconButtonVariant } from "./components/bs-button/bs-icon-button/bs-icon-button";
+import { BsLogoBackground, BsLogoVariant } from "./components/bs-logo/bs-logo";
+import { BsNavigationHeaderAlignment } from "./components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header";
+import { BsSliderType } from "./components/bs-slider/bs-slider";
+import { BsSnackbarVariant } from "./components/bs-snackbar/bs-snackbar";
+import { BsSwitchSize } from "./components/bs-switch/bs-switch";
+import { BsTabIconPosition } from "./components/bs-tab/bs-tab/bs-tab";
+import { BsTabsOrientation, BsTabsType } from "./components/bs-tab/bs-tabs/bs-tabs";
 export { BsAttachmentType } from "./components/bs-attachment/bs-attachment";
+export { BsAvatarSize, BsAvatarType } from "./components/bs-avatar/bs-avatar";
 export { BsBadgeVariant } from "./components/bs-badge/bs-badge";
-export { BsButtonSize, BsButtonVariant } from "./components/bs-button/bs-button";
-export { BsButtonSize as BsButtonSize1 } from "./components/bs-button/bs-button";
+export { BsBreadcrumbSize } from "./components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb";
+export { BsBreadcrumbOverflowItem } from "./components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow";
+export { BsBreadcrumbSize as BsBreadcrumbSize1 } from "./components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb";
+export { BsButtonSize, BsButtonVariant } from "./components/bs-button/bs-button/bs-button";
+export { BsButtonSize as BsButtonSize1 } from "./components/bs-button/bs-button/bs-button";
 export { BsCardSurface } from "./components/bs-card/bs-card";
 export { BsCheckboxSize } from "./components/bs-checkbox/bs-checkbox";
+export { BsCheckboxSize as BsCheckboxSize1 } from "./components/bs-checkbox/bs-checkbox";
 export { BsComposerState, BsComposerVariant } from "./components/bs-composer/bs-composer";
 export { BsComposerStatusBannerType } from "./components/bs-composer-status-banner/bs-composer-status-banner";
 export { BsDataTableColumn, BsDataTableRow } from "./components/bs-data-table/bs-data-table";
-export { BsModalSize } from "./components/bs-modal/bs-modal";
+export { BsDialogSize } from "./components/bs-dialog/bs-dialog";
+export { BsIconButtonSize, BsIconButtonVariant } from "./components/bs-button/bs-icon-button/bs-icon-button";
+export { BsLogoBackground, BsLogoVariant } from "./components/bs-logo/bs-logo";
+export { BsNavigationHeaderAlignment } from "./components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header";
+export { BsSliderType } from "./components/bs-slider/bs-slider";
+export { BsSnackbarVariant } from "./components/bs-snackbar/bs-snackbar";
+export { BsSwitchSize } from "./components/bs-switch/bs-switch";
+export { BsTabIconPosition } from "./components/bs-tab/bs-tab/bs-tab";
+export { BsTabsOrientation, BsTabsType } from "./components/bs-tab/bs-tabs/bs-tabs";
 export namespace Components {
     /**
      * A centered caption disclaimer for Genie AI surfaces, e.g. "AI can make mistakes. Please verify
@@ -114,7 +140,9 @@ export namespace Components {
     /**
      * A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
      * with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
-     * a hover/focus-revealed remove button.
+     * a hover/focus-revealed remove button (a `bs-icon-button` with `size="xs"` `variant="neutral"` --
+     * the same 16x16px compact tier `bs-icon-button` documents as meant for exactly this kind of
+     * chip/tag "remove" control).
      * ## When to use
      * - Rendered by the consuming app for each file a user has attached to a Genie AI chat message,
      *   typically alongside or inside `bs-composer`.
@@ -131,14 +159,6 @@ export namespace Components {
      * @prop --bs-attachment-badge-bg-pdf - PDF badge background. Aliased to `--bs-badge-bg-error`.
      * @prop --bs-attachment-badge-bg-document - Document badge background. Aliased to
      * `--bs-badge-bg-info`.
-     * @prop --bs-attachment-remove-bg - Remove button (neutral icon button) default background.
-     * Aliased to `--bs-button-neutral-container`.
-     * @prop --bs-attachment-remove-hover - Remove button hover background. Aliased to
-     * `--bs-button-neutral-hover`.
-     * @prop --bs-attachment-remove-pressed - Remove button active/pressed background. Aliased to
-     * `--bs-button-neutral-pressed`.
-     * @prop --bs-attachment-remove-focus - Remove button focus outline color. Aliased to
-     * `--bs-border-neutral-focus`.
      */
     interface BsAttachment {
         /**
@@ -198,6 +218,62 @@ export namespace Components {
          */
         "ariaLabel": string | null;
     }
+    /**
+     * A circular representation of a person or entity -- a photo, initials, or (as a fallback when
+     * neither is available) a generic user-silhouette icon.
+     * ## When to use
+     * - Representing a specific user or account: in a header, a comment, a member list, etc.
+     * - `type="initials"` when a photo isn't available but a name is (e.g. "Sam Lee" -> "SL").
+     * - `type="icon"` (the default) as the generic fallback when neither a photo nor a name/initials
+     *   is available yet.
+     * ## When not to use
+     * - A company/brand logo -- use `bs-logo` instead.
+     * This component is decorative/informational by default, not an interactive control -- it renders
+     * a plain `<span>`/`<img>`, not a `<button>`. Figma's own component set includes hover/focused/
+     * pressed states (e.g. for an account-switcher trigger use case), which this implements as real
+     * `:hover`/`:focus-visible`/`:active` CSS on the host itself -- so wrapping this in your own
+     * `<button>`, or setting `tabindex` and a click handler on the `<bs-avatar>` element directly, gets
+     * the matching visual treatment for free with no extra wiring. Left genuinely non-interactive
+     * (no implicit role/tabindex of its own) so it doesn't misrepresent a purely decorative avatar
+     * (e.g. next to a comment) as a control when it isn't one.
+     */
+    interface BsAvatar {
+        /**
+          * `type="image"` only: accessible alt text for the photo, set directly on the real `<img>` this renders -- a person's photo is meaningful content, not decorative, so pass something real (e.g. their name). Falls back to `alt=""` (decorative to assistive tech) when unset, rather than omitting the attribute entirely, but don't rely on that fallback. Ignored for `icon`/`initials` -- see `ariaLabel` for those instead.
+          * @default null
+         */
+        "alt": string | null;
+        /**
+          * `type="icon"`/`"initials"` only: accessible name for the avatar, set as `aria-label` on the `role="img"` wrapper this renders (neither is a real `<img>`, so there's no native `alt` to set). Setting a plain `aria-label` attribute on the `<bs-avatar>` host does NOT work for this -- that attribute stays on the light-DOM host and never crosses into the shadow DOM, so the actual `role="img"` element stays nameless. Same pattern as `bs-checkbox`'s identical `ariaLabel` prop. Ignored for `image` -- see `alt` for that instead.
+          * @default null
+         */
+        "ariaLabel": string | null;
+        /**
+          * Applies the disabled treatment (50% opacity) and suppresses the hover/focus/pressed CSS states -- this doesn't set a native `disabled` attribute (this component renders no native form control), it's purely a visual/interaction-state flag for when a consuming app has wrapped this in its own disabled control. Reflected so the `:host([disabled])` CSS selector that drives all of the above still matches when a consumer sets the JS property directly (`el.disabled = true`) rather than the HTML attribute.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * `type="initials"` only: the initials text to display (e.g. `"SL"` for "Sam Lee"). Ignored for `icon`/`image`.
+          * @default null
+         */
+        "initials": string | null;
+        /**
+          * Sizing scale -- `xs` (24px) through `xxl` (128px), matching Figma's own six-step scale.
+          * @default 'md'
+         */
+        "size": BsAvatarSize;
+        /**
+          * `type="image"` only: the photo URL. This component does not fetch it itself -- network calls, loading/error states, and caching are the consuming app's responsibility, same convention as `bs-logo`'s own `src` prop. Ignored for `icon`/`initials`.
+          * @default null
+         */
+        "src": string | null;
+        /**
+          * What to render inside the circle. `icon` (default) is the generic fallback for when neither a photo nor initials are available yet.
+          * @default 'icon'
+         */
+        "type": BsAvatarType;
+    }
     /**
      * A small status or category pill, usually paired with a label or list item.
      * ## When to use
@@ -214,6 +290,109 @@ export namespace Components {
          */
         "variant": BsBadgeVariant;
     }
+    /**
+     * A single crumb within a `<bs-breadcrumbs>` trail: a leading separator icon plus either a link,
+     * plain text, or the current-page label, depending on `current`/`href`.
+     * Rendering follows the W3C ARIA Authoring Practices breadcrumb pattern
+     * (https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/): the current page is marked
+     * `aria-current="page"` and is never a link -- this holds even when `href` is also set, unlike
+     * Carbon Design System's `cds-breadcrumb-item`, which allows a link on the current item.
+     * Sets `role="listitem"` on the host, mirroring Carbon's own `CDSBreadcrumbItem.connectedCallback()`
+     * -- since this is a custom-element child of a real `<ol>` rather than a real `<li>`, the
+     * accessibility tree needs this explicit role to preserve the list's semantics.
+     * ## When to use
+     * - As one crumb inside a `<bs-breadcrumbs>` trail.
+     * ## When not to use
+     * - Standalone, outside a `<bs-breadcrumbs>` wrapper -- its `<ol>`/`<nav>` context and
+     *   first-child-aware separator hiding depend on that parent structure.
+     */
+    interface BsBreadcrumb {
+        /**
+          * Whether this crumb is the current page. Renders as plain (non-link) text marked `aria-current="page"`, reflected as an attribute so consumers/CSS can target `bs-breadcrumb[current]`.
+          * @default false
+         */
+        "current": boolean;
+        /**
+          * Destination for a non-current crumb. Ignored when `current` is true -- the current page is never a link, even if `href` is set (see the class JSDoc).
+         */
+        "href"?: string;
+        /**
+          * Size variant. Normally set automatically by a parent `<bs-breadcrumbs size="...">` -- the container propagates its own `size` as a JS property to every slotted `bs-breadcrumb`/ `bs-breadcrumb-overflow` child (see `bs-breadcrumbs.tsx`'s `propagateSize`), since CSS custom properties can't carry an enum that switches rules on their own. Can also be set directly on a standalone crumb. `sm` scales down font-size/line-height only -- the separator icon's pixel size is unchanged, since Figma didn't specify a `sm` icon size and guessing one risked drifting off-brand. Reflected so consumers/CSS can target `bs-breadcrumb[size="sm"]`.
+          * @default 'md'
+         */
+        "size": BsBreadcrumbSize;
+    }
+    /**
+     * A manually-placed collapsed-items disclosure for a `<bs-breadcrumbs>` trail: a leading separator
+     * plus an icon-only ellipsis button that reveals a `bs-menu` popup listing every hidden crumb.
+     * `items` is JS-property-only -- must be set as a JS property (`el.items = [...]`), not an HTML
+     * attribute, since attributes can only carry strings. See CONVENTIONS.md.
+     * Unlike an earlier `bs-breadcrumbs`-owned automatic `maxItems` collapse, this component does no
+     * collapsing logic itself -- the consumer decides which crumbs to hide and places this element
+     * wherever they want the disclosure, exactly matching Carbon Design System's own approach (Carbon
+     * doesn't auto-collapse breadcrumbs either; a consumer there manually decides what's visible).
+     * Hidden items with an `href` render as real `<a href>` rows inside the popup, not `bs-menu-item`
+     * (which renders a `<button>`) -- this matters because consuming apps commonly use client-side
+     * routers that intercept clicks on real `<a>` tags to do `preventDefault` + push-state navigation.
+     * Rendering hidden links any other way (e.g. `window.location`) would silently break client-side
+     * routing for hidden crumbs while working fine for visible ones. Hidden items without an `href`
+     * render as plain non-interactive text, matching how `bs-breadcrumb` itself handles link vs.
+     * no-link crumbs.
+     * Sets `role="listitem"` on the host, mirroring Carbon's own `CDSBreadcrumbItem.connectedCallback()`
+     * -- since this is a custom-element child of a real `<ol>` rather than a real `<li>`, the
+     * accessibility tree needs this explicit role to preserve the list's semantics.
+     * ## When to use
+     * - Inside a `<bs-breadcrumbs>` trail, wherever the consumer wants an interactive disclosure for
+     *   crumbs they've chosen not to render directly.
+     * ## When not to use
+     * - As an automatic collapsing mechanism -- there is none; the consumer decides what's hidden.
+     */
+    interface BsBreadcrumbOverflow {
+        /**
+          * Array prop -- must be set as a JS property (`el.items = [...]`), not an HTML attribute, since attributes can only carry strings. See CONVENTIONS.md. The hidden crumbs reachable via this disclosure -- no collapsing logic here, the consumer decides what goes in this list.
+          * @default []
+         */
+        "items": BsBreadcrumbOverflowItem[];
+        /**
+          * Accessible name (`aria-label`) for the icon-only ellipsis trigger button.
+          * @default 'Show hidden breadcrumbs'
+         */
+        "overflowLabel": string;
+        /**
+          * Size variant. Normally set automatically by a parent `<bs-breadcrumbs size="...">` -- see `bs-breadcrumb`'s identical `size` prop doc comment for why this is propagated as a JS property rather than inherited via CSS. Scales the popup rows' font-size/line-height only; the separator/ellipsis icons' pixel sizes are unchanged. Reflected so consumers/CSS can target `bs-breadcrumb-overflow[size="sm"]`.
+          * @default 'md'
+         */
+        "size": BsBreadcrumbSize1;
+    }
+    /**
+     * A breadcrumb trail container: a real `<nav>` landmark wrapping an `<ol>`, meant to be populated
+     * with slotted `<bs-breadcrumb>` (and, where the consumer wants a collapsed-items disclosure,
+     * `<bs-breadcrumb-overflow>`) children -- same composition-over-configuration architecture as
+     * Carbon Design System's `cds-breadcrumb`/`cds-breadcrumb-item`/`cds-breadcrumb-link`.
+     * This component is intentionally thin: it owns only the `<nav>` landmark and list semantics.
+     * Unlike an earlier `items`-array-driven design, there is no automatic collapsing here -- exactly
+     * like Carbon, the consumer decides what's visible and manually places a `<bs-breadcrumb-overflow>`
+     * wherever they want a collapsed-items disclosure. See `bs-breadcrumbs.mdx` for the consolidated
+     * docs covering all three components in this feature area.
+     * ## When to use
+     * - Showing a user's current location within a hierarchical page structure, with a path back to
+     *   its ancestors.
+     * ## When not to use
+     * - Primary in-app navigation -- use `bs-navigation-drawer`/`bs-navigation-header` instead.
+     * - A flat set of unrelated pages with no hierarchy -- breadcrumbs imply ancestry, not just history.
+     */
+    interface BsBreadcrumbs {
+        /**
+          * Accessible name for the `<nav>` landmark, via `aria-label`. Same pattern as `bs-navigation-drawer`'s `heading` prop.
+          * @default 'Breadcrumb'
+         */
+        "label": string;
+        /**
+          * Size variant, propagated as a JS property to every slotted `bs-breadcrumb`/ `bs-breadcrumb-overflow` child -- this container has no visual sizing of its own (font/spacing live on the item components, see `bs-breadcrumb.tsx`'s identical `size` prop), so propagation is the only way setting `size` here reaches every crumb. CSS custom properties can't carry an enum that switches rules on their own, which is why this is pushed via JS property instead of CSS inheritance -- same reasoning as `bs-tabs` setting `selected` directly on its slotted `bs-tab`/`bs-inline-tab` children. Re-propagated on `size` changes and whenever the slotted children change (e.g. a crumb added later).
+          * @default 'md'
+         */
+        "size": BsBreadcrumbSize1;
+    }
     /**
      * A clickable action element for the single most important action in a given context.
      * ## When to use
@@ -233,6 +412,11 @@ export namespace Components {
      * @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
      * @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
      * @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
+     * @prop --bs-button-neutral-border - Border color, `variant="neutral"`, default/disabled. Aliased to `--bs-border-neutral-container`.
+     * @prop --bs-button-neutral-border-hover - Border color, `variant="neutral"`, hover. Aliased to `--bs-border-neutral-container-hover`.
+     * @prop --bs-button-neutral-border-pressed - Border color, `variant="neutral"`, pressed. Aliased to `--bs-border-neutral-container-pressed`.
+     * @prop --bs-button-padding-x-icon-side - Horizontal padding on an edge that's adjacent to a leading/trailing icon (tighter than the plain text-only edge). Aliased to `--bs-spacing-150`.
+     * @prop --bs-button-padding-x-label-side - Horizontal padding on the opposite edge, when an icon on the other side needs compensating extra space to keep the button optically balanced. Aliased to `--bs-spacing-250`.
      */
     interface BsButton {
         /**
@@ -530,6 +714,11 @@ export namespace Components {
      * - An on/off setting that takes effect immediately (no explicit form submission) -- use `bs-switch`.
      */
     interface BsCheckbox {
+        /**
+          * Accessible name for the checkbox. Required whenever the default (label) slot is empty (e.g. a bare "select row" checkbox in a table) -- without it, the internal native `<input>` has no accessible name at all. Setting `aria-label` directly on the `<bs-checkbox>` host does NOT work for this: that attribute stays on the light-DOM host and is never forwarded into the shadow DOM by the browser, so the actual focusable element (the native `<input>` inside) stays nameless. This prop exists specifically to bridge that gap -- same pattern as `bs-button`'s and `bs-tab`'s identical `ariaLabel` prop, both of which explicitly bind it onto their own internal focusable element for the same reason.
+          * @default null
+         */
+        "ariaLabel": string | null;
         /**
           * Whether the checkbox is checked. Mutable so clicking the label/input toggles it directly. When `indeterminate` is also true, `indeterminate` wins visually (shows the minus icon) regardless of this value -- same as native checkboxes.
           * @default false
@@ -556,6 +745,36 @@ export namespace Components {
          */
         "size": BsCheckboxSize;
     }
+    /**
+     * A shape-matched loading placeholder for `bs-checkbox`, shown while the real label text isn't
+     * known yet (e.g. still being fetched from an API). Renders a small square (matching the
+     * checkbox's own box) beside a text-bar placeholder (standing in for the label), both pulsing
+     * together, sized to match `bs-checkbox`'s `sm`/`md`/`lg` box dimensions so layout doesn't shift
+     * once the real checkbox renders.
+     * ## When to use
+     * - In place of a `bs-checkbox` whose label/checked state depends on data that hasn't loaded yet.
+     * ## When not to use
+     * - While a checkbox's own change handler is running (e.g. a save request in flight) -- render the
+     *   real `bs-checkbox` itself; this component is not a saving-in-progress spinner.
+     * @prop --bs-checkbox-skeleton-size-sm - Box width/height at `size="sm"`. Aliased to
+     * `--bs-spacing-200`, mirroring `bs-checkbox`'s own `--bs-checkbox-size-sm` -- not read directly
+     * from it, since these are two separate shadow roots.
+     * @prop --bs-checkbox-skeleton-size-md - Box width/height at `size="md"`. Aliased to
+     * `--bs-spacing-250`.
+     * @prop --bs-checkbox-skeleton-size-lg - Box width/height at `size="lg"`. Aliased to
+     * `--bs-spacing-300`.
+     * @prop --bs-checkbox-skeleton-gap - Gap between the box and label placeholders. Aliased to
+     * `--bs-spacing-100`, mirroring `bs-checkbox`'s own `--bs-checkbox-gap`.
+     * @prop --bs-checkbox-skeleton-label-width - Width of the label placeholder bar. Defaults to
+     * `96px`.
+     */
+    interface BsCheckboxSkeleton {
+        /**
+          * Sizing scale, matching the `bs-checkbox` size it stands in for. Defaults to `lg`, the same (unusual) default `bs-checkbox` itself uses.
+          * @default 'lg'
+         */
+        "size": BsCheckboxSize1;
+    }
     /**
      * A chat composer input for Genie AI-style conversational interfaces: a text field
      * plus an attach button, a mic/voice-recording toggle, and a single primary action button whose
@@ -587,6 +806,7 @@ export namespace Components {
      * @prop --bs-composer-mic-icon-disabled - Aliased to `--bs-icon-disabled`.
      * @prop --bs-composer-subtle-hover - Background of the attach/mic buttons on hover (subtle-button treatment, same as `bs-button`'s `subtle` variant). Aliased to `--bs-color-neutral-container`.
      * @prop --bs-composer-subtle-pressed - Background of the attach/mic buttons when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+     * @prop --bs-composer-input-max-lines - How many lines the text field grows to before scrolling internally instead of growing further. Aliased to `10`.
      */
     interface BsComposer {
         /**
@@ -604,7 +824,7 @@ export namespace Components {
          */
         "state": BsComposerState;
         /**
-          * Current text value. Native `input` events don't cross the Shadow DOM boundary, so this component re-dispatches them as a `bsInput` custom event instead.
+          * Current text value. Native `input` events don't cross the Shadow DOM boundary, so this component re-dispatches them as a `bsInput` custom event instead.  The field is a `<textarea>` (not a single-line `<input>`) that grows with its content, up to `--bs-composer-input-max-lines` (10 by default) -- beyond that it scrolls internally instead of growing further. Setting `value` as a prop (not just typing) also re-triggers the resize, so e.g. programmatically clearing the field after submit correctly shrinks it back down.
           * @default ''
          */
         "value": string;
@@ -625,6 +845,12 @@ export namespace Components {
      * ## When not to use
      * - A toast/snackbar notification unrelated to the composer -- this component is not
      *   self-dismissing and has no positioning of its own (it's a static block, not an overlay).
+     * ## Accessibility
+     * Sets `role="status"` for `type="info"`/`type="neutral"` and `role="alert"` for
+     * `type="error"`/`type="warning"` on its own root element automatically -- no opt-in prop needed.
+     * Both roles carry implicit ARIA live-region semantics (`status` is polite, `alert` is assertive),
+     * so a screen reader announces the message as soon as this banner is inserted into the DOM,
+     * without a consumer having to remember to add `role`/`aria-live` themselves.
      * @prop --bs-composer-status-banner-radius - Corner radius of the top-left/top-right corners
      * (bottom corners are square, so this sits flush above `bs-composer`). Aliased to
      * `--bs-border-radius-150`.
@@ -739,6 +965,124 @@ export namespace Components {
          */
         "sortDirection": 'asc' | 'desc';
     }
+    /**
+     * An overlay dialog that interrupts the current flow for a focused task or confirmation.
+     * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
+     * ## When to use
+     * - Confirming a consequential action (e.g. "Confirm booking") before it takes effect.
+     * - A short, focused task that doesn't warrant navigating to a new page.
+     * ## When not to use
+     * - For non-blocking status messages — use a toast/notification instead of interrupting the user.
+     * - For a long, multi-step flow — a full page or a dedicated route is usually a better fit than a
+     *   dialog that just gets taller and taller.
+     * Two additional slots cover the Figma "Dialog" component's other states: `image` (a hero image
+     * across the top, close button floats over it instead of sitting in the header row) and `icon`
+     * (only rendered when `centered` is set, e.g. a success checkmark above a centered heading). The
+     * close button "floats" (absolute-positioned, top-right of the dialog, with its own background)
+     * whenever `centered` is true or the `image` slot has content -- otherwise it's the plain inline
+     * button in the header row next to the heading, same as before this addition.
+     */
+    interface BsDialog {
+        /**
+          * Switches to the Figma "Icon Centered" layout: heading/body text centered, the `icon` slot rendered above the heading, and the close button floating top-right of the dialog instead of inline in the header row. Doesn't hide a slotted `image` if one is also provided -- Figma's spec doesn't show the two combined, so this is unspecified rather than actively blocked. Reflected so consumers/CSS can target `bs-dialog[centered]`.
+          * @default false
+         */
+        "centered": boolean;
+        "heading"?: string;
+        /**
+          * Mutable + reflected so the component can close itself (backdrop click, Escape, close button) the same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to.
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * @default 'md'
+         */
+        "size": BsDialogSize;
+    }
+    /**
+     * A clickable, icon-only action element -- the icon-only sibling of `bs-button`, sharing the same
+     * 8 visual variants and color language, but ALWAYS rendering just a single icon, never a label.
+     * ## When to use
+     * - A compact action where the icon alone is unambiguous (e.g. a close/dismiss control, a toolbar
+     *   action) and adding a text label would take up more space than the context allows.
+     * - The same variant guidance as `bs-button` applies: `primary` for the single most important
+     *   action, `neutral`/`subtle`/`outlined` for lower-emphasis alternatives, `error` reserved for
+     *   destructive/irreversible actions (never `neutral`, per BrandSync guidance), `success`/
+     *   `warning`/`info` only when the action's own outcome is predictable and clearly communicated.
+     * ## When not to use
+     * - When the action isn't self-evident from the icon alone -- use `bs-button` with a visible label
+     *   instead, don't rely on a tooltip to compensate for an unclear icon.
+     * - For navigation between pages -- use a link/nav component instead.
+     * Because this component is always icon-only, `ariaLabel` is required for every real usage (not
+     * just conditionally, unlike `bs-button`) -- there's no visible label text to fall back on for an
+     * accessible name.
+     */
+    interface BsIconButton {
+        /**
+          * Accessible name for the button. Required -- this component is always icon-only, so there's no visible label text for screen readers to fall back on. Stencil reflects this camelCase prop to the `aria-label` HTML attribute automatically.
+          * @default null
+         */
+        "ariaLabel": string | null;
+        /**
+          * Disables the button and applies the disabled token set.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Sizing scale. `xs` (16px, an 8px icon) is a distinct, much smaller tier meant for compact chip/tag "remove" controls, not just a smaller toolbar button -- verified against a separate Figma redline (EG BrandSync UI Kit v1.5, node 20731:18427) from the one `sm`/`md`/`lg` were built against.
+          * @default 'md'
+         */
+        "size": BsIconButtonSize;
+        /**
+          * Native `<button>` type.
+          * @default 'button'
+         */
+        "type": 'button' | 'submit' | 'reset';
+        /**
+          * Visual style. Maps to the same semantic token families as `bs-button`'s `variant`. `error` is for destructive/irreversible actions per BrandSync guidance, not a stronger emphasis alternative to `primary`.
+          * @default 'primary'
+         */
+        "variant": BsIconButtonVariant;
+    }
+    /**
+     * A pill-shaped tab button -- an optional leading icon plus a text label, rendered as a real
+     * `<button>` so it participates correctly in tab order and native click/keyboard activation.
+     * Unlike `bs-tab`'s underline indicator, selection here is communicated entirely by the pill's
+     * background fill color -- there is no separate indicator element.
+     * ## When to use
+     * - As one button within a segmented-control-style tab bar, where exactly one tab is
+     *   selected/active at a time.
+     * ## When not to use
+     * - As a standalone action button -- use `bs-button` instead, `bs-inline-tab`'s visual language
+     *   (muted pill until selected/hovered) only makes sense as part of a set.
+     * `selected` is NOT self-toggling -- clicking a `bs-inline-tab` only emits `bsSelect`, it does not
+     * set its own `selected` prop, and it does not unselect any sibling tabs. Wrap your
+     * `<bs-inline-tab>` elements in `<bs-tabs type="bs-inline-tab">` -- it owns `role="tablist"` and
+     * coordinates selection (listening for `bsSelect` and setting `selected`/`false` across siblings)
+     * for you. Using `bs-inline-tab` standalone, outside a `<bs-tabs>` wrapper, still means `selected`
+     * doesn't self-toggle and `role="tablist"` isn't provided automatically -- a consumer doing that
+     * would still need to coordinate `selected` and supply `role="tablist"` manually, same as
+     * `bs-tab.mdx`/`bs-radio.mdx` document for their own components. See `bs-inline-tab.mdx`'s
+     * Accessibility section for the full requirement, including `role="tabpanel"` on the corresponding
+     * content panels.
+     */
+    interface BsInlineTab {
+        /**
+          * Accessible name for the tab. Required for icon-only usage (no visible label text via the default slot) so screen readers still announce what the tab does -- without it, an icon-only tab has no discernible name at all (axe-core flags this as a critical `button-name` violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute automatically, same as `bs-tab`'s identical prop.
+          * @default null
+         */
+        "ariaLabel": string | null;
+        /**
+          * Disables the tab: sets the native `disabled` attribute, suppresses hover/focus styling, and prevents clicking from emitting `bsSelect`.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Whether this tab is the currently active one. NOT mutable and NOT self-toggling -- see the "Known gap" note in the class JSDoc. Still reflected as an attribute so consumers/CSS can target `bs-inline-tab[selected]`.
+          * @default false
+         */
+        "selected": boolean;
+    }
     /**
      * A single-line text field with an optional label, description, and error state. Also covers a
      * range of related "field" shapes (number stepper, password reveal, date, dropdown trigger,
@@ -849,6 +1193,52 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * The BrandSync brand mark, as its own standalone component -- shared by `bs-navigation-header`
+     * and `bs-navigation-drawer`, which used to each render their own duplicated copy of this SVG
+     * (the drawer's collapsed state even faked an icon-only look by clipping the full wordmark asset
+     * down to a narrowed box, rather than using a real icon-only asset).
+     * ## When to use
+     * - Anywhere the BrandSync logo/icon needs to render: a navigation header, a nav drawer, etc.
+     * ## When not to use
+     * - The Genie AI chat panel's own brand mark -- that's a different logo (`bs-chatbot-header`'s
+     *   own inline Genie asset), not this one.
+     * `variant` mirrors Figma's "Logo" component set (node 10909:30421) `Device` property
+     * ("Desktop" / "Tab and mobile"), which was originally meant to distinguish the full lockup from
+     * the icon-only mark at different responsive breakpoints -- renamed here to
+     * `variant: 'full' | 'mark'` since that's what it actually controls (how much of the logo
+     * renders), not literally a device/breakpoint switch.
+     * `variant="custom"` is not a Figma variant at all -- it's an escape hatch for a consuming app
+     * that needs to show a DIFFERENT product's logo in the same slot (e.g. a white-labeled deployment,
+     * or a logo fetched at runtime from a service like brand.dev), via `src`/`alt`, instead of the
+     * built-in BrandSync assets. This component deliberately does NOT fetch that image itself --
+     * network calls, loading/error states, and caching are the consuming app's responsibility, same as
+     * every other component in this library (e.g. `bs-attachment` takes `imageSrc` rather than fetching
+     * an image on its own). `background` has no effect on `variant="custom"` -- a consumer's own image
+     * is already designed for whatever surface it's placed on.
+     */
+    interface BsLogo {
+        /**
+          * `variant="custom"` only: accessible alt text for the image -- a product logo is meaningful content (whose brand is this?), not decorative, so set this to something real (e.g. the product/company name). Falls back to `alt=""` (marking the image decorative to assistive tech) when unset, rather than omitting the `alt` attribute entirely -- an `<img>` with no `alt` attribute at all is a harder accessibility failure than one explicitly marked decorative, but an empty fallback is still worse than a real name, so don't rely on it. Ignored for `full`/`mark` (those already carry their own fixed `aria-label="BrandSync"`).
+          * @default null
+         */
+        "alt": string | null;
+        /**
+          * Which pre-built asset to use for `variant="full"` -- Figma ships a genuinely separate, differently-drawn dark-background asset (every wordmark path filled solid white, and the icon's outer shape a single solid-white path instead of the light version's two-path white-fill-plus-border-ring), not a CSS currentColor swap of identical paths.  `"auto"` (default) renders both assets and lets CSS pick one via `--bs-logo-asset-light-display`/`--bs-logo-asset-dark-display` (defined in `src/global/base.css`, flipped by the same `[data-theme="dark"]` attribute every other `--bs-*` token already reacts to) -- so the logo just follows the ambient theme with no wiring needed, the same way a consuming app's own dark mode already re-themes every other part of this library via ordinary CSS custom property inheritance. Set `"light"`/`"dark"` explicitly to pin one regardless of the ambient theme -- e.g. a dark sidebar that isn't otherwise dark-themed.  Has no effect on `variant="mark"`: Figma's component set only has one real designed instance of the icon-only mark (`Device="Tab and mobile"`, `Background="Default"`) -- there's no separate dark version of it, so the mark renders identically regardless of this prop.
+          * @default 'auto'
+         */
+        "background": BsLogoBackground;
+        /**
+          * `variant="custom"` only: the image URL to render (e.g. a URL your app already fetched from a logo API). Ignored for `full`/`mark`.
+          * @default null
+         */
+        "src": string | null;
+        /**
+          * How much of the logo to render. `full` is the icon + "EG BrandSync" wordmark (190.977x44 natural size); `mark` is just the icon (44x44 natural size), no wordmark; `custom` renders a consumer-supplied image via `src`/`alt` instead of a built-in BrandSync asset -- see the class doc above.
+          * @default 'full'
+         */
+        "variant": BsLogoVariant;
+    }
     /**
      * A generic dropdown/popup menu container: a rounded, elevated list of items (typically
      * `bs-menu-item` elements).
@@ -896,27 +1286,352 @@ export namespace Components {
         "disabled": boolean;
     }
     /**
-     * An overlay dialog that interrupts the current flow for a focused task or confirmation.
-     * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
+     * A left-side persistent navigation sidebar: the BrandSync logo, a "Main Menu" title with a
+     * collapse toggle, a reserved slot for a search field, and a scrollable list of nav items.
      * ## When to use
-     * - Confirming a consequential action (e.g. "Confirm booking") before it takes effect.
-     * - A short, focused task that doesn't warrant navigating to a new page.
+     * - The primary in-app navigation, shown alongside `bs-navigation-header` (typically that
+     *   header's `with-navigation-drawer` alignment, which omits its own logo since this component
+     *   already renders one -- or the reverse pairing, this drawer's own `showLogo={false}` alongside
+     *   a header that keeps its logo instead, see that prop's own docs).
      * ## When not to use
-     * - For non-blocking status messages — use a toast/notification instead of interrupting the user.
-     * - For a long, multi-step flow — a full page or a dedicated route is usually a better fit than a
-     *   modal that just gets taller and taller.
+     * - The top navigation bar itself -- use `bs-navigation-header` instead.
+     * This component renders a real `<nav>` landmark (no explicit `role` needed -- `<nav>` already
+     * carries the implicit `navigation` role), labeled via `aria-label={heading}` so the landmark
+     * still has a name even when collapsed (see below).
+     * `collapsed` narrows the drawer to a 96px icon-only rail, per Figma node 8028:135374
+     * ("Type=Collapsed"): the title text disappears, the logo swaps from the full "EG BrandSync"
+     * wordmark (`bs-logo variant="full"`) to the real icon-only mark (`bs-logo variant="mark"` -- a
+     * second, properly-designed asset, not a CSS crop of the full one) via CSS visibility toggling on
+     * both, the same `:host([collapsed])` attribute-selector pattern already used for the
+     * `search`/`search-trigger` swap below, the `search` slot is replaced by a compact built-in
+     * search-trigger button (this component can't meaningfully shrink arbitrary slotted search-field
+     * content down to icon size itself, so it emits `bsSearchClick` instead -- e.g. to open a full
+     * search overlay), and every top-level
+     * `bs-navigation-drawer-item`'s layout switches from icon-beside-label to icon-above-caption.
+     * That last part is real prop propagation, not a CSS trick: this component keeps each direct-child
+     * item's own `collapsed` prop in sync with its own (see `syncItemsCollapsed` below), the same
+     * direct-children-prop-sync approach `bs-tabs` already uses for coordinating `selected` across its
+     * `bs-tab` children. Clicking the toggle self-toggles `collapsed` (simple local UI state, not
+     * something needing cross-component coordination -- closer to `bs-switch`'s self-toggling
+     * `checked` than `bs-tab`'s non-self-toggling `selected`) and emits `bsCollapse` with the new
+     * value. The toggle's own caret icon does NOT rotate when collapsed -- Figma's collapsed mock
+     * reuses the identical left-pointing "CaretLeft" asset unchanged, confirmed by directly inspecting
+     * that state, so this deliberately does not add the same "flip on toggle" idiom the drawer item's
+     * own disclosure chevron does (that one really is an unconfirmed addition; this one was checked).
      */
-    interface BsModal {
-        "heading"?: string;
+    interface BsNavigationDrawer {
         /**
-          * Mutable + reflected so the component can close itself (backdrop click, Escape, close button) the same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to.
+          * Narrows the drawer to a 96px icon-only rail (Figma node 8028:135374). Mutable and reflected -- clicking the collapse toggle toggles this directly (self-toggling, see the class doc above for why), and this component keeps every direct-child `bs-navigation-drawer-item`'s own `collapsed` prop synced to match (see `syncItemsCollapsed`).
           * @default false
          */
-        "open": boolean;
+        "collapsed": boolean;
         /**
-          * @default 'md'
+          * Whether this drawer can be collapsed at all. `false` renders no collapse toggle/chevron -- a "fixed" side nav (Carbon's terminology: a `Fixed Side Nav` never collapses, as opposed to a rail-capable one) that's always fully expanded. `collapsed` is ignored while this is `false`.
+          * @default true
+         */
+        "collapsible": boolean;
+        /**
+          * Heading text shown next to the collapse toggle, and used as the `<nav>` landmark's `aria-label` (so the landmark keeps a name even when `collapsed` hides the visible text).
+          * @default 'Main Menu'
+         */
+        "heading": string;
+        /**
+          * Forwarded straight to both internal `bs-logo` elements' own `background` prop. Defaults to `"auto"`, which follows the ambient `[data-theme="dark"]` state automatically (see `bs-logo`'s own docs) -- so if this drawer ends up on a dark surface via the normal theming mechanism, the logo switches to its dedicated dark-background asset with no wiring needed. Set `"light"`/`"dark"` explicitly only if you've overridden `--bs-navigation-drawer-bg` to something dark yourself *without* setting `[data-theme="dark"]`, and need to pin the logo regardless of theme. Has no visible effect on the `variant="mark"` logo shown while `collapsed` (see `bs-logo`'s own docs -- there's only one real designed mark asset, it's background-agnostic).
+          * @default 'auto'
+         */
+        "logoBackground": 'auto' | 'light' | 'dark';
+        /**
+          * Whether to render the BrandSync logo at all. Defaults to `true`. This drawer is normally the one that owns the logo when paired with a `bs-navigation-header` (that header's own `with-navigation-drawer` alignment omits its logo for exactly this reason) -- but the reverse pairing works too: a header that keeps its own logo (`alignment="default"`) paired with this drawer set to `showLogo={false}`, so the brand mark only ever appears once.
+          * @default true
          */
-        "size": BsModalSize;
+        "showLogo": boolean;
+    }
+    /**
+     * A single row within a `bs-navigation-drawer`'s item list -- either a plain leaf nav item, or an
+     * `expandable` group header that discloses nested `bs-navigation-drawer-item` children.
+     * ## When to use
+     * - Every row inside a `bs-navigation-drawer`'s default slot.
+     * ## When not to use
+     * - A standalone action outside a navigation drawer -- use `bs-button`/`bs-menu-item` instead.
+     * Click behavior is mutually exclusive, based on `expandable`:
+     * - `expandable = false` (a plain leaf item): clicking only emits `bsSelect`. `selected` is NOT
+     *   self-toggling -- same non-self-toggling precedent as `bs-tab`'s `selected` (see `bs-tab.tsx`'s
+     *   class doc): coordinating which sibling row is selected needs cross-item state a
+     *   consumer/wrapper owns, not something this component can reason about on its own.
+     * - `expandable = true` (a group header, never shown with a `selected` tint): clicking toggles
+     *   `this.expanded` directly and emits `bsToggle` with the new value, and does NOT emit
+     *   `bsSelect`. This IS self-toggling, unlike `selected` above -- it's simple local disclosure
+     *   state with no cross-item coordination needed, closer to `bs-switch`'s self-toggling `checked`
+     *   than `bs-tab`'s non-self-toggling `selected`.
+     * Nesting: put child `<bs-navigation-drawer-item nested>` elements inside a parent
+     * `<bs-navigation-drawer-item expandable>` with `slot="children"`. The parent shows/hides that
+     * slot's content based on its own `expanded` prop, via a pure-CSS attribute selector (no JS
+     * visibility toggling needed, since `expanded` is reflected).
+     * `collapsed` switches this row from its normal icon-beside-label row layout to a compact
+     * icon-above-caption column (per Figma node 8028:135374, the drawer's "Type=Collapsed" state) --
+     * you don't need to set this yourself on every item: a parent `bs-navigation-drawer` keeps its own
+     * top-level items' `collapsed` prop in sync with its own `collapsed` state automatically (see
+     * `bs-navigation-drawer.tsx`'s `syncItemsCollapsed`, the same direct-children-prop-sync approach
+     * `bs-tabs` uses for coordinating `selected` across its own `bs-tab` children). It's still a public
+     * prop so a standalone item (or this component's own stories) can be demoed without the parent.
+     */
+    interface BsNavigationDrawerItem {
+        /**
+          * Optional accessible name override. Not required for `collapsed` rows -- unlike an icon-only button, the label caption stays visible (just restyled smaller, under the icon) in that mode per Figma, so the button's default accessible-name computation (its own text content) already works. Set this if you want a fuller/different name than the visible caption (e.g. truncated captions, or matching `bs-switch`/`bs-slider`'s `ariaLabel` convention for consistency).
+          * @default null
+         */
+        "ariaLabel": string | null;
+        /**
+          * Switches this row to the compact icon-above-caption column layout used when its parent `bs-navigation-drawer` is `collapsed` (see the class doc above). Reflected so `bs-navigation-drawer-item[collapsed]` is CSS-targetable. Also forces `expandable` rows' chevron and `children` slot to stay hidden regardless of `expanded` -- Figma's collapsed rail never shows a nested tree.
+          * @default false
+         */
+        "collapsed": boolean;
+        /**
+          * Renders this row as a disclosure/group header (trailing chevron, self-toggling `expanded`, `bsToggle` instead of `bsSelect` on click) instead of a plain navigable leaf item. See the class doc above for the full click-behavior split.
+          * @default false
+         */
+        "expandable": boolean;
+        /**
+          * Whether an `expandable` row's `children` slot is shown. Mutable and reflected -- clicking an `expandable` row toggles this directly (self-toggling, unlike `selected` above), and CSS shows/hides the `children` slot wrapper based on the reflected attribute. Ignored when `expandable` is false.
+          * @default false
+         */
+        "expanded": boolean;
+        /**
+          * Marks this as a child row nested under an `expandable` parent (via `slot="children"`) -- deepens the left indent and stops reserving `icon` slot space entirely (Figma's nested rows never have icons).
+          * @default false
+         */
+        "nested": boolean;
+        /**
+          * Tints the row's background/text to indicate it's the current destination. NOT self-toggling -- see the class doc above for why. Ignored (never applied) when `expandable` is true. Reflected so consumers/CSS can target `bs-navigation-drawer-item[selected]`.
+          * @default false
+         */
+        "selected": boolean;
+    }
+    /**
+     * The top-level navigation bar for a page: the BrandSync logo plus two consumer-provided slots
+     * for menu/action content (e.g. `bs-button`/`bs-icon-button` elements).
+     * ## When to use
+     * - The persistent top bar of an application, above the page content.
+     * ## When not to use
+     * - The header of a Genie AI chat panel -- use `bs-chatbot-header` instead, which is purpose-built
+     *   for that narrower layout and its own fixed action buttons.
+     * `alignment` controls both whether the logo renders and how the two slots are laid out:
+     * - `default` (default): logo on the left, `left` slot content immediately after it, `right` slot
+     *   content pushed to the far right.
+     * - `center`: logo and `right` slot both grow equally (`flex: 1`), which centers the `left` slot
+     *   content in the middle of the bar.
+     * - `with-navigation-drawer`: no logo at all (this variant assumes a nav-drawer toggle is the
+     *   leftmost thing on the page instead) -- `left` slot content starts at the bar's own left edge,
+     *   `right` slot content pushed to the far right.
+     */
+    interface BsNavigationHeader {
+        /**
+          * Controls whether the logo renders and how the `left`/`right` slots are laid out -- see the class doc above for the three variants' exact behavior.
+          * @default 'default'
+         */
+        "alignment": BsNavigationHeaderAlignment;
+        /**
+          * Accessible label for the header landmark, useful when a page has more than one `<header>` (e.g. this one plus a page-specific sub-header) and screen reader users need to tell them apart in the landmarks list.
+          * @default null
+         */
+        "ariaLabel": string | null;
+        /**
+          * Forwarded straight to the internal `bs-logo`'s own `background` prop. Defaults to `"auto"`, which follows the ambient `[data-theme="dark"]` state automatically (see `bs-logo`'s own docs) -- so if this bar ends up on a dark surface via the normal theming mechanism, the logo switches to its dedicated dark-background asset with no wiring needed. Set `"light"`/`"dark"` explicitly only if you've overridden `--bs-navigation-header-bg` to something dark yourself *without* setting `[data-theme="dark"]`, and need to pin the logo regardless of theme.
+          * @default 'auto'
+         */
+        "logoBackground": 'auto' | 'light' | 'dark';
+        /**
+          * Fragment/URL to jump to when the "Skip to main content" link is activated (e.g. `#main-content`, matching an id on your page's main landmark). Unset by default -- the link is opt-in rather than pointing at a guessed default id, since a skip link to a target that doesn't exist on the consumer's page is worse than no skip link at all (it silently does nothing when activated). Set this to the same id your page's `<main>` (or equivalent) already has to enable it.
+          * @default null
+         */
+        "skipToContentHref": string | null;
+        /**
+          * Link text for the skip-to-content link. Only rendered when `skipToContentHref` is set.
+          * @default 'Skip to main content'
+         */
+        "skipToContentLabel": string;
+    }
+    /**
+     * A numbered page control -- previous/next chevrons, page-number buttons, and `...` overflow for
+     * large page counts. Matches the Figma "Pagination" component's "Default" type (the classic
+     * numbered pagination); its other type ("jumper" -- a rows-per-page dropdown plus a page-jump
+     * input) is a structurally different composite widget and isn't covered by this component.
+     * `totalPages`/`currentPage` drive everything -- this computes which page numbers to show and
+     * where to collapse into `...` itself, the consumer never builds the button list by hand.
+     * ## When to use
+     * - Paging through a large, ordered result set (a table, a search results list) where jumping
+     *   directly to a specific page number is useful.
+     * ## When not to use
+     * - Infinite-scroll or "load more" patterns -- those don't have a fixed, addressable page number.
+     * - A huge page count where users realistically only ever go forward/back one page at a time --
+     *   plain prev/next controls (no numbers) are simpler there.
+     */
+    interface BsPagination {
+        /**
+          * The active page (1-indexed). Mutable + reflected so clicking a page button updates it directly, the same way `bs-modal`'s `open` self-manages, while `bsPageChange` still fires for the consumer to react to (e.g. fetching that page's data).
+          * @default 1
+         */
+        "currentPage": number;
+        /**
+          * Accessible name for the next-page button.
+          * @default 'Next page'
+         */
+        "nextLabel": string;
+        /**
+          * Accessible name for the previous-page button.
+          * @default 'Previous page'
+         */
+        "previousLabel": string;
+        /**
+          * How many page numbers to show on each side of the current page before collapsing the rest into `...`. `1` (the default) reproduces the Figma spec's example exactly (page 1 of 12 shows `1 2 3 ... 12`).
+          * @default 1
+         */
+        "siblingCount": number;
+        /**
+          * Total number of pages. Must be a positive integer -- there's always at least one page.
+          * @default 1
+         */
+        "totalPages": number;
+    }
+    /**
+     * A single radio button with its label, for one mutually-exclusive choice within a group.
+     * ## When to use
+     * - One option within a set of mutually-exclusive choices, where all options should stay visible
+     *   (a radio group).
+     * ## When not to use
+     * - An independent, non-exclusive binary choice, or one item in a set of independent choices --
+     *   use `bs-checkbox` instead.
+     * - An on/off setting that takes effect immediately (no explicit form submission) -- use `bs-switch`.
+     */
+    interface BsRadio {
+        /**
+          * Whether the radio is checked. Mutable so clicking the label/input sets it directly.
+          * @default false
+         */
+        "checked": boolean;
+        /**
+          * Disables the radio: sets the native `disabled` attribute, suppresses hover/focus styling, and prevents toggling.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * The native radio input's `name` attribute. Passed straight through to the native input inside. NOTE: because each `bs-radio` renders its own shadow root, native `<input type="radio">` mutual-exclusion grouping (which the HTML spec scopes to a single DOM tree) does NOT extend across separate `bs-radio` instances sharing the same `name` -- checking one will not natively uncheck another. Within a single instance this still behaves like a normal radio input. See bs-radio.mdx's Accessibility section for this known gap; consumers building a group currently need to manage mutual exclusivity themselves (e.g. via `bsChange`) until a `bs-radio-group` wrapper exists.
+         */
+        "name": string;
+        /**
+          * The native radio input's `value` attribute -- read from `event.target.value`, or used when wiring the group up to a form.
+         */
+        "value": string;
+    }
+    /**
+     * A slider for picking a single numeric value (`type="default"`), a value snapped to evenly
+     * spaced ticks (`type="segmented"`), or a min/max pair (`type="range"`) from within a bounded
+     * `min`/`max` range.
+     * ## When to use
+     * - A numeric value that's easiest to reason about relative to its bounds (volume, brightness,
+     *   a price range) rather than typed digit-by-digit.
+     * - `type="segmented"` when only a fixed number of discrete stops make sense (e.g. a 5-star
+     *   rating-like scale) but a visual track is still preferable to discrete buttons.
+     * - `type="range"` for picking a min/max pair (e.g. a price range filter) with two thumbs.
+     * ## When not to use
+     * - A precise value where mis-dragging by a pixel matters more than the at-a-glance bounds --
+     *   use `bs-input[type="number"]` instead.
+     * - A small, fixed set of mutually exclusive choices -- use a radio group instead.
+     */
+    interface BsSlider {
+        /**
+          * Accessible name for the slider's native range input(s). Required whenever `showLabel` is `false` (a bare track with no visible "Label" text) -- without it, the internal native `<input>` has no accessible name at all. Setting `aria-label` directly on the `<bs-slider>` host does NOT work for this: that attribute stays on the light-DOM host and is never forwarded into the shadow DOM by the browser. Same pattern/reasoning as `bs-switch`'s and `bs-checkbox`'s identical `ariaLabel` prop. For `type="range"`, this labels the lower-bound thumb; the upper-bound thumb gets `"${ariaLabel} end"` (or `"End value"` when `ariaLabel` is unset).
+          * @default null
+         */
+        "ariaLabel": string | null;
+        /**
+          * Disables the slider: sets the native `disabled` attribute on the range input(s), suppresses hover/focus/drag styling and the value tooltip, and prevents interaction.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Label text shown above the track when `showLabel` is set.
+          * @default 'Label'
+         */
+        "label": string;
+        /**
+          * Maximum selectable value, for all `type`s.
+          * @default 100
+         */
+        "max": number;
+        /**
+          * Minimum selectable value, for all `type`s.
+          * @default 0
+         */
+        "min": number;
+        /**
+          * Number of equal divisions marked by tick lines along the track, for `type="segmented"` only. The first tick (at the very start of the track) is rendered with `opacity: 0` to keep the tick spacing math consistent while not visually doubling up with the track's own start edge -- this matches the design spec, not a bug.
+          * @default 10
+         */
+        "segments": number;
+        /**
+          * Shows/hides the "Label" text and editable percentage field(s) above the track, and the static min/max bound labels flanking it. When `false`, only the bare track (and its knob/knobs) renders.
+          * @default true
+         */
+        "showLabel": boolean;
+        /**
+          * Step size between selectable values. For `type="segmented"`, the effective step is derived from `(max - min) / segments` instead, so the thumb always snaps to a tick.
+          * @default 1
+         */
+        "step": number;
+        /**
+          * Which slider shape to render. `range` uses two thumbs (`valueStart`/`valueEnd`); `default` and `segmented` use one thumb (`value`). `segmented` additionally draws `segments` tick marks along the track.
+          * @default 'default'
+         */
+        "type": BsSliderType;
+        /**
+          * Current value for `type="default"`/`type="segmented"`. Ignored for `type="range"` -- use `valueStart`/`valueEnd` instead. Mutable so dragging the thumb updates it directly.
+          * @default 0
+         */
+        "value": number;
+        /**
+          * Upper thumb's value for `type="range"`. Defaults to `max` when unset. Mutable so dragging the thumb updates it directly.
+         */
+        "valueEnd"?: number;
+        /**
+          * Lower thumb's value for `type="range"`. Defaults to `min` when unset. Mutable so dragging the thumb updates it directly.
+         */
+        "valueStart"?: number;
+    }
+    /**
+     * A transient status bar for confirming the result of an action (e.g. "Files uploaded
+     * successfully.") -- an icon (or loading spinner), a message, an optional action, and a close
+     * button.
+     * This component only renders the bar itself -- it doesn't manage its own visibility, timing, or
+     * stacking. A consumer (typically a small "toast manager" utility) creates one per message and
+     * removes it from the DOM again, whether on a timer or on `bsDismiss`. Figma's spec doesn't show
+     * auto-dismiss timing at all (it's a static visual spec), so this deliberately doesn't invent one.
+     * The icon is always the same checkmark glyph across every `variant`, just recolored -- matching
+     * the Figma spec exactly, even though a checkmark for `variant="error"` reads a little oddly
+     * semantically. Worth revisiting with severity-specific icons (warning triangle, error circle,
+     * etc.) if the design updates to specify them.
+     * ## When to use
+     * - Confirming the outcome of an action that just happened (save succeeded, upload failed) without
+     *   interrupting the user's flow.
+     * ## When not to use
+     * - For a response that requires the user to make a decision before continuing -- use `bs-dialog`.
+     * - For persistent, always-visible status -- a snackbar is inherently transient.
+     */
+    interface BsSnackbar {
+        /**
+          * Label for the optional action button (e.g. "Undo", "Retry"). Omit this prop entirely to render no action button at all -- its presence, not a boolean flag, is what shows it.
+         */
+        "actionLabel"?: string;
+        /**
+          * Replaces the checkmark icon with a spinning loading indicator, for a message describing in-progress work (e.g. "Uploading files...") rather than a completed result.
+          * @default false
+         */
+        "loading": boolean;
+        /**
+          * Color/semantic variant. `default` is the neutral (dark, inverse-surface) bar Figma shows as the baseline; `info`/`warning`/`success`/`error` use their matching container/text tokens.
+          * @default 'default'
+         */
+        "variant": BsSnackbarVariant;
     }
     /**
      * A single citation row inside `bs-chatbot-sources-drawer` -- a file icon + filename on the first
@@ -956,16 +1671,117 @@ export namespace Components {
         /**
           * The system/app the document came from (e.g. "HoltePortalen").
          */
-        "sourceName"?: string;
+        "sourceName"?: string;
+        /**
+          * `target` used when `href` is set.
+          * @default '_blank'
+         */
+        "target": string;
+        /**
+          * The document's version label (e.g. "v3.2"). Omit if the source has no version.
+         */
+        "version"?: string;
+    }
+    /**
+     * A toggle switch for an on/off setting that takes effect immediately (no explicit form
+     * submission required).
+     * ## When to use
+     * - A binary setting that applies right away (e.g. "Enable notifications", "Dark mode").
+     * ## When not to use
+     * - A binary choice that's part of a form submitted later, or one item within a group of
+     *   independent choices -- use `bs-checkbox` instead.
+     * - A single mutually-exclusive choice from a set -- use a radio group instead.
+     */
+    interface BsSwitch {
+        /**
+          * Accessible name for the switch. Required whenever the default (label) slot is empty (e.g. a bare "enabled" switch in a table row) -- without it, the internal native `<input>` has no accessible name at all. Setting `aria-label` directly on the `<bs-switch>` host does NOT work for this: that attribute stays on the light-DOM host and is never forwarded into the shadow DOM by the browser, so the actual focusable element (the native `<input>` inside) stays nameless. This prop exists specifically to bridge that gap -- same pattern as `bs-button`'s and `bs-checkbox`'s identical `ariaLabel` prop, both of which explicitly bind it onto their own internal focusable element for the same reason.
+          * @default null
+         */
+        "ariaLabel": string | null;
+        /**
+          * Whether the switch is on. Mutable so clicking the label/input toggles it directly, and reflected so consumers can target `bs-switch[checked]` via CSS.
+          * @default false
+         */
+        "checked": boolean;
+        /**
+          * Disables the switch: sets the native `disabled` attribute, suppresses hover/focus styling, and prevents toggling.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Sizing scale. Controls the track's width/height and the knob's diameter.
+          * @default 'lg'
+         */
+        "size": BsSwitchSize;
+    }
+    /**
+     * A single tab button -- an optional icon plus a text label, rendered as a real `<button>` so it
+     * participates correctly in tab order and native click/keyboard activation.
+     * ## When to use
+     * - As one button within a tab bar, where exactly one tab is selected/active at a time.
+     * ## When not to use
+     * - As a standalone action button -- use `bs-button` instead, `bs-tab`'s visual language (muted
+     *   until selected/hovered, underline indicator) only makes sense as part of a set.
+     * `selected` is NOT self-toggling -- clicking a `bs-tab` only emits `bsSelect`, it does not set its
+     * own `selected` prop, and it does not unselect any sibling tabs. Wrap your `<bs-tab>` elements in
+     * `<bs-tabs type="bs-tab">` -- it owns `role="tablist"` and coordinates selection (listening for
+     * `bsSelect` and setting `selected`/`false` across siblings) for you. Using `bs-tab` standalone,
+     * outside a `<bs-tabs>` wrapper, still means `selected` doesn't self-toggle and `role="tablist"`
+     * isn't provided automatically -- a consumer doing that would still need to coordinate `selected`
+     * and supply `role="tablist"` manually, same as `bs-radio.mdx` documents for `bs-radio`'s missing
+     * `bs-radio-group`. See `bs-tab.mdx`'s Accessibility section for the full requirement, including
+     * `role="tabpanel"` on the corresponding content panels.
+     */
+    interface BsTab {
+        /**
+          * Accessible name for the tab. Required for icon-only usage (no visible label text via the default slot) so screen readers still announce what the tab does -- without it, an icon-only tab has no discernible name at all (axe-core flags this as a critical `button-name` violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute automatically, same as `bs-button`'s identical prop.
+          * @default null
+         */
+        "ariaLabel": string | null;
+        /**
+          * Disables the tab: sets the native `disabled` attribute, suppresses hover/focus styling, and prevents clicking from emitting `bsSelect`.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Where the icon sits relative to the label, when both `icon` and the default slot are populated. Ignored for icon-only/text-only layouts.
+          * @default 'start'
+         */
+        "iconPosition": BsTabIconPosition;
+        /**
+          * Whether this tab is the currently active one. NOT mutable and NOT self-toggling -- see the "Known gap" note in the class JSDoc. Still reflected as an attribute so consumers/CSS can target `bs-tab[selected]`.
+          * @default false
+         */
+        "selected": boolean;
+    }
+    /**
+     * A tab-group wrapper: owns `role="tablist"` and coordinates selection across its slotted
+     * `<bs-tab>` or `<bs-inline-tab>` children, so consumers no longer have to hand-roll this.
+     * `bs-tab.mdx`/`bs-inline-tab.mdx` previously documented this coordination -- listening for
+     * `bsSelect` and setting `selected`/`false` on siblings, plus supplying `role="tablist"` on
+     * whatever element groups the tabs -- as a "Known gap"/manual consumer responsibility. This
+     * component is that wrapper: it renders the `role="tablist"` element and listens for `bsSelect`
+     * itself. Using `<bs-tab>`/`<bs-inline-tab>` standalone, outside a `<bs-tabs>` wrapper, still means
+     * `selected` doesn't self-toggle -- a consumer doing that would still need to coordinate `selected`
+     * manually -- but that's no longer the first recommended path.
+     * ## When to use
+     * - Wrapping a set of `<bs-tab>` (underline style) or `<bs-inline-tab>` (pill style) elements that
+     *   should behave as a single-selection tab bar.
+     * ## When not to use
+     * - For a single, standalone tab button not participating in a group -- use `bs-tab`/`bs-inline-tab`
+     *   directly.
+     */
+    interface BsTabs {
         /**
-          * `target` used when `href` is set.
-          * @default '_blank'
+          * Layout direction of the tab bar itself. Sets `aria-orientation` on the internal wrapper and switches `flex-direction`.
+          * @default 'horizontal'
          */
-        "target": string;
+        "orientation": BsTabsOrientation;
         /**
-          * The document's version label (e.g. "v3.2"). Omit if the source has no version.
+          * Which tab-button family this group wraps. Governs the wrapper's own visual treatment (gap-only for `bs-tab`, a filled pill bar for `bs-inline-tab`). Not reflected as an attribute -- nothing external needs to target it via CSS attribute selector, it only drives internal class names.
+          * @default 'bs-tab'
          */
-        "version"?: string;
+        "type": BsTabsType;
     }
     /**
      * A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
@@ -1042,6 +1858,14 @@ export interface BsDataTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsDataTableElement;
 }
+export interface BsDialogCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsDialogElement;
+}
+export interface BsInlineTabCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsInlineTabElement;
+}
 export interface BsInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsInputElement;
@@ -1050,14 +1874,42 @@ export interface BsMenuItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsMenuItemElement;
 }
-export interface BsModalCustomEvent<T> extends CustomEvent<T> {
+export interface BsNavigationDrawerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLBsModalElement;
+    target: HTMLBsNavigationDrawerElement;
+}
+export interface BsNavigationDrawerItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsNavigationDrawerItemElement;
+}
+export interface BsPaginationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsPaginationElement;
+}
+export interface BsRadioCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsRadioElement;
+}
+export interface BsSliderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsSliderElement;
+}
+export interface BsSnackbarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsSnackbarElement;
 }
 export interface BsSourceLinkCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsSourceLinkElement;
 }
+export interface BsSwitchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsSwitchElement;
+}
+export interface BsTabCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsTabElement;
+}
 declare global {
     /**
      * A centered caption disclaimer for Genie AI surfaces, e.g. "AI can make mistakes. Please verify
@@ -1148,7 +2000,9 @@ declare global {
     /**
      * A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
      * with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
-     * a hover/focus-revealed remove button.
+     * a hover/focus-revealed remove button (a `bs-icon-button` with `size="xs"` `variant="neutral"` --
+     * the same 16x16px compact tier `bs-icon-button` documents as meant for exactly this kind of
+     * chip/tag "remove" control).
      * ## When to use
      * - Rendered by the consuming app for each file a user has attached to a Genie AI chat message,
      *   typically alongside or inside `bs-composer`.
@@ -1165,14 +2019,6 @@ declare global {
      * @prop --bs-attachment-badge-bg-pdf - PDF badge background. Aliased to `--bs-badge-bg-error`.
      * @prop --bs-attachment-badge-bg-document - Document badge background. Aliased to
      * `--bs-badge-bg-info`.
-     * @prop --bs-attachment-remove-bg - Remove button (neutral icon button) default background.
-     * Aliased to `--bs-button-neutral-container`.
-     * @prop --bs-attachment-remove-hover - Remove button hover background. Aliased to
-     * `--bs-button-neutral-hover`.
-     * @prop --bs-attachment-remove-pressed - Remove button active/pressed background. Aliased to
-     * `--bs-button-neutral-pressed`.
-     * @prop --bs-attachment-remove-focus - Remove button focus outline color. Aliased to
-     * `--bs-border-neutral-focus`.
      */
     interface HTMLBsAttachmentElement extends Components.BsAttachment, HTMLStencilElement {
         addEventListener<K extends keyof HTMLBsAttachmentElementEventMap>(type: K, listener: (this: HTMLBsAttachmentElement, ev: BsAttachmentCustomEvent<HTMLBsAttachmentElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1214,6 +2060,31 @@ declare global {
         prototype: HTMLBsAttachmentListElement;
         new (): HTMLBsAttachmentListElement;
     };
+    /**
+     * A circular representation of a person or entity -- a photo, initials, or (as a fallback when
+     * neither is available) a generic user-silhouette icon.
+     * ## When to use
+     * - Representing a specific user or account: in a header, a comment, a member list, etc.
+     * - `type="initials"` when a photo isn't available but a name is (e.g. "Sam Lee" -> "SL").
+     * - `type="icon"` (the default) as the generic fallback when neither a photo nor a name/initials
+     *   is available yet.
+     * ## When not to use
+     * - A company/brand logo -- use `bs-logo` instead.
+     * This component is decorative/informational by default, not an interactive control -- it renders
+     * a plain `<span>`/`<img>`, not a `<button>`. Figma's own component set includes hover/focused/
+     * pressed states (e.g. for an account-switcher trigger use case), which this implements as real
+     * `:hover`/`:focus-visible`/`:active` CSS on the host itself -- so wrapping this in your own
+     * `<button>`, or setting `tabindex` and a click handler on the `<bs-avatar>` element directly, gets
+     * the matching visual treatment for free with no extra wiring. Left genuinely non-interactive
+     * (no implicit role/tabindex of its own) so it doesn't misrepresent a purely decorative avatar
+     * (e.g. next to a comment) as a control when it isn't one.
+     */
+    interface HTMLBsAvatarElement extends Components.BsAvatar, HTMLStencilElement {
+    }
+    var HTMLBsAvatarElement: {
+        prototype: HTMLBsAvatarElement;
+        new (): HTMLBsAvatarElement;
+    };
     /**
      * A small status or category pill, usually paired with a label or list item.
      * ## When to use
@@ -1229,6 +2100,82 @@ declare global {
         prototype: HTMLBsBadgeElement;
         new (): HTMLBsBadgeElement;
     };
+    /**
+     * A single crumb within a `<bs-breadcrumbs>` trail: a leading separator icon plus either a link,
+     * plain text, or the current-page label, depending on `current`/`href`.
+     * Rendering follows the W3C ARIA Authoring Practices breadcrumb pattern
+     * (https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/): the current page is marked
+     * `aria-current="page"` and is never a link -- this holds even when `href` is also set, unlike
+     * Carbon Design System's `cds-breadcrumb-item`, which allows a link on the current item.
+     * Sets `role="listitem"` on the host, mirroring Carbon's own `CDSBreadcrumbItem.connectedCallback()`
+     * -- since this is a custom-element child of a real `<ol>` rather than a real `<li>`, the
+     * accessibility tree needs this explicit role to preserve the list's semantics.
+     * ## When to use
+     * - As one crumb inside a `<bs-breadcrumbs>` trail.
+     * ## When not to use
+     * - Standalone, outside a `<bs-breadcrumbs>` wrapper -- its `<ol>`/`<nav>` context and
+     *   first-child-aware separator hiding depend on that parent structure.
+     */
+    interface HTMLBsBreadcrumbElement extends Components.BsBreadcrumb, HTMLStencilElement {
+    }
+    var HTMLBsBreadcrumbElement: {
+        prototype: HTMLBsBreadcrumbElement;
+        new (): HTMLBsBreadcrumbElement;
+    };
+    /**
+     * A manually-placed collapsed-items disclosure for a `<bs-breadcrumbs>` trail: a leading separator
+     * plus an icon-only ellipsis button that reveals a `bs-menu` popup listing every hidden crumb.
+     * `items` is JS-property-only -- must be set as a JS property (`el.items = [...]`), not an HTML
+     * attribute, since attributes can only carry strings. See CONVENTIONS.md.
+     * Unlike an earlier `bs-breadcrumbs`-owned automatic `maxItems` collapse, this component does no
+     * collapsing logic itself -- the consumer decides which crumbs to hide and places this element
+     * wherever they want the disclosure, exactly matching Carbon Design System's own approach (Carbon
+     * doesn't auto-collapse breadcrumbs either; a consumer there manually decides what's visible).
+     * Hidden items with an `href` render as real `<a href>` rows inside the popup, not `bs-menu-item`
+     * (which renders a `<button>`) -- this matters because consuming apps commonly use client-side
+     * routers that intercept clicks on real `<a>` tags to do `preventDefault` + push-state navigation.
+     * Rendering hidden links any other way (e.g. `window.location`) would silently break client-side
+     * routing for hidden crumbs while working fine for visible ones. Hidden items without an `href`
+     * render as plain non-interactive text, matching how `bs-breadcrumb` itself handles link vs.
+     * no-link crumbs.
+     * Sets `role="listitem"` on the host, mirroring Carbon's own `CDSBreadcrumbItem.connectedCallback()`
+     * -- since this is a custom-element child of a real `<ol>` rather than a real `<li>`, the
+     * accessibility tree needs this explicit role to preserve the list's semantics.
+     * ## When to use
+     * - Inside a `<bs-breadcrumbs>` trail, wherever the consumer wants an interactive disclosure for
+     *   crumbs they've chosen not to render directly.
+     * ## When not to use
+     * - As an automatic collapsing mechanism -- there is none; the consumer decides what's hidden.
+     */
+    interface HTMLBsBreadcrumbOverflowElement extends Components.BsBreadcrumbOverflow, HTMLStencilElement {
+    }
+    var HTMLBsBreadcrumbOverflowElement: {
+        prototype: HTMLBsBreadcrumbOverflowElement;
+        new (): HTMLBsBreadcrumbOverflowElement;
+    };
+    /**
+     * A breadcrumb trail container: a real `<nav>` landmark wrapping an `<ol>`, meant to be populated
+     * with slotted `<bs-breadcrumb>` (and, where the consumer wants a collapsed-items disclosure,
+     * `<bs-breadcrumb-overflow>`) children -- same composition-over-configuration architecture as
+     * Carbon Design System's `cds-breadcrumb`/`cds-breadcrumb-item`/`cds-breadcrumb-link`.
+     * This component is intentionally thin: it owns only the `<nav>` landmark and list semantics.
+     * Unlike an earlier `items`-array-driven design, there is no automatic collapsing here -- exactly
+     * like Carbon, the consumer decides what's visible and manually places a `<bs-breadcrumb-overflow>`
+     * wherever they want a collapsed-items disclosure. See `bs-breadcrumbs.mdx` for the consolidated
+     * docs covering all three components in this feature area.
+     * ## When to use
+     * - Showing a user's current location within a hierarchical page structure, with a path back to
+     *   its ancestors.
+     * ## When not to use
+     * - Primary in-app navigation -- use `bs-navigation-drawer`/`bs-navigation-header` instead.
+     * - A flat set of unrelated pages with no hierarchy -- breadcrumbs imply ancestry, not just history.
+     */
+    interface HTMLBsBreadcrumbsElement extends Components.BsBreadcrumbs, HTMLStencilElement {
+    }
+    var HTMLBsBreadcrumbsElement: {
+        prototype: HTMLBsBreadcrumbsElement;
+        new (): HTMLBsBreadcrumbsElement;
+    };
     /**
      * A clickable action element for the single most important action in a given context.
      * ## When to use
@@ -1248,6 +2195,11 @@ declare global {
      * @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
      * @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
      * @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
+     * @prop --bs-button-neutral-border - Border color, `variant="neutral"`, default/disabled. Aliased to `--bs-border-neutral-container`.
+     * @prop --bs-button-neutral-border-hover - Border color, `variant="neutral"`, hover. Aliased to `--bs-border-neutral-container-hover`.
+     * @prop --bs-button-neutral-border-pressed - Border color, `variant="neutral"`, pressed. Aliased to `--bs-border-neutral-container-pressed`.
+     * @prop --bs-button-padding-x-icon-side - Horizontal padding on an edge that's adjacent to a leading/trailing icon (tighter than the plain text-only edge). Aliased to `--bs-spacing-150`.
+     * @prop --bs-button-padding-x-label-side - Horizontal padding on the opposite edge, when an icon on the other side needs compensating extra space to keep the button optically balanced. Aliased to `--bs-spacing-250`.
      */
     interface HTMLBsButtonElement extends Components.BsButton, HTMLStencilElement {
     }
@@ -1569,6 +2521,35 @@ declare global {
         prototype: HTMLBsCheckboxElement;
         new (): HTMLBsCheckboxElement;
     };
+    /**
+     * A shape-matched loading placeholder for `bs-checkbox`, shown while the real label text isn't
+     * known yet (e.g. still being fetched from an API). Renders a small square (matching the
+     * checkbox's own box) beside a text-bar placeholder (standing in for the label), both pulsing
+     * together, sized to match `bs-checkbox`'s `sm`/`md`/`lg` box dimensions so layout doesn't shift
+     * once the real checkbox renders.
+     * ## When to use
+     * - In place of a `bs-checkbox` whose label/checked state depends on data that hasn't loaded yet.
+     * ## When not to use
+     * - While a checkbox's own change handler is running (e.g. a save request in flight) -- render the
+     *   real `bs-checkbox` itself; this component is not a saving-in-progress spinner.
+     * @prop --bs-checkbox-skeleton-size-sm - Box width/height at `size="sm"`. Aliased to
+     * `--bs-spacing-200`, mirroring `bs-checkbox`'s own `--bs-checkbox-size-sm` -- not read directly
+     * from it, since these are two separate shadow roots.
+     * @prop --bs-checkbox-skeleton-size-md - Box width/height at `size="md"`. Aliased to
+     * `--bs-spacing-250`.
+     * @prop --bs-checkbox-skeleton-size-lg - Box width/height at `size="lg"`. Aliased to
+     * `--bs-spacing-300`.
+     * @prop --bs-checkbox-skeleton-gap - Gap between the box and label placeholders. Aliased to
+     * `--bs-spacing-100`, mirroring `bs-checkbox`'s own `--bs-checkbox-gap`.
+     * @prop --bs-checkbox-skeleton-label-width - Width of the label placeholder bar. Defaults to
+     * `96px`.
+     */
+    interface HTMLBsCheckboxSkeletonElement extends Components.BsCheckboxSkeleton, HTMLStencilElement {
+    }
+    var HTMLBsCheckboxSkeletonElement: {
+        prototype: HTMLBsCheckboxSkeletonElement;
+        new (): HTMLBsCheckboxSkeletonElement;
+    };
     interface HTMLBsComposerElementEventMap {
         "bsInput": string;
         "bsSubmit": void;
@@ -1608,6 +2589,7 @@ declare global {
      * @prop --bs-composer-mic-icon-disabled - Aliased to `--bs-icon-disabled`.
      * @prop --bs-composer-subtle-hover - Background of the attach/mic buttons on hover (subtle-button treatment, same as `bs-button`'s `subtle` variant). Aliased to `--bs-color-neutral-container`.
      * @prop --bs-composer-subtle-pressed - Background of the attach/mic buttons when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+     * @prop --bs-composer-input-max-lines - How many lines the text field grows to before scrolling internally instead of growing further. Aliased to `10`.
      */
     interface HTMLBsComposerElement extends Components.BsComposer, HTMLStencilElement {
         addEventListener<K extends keyof HTMLBsComposerElementEventMap>(type: K, listener: (this: HTMLBsComposerElement, ev: BsComposerCustomEvent<HTMLBsComposerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1638,6 +2620,12 @@ declare global {
      * ## When not to use
      * - A toast/snackbar notification unrelated to the composer -- this component is not
      *   self-dismissing and has no positioning of its own (it's a static block, not an overlay).
+     * ## Accessibility
+     * Sets `role="status"` for `type="info"`/`type="neutral"` and `role="alert"` for
+     * `type="error"`/`type="warning"` on its own root element automatically -- no opt-in prop needed.
+     * Both roles carry implicit ARIA live-region semantics (`status` is polite, `alert` is assertive),
+     * so a screen reader announces the message as soon as this banner is inserted into the DOM,
+     * without a consumer having to remember to add `role`/`aria-live` themselves.
      * @prop --bs-composer-status-banner-radius - Corner radius of the top-left/top-right corners
      * (bottom corners are square, so this sits flush above `bs-composer`). Aliased to
      * `--bs-border-radius-150`.
@@ -1727,6 +2715,103 @@ declare global {
         prototype: HTMLBsDataTableElement;
         new (): HTMLBsDataTableElement;
     };
+    interface HTMLBsDialogElementEventMap {
+        "bsClose": void;
+    }
+    /**
+     * An overlay dialog that interrupts the current flow for a focused task or confirmation.
+     * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
+     * ## When to use
+     * - Confirming a consequential action (e.g. "Confirm booking") before it takes effect.
+     * - A short, focused task that doesn't warrant navigating to a new page.
+     * ## When not to use
+     * - For non-blocking status messages — use a toast/notification instead of interrupting the user.
+     * - For a long, multi-step flow — a full page or a dedicated route is usually a better fit than a
+     *   dialog that just gets taller and taller.
+     * Two additional slots cover the Figma "Dialog" component's other states: `image` (a hero image
+     * across the top, close button floats over it instead of sitting in the header row) and `icon`
+     * (only rendered when `centered` is set, e.g. a success checkmark above a centered heading). The
+     * close button "floats" (absolute-positioned, top-right of the dialog, with its own background)
+     * whenever `centered` is true or the `image` slot has content -- otherwise it's the plain inline
+     * button in the header row next to the heading, same as before this addition.
+     */
+    interface HTMLBsDialogElement extends Components.BsDialog, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsDialogElementEventMap>(type: K, listener: (this: HTMLBsDialogElement, ev: BsDialogCustomEvent<HTMLBsDialogElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsDialogElementEventMap>(type: K, listener: (this: HTMLBsDialogElement, ev: BsDialogCustomEvent<HTMLBsDialogElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsDialogElement: {
+        prototype: HTMLBsDialogElement;
+        new (): HTMLBsDialogElement;
+    };
+    /**
+     * A clickable, icon-only action element -- the icon-only sibling of `bs-button`, sharing the same
+     * 8 visual variants and color language, but ALWAYS rendering just a single icon, never a label.
+     * ## When to use
+     * - A compact action where the icon alone is unambiguous (e.g. a close/dismiss control, a toolbar
+     *   action) and adding a text label would take up more space than the context allows.
+     * - The same variant guidance as `bs-button` applies: `primary` for the single most important
+     *   action, `neutral`/`subtle`/`outlined` for lower-emphasis alternatives, `error` reserved for
+     *   destructive/irreversible actions (never `neutral`, per BrandSync guidance), `success`/
+     *   `warning`/`info` only when the action's own outcome is predictable and clearly communicated.
+     * ## When not to use
+     * - When the action isn't self-evident from the icon alone -- use `bs-button` with a visible label
+     *   instead, don't rely on a tooltip to compensate for an unclear icon.
+     * - For navigation between pages -- use a link/nav component instead.
+     * Because this component is always icon-only, `ariaLabel` is required for every real usage (not
+     * just conditionally, unlike `bs-button`) -- there's no visible label text to fall back on for an
+     * accessible name.
+     */
+    interface HTMLBsIconButtonElement extends Components.BsIconButton, HTMLStencilElement {
+    }
+    var HTMLBsIconButtonElement: {
+        prototype: HTMLBsIconButtonElement;
+        new (): HTMLBsIconButtonElement;
+    };
+    interface HTMLBsInlineTabElementEventMap {
+        "bsSelect": void;
+    }
+    /**
+     * A pill-shaped tab button -- an optional leading icon plus a text label, rendered as a real
+     * `<button>` so it participates correctly in tab order and native click/keyboard activation.
+     * Unlike `bs-tab`'s underline indicator, selection here is communicated entirely by the pill's
+     * background fill color -- there is no separate indicator element.
+     * ## When to use
+     * - As one button within a segmented-control-style tab bar, where exactly one tab is
+     *   selected/active at a time.
+     * ## When not to use
+     * - As a standalone action button -- use `bs-button` instead, `bs-inline-tab`'s visual language
+     *   (muted pill until selected/hovered) only makes sense as part of a set.
+     * `selected` is NOT self-toggling -- clicking a `bs-inline-tab` only emits `bsSelect`, it does not
+     * set its own `selected` prop, and it does not unselect any sibling tabs. Wrap your
+     * `<bs-inline-tab>` elements in `<bs-tabs type="bs-inline-tab">` -- it owns `role="tablist"` and
+     * coordinates selection (listening for `bsSelect` and setting `selected`/`false` across siblings)
+     * for you. Using `bs-inline-tab` standalone, outside a `<bs-tabs>` wrapper, still means `selected`
+     * doesn't self-toggle and `role="tablist"` isn't provided automatically -- a consumer doing that
+     * would still need to coordinate `selected` and supply `role="tablist"` manually, same as
+     * `bs-tab.mdx`/`bs-radio.mdx` document for their own components. See `bs-inline-tab.mdx`'s
+     * Accessibility section for the full requirement, including `role="tabpanel"` on the corresponding
+     * content panels.
+     */
+    interface HTMLBsInlineTabElement extends Components.BsInlineTab, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsInlineTabElementEventMap>(type: K, listener: (this: HTMLBsInlineTabElement, ev: BsInlineTabCustomEvent<HTMLBsInlineTabElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsInlineTabElementEventMap>(type: K, listener: (this: HTMLBsInlineTabElement, ev: BsInlineTabCustomEvent<HTMLBsInlineTabElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsInlineTabElement: {
+        prototype: HTMLBsInlineTabElement;
+        new (): HTMLBsInlineTabElement;
+    };
     interface HTMLBsInputElementEventMap {
         "bsInput": string;
         "bsChange": string;
@@ -1766,6 +2851,36 @@ declare global {
         prototype: HTMLBsInputElement;
         new (): HTMLBsInputElement;
     };
+    /**
+     * The BrandSync brand mark, as its own standalone component -- shared by `bs-navigation-header`
+     * and `bs-navigation-drawer`, which used to each render their own duplicated copy of this SVG
+     * (the drawer's collapsed state even faked an icon-only look by clipping the full wordmark asset
+     * down to a narrowed box, rather than using a real icon-only asset).
+     * ## When to use
+     * - Anywhere the BrandSync logo/icon needs to render: a navigation header, a nav drawer, etc.
+     * ## When not to use
+     * - The Genie AI chat panel's own brand mark -- that's a different logo (`bs-chatbot-header`'s
+     *   own inline Genie asset), not this one.
+     * `variant` mirrors Figma's "Logo" component set (node 10909:30421) `Device` property
+     * ("Desktop" / "Tab and mobile"), which was originally meant to distinguish the full lockup from
+     * the icon-only mark at different responsive breakpoints -- renamed here to
+     * `variant: 'full' | 'mark'` since that's what it actually controls (how much of the logo
+     * renders), not literally a device/breakpoint switch.
+     * `variant="custom"` is not a Figma variant at all -- it's an escape hatch for a consuming app
+     * that needs to show a DIFFERENT product's logo in the same slot (e.g. a white-labeled deployment,
+     * or a logo fetched at runtime from a service like brand.dev), via `src`/`alt`, instead of the
+     * built-in BrandSync assets. This component deliberately does NOT fetch that image itself --
+     * network calls, loading/error states, and caching are the consuming app's responsibility, same as
+     * every other component in this library (e.g. `bs-attachment` takes `imageSrc` rather than fetching
+     * an image on its own). `background` has no effect on `variant="custom"` -- a consumer's own image
+     * is already designed for whatever surface it's placed on.
+     */
+    interface HTMLBsLogoElement extends Components.BsLogo, HTMLStencilElement {
+    }
+    var HTMLBsLogoElement: {
+        prototype: HTMLBsLogoElement;
+        new (): HTMLBsLogoElement;
+    };
     /**
      * A generic dropdown/popup menu container: a rounded, elevated list of items (typically
      * `bs-menu-item` elements).
@@ -1826,33 +2941,256 @@ declare global {
         prototype: HTMLBsMenuItemElement;
         new (): HTMLBsMenuItemElement;
     };
-    interface HTMLBsModalElementEventMap {
-        "bsClose": void;
+    interface HTMLBsNavigationDrawerElementEventMap {
+        "bsCollapse": boolean;
+        "bsSearchClick": void;
     }
     /**
-     * An overlay dialog that interrupts the current flow for a focused task or confirmation.
-     * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
+     * A left-side persistent navigation sidebar: the BrandSync logo, a "Main Menu" title with a
+     * collapse toggle, a reserved slot for a search field, and a scrollable list of nav items.
      * ## When to use
-     * - Confirming a consequential action (e.g. "Confirm booking") before it takes effect.
-     * - A short, focused task that doesn't warrant navigating to a new page.
+     * - The primary in-app navigation, shown alongside `bs-navigation-header` (typically that
+     *   header's `with-navigation-drawer` alignment, which omits its own logo since this component
+     *   already renders one -- or the reverse pairing, this drawer's own `showLogo={false}` alongside
+     *   a header that keeps its logo instead, see that prop's own docs).
      * ## When not to use
-     * - For non-blocking status messages — use a toast/notification instead of interrupting the user.
-     * - For a long, multi-step flow — a full page or a dedicated route is usually a better fit than a
-     *   modal that just gets taller and taller.
+     * - The top navigation bar itself -- use `bs-navigation-header` instead.
+     * This component renders a real `<nav>` landmark (no explicit `role` needed -- `<nav>` already
+     * carries the implicit `navigation` role), labeled via `aria-label={heading}` so the landmark
+     * still has a name even when collapsed (see below).
+     * `collapsed` narrows the drawer to a 96px icon-only rail, per Figma node 8028:135374
+     * ("Type=Collapsed"): the title text disappears, the logo swaps from the full "EG BrandSync"
+     * wordmark (`bs-logo variant="full"`) to the real icon-only mark (`bs-logo variant="mark"` -- a
+     * second, properly-designed asset, not a CSS crop of the full one) via CSS visibility toggling on
+     * both, the same `:host([collapsed])` attribute-selector pattern already used for the
+     * `search`/`search-trigger` swap below, the `search` slot is replaced by a compact built-in
+     * search-trigger button (this component can't meaningfully shrink arbitrary slotted search-field
+     * content down to icon size itself, so it emits `bsSearchClick` instead -- e.g. to open a full
+     * search overlay), and every top-level
+     * `bs-navigation-drawer-item`'s layout switches from icon-beside-label to icon-above-caption.
+     * That last part is real prop propagation, not a CSS trick: this component keeps each direct-child
+     * item's own `collapsed` prop in sync with its own (see `syncItemsCollapsed` below), the same
+     * direct-children-prop-sync approach `bs-tabs` already uses for coordinating `selected` across its
+     * `bs-tab` children. Clicking the toggle self-toggles `collapsed` (simple local UI state, not
+     * something needing cross-component coordination -- closer to `bs-switch`'s self-toggling
+     * `checked` than `bs-tab`'s non-self-toggling `selected`) and emits `bsCollapse` with the new
+     * value. The toggle's own caret icon does NOT rotate when collapsed -- Figma's collapsed mock
+     * reuses the identical left-pointing "CaretLeft" asset unchanged, confirmed by directly inspecting
+     * that state, so this deliberately does not add the same "flip on toggle" idiom the drawer item's
+     * own disclosure chevron does (that one really is an unconfirmed addition; this one was checked).
+     */
+    interface HTMLBsNavigationDrawerElement extends Components.BsNavigationDrawer, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsNavigationDrawerElementEventMap>(type: K, listener: (this: HTMLBsNavigationDrawerElement, ev: BsNavigationDrawerCustomEvent<HTMLBsNavigationDrawerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsNavigationDrawerElementEventMap>(type: K, listener: (this: HTMLBsNavigationDrawerElement, ev: BsNavigationDrawerCustomEvent<HTMLBsNavigationDrawerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsNavigationDrawerElement: {
+        prototype: HTMLBsNavigationDrawerElement;
+        new (): HTMLBsNavigationDrawerElement;
+    };
+    interface HTMLBsNavigationDrawerItemElementEventMap {
+        "bsSelect": void;
+        "bsToggle": boolean;
+    }
+    /**
+     * A single row within a `bs-navigation-drawer`'s item list -- either a plain leaf nav item, or an
+     * `expandable` group header that discloses nested `bs-navigation-drawer-item` children.
+     * ## When to use
+     * - Every row inside a `bs-navigation-drawer`'s default slot.
+     * ## When not to use
+     * - A standalone action outside a navigation drawer -- use `bs-button`/`bs-menu-item` instead.
+     * Click behavior is mutually exclusive, based on `expandable`:
+     * - `expandable = false` (a plain leaf item): clicking only emits `bsSelect`. `selected` is NOT
+     *   self-toggling -- same non-self-toggling precedent as `bs-tab`'s `selected` (see `bs-tab.tsx`'s
+     *   class doc): coordinating which sibling row is selected needs cross-item state a
+     *   consumer/wrapper owns, not something this component can reason about on its own.
+     * - `expandable = true` (a group header, never shown with a `selected` tint): clicking toggles
+     *   `this.expanded` directly and emits `bsToggle` with the new value, and does NOT emit
+     *   `bsSelect`. This IS self-toggling, unlike `selected` above -- it's simple local disclosure
+     *   state with no cross-item coordination needed, closer to `bs-switch`'s self-toggling `checked`
+     *   than `bs-tab`'s non-self-toggling `selected`.
+     * Nesting: put child `<bs-navigation-drawer-item nested>` elements inside a parent
+     * `<bs-navigation-drawer-item expandable>` with `slot="children"`. The parent shows/hides that
+     * slot's content based on its own `expanded` prop, via a pure-CSS attribute selector (no JS
+     * visibility toggling needed, since `expanded` is reflected).
+     * `collapsed` switches this row from its normal icon-beside-label row layout to a compact
+     * icon-above-caption column (per Figma node 8028:135374, the drawer's "Type=Collapsed" state) --
+     * you don't need to set this yourself on every item: a parent `bs-navigation-drawer` keeps its own
+     * top-level items' `collapsed` prop in sync with its own `collapsed` state automatically (see
+     * `bs-navigation-drawer.tsx`'s `syncItemsCollapsed`, the same direct-children-prop-sync approach
+     * `bs-tabs` uses for coordinating `selected` across its own `bs-tab` children). It's still a public
+     * prop so a standalone item (or this component's own stories) can be demoed without the parent.
      */
-    interface HTMLBsModalElement extends Components.BsModal, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLBsModalElementEventMap>(type: K, listener: (this: HTMLBsModalElement, ev: BsModalCustomEvent<HTMLBsModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    interface HTMLBsNavigationDrawerItemElement extends Components.BsNavigationDrawerItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsNavigationDrawerItemElementEventMap>(type: K, listener: (this: HTMLBsNavigationDrawerItemElement, ev: BsNavigationDrawerItemCustomEvent<HTMLBsNavigationDrawerItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLBsModalElementEventMap>(type: K, listener: (this: HTMLBsModalElement, ev: BsModalCustomEvent<HTMLBsModalElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsNavigationDrawerItemElementEventMap>(type: K, listener: (this: HTMLBsNavigationDrawerItemElement, ev: BsNavigationDrawerItemCustomEvent<HTMLBsNavigationDrawerItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
-    var HTMLBsModalElement: {
-        prototype: HTMLBsModalElement;
-        new (): HTMLBsModalElement;
+    var HTMLBsNavigationDrawerItemElement: {
+        prototype: HTMLBsNavigationDrawerItemElement;
+        new (): HTMLBsNavigationDrawerItemElement;
+    };
+    /**
+     * The top-level navigation bar for a page: the BrandSync logo plus two consumer-provided slots
+     * for menu/action content (e.g. `bs-button`/`bs-icon-button` elements).
+     * ## When to use
+     * - The persistent top bar of an application, above the page content.
+     * ## When not to use
+     * - The header of a Genie AI chat panel -- use `bs-chatbot-header` instead, which is purpose-built
+     *   for that narrower layout and its own fixed action buttons.
+     * `alignment` controls both whether the logo renders and how the two slots are laid out:
+     * - `default` (default): logo on the left, `left` slot content immediately after it, `right` slot
+     *   content pushed to the far right.
+     * - `center`: logo and `right` slot both grow equally (`flex: 1`), which centers the `left` slot
+     *   content in the middle of the bar.
+     * - `with-navigation-drawer`: no logo at all (this variant assumes a nav-drawer toggle is the
+     *   leftmost thing on the page instead) -- `left` slot content starts at the bar's own left edge,
+     *   `right` slot content pushed to the far right.
+     */
+    interface HTMLBsNavigationHeaderElement extends Components.BsNavigationHeader, HTMLStencilElement {
+    }
+    var HTMLBsNavigationHeaderElement: {
+        prototype: HTMLBsNavigationHeaderElement;
+        new (): HTMLBsNavigationHeaderElement;
+    };
+    interface HTMLBsPaginationElementEventMap {
+        "bsPageChange": number;
+    }
+    /**
+     * A numbered page control -- previous/next chevrons, page-number buttons, and `...` overflow for
+     * large page counts. Matches the Figma "Pagination" component's "Default" type (the classic
+     * numbered pagination); its other type ("jumper" -- a rows-per-page dropdown plus a page-jump
+     * input) is a structurally different composite widget and isn't covered by this component.
+     * `totalPages`/`currentPage` drive everything -- this computes which page numbers to show and
+     * where to collapse into `...` itself, the consumer never builds the button list by hand.
+     * ## When to use
+     * - Paging through a large, ordered result set (a table, a search results list) where jumping
+     *   directly to a specific page number is useful.
+     * ## When not to use
+     * - Infinite-scroll or "load more" patterns -- those don't have a fixed, addressable page number.
+     * - A huge page count where users realistically only ever go forward/back one page at a time --
+     *   plain prev/next controls (no numbers) are simpler there.
+     */
+    interface HTMLBsPaginationElement extends Components.BsPagination, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsPaginationElementEventMap>(type: K, listener: (this: HTMLBsPaginationElement, ev: BsPaginationCustomEvent<HTMLBsPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsPaginationElementEventMap>(type: K, listener: (this: HTMLBsPaginationElement, ev: BsPaginationCustomEvent<HTMLBsPaginationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsPaginationElement: {
+        prototype: HTMLBsPaginationElement;
+        new (): HTMLBsPaginationElement;
+    };
+    interface HTMLBsRadioElementEventMap {
+        "bsChange": string;
+    }
+    /**
+     * A single radio button with its label, for one mutually-exclusive choice within a group.
+     * ## When to use
+     * - One option within a set of mutually-exclusive choices, where all options should stay visible
+     *   (a radio group).
+     * ## When not to use
+     * - An independent, non-exclusive binary choice, or one item in a set of independent choices --
+     *   use `bs-checkbox` instead.
+     * - An on/off setting that takes effect immediately (no explicit form submission) -- use `bs-switch`.
+     */
+    interface HTMLBsRadioElement extends Components.BsRadio, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsRadioElementEventMap>(type: K, listener: (this: HTMLBsRadioElement, ev: BsRadioCustomEvent<HTMLBsRadioElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsRadioElementEventMap>(type: K, listener: (this: HTMLBsRadioElement, ev: BsRadioCustomEvent<HTMLBsRadioElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsRadioElement: {
+        prototype: HTMLBsRadioElement;
+        new (): HTMLBsRadioElement;
+    };
+    interface HTMLBsSliderElementEventMap {
+        "bsChange": number;
+        "bsRangeChange": { start: number; end: number };
+    }
+    /**
+     * A slider for picking a single numeric value (`type="default"`), a value snapped to evenly
+     * spaced ticks (`type="segmented"`), or a min/max pair (`type="range"`) from within a bounded
+     * `min`/`max` range.
+     * ## When to use
+     * - A numeric value that's easiest to reason about relative to its bounds (volume, brightness,
+     *   a price range) rather than typed digit-by-digit.
+     * - `type="segmented"` when only a fixed number of discrete stops make sense (e.g. a 5-star
+     *   rating-like scale) but a visual track is still preferable to discrete buttons.
+     * - `type="range"` for picking a min/max pair (e.g. a price range filter) with two thumbs.
+     * ## When not to use
+     * - A precise value where mis-dragging by a pixel matters more than the at-a-glance bounds --
+     *   use `bs-input[type="number"]` instead.
+     * - A small, fixed set of mutually exclusive choices -- use a radio group instead.
+     */
+    interface HTMLBsSliderElement extends Components.BsSlider, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsSliderElementEventMap>(type: K, listener: (this: HTMLBsSliderElement, ev: BsSliderCustomEvent<HTMLBsSliderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsSliderElementEventMap>(type: K, listener: (this: HTMLBsSliderElement, ev: BsSliderCustomEvent<HTMLBsSliderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsSliderElement: {
+        prototype: HTMLBsSliderElement;
+        new (): HTMLBsSliderElement;
+    };
+    interface HTMLBsSnackbarElementEventMap {
+        "bsAction": void;
+        "bsDismiss": void;
+    }
+    /**
+     * A transient status bar for confirming the result of an action (e.g. "Files uploaded
+     * successfully.") -- an icon (or loading spinner), a message, an optional action, and a close
+     * button.
+     * This component only renders the bar itself -- it doesn't manage its own visibility, timing, or
+     * stacking. A consumer (typically a small "toast manager" utility) creates one per message and
+     * removes it from the DOM again, whether on a timer or on `bsDismiss`. Figma's spec doesn't show
+     * auto-dismiss timing at all (it's a static visual spec), so this deliberately doesn't invent one.
+     * The icon is always the same checkmark glyph across every `variant`, just recolored -- matching
+     * the Figma spec exactly, even though a checkmark for `variant="error"` reads a little oddly
+     * semantically. Worth revisiting with severity-specific icons (warning triangle, error circle,
+     * etc.) if the design updates to specify them.
+     * ## When to use
+     * - Confirming the outcome of an action that just happened (save succeeded, upload failed) without
+     *   interrupting the user's flow.
+     * ## When not to use
+     * - For a response that requires the user to make a decision before continuing -- use `bs-dialog`.
+     * - For persistent, always-visible status -- a snackbar is inherently transient.
+     */
+    interface HTMLBsSnackbarElement extends Components.BsSnackbar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsSnackbarElementEventMap>(type: K, listener: (this: HTMLBsSnackbarElement, ev: BsSnackbarCustomEvent<HTMLBsSnackbarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsSnackbarElementEventMap>(type: K, listener: (this: HTMLBsSnackbarElement, ev: BsSnackbarCustomEvent<HTMLBsSnackbarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsSnackbarElement: {
+        prototype: HTMLBsSnackbarElement;
+        new (): HTMLBsSnackbarElement;
     };
     interface HTMLBsSourceLinkElementEventMap {
         "bsOpen": void;
@@ -1896,6 +3234,91 @@ declare global {
         prototype: HTMLBsSourceLinkElement;
         new (): HTMLBsSourceLinkElement;
     };
+    interface HTMLBsSwitchElementEventMap {
+        "bsChange": boolean;
+    }
+    /**
+     * A toggle switch for an on/off setting that takes effect immediately (no explicit form
+     * submission required).
+     * ## When to use
+     * - A binary setting that applies right away (e.g. "Enable notifications", "Dark mode").
+     * ## When not to use
+     * - A binary choice that's part of a form submitted later, or one item within a group of
+     *   independent choices -- use `bs-checkbox` instead.
+     * - A single mutually-exclusive choice from a set -- use a radio group instead.
+     */
+    interface HTMLBsSwitchElement extends Components.BsSwitch, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsSwitchElementEventMap>(type: K, listener: (this: HTMLBsSwitchElement, ev: BsSwitchCustomEvent<HTMLBsSwitchElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsSwitchElementEventMap>(type: K, listener: (this: HTMLBsSwitchElement, ev: BsSwitchCustomEvent<HTMLBsSwitchElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsSwitchElement: {
+        prototype: HTMLBsSwitchElement;
+        new (): HTMLBsSwitchElement;
+    };
+    interface HTMLBsTabElementEventMap {
+        "bsSelect": void;
+    }
+    /**
+     * A single tab button -- an optional icon plus a text label, rendered as a real `<button>` so it
+     * participates correctly in tab order and native click/keyboard activation.
+     * ## When to use
+     * - As one button within a tab bar, where exactly one tab is selected/active at a time.
+     * ## When not to use
+     * - As a standalone action button -- use `bs-button` instead, `bs-tab`'s visual language (muted
+     *   until selected/hovered, underline indicator) only makes sense as part of a set.
+     * `selected` is NOT self-toggling -- clicking a `bs-tab` only emits `bsSelect`, it does not set its
+     * own `selected` prop, and it does not unselect any sibling tabs. Wrap your `<bs-tab>` elements in
+     * `<bs-tabs type="bs-tab">` -- it owns `role="tablist"` and coordinates selection (listening for
+     * `bsSelect` and setting `selected`/`false` across siblings) for you. Using `bs-tab` standalone,
+     * outside a `<bs-tabs>` wrapper, still means `selected` doesn't self-toggle and `role="tablist"`
+     * isn't provided automatically -- a consumer doing that would still need to coordinate `selected`
+     * and supply `role="tablist"` manually, same as `bs-radio.mdx` documents for `bs-radio`'s missing
+     * `bs-radio-group`. See `bs-tab.mdx`'s Accessibility section for the full requirement, including
+     * `role="tabpanel"` on the corresponding content panels.
+     */
+    interface HTMLBsTabElement extends Components.BsTab, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsTabElementEventMap>(type: K, listener: (this: HTMLBsTabElement, ev: BsTabCustomEvent<HTMLBsTabElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsTabElementEventMap>(type: K, listener: (this: HTMLBsTabElement, ev: BsTabCustomEvent<HTMLBsTabElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBsTabElement: {
+        prototype: HTMLBsTabElement;
+        new (): HTMLBsTabElement;
+    };
+    /**
+     * A tab-group wrapper: owns `role="tablist"` and coordinates selection across its slotted
+     * `<bs-tab>` or `<bs-inline-tab>` children, so consumers no longer have to hand-roll this.
+     * `bs-tab.mdx`/`bs-inline-tab.mdx` previously documented this coordination -- listening for
+     * `bsSelect` and setting `selected`/`false` on siblings, plus supplying `role="tablist"` on
+     * whatever element groups the tabs -- as a "Known gap"/manual consumer responsibility. This
+     * component is that wrapper: it renders the `role="tablist"` element and listens for `bsSelect`
+     * itself. Using `<bs-tab>`/`<bs-inline-tab>` standalone, outside a `<bs-tabs>` wrapper, still means
+     * `selected` doesn't self-toggle -- a consumer doing that would still need to coordinate `selected`
+     * manually -- but that's no longer the first recommended path.
+     * ## When to use
+     * - Wrapping a set of `<bs-tab>` (underline style) or `<bs-inline-tab>` (pill style) elements that
+     *   should behave as a single-selection tab bar.
+     * ## When not to use
+     * - For a single, standalone tab button not participating in a group -- use `bs-tab`/`bs-inline-tab`
+     *   directly.
+     */
+    interface HTMLBsTabsElement extends Components.BsTabs, HTMLStencilElement {
+    }
+    var HTMLBsTabsElement: {
+        prototype: HTMLBsTabsElement;
+        new (): HTMLBsTabsElement;
+    };
     /**
      * A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
      * next to a trigger element.
@@ -1935,7 +3358,11 @@ declare global {
         "bs-ai-thinking": HTMLBsAiThinkingElement;
         "bs-attachment": HTMLBsAttachmentElement;
         "bs-attachment-list": HTMLBsAttachmentListElement;
+        "bs-avatar": HTMLBsAvatarElement;
         "bs-badge": HTMLBsBadgeElement;
+        "bs-breadcrumb": HTMLBsBreadcrumbElement;
+        "bs-breadcrumb-overflow": HTMLBsBreadcrumbOverflowElement;
+        "bs-breadcrumbs": HTMLBsBreadcrumbsElement;
         "bs-button": HTMLBsButtonElement;
         "bs-button-skeleton": HTMLBsButtonSkeletonElement;
         "bs-card": HTMLBsCardElement;
@@ -1945,14 +3372,28 @@ declare global {
         "bs-chatbot-sources-drawer": HTMLBsChatbotSourcesDrawerElement;
         "bs-chatbot-suggestion-button": HTMLBsChatbotSuggestionButtonElement;
         "bs-checkbox": HTMLBsCheckboxElement;
+        "bs-checkbox-skeleton": HTMLBsCheckboxSkeletonElement;
         "bs-composer": HTMLBsComposerElement;
         "bs-composer-status-banner": HTMLBsComposerStatusBannerElement;
         "bs-data-table": HTMLBsDataTableElement;
+        "bs-dialog": HTMLBsDialogElement;
+        "bs-icon-button": HTMLBsIconButtonElement;
+        "bs-inline-tab": HTMLBsInlineTabElement;
         "bs-input": HTMLBsInputElement;
+        "bs-logo": HTMLBsLogoElement;
         "bs-menu": HTMLBsMenuElement;
         "bs-menu-item": HTMLBsMenuItemElement;
-        "bs-modal": HTMLBsModalElement;
+        "bs-navigation-drawer": HTMLBsNavigationDrawerElement;
+        "bs-navigation-drawer-item": HTMLBsNavigationDrawerItemElement;
+        "bs-navigation-header": HTMLBsNavigationHeaderElement;
+        "bs-pagination": HTMLBsPaginationElement;
+        "bs-radio": HTMLBsRadioElement;
+        "bs-slider": HTMLBsSliderElement;
+        "bs-snackbar": HTMLBsSnackbarElement;
         "bs-source-link": HTMLBsSourceLinkElement;
+        "bs-switch": HTMLBsSwitchElement;
+        "bs-tab": HTMLBsTabElement;
+        "bs-tabs": HTMLBsTabsElement;
         "bs-tooltip": HTMLBsTooltipElement;
     }
 }
@@ -2045,7 +3486,9 @@ declare namespace LocalJSX {
     /**
      * A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
      * with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
-     * a hover/focus-revealed remove button.
+     * a hover/focus-revealed remove button (a `bs-icon-button` with `size="xs"` `variant="neutral"` --
+     * the same 16x16px compact tier `bs-icon-button` documents as meant for exactly this kind of
+     * chip/tag "remove" control).
      * ## When to use
      * - Rendered by the consuming app for each file a user has attached to a Genie AI chat message,
      *   typically alongside or inside `bs-composer`.
@@ -2062,14 +3505,6 @@ declare namespace LocalJSX {
      * @prop --bs-attachment-badge-bg-pdf - PDF badge background. Aliased to `--bs-badge-bg-error`.
      * @prop --bs-attachment-badge-bg-document - Document badge background. Aliased to
      * `--bs-badge-bg-info`.
-     * @prop --bs-attachment-remove-bg - Remove button (neutral icon button) default background.
-     * Aliased to `--bs-button-neutral-container`.
-     * @prop --bs-attachment-remove-hover - Remove button hover background. Aliased to
-     * `--bs-button-neutral-hover`.
-     * @prop --bs-attachment-remove-pressed - Remove button active/pressed background. Aliased to
-     * `--bs-button-neutral-pressed`.
-     * @prop --bs-attachment-remove-focus - Remove button focus outline color. Aliased to
-     * `--bs-border-neutral-focus`.
      */
     interface BsAttachment {
         /**
@@ -2128,10 +3563,66 @@ declare namespace LocalJSX {
      */
     interface BsAttachmentList {
         /**
-          * Accessible name for the scrollable region.
-          * @default 'Attachments'
+          * Accessible name for the scrollable region.
+          * @default 'Attachments'
+         */
+        "ariaLabel"?: string | null;
+    }
+    /**
+     * A circular representation of a person or entity -- a photo, initials, or (as a fallback when
+     * neither is available) a generic user-silhouette icon.
+     * ## When to use
+     * - Representing a specific user or account: in a header, a comment, a member list, etc.
+     * - `type="initials"` when a photo isn't available but a name is (e.g. "Sam Lee" -> "SL").
+     * - `type="icon"` (the default) as the generic fallback when neither a photo nor a name/initials
+     *   is available yet.
+     * ## When not to use
+     * - A company/brand logo -- use `bs-logo` instead.
+     * This component is decorative/informational by default, not an interactive control -- it renders
+     * a plain `<span>`/`<img>`, not a `<button>`. Figma's own component set includes hover/focused/
+     * pressed states (e.g. for an account-switcher trigger use case), which this implements as real
+     * `:hover`/`:focus-visible`/`:active` CSS on the host itself -- so wrapping this in your own
+     * `<button>`, or setting `tabindex` and a click handler on the `<bs-avatar>` element directly, gets
+     * the matching visual treatment for free with no extra wiring. Left genuinely non-interactive
+     * (no implicit role/tabindex of its own) so it doesn't misrepresent a purely decorative avatar
+     * (e.g. next to a comment) as a control when it isn't one.
+     */
+    interface BsAvatar {
+        /**
+          * `type="image"` only: accessible alt text for the photo, set directly on the real `<img>` this renders -- a person's photo is meaningful content, not decorative, so pass something real (e.g. their name). Falls back to `alt=""` (decorative to assistive tech) when unset, rather than omitting the attribute entirely, but don't rely on that fallback. Ignored for `icon`/`initials` -- see `ariaLabel` for those instead.
+          * @default null
+         */
+        "alt"?: string | null;
+        /**
+          * `type="icon"`/`"initials"` only: accessible name for the avatar, set as `aria-label` on the `role="img"` wrapper this renders (neither is a real `<img>`, so there's no native `alt` to set). Setting a plain `aria-label` attribute on the `<bs-avatar>` host does NOT work for this -- that attribute stays on the light-DOM host and never crosses into the shadow DOM, so the actual `role="img"` element stays nameless. Same pattern as `bs-checkbox`'s identical `ariaLabel` prop. Ignored for `image` -- see `alt` for that instead.
+          * @default null
+         */
+        "ariaLabel"?: string | null;
+        /**
+          * Applies the disabled treatment (50% opacity) and suppresses the hover/focus/pressed CSS states -- this doesn't set a native `disabled` attribute (this component renders no native form control), it's purely a visual/interaction-state flag for when a consuming app has wrapped this in its own disabled control. Reflected so the `:host([disabled])` CSS selector that drives all of the above still matches when a consumer sets the JS property directly (`el.disabled = true`) rather than the HTML attribute.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * `type="initials"` only: the initials text to display (e.g. `"SL"` for "Sam Lee"). Ignored for `icon`/`image`.
+          * @default null
+         */
+        "initials"?: string | null;
+        /**
+          * Sizing scale -- `xs` (24px) through `xxl` (128px), matching Figma's own six-step scale.
+          * @default 'md'
+         */
+        "size"?: BsAvatarSize;
+        /**
+          * `type="image"` only: the photo URL. This component does not fetch it itself -- network calls, loading/error states, and caching are the consuming app's responsibility, same convention as `bs-logo`'s own `src` prop. Ignored for `icon`/`initials`.
+          * @default null
+         */
+        "src"?: string | null;
+        /**
+          * What to render inside the circle. `icon` (default) is the generic fallback for when neither a photo nor initials are available yet.
+          * @default 'icon'
          */
-        "ariaLabel"?: string | null;
+        "type"?: BsAvatarType;
     }
     /**
      * A small status or category pill, usually paired with a label or list item.
@@ -2149,6 +3640,109 @@ declare namespace LocalJSX {
          */
         "variant"?: BsBadgeVariant;
     }
+    /**
+     * A single crumb within a `<bs-breadcrumbs>` trail: a leading separator icon plus either a link,
+     * plain text, or the current-page label, depending on `current`/`href`.
+     * Rendering follows the W3C ARIA Authoring Practices breadcrumb pattern
+     * (https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/): the current page is marked
+     * `aria-current="page"` and is never a link -- this holds even when `href` is also set, unlike
+     * Carbon Design System's `cds-breadcrumb-item`, which allows a link on the current item.
+     * Sets `role="listitem"` on the host, mirroring Carbon's own `CDSBreadcrumbItem.connectedCallback()`
+     * -- since this is a custom-element child of a real `<ol>` rather than a real `<li>`, the
+     * accessibility tree needs this explicit role to preserve the list's semantics.
+     * ## When to use
+     * - As one crumb inside a `<bs-breadcrumbs>` trail.
+     * ## When not to use
+     * - Standalone, outside a `<bs-breadcrumbs>` wrapper -- its `<ol>`/`<nav>` context and
+     *   first-child-aware separator hiding depend on that parent structure.
+     */
+    interface BsBreadcrumb {
+        /**
+          * Whether this crumb is the current page. Renders as plain (non-link) text marked `aria-current="page"`, reflected as an attribute so consumers/CSS can target `bs-breadcrumb[current]`.
+          * @default false
+         */
+        "current"?: boolean;
+        /**
+          * Destination for a non-current crumb. Ignored when `current` is true -- the current page is never a link, even if `href` is set (see the class JSDoc).
+         */
+        "href"?: string;
+        /**
+          * Size variant. Normally set automatically by a parent `<bs-breadcrumbs size="...">` -- the container propagates its own `size` as a JS property to every slotted `bs-breadcrumb`/ `bs-breadcrumb-overflow` child (see `bs-breadcrumbs.tsx`'s `propagateSize`), since CSS custom properties can't carry an enum that switches rules on their own. Can also be set directly on a standalone crumb. `sm` scales down font-size/line-height only -- the separator icon's pixel size is unchanged, since Figma didn't specify a `sm` icon size and guessing one risked drifting off-brand. Reflected so consumers/CSS can target `bs-breadcrumb[size="sm"]`.
+          * @default 'md'
+         */
+        "size"?: BsBreadcrumbSize;
+    }
+    /**
+     * A manually-placed collapsed-items disclosure for a `<bs-breadcrumbs>` trail: a leading separator
+     * plus an icon-only ellipsis button that reveals a `bs-menu` popup listing every hidden crumb.
+     * `items` is JS-property-only -- must be set as a JS property (`el.items = [...]`), not an HTML
+     * attribute, since attributes can only carry strings. See CONVENTIONS.md.
+     * Unlike an earlier `bs-breadcrumbs`-owned automatic `maxItems` collapse, this component does no
+     * collapsing logic itself -- the consumer decides which crumbs to hide and places this element
+     * wherever they want the disclosure, exactly matching Carbon Design System's own approach (Carbon
+     * doesn't auto-collapse breadcrumbs either; a consumer there manually decides what's visible).
+     * Hidden items with an `href` render as real `<a href>` rows inside the popup, not `bs-menu-item`
+     * (which renders a `<button>`) -- this matters because consuming apps commonly use client-side
+     * routers that intercept clicks on real `<a>` tags to do `preventDefault` + push-state navigation.
+     * Rendering hidden links any other way (e.g. `window.location`) would silently break client-side
+     * routing for hidden crumbs while working fine for visible ones. Hidden items without an `href`
+     * render as plain non-interactive text, matching how `bs-breadcrumb` itself handles link vs.
+     * no-link crumbs.
+     * Sets `role="listitem"` on the host, mirroring Carbon's own `CDSBreadcrumbItem.connectedCallback()`
+     * -- since this is a custom-element child of a real `<ol>` rather than a real `<li>`, the
+     * accessibility tree needs this explicit role to preserve the list's semantics.
+     * ## When to use
+     * - Inside a `<bs-breadcrumbs>` trail, wherever the consumer wants an interactive disclosure for
+     *   crumbs they've chosen not to render directly.
+     * ## When not to use
+     * - As an automatic collapsing mechanism -- there is none; the consumer decides what's hidden.
+     */
+    interface BsBreadcrumbOverflow {
+        /**
+          * Array prop -- must be set as a JS property (`el.items = [...]`), not an HTML attribute, since attributes can only carry strings. See CONVENTIONS.md. The hidden crumbs reachable via this disclosure -- no collapsing logic here, the consumer decides what goes in this list.
+          * @default []
+         */
+        "items"?: BsBreadcrumbOverflowItem[];
+        /**
+          * Accessible name (`aria-label`) for the icon-only ellipsis trigger button.
+          * @default 'Show hidden breadcrumbs'
+         */
+        "overflowLabel"?: string;
+        /**
+          * Size variant. Normally set automatically by a parent `<bs-breadcrumbs size="...">` -- see `bs-breadcrumb`'s identical `size` prop doc comment for why this is propagated as a JS property rather than inherited via CSS. Scales the popup rows' font-size/line-height only; the separator/ellipsis icons' pixel sizes are unchanged. Reflected so consumers/CSS can target `bs-breadcrumb-overflow[size="sm"]`.
+          * @default 'md'
+         */
+        "size"?: BsBreadcrumbSize1;
+    }
+    /**
+     * A breadcrumb trail container: a real `<nav>` landmark wrapping an `<ol>`, meant to be populated
+     * with slotted `<bs-breadcrumb>` (and, where the consumer wants a collapsed-items disclosure,
+     * `<bs-breadcrumb-overflow>`) children -- same composition-over-configuration architecture as
+     * Carbon Design System's `cds-breadcrumb`/`cds-breadcrumb-item`/`cds-breadcrumb-link`.
+     * This component is intentionally thin: it owns only the `<nav>` landmark and list semantics.
+     * Unlike an earlier `items`-array-driven design, there is no automatic collapsing here -- exactly
+     * like Carbon, the consumer decides what's visible and manually places a `<bs-breadcrumb-overflow>`
+     * wherever they want a collapsed-items disclosure. See `bs-breadcrumbs.mdx` for the consolidated
+     * docs covering all three components in this feature area.
+     * ## When to use
+     * - Showing a user's current location within a hierarchical page structure, with a path back to
+     *   its ancestors.
+     * ## When not to use
+     * - Primary in-app navigation -- use `bs-navigation-drawer`/`bs-navigation-header` instead.
+     * - A flat set of unrelated pages with no hierarchy -- breadcrumbs imply ancestry, not just history.
+     */
+    interface BsBreadcrumbs {
+        /**
+          * Accessible name for the `<nav>` landmark, via `aria-label`. Same pattern as `bs-navigation-drawer`'s `heading` prop.
+          * @default 'Breadcrumb'
+         */
+        "label"?: string;
+        /**
+          * Size variant, propagated as a JS property to every slotted `bs-breadcrumb`/ `bs-breadcrumb-overflow` child -- this container has no visual sizing of its own (font/spacing live on the item components, see `bs-breadcrumb.tsx`'s identical `size` prop), so propagation is the only way setting `size` here reaches every crumb. CSS custom properties can't carry an enum that switches rules on their own, which is why this is pushed via JS property instead of CSS inheritance -- same reasoning as `bs-tabs` setting `selected` directly on its slotted `bs-tab`/`bs-inline-tab` children. Re-propagated on `size` changes and whenever the slotted children change (e.g. a crumb added later).
+          * @default 'md'
+         */
+        "size"?: BsBreadcrumbSize1;
+    }
     /**
      * A clickable action element for the single most important action in a given context.
      * ## When to use
@@ -2168,6 +3762,11 @@ declare namespace LocalJSX {
      * @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
      * @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
      * @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
+     * @prop --bs-button-neutral-border - Border color, `variant="neutral"`, default/disabled. Aliased to `--bs-border-neutral-container`.
+     * @prop --bs-button-neutral-border-hover - Border color, `variant="neutral"`, hover. Aliased to `--bs-border-neutral-container-hover`.
+     * @prop --bs-button-neutral-border-pressed - Border color, `variant="neutral"`, pressed. Aliased to `--bs-border-neutral-container-pressed`.
+     * @prop --bs-button-padding-x-icon-side - Horizontal padding on an edge that's adjacent to a leading/trailing icon (tighter than the plain text-only edge). Aliased to `--bs-spacing-150`.
+     * @prop --bs-button-padding-x-label-side - Horizontal padding on the opposite edge, when an icon on the other side needs compensating extra space to keep the button optically balanced. Aliased to `--bs-spacing-250`.
      */
     interface BsButton {
         /**
@@ -2533,6 +4132,11 @@ declare namespace LocalJSX {
      * - An on/off setting that takes effect immediately (no explicit form submission) -- use `bs-switch`.
      */
     interface BsCheckbox {
+        /**
+          * Accessible name for the checkbox. Required whenever the default (label) slot is empty (e.g. a bare "select row" checkbox in a table) -- without it, the internal native `<input>` has no accessible name at all. Setting `aria-label` directly on the `<bs-checkbox>` host does NOT work for this: that attribute stays on the light-DOM host and is never forwarded into the shadow DOM by the browser, so the actual focusable element (the native `<input>` inside) stays nameless. This prop exists specifically to bridge that gap -- same pattern as `bs-button`'s and `bs-tab`'s identical `ariaLabel` prop, both of which explicitly bind it onto their own internal focusable element for the same reason.
+          * @default null
+         */
+        "ariaLabel"?: string | null;
         /**
           * Whether the checkbox is checked. Mutable so clicking the label/input toggles it directly. When `indeterminate` is also true, `indeterminate` wins visually (shows the minus icon) regardless of this value -- same as native checkboxes.
           * @default false
@@ -2563,6 +4167,36 @@ declare namespace LocalJSX {
          */
         "size"?: BsCheckboxSize;
     }
+    /**
+     * A shape-matched loading placeholder for `bs-checkbox`, shown while the real label text isn't
+     * known yet (e.g. still being fetched from an API). Renders a small square (matching the
+     * checkbox's own box) beside a text-bar placeholder (standing in for the label), both pulsing
+     * together, sized to match `bs-checkbox`'s `sm`/`md`/`lg` box dimensions so layout doesn't shift
+     * once the real checkbox renders.
+     * ## When to use
+     * - In place of a `bs-checkbox` whose label/checked state depends on data that hasn't loaded yet.
+     * ## When not to use
+     * - While a checkbox's own change handler is running (e.g. a save request in flight) -- render the
+     *   real `bs-checkbox` itself; this component is not a saving-in-progress spinner.
+     * @prop --bs-checkbox-skeleton-size-sm - Box width/height at `size="sm"`. Aliased to
+     * `--bs-spacing-200`, mirroring `bs-checkbox`'s own `--bs-checkbox-size-sm` -- not read directly
+     * from it, since these are two separate shadow roots.
+     * @prop --bs-checkbox-skeleton-size-md - Box width/height at `size="md"`. Aliased to
+     * `--bs-spacing-250`.
+     * @prop --bs-checkbox-skeleton-size-lg - Box width/height at `size="lg"`. Aliased to
+     * `--bs-spacing-300`.
+     * @prop --bs-checkbox-skeleton-gap - Gap between the box and label placeholders. Aliased to
+     * `--bs-spacing-100`, mirroring `bs-checkbox`'s own `--bs-checkbox-gap`.
+     * @prop --bs-checkbox-skeleton-label-width - Width of the label placeholder bar. Defaults to
+     * `96px`.
+     */
+    interface BsCheckboxSkeleton {
+        /**
+          * Sizing scale, matching the `bs-checkbox` size it stands in for. Defaults to `lg`, the same (unusual) default `bs-checkbox` itself uses.
+          * @default 'lg'
+         */
+        "size"?: BsCheckboxSize1;
+    }
     /**
      * A chat composer input for Genie AI-style conversational interfaces: a text field
      * plus an attach button, a mic/voice-recording toggle, and a single primary action button whose
@@ -2594,6 +4228,7 @@ declare namespace LocalJSX {
      * @prop --bs-composer-mic-icon-disabled - Aliased to `--bs-icon-disabled`.
      * @prop --bs-composer-subtle-hover - Background of the attach/mic buttons on hover (subtle-button treatment, same as `bs-button`'s `subtle` variant). Aliased to `--bs-color-neutral-container`.
      * @prop --bs-composer-subtle-pressed - Background of the attach/mic buttons when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+     * @prop --bs-composer-input-max-lines - How many lines the text field grows to before scrolling internally instead of growing further. Aliased to `10`.
      */
     interface BsComposer {
         /**
@@ -2635,7 +4270,7 @@ declare namespace LocalJSX {
          */
         "state"?: BsComposerState;
         /**
-          * Current text value. Native `input` events don't cross the Shadow DOM boundary, so this component re-dispatches them as a `bsInput` custom event instead.
+          * Current text value. Native `input` events don't cross the Shadow DOM boundary, so this component re-dispatches them as a `bsInput` custom event instead.  The field is a `<textarea>` (not a single-line `<input>`) that grows with its content, up to `--bs-composer-input-max-lines` (10 by default) -- beyond that it scrolls internally instead of growing further. Setting `value` as a prop (not just typing) also re-triggers the resize, so e.g. programmatically clearing the field after submit correctly shrinks it back down.
           * @default ''
          */
         "value"?: string;
@@ -2656,6 +4291,12 @@ declare namespace LocalJSX {
      * ## When not to use
      * - A toast/snackbar notification unrelated to the composer -- this component is not
      *   self-dismissing and has no positioning of its own (it's a static block, not an overlay).
+     * ## Accessibility
+     * Sets `role="status"` for `type="info"`/`type="neutral"` and `role="alert"` for
+     * `type="error"`/`type="warning"` on its own root element automatically -- no opt-in prop needed.
+     * Both roles carry implicit ARIA live-region semantics (`status` is polite, `alert` is assertive),
+     * so a screen reader announces the message as soon as this banner is inserted into the DOM,
+     * without a consumer having to remember to add `role`/`aria-live` themselves.
      * @prop --bs-composer-status-banner-radius - Corner radius of the top-left/top-right corners
      * (bottom corners are square, so this sits flush above `bs-composer`). Aliased to
      * `--bs-border-radius-150`.
@@ -2780,6 +4421,129 @@ declare namespace LocalJSX {
          */
         "sortDirection"?: 'asc' | 'desc';
     }
+    /**
+     * An overlay dialog that interrupts the current flow for a focused task or confirmation.
+     * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
+     * ## When to use
+     * - Confirming a consequential action (e.g. "Confirm booking") before it takes effect.
+     * - A short, focused task that doesn't warrant navigating to a new page.
+     * ## When not to use
+     * - For non-blocking status messages — use a toast/notification instead of interrupting the user.
+     * - For a long, multi-step flow — a full page or a dedicated route is usually a better fit than a
+     *   dialog that just gets taller and taller.
+     * Two additional slots cover the Figma "Dialog" component's other states: `image` (a hero image
+     * across the top, close button floats over it instead of sitting in the header row) and `icon`
+     * (only rendered when `centered` is set, e.g. a success checkmark above a centered heading). The
+     * close button "floats" (absolute-positioned, top-right of the dialog, with its own background)
+     * whenever `centered` is true or the `image` slot has content -- otherwise it's the plain inline
+     * button in the header row next to the heading, same as before this addition.
+     */
+    interface BsDialog {
+        /**
+          * Switches to the Figma "Icon Centered" layout: heading/body text centered, the `icon` slot rendered above the heading, and the close button floating top-right of the dialog instead of inline in the header row. Doesn't hide a slotted `image` if one is also provided -- Figma's spec doesn't show the two combined, so this is unspecified rather than actively blocked. Reflected so consumers/CSS can target `bs-dialog[centered]`.
+          * @default false
+         */
+        "centered"?: boolean;
+        "heading"?: string;
+        "onBsClose"?: (event: BsDialogCustomEvent<void>) => void;
+        /**
+          * Mutable + reflected so the component can close itself (backdrop click, Escape, close button) the same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to.
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * @default 'md'
+         */
+        "size"?: BsDialogSize;
+    }
+    /**
+     * A clickable, icon-only action element -- the icon-only sibling of `bs-button`, sharing the same
+     * 8 visual variants and color language, but ALWAYS rendering just a single icon, never a label.
+     * ## When to use
+     * - A compact action where the icon alone is unambiguous (e.g. a close/dismiss control, a toolbar
+     *   action) and adding a text label would take up more space than the context allows.
+     * - The same variant guidance as `bs-button` applies: `primary` for the single most important
+     *   action, `neutral`/`subtle`/`outlined` for lower-emphasis alternatives, `error` reserved for
+     *   destructive/irreversible actions (never `neutral`, per BrandSync guidance), `success`/
+     *   `warning`/`info` only when the action's own outcome is predictable and clearly communicated.
+     * ## When not to use
+     * - When the action isn't self-evident from the icon alone -- use `bs-button` with a visible label
+     *   instead, don't rely on a tooltip to compensate for an unclear icon.
+     * - For navigation between pages -- use a link/nav component instead.
+     * Because this component is always icon-only, `ariaLabel` is required for every real usage (not
+     * just conditionally, unlike `bs-button`) -- there's no visible label text to fall back on for an
+     * accessible name.
+     */
+    interface BsIconButton {
+        /**
+          * Accessible name for the button. Required -- this component is always icon-only, so there's no visible label text for screen readers to fall back on. Stencil reflects this camelCase prop to the `aria-label` HTML attribute automatically.
+          * @default null
+         */
+        "ariaLabel"?: string | null;
+        /**
+          * Disables the button and applies the disabled token set.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Sizing scale. `xs` (16px, an 8px icon) is a distinct, much smaller tier meant for compact chip/tag "remove" controls, not just a smaller toolbar button -- verified against a separate Figma redline (EG BrandSync UI Kit v1.5, node 20731:18427) from the one `sm`/`md`/`lg` were built against.
+          * @default 'md'
+         */
+        "size"?: BsIconButtonSize;
+        /**
+          * Native `<button>` type.
+          * @default 'button'
+         */
+        "type"?: 'button' | 'submit' | 'reset';
+        /**
+          * Visual style. Maps to the same semantic token families as `bs-button`'s `variant`. `error` is for destructive/irreversible actions per BrandSync guidance, not a stronger emphasis alternative to `primary`.
+          * @default 'primary'
+         */
+        "variant"?: BsIconButtonVariant;
+    }
+    /**
+     * A pill-shaped tab button -- an optional leading icon plus a text label, rendered as a real
+     * `<button>` so it participates correctly in tab order and native click/keyboard activation.
+     * Unlike `bs-tab`'s underline indicator, selection here is communicated entirely by the pill's
+     * background fill color -- there is no separate indicator element.
+     * ## When to use
+     * - As one button within a segmented-control-style tab bar, where exactly one tab is
+     *   selected/active at a time.
+     * ## When not to use
+     * - As a standalone action button -- use `bs-button` instead, `bs-inline-tab`'s visual language
+     *   (muted pill until selected/hovered) only makes sense as part of a set.
+     * `selected` is NOT self-toggling -- clicking a `bs-inline-tab` only emits `bsSelect`, it does not
+     * set its own `selected` prop, and it does not unselect any sibling tabs. Wrap your
+     * `<bs-inline-tab>` elements in `<bs-tabs type="bs-inline-tab">` -- it owns `role="tablist"` and
+     * coordinates selection (listening for `bsSelect` and setting `selected`/`false` across siblings)
+     * for you. Using `bs-inline-tab` standalone, outside a `<bs-tabs>` wrapper, still means `selected`
+     * doesn't self-toggle and `role="tablist"` isn't provided automatically -- a consumer doing that
+     * would still need to coordinate `selected` and supply `role="tablist"` manually, same as
+     * `bs-tab.mdx`/`bs-radio.mdx` document for their own components. See `bs-inline-tab.mdx`'s
+     * Accessibility section for the full requirement, including `role="tabpanel"` on the corresponding
+     * content panels.
+     */
+    interface BsInlineTab {
+        /**
+          * Accessible name for the tab. Required for icon-only usage (no visible label text via the default slot) so screen readers still announce what the tab does -- without it, an icon-only tab has no discernible name at all (axe-core flags this as a critical `button-name` violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute automatically, same as `bs-tab`'s identical prop.
+          * @default null
+         */
+        "ariaLabel"?: string | null;
+        /**
+          * Disables the tab: sets the native `disabled` attribute, suppresses hover/focus styling, and prevents clicking from emitting `bsSelect`.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Fires when the tab is clicked. Does not toggle `selected` itself -- see the class JSDoc.
+         */
+        "onBsSelect"?: (event: BsInlineTabCustomEvent<void>) => void;
+        /**
+          * Whether this tab is the currently active one. NOT mutable and NOT self-toggling -- see the "Known gap" note in the class JSDoc. Still reflected as an attribute so consumers/CSS can target `bs-inline-tab[selected]`.
+          * @default false
+         */
+        "selected"?: boolean;
+    }
     /**
      * A single-line text field with an optional label, description, and error state. Also covers a
      * range of related "field" shapes (number stepper, password reveal, date, dropdown trigger,
@@ -2912,6 +4676,52 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * The BrandSync brand mark, as its own standalone component -- shared by `bs-navigation-header`
+     * and `bs-navigation-drawer`, which used to each render their own duplicated copy of this SVG
+     * (the drawer's collapsed state even faked an icon-only look by clipping the full wordmark asset
+     * down to a narrowed box, rather than using a real icon-only asset).
+     * ## When to use
+     * - Anywhere the BrandSync logo/icon needs to render: a navigation header, a nav drawer, etc.
+     * ## When not to use
+     * - The Genie AI chat panel's own brand mark -- that's a different logo (`bs-chatbot-header`'s
+     *   own inline Genie asset), not this one.
+     * `variant` mirrors Figma's "Logo" component set (node 10909:30421) `Device` property
+     * ("Desktop" / "Tab and mobile"), which was originally meant to distinguish the full lockup from
+     * the icon-only mark at different responsive breakpoints -- renamed here to
+     * `variant: 'full' | 'mark'` since that's what it actually controls (how much of the logo
+     * renders), not literally a device/breakpoint switch.
+     * `variant="custom"` is not a Figma variant at all -- it's an escape hatch for a consuming app
+     * that needs to show a DIFFERENT product's logo in the same slot (e.g. a white-labeled deployment,
+     * or a logo fetched at runtime from a service like brand.dev), via `src`/`alt`, instead of the
+     * built-in BrandSync assets. This component deliberately does NOT fetch that image itself --
+     * network calls, loading/error states, and caching are the consuming app's responsibility, same as
+     * every other component in this library (e.g. `bs-attachment` takes `imageSrc` rather than fetching
+     * an image on its own). `background` has no effect on `variant="custom"` -- a consumer's own image
+     * is already designed for whatever surface it's placed on.
+     */
+    interface BsLogo {
+        /**
+          * `variant="custom"` only: accessible alt text for the image -- a product logo is meaningful content (whose brand is this?), not decorative, so set this to something real (e.g. the product/company name). Falls back to `alt=""` (marking the image decorative to assistive tech) when unset, rather than omitting the `alt` attribute entirely -- an `<img>` with no `alt` attribute at all is a harder accessibility failure than one explicitly marked decorative, but an empty fallback is still worse than a real name, so don't rely on it. Ignored for `full`/`mark` (those already carry their own fixed `aria-label="BrandSync"`).
+          * @default null
+         */
+        "alt"?: string | null;
+        /**
+          * Which pre-built asset to use for `variant="full"` -- Figma ships a genuinely separate, differently-drawn dark-background asset (every wordmark path filled solid white, and the icon's outer shape a single solid-white path instead of the light version's two-path white-fill-plus-border-ring), not a CSS currentColor swap of identical paths.  `"auto"` (default) renders both assets and lets CSS pick one via `--bs-logo-asset-light-display`/`--bs-logo-asset-dark-display` (defined in `src/global/base.css`, flipped by the same `[data-theme="dark"]` attribute every other `--bs-*` token already reacts to) -- so the logo just follows the ambient theme with no wiring needed, the same way a consuming app's own dark mode already re-themes every other part of this library via ordinary CSS custom property inheritance. Set `"light"`/`"dark"` explicitly to pin one regardless of the ambient theme -- e.g. a dark sidebar that isn't otherwise dark-themed.  Has no effect on `variant="mark"`: Figma's component set only has one real designed instance of the icon-only mark (`Device="Tab and mobile"`, `Background="Default"`) -- there's no separate dark version of it, so the mark renders identically regardless of this prop.
+          * @default 'auto'
+         */
+        "background"?: BsLogoBackground;
+        /**
+          * `variant="custom"` only: the image URL to render (e.g. a URL your app already fetched from a logo API). Ignored for `full`/`mark`.
+          * @default null
+         */
+        "src"?: string | null;
+        /**
+          * How much of the logo to render. `full` is the icon + "EG BrandSync" wordmark (190.977x44 natural size); `mark` is just the icon (44x44 natural size), no wordmark; `custom` renders a consumer-supplied image via `src`/`alt` instead of a built-in BrandSync asset -- see the class doc above.
+          * @default 'full'
+         */
+        "variant"?: BsLogoVariant;
+    }
     /**
      * A generic dropdown/popup menu container: a rounded, elevated list of items (typically
      * `bs-menu-item` elements).
@@ -2951,40 +4761,404 @@ declare namespace LocalJSX {
      * @prop --bs-menu-item-font-size - Aliased to `--bs-font-size-md`.
      * @prop --bs-menu-item-line-height - Aliased to `--bs-line-height-body-md`.
      */
-    interface BsMenuItem {
+    interface BsMenuItem {
+        /**
+          * Disables the item: no hover/pressed/focus styling, no pointer cursor, not reachable by keyboard tabbing, and clicking it does not emit `bsSelect`.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Fires when the item is clicked.
+         */
+        "onBsSelect"?: (event: BsMenuItemCustomEvent<void>) => void;
+    }
+    /**
+     * A left-side persistent navigation sidebar: the BrandSync logo, a "Main Menu" title with a
+     * collapse toggle, a reserved slot for a search field, and a scrollable list of nav items.
+     * ## When to use
+     * - The primary in-app navigation, shown alongside `bs-navigation-header` (typically that
+     *   header's `with-navigation-drawer` alignment, which omits its own logo since this component
+     *   already renders one -- or the reverse pairing, this drawer's own `showLogo={false}` alongside
+     *   a header that keeps its logo instead, see that prop's own docs).
+     * ## When not to use
+     * - The top navigation bar itself -- use `bs-navigation-header` instead.
+     * This component renders a real `<nav>` landmark (no explicit `role` needed -- `<nav>` already
+     * carries the implicit `navigation` role), labeled via `aria-label={heading}` so the landmark
+     * still has a name even when collapsed (see below).
+     * `collapsed` narrows the drawer to a 96px icon-only rail, per Figma node 8028:135374
+     * ("Type=Collapsed"): the title text disappears, the logo swaps from the full "EG BrandSync"
+     * wordmark (`bs-logo variant="full"`) to the real icon-only mark (`bs-logo variant="mark"` -- a
+     * second, properly-designed asset, not a CSS crop of the full one) via CSS visibility toggling on
+     * both, the same `:host([collapsed])` attribute-selector pattern already used for the
+     * `search`/`search-trigger` swap below, the `search` slot is replaced by a compact built-in
+     * search-trigger button (this component can't meaningfully shrink arbitrary slotted search-field
+     * content down to icon size itself, so it emits `bsSearchClick` instead -- e.g. to open a full
+     * search overlay), and every top-level
+     * `bs-navigation-drawer-item`'s layout switches from icon-beside-label to icon-above-caption.
+     * That last part is real prop propagation, not a CSS trick: this component keeps each direct-child
+     * item's own `collapsed` prop in sync with its own (see `syncItemsCollapsed` below), the same
+     * direct-children-prop-sync approach `bs-tabs` already uses for coordinating `selected` across its
+     * `bs-tab` children. Clicking the toggle self-toggles `collapsed` (simple local UI state, not
+     * something needing cross-component coordination -- closer to `bs-switch`'s self-toggling
+     * `checked` than `bs-tab`'s non-self-toggling `selected`) and emits `bsCollapse` with the new
+     * value. The toggle's own caret icon does NOT rotate when collapsed -- Figma's collapsed mock
+     * reuses the identical left-pointing "CaretLeft" asset unchanged, confirmed by directly inspecting
+     * that state, so this deliberately does not add the same "flip on toggle" idiom the drawer item's
+     * own disclosure chevron does (that one really is an unconfirmed addition; this one was checked).
+     */
+    interface BsNavigationDrawer {
+        /**
+          * Narrows the drawer to a 96px icon-only rail (Figma node 8028:135374). Mutable and reflected -- clicking the collapse toggle toggles this directly (self-toggling, see the class doc above for why), and this component keeps every direct-child `bs-navigation-drawer-item`'s own `collapsed` prop synced to match (see `syncItemsCollapsed`).
+          * @default false
+         */
+        "collapsed"?: boolean;
+        /**
+          * Whether this drawer can be collapsed at all. `false` renders no collapse toggle/chevron -- a "fixed" side nav (Carbon's terminology: a `Fixed Side Nav` never collapses, as opposed to a rail-capable one) that's always fully expanded. `collapsed` is ignored while this is `false`.
+          * @default true
+         */
+        "collapsible"?: boolean;
+        /**
+          * Heading text shown next to the collapse toggle, and used as the `<nav>` landmark's `aria-label` (so the landmark keeps a name even when `collapsed` hides the visible text).
+          * @default 'Main Menu'
+         */
+        "heading"?: string;
+        /**
+          * Forwarded straight to both internal `bs-logo` elements' own `background` prop. Defaults to `"auto"`, which follows the ambient `[data-theme="dark"]` state automatically (see `bs-logo`'s own docs) -- so if this drawer ends up on a dark surface via the normal theming mechanism, the logo switches to its dedicated dark-background asset with no wiring needed. Set `"light"`/`"dark"` explicitly only if you've overridden `--bs-navigation-drawer-bg` to something dark yourself *without* setting `[data-theme="dark"]`, and need to pin the logo regardless of theme. Has no visible effect on the `variant="mark"` logo shown while `collapsed` (see `bs-logo`'s own docs -- there's only one real designed mark asset, it's background-agnostic).
+          * @default 'auto'
+         */
+        "logoBackground"?: 'auto' | 'light' | 'dark';
+        /**
+          * Fires with the new `collapsed` value when the collapse toggle button is clicked.
+         */
+        "onBsCollapse"?: (event: BsNavigationDrawerCustomEvent<boolean>) => void;
+        /**
+          * Fires when the compact search-trigger button (shown instead of the `search` slot while `collapsed`) is clicked -- e.g. to open a full search overlay. This component has no visibility into what the `search` slot actually contains, so it can't drive a real search itself once shrunk to icon size.
+         */
+        "onBsSearchClick"?: (event: BsNavigationDrawerCustomEvent<void>) => void;
+        /**
+          * Whether to render the BrandSync logo at all. Defaults to `true`. This drawer is normally the one that owns the logo when paired with a `bs-navigation-header` (that header's own `with-navigation-drawer` alignment omits its logo for exactly this reason) -- but the reverse pairing works too: a header that keeps its own logo (`alignment="default"`) paired with this drawer set to `showLogo={false}`, so the brand mark only ever appears once.
+          * @default true
+         */
+        "showLogo"?: boolean;
+    }
+    /**
+     * A single row within a `bs-navigation-drawer`'s item list -- either a plain leaf nav item, or an
+     * `expandable` group header that discloses nested `bs-navigation-drawer-item` children.
+     * ## When to use
+     * - Every row inside a `bs-navigation-drawer`'s default slot.
+     * ## When not to use
+     * - A standalone action outside a navigation drawer -- use `bs-button`/`bs-menu-item` instead.
+     * Click behavior is mutually exclusive, based on `expandable`:
+     * - `expandable = false` (a plain leaf item): clicking only emits `bsSelect`. `selected` is NOT
+     *   self-toggling -- same non-self-toggling precedent as `bs-tab`'s `selected` (see `bs-tab.tsx`'s
+     *   class doc): coordinating which sibling row is selected needs cross-item state a
+     *   consumer/wrapper owns, not something this component can reason about on its own.
+     * - `expandable = true` (a group header, never shown with a `selected` tint): clicking toggles
+     *   `this.expanded` directly and emits `bsToggle` with the new value, and does NOT emit
+     *   `bsSelect`. This IS self-toggling, unlike `selected` above -- it's simple local disclosure
+     *   state with no cross-item coordination needed, closer to `bs-switch`'s self-toggling `checked`
+     *   than `bs-tab`'s non-self-toggling `selected`.
+     * Nesting: put child `<bs-navigation-drawer-item nested>` elements inside a parent
+     * `<bs-navigation-drawer-item expandable>` with `slot="children"`. The parent shows/hides that
+     * slot's content based on its own `expanded` prop, via a pure-CSS attribute selector (no JS
+     * visibility toggling needed, since `expanded` is reflected).
+     * `collapsed` switches this row from its normal icon-beside-label row layout to a compact
+     * icon-above-caption column (per Figma node 8028:135374, the drawer's "Type=Collapsed" state) --
+     * you don't need to set this yourself on every item: a parent `bs-navigation-drawer` keeps its own
+     * top-level items' `collapsed` prop in sync with its own `collapsed` state automatically (see
+     * `bs-navigation-drawer.tsx`'s `syncItemsCollapsed`, the same direct-children-prop-sync approach
+     * `bs-tabs` uses for coordinating `selected` across its own `bs-tab` children). It's still a public
+     * prop so a standalone item (or this component's own stories) can be demoed without the parent.
+     */
+    interface BsNavigationDrawerItem {
+        /**
+          * Optional accessible name override. Not required for `collapsed` rows -- unlike an icon-only button, the label caption stays visible (just restyled smaller, under the icon) in that mode per Figma, so the button's default accessible-name computation (its own text content) already works. Set this if you want a fuller/different name than the visible caption (e.g. truncated captions, or matching `bs-switch`/`bs-slider`'s `ariaLabel` convention for consistency).
+          * @default null
+         */
+        "ariaLabel"?: string | null;
+        /**
+          * Switches this row to the compact icon-above-caption column layout used when its parent `bs-navigation-drawer` is `collapsed` (see the class doc above). Reflected so `bs-navigation-drawer-item[collapsed]` is CSS-targetable. Also forces `expandable` rows' chevron and `children` slot to stay hidden regardless of `expanded` -- Figma's collapsed rail never shows a nested tree.
+          * @default false
+         */
+        "collapsed"?: boolean;
+        /**
+          * Renders this row as a disclosure/group header (trailing chevron, self-toggling `expanded`, `bsToggle` instead of `bsSelect` on click) instead of a plain navigable leaf item. See the class doc above for the full click-behavior split.
+          * @default false
+         */
+        "expandable"?: boolean;
+        /**
+          * Whether an `expandable` row's `children` slot is shown. Mutable and reflected -- clicking an `expandable` row toggles this directly (self-toggling, unlike `selected` above), and CSS shows/hides the `children` slot wrapper based on the reflected attribute. Ignored when `expandable` is false.
+          * @default false
+         */
+        "expanded"?: boolean;
+        /**
+          * Marks this as a child row nested under an `expandable` parent (via `slot="children"`) -- deepens the left indent and stops reserving `icon` slot space entirely (Figma's nested rows never have icons).
+          * @default false
+         */
+        "nested"?: boolean;
+        /**
+          * Fires on click, only when `expandable` is false. See the class doc above.
+         */
+        "onBsSelect"?: (event: BsNavigationDrawerItemCustomEvent<void>) => void;
+        /**
+          * Fires with the new `expanded` value on click, only when `expandable` is true. See the class doc above.
+         */
+        "onBsToggle"?: (event: BsNavigationDrawerItemCustomEvent<boolean>) => void;
+        /**
+          * Tints the row's background/text to indicate it's the current destination. NOT self-toggling -- see the class doc above for why. Ignored (never applied) when `expandable` is true. Reflected so consumers/CSS can target `bs-navigation-drawer-item[selected]`.
+          * @default false
+         */
+        "selected"?: boolean;
+    }
+    /**
+     * The top-level navigation bar for a page: the BrandSync logo plus two consumer-provided slots
+     * for menu/action content (e.g. `bs-button`/`bs-icon-button` elements).
+     * ## When to use
+     * - The persistent top bar of an application, above the page content.
+     * ## When not to use
+     * - The header of a Genie AI chat panel -- use `bs-chatbot-header` instead, which is purpose-built
+     *   for that narrower layout and its own fixed action buttons.
+     * `alignment` controls both whether the logo renders and how the two slots are laid out:
+     * - `default` (default): logo on the left, `left` slot content immediately after it, `right` slot
+     *   content pushed to the far right.
+     * - `center`: logo and `right` slot both grow equally (`flex: 1`), which centers the `left` slot
+     *   content in the middle of the bar.
+     * - `with-navigation-drawer`: no logo at all (this variant assumes a nav-drawer toggle is the
+     *   leftmost thing on the page instead) -- `left` slot content starts at the bar's own left edge,
+     *   `right` slot content pushed to the far right.
+     */
+    interface BsNavigationHeader {
+        /**
+          * Controls whether the logo renders and how the `left`/`right` slots are laid out -- see the class doc above for the three variants' exact behavior.
+          * @default 'default'
+         */
+        "alignment"?: BsNavigationHeaderAlignment;
+        /**
+          * Accessible label for the header landmark, useful when a page has more than one `<header>` (e.g. this one plus a page-specific sub-header) and screen reader users need to tell them apart in the landmarks list.
+          * @default null
+         */
+        "ariaLabel"?: string | null;
+        /**
+          * Forwarded straight to the internal `bs-logo`'s own `background` prop. Defaults to `"auto"`, which follows the ambient `[data-theme="dark"]` state automatically (see `bs-logo`'s own docs) -- so if this bar ends up on a dark surface via the normal theming mechanism, the logo switches to its dedicated dark-background asset with no wiring needed. Set `"light"`/`"dark"` explicitly only if you've overridden `--bs-navigation-header-bg` to something dark yourself *without* setting `[data-theme="dark"]`, and need to pin the logo regardless of theme.
+          * @default 'auto'
+         */
+        "logoBackground"?: 'auto' | 'light' | 'dark';
+        /**
+          * Fragment/URL to jump to when the "Skip to main content" link is activated (e.g. `#main-content`, matching an id on your page's main landmark). Unset by default -- the link is opt-in rather than pointing at a guessed default id, since a skip link to a target that doesn't exist on the consumer's page is worse than no skip link at all (it silently does nothing when activated). Set this to the same id your page's `<main>` (or equivalent) already has to enable it.
+          * @default null
+         */
+        "skipToContentHref"?: string | null;
+        /**
+          * Link text for the skip-to-content link. Only rendered when `skipToContentHref` is set.
+          * @default 'Skip to main content'
+         */
+        "skipToContentLabel"?: string;
+    }
+    /**
+     * A numbered page control -- previous/next chevrons, page-number buttons, and `...` overflow for
+     * large page counts. Matches the Figma "Pagination" component's "Default" type (the classic
+     * numbered pagination); its other type ("jumper" -- a rows-per-page dropdown plus a page-jump
+     * input) is a structurally different composite widget and isn't covered by this component.
+     * `totalPages`/`currentPage` drive everything -- this computes which page numbers to show and
+     * where to collapse into `...` itself, the consumer never builds the button list by hand.
+     * ## When to use
+     * - Paging through a large, ordered result set (a table, a search results list) where jumping
+     *   directly to a specific page number is useful.
+     * ## When not to use
+     * - Infinite-scroll or "load more" patterns -- those don't have a fixed, addressable page number.
+     * - A huge page count where users realistically only ever go forward/back one page at a time --
+     *   plain prev/next controls (no numbers) are simpler there.
+     */
+    interface BsPagination {
+        /**
+          * The active page (1-indexed). Mutable + reflected so clicking a page button updates it directly, the same way `bs-modal`'s `open` self-manages, while `bsPageChange` still fires for the consumer to react to (e.g. fetching that page's data).
+          * @default 1
+         */
+        "currentPage"?: number;
+        /**
+          * Accessible name for the next-page button.
+          * @default 'Next page'
+         */
+        "nextLabel"?: string;
+        /**
+          * Fires whenever the active page changes as a result of the user clicking a page/prev/next button -- not when `currentPage` is set programmatically from outside.
+         */
+        "onBsPageChange"?: (event: BsPaginationCustomEvent<number>) => void;
+        /**
+          * Accessible name for the previous-page button.
+          * @default 'Previous page'
+         */
+        "previousLabel"?: string;
+        /**
+          * How many page numbers to show on each side of the current page before collapsing the rest into `...`. `1` (the default) reproduces the Figma spec's example exactly (page 1 of 12 shows `1 2 3 ... 12`).
+          * @default 1
+         */
+        "siblingCount"?: number;
+        /**
+          * Total number of pages. Must be a positive integer -- there's always at least one page.
+          * @default 1
+         */
+        "totalPages"?: number;
+    }
+    /**
+     * A single radio button with its label, for one mutually-exclusive choice within a group.
+     * ## When to use
+     * - One option within a set of mutually-exclusive choices, where all options should stay visible
+     *   (a radio group).
+     * ## When not to use
+     * - An independent, non-exclusive binary choice, or one item in a set of independent choices --
+     *   use `bs-checkbox` instead.
+     * - An on/off setting that takes effect immediately (no explicit form submission) -- use `bs-switch`.
+     */
+    interface BsRadio {
+        /**
+          * Whether the radio is checked. Mutable so clicking the label/input sets it directly.
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * Disables the radio: sets the native `disabled` attribute, suppresses hover/focus styling, and prevents toggling.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The native radio input's `name` attribute. Passed straight through to the native input inside. NOTE: because each `bs-radio` renders its own shadow root, native `<input type="radio">` mutual-exclusion grouping (which the HTML spec scopes to a single DOM tree) does NOT extend across separate `bs-radio` instances sharing the same `name` -- checking one will not natively uncheck another. Within a single instance this still behaves like a normal radio input. See bs-radio.mdx's Accessibility section for this known gap; consumers building a group currently need to manage mutual exclusivity themselves (e.g. via `bsChange`) until a `bs-radio-group` wrapper exists.
+         */
+        "name"?: string;
+        /**
+          * Emitted with this radio's own `value` when it becomes checked via user interaction. Since native same-`name` grouping doesn't cross shadow-root boundaries (see the `name` prop's doc), a consumer wiring up a group of `bs-radio`s must itself set `checked = false` on the others in response to this event -- there's no automatic un-checking to rely on here.
+         */
+        "onBsChange"?: (event: BsRadioCustomEvent<string>) => void;
+        /**
+          * The native radio input's `value` attribute -- read from `event.target.value`, or used when wiring the group up to a form.
+         */
+        "value"?: string;
+    }
+    /**
+     * A slider for picking a single numeric value (`type="default"`), a value snapped to evenly
+     * spaced ticks (`type="segmented"`), or a min/max pair (`type="range"`) from within a bounded
+     * `min`/`max` range.
+     * ## When to use
+     * - A numeric value that's easiest to reason about relative to its bounds (volume, brightness,
+     *   a price range) rather than typed digit-by-digit.
+     * - `type="segmented"` when only a fixed number of discrete stops make sense (e.g. a 5-star
+     *   rating-like scale) but a visual track is still preferable to discrete buttons.
+     * - `type="range"` for picking a min/max pair (e.g. a price range filter) with two thumbs.
+     * ## When not to use
+     * - A precise value where mis-dragging by a pixel matters more than the at-a-glance bounds --
+     *   use `bs-input[type="number"]` instead.
+     * - A small, fixed set of mutually exclusive choices -- use a radio group instead.
+     */
+    interface BsSlider {
         /**
-          * Disables the item: no hover/pressed/focus styling, no pointer cursor, not reachable by keyboard tabbing, and clicking it does not emit `bsSelect`.
+          * Accessible name for the slider's native range input(s). Required whenever `showLabel` is `false` (a bare track with no visible "Label" text) -- without it, the internal native `<input>` has no accessible name at all. Setting `aria-label` directly on the `<bs-slider>` host does NOT work for this: that attribute stays on the light-DOM host and is never forwarded into the shadow DOM by the browser. Same pattern/reasoning as `bs-switch`'s and `bs-checkbox`'s identical `ariaLabel` prop. For `type="range"`, this labels the lower-bound thumb; the upper-bound thumb gets `"${ariaLabel} end"` (or `"End value"` when `ariaLabel` is unset).
+          * @default null
+         */
+        "ariaLabel"?: string | null;
+        /**
+          * Disables the slider: sets the native `disabled` attribute on the range input(s), suppresses hover/focus/drag styling and the value tooltip, and prevents interaction.
           * @default false
          */
         "disabled"?: boolean;
         /**
-          * Fires when the item is clicked.
+          * Label text shown above the track when `showLabel` is set.
+          * @default 'Label'
          */
-        "onBsSelect"?: (event: BsMenuItemCustomEvent<void>) => void;
+        "label"?: string;
+        /**
+          * Maximum selectable value, for all `type`s.
+          * @default 100
+         */
+        "max"?: number;
+        /**
+          * Minimum selectable value, for all `type`s.
+          * @default 0
+         */
+        "min"?: number;
+        /**
+          * Emitted when `value` changes via user interaction (dragging the thumb, or committing the value field), with the new value. Only fires for `type="default"`/`type="segmented"`.
+         */
+        "onBsChange"?: (event: BsSliderCustomEvent<number>) => void;
+        /**
+          * Emitted when `valueStart`/`valueEnd` changes via user interaction, with both current values. Only fires for `type="range"`.
+         */
+        "onBsRangeChange"?: (event: BsSliderCustomEvent<{ start: number; end: number }>) => void;
+        /**
+          * Number of equal divisions marked by tick lines along the track, for `type="segmented"` only. The first tick (at the very start of the track) is rendered with `opacity: 0` to keep the tick spacing math consistent while not visually doubling up with the track's own start edge -- this matches the design spec, not a bug.
+          * @default 10
+         */
+        "segments"?: number;
+        /**
+          * Shows/hides the "Label" text and editable percentage field(s) above the track, and the static min/max bound labels flanking it. When `false`, only the bare track (and its knob/knobs) renders.
+          * @default true
+         */
+        "showLabel"?: boolean;
+        /**
+          * Step size between selectable values. For `type="segmented"`, the effective step is derived from `(max - min) / segments` instead, so the thumb always snaps to a tick.
+          * @default 1
+         */
+        "step"?: number;
+        /**
+          * Which slider shape to render. `range` uses two thumbs (`valueStart`/`valueEnd`); `default` and `segmented` use one thumb (`value`). `segmented` additionally draws `segments` tick marks along the track.
+          * @default 'default'
+         */
+        "type"?: BsSliderType;
+        /**
+          * Current value for `type="default"`/`type="segmented"`. Ignored for `type="range"` -- use `valueStart`/`valueEnd` instead. Mutable so dragging the thumb updates it directly.
+          * @default 0
+         */
+        "value"?: number;
+        /**
+          * Upper thumb's value for `type="range"`. Defaults to `max` when unset. Mutable so dragging the thumb updates it directly.
+         */
+        "valueEnd"?: number;
+        /**
+          * Lower thumb's value for `type="range"`. Defaults to `min` when unset. Mutable so dragging the thumb updates it directly.
+         */
+        "valueStart"?: number;
     }
     /**
-     * An overlay dialog that interrupts the current flow for a focused task or confirmation.
-     * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
+     * A transient status bar for confirming the result of an action (e.g. "Files uploaded
+     * successfully.") -- an icon (or loading spinner), a message, an optional action, and a close
+     * button.
+     * This component only renders the bar itself -- it doesn't manage its own visibility, timing, or
+     * stacking. A consumer (typically a small "toast manager" utility) creates one per message and
+     * removes it from the DOM again, whether on a timer or on `bsDismiss`. Figma's spec doesn't show
+     * auto-dismiss timing at all (it's a static visual spec), so this deliberately doesn't invent one.
+     * The icon is always the same checkmark glyph across every `variant`, just recolored -- matching
+     * the Figma spec exactly, even though a checkmark for `variant="error"` reads a little oddly
+     * semantically. Worth revisiting with severity-specific icons (warning triangle, error circle,
+     * etc.) if the design updates to specify them.
      * ## When to use
-     * - Confirming a consequential action (e.g. "Confirm booking") before it takes effect.
-     * - A short, focused task that doesn't warrant navigating to a new page.
+     * - Confirming the outcome of an action that just happened (save succeeded, upload failed) without
+     *   interrupting the user's flow.
      * ## When not to use
-     * - For non-blocking status messages — use a toast/notification instead of interrupting the user.
-     * - For a long, multi-step flow — a full page or a dedicated route is usually a better fit than a
-     *   modal that just gets taller and taller.
+     * - For a response that requires the user to make a decision before continuing -- use `bs-dialog`.
+     * - For persistent, always-visible status -- a snackbar is inherently transient.
      */
-    interface BsModal {
-        "heading"?: string;
-        "onBsClose"?: (event: BsModalCustomEvent<void>) => void;
+    interface BsSnackbar {
         /**
-          * Mutable + reflected so the component can close itself (backdrop click, Escape, close button) the same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to.
+          * Label for the optional action button (e.g. "Undo", "Retry"). Omit this prop entirely to render no action button at all -- its presence, not a boolean flag, is what shows it.
+         */
+        "actionLabel"?: string;
+        /**
+          * Replaces the checkmark icon with a spinning loading indicator, for a message describing in-progress work (e.g. "Uploading files...") rather than a completed result.
           * @default false
          */
-        "open"?: boolean;
+        "loading"?: boolean;
         /**
-          * @default 'md'
+          * Fires when the action button is clicked. Ignored/never fires if `actionLabel` isn't set.
+         */
+        "onBsAction"?: (event: BsSnackbarCustomEvent<void>) => void;
+        /**
+          * Fires when the close button is clicked. This component doesn't remove itself from the DOM -- the consumer is expected to do that (or hide it) in response to this event.
+         */
+        "onBsDismiss"?: (event: BsSnackbarCustomEvent<void>) => void;
+        /**
+          * Color/semantic variant. `default` is the neutral (dark, inverse-surface) bar Figma shows as the baseline; `info`/`warning`/`success`/`error` use their matching container/text tokens.
+          * @default 'default'
          */
-        "size"?: BsModalSize;
+        "variant"?: BsSnackbarVariant;
     }
     /**
      * A single citation row inside `bs-chatbot-sources-drawer` -- a file icon + filename on the first
@@ -3039,6 +5213,115 @@ declare namespace LocalJSX {
          */
         "version"?: string;
     }
+    /**
+     * A toggle switch for an on/off setting that takes effect immediately (no explicit form
+     * submission required).
+     * ## When to use
+     * - A binary setting that applies right away (e.g. "Enable notifications", "Dark mode").
+     * ## When not to use
+     * - A binary choice that's part of a form submitted later, or one item within a group of
+     *   independent choices -- use `bs-checkbox` instead.
+     * - A single mutually-exclusive choice from a set -- use a radio group instead.
+     */
+    interface BsSwitch {
+        /**
+          * Accessible name for the switch. Required whenever the default (label) slot is empty (e.g. a bare "enabled" switch in a table row) -- without it, the internal native `<input>` has no accessible name at all. Setting `aria-label` directly on the `<bs-switch>` host does NOT work for this: that attribute stays on the light-DOM host and is never forwarded into the shadow DOM by the browser, so the actual focusable element (the native `<input>` inside) stays nameless. This prop exists specifically to bridge that gap -- same pattern as `bs-button`'s and `bs-checkbox`'s identical `ariaLabel` prop, both of which explicitly bind it onto their own internal focusable element for the same reason.
+          * @default null
+         */
+        "ariaLabel"?: string | null;
+        /**
+          * Whether the switch is on. Mutable so clicking the label/input toggles it directly, and reflected so consumers can target `bs-switch[checked]` via CSS.
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * Disables the switch: sets the native `disabled` attribute, suppresses hover/focus styling, and prevents toggling.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Emitted when the checked state changes via user interaction, with the new `checked` value.
+         */
+        "onBsChange"?: (event: BsSwitchCustomEvent<boolean>) => void;
+        /**
+          * Sizing scale. Controls the track's width/height and the knob's diameter.
+          * @default 'lg'
+         */
+        "size"?: BsSwitchSize;
+    }
+    /**
+     * A single tab button -- an optional icon plus a text label, rendered as a real `<button>` so it
+     * participates correctly in tab order and native click/keyboard activation.
+     * ## When to use
+     * - As one button within a tab bar, where exactly one tab is selected/active at a time.
+     * ## When not to use
+     * - As a standalone action button -- use `bs-button` instead, `bs-tab`'s visual language (muted
+     *   until selected/hovered, underline indicator) only makes sense as part of a set.
+     * `selected` is NOT self-toggling -- clicking a `bs-tab` only emits `bsSelect`, it does not set its
+     * own `selected` prop, and it does not unselect any sibling tabs. Wrap your `<bs-tab>` elements in
+     * `<bs-tabs type="bs-tab">` -- it owns `role="tablist"` and coordinates selection (listening for
+     * `bsSelect` and setting `selected`/`false` across siblings) for you. Using `bs-tab` standalone,
+     * outside a `<bs-tabs>` wrapper, still means `selected` doesn't self-toggle and `role="tablist"`
+     * isn't provided automatically -- a consumer doing that would still need to coordinate `selected`
+     * and supply `role="tablist"` manually, same as `bs-radio.mdx` documents for `bs-radio`'s missing
+     * `bs-radio-group`. See `bs-tab.mdx`'s Accessibility section for the full requirement, including
+     * `role="tabpanel"` on the corresponding content panels.
+     */
+    interface BsTab {
+        /**
+          * Accessible name for the tab. Required for icon-only usage (no visible label text via the default slot) so screen readers still announce what the tab does -- without it, an icon-only tab has no discernible name at all (axe-core flags this as a critical `button-name` violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute automatically, same as `bs-button`'s identical prop.
+          * @default null
+         */
+        "ariaLabel"?: string | null;
+        /**
+          * Disables the tab: sets the native `disabled` attribute, suppresses hover/focus styling, and prevents clicking from emitting `bsSelect`.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Where the icon sits relative to the label, when both `icon` and the default slot are populated. Ignored for icon-only/text-only layouts.
+          * @default 'start'
+         */
+        "iconPosition"?: BsTabIconPosition;
+        /**
+          * Fires when the tab is clicked. Does not toggle `selected` itself -- see the class JSDoc.
+         */
+        "onBsSelect"?: (event: BsTabCustomEvent<void>) => void;
+        /**
+          * Whether this tab is the currently active one. NOT mutable and NOT self-toggling -- see the "Known gap" note in the class JSDoc. Still reflected as an attribute so consumers/CSS can target `bs-tab[selected]`.
+          * @default false
+         */
+        "selected"?: boolean;
+    }
+    /**
+     * A tab-group wrapper: owns `role="tablist"` and coordinates selection across its slotted
+     * `<bs-tab>` or `<bs-inline-tab>` children, so consumers no longer have to hand-roll this.
+     * `bs-tab.mdx`/`bs-inline-tab.mdx` previously documented this coordination -- listening for
+     * `bsSelect` and setting `selected`/`false` on siblings, plus supplying `role="tablist"` on
+     * whatever element groups the tabs -- as a "Known gap"/manual consumer responsibility. This
+     * component is that wrapper: it renders the `role="tablist"` element and listens for `bsSelect`
+     * itself. Using `<bs-tab>`/`<bs-inline-tab>` standalone, outside a `<bs-tabs>` wrapper, still means
+     * `selected` doesn't self-toggle -- a consumer doing that would still need to coordinate `selected`
+     * manually -- but that's no longer the first recommended path.
+     * ## When to use
+     * - Wrapping a set of `<bs-tab>` (underline style) or `<bs-inline-tab>` (pill style) elements that
+     *   should behave as a single-selection tab bar.
+     * ## When not to use
+     * - For a single, standalone tab button not participating in a group -- use `bs-tab`/`bs-inline-tab`
+     *   directly.
+     */
+    interface BsTabs {
+        /**
+          * Layout direction of the tab bar itself. Sets `aria-orientation` on the internal wrapper and switches `flex-direction`.
+          * @default 'horizontal'
+         */
+        "orientation"?: BsTabsOrientation;
+        /**
+          * Which tab-button family this group wraps. Governs the wrapper's own visual treatment (gap-only for `bs-tab`, a filled pill bar for `bs-inline-tab`). Not reflected as an attribute -- nothing external needs to target it via CSS attribute selector, it only drives internal class names.
+          * @default 'bs-tab'
+         */
+        "type"?: BsTabsType;
+    }
     /**
      * A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
      * next to a trigger element.
@@ -3092,9 +5375,31 @@ declare namespace LocalJSX {
     interface BsAttachmentListAttributes {
         "ariaLabel": string | null;
     }
+    interface BsAvatarAttributes {
+        "type": BsAvatarType;
+        "size": BsAvatarSize;
+        "initials": string | null;
+        "src": string | null;
+        "alt": string | null;
+        "ariaLabel": string | null;
+        "disabled": boolean;
+    }
     interface BsBadgeAttributes {
         "variant": BsBadgeVariant;
     }
+    interface BsBreadcrumbAttributes {
+        "href": string;
+        "current": boolean;
+        "size": BsBreadcrumbSize;
+    }
+    interface BsBreadcrumbOverflowAttributes {
+        "overflowLabel": string;
+        "size": BsBreadcrumbSize;
+    }
+    interface BsBreadcrumbsAttributes {
+        "label": string;
+        "size": BsBreadcrumbSize;
+    }
     interface BsButtonAttributes {
         "variant": BsButtonVariant;
         "size": BsButtonSize;
@@ -3136,6 +5441,10 @@ declare namespace LocalJSX {
         "indeterminate": boolean;
         "disabled": boolean;
         "error": boolean;
+        "ariaLabel": string | null;
+    }
+    interface BsCheckboxSkeletonAttributes {
+        "size": BsCheckboxSize;
     }
     interface BsComposerAttributes {
         "variant": BsComposerVariant;
@@ -3157,6 +5466,24 @@ declare namespace LocalJSX {
         "sortDirection": 'asc' | 'desc';
         "selectable": boolean;
     }
+    interface BsDialogAttributes {
+        "open": boolean;
+        "heading": string;
+        "size": BsDialogSize;
+        "centered": boolean;
+    }
+    interface BsIconButtonAttributes {
+        "variant": BsIconButtonVariant;
+        "size": BsIconButtonSize;
+        "disabled": boolean;
+        "type": 'button' | 'submit' | 'reset';
+        "ariaLabel": string | null;
+    }
+    interface BsInlineTabAttributes {
+        "selected": boolean;
+        "disabled": boolean;
+        "ariaLabel": string | null;
+    }
     interface BsInputAttributes {
         "value": string;
         "type": | 'text'
@@ -3187,13 +5514,68 @@ declare namespace LocalJSX {
         "length": number;
         "open": boolean;
     }
+    interface BsLogoAttributes {
+        "variant": BsLogoVariant;
+        "background": BsLogoBackground;
+        "src": string | null;
+        "alt": string | null;
+    }
     interface BsMenuItemAttributes {
         "disabled": boolean;
     }
-    interface BsModalAttributes {
-        "open": boolean;
+    interface BsNavigationDrawerAttributes {
         "heading": string;
-        "size": BsModalSize;
+        "collapsible": boolean;
+        "collapsed": boolean;
+        "logoBackground": 'auto' | 'light' | 'dark';
+        "showLogo": boolean;
+    }
+    interface BsNavigationDrawerItemAttributes {
+        "selected": boolean;
+        "expandable": boolean;
+        "expanded": boolean;
+        "nested": boolean;
+        "ariaLabel": string | null;
+        "collapsed": boolean;
+    }
+    interface BsNavigationHeaderAttributes {
+        "alignment": BsNavigationHeaderAlignment;
+        "ariaLabel": string | null;
+        "skipToContentHref": string | null;
+        "skipToContentLabel": string;
+        "logoBackground": 'auto' | 'light' | 'dark';
+    }
+    interface BsPaginationAttributes {
+        "totalPages": number;
+        "currentPage": number;
+        "siblingCount": number;
+        "previousLabel": string;
+        "nextLabel": string;
+    }
+    interface BsRadioAttributes {
+        "name": string;
+        "value": string;
+        "checked": boolean;
+        "disabled": boolean;
+    }
+    interface BsSliderAttributes {
+        "type": BsSliderType;
+        "showLabel": boolean;
+        "label": string;
+        "min": number;
+        "max": number;
+        "step": number;
+        "value": number;
+        "valueStart": number;
+        "valueEnd": number;
+        "segments": number;
+        "disabled": boolean;
+        "ariaLabel": string | null;
+    }
+    interface BsSnackbarAttributes {
+        "variant": BsSnackbarVariant;
+        "loading": boolean;
+        "actionLabel": string;
     }
     interface BsSourceLinkAttributes {
         "fileName": string;
@@ -3202,6 +5584,22 @@ declare namespace LocalJSX {
         "href": string;
         "target": string;
     }
+    interface BsSwitchAttributes {
+        "size": BsSwitchSize;
+        "checked": boolean;
+        "disabled": boolean;
+        "ariaLabel": string | null;
+    }
+    interface BsTabAttributes {
+        "selected": boolean;
+        "disabled": boolean;
+        "iconPosition": BsTabIconPosition;
+        "ariaLabel": string | null;
+    }
+    interface BsTabsAttributes {
+        "type": BsTabsType;
+        "orientation": BsTabsOrientation;
+    }
     interface BsTooltipAttributes {
         "placement": 'top';
     }
@@ -3212,7 +5610,11 @@ declare namespace LocalJSX {
         "bs-ai-thinking": Omit<BsAiThinking, keyof BsAiThinkingAttributes> & { [K in keyof BsAiThinking & keyof BsAiThinkingAttributes]?: BsAiThinking[K] } & { [K in keyof BsAiThinking & keyof BsAiThinkingAttributes as `attr:${K}`]?: BsAiThinkingAttributes[K] } & { [K in keyof BsAiThinking & keyof BsAiThinkingAttributes as `prop:${K}`]?: BsAiThinking[K] };
         "bs-attachment": Omit<BsAttachment, keyof BsAttachmentAttributes> & { [K in keyof BsAttachment & keyof BsAttachmentAttributes]?: BsAttachment[K] } & { [K in keyof BsAttachment & keyof BsAttachmentAttributes as `attr:${K}`]?: BsAttachmentAttributes[K] } & { [K in keyof BsAttachment & keyof BsAttachmentAttributes as `prop:${K}`]?: BsAttachment[K] };
         "bs-attachment-list": Omit<BsAttachmentList, keyof BsAttachmentListAttributes> & { [K in keyof BsAttachmentList & keyof BsAttachmentListAttributes]?: BsAttachmentList[K] } & { [K in keyof BsAttachmentList & keyof BsAttachmentListAttributes as `attr:${K}`]?: BsAttachmentListAttributes[K] } & { [K in keyof BsAttachmentList & keyof BsAttachmentListAttributes as `prop:${K}`]?: BsAttachmentList[K] };
+        "bs-avatar": Omit<BsAvatar, keyof BsAvatarAttributes> & { [K in keyof BsAvatar & keyof BsAvatarAttributes]?: BsAvatar[K] } & { [K in keyof BsAvatar & keyof BsAvatarAttributes as `attr:${K}`]?: BsAvatarAttributes[K] } & { [K in keyof BsAvatar & keyof BsAvatarAttributes as `prop:${K}`]?: BsAvatar[K] };
         "bs-badge": Omit<BsBadge, keyof BsBadgeAttributes> & { [K in keyof BsBadge & keyof BsBadgeAttributes]?: BsBadge[K] } & { [K in keyof BsBadge & keyof BsBadgeAttributes as `attr:${K}`]?: BsBadgeAttributes[K] } & { [K in keyof BsBadge & keyof BsBadgeAttributes as `prop:${K}`]?: BsBadge[K] };
+        "bs-breadcrumb": Omit<BsBreadcrumb, keyof BsBreadcrumbAttributes> & { [K in keyof BsBreadcrumb & keyof BsBreadcrumbAttributes]?: BsBreadcrumb[K] } & { [K in keyof BsBreadcrumb & keyof BsBreadcrumbAttributes as `attr:${K}`]?: BsBreadcrumbAttributes[K] } & { [K in keyof BsBreadcrumb & keyof BsBreadcrumbAttributes as `prop:${K}`]?: BsBreadcrumb[K] };
+        "bs-breadcrumb-overflow": Omit<BsBreadcrumbOverflow, keyof BsBreadcrumbOverflowAttributes> & { [K in keyof BsBreadcrumbOverflow & keyof BsBreadcrumbOverflowAttributes]?: BsBreadcrumbOverflow[K] } & { [K in keyof BsBreadcrumbOverflow & keyof BsBreadcrumbOverflowAttributes as `attr:${K}`]?: BsBreadcrumbOverflowAttributes[K] } & { [K in keyof BsBreadcrumbOverflow & keyof BsBreadcrumbOverflowAttributes as `prop:${K}`]?: BsBreadcrumbOverflow[K] };
+        "bs-breadcrumbs": Omit<BsBreadcrumbs, keyof BsBreadcrumbsAttributes> & { [K in keyof BsBreadcrumbs & keyof BsBreadcrumbsAttributes]?: BsBreadcrumbs[K] } & { [K in keyof BsBreadcrumbs & keyof BsBreadcrumbsAttributes as `attr:${K}`]?: BsBreadcrumbsAttributes[K] } & { [K in keyof BsBreadcrumbs & keyof BsBreadcrumbsAttributes as `prop:${K}`]?: BsBreadcrumbs[K] };
         "bs-button": Omit<BsButton, keyof BsButtonAttributes> & { [K in keyof BsButton & keyof BsButtonAttributes]?: BsButton[K] } & { [K in keyof BsButton & keyof BsButtonAttributes as `attr:${K}`]?: BsButtonAttributes[K] } & { [K in keyof BsButton & keyof BsButtonAttributes as `prop:${K}`]?: BsButton[K] };
         "bs-button-skeleton": Omit<BsButtonSkeleton, keyof BsButtonSkeletonAttributes> & { [K in keyof BsButtonSkeleton & keyof BsButtonSkeletonAttributes]?: BsButtonSkeleton[K] } & { [K in keyof BsButtonSkeleton & keyof BsButtonSkeletonAttributes as `attr:${K}`]?: BsButtonSkeletonAttributes[K] } & { [K in keyof BsButtonSkeleton & keyof BsButtonSkeletonAttributes as `prop:${K}`]?: BsButtonSkeleton[K] };
         "bs-card": Omit<BsCard, keyof BsCardAttributes> & { [K in keyof BsCard & keyof BsCardAttributes]?: BsCard[K] } & { [K in keyof BsCard & keyof BsCardAttributes as `attr:${K}`]?: BsCardAttributes[K] } & { [K in keyof BsCard & keyof BsCardAttributes as `prop:${K}`]?: BsCard[K] };
@@ -3222,14 +5624,28 @@ declare namespace LocalJSX {
         "bs-chatbot-sources-drawer": Omit<BsChatbotSourcesDrawer, keyof BsChatbotSourcesDrawerAttributes> & { [K in keyof BsChatbotSourcesDrawer & keyof BsChatbotSourcesDrawerAttributes]?: BsChatbotSourcesDrawer[K] } & { [K in keyof BsChatbotSourcesDrawer & keyof BsChatbotSourcesDrawerAttributes as `attr:${K}`]?: BsChatbotSourcesDrawerAttributes[K] } & { [K in keyof BsChatbotSourcesDrawer & keyof BsChatbotSourcesDrawerAttributes as `prop:${K}`]?: BsChatbotSourcesDrawer[K] };
         "bs-chatbot-suggestion-button": Omit<BsChatbotSuggestionButton, keyof BsChatbotSuggestionButtonAttributes> & { [K in keyof BsChatbotSuggestionButton & keyof BsChatbotSuggestionButtonAttributes]?: BsChatbotSuggestionButton[K] } & { [K in keyof BsChatbotSuggestionButton & keyof BsChatbotSuggestionButtonAttributes as `attr:${K}`]?: BsChatbotSuggestionButtonAttributes[K] } & { [K in keyof BsChatbotSuggestionButton & keyof BsChatbotSuggestionButtonAttributes as `prop:${K}`]?: BsChatbotSuggestionButton[K] };
         "bs-checkbox": Omit<BsCheckbox, keyof BsCheckboxAttributes> & { [K in keyof BsCheckbox & keyof BsCheckboxAttributes]?: BsCheckbox[K] } & { [K in keyof BsCheckbox & keyof BsCheckboxAttributes as `attr:${K}`]?: BsCheckboxAttributes[K] } & { [K in keyof BsCheckbox & keyof BsCheckboxAttributes as `prop:${K}`]?: BsCheckbox[K] };
+        "bs-checkbox-skeleton": Omit<BsCheckboxSkeleton, keyof BsCheckboxSkeletonAttributes> & { [K in keyof BsCheckboxSkeleton & keyof BsCheckboxSkeletonAttributes]?: BsCheckboxSkeleton[K] } & { [K in keyof BsCheckboxSkeleton & keyof BsCheckboxSkeletonAttributes as `attr:${K}`]?: BsCheckboxSkeletonAttributes[K] } & { [K in keyof BsCheckboxSkeleton & keyof BsCheckboxSkeletonAttributes as `prop:${K}`]?: BsCheckboxSkeleton[K] };
         "bs-composer": Omit<BsComposer, keyof BsComposerAttributes> & { [K in keyof BsComposer & keyof BsComposerAttributes]?: BsComposer[K] } & { [K in keyof BsComposer & keyof BsComposerAttributes as `attr:${K}`]?: BsComposerAttributes[K] } & { [K in keyof BsComposer & keyof BsComposerAttributes as `prop:${K}`]?: BsComposer[K] };
         "bs-composer-status-banner": Omit<BsComposerStatusBanner, keyof BsComposerStatusBannerAttributes> & { [K in keyof BsComposerStatusBanner & keyof BsComposerStatusBannerAttributes]?: BsComposerStatusBanner[K] } & { [K in keyof BsComposerStatusBanner & keyof BsComposerStatusBannerAttributes as `attr:${K}`]?: BsComposerStatusBannerAttributes[K] } & { [K in keyof BsComposerStatusBanner & keyof BsComposerStatusBannerAttributes as `prop:${K}`]?: BsComposerStatusBanner[K] };
         "bs-data-table": Omit<BsDataTable, keyof BsDataTableAttributes> & { [K in keyof BsDataTable & keyof BsDataTableAttributes]?: BsDataTable[K] } & { [K in keyof BsDataTable & keyof BsDataTableAttributes as `attr:${K}`]?: BsDataTableAttributes[K] } & { [K in keyof BsDataTable & keyof BsDataTableAttributes as `prop:${K}`]?: BsDataTable[K] };
+        "bs-dialog": Omit<BsDialog, keyof BsDialogAttributes> & { [K in keyof BsDialog & keyof BsDialogAttributes]?: BsDialog[K] } & { [K in keyof BsDialog & keyof BsDialogAttributes as `attr:${K}`]?: BsDialogAttributes[K] } & { [K in keyof BsDialog & keyof BsDialogAttributes as `prop:${K}`]?: BsDialog[K] };
+        "bs-icon-button": Omit<BsIconButton, keyof BsIconButtonAttributes> & { [K in keyof BsIconButton & keyof BsIconButtonAttributes]?: BsIconButton[K] } & { [K in keyof BsIconButton & keyof BsIconButtonAttributes as `attr:${K}`]?: BsIconButtonAttributes[K] } & { [K in keyof BsIconButton & keyof BsIconButtonAttributes as `prop:${K}`]?: BsIconButton[K] };
+        "bs-inline-tab": Omit<BsInlineTab, keyof BsInlineTabAttributes> & { [K in keyof BsInlineTab & keyof BsInlineTabAttributes]?: BsInlineTab[K] } & { [K in keyof BsInlineTab & keyof BsInlineTabAttributes as `attr:${K}`]?: BsInlineTabAttributes[K] } & { [K in keyof BsInlineTab & keyof BsInlineTabAttributes as `prop:${K}`]?: BsInlineTab[K] };
         "bs-input": Omit<BsInput, keyof BsInputAttributes> & { [K in keyof BsInput & keyof BsInputAttributes]?: BsInput[K] } & { [K in keyof BsInput & keyof BsInputAttributes as `attr:${K}`]?: BsInputAttributes[K] } & { [K in keyof BsInput & keyof BsInputAttributes as `prop:${K}`]?: BsInput[K] };
+        "bs-logo": Omit<BsLogo, keyof BsLogoAttributes> & { [K in keyof BsLogo & keyof BsLogoAttributes]?: BsLogo[K] } & { [K in keyof BsLogo & keyof BsLogoAttributes as `attr:${K}`]?: BsLogoAttributes[K] } & { [K in keyof BsLogo & keyof BsLogoAttributes as `prop:${K}`]?: BsLogo[K] };
         "bs-menu": BsMenu;
         "bs-menu-item": Omit<BsMenuItem, keyof BsMenuItemAttributes> & { [K in keyof BsMenuItem & keyof BsMenuItemAttributes]?: BsMenuItem[K] } & { [K in keyof BsMenuItem & keyof BsMenuItemAttributes as `attr:${K}`]?: BsMenuItemAttributes[K] } & { [K in keyof BsMenuItem & keyof BsMenuItemAttributes as `prop:${K}`]?: BsMenuItem[K] };
-        "bs-modal": Omit<BsModal, keyof BsModalAttributes> & { [K in keyof BsModal & keyof BsModalAttributes]?: BsModal[K] } & { [K in keyof BsModal & keyof BsModalAttributes as `attr:${K}`]?: BsModalAttributes[K] } & { [K in keyof BsModal & keyof BsModalAttributes as `prop:${K}`]?: BsModal[K] };
+        "bs-navigation-drawer": Omit<BsNavigationDrawer, keyof BsNavigationDrawerAttributes> & { [K in keyof BsNavigationDrawer & keyof BsNavigationDrawerAttributes]?: BsNavigationDrawer[K] } & { [K in keyof BsNavigationDrawer & keyof BsNavigationDrawerAttributes as `attr:${K}`]?: BsNavigationDrawerAttributes[K] } & { [K in keyof BsNavigationDrawer & keyof BsNavigationDrawerAttributes as `prop:${K}`]?: BsNavigationDrawer[K] };
+        "bs-navigation-drawer-item": Omit<BsNavigationDrawerItem, keyof BsNavigationDrawerItemAttributes> & { [K in keyof BsNavigationDrawerItem & keyof BsNavigationDrawerItemAttributes]?: BsNavigationDrawerItem[K] } & { [K in keyof BsNavigationDrawerItem & keyof BsNavigationDrawerItemAttributes as `attr:${K}`]?: BsNavigationDrawerItemAttributes[K] } & { [K in keyof BsNavigationDrawerItem & keyof BsNavigationDrawerItemAttributes as `prop:${K}`]?: BsNavigationDrawerItem[K] };
+        "bs-navigation-header": Omit<BsNavigationHeader, keyof BsNavigationHeaderAttributes> & { [K in keyof BsNavigationHeader & keyof BsNavigationHeaderAttributes]?: BsNavigationHeader[K] } & { [K in keyof BsNavigationHeader & keyof BsNavigationHeaderAttributes as `attr:${K}`]?: BsNavigationHeaderAttributes[K] } & { [K in keyof BsNavigationHeader & keyof BsNavigationHeaderAttributes as `prop:${K}`]?: BsNavigationHeader[K] };
+        "bs-pagination": Omit<BsPagination, keyof BsPaginationAttributes> & { [K in keyof BsPagination & keyof BsPaginationAttributes]?: BsPagination[K] } & { [K in keyof BsPagination & keyof BsPaginationAttributes as `attr:${K}`]?: BsPaginationAttributes[K] } & { [K in keyof BsPagination & keyof BsPaginationAttributes as `prop:${K}`]?: BsPagination[K] };
+        "bs-radio": Omit<BsRadio, keyof BsRadioAttributes> & { [K in keyof BsRadio & keyof BsRadioAttributes]?: BsRadio[K] } & { [K in keyof BsRadio & keyof BsRadioAttributes as `attr:${K}`]?: BsRadioAttributes[K] } & { [K in keyof BsRadio & keyof BsRadioAttributes as `prop:${K}`]?: BsRadio[K] };
+        "bs-slider": Omit<BsSlider, keyof BsSliderAttributes> & { [K in keyof BsSlider & keyof BsSliderAttributes]?: BsSlider[K] } & { [K in keyof BsSlider & keyof BsSliderAttributes as `attr:${K}`]?: BsSliderAttributes[K] } & { [K in keyof BsSlider & keyof BsSliderAttributes as `prop:${K}`]?: BsSlider[K] };
+        "bs-snackbar": Omit<BsSnackbar, keyof BsSnackbarAttributes> & { [K in keyof BsSnackbar & keyof BsSnackbarAttributes]?: BsSnackbar[K] } & { [K in keyof BsSnackbar & keyof BsSnackbarAttributes as `attr:${K}`]?: BsSnackbarAttributes[K] } & { [K in keyof BsSnackbar & keyof BsSnackbarAttributes as `prop:${K}`]?: BsSnackbar[K] };
         "bs-source-link": Omit<BsSourceLink, keyof BsSourceLinkAttributes> & { [K in keyof BsSourceLink & keyof BsSourceLinkAttributes]?: BsSourceLink[K] } & { [K in keyof BsSourceLink & keyof BsSourceLinkAttributes as `attr:${K}`]?: BsSourceLinkAttributes[K] } & { [K in keyof BsSourceLink & keyof BsSourceLinkAttributes as `prop:${K}`]?: BsSourceLink[K] };
+        "bs-switch": Omit<BsSwitch, keyof BsSwitchAttributes> & { [K in keyof BsSwitch & keyof BsSwitchAttributes]?: BsSwitch[K] } & { [K in keyof BsSwitch & keyof BsSwitchAttributes as `attr:${K}`]?: BsSwitchAttributes[K] } & { [K in keyof BsSwitch & keyof BsSwitchAttributes as `prop:${K}`]?: BsSwitch[K] };
+        "bs-tab": Omit<BsTab, keyof BsTabAttributes> & { [K in keyof BsTab & keyof BsTabAttributes]?: BsTab[K] } & { [K in keyof BsTab & keyof BsTabAttributes as `attr:${K}`]?: BsTabAttributes[K] } & { [K in keyof BsTab & keyof BsTabAttributes as `prop:${K}`]?: BsTab[K] };
+        "bs-tabs": Omit<BsTabs, keyof BsTabsAttributes> & { [K in keyof BsTabs & keyof BsTabsAttributes]?: BsTabs[K] } & { [K in keyof BsTabs & keyof BsTabsAttributes as `attr:${K}`]?: BsTabsAttributes[K] } & { [K in keyof BsTabs & keyof BsTabsAttributes as `prop:${K}`]?: BsTabs[K] };
         "bs-tooltip": Omit<BsTooltip, keyof BsTooltipAttributes> & { [K in keyof BsTooltip & keyof BsTooltipAttributes]?: BsTooltip[K] } & { [K in keyof BsTooltip & keyof BsTooltipAttributes as `attr:${K}`]?: BsTooltipAttributes[K] } & { [K in keyof BsTooltip & keyof BsTooltipAttributes as `prop:${K}`]?: BsTooltip[K] };
     }
 }
@@ -3308,7 +5724,9 @@ declare module "@stencil/core" {
             /**
              * A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
              * with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
-             * a hover/focus-revealed remove button.
+             * a hover/focus-revealed remove button (a `bs-icon-button` with `size="xs"` `variant="neutral"` --
+             * the same 16x16px compact tier `bs-icon-button` documents as meant for exactly this kind of
+             * chip/tag "remove" control).
              * ## When to use
              * - Rendered by the consuming app for each file a user has attached to a Genie AI chat message,
              *   typically alongside or inside `bs-composer`.
@@ -3325,14 +5743,6 @@ declare module "@stencil/core" {
              * @prop --bs-attachment-badge-bg-pdf - PDF badge background. Aliased to `--bs-badge-bg-error`.
              * @prop --bs-attachment-badge-bg-document - Document badge background. Aliased to
              * `--bs-badge-bg-info`.
-             * @prop --bs-attachment-remove-bg - Remove button (neutral icon button) default background.
-             * Aliased to `--bs-button-neutral-container`.
-             * @prop --bs-attachment-remove-hover - Remove button hover background. Aliased to
-             * `--bs-button-neutral-hover`.
-             * @prop --bs-attachment-remove-pressed - Remove button active/pressed background. Aliased to
-             * `--bs-button-neutral-pressed`.
-             * @prop --bs-attachment-remove-focus - Remove button focus outline color. Aliased to
-             * `--bs-border-neutral-focus`.
              */
             "bs-attachment": LocalJSX.IntrinsicElements["bs-attachment"] & JSXBase.HTMLAttributes<HTMLBsAttachmentElement>;
             /**
@@ -3356,6 +5766,26 @@ declare module "@stencil/core" {
              * hover/focus once the row is scrollable. Aliased to `--bs-neutral-300`.
              */
             "bs-attachment-list": LocalJSX.IntrinsicElements["bs-attachment-list"] & JSXBase.HTMLAttributes<HTMLBsAttachmentListElement>;
+            /**
+             * A circular representation of a person or entity -- a photo, initials, or (as a fallback when
+             * neither is available) a generic user-silhouette icon.
+             * ## When to use
+             * - Representing a specific user or account: in a header, a comment, a member list, etc.
+             * - `type="initials"` when a photo isn't available but a name is (e.g. "Sam Lee" -> "SL").
+             * - `type="icon"` (the default) as the generic fallback when neither a photo nor a name/initials
+             *   is available yet.
+             * ## When not to use
+             * - A company/brand logo -- use `bs-logo` instead.
+             * This component is decorative/informational by default, not an interactive control -- it renders
+             * a plain `<span>`/`<img>`, not a `<button>`. Figma's own component set includes hover/focused/
+             * pressed states (e.g. for an account-switcher trigger use case), which this implements as real
+             * `:hover`/`:focus-visible`/`:active` CSS on the host itself -- so wrapping this in your own
+             * `<button>`, or setting `tabindex` and a click handler on the `<bs-avatar>` element directly, gets
+             * the matching visual treatment for free with no extra wiring. Left genuinely non-interactive
+             * (no implicit role/tabindex of its own) so it doesn't misrepresent a purely decorative avatar
+             * (e.g. next to a comment) as a control when it isn't one.
+             */
+            "bs-avatar": LocalJSX.IntrinsicElements["bs-avatar"] & JSXBase.HTMLAttributes<HTMLBsAvatarElement>;
             /**
              * A small status or category pill, usually paired with a label or list item.
              * ## When to use
@@ -3366,6 +5796,67 @@ declare module "@stencil/core" {
              * - For long text — badges are sized for one or two words.
              */
             "bs-badge": LocalJSX.IntrinsicElements["bs-badge"] & JSXBase.HTMLAttributes<HTMLBsBadgeElement>;
+            /**
+             * A single crumb within a `<bs-breadcrumbs>` trail: a leading separator icon plus either a link,
+             * plain text, or the current-page label, depending on `current`/`href`.
+             * Rendering follows the W3C ARIA Authoring Practices breadcrumb pattern
+             * (https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/): the current page is marked
+             * `aria-current="page"` and is never a link -- this holds even when `href` is also set, unlike
+             * Carbon Design System's `cds-breadcrumb-item`, which allows a link on the current item.
+             * Sets `role="listitem"` on the host, mirroring Carbon's own `CDSBreadcrumbItem.connectedCallback()`
+             * -- since this is a custom-element child of a real `<ol>` rather than a real `<li>`, the
+             * accessibility tree needs this explicit role to preserve the list's semantics.
+             * ## When to use
+             * - As one crumb inside a `<bs-breadcrumbs>` trail.
+             * ## When not to use
+             * - Standalone, outside a `<bs-breadcrumbs>` wrapper -- its `<ol>`/`<nav>` context and
+             *   first-child-aware separator hiding depend on that parent structure.
+             */
+            "bs-breadcrumb": LocalJSX.IntrinsicElements["bs-breadcrumb"] & JSXBase.HTMLAttributes<HTMLBsBreadcrumbElement>;
+            /**
+             * A manually-placed collapsed-items disclosure for a `<bs-breadcrumbs>` trail: a leading separator
+             * plus an icon-only ellipsis button that reveals a `bs-menu` popup listing every hidden crumb.
+             * `items` is JS-property-only -- must be set as a JS property (`el.items = [...]`), not an HTML
+             * attribute, since attributes can only carry strings. See CONVENTIONS.md.
+             * Unlike an earlier `bs-breadcrumbs`-owned automatic `maxItems` collapse, this component does no
+             * collapsing logic itself -- the consumer decides which crumbs to hide and places this element
+             * wherever they want the disclosure, exactly matching Carbon Design System's own approach (Carbon
+             * doesn't auto-collapse breadcrumbs either; a consumer there manually decides what's visible).
+             * Hidden items with an `href` render as real `<a href>` rows inside the popup, not `bs-menu-item`
+             * (which renders a `<button>`) -- this matters because consuming apps commonly use client-side
+             * routers that intercept clicks on real `<a>` tags to do `preventDefault` + push-state navigation.
+             * Rendering hidden links any other way (e.g. `window.location`) would silently break client-side
+             * routing for hidden crumbs while working fine for visible ones. Hidden items without an `href`
+             * render as plain non-interactive text, matching how `bs-breadcrumb` itself handles link vs.
+             * no-link crumbs.
+             * Sets `role="listitem"` on the host, mirroring Carbon's own `CDSBreadcrumbItem.connectedCallback()`
+             * -- since this is a custom-element child of a real `<ol>` rather than a real `<li>`, the
+             * accessibility tree needs this explicit role to preserve the list's semantics.
+             * ## When to use
+             * - Inside a `<bs-breadcrumbs>` trail, wherever the consumer wants an interactive disclosure for
+             *   crumbs they've chosen not to render directly.
+             * ## When not to use
+             * - As an automatic collapsing mechanism -- there is none; the consumer decides what's hidden.
+             */
+            "bs-breadcrumb-overflow": LocalJSX.IntrinsicElements["bs-breadcrumb-overflow"] & JSXBase.HTMLAttributes<HTMLBsBreadcrumbOverflowElement>;
+            /**
+             * A breadcrumb trail container: a real `<nav>` landmark wrapping an `<ol>`, meant to be populated
+             * with slotted `<bs-breadcrumb>` (and, where the consumer wants a collapsed-items disclosure,
+             * `<bs-breadcrumb-overflow>`) children -- same composition-over-configuration architecture as
+             * Carbon Design System's `cds-breadcrumb`/`cds-breadcrumb-item`/`cds-breadcrumb-link`.
+             * This component is intentionally thin: it owns only the `<nav>` landmark and list semantics.
+             * Unlike an earlier `items`-array-driven design, there is no automatic collapsing here -- exactly
+             * like Carbon, the consumer decides what's visible and manually places a `<bs-breadcrumb-overflow>`
+             * wherever they want a collapsed-items disclosure. See `bs-breadcrumbs.mdx` for the consolidated
+             * docs covering all three components in this feature area.
+             * ## When to use
+             * - Showing a user's current location within a hierarchical page structure, with a path back to
+             *   its ancestors.
+             * ## When not to use
+             * - Primary in-app navigation -- use `bs-navigation-drawer`/`bs-navigation-header` instead.
+             * - A flat set of unrelated pages with no hierarchy -- breadcrumbs imply ancestry, not just history.
+             */
+            "bs-breadcrumbs": LocalJSX.IntrinsicElements["bs-breadcrumbs"] & JSXBase.HTMLAttributes<HTMLBsBreadcrumbsElement>;
             /**
              * A clickable action element for the single most important action in a given context.
              * ## When to use
@@ -3385,6 +5876,11 @@ declare module "@stencil/core" {
              * @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
              * @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
              * @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
+             * @prop --bs-button-neutral-border - Border color, `variant="neutral"`, default/disabled. Aliased to `--bs-border-neutral-container`.
+             * @prop --bs-button-neutral-border-hover - Border color, `variant="neutral"`, hover. Aliased to `--bs-border-neutral-container-hover`.
+             * @prop --bs-button-neutral-border-pressed - Border color, `variant="neutral"`, pressed. Aliased to `--bs-border-neutral-container-pressed`.
+             * @prop --bs-button-padding-x-icon-side - Horizontal padding on an edge that's adjacent to a leading/trailing icon (tighter than the plain text-only edge). Aliased to `--bs-spacing-150`.
+             * @prop --bs-button-padding-x-label-side - Horizontal padding on the opposite edge, when an icon on the other side needs compensating extra space to keep the button optically balanced. Aliased to `--bs-spacing-250`.
              */
             "bs-button": LocalJSX.IntrinsicElements["bs-button"] & JSXBase.HTMLAttributes<HTMLBsButtonElement>;
             /**
@@ -3583,6 +6079,30 @@ declare module "@stencil/core" {
              * - An on/off setting that takes effect immediately (no explicit form submission) -- use `bs-switch`.
              */
             "bs-checkbox": LocalJSX.IntrinsicElements["bs-checkbox"] & JSXBase.HTMLAttributes<HTMLBsCheckboxElement>;
+            /**
+             * A shape-matched loading placeholder for `bs-checkbox`, shown while the real label text isn't
+             * known yet (e.g. still being fetched from an API). Renders a small square (matching the
+             * checkbox's own box) beside a text-bar placeholder (standing in for the label), both pulsing
+             * together, sized to match `bs-checkbox`'s `sm`/`md`/`lg` box dimensions so layout doesn't shift
+             * once the real checkbox renders.
+             * ## When to use
+             * - In place of a `bs-checkbox` whose label/checked state depends on data that hasn't loaded yet.
+             * ## When not to use
+             * - While a checkbox's own change handler is running (e.g. a save request in flight) -- render the
+             *   real `bs-checkbox` itself; this component is not a saving-in-progress spinner.
+             * @prop --bs-checkbox-skeleton-size-sm - Box width/height at `size="sm"`. Aliased to
+             * `--bs-spacing-200`, mirroring `bs-checkbox`'s own `--bs-checkbox-size-sm` -- not read directly
+             * from it, since these are two separate shadow roots.
+             * @prop --bs-checkbox-skeleton-size-md - Box width/height at `size="md"`. Aliased to
+             * `--bs-spacing-250`.
+             * @prop --bs-checkbox-skeleton-size-lg - Box width/height at `size="lg"`. Aliased to
+             * `--bs-spacing-300`.
+             * @prop --bs-checkbox-skeleton-gap - Gap between the box and label placeholders. Aliased to
+             * `--bs-spacing-100`, mirroring `bs-checkbox`'s own `--bs-checkbox-gap`.
+             * @prop --bs-checkbox-skeleton-label-width - Width of the label placeholder bar. Defaults to
+             * `96px`.
+             */
+            "bs-checkbox-skeleton": LocalJSX.IntrinsicElements["bs-checkbox-skeleton"] & JSXBase.HTMLAttributes<HTMLBsCheckboxSkeletonElement>;
             /**
              * A chat composer input for Genie AI-style conversational interfaces: a text field
              * plus an attach button, a mic/voice-recording toggle, and a single primary action button whose
@@ -3614,6 +6134,7 @@ declare module "@stencil/core" {
              * @prop --bs-composer-mic-icon-disabled - Aliased to `--bs-icon-disabled`.
              * @prop --bs-composer-subtle-hover - Background of the attach/mic buttons on hover (subtle-button treatment, same as `bs-button`'s `subtle` variant). Aliased to `--bs-color-neutral-container`.
              * @prop --bs-composer-subtle-pressed - Background of the attach/mic buttons when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+             * @prop --bs-composer-input-max-lines - How many lines the text field grows to before scrolling internally instead of growing further. Aliased to `10`.
              */
             "bs-composer": LocalJSX.IntrinsicElements["bs-composer"] & JSXBase.HTMLAttributes<HTMLBsComposerElement>;
             /**
@@ -3627,6 +6148,12 @@ declare module "@stencil/core" {
              * ## When not to use
              * - A toast/snackbar notification unrelated to the composer -- this component is not
              *   self-dismissing and has no positioning of its own (it's a static block, not an overlay).
+             * ## Accessibility
+             * Sets `role="status"` for `type="info"`/`type="neutral"` and `role="alert"` for
+             * `type="error"`/`type="warning"` on its own root element automatically -- no opt-in prop needed.
+             * Both roles carry implicit ARIA live-region semantics (`status` is polite, `alert` is assertive),
+             * so a screen reader announces the message as soon as this banner is inserted into the DOM,
+             * without a consumer having to remember to add `role`/`aria-live` themselves.
              * @prop --bs-composer-status-banner-radius - Corner radius of the top-left/top-right corners
              * (bottom corners are square, so this sits flush above `bs-composer`). Aliased to
              * `--bs-border-radius-150`.
@@ -3686,6 +6213,66 @@ declare module "@stencil/core" {
              * - Deeply nested/hierarchical data — this component renders one flat row per record.
              */
             "bs-data-table": LocalJSX.IntrinsicElements["bs-data-table"] & JSXBase.HTMLAttributes<HTMLBsDataTableElement>;
+            /**
+             * An overlay dialog that interrupts the current flow for a focused task or confirmation.
+             * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
+             * ## When to use
+             * - Confirming a consequential action (e.g. "Confirm booking") before it takes effect.
+             * - A short, focused task that doesn't warrant navigating to a new page.
+             * ## When not to use
+             * - For non-blocking status messages — use a toast/notification instead of interrupting the user.
+             * - For a long, multi-step flow — a full page or a dedicated route is usually a better fit than a
+             *   dialog that just gets taller and taller.
+             * Two additional slots cover the Figma "Dialog" component's other states: `image` (a hero image
+             * across the top, close button floats over it instead of sitting in the header row) and `icon`
+             * (only rendered when `centered` is set, e.g. a success checkmark above a centered heading). The
+             * close button "floats" (absolute-positioned, top-right of the dialog, with its own background)
+             * whenever `centered` is true or the `image` slot has content -- otherwise it's the plain inline
+             * button in the header row next to the heading, same as before this addition.
+             */
+            "bs-dialog": LocalJSX.IntrinsicElements["bs-dialog"] & JSXBase.HTMLAttributes<HTMLBsDialogElement>;
+            /**
+             * A clickable, icon-only action element -- the icon-only sibling of `bs-button`, sharing the same
+             * 8 visual variants and color language, but ALWAYS rendering just a single icon, never a label.
+             * ## When to use
+             * - A compact action where the icon alone is unambiguous (e.g. a close/dismiss control, a toolbar
+             *   action) and adding a text label would take up more space than the context allows.
+             * - The same variant guidance as `bs-button` applies: `primary` for the single most important
+             *   action, `neutral`/`subtle`/`outlined` for lower-emphasis alternatives, `error` reserved for
+             *   destructive/irreversible actions (never `neutral`, per BrandSync guidance), `success`/
+             *   `warning`/`info` only when the action's own outcome is predictable and clearly communicated.
+             * ## When not to use
+             * - When the action isn't self-evident from the icon alone -- use `bs-button` with a visible label
+             *   instead, don't rely on a tooltip to compensate for an unclear icon.
+             * - For navigation between pages -- use a link/nav component instead.
+             * Because this component is always icon-only, `ariaLabel` is required for every real usage (not
+             * just conditionally, unlike `bs-button`) -- there's no visible label text to fall back on for an
+             * accessible name.
+             */
+            "bs-icon-button": LocalJSX.IntrinsicElements["bs-icon-button"] & JSXBase.HTMLAttributes<HTMLBsIconButtonElement>;
+            /**
+             * A pill-shaped tab button -- an optional leading icon plus a text label, rendered as a real
+             * `<button>` so it participates correctly in tab order and native click/keyboard activation.
+             * Unlike `bs-tab`'s underline indicator, selection here is communicated entirely by the pill's
+             * background fill color -- there is no separate indicator element.
+             * ## When to use
+             * - As one button within a segmented-control-style tab bar, where exactly one tab is
+             *   selected/active at a time.
+             * ## When not to use
+             * - As a standalone action button -- use `bs-button` instead, `bs-inline-tab`'s visual language
+             *   (muted pill until selected/hovered) only makes sense as part of a set.
+             * `selected` is NOT self-toggling -- clicking a `bs-inline-tab` only emits `bsSelect`, it does not
+             * set its own `selected` prop, and it does not unselect any sibling tabs. Wrap your
+             * `<bs-inline-tab>` elements in `<bs-tabs type="bs-inline-tab">` -- it owns `role="tablist"` and
+             * coordinates selection (listening for `bsSelect` and setting `selected`/`false` across siblings)
+             * for you. Using `bs-inline-tab` standalone, outside a `<bs-tabs>` wrapper, still means `selected`
+             * doesn't self-toggle and `role="tablist"` isn't provided automatically -- a consumer doing that
+             * would still need to coordinate `selected` and supply `role="tablist"` manually, same as
+             * `bs-tab.mdx`/`bs-radio.mdx` document for their own components. See `bs-inline-tab.mdx`'s
+             * Accessibility section for the full requirement, including `role="tabpanel"` on the corresponding
+             * content panels.
+             */
+            "bs-inline-tab": LocalJSX.IntrinsicElements["bs-inline-tab"] & JSXBase.HTMLAttributes<HTMLBsInlineTabElement>;
             /**
              * A single-line text field with an optional label, description, and error state. Also covers a
              * range of related "field" shapes (number stepper, password reveal, date, dropdown trigger,
@@ -3703,6 +6290,31 @@ declare module "@stencil/core" {
              *   options list at all (freeform chip entry).
              */
             "bs-input": LocalJSX.IntrinsicElements["bs-input"] & JSXBase.HTMLAttributes<HTMLBsInputElement>;
+            /**
+             * The BrandSync brand mark, as its own standalone component -- shared by `bs-navigation-header`
+             * and `bs-navigation-drawer`, which used to each render their own duplicated copy of this SVG
+             * (the drawer's collapsed state even faked an icon-only look by clipping the full wordmark asset
+             * down to a narrowed box, rather than using a real icon-only asset).
+             * ## When to use
+             * - Anywhere the BrandSync logo/icon needs to render: a navigation header, a nav drawer, etc.
+             * ## When not to use
+             * - The Genie AI chat panel's own brand mark -- that's a different logo (`bs-chatbot-header`'s
+             *   own inline Genie asset), not this one.
+             * `variant` mirrors Figma's "Logo" component set (node 10909:30421) `Device` property
+             * ("Desktop" / "Tab and mobile"), which was originally meant to distinguish the full lockup from
+             * the icon-only mark at different responsive breakpoints -- renamed here to
+             * `variant: 'full' | 'mark'` since that's what it actually controls (how much of the logo
+             * renders), not literally a device/breakpoint switch.
+             * `variant="custom"` is not a Figma variant at all -- it's an escape hatch for a consuming app
+             * that needs to show a DIFFERENT product's logo in the same slot (e.g. a white-labeled deployment,
+             * or a logo fetched at runtime from a service like brand.dev), via `src`/`alt`, instead of the
+             * built-in BrandSync assets. This component deliberately does NOT fetch that image itself --
+             * network calls, loading/error states, and caching are the consuming app's responsibility, same as
+             * every other component in this library (e.g. `bs-attachment` takes `imageSrc` rather than fetching
+             * an image on its own). `background` has no effect on `variant="custom"` -- a consumer's own image
+             * is already designed for whatever surface it's placed on.
+             */
+            "bs-logo": LocalJSX.IntrinsicElements["bs-logo"] & JSXBase.HTMLAttributes<HTMLBsLogoElement>;
             /**
              * A generic dropdown/popup menu container: a rounded, elevated list of items (typically
              * `bs-menu-item` elements).
@@ -3743,17 +6355,151 @@ declare module "@stencil/core" {
              */
             "bs-menu-item": LocalJSX.IntrinsicElements["bs-menu-item"] & JSXBase.HTMLAttributes<HTMLBsMenuItemElement>;
             /**
-             * An overlay dialog that interrupts the current flow for a focused task or confirmation.
-             * Closes itself on backdrop click, Escape, or its own close button, and emits `bsClose`.
+             * A left-side persistent navigation sidebar: the BrandSync logo, a "Main Menu" title with a
+             * collapse toggle, a reserved slot for a search field, and a scrollable list of nav items.
              * ## When to use
-             * - Confirming a consequential action (e.g. "Confirm booking") before it takes effect.
-             * - A short, focused task that doesn't warrant navigating to a new page.
+             * - The primary in-app navigation, shown alongside `bs-navigation-header` (typically that
+             *   header's `with-navigation-drawer` alignment, which omits its own logo since this component
+             *   already renders one -- or the reverse pairing, this drawer's own `showLogo={false}` alongside
+             *   a header that keeps its logo instead, see that prop's own docs).
              * ## When not to use
-             * - For non-blocking status messages — use a toast/notification instead of interrupting the user.
-             * - For a long, multi-step flow — a full page or a dedicated route is usually a better fit than a
-             *   modal that just gets taller and taller.
+             * - The top navigation bar itself -- use `bs-navigation-header` instead.
+             * This component renders a real `<nav>` landmark (no explicit `role` needed -- `<nav>` already
+             * carries the implicit `navigation` role), labeled via `aria-label={heading}` so the landmark
+             * still has a name even when collapsed (see below).
+             * `collapsed` narrows the drawer to a 96px icon-only rail, per Figma node 8028:135374
+             * ("Type=Collapsed"): the title text disappears, the logo swaps from the full "EG BrandSync"
+             * wordmark (`bs-logo variant="full"`) to the real icon-only mark (`bs-logo variant="mark"` -- a
+             * second, properly-designed asset, not a CSS crop of the full one) via CSS visibility toggling on
+             * both, the same `:host([collapsed])` attribute-selector pattern already used for the
+             * `search`/`search-trigger` swap below, the `search` slot is replaced by a compact built-in
+             * search-trigger button (this component can't meaningfully shrink arbitrary slotted search-field
+             * content down to icon size itself, so it emits `bsSearchClick` instead -- e.g. to open a full
+             * search overlay), and every top-level
+             * `bs-navigation-drawer-item`'s layout switches from icon-beside-label to icon-above-caption.
+             * That last part is real prop propagation, not a CSS trick: this component keeps each direct-child
+             * item's own `collapsed` prop in sync with its own (see `syncItemsCollapsed` below), the same
+             * direct-children-prop-sync approach `bs-tabs` already uses for coordinating `selected` across its
+             * `bs-tab` children. Clicking the toggle self-toggles `collapsed` (simple local UI state, not
+             * something needing cross-component coordination -- closer to `bs-switch`'s self-toggling
+             * `checked` than `bs-tab`'s non-self-toggling `selected`) and emits `bsCollapse` with the new
+             * value. The toggle's own caret icon does NOT rotate when collapsed -- Figma's collapsed mock
+             * reuses the identical left-pointing "CaretLeft" asset unchanged, confirmed by directly inspecting
+             * that state, so this deliberately does not add the same "flip on toggle" idiom the drawer item's
+             * own disclosure chevron does (that one really is an unconfirmed addition; this one was checked).
+             */
+            "bs-navigation-drawer": LocalJSX.IntrinsicElements["bs-navigation-drawer"] & JSXBase.HTMLAttributes<HTMLBsNavigationDrawerElement>;
+            /**
+             * A single row within a `bs-navigation-drawer`'s item list -- either a plain leaf nav item, or an
+             * `expandable` group header that discloses nested `bs-navigation-drawer-item` children.
+             * ## When to use
+             * - Every row inside a `bs-navigation-drawer`'s default slot.
+             * ## When not to use
+             * - A standalone action outside a navigation drawer -- use `bs-button`/`bs-menu-item` instead.
+             * Click behavior is mutually exclusive, based on `expandable`:
+             * - `expandable = false` (a plain leaf item): clicking only emits `bsSelect`. `selected` is NOT
+             *   self-toggling -- same non-self-toggling precedent as `bs-tab`'s `selected` (see `bs-tab.tsx`'s
+             *   class doc): coordinating which sibling row is selected needs cross-item state a
+             *   consumer/wrapper owns, not something this component can reason about on its own.
+             * - `expandable = true` (a group header, never shown with a `selected` tint): clicking toggles
+             *   `this.expanded` directly and emits `bsToggle` with the new value, and does NOT emit
+             *   `bsSelect`. This IS self-toggling, unlike `selected` above -- it's simple local disclosure
+             *   state with no cross-item coordination needed, closer to `bs-switch`'s self-toggling `checked`
+             *   than `bs-tab`'s non-self-toggling `selected`.
+             * Nesting: put child `<bs-navigation-drawer-item nested>` elements inside a parent
+             * `<bs-navigation-drawer-item expandable>` with `slot="children"`. The parent shows/hides that
+             * slot's content based on its own `expanded` prop, via a pure-CSS attribute selector (no JS
+             * visibility toggling needed, since `expanded` is reflected).
+             * `collapsed` switches this row from its normal icon-beside-label row layout to a compact
+             * icon-above-caption column (per Figma node 8028:135374, the drawer's "Type=Collapsed" state) --
+             * you don't need to set this yourself on every item: a parent `bs-navigation-drawer` keeps its own
+             * top-level items' `collapsed` prop in sync with its own `collapsed` state automatically (see
+             * `bs-navigation-drawer.tsx`'s `syncItemsCollapsed`, the same direct-children-prop-sync approach
+             * `bs-tabs` uses for coordinating `selected` across its own `bs-tab` children). It's still a public
+             * prop so a standalone item (or this component's own stories) can be demoed without the parent.
+             */
+            "bs-navigation-drawer-item": LocalJSX.IntrinsicElements["bs-navigation-drawer-item"] & JSXBase.HTMLAttributes<HTMLBsNavigationDrawerItemElement>;
+            /**
+             * The top-level navigation bar for a page: the BrandSync logo plus two consumer-provided slots
+             * for menu/action content (e.g. `bs-button`/`bs-icon-button` elements).
+             * ## When to use
+             * - The persistent top bar of an application, above the page content.
+             * ## When not to use
+             * - The header of a Genie AI chat panel -- use `bs-chatbot-header` instead, which is purpose-built
+             *   for that narrower layout and its own fixed action buttons.
+             * `alignment` controls both whether the logo renders and how the two slots are laid out:
+             * - `default` (default): logo on the left, `left` slot content immediately after it, `right` slot
+             *   content pushed to the far right.
+             * - `center`: logo and `right` slot both grow equally (`flex: 1`), which centers the `left` slot
+             *   content in the middle of the bar.
+             * - `with-navigation-drawer`: no logo at all (this variant assumes a nav-drawer toggle is the
+             *   leftmost thing on the page instead) -- `left` slot content starts at the bar's own left edge,
+             *   `right` slot content pushed to the far right.
+             */
+            "bs-navigation-header": LocalJSX.IntrinsicElements["bs-navigation-header"] & JSXBase.HTMLAttributes<HTMLBsNavigationHeaderElement>;
+            /**
+             * A numbered page control -- previous/next chevrons, page-number buttons, and `...` overflow for
+             * large page counts. Matches the Figma "Pagination" component's "Default" type (the classic
+             * numbered pagination); its other type ("jumper" -- a rows-per-page dropdown plus a page-jump
+             * input) is a structurally different composite widget and isn't covered by this component.
+             * `totalPages`/`currentPage` drive everything -- this computes which page numbers to show and
+             * where to collapse into `...` itself, the consumer never builds the button list by hand.
+             * ## When to use
+             * - Paging through a large, ordered result set (a table, a search results list) where jumping
+             *   directly to a specific page number is useful.
+             * ## When not to use
+             * - Infinite-scroll or "load more" patterns -- those don't have a fixed, addressable page number.
+             * - A huge page count where users realistically only ever go forward/back one page at a time --
+             *   plain prev/next controls (no numbers) are simpler there.
+             */
+            "bs-pagination": LocalJSX.IntrinsicElements["bs-pagination"] & JSXBase.HTMLAttributes<HTMLBsPaginationElement>;
+            /**
+             * A single radio button with its label, for one mutually-exclusive choice within a group.
+             * ## When to use
+             * - One option within a set of mutually-exclusive choices, where all options should stay visible
+             *   (a radio group).
+             * ## When not to use
+             * - An independent, non-exclusive binary choice, or one item in a set of independent choices --
+             *   use `bs-checkbox` instead.
+             * - An on/off setting that takes effect immediately (no explicit form submission) -- use `bs-switch`.
+             */
+            "bs-radio": LocalJSX.IntrinsicElements["bs-radio"] & JSXBase.HTMLAttributes<HTMLBsRadioElement>;
+            /**
+             * A slider for picking a single numeric value (`type="default"`), a value snapped to evenly
+             * spaced ticks (`type="segmented"`), or a min/max pair (`type="range"`) from within a bounded
+             * `min`/`max` range.
+             * ## When to use
+             * - A numeric value that's easiest to reason about relative to its bounds (volume, brightness,
+             *   a price range) rather than typed digit-by-digit.
+             * - `type="segmented"` when only a fixed number of discrete stops make sense (e.g. a 5-star
+             *   rating-like scale) but a visual track is still preferable to discrete buttons.
+             * - `type="range"` for picking a min/max pair (e.g. a price range filter) with two thumbs.
+             * ## When not to use
+             * - A precise value where mis-dragging by a pixel matters more than the at-a-glance bounds --
+             *   use `bs-input[type="number"]` instead.
+             * - A small, fixed set of mutually exclusive choices -- use a radio group instead.
+             */
+            "bs-slider": LocalJSX.IntrinsicElements["bs-slider"] & JSXBase.HTMLAttributes<HTMLBsSliderElement>;
+            /**
+             * A transient status bar for confirming the result of an action (e.g. "Files uploaded
+             * successfully.") -- an icon (or loading spinner), a message, an optional action, and a close
+             * button.
+             * This component only renders the bar itself -- it doesn't manage its own visibility, timing, or
+             * stacking. A consumer (typically a small "toast manager" utility) creates one per message and
+             * removes it from the DOM again, whether on a timer or on `bsDismiss`. Figma's spec doesn't show
+             * auto-dismiss timing at all (it's a static visual spec), so this deliberately doesn't invent one.
+             * The icon is always the same checkmark glyph across every `variant`, just recolored -- matching
+             * the Figma spec exactly, even though a checkmark for `variant="error"` reads a little oddly
+             * semantically. Worth revisiting with severity-specific icons (warning triangle, error circle,
+             * etc.) if the design updates to specify them.
+             * ## When to use
+             * - Confirming the outcome of an action that just happened (save succeeded, upload failed) without
+             *   interrupting the user's flow.
+             * ## When not to use
+             * - For a response that requires the user to make a decision before continuing -- use `bs-dialog`.
+             * - For persistent, always-visible status -- a snackbar is inherently transient.
              */
-            "bs-modal": LocalJSX.IntrinsicElements["bs-modal"] & JSXBase.HTMLAttributes<HTMLBsModalElement>;
+            "bs-snackbar": LocalJSX.IntrinsicElements["bs-snackbar"] & JSXBase.HTMLAttributes<HTMLBsSnackbarElement>;
             /**
              * A single citation row inside `bs-chatbot-sources-drawer` -- a file icon + filename on the first
              * line, the originating system and version on the second, and a trailing "open" arrow.
@@ -3780,6 +6526,54 @@ declare module "@stencil/core" {
              * `--bs-text-secondary`.
              */
             "bs-source-link": LocalJSX.IntrinsicElements["bs-source-link"] & JSXBase.HTMLAttributes<HTMLBsSourceLinkElement>;
+            /**
+             * A toggle switch for an on/off setting that takes effect immediately (no explicit form
+             * submission required).
+             * ## When to use
+             * - A binary setting that applies right away (e.g. "Enable notifications", "Dark mode").
+             * ## When not to use
+             * - A binary choice that's part of a form submitted later, or one item within a group of
+             *   independent choices -- use `bs-checkbox` instead.
+             * - A single mutually-exclusive choice from a set -- use a radio group instead.
+             */
+            "bs-switch": LocalJSX.IntrinsicElements["bs-switch"] & JSXBase.HTMLAttributes<HTMLBsSwitchElement>;
+            /**
+             * A single tab button -- an optional icon plus a text label, rendered as a real `<button>` so it
+             * participates correctly in tab order and native click/keyboard activation.
+             * ## When to use
+             * - As one button within a tab bar, where exactly one tab is selected/active at a time.
+             * ## When not to use
+             * - As a standalone action button -- use `bs-button` instead, `bs-tab`'s visual language (muted
+             *   until selected/hovered, underline indicator) only makes sense as part of a set.
+             * `selected` is NOT self-toggling -- clicking a `bs-tab` only emits `bsSelect`, it does not set its
+             * own `selected` prop, and it does not unselect any sibling tabs. Wrap your `<bs-tab>` elements in
+             * `<bs-tabs type="bs-tab">` -- it owns `role="tablist"` and coordinates selection (listening for
+             * `bsSelect` and setting `selected`/`false` across siblings) for you. Using `bs-tab` standalone,
+             * outside a `<bs-tabs>` wrapper, still means `selected` doesn't self-toggle and `role="tablist"`
+             * isn't provided automatically -- a consumer doing that would still need to coordinate `selected`
+             * and supply `role="tablist"` manually, same as `bs-radio.mdx` documents for `bs-radio`'s missing
+             * `bs-radio-group`. See `bs-tab.mdx`'s Accessibility section for the full requirement, including
+             * `role="tabpanel"` on the corresponding content panels.
+             */
+            "bs-tab": LocalJSX.IntrinsicElements["bs-tab"] & JSXBase.HTMLAttributes<HTMLBsTabElement>;
+            /**
+             * A tab-group wrapper: owns `role="tablist"` and coordinates selection across its slotted
+             * `<bs-tab>` or `<bs-inline-tab>` children, so consumers no longer have to hand-roll this.
+             * `bs-tab.mdx`/`bs-inline-tab.mdx` previously documented this coordination -- listening for
+             * `bsSelect` and setting `selected`/`false` on siblings, plus supplying `role="tablist"` on
+             * whatever element groups the tabs -- as a "Known gap"/manual consumer responsibility. This
+             * component is that wrapper: it renders the `role="tablist"` element and listens for `bsSelect`
+             * itself. Using `<bs-tab>`/`<bs-inline-tab>` standalone, outside a `<bs-tabs>` wrapper, still means
+             * `selected` doesn't self-toggle -- a consumer doing that would still need to coordinate `selected`
+             * manually -- but that's no longer the first recommended path.
+             * ## When to use
+             * - Wrapping a set of `<bs-tab>` (underline style) or `<bs-inline-tab>` (pill style) elements that
+             *   should behave as a single-selection tab bar.
+             * ## When not to use
+             * - For a single, standalone tab button not participating in a group -- use `bs-tab`/`bs-inline-tab`
+             *   directly.
+             */
+            "bs-tabs": LocalJSX.IntrinsicElements["bs-tabs"] & JSXBase.HTMLAttributes<HTMLBsTabsElement>;
             /**
              * A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
              * next to a trigger element.