bitboss-ui 3.0.0-beta.28 → 3.0.0-beta.30

package/bin/bitboss-ui.mjs

@@ -101,7 +101,7 @@ function coreRules(version) {
 5. **Icons**: discover names first; never invent them (\`${KNOWLEDGE_BASE}/guides/icons-policy.md\`).
 6. **Item-driven components**: declarative \`items\` / \`item-text\` / \`item-value\`, \`dependencies\`, \`enforce-coherence\` — no manual watchers for coherence.
 7. **Whole pages**: one recipe under \`${KNOWLEDGE_BASE}/recipes/{vue|nuxt|inertia}/\` (see the router table).
-8. **CSS near components**: \`${KNOWLEDGE_BASE}/guides/design-language.md\`. Two token tiers, and reaching for the wrong one is why apps end up re-skinning by class: \`--bb-*\` is the small GLOBAL theme tier (brand knobs, ~90 names, no numeric ramp — there is no \`--bb-primary-800\`), while each component declares its own **unprefixed** \`--*\` tokens for its look (\`.bb-table { --cell-h: 32px }\`). A missing \`--bb-*\` name is not a gap in the library — it means the knob you want is a component token. Set it on the element that DECLARES it (grep \`${KNOWLEDGE_BASE}/source/<ComponentName>.md\`); a value set further out is masked, not inherited. Never override \`.bb-*__*\` internals, and never target \`.bb-base-*\` / \`.bb-common-*\` at all. **A Tailwind utility on a \`Bb*\` component that does nothing** is not a library bug: Tailwind v4 emits layered CSS and unlayered CSS outranks it, whatever the specificity. The fix is in the BUILD plugin, not in CSS — \`cssLayers: TAILWIND_V4_LAYERS\` (imported from \`bitboss-ui/vite\`) in \`vite.config.*\` / \`nuxt.config.*\`; see \`${KNOWLEDGE_BASE}/guides/installation-and-plugin-setup.md\` § Cascade layers. One primary action per view region.
+8. **CSS near components**: \`${KNOWLEDGE_BASE}/guides/design-language.md\`. Two token tiers, and reaching for the wrong one is why apps end up re-skinning by class: \`--bb-*\` is the small GLOBAL theme tier (brand knobs, ~90 names, no numeric ramp — there is no \`--bb-primary-800\`), while each component declares its own **unprefixed** \`--*\` tokens for its look (\`.bb-table { --cell-h: 32px }\`). A missing \`--bb-*\` name is not a gap in the library — it means the knob you want is a component token. Set it on the element that DECLARES it (grep \`${KNOWLEDGE_BASE}/source/<ComponentName>.md\`); a value set further out is masked, not inherited. Prefer tokens, variants and \`pt\`; CSS on \`.bb-*__*\` internals is allowed for fine-tuning but unsupported: it can break on upgrade. \`.bb-common-*\` / \`.bb-field*\` internals: expect it to break. (\`.bb-base-button\` and the three \`.bb-base-*-icon\` glyph classes are consumer API — a supported hook, not an internal.) An override on an internal is a signal to check for a \`pt\` part or request one. **A Tailwind utility on a \`Bb*\` component that does nothing** is not a library bug: Tailwind v4 emits layered CSS and unlayered CSS outranks it, whatever the specificity. The fix is in the BUILD plugin, not in CSS — \`cssLayers: TAILWIND_V4_LAYERS\` (imported from \`bitboss-ui/vite\`) in \`vite.config.*\` / \`nuxt.config.*\`; see \`${KNOWLEDGE_BASE}/guides/installation-and-plugin-setup.md\` § Cascade layers. One primary action per view region.
 9. **Variants are yours to add**: the shipped \`variant\` names are a floor, not a ceiling. When the design needs a colour the library doesn't ship (soft status badges, a brand button tone), **register the name** in the build plugin's \`badgeVariants\`/\`buttonVariants\`/\`alertVariants\`/… and **style \`.bb-badge--<name>\`** (etc.) in a project stylesheet loaded after \`bitboss-ui/styles.css\`. Do both halves — a registered name with no CSS ships an unstyled pill, and CSS with no registration fails \`vue-tsc\`. Never write an unregistered name, and never downgrade the design to a neutral shipped variant to avoid registering. Canonical palette + snippet: \`${KNOWLEDGE_BASE}/guides/design-language.md\` § Getting soft semantic badges.
 10. **After writing bitboss-ui markup**, run \`npx bitboss-ui check\` — validates \`Bb*\` usage against the installed \`components.json\` and catches invented/removed props before review.
 

package/dist/ai/BbAccordion.md

@@ -10,7 +10,7 @@
 
 ## Reachable through `BbAccordion`
 
-`BbAccordion` mounts other components (all of them: _Component tree_, near the end). These are the parts of its API that land inside them. Use them — never `:deep()` on an inner class, never an import of an internal component.
+`BbAccordion` mounts other components (all of them: _Component tree_, near the end). These are the parts of its API that land inside them. Prefer these over `:deep()` on an inner class (allowed, unsupported: it can break on upgrade) — and never an import of an internal component.
 
 | pt part | Lands on | In |
 | --- | --- | --- |
@@ -617,12 +617,28 @@ grammar, the merge rules and the global map are in the
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
-| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `header`, `panel`, `root`. States: `open`. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
+| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `header`, `panel`, `root`. States: `open`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `eager` | `boolean \| undefined` | `false` |  | Prevents rendering content before it's made visible. |
 | `id` | `string \| undefined` |  |  | The identifier of the component. |
 | `modelValue` | `boolean \| undefined` | `false` |  | Used by v-model to trigger opening / closing the collapsible. An accordion with no `v-model` starts closed. |
 | `transitionDuration` | `number \| undefined` | `250` |  | How long the transition has to last in milliseconds |
 
+## Passthrough parts and states
+
+`pt:<part>="…"` restyles a part; `pt:<part>:<state>="…"` applies only while the state is on. A component-wide state is on for every part at once; a _per node_ state resolves on each node of a broadcast part (one row, one option, one day). Grammar and merge rules: `guides/passthrough.md`.
+
+| Part | What it is |
+| --- | --- |
+| `root` | The accordion's outer element: the header and its panel. |
+| `header` | The trigger button that opens and closes the panel. Its content is your slot markup — there is no chevron of ours, so no `icon` part. |
+| `panel` | The region the header controls (the ARIA accordion panel). |
+
+States are listed in precedence order: when two are on at once and their entries conflict, the later one wins.
+
+| State | When it is on |
+| --- | --- |
+| `open` | Component-wide: the panel is open (follows `v-model`). |
+
 ## Events
 
 - `update:modelValue` — `(event: "update:modelValue", value: boolean): void`

package/dist/ai/BbAlert.md

@@ -10,7 +10,7 @@
 
 ## Reachable through `BbAlert`
 
-`BbAlert` mounts other components (all of them: _Component tree_, near the end). These are the parts of its API that land inside them. Use them — never `:deep()` on an inner class, never an import of an internal component.
+`BbAlert` mounts other components (all of them: _Component tree_, near the end). These are the parts of its API that land inside them. Prefer these over `:deep()` on an inner class (allowed, unsupported: it can break on upgrade) — and never an import of an internal component.
 
 | pt part | Lands on | In |
 | --- | --- | --- |
@@ -448,7 +448,7 @@ full grammar, the merge rules and the global map are in the
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
-| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `close`, `icon`, `root`, `text`, `title`. States: . `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
+| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `close`, `icon`, `root`, `text`, `title`. States: —. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `ariaLive` | `"off" \| "polite" \| "assertive" \| undefined` |  |  | ARIA live region politeness. Defaults to `'assertive'` for destructive/warning variants, otherwise `'polite'`. |
 | `closeLabel` | `string \| undefined` |  |  | Visually hidden string used to label the close button. |
 | `hideClose` | `boolean \| undefined` | `false` |  | Defines whether to hide the close button. |
@@ -461,6 +461,18 @@ full grammar, the merge rules and the global map are in the
 | `transitionDuration` | `number \| undefined` | `250` |  | Transition duration in milliseconds for enter/leave. |
 | `variant` | `keyof AlertVariantRegistry \| undefined` | `"outline"` |  | Visual variant of the alert. |
 
+## Passthrough parts and states
+
+`pt:<part>="…"` restyles a part; `pt:<part>:<state>="…"` applies only while the state is on. A component-wide state is on for every part at once; a _per node_ state resolves on each node of a broadcast part (one row, one option, one day). Grammar and merge rules: `guides/passthrough.md`.
+
+| Part | What it is |
+| --- | --- |
+| `root` | The alert box. |
+| `icon` | The leading glyph — rendered only when an `icon` is set. |
+| `title` | The heading line. |
+| `text` | The body copy. |
+| `close` | The ✕ that dismisses the alert. |
+
 ## Events
 
 - `update:modelValue` — `(event: "update:modelValue", value: boolean): void`

package/dist/ai/BbAsterisk.md

@@ -79,7 +79,15 @@ The full grammar, the merge rules and the global map are in the
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
-| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: . `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
+| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: —. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
+
+## Passthrough parts and states
+
+`pt:<part>="…"` restyles a part; `pt:<part>:<state>="…"` applies only while the state is on. A component-wide state is on for every part at once; a _per node_ state resolves on each node of a broadcast part (one row, one option, one day). Grammar and merge rules: `guides/passthrough.md`.
+
+| Part | What it is |
+| --- | --- |
+| `root` | The required-marker span. |
 
 ## Events
 

package/dist/ai/BbAvatar.md

@@ -10,7 +10,7 @@
 
 ## Reachable through `BbAvatar`
 
-`BbAvatar` mounts other components (all of them: _Component tree_, near the end). These are the parts of its API that land inside them. Use them — never `:deep()` on an inner class, never an import of an internal component.
+`BbAvatar` mounts other components (all of them: _Component tree_, near the end). These are the parts of its API that land inside them. Prefer these over `:deep()` on an inner class (allowed, unsupported: it can break on upgrade) — and never an import of an internal component.
 
 | pt part | Lands on | In |
 | --- | --- | --- |
@@ -614,7 +614,7 @@ available in visible text or an adjacent label.
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
-| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `icon`, `root`. States: . `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
+| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `icon`, `root`. States: —. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `alt` | `string \| undefined` | `""` |  | Alternative text for the image, used for accessibility. |
 | `size` | `number \| ({ size?: any; } & string) \| keyof Sizes \| undefined` | `"md"` |  | Defines the component size. Accepted values: - A key from the provided size map (`keyof T`), e.g. `'sm' \| 'md' \| 'lg'` - A custom CSS size string (e.g. `'20px'`, `'1.5rem'`, `'2em'`) - A number, typically interpreted as pixels by size par… |
 | `sizes` | `string \| undefined` |  |  | Sizes attribute for the image, used with `srcset`. |
@@ -622,6 +622,15 @@ available in visible text or an adjacent label.
 | `srcset` | `string \| undefined` |  |  | Responsive image source set. |
 | `timeout` | `number \| undefined` | `400` |  | Milliseconds to wait after mount before checking whether the image loaded correctly (SSR fallback). |
 
+## Passthrough parts and states
+
+`pt:<part>="…"` restyles a part; `pt:<part>:<state>="…"` applies only while the state is on. A component-wide state is on for every part at once; a _per node_ state resolves on each node of a broadcast part (one row, one option, one day). Grammar and merge rules: `guides/passthrough.md`.
+
+| Part | What it is |
+| --- | --- |
+| `root` | The avatar frame, with the image or the fallback inside. |
+| `icon` | The default user glyph — rendered only while there is no image to show and the default slot is not overridden, so it lands nowhere otherwise. |
+
 ## Events
 
 - None.

package/dist/ai/BbBadge.md

@@ -10,7 +10,7 @@
 
 ## Reachable through `BbBadge`
 
-`BbBadge` mounts other components (all of them: _Component tree_, near the end). These are the parts of its API that land inside them. Use them — never `:deep()` on an inner class, never an import of an internal component.
+`BbBadge` mounts other components (all of them: _Component tree_, near the end). These are the parts of its API that land inside them. Prefer these over `:deep()` on an inner class (allowed, unsupported: it can break on upgrade) — and never an import of an internal component.
 
 | pt part | Lands on | In |
 | --- | --- | --- |
@@ -839,7 +839,7 @@ The full grammar, the merge rules and the global map are in the
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
-| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `clear`, `icon`, `root`, `spinner`, `text`. States: `loading`. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
+| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `clear`, `icon`, `root`, `spinner`, `text`. States: `loading`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `append:icon` | `string \| undefined` |  |  | Icon rendered after the label. On a `clearable` badge it shares the trailing slot with the clear button: the icon shows at rest and the clear button reveals over it on hover/focus. |
 | `clearable` | `boolean \| undefined` | `false` |  | Renders a trailing clear button and emits `click:clear` when pressed — turns the badge into a dismissible token (the pattern formerly served by `BbChip`). |
 | `clearableLabel` | `string \| undefined` |  |  | Accessible label for the clear button. Rarely needed: unset, the name is **composed** from the localized `badge.clearLabel` verb and the badge's own text — "Remove Italy", not a bare "Remove" — which is already the right name in almost ever… |
@@ -849,6 +849,24 @@ The full grammar, the merge rules and the global map are in the
 | `size` | `keyof Sizes \| undefined` | `"md"` |  | Preset size of the badge. |
 | `variant` | `keyof BadgeVariantRegistry \| undefined` | `"primary"` |  | Visual variant: `primary`, `secondary`, `destructive`, or `outline`. Register more via the vite plugin `badgeVariants` option and style `.bb-badge--<variant>` (set `--bg` / `--fg`). |
 
+## Passthrough parts and states
+
+`pt:<part>="…"` restyles a part; `pt:<part>:<state>="…"` applies only while the state is on. A component-wide state is on for every part at once; a _per node_ state resolves on each node of a broadcast part (one row, one option, one day). Grammar and merge rules: `guides/passthrough.md`.
+
+| Part | What it is |
+| --- | --- |
+| `root` | The badge. |
+| `icon` | Every content glyph — the `icon`-mode glyph, `prepend:icon`, `append:icon` — a broadcast. The clear ✕ is not in it. |
+| `spinner` | The loading glyph. It REPLACES an icon while `loading` (on a button it joins one instead). |
+| `text` | The label span; it owns the truncation. |
+| `clear` | The ✕ that removes the badge (`clearable`). |
+
+States are listed in precedence order: when two are on at once and their entries conflict, the later one wins.
+
+| State | When it is on |
+| --- | --- |
+| `loading` | Component-wide: `loading` is on; the spinner takes an icon's place. |
+
 ## Events
 
 - `click:clear` — `(event: "click:clear", event: MouseEvent): void`
@@ -871,7 +889,7 @@ Set these on the element, or on a class you put on it, to retune this component
 | `--min-size-md` | `.bb-badge` | `16px` | The md value. Only the default --min-size below reads it; the size modifiers set --min-size directly. |
 | `--min-size` | `.bb-badge` | `var(--min-size-md)` | pill min height and min width |
 | `--elev` | `.bb-badge` | `var(--bb-elev-sm)` | Resting lift. Invisible while `--bb-elev` is its default transparent layer. A chip is small enough that a theme wanting a different lift here than on a button sets `--elev` on this class. |
-| `--radius` | `.bb-badge` | `calc(var(--bb-radius) * 0.5)` | Pill corners; the body and trailing wrappers round their outer edges to match |
+| `--r` | `.bb-badge` | `calc(var(--bb-radius) * 0.5)` | Pill corners; the body and trailing wrappers round their outer edges to match |
 | `--font-size` | `.bb-badge` | `10px` | label |
 | `--icon-size` | `.bb-badge` | `12px` | leading/append icons (passed to BbIcon as --size) |
 | `--gap` | `.bb-badge` | `3px` | space between label, icons and the trailing side |

package/dist/ai/BbBadgeButton.md

@@ -12,7 +12,7 @@
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
-| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: `disabled`. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
+| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: `disabled`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `activeClass` | `string \| undefined` | `'router-link-active'` |  | CSS class applied when the component renders as a link and the target of the link is the current route or the url matches partially. Ported for Inertia compatibility. |
 | `ariaCurrentValue` | `"page" \| "step" \| "location" \| "date" \| "time" \| "true" \| "false" \| undefined` | `'page'` |  | Value forwarded to the `aria-current` attribute when the component renders as a router link and the target route is an exact match. Use to communicate the current location to assistive technologies. |
 | `async` | `boolean \| undefined` | `false` |  | Inertia: runs the visit without blocking — the page stays interactive and several async visits can be in flight at once. |
@@ -54,6 +54,20 @@
 | `type` | `"button" \| "submit" \| "reset" \| undefined` | `'button'` |  | Native `type` attribute used when rendering as a button (e.g. `button`, `submit`, `reset`). |
 | `viewTransition` | `boolean \| undefined` | `false` |  | Inertia: run the page swap inside a View Transition, where the browser supports one. |
 
+## Passthrough parts and states
+
+`pt:<part>="…"` restyles a part; `pt:<part>:<state>="…"` applies only while the state is on. A component-wide state is on for every part at once; a _per node_ state resolves on each node of a broadcast part (one row, one option, one day). Grammar and merge rules: `guides/passthrough.md`.
+
+| Part | What it is |
+| --- | --- |
+| `root` | Whichever element renders — the `<button>`, the `<a>` or the router link. A `class` on the component lands here too. The label is your slot markup. |
+
+States are listed in precedence order: when two are on at once and their entries conflict, the later one wins.
+
+| State | When it is on |
+| --- | --- |
+| `disabled` | Component-wide: the button is `disabled`. |
+
 ## Events
 
 - None.
@@ -76,7 +90,7 @@ Set these on the element, or on a class you put on it, to retune this component
 | `--min-size-md` | `.bb-badge` | `16px` | The md value. Only the default --min-size below reads it; the size modifiers set --min-size directly. |
 | `--min-size` | `.bb-badge` | `var(--min-size-md)` | pill min height and min width |
 | `--elev` | `.bb-badge` | `var(--bb-elev-sm)` | Resting lift. Invisible while `--bb-elev` is its default transparent layer. A chip is small enough that a theme wanting a different lift here than on a button sets `--elev` on this class. |
-| `--radius` | `.bb-badge` | `calc(var(--bb-radius) * 0.5)` | Pill corners; the body and trailing wrappers round their outer edges to match |
+| `--r` | `.bb-badge` | `calc(var(--bb-radius) * 0.5)` | Pill corners; the body and trailing wrappers round their outer edges to match |
 | `--font-size` | `.bb-badge` | `10px` | label |
 | `--icon-size` | `.bb-badge` | `12px` | leading/append icons (passed to BbIcon as --size) |
 | `--gap` | `.bb-badge` | `3px` | space between label, icons and the trailing side |

package/dist/ai/BbBaseButton.md

@@ -10,7 +10,7 @@
 
 ## Reachable through `BbBaseButton`
 
-`BbBaseButton` mounts other components (all of them: _Component tree_, near the end). These are the parts of its API that land inside them. Use them — never `:deep()` on an inner class, never an import of an internal component.
+`BbBaseButton` mounts other components (all of them: _Component tree_, near the end). These are the parts of its API that land inside them. Prefer these over `:deep()` on an inner class (allowed, unsupported: it can break on upgrade) — and never an import of an internal component.
 
 | pt part | Lands on | In |
 | --- | --- | --- |
@@ -135,21 +135,26 @@ the right base for a clickable card or a bespoke nav item:
 </div>
 ```
 
-A whole card as a single navigable element — the primitive's signature use:
+A clickable card — the primitive's signature use. The card stays a plain box
+and one **overlay** `BbBaseButton` covers it (the stretched-link pattern), so
+the link's accessible name is a short visually-hidden phrase rather than the
+card's entire content, and the badge, the meta line and any nested control
+stay outside the link:
 
 **A clickable card built on the primitive**
 
 ```vue
 <template>
 	<div class="grid max-w-md gap-2 sm:grid-cols-2">
-		<!-- The whole card is ONE navigable element — a BbBaseButton rendered as an
-		     anchor, styled entirely by these utility classes. No wrapper <a>, no
-		     @click; navigation rides on `href` (a `to`/Inertia target works the same). -->
-		<BbBaseButton
+		<!-- The card is a plain box; ONE overlay BbBaseButton covers it (the
+		     stretched-link pattern). Its accessible name is the short sr-only
+		     text, not the card's whole content; the badge stays outside the link.
+		     Focus shows on the card via `has-focus-visible:`, never on the
+		     invisible overlay (`outline-none`). -->
+		<article
 			v-for="project in projects"
 			:key="project.name"
-			class="project-card flex flex-col items-start gap-1.5 rounded-(--bb-radius) border border-(--bb-border) bg-(--bb-panel) p-3 text-left hover:bg-(--bb-surface-hover)"
-			:href="project.href"
+			class="relative flex flex-col items-start gap-1.5 rounded-(--bb-radius) border border-(--bb-border) bg-(--bb-panel) p-3 hover:bg-(--bb-surface-hover) has-focus-visible:ring-2 has-focus-visible:ring-(--bb-ring)"
 		>
 			<span class="flex w-full items-center justify-between gap-2">
 				<span
@@ -161,7 +166,14 @@ A whole card as a single navigable element — the primitive's signature use:
 			</span>
 			<span class="text-sm font-medium">{{ project.name }}</span>
 			<span class="text-xs text-(--bb-text-muted)">{{ project.meta }}</span>
-		</BbBaseButton>
+
+			<BbBaseButton
+				class="absolute inset-0 rounded-[inherit] outline-none"
+				:href="project.href"
+			>
+				<span class="sr-only">Open {{ project.name }}</span>
+			</BbBaseButton>
+		</article>
 	</div>
 </template>
 
@@ -193,15 +205,23 @@ const projects: Project[] = [
 	},
 ];
 </script>
-
-<style scoped>
-/* Visible focus uses the base ring scaffold (box-shadow / --bb-ring). */
-.project-card:focus-visible {
-	box-shadow: 0 0 0 var(--bb-ring-size) var(--bb-ring);
-}
-</style>
 ```
 
+- **Overlay when** the card has several pieces of information, badges,
+  nested controls or long text. One `BbBaseButton` with `absolute inset-0`
+  and an `sr-only` name (`Open {{ project.name }}`) covers the box; nested
+  controls sit above it with `relative z-10` and stay clickable.
+- **Wrap when** the row's whole content _is_ its label — "Manage
+  subscription ›", a menu-like list row, an icon plus a word. Then the
+  element's own text is the right accessible name, and `BbBaseButton` wraps
+  it as in the pill above.
+- **Optional links:** render the overlay only when there is a destination
+  (`v-if="href"`); the card needs no other change — no `tag` switching.
+- **Focus:** the overlay is invisible, so show focus on the card
+  (`has-focus-visible:ring-2 has-focus-visible:ring-(--bb-ring)`) and drop it
+  from the overlay (`outline-none`; the primitive's own ring scaffold is
+  zero-width until you style it).
+
 ### Label
 
 Same as `BbButton`: **prefer the default slot** (`<BbBaseButton>Label</BbBaseButton>`);
@@ -485,7 +505,7 @@ The full grammar, the merge rules and the global map are in the
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
-| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: `disabled`. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
+| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: `disabled`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `activeClass` | `string \| undefined` | `'router-link-active'` |  | CSS class applied when the component renders as a link and the target of the link is the current route or the url matches partially. Ported for Inertia compatibility. |
 | `ariaCurrentValue` | `"page" \| "step" \| "location" \| "date" \| "time" \| "true" \| "false" \| undefined` | `'page'` |  | Value forwarded to the `aria-current` attribute when the component renders as a router link and the target route is an exact match. Use to communicate the current location to assistive technologies. |
 | `async` | `boolean \| undefined` | `false` |  | Inertia: runs the visit without blocking — the page stays interactive and several async visits can be in flight at once. |
@@ -529,6 +549,20 @@ The full grammar, the merge rules and the global map are in the
 | `type` | `"button" \| "submit" \| "reset" \| undefined` | `"button"` |  | Native `type` attribute used when rendering as a button (e.g. `button`, `submit`, `reset`). |
 | `viewTransition` | `boolean \| undefined` | `false` |  | Inertia: run the page swap inside a View Transition, where the browser supports one. |
 
+## Passthrough parts and states
+
+`pt:<part>="…"` restyles a part; `pt:<part>:<state>="…"` applies only while the state is on. A component-wide state is on for every part at once; a _per node_ state resolves on each node of a broadcast part (one row, one option, one day). Grammar and merge rules: `guides/passthrough.md`.
+
+| Part | What it is |
+| --- | --- |
+| `root` | Whichever element renders — the `<button>`, the `<a>` or the router link. A `class` on the component lands here too. The label is your slot markup. |
+
+States are listed in precedence order: when two are on at once and their entries conflict, the later one wins.
+
+| State | When it is on |
+| --- | --- |
+| `disabled` | Component-wide: the button is `disabled`. |
+
 ## Events
 
 - None.

package/dist/ai/BbBaseCheckboxIcon.md

@@ -202,7 +202,7 @@ The full grammar, the merge rules and the global map are in the
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
-| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: `checked`, `disabled`, `errors`, `focus-visible`, `focused`, `indeterminate`, `readonly`, `warnings`. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
+| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: `checked`, `disabled`, `errors`, `focus-visible`, `focused`, `indeterminate`, `readonly`, `warnings`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `checked` | `boolean \| undefined` | `false` |  | Renders the checked state (fills the box and draws the checkmark). |
 | `disabled` | `boolean \| undefined` | `false` |  | Disables the glyph (muted fill, not-allowed cursor). Purely visual. |
 | `focused` | `boolean \| undefined` | `false` |  | Whether the paired native input has focus — any focus, mouse included. Paints `--focused`, the hook the `focused` passthrough state aliases (T19); draws nothing by itself — the ring stays on `focusVisible`. |
@@ -212,6 +212,27 @@ The full grammar, the merge rules and the global map are in the
 | `indeterminate` | `boolean \| undefined` | `false` |  | Renders the indeterminate state (filled box with a dash instead of the checkmark). Takes visual precedence over `checked`. |
 | `readonly` | `boolean \| undefined` | `false` |  | Renders the read-only affordance (default cursor instead of pointer). |
 
+## Passthrough parts and states
+
+`pt:<part>="…"` restyles a part; `pt:<part>:<state>="…"` applies only while the state is on. A component-wide state is on for every part at once; a _per node_ state resolves on each node of a broadcast part (one row, one option, one day). Grammar and merge rules: `guides/passthrough.md`.
+
+| Part | What it is |
+| --- | --- |
+| `root` | The drawn glyph — the box and its checkmark. Its states are the conditions it paints as it resolves them (`warnings` is off while `errors` is on), not the raw props. |
+
+States are listed in precedence order: when two are on at once and their entries conflict, the later one wins.
+
+| State | When it is on |
+| --- | --- |
+| `checked` | Component-wide: the toggle is on. |
+| `indeterminate` | Component-wide: the mixed state (the `indeterminate` prop) — neither on nor off. |
+| `readonly` | Component-wide: the toggle is `readonly` — focusable, cannot change. |
+| `disabled` | Component-wide: the toggle is `disabled`. |
+| `warnings` | Component-wide: the toggle shows warnings and no errors. |
+| `errors` | Component-wide: the toggle shows errors — the glyph and the message line turn red. |
+| `focused` | Component-wide: the native input has focus — any focus, mouse included, like the `focused` slot prop. |
+| `focus-visible` | Component-wide: that focus is keyboard-visible — where a focus ring belongs. |
+
 ## Events
 
 - None.

package/dist/ai/BbBaseRadioIcon.md

@@ -217,7 +217,7 @@ The full grammar, the merge rules and the global map are in the
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
-| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: `checked`, `disabled`, `errors`, `focus-visible`, `focused`, `readonly`, `warnings`. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
+| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: `checked`, `disabled`, `errors`, `focus-visible`, `focused`, `readonly`, `warnings`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `checked` | `boolean \| undefined` | `false` |  | Renders the checked state (grows the inner dot). |
 | `disabled` | `boolean \| undefined` | `false` |  | Disables the glyph (muted fill, not-allowed cursor). Purely visual. |
 | `focused` | `boolean \| undefined` | `false` |  | Whether the paired native input has focus — any focus, mouse included. Paints `--focused`, the hook the `focused` passthrough state aliases (T19); draws nothing by itself — the ring stays on `focusVisible`. |
@@ -226,6 +226,26 @@ The full grammar, the merge rules and the global map are in the
 | `hasWarnings` | `boolean \| undefined` | `false` |  | Puts the glyph into the warning state (warn border and ring color). Errors take priority when both are set. |
 | `readonly` | `boolean \| undefined` | `false` |  | Renders the read-only affordance (default cursor instead of pointer). |
 
+## Passthrough parts and states
+
+`pt:<part>="…"` restyles a part; `pt:<part>:<state>="…"` applies only while the state is on. A component-wide state is on for every part at once; a _per node_ state resolves on each node of a broadcast part (one row, one option, one day). Grammar and merge rules: `guides/passthrough.md`.
+
+| Part | What it is |
+| --- | --- |
+| `root` | The drawn glyph — the ring and its dot. Its states are the conditions it paints as it resolves them (`warnings` is off while `errors` is on), not the raw props. |
+
+States are listed in precedence order: when two are on at once and their entries conflict, the later one wins.
+
+| State | When it is on |
+| --- | --- |
+| `checked` | Component-wide: the toggle is on. |
+| `readonly` | Component-wide: the toggle is `readonly` — focusable, cannot change. |
+| `disabled` | Component-wide: the toggle is `disabled`. |
+| `warnings` | Component-wide: the toggle shows warnings and no errors. |
+| `errors` | Component-wide: the toggle shows errors — the glyph and the message line turn red. |
+| `focused` | Component-wide: the native input has focus — any focus, mouse included, like the `focused` slot prop. |
+| `focus-visible` | Component-wide: that focus is keyboard-visible — where a focus ring belongs. |
+
 ## Events
 
 - None.

package/dist/ai/BbBaseSwitchIcon.md

@@ -122,7 +122,7 @@ Restyle by overriding the glyph's CSS custom properties on it:
 - `--thumb` — thumb diameter (default `16px`)
 - `--accent` — track fill when checked (default `--bb-primary`)
 - `--bg` — track fill when off (default `--bb-track`)
-- `--radius` — track/thumb rounding (default `999px`)
+- `--r` — track/thumb rounding (default `999px`)
 
 **On the element itself, not an ancestor.** Each of these is declared on the
 glyph's own class, and a declaration on the element always beats one inherited
@@ -213,7 +213,7 @@ The full grammar, the merge rules and the global map are in the
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
-| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: `checked`, `disabled`, `errors`, `focus-visible`, `focused`, `indeterminate`, `readonly`, `warnings`. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
+| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: `checked`, `disabled`, `errors`, `focus-visible`, `focused`, `indeterminate`, `readonly`, `warnings`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `checked` | `boolean \| undefined` | `false` |  | Renders the checked state (fills the track and slides the thumb to the end). |
 | `disabled` | `boolean \| undefined` | `false` |  | Disables the glyph (muted track, not-allowed cursor). Purely visual. |
 | `focused` | `boolean \| undefined` | `false` |  | Whether the paired native input has focus — any focus, mouse included. Paints `--focused`, the hook the `focused` passthrough state aliases (T19); draws nothing by itself — the ring stays on `focusVisible`. |
@@ -223,6 +223,27 @@ The full grammar, the merge rules and the global map are in the
 | `indeterminate` | `boolean \| undefined` | `false` |  | Renders the indeterminate state (filled track with the thumb parked at the midpoint of its travel). Takes visual precedence over `checked`. |
 | `readonly` | `boolean \| undefined` | `false` |  | Renders the read-only affordance. Reserved for parity with the other glyphs; currently has no distinct visual. |
 
+## Passthrough parts and states
+
+`pt:<part>="…"` restyles a part; `pt:<part>:<state>="…"` applies only while the state is on. A component-wide state is on for every part at once; a _per node_ state resolves on each node of a broadcast part (one row, one option, one day). Grammar and merge rules: `guides/passthrough.md`.
+
+| Part | What it is |
+| --- | --- |
+| `root` | The drawn glyph — the track and its thumb. Its states are the conditions it paints as it resolves them (`warnings` is off while `errors` is on), not the raw props. |
+
+States are listed in precedence order: when two are on at once and their entries conflict, the later one wins.
+
+| State | When it is on |
+| --- | --- |
+| `checked` | Component-wide: the toggle is on. |
+| `indeterminate` | Component-wide: the mixed state (the `indeterminate` prop) — neither on nor off. |
+| `readonly` | Component-wide: the toggle is `readonly` — focusable, cannot change. |
+| `disabled` | Component-wide: the toggle is `disabled`. |
+| `warnings` | Component-wide: the toggle shows warnings and no errors. |
+| `errors` | Component-wide: the toggle shows errors — the glyph and the message line turn red. |
+| `focused` | Component-wide: the native input has focus — any focus, mouse included, like the `focused` slot prop. |
+| `focus-visible` | Component-wide: that focus is keyboard-visible — where a focus ring belongs. |
+
 ## Events
 
 - None.
@@ -240,7 +261,7 @@ Set these on the element, or on a class you put on it, to retune this component
 | `--accent` | `var(--bb-primary)` | Track fill and border once checked or indeterminate; --errors, --warnings and --disabled re-point it. |
 | `--bg` | `var(--bb-track)` | track fill while off |
 | `--ring-color` | `color-mix( in oklab, currentColor var(--bb-ring-opacity), transparent )` | focus ring; follows the accent colour (a consumer text colour too) — --errors / --warnings set their own |
-| `--radius` | `999px` | track corners; the thumb rounds to 80% of it |
+| `--r` | `999px` | track corners; the thumb rounds to 80% of it |
 | `--bw` | `var(--bb-border-w-sm)` | Geometry — change --h / --w / --thumb freely: everything else is derived, so the thumb stays vertically centred and travels flush-to-flush at any size. --bw is the track border; the box is border-box, so the border eats into the inner track… |
 | `--h` | `18px` | track height, border included (border-box) |
 | `--w` | `32px` | track width, border included |

package/dist/ai/BbBreadcrumbs.md

@@ -10,7 +10,7 @@
 
 ## Reachable through `BbBreadcrumbs`
 
-`BbBreadcrumbs` mounts other components (all of them: _Component tree_, near the end). These are the parts of its API that land inside them. Use them — never `:deep()` on an inner class, never an import of an internal component.
+`BbBreadcrumbs` mounts other components (all of them: _Component tree_, near the end). These are the parts of its API that land inside them. Prefer these over `:deep()` on an inner class (allowed, unsupported: it can break on upgrade) — and never an import of an internal component.
 
 | pt part | Lands on | In |
 | --- | --- | --- |
@@ -668,7 +668,7 @@ The full grammar, the merge rules and the global map are in the
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
-| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `icon`, `item`, `root`, `text`. States: `active`, `disabled`. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
+| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `icon`, `item`, `root`, `text`. States: `active`, `disabled`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `disabled` | `boolean \| undefined` | `false` |  | Disables the component |
 | `dividerWidth` | `number \| undefined` | `16` |  | Width of the divider in pixels. |
 | `ellipsisWidth` | `number \| undefined` |  |  | Explicit width used by the estimator for the ellipsis activator. |
@@ -677,6 +677,24 @@ The full grammar, the merge rules and the global map are in the
 | `items` | `BbBreadcrumbsItem[]` |  | yes | Array of items that describe how the breadcrumbs should behave. Compatible with navigating through `a` or `router-link`. |
 | `offsetWidth` | `number \| undefined` | `0` |  | Extra one-off width in pixels added to the total estimate (e.g. prepend/append/item slot content). |
 
+## Passthrough parts and states
+
+`pt:<part>="…"` restyles a part; `pt:<part>:<state>="…"` applies only while the state is on. A component-wide state is on for every part at once; a _per node_ state resolves on each node of a broadcast part (one row, one option, one day). Grammar and merge rules: `guides/passthrough.md`.
+
+| Part | What it is |
+| --- | --- |
+| `root` | The `<nav>`. |
+| `item` | One crumb — a broadcast resolved per crumb; the overflow ellipsis crumb counts. The dividers are chrome, not a part. |
+| `icon` | A crumb's `prepend:icon` / `append:icon` glyphs — a broadcast. |
+| `text` | A crumb's label inside its link, without the glyphs beside it — a broadcast resolved per crumb, like `item`. |
+
+States are listed in precedence order: when two are on at once and their entries conflict, the later one wins.
+
+| State | When it is on |
+| --- | --- |
+| `disabled` | Per node: a crumb that is disabled on its own; component-wide while the whole component is `disabled`. |
+| `active` | Per node, on each crumb's `item` / `text`: the current page — the last crumb. |
+
 ## Events
 
 - None.
@@ -701,13 +719,13 @@ The full grammar, the merge rules and the global map are in the
 
 - `BbBreadcrumbs` _(this component)_ — its own template binds: `item` → `li.bb-breadcrumbs__item`, `icon` → `BbIcon`, `text` → `span.bb-breadcrumbs__text`
   - `BbBaseButton` _(public — [contract](./BbBaseButton.md))_ — its own pt parts (`BbBaseButton`): `root` → `RouterComponent`, `root` → `a`, `root` → `component`; also mounts `RouterComponent`
-  - `BbDropdown` _(public — [contract](./BbDropdown.md))_ — its own pt parts (`BbDropdown`): `panel` → `CommonPopover`, `root` → `CommonPopover`, `header` → `div.bb-dropdown__header`, `footer` → `div.bb-dropdown__footer`; documented CSS variables: `--menu-inset`; also mounts `CommonPopover`, `DropdownPipelineResolver`
+  - `BbDropdown` _(public — [contract](./BbDropdown.md))_ — its own pt parts (`BbDropdown`): `panel` → `CommonPopover`, `root` → `CommonPopover`, `header` → `div.bb-dropdown__header`, `list` → `span.bb-dropdown__items-container`, `footer` → `div.bb-dropdown__footer`; documented CSS variables: `--menu-inset`; also mounts `CommonPopover`, `DropdownPipelineResolver`
     - `BbDropdownList` _(internal — not importable, reach it through `BbDropdown`)_ — also mounts `BbBaseButton`, `BbIcon`, `CommonPopover`, `BbDropdownList`
-      - `BbBadge` _(public — [contract](./BbBadge.md))_ — its own pt parts (`BbBadge`): `spinner` → `BbSpinner`, `icon` → `BbIcon`, `clear` → `button.bb-badge__clear-button`; documented CSS variables: `--bg`, `--fg`, `--border-width`, `--ring`, `--min-size-md`, `--min-size`, `--elev`, `--radius`, `--font-size`, `--icon-size`, `--gap`, `--padding-inline`, `--clear-size`, `--pad-left`; also mounts `BbIcon`, `BbSpinner`, `BadgeBodyContent`
+      - `BbBadge` _(public — [contract](./BbBadge.md))_ — its own pt parts (`BbBadge`): `spinner` → `BbSpinner`, `icon` → `BbIcon`, `clear` → `button.bb-badge__clear-button`; documented CSS variables: `--bg`, `--fg`, `--border-width`, `--ring`, `--min-size-md`, `--min-size`, `--elev`, `--r`, `--font-size`, `--icon-size`, `--gap`, `--padding-inline`, `--clear-size`, `--pad-left`; also mounts `BbIcon`, `BbSpinner`, `BadgeBodyContent`
     - `AdaptiveDropdown` _(internal — not importable, reach it through `BbDropdown`)_ — hands `BbOffCanvas` the pt map `{ header: 'header', footer: 'footer', sheet: 'root' }` (ours → theirs); also mounts `BbSmoothHeight`, `BbDropdownList`
-      - `BbOffCanvas` _(public — [contract](./BbOffCanvas.md))_ — its own pt parts (`BbOffCanvas`): `header` → `div.bb-offcanvas__header`, `title` → `span.bb-offcanvas__title`, `description` → `p.bb-offcanvas__description`, `close` → `CloseButton`, `content` → `div.bb-offcanvas__body`, `footer` → `div.bb-offcanvas__footer`; documented CSS variables: `--stack-x`, `--stack-fill`, `--stack-transition-duration`, `--px`, `--close-size`
+      - `BbOffCanvas` _(public — [contract](./BbOffCanvas.md))_ — its own pt parts (`BbOffCanvas`): `header` → `div.bb-offcanvas__header`, `title` → `span.bb-offcanvas__title`, `description` → `p.bb-offcanvas__description`, `close` → `CloseButton`, `content` → `div.bb-offcanvas__body`, `footer` → `div.bb-offcanvas__footer`; documented CSS variables: `--stack-x`, `--stack-fill`, `--stack-transition-duration`, `--px`, `--handle-w`, `--handle-h`, `--handle-bg`, `--close-size`
         - `CloseButton` _(internal — not importable, reach it through `BbOffCanvas`)_ — documented CSS variables: `--size`, `--p`
-      - `BbButton` _(public — [contract](./BbButton.md))_ — its own pt parts (`BbButton`): `root` → `BbBaseButton`, `spinner` → `BbSpinner`, `icon` → `BbIcon`, `text` → `span.bb-button__content`; documented CSS variables: `--h-xs`, `--h`, `--icon-size`, `--px`, `--fs`, `--r`, `--gap`, `--bg`, `--bg-hover`, `--bg-pressed`, `--fg`, `--border-color`, `--ring`, `--bw`, `--elev-tier`, `--elev`; also mounts `BbIcon`, `BbBaseButton`, `BbSpinner`
+      - `BbButton` _(public — [contract](./BbButton.md))_ — its own pt parts (`BbButton`): `root` → `BbBaseButton`, `spinner` → `BbSpinner`, `icon` → `BbIcon`, `text` → `span.bb-button__content`; documented CSS variables: `--h-xs`, `--h`, `--icon-size`, `--px`, `--fs`, `--r`, `--gap`, `--bg`, `--bg-hover`, `--bg-pressed`, `--fg`, `--border-color`, `--ring`, `--bw`, `--fg-hover`, `--border-hover`, `--fg-pressed`, `--border-pressed`, `--bg-disabled`, `--fg-disabled`, `--border-disabled`, `--opacity-disabled`, `--elev-tier`, `--elev`; also mounts `BbIcon`, `BbBaseButton`, `BbSpinner`
   - Also mounts `BbIcon`
 
 ## See Also