@brandsync/wc 0.0.11 → 0.0.12

package/dist/types/components.d.ts

@@ -7,24 +7,38 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BsAttachmentType } from "./components/bs-attachment/bs-attachment";
 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 { 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 { 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 { BsIconButtonSize, BsIconButtonVariant } from "./components/bs-button/bs-icon-button/bs-icon-button";
+import { BsLogoBackground, BsLogoVariant } from "./components/bs-logo/bs-logo";
 import { BsModalSize } from "./components/bs-modal/bs-modal";
+import { BsNavigationHeaderAlignment } from "./components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header";
+import { BsSliderType } from "./components/bs-slider/bs-slider";
+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 { 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 { 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 { 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 { BsIconButtonSize, BsIconButtonVariant } from "./components/bs-button/bs-icon-button/bs-icon-button";
+export { BsLogoBackground, BsLogoVariant } from "./components/bs-logo/bs-logo";
 export { BsModalSize } from "./components/bs-modal/bs-modal";
+export { BsNavigationHeaderAlignment } from "./components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header";
+export { BsSliderType } from "./components/bs-slider/bs-slider";
+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 +128,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 +147,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 {
         /**
@@ -233,6 +241,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 +543,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
@@ -587,6 +605,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 +623,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 +644,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 +764,90 @@ export namespace Components {
          */
         "sortDirection": 'asc' | 'desc';
     }
+    /**
+     * 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 +958,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).
@@ -918,6 +1073,271 @@ export namespace Components {
          */
         "size": BsModalSize;
     }
+    /**
+     * 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).
+     * ## 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';
+    }
+    /**
+     * 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 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 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.
@@ -967,6 +1387,107 @@ export namespace Components {
          */
         "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 {
+        /**
+          * 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.
@@ -1042,6 +1563,10 @@ export interface BsDataTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsDataTableElement;
 }
+export interface BsInlineTabCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsInlineTabElement;
+}
 export interface BsInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsInputElement;
@@ -1054,10 +1579,34 @@ export interface BsModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsModalElement;
 }
+export interface BsNavigationDrawerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsNavigationDrawerElement;
+}
+export interface BsNavigationDrawerItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsNavigationDrawerItemElement;
+}
+export interface BsRadioCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsRadioElement;
+}
+export interface BsSliderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsSliderElement;
+}
 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 +1697,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 +1716,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;
@@ -1248,6 +1791,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 {
     }
@@ -1608,6 +2156,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 +2187,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,18 +2282,81 @@ declare global {
         prototype: HTMLBsDataTableElement;
         new (): HTMLBsDataTableElement;
     };
-    interface HTMLBsInputElementEventMap {
-        "bsInput": string;
-        "bsChange": string;
-        "bsOpen": boolean;
-        "bsChipAdd": string;
-        "bsChipRemove": string;
-        "bsTitleChange": string;
-        "bsCountryChange": string;
-    }
     /**
-     * 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,
+     * 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;
+        "bsOpen": boolean;
+        "bsChipAdd": string;
+        "bsChipRemove": string;
+        "bsTitleChange": string;
+        "bsCountryChange": string;
+    }
+    /**
+     * 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,
      * select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
      * share the same label/description/error/icon-slot chrome.
      * ## When to use
@@ -1766,6 +2384,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).
@@ -1854,6 +2502,187 @@ declare global {
         prototype: HTMLBsModalElement;
         new (): HTMLBsModalElement;
     };
+    interface HTMLBsNavigationDrawerElementEventMap {
+        "bsCollapse": boolean;
+        "bsSearchClick": 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).
+     * ## 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 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 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 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 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 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 HTMLBsSourceLinkElementEventMap {
         "bsOpen": void;
     }
@@ -1896,6 +2725,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.
@@ -1948,11 +2862,22 @@ declare global {
         "bs-composer": HTMLBsComposerElement;
         "bs-composer-status-banner": HTMLBsComposerStatusBannerElement;
         "bs-data-table": HTMLBsDataTableElement;
+        "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-radio": HTMLBsRadioElement;
+        "bs-slider": HTMLBsSliderElement;
         "bs-source-link": HTMLBsSourceLinkElement;
+        "bs-switch": HTMLBsSwitchElement;
+        "bs-tab": HTMLBsTabElement;
+        "bs-tabs": HTMLBsTabsElement;
         "bs-tooltip": HTMLBsTooltipElement;
     }
 }
@@ -2045,7 +2970,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 +2989,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 {
         /**
@@ -2168,6 +3087,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 +3457,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
@@ -2594,6 +3523,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 +3565,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 +3586,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 +3716,94 @@ declare namespace LocalJSX {
          */
         "sortDirection"?: 'asc' | 'desc';
     }
+    /**
+     * 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 +3936,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).
@@ -2986,6 +4056,299 @@ declare namespace LocalJSX {
          */
         "size"?: BsModalSize;
     }
+    /**
+     * 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).
+     * ## 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;
+    }
+    /**
+     * 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 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 {
+        /**
+          * 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;
+        /**
+          * 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;
+    }
     /**
      * 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.
@@ -3039,6 +4402,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.
@@ -3136,6 +4608,7 @@ declare namespace LocalJSX {
         "indeterminate": boolean;
         "disabled": boolean;
         "error": boolean;
+        "ariaLabel": string | null;
     }
     interface BsComposerAttributes {
         "variant": BsComposerVariant;
@@ -3157,6 +4630,18 @@ declare namespace LocalJSX {
         "sortDirection": 'asc' | 'desc';
         "selectable": 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,6 +4672,12 @@ declare namespace LocalJSX {
         "length": number;
         "open": boolean;
     }
+    interface BsLogoAttributes {
+        "variant": BsLogoVariant;
+        "background": BsLogoBackground;
+        "src": string | null;
+        "alt": string | null;
+    }
     interface BsMenuItemAttributes {
         "disabled": boolean;
     }
@@ -3195,6 +4686,47 @@ declare namespace LocalJSX {
         "heading": string;
         "size": BsModalSize;
     }
+    interface BsNavigationDrawerAttributes {
+        "heading": string;
+        "collapsible": boolean;
+        "collapsed": boolean;
+        "logoBackground": 'auto' | 'light' | 'dark';
+    }
+    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 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 BsSourceLinkAttributes {
         "fileName": string;
         "sourceName": string;
@@ -3202,6 +4734,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';
     }
@@ -3225,11 +4773,22 @@ declare namespace LocalJSX {
         "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-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-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-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 +4867,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 +4886,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>;
             /**
@@ -3385,6 +4938,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>;
             /**
@@ -3614,6 +5172,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 +5186,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 +5251,48 @@ 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>;
+            /**
+             * 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 +5310,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).
@@ -3754,6 +5386,115 @@ declare module "@stencil/core" {
              *   modal that just gets taller and taller.
              */
             "bs-modal": LocalJSX.IntrinsicElements["bs-modal"] & JSXBase.HTMLAttributes<HTMLBsModalElement>;
+            /**
+             * 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).
+             * ## 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).
+             */
+            "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 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 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 +5521,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.