bitboss-ui 3.0.0-beta.65 → 3.0.0-beta.67

package/dist/ai/BbOffCanvas.md

@@ -47,6 +47,12 @@ are physical: `size` means the panel's **extent along its axis** (the width of
 a left/right panel, the height of a top/bottom one; not always a width), and
 `side`, `draggable` and `stack-gap` are off-canvas-only.
 
+Which way to open it is BbDialog's rule ([BbDialog § Which one?](./BbDialog.md#which-one)):
+a panel in its own file that must start fresh, or one opened with a row's data,
+opens on demand, `useBbOffCanvas(RecordPanel).show(record)`; a page-level panel
+that needs the URL or Back is placed with an `id`
+(`v-bb-off-canvas="'filters'"`); a `v-model` is for state the page already owns.
+
 ### Open and close with v-model
 
 With a `v-model`, the model owns visibility: bind a boolean and flip it.
@@ -144,7 +150,7 @@ It works exactly like `v-bb-dialog` (see the BbDialog guide):
 
 - `v-bb-off-canvas="{ id: 'member', data: member }"` hands the panel what it
   was opened for. The slots receive it as `data`, and
-  `useBbOffCanvasContext<T>(id)` returns it typed, with `open`,
+  `useBbOffCanvas<T>(id)` returns it typed, with `open`,
   `show(data?)` and `hide()`.
 - Many rows open **one** panel, each with its own `data`. Never render one
   panel per row: the `id` is also the DOM id.
@@ -153,11 +159,11 @@ It works exactly like `v-bb-dialog` (see the BbDialog guide):
   up through its parents. A `v-model` on the panel still wins.
 - `hide()` closes even under `prevent-close`. The slots' `close()` does not.
 - `show()` returns the opening's result and `complete(value)` (slots and
-  context) closes with one, exactly as on BbDialog (see
+  handle) closes with one, exactly as on BbDialog (see
   [BbDialog § Results](./BbDialog.md#results-what-the-opener-gets-back));
   a component that renders its own `<BbOffCanvas>` opens on demand the same
   way: `v-bb-off-canvas="{ component: FiltersSheet }"` or
-  `useBbOffCanvasContext<In, Out>(FiltersSheet).show()` (BbDialog § On-demand
+  `useBbOffCanvas<In, Out>(FiltersSheet).show()` (BbDialog § On-demand
   dialogs);
   a sheet swiped away settles `'swipe'`. `v-bb-off-canvas` takes
   `onComplete` (and `show(data, { onComplete })` from code): a promise it
@@ -207,14 +213,14 @@ dimension `size` controls.
 	</div>
 </template>
 <script setup lang="ts">
-import { BbButton, BbOffCanvas, useBbOffCanvasContext } from 'bitboss-ui';
+import { BbButton, BbOffCanvas, useBbOffCanvas } from 'bitboss-ui';
 
 type Side = 'left' | 'top' | 'right' | 'bottom';
 
 const edges: Side[] = ['left', 'right', 'top', 'bottom'];
 // The edge the clicked button handed over; it stays set through the close
 // transition, so the panel leaves the way it came.
-const { data: side } = useBbOffCanvasContext<Side>('edge-panel');
+const { data: side } = useBbOffCanvas<Side>('edge-panel');
 </script>
 ```
 
@@ -825,7 +831,7 @@ import { ref } from 'vue';
 import { BbBadge, BbButton, BbOffCanvas, type BbSnapPoint } from 'bitboss-ui';
 
 // The stop the sheet rests at, as written in `snap-points`.
-const snap = ref<BbSnapPoint>('220px');
+const snap = ref<BbSnapPoint | undefined>('220px');
 
 const stores = Array.from({ length: 14 }, (_, i) => ({
 	id: i + 1,
@@ -994,7 +1000,7 @@ transition completes. A surface closed before it finished opening fires no
 `shown`. `hide` carries the opening's result, the object its promise settles
 with (`{ completed: true, value }` or `{ completed: false, reason }`, a swipe
 included). To tell a save from a cancel, close a save with `complete()`
-(slots or context), not by writing the model: on a `v-model` panel too, it
+(slots or handle), not by writing the model: on a `v-model` panel too, it
 closes through the model and reports `{ completed: true }`.
 
 The body lives **per opening**: nothing inside the panel renders until it
@@ -1073,7 +1079,7 @@ Every dismissal path is governed by two props, and by a form inside:
   model) still work. Use it when the user must make an explicit choice.
 - `prevent-close` — refuses **every** user close: backdrop, `Escape`, a
   swipe, the ✕ and the slots' `close()`, each with the deny nudge. Only code
-  closes it: `useBbOffCanvasContext(id).hide()` (or the model set to `false`)
+  closes it: `useBbOffCanvas(id).hide()` (or the model set to `false`)
   after an operation; `close()` is for Cancel / Done buttons and is refused
   while the panel is locked. Three states:
   - unset (the default): the panel locks itself while a `BbForm` inside it
@@ -1415,7 +1421,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 | `focusTarget` | `string \| undefined` |  |  | CSS selector of the element to focus after opening. Defaults to the first tabbable element. |
 | `fullscreen` | `boolean \| "mobile" \| undefined` |  |  | Display the offcanvas fullscreen. Use `'mobile'` to restrict fullscreen to small devices. |
 | `hideClose` | `boolean \| undefined` | `false` |  | Hides the default close (×) button in the header (e.g. for a `persistent` drawer you don't want dismissible — the × otherwise still closes a persistent drawer). |
-| `id` | `string \| undefined` |  |  | Names the panel for `v-bb-off-canvas="'filters'"` and `useBbOffCanvasContext`, found nearest to the trigger, so two pages may reuse an id. Also the DOM `id`: one panel per id. |
+| `id` | `string \| undefined` |  |  | Names the panel for `v-bb-off-canvas="'filters'"` and `useBbOffCanvas`, found nearest to the trigger, so two pages may reuse an id. Also the DOM `id`: one panel per id. |
 | `modelValue` | `boolean \| undefined` | `false` |  | Used by v-model to open / close the panel. A panel with no `v-model` starts closed. |
 | `navigation` | `boolean \| undefined` | `false` |  | Syncs the open state with the URL: opening writes `?<queryKey>=true`, closing removes it, a URL with the key opens the panel on load, and Back closes it (refused whenever Escape is). Template panels only; keep a record id in your own query. |
 | `persistent` | `boolean \| undefined` | `false` |  | Blocks closing by an outside click, Escape or drag-to-dismiss. The header close (×) STILL closes a persistent drawer, the documented escape hatch: add `hideClose` to remove it, or use `preventClose` to block every dismissal. Programmatic close still works. |
@@ -1424,7 +1430,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 | `replace` | `boolean \| undefined` | `false` |  | With `navigation`, replaces the history entry instead of pushing one, so Back leaves the page instead of closing the panel. |
 | `side` | `Responsive<"left" \| "top" \| "bottom" \| "right"> \| undefined` | `"left"` |  | Which viewport edge the offcanvas docks to (and slides in from). Also a per-breakpoint map (e.g. `{ default: 'bottom', md: 'right' }`), resolved when the panel opens: an open panel keeps its side through a resize. |
 | `size` | `Responsive<OffCanvasSize> \| undefined` | `"sm"` |  | The panel's extent along its axis: a left/right panel's width (shrinks with a narrower viewport) or a top/bottom one's height (capped at the viewport). A preset `'xs'`–`'2xl'`, `'auto'`, a CSS size, a pixel number, or a per-breakpoint map (e.g. `{ default: 'sm', lg: 'lg' }`). |
-| `snap` | `BbSnapPoint \| undefined` |  |  | The snap stop the sheet rests at, written as one of the `snapPoints` entries (Q71.8). Updated once the sheet settles on another stop; setting it moves the sheet there. Unbound, every opening starts at the first stop. |
+| `snap` | `BbSnapPoint \| undefined` |  |  | The snap stop the sheet rests at, written as one of the `snapPoints` entries. Updated once the sheet settles on another stop; setting it moves the sheet there. Unbound, every opening starts at the first stop. |
 | `snapPoints` | `BbSnapPoint[] \| undefined` |  |  | Heights a draggable bottom sheet rests at, smallest first: a fraction of the screen (`0.5`, `1` = full) or `'240px'`. The first is the opening height; `v-model:snap` holds the stop. Ignored on other sides and `fullscreen` (guide § Snap points). |
 | `stack` | `string \| undefined` |  |  | Name of the stack this drawer belongs to. Drawers sharing the same `stack` value step back behind one another as later ones open; drawers in different stacks never affect each other. When omitted, the drawer stacks with nothing. |
 | `stackGap` | `number \| undefined` | `60` |  | Pixels each stacked parent drawer shifts inward when a child opens on top, leaving a peeking band of the parent visible. |
@@ -1455,7 +1461,7 @@ States are listed in precedence order: when two are on at once and their entries
 ## Events
 
 - `hidden` — `(): void` — Emitted after the close transition completes and the offcanvas is fully dismissed.
-- `hide` — `(result: BbDialogResult): void` — Emitted as soon as the panel starts to close (model becomes false), with the opening's result: the same object its promise settles with, `{ completed: true, value }` or `{ completed: false, reason }` (Q73.6).
+- `hide` — `(result: BbDialogResult): void` — Emitted as soon as the panel starts to close (model becomes false), with the opening's result: the same object its promise settles with, `{ completed: true, value }` or `{ completed: false, reason }`.
 - `show` — `(): void` — Emitted as soon as the user triggers the open action (model becomes true).
 - `shown` — `(): void` — Emitted once the open transition has run (symmetric with `hidden`): the panel is settled, so code that measures or anchors to its content sees the final layout. Not emitted for a panel closed before it finished opening.
 - `update:modelValue` — `(value: boolean): void` — Emitted with the new value whenever `v-model` changes.
@@ -1480,7 +1486,7 @@ Set these on the element, or on a class you put on it, to retune this component
 | `--translate` | `.bb-offcanvas` | `1` |  |
 | `--stack-x` | `.bb-offcanvas` | `0px` | Inward shift applied to a parent panel while a child is stacked on top. |
 | `--stack-y` | `.bb-offcanvas` | `0px` |  |
-| `--snap-y` | `.bb-offcanvas` | `0px` | Snap points (Q71.8): how far below its top stop the sheet rests (written on the element by the component, live during a drag) and the first stop's offset, which caps the footer's counter-move. Reset here so a sheet nested in another's content never inherits them. |
+| `--snap-y` | `.bb-offcanvas` | `0px` | Snap points: how far below its top stop the sheet rests (written on the element by the component, live during a drag) and the first stop's offset, which caps the footer's counter-move. Reset here so a sheet nested in another's content never inherits them. |
 | `--snap-floor` | `.bb-offcanvas` | `0px` |  |
 | `--stack-fill` | `.bb-offcanvas` | `0px` | Length of the pad (see `::after`) that fills from the panel's anchored edge out to the screen edge, so no empty band shows when a descendant is dragged away or shrinks. |
 | `--stack-transition-duration` | `.bb-offcanvas` | `var(--transition-duration)` | Duration for the stack shift + pad. Zeroed while a peer resizes so parents track the live size instead of lagging behind a 250ms animation. |
@@ -1492,7 +1498,7 @@ Set these on the element, or on a class you put on it, to retune this component
 | `--transition-timing-function` | `.bb-offcanvas` | `var(--bb-ease)` |  |
 | `--bg` | `.bb-offcanvas` | `var(--bb-panel)` |  |
 | `--fg` | `.bb-offcanvas` | `var(--bb-text)` |  |
-| `--safe-top` | `.bb-offcanvas` | `env(safe-area-inset-top, 0px)` | * Safe areas (Q44.20, owner 2026-09-22): every screen edge a panel touches * absorbs that edge's inset the way the chin below always did — on the * BANDS, never on the panel, so a band's fill runs to the screen edge while * its content clears the notch, status bar or home indicator. * --safe-* the device insets (`env()`; 0 when unsupported or without * `viewport-fit=cover`) — a knob, e.g. for a test or a frame; * --inset-* the inset THIS panel absorbs: `--safe-*` on the edges it * touches, 0 elsewhere. Header / body / footer add it: the * first band on top, the last band at the bottom, every band * at the sides. |
+| `--safe-top` | `.bb-offcanvas` | `env(safe-area-inset-top, 0px)` | Safe areas: every screen edge a panel touches absorbs that edge's inset the way the chin below always did — on the BANDS, never on the panel, so a band's fill runs to the screen edge while its content clears the notch, status bar or home indicator. --safe-* the device insets (`env()`; 0 when unsupported or without `viewport-fit=cover`) — a knob, e.g. for a test or a frame; --inset-* the inset THIS panel absorbs: `--safe-*` on the edges it touches, 0 elsewhere. Header / body / footer add it: the first band on top, the last band at the bottom, every band at the sides. |
 | `--safe-right` | `.bb-offcanvas` | `env(safe-area-inset-right, 0px)` |  |
 | `--safe-bottom` | `.bb-offcanvas` | `env(safe-area-inset-bottom, 0px)` |  |
 | `--safe-left` | `.bb-offcanvas` | `env(safe-area-inset-left, 0px)` |  |
@@ -1500,7 +1506,8 @@ Set these on the element, or on a class you put on it, to retune this component
 | `--inset-right` | `.bb-offcanvas` | `0px` |  |
 | `--inset-bottom` | `.bb-offcanvas` | `0px` |  |
 | `--inset-left` | `.bb-offcanvas` | `0px` |  |
-| `--close-size` | `.bb-offcanvas__header` | `28px` | Shared by the close control and by the space the title reserves for it, * so the two can never drift apart. |
+| `--ring-t` | `.bb-offcanvas__handle--slider` | `var(--bb-transition-medium)` |  |
+| `--close-size` | `.bb-offcanvas__header` | `28px` | Shared by the close control and by the space the title reserves for it, so the two can never drift apart. |
 | `--gap` | `.bb-offcanvas__footer` | `8px` |  |
 
 ## Component tree

package/dist/ai/BbPagination.md

@@ -38,7 +38,7 @@ control clamps out-of-range pages back into `1..totalPages` (assign `99` and the
 model snaps back), disables _Previous_ on page 1 and _Next_ on the last page, and
 renders the whole range when it fits.
 
-**Paired with a table (`table-id`), it does not clamp.** There the context owns
+**Paired with a table (`table-id`), it does not clamp.** There the table's handle owns
 the page and this control takes what it was given: an out-of-range page is the
 consumer's to own — the table renders the empty slice it implies — so correcting
 it here would push a page nobody asked for. If you need the clamp in a paired
@@ -237,10 +237,10 @@ const sheet = ref(1);
 
 When the list is a `BbTable`, skip the manual wiring: give the table an `id`
 and the pagination the matching `table-id`. Both components publish their
-pagination props into the shared table context (see `useBbTableContext`), so
+pagination props into the shared table state (see `useBbTable`), so
 the page count is derived automatically and the current page stays two-way
 synced. No `v-model` needed; mount order doesn't matter, and a page already
-present in the context wins at mount.
+present in that state wins at mount.
 
 The props are symmetric: `page`, `per-page`, `total-items`, and `total-pages`
 are accepted by both components, so the server's fields can be passed to
@@ -250,7 +250,7 @@ derived from a real `total-items` always wins, and `total-pages` (on either
 side) is only a seed for when no row count is known — the common case being an
 externally paged array table, whose rows are one page and no total.
 
-For server paging, read the shared page with `useBbTableContext(id)` and use it
+For server paging, read the shared page with `useBbTable(id)` and use it
 inside the items provider. A provider table **already treats the shared page as
 a refetch trigger** — so a page turn re-runs the provider on its own; you do
 _not_ list `page` in `dependencies` (that's only for your own filters/sort). The
@@ -288,7 +288,7 @@ your own. Sit the pager in the table footer:
 </template>
 <script setup lang="ts">
 import { computed } from 'vue';
-import { BbPagination, BbTable, useBbTableContext } from 'bitboss-ui';
+import { BbPagination, BbTable, useBbTable } from 'bitboss-ui';
 import type { BbTableColumn } from 'bitboss-ui';
 
 type AuditEvent = { id: number; action: string; actor: string; time: string };
@@ -318,11 +318,11 @@ const events: AuditEvent[] = Array.from({ length: 23 }, (_, index) => ({
 	).padStart(2, '0')}:${String((index * 7) % 60).padStart(2, '0')}`,
 }));
 
-// Same id as the table: seed `perPage` on the context handle so the table
-// reads its page size from the shared context — no `:per-page` prop needed.
+// Same id as the table: seed `perPage` on the handle so the table
+// reads its page size from the shared state — no `:per-page` prop needed.
 // `page` and `perPage` here are the same refs the pager drives and the table
 // announces.
-const { page, perPage, totalItems } = useBbTableContext('audit-log', {
+const { page, perPage, totalItems } = useBbTable('audit-log', {
 	perPage: 5,
 });
 
@@ -331,7 +331,7 @@ const rangeEnd = computed(() =>
 	Math.min(page.value * perPage.value, totalItems.value)
 );
 
-/** Table provider; it needs nothing from the context object — page/perPage come from the table context. */
+/** Table provider; it needs nothing from the context object — page/perPage come from the table handle. */
 const fetchEvents = (): Promise<AuditEvent[]> =>
 	new Promise((resolve) => {
 		setTimeout(() => {
@@ -344,7 +344,7 @@ const fetchEvents = (): Promise<AuditEvent[]> =>
 ```
 
 Any other component can join the same rendezvous with
-`useBbTableContext('audit-log')` — read `ctx.page` in a toolbar, reset it after
+`useBbTable('audit-log')` — read `ctx.page` in a toolbar, reset it after
 a filter change — and the pager follows. Mind the id: a typo doesn't error, it
 just pairs with nothing.
 
@@ -554,7 +554,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 
 - `BbTable` — the shared-id pairing above; `per-page`/`total-items` on either
   component drive the page count.
-- `useBbTableContext` — bulk-action toolbars and filters that reset `page` to 1
+- `useBbTable` — bulk-action toolbars and filters that reset `page` to 1
   when the query changes.
 - `BbSelect` — a small page-size selector next to the pager; recompute
   `total-pages` and clamp happens for free.
@@ -583,10 +583,10 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 - **Don't rebuild the window.** No manual ellipsis math, no hiding buttons with
   CSS — `max-size` plus the container-fit behavior already handle it.
 - **Don't fetch inside the pager.** It's a selector; watch the model (or the
-  table context) and fetch in your own code.
+  table's handle) and fetch in your own code.
 - **Don't feed conflicting counts to a paired table and pager.** With a
   `table-id`, both components publish their pagination props into the shared
-  context; giving each a different `total-items` (or `total-pages`) is an
+  state; giving each a different `total-items` (or `total-pages`) is an
   author error the library resolves arbitrarily. Pass each fact to one place.
 
 ### Accessibility
@@ -619,12 +619,12 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 | `maxSize` | `string \| number \| undefined` | `6` |  | Maximum number of clickable pages displayed at all times. This has a tolerance of +/- 1 for odd / even numbering. It does not include ellipses. |
 | `modelValue` | `number \| undefined` | `1` |  | Used by v-model. The 1-based index of the current page — pagination starts on the first page, not page `0`. |
 | `navigation` | `boolean \| undefined` | `false` |  | Synchronizes the current page with the URL. Pair it with `replace` — see that prop. |
-| `perPage` | `string \| number \| undefined` |  |  | Number of items per page. Together with `totalItems` it derives the page count (`ceil(totalItems / perPage)`); when unset, one page holds everything. With a `tableId` it is also published to the shared table context, exactly like the table's own `per-page` prop. |
+| `perPage` | `string \| number \| undefined` |  |  | Number of items per page. Together with `totalItems` it derives the page count (`ceil(totalItems / perPage)`); when unset, one page holds everything. With a `tableId` it is also published to the shared table state, exactly like the table's own `per-page` prop. |
 | `queryKey` | `string \| undefined` | `"page"` |  | Defines the query key to reference for maintaining navigation. |
 | `replace` | `boolean \| undefined` | `false` |  | Replaces the history entry instead of pushing one when the page changes. Recommended with `navigation`: the URL keeps the page while Back leaves the list (without it, page 12 takes eleven Backs). |
-| `tableId` | `string \| undefined` |  |  | Pairs with the `BbTable` whose `id` matches, through the shared table context: the page syncs both ways and the context's page count drives the control. `totalItems`, `perPage` and `totalPages` set here are published to that context. |
-| `totalItems` | `string \| number \| undefined` |  |  | Total number of items across all pages. When set, the page count is derived as `ceil(totalItems / perPage)` and wins over `totalPages`. With a `tableId` it is also published to the shared table context, exactly like the table's own `total-items` prop. |
-| `totalPages` | `string \| number \| undefined` |  |  | Total number of pages. A shortcut for when the server reports a page count rather than a row count — a page count derived from `totalItems` (locally or through the shared table context) always wins over it. Falls back to `1` when nothing provides a count. |
+| `tableId` | `string \| undefined` |  |  | Pairs with the `BbTable` whose `id` matches, through the shared table state: the page syncs both ways and its page count drives the control. `totalItems`, `perPage` and `totalPages` set here are published to that state. |
+| `totalItems` | `string \| number \| undefined` |  |  | Total number of items across all pages. When set, the page count is derived as `ceil(totalItems / perPage)` and wins over `totalPages`. With a `tableId` it is also published to the shared table state, exactly like the table's own `total-items` prop. |
+| `totalPages` | `string \| number \| undefined` |  |  | Total number of pages. A shortcut for when the server reports a page count rather than a row count — a page count derived from `totalItems` (locally or through the shared table state) always wins over it. Falls back to `1` when nothing provides a count. |
 
 ## Passthrough parts and states
 
@@ -673,7 +673,7 @@ Set these on the element, or on a class you put on it, to retune this component
 | `--page-bg` | `transparent` | chip fill at rest |
 | `--page-bg-hover` | `var(--bb-hover)` | chip fill on hover and focus-visible |
 | `--page-bg-active` | `var(--bb-panel)` | fill of the active chip |
-| `--page-bg-disabled` | `transparent` | BbButton's disabled trio (Q56.29), for Previous / Next at the ends. A chip is transparent at rest, so the plate and frame stay transparent and the label takes the disabled grey. |
+| `--page-bg-disabled` | `transparent` | BbButton's disabled trio, for Previous / Next at the ends. A chip is transparent at rest, so the plate and frame stay transparent and the label takes the disabled grey. |
 | `--page-text-disabled` | `color-mix( in oklab, var(--bb-text) 45%, var(--bb-panel) )` |  |
 | `--page-border-disabled` | `transparent` |  |
 

package/dist/ai/BbPopover.md

@@ -148,7 +148,11 @@ a record and closes itself on save via the `close` callback.
 						<BbButton type="button" variant="ghost" @click="close">
 							Cancel
 						</BbButton>
-						<BbButton :disabled="!draft.trim()" type="submit" variant="primary">
+						<BbButton
+							:disabled="!draft?.trim()"
+							type="submit"
+							variant="primary"
+						>
 							Save
 						</BbButton>
 					</div>
@@ -163,11 +167,12 @@ import { ref } from 'vue';
 import { BbButton, BbPopover, BbTextInput } from 'bitboss-ui';
 
 const name = ref('Q3 report');
-const draft = ref(name.value);
+// A cleared field writes `null`.
+const draft = ref<string | null>(name.value);
 
 /** Commit the draft name, then dismiss via the slot `close`. */
 const save = (close: () => void) => {
-	const next = draft.value.trim();
+	const next = draft.value?.trim();
 	if (!next) return;
 	name.value = next;
 	close();

package/dist/ai/BbPtScope.md

@@ -98,10 +98,10 @@ The scope follows the **component tree**, not the DOM:
   layout or a parent component.
 - A `confirm()` takes the scope of the component that called `useConfirm()`,
   wherever `<BbHost />` is mounted. Toasts take the scope where the host is
-  mounted: for toasts in the area's look, mount one `<BbHost />` inside each
-  area's layout, within its scope, and none at the app root — valid only
-  when every page renders inside exactly one of those layouts (see
-  [Agent Contract § Global Host Rule](./guides/agent-contract.md)).
+  mounted, and the plugin's host does not see a scope in `App.vue`: for
+  toasts in the area's look, place one `<BbHost />` inside each area's
+  layout, within its scope. It takes over from the plugin's while mounted
+  (see [Agent Contract § Global Host Rule](./guides/agent-contract.md)).
 
 ### When NOT to use it
 
@@ -113,7 +113,7 @@ The scope follows the **component tree**, not the DOM:
 
 ### Works well with
 
-- `BbHost` — mount one inside each scoped area layout when toasts need the
+- `BbHost` — place one inside each scoped area layout when toasts need the
   area's look.
 - The [passthrough guide](./guides/passthrough.md) — grammar, merging and the
   full parts table.

package/dist/ai/BbRadio.md

@@ -377,7 +377,7 @@ included). The glyph is `icon` — there is no box.
 			:label="method.label"
 			name="merge-method"
 			pt:description="text-xs"
-			pt:icon:focused="ring-2 ring-(--bb-primary) ring-offset-2"
+			pt:icon:focused="outline-(--bb-primary) outline-offset-2"
 			pt:label="font-medium"
 			pt:label:checked="font-semibold"
 			:value="method.value"
@@ -475,6 +475,10 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 
 ### Accessibility
 
+- On a touch screen a lone radio's row gets an invisible hit area up to 44px
+  tall, centred, with nothing moving: the full 44px with no element beside the
+  field, 4px a side with one (8px apart, the areas meet in the gap). A group
+  component spaces its own rows for this.
 - A radio must have a `value` and share an explicit `name` with its siblings, or
   the browser won't treat them as one exclusive group — the generated fallback
   name is per-button and groups nothing.

package/dist/ai/BbRadioGroup.md

@@ -400,7 +400,11 @@ const period = ref('Week');
 
 The strip has its own tokens, named and valued as a tab strip's (`--list-bg`,
 `--p`, `--trigger-px`, `--indicator-bg`, `--indicator-h`, `--active-fg`, …):
-set them on `pt:list` to retune one group. A look of your own app-wide is a
+set them on `pt:list` to retune one group. A strip has no `size`: it is
+`--bb-control-h` tall like a field (`compact` drops it to 28px), and you size
+it with `--list-h`, `--list-r`, `--fs`, `--p` and `--trigger-px` on
+`.bb-radio-group__list--strip`; beside an `sm` button that is
+`pt:list="[--list-h:24px] [--fs:12px] [--p:2px]"`. A look of your own app-wide is a
 registered variant: `radioVariants: ['brand']` in the build plugin, then the
 same tokens on `.bb-radio-group__list--brand` in your CSS. A tabs theme does
 not reach a choice strip, nor the other way round.
@@ -425,7 +429,7 @@ dot hidden with `pt:icon="hidden"`, the checked label recoloured on
 			pt:icon="hidden"
 			pt:item="justify-items-center rounded-[calc(var(--bb-radius)-2px)] py-1.5"
 			pt:item:checked="bg-(--bb-primary)"
-			pt:item:focus-visible="ring-2 ring-(--bb-primary-ring)"
+			pt:item:focus-visible="ring-2 ring-(--bb-ring)"
 			pt:label="text-sm"
 			pt:label:checked="text-(--bb-primary-fg)"
 			pt:list="[--gap:2px] [--tile-min-width:0px] rounded-(--bb-radius) border p-0.5"
@@ -1015,7 +1019,7 @@ for a preset that fits any row type (never `<any>`), not an imported
 | `selectable` | `boolean \| ((item: T) => boolean) \| undefined` | `true` |  | Defines whether options are selectable. Can be a global boolean that affects all options or a function that accepts an item and returns a boolean that only affects that item. Non-selectable options are rendered disabled. |
 | `validationLabel` | `string \| undefined` |  |  | The field's name in validation messages (`{field}`): "Email is not valid". Defaults to the `label` (or `legend`), then "This field"; never the `name`. Set it when the label is hidden or reads badly in a sentence (icon-only, a question). `BbForm` only. |
 | `validationMode` | `'aggressive'` \| `'balanced'` \| `'lazy'` \| `'submit-only'` \| `'submit-live'` |  |  | When the field validates: `aggressive` (each change), `balanced` (on leave, then live while in error), `lazy` (on leave), `submit-only`, `submit-live`. Unset: the `BbForm`'s `validation-mode`, then `formControls.validationMode` (`'balanced'`). `BbForm` only. |
-| `variant` | `'pill'` \| `'line'` |  |  | A tab-strip look (Q76.11 d): `'pill'` (a raised pill under the pick) or `'line'` (a bar on a baseline); the indicator slides like a tab strip's. `list-layout="vertical"` stacks it. Register more with `radioVariants`. Unset: the group's own rows. |
+| `variant` | `'pill'` \| `'line'` |  |  | A tab-strip look: `'pill'` (a raised pill under the pick) or `'line'` (a bar on a baseline); the indicator slides like a tab strip's. `list-layout="vertical"` stacks it. Register more with `radioVariants`. Unset: the group's own rows. |
 | `warnings` | `string \| string[] \| undefined` |  |  | Warning messages under the field, a string or array: amber, in their own `aria-live` region and in the control's `aria-describedby` after the errors. Non-empty turns on the warning state; errors win when both are set. |
 
 ## Passthrough parts and states
@@ -1081,11 +1085,44 @@ States are listed in precedence order: when two are on at once and their entries
 
 Set these on the element, or on a class you put on it, to retune this component alone — the sanctioned alternative to reaching past the API with `:deep()`. They are this component's own locals — a **Set on** of `pt:<part>` means the local lives on that part's element, so set it through that entry (`pt:box="[--border-color:var(--color-green-500)]"`); the global `--bb-*` theme tokens are a separate tier (see the [design-tokens guide](./guides/design-tokens.md), or the MCP `list_tokens` tool).
 
-| Property | Default | What it is |
-| --- | --- | --- |
-| `--gap` | `24px` | Space between rows on one line. |
-| `--row-gap` | `10px` | Space between wrapped lines. |
-| `--tile-min-width` | `96px` | How narrow a tile may get before the tiles wrap (`tiles` only). |
+| Property | Set on | Default | What it is |
+| --- | --- | --- | --- |
+| `--gap` | `.bb-radio-group__list` | `24px` | Space between rows on one line. |
+| `--row-gap` | `.bb-radio-group__list` | `10px` | Space between wrapped lines. |
+| `--tile-min-width` | `.bb-radio-group__list` | `96px` | How narrow a tile may get before the tiles wrap (`tiles` only). |
+| `--list-bg` | `.bb-radio-group__list--strip` | `color-mix(in oklab, var(--bb-text) 8%, transparent)` | The strip behind the triggers |
+| `--list-border` | `.bb-radio-group__list--strip` | `transparent` | The strip's edge line, --bb-border-w thick, painted inside the strip: under the triggers (beside them when vertical). `pill` draws none; `line` sets it to --bb-border |
+| `--p` | `.bb-radio-group__list--strip` | `3px` | strip inner padding — the gutter the indicator sits in, and the scroll inset |
+| `--list-r` | `.bb-radio-group__list--strip` | `var(--bb-radius)` | strip corners |
+| `--list-h` | `.bb-radio-group__list--strip` | `var(--bb-control-h)` | strip min height |
+| `--fs` | `.bb-radio-group__list--strip` | `var(--bb-fs)` | trigger label size |
+| `--trigger-gap` | `.bb-radio-group__list--strip` | `0px` | space between triggers |
+| `--trigger-px` | `.bb-radio-group__list--strip` | `10px` | trigger side padding |
+| `--trigger-r` | `.bb-radio-group__list--strip` | `calc(var(--list-r) - var(--p))` | Trigger corners, concentric inside --list-r |
+| `--trigger-min-h` | `.bb-radio-group__list--strip` | `calc(var(--list-h) - var(--p) * 2)` | Trigger height inside the padded strip |
+| `--list-fg` | `.bb-radio-group__list--strip` | `var(--bb-text-muted)` | unchecked trigger label |
+| `--hover-fg` | `.bb-radio-group__list--strip` | `var(--bb-text)` | hovered trigger label |
+| `--active-fg` | `.bb-radio-group__list--strip` | `var(--bb-text)` | checked trigger label |
+| `--active-fw` | `.bb-radio-group__list--strip` | `500` | checked trigger label weight (unchecked labels are 500) |
+| `--indicator-bg` | `.bb-radio-group__list--strip` | `var(--bb-panel)` | the indicator's fill |
+| `--indicator-border` | `.bb-radio-group__list--strip` | `color-mix(in oklab, var(--bb-text) 8%, transparent)` | The indicator's edge |
+| `--indicator-r` | `.bb-radio-group__list--strip` | `var(--trigger-r)` | The indicator's corners — the pill's, concentric inside --list-r |
+| `--indicator-h` | `.bb-radio-group__list--strip` | `initial` | The indicator's thickness: its height, its width on a vertical strip. `initial` fills the whole trigger box — the pill; a bar is `2px`, on the trigger's bottom edge (inline-end edge when vertical) |
+| `--indicator-inset` | `.bb-radio-group__list--strip` | `0px` | Inset of the indicator from the trigger box — shrinks the pill; a bar keeps its thickness, shortens by it at both ends and floats it above the edge |
+| `--elev` | `.bb-radio-group__list--strip` | `var(--bb-elev)` | The theme's resting lift, composed UNDER the indicator's own shadow |
+| `--indicator-shadow` | `.bb-radio-group__list--strip` | `var(--bb-shadow-sm)` | Indicator lift, painted on top of --elev |
+| `--list-bg` | `.bb-radio-group__list--line` | `transparent` |  |
+| `--list-border` | `.bb-radio-group__list--line` | `var(--bb-border)` |  |
+| `--p` | `.bb-radio-group__list--line` | `0px` |  |
+| `--list-r` | `.bb-radio-group__list--line` | `0px` |  |
+| `--trigger-r` | `.bb-radio-group__list--line` | `var(--bb-radius-sm)` |  |
+| `--active-fw` | `.bb-radio-group__list--line` | `600` |  |
+| `--indicator-bg` | `.bb-radio-group__list--line` | `var(--bb-primary)` |  |
+| `--indicator-border` | `.bb-radio-group__list--line` | `transparent` |  |
+| `--indicator-r` | `.bb-radio-group__list--line` | `0` |  |
+| `--indicator-h` | `.bb-radio-group__list--line` | `2px` |  |
+| `--indicator-shadow` | `.bb-radio-group__list--line` | `none` |  |
+| `--elev` | `.bb-radio-group__list--line` | `none` |  |
 
 ## Component tree
 

package/dist/ai/BbRating.md

@@ -481,7 +481,7 @@ renders SSR-safe markup in Nuxt and Inertia apps.
 
 | 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: `description`, `hint`, `item`, `label`, `message`, `root`. States: `disabled`, `errors`, `hasValue`, `readonly`, `selected`, `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`. In `<script>` a `pt` value is typed `BbRatingProps['pt']` (`PtValue` is not exported): § Typing `pt` in `<script>`. |
+| `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: `description`, `hint`, `item`, `label`, `message`, `root`. States: `disabled`, `errors`, `hasValue`, `readonly`, `warnings`, `selected`. 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`. In `<script>` a `pt` value is typed `BbRatingProps['pt']` (`PtValue` is not exported): § Typing `pt` in `<script>`. |
 | `autofocus` | `Booleanish \| undefined` |  |  | Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field. |
 | `clearable` | `boolean \| undefined` | `false` |  | Allows clearing the selected rating by clicking the current value. |
 | `compact` | `boolean \| undefined` | `false` |  | Compact density. Swaps `--bb-label-spacing-y` for `--bb-label-spacing-y-compact`, so tune a compact group's label gap with the `-compact` token, not the base one. |
@@ -525,7 +525,7 @@ renders SSR-safe markup in Nuxt and Inertia apps.
 | `description` | The muted line under the legend (the `description` prop). |
 | `message` | The errors / warnings line. A node of its own: it can show at the same time as `hint`. |
 | `hint` | The helper line (the `hint` prop). |
-| `item` | One star, the choice you click: the hidden radio, its screen-reader text and the glyph — a broadcast resolved per star. The hook for the hit area, the focus ring, spacing and the disabled cursor. NOT for colour: a `text-*` class here freezes the hover preview and the error tint; set `--accent` / `--empty` / `--border-color` on `root`. The glyph has no part of its own (dropped 2026-09-23, before any release): its size is the `size` prop, its colour the variables. |
+| `item` | One star, the choice you click: the hidden radio, its screen-reader text and the glyph — a broadcast resolved per star. The hook for the hit area, the focus ring, spacing and the disabled cursor. NOT for colour: a `text-*` class here freezes the hover preview and the error tint; set `--accent` / `--empty` / `--border-color` on `root`. The glyph has no part of its own: its size is the `size` prop, its colour the variables. |
 
 States are listed in precedence order: when two are on at once and their entries conflict, the later one wins.
 
@@ -568,10 +568,11 @@ Set these on the element, or on a class you put on it, to retune this component
 | --- | --- | --- | --- |
 | `--accent` | `.bb-rating` | `var(--bb-primary)` | a filled star, and the hover preview |
 | `--empty` | `.bb-rating` | `var(--bb-panel)` | an unfilled star |
-| `--border-color` | `.bb-rating` | `var(--bb-text-faint)` | Every star's outline. `--bb-text-faint`, not `--bb-border` (Q56.21b): an empty star is `--empty` (the panel) inside it, so the outline alone draws the star, and a hairline read ~1.5:1 — under 3:1 in both schemes. |
-| `--space` | `.bb-rating` | `0px` | Gap between stars. On the root (Q56.21a) so `pt:root` reaches it; the star row inherits it. Named `--space`, not `--spacing`: Tailwind v4 builds its whole spacing scale on a variable of that name, and a local of the same name zeroed every spacing utility used inside the slots. |
+| `--border-color` | `.bb-rating` | `var(--bb-text-faint)` | Every star's outline. `--bb-text-faint`, not `--bb-border`: an empty star is `--empty` (the panel) inside it, so the outline alone draws the star, and a hairline read ~1.5:1 — under 3:1 in both schemes. |
+| `--space` | `.bb-rating` | `0px` | Gap between stars. On the root so `pt:root` reaches it; the star row inherits it. Named `--space`, not `--spacing`: Tailwind v4 builds its whole spacing scale on a variable of that name, and a local of the same name zeroed every spacing utility used inside the slots. |
 | `--ring-color` | `.bb-rating__stars` | `var(--bb-ring)` | focus ring around the focused star |
 | `--size` | `.bb-rating__stars` | `24px` | one star's box; overridden inline from the `size` prop |
+| `--ring-t` | `.bb-rating__item` | `var(--bb-transition-medium)` |  |
 
 ## Component tree