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

package/dist/ai/BbSelectPopover.md

@@ -560,7 +560,8 @@ only some of the picks name none of them until the first open:
 It is the same prop as `BbSelect`'s, with the same rules: the provider does
 not change (the first open still asks for the picks by id), a value no row
 names loads as it would without the prop, the options' accessors never run on
-a known row (slots get it as `item` until the list brings its own), the rows
+a known row (the `option` slot gets it as `item`, with `known: true`, until
+the list brings its own, and `item` is typed accordingly: check `known`), the rows
 are never listed unless selected, they vouch for their values under
 `enforce-coherence` until a parent change, and a selected row the list lacks is
 listed first. The details are in the BbSelect guide (_Rows the form already
@@ -1321,8 +1322,9 @@ Inertia visit), `navigateTo(href)` (Nuxt).
 
 `#header` and `#footer` pin content above the search field and below the options
 list, in **both** the desktop popover and the mobile adaptive sheet. Both receive
-`{ close, clear, focus, query, selectedOptions }` — ideal for a title and a
-"Done" action. Two more panel slots cover async states: `#loading` and
+`{ close, clear, focus, query, selectedOptions, titleId }` — ideal for a title
+and a "Done" action. Bind `titleId` as the title's `id`: on the phone sheet it
+names the dialog, as a `BbDialog` header's does. Two more panel slots cover async states: `#loading` and
 `#empty` (both receive `{ query }`; `#empty` also a `focus()` callback), or
 their string equivalents `loading-text` / `empty-text`.
 
@@ -1349,8 +1351,10 @@ their string equivalents `loading-text` / `empty-text`.
 					}}</BbBadgeButton>
 				</BbBadge>
 			</template>
-			<template #header>
-				<span class="text-sm font-medium">Popular destinations</span>
+			<template #header="{ titleId }">
+				<span :id="titleId" class="text-sm font-medium"
+					>Popular destinations</span
+				>
 			</template>
 			<template #footer="{ close, clear }">
 				<div class="flex w-full items-center gap-2">
@@ -1547,7 +1551,71 @@ const variantFor = (value: Status | null): BadgeVariantType =>
   taller custom `#option` / `#group` markup.
 - Placement props mirror the palette/dropdown float: `placement`, `offset`
   (default 4), `padding`, `boundary`, `disable-flip`, `transition-duration`. The
-  panel is a frame, not a bubble — it never shows an arrow.
+  panel is a frame, not a bubble — it never shows an arrow. `placement` is read
+  at open: a change while open applies at the next open.
+
+#### A narrow column: a badge trigger and a panel of its own
+
+This is the pattern for a choice that lives in a narrow column, or any time
+the trigger and the panel need different widths. `BbSelect`'s panel always
+matches its field and has no width prop, so a select in a narrow grid column
+truncates both the picked option and every row in its panel. Anchor a
+`BbSelectPopover` on a `BbBadgeButton` instead. The badge is the compact
+trigger: it ellipsises the picked label inside the column (`max-w-full` on the
+badge, `min-w-0` on the cell). The panel's `width` fits the longest option,
+whatever the column's width.
+
+**A role in a narrow column**
+
+```vue
+<template>
+	<div class="grid max-w-xl grid-cols-3 items-start gap-3">
+		<BbTextInput v-model="name" label="Referent" />
+		<!-- The column is narrow, the role names are long: a badge is the
+		compact trigger, and the panel takes a width of its own. -->
+		<div class="flex min-w-0 flex-col items-start gap-1.5">
+			<span class="text-sm font-medium">Role</span>
+			<BbSelectPopover v-model="role" compact :items="roles" width="300px">
+				<template #activator="{ props }">
+					<BbBadge
+						append:icon="lucide:chevron-down"
+						class="max-w-full"
+						size="lg"
+						variant="outline"
+					>
+						<BbBadgeButton v-bind="props">{{
+							roleLabel || 'Assign role'
+						}}</BbBadgeButton>
+					</BbBadge>
+				</template>
+			</BbSelectPopover>
+		</div>
+		<BbTextInput v-model="email" label="Email" />
+	</div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import {
+	BbBadge,
+	BbBadgeButton,
+	BbSelectPopover,
+	BbTextInput,
+} from 'bitboss-ui';
+
+const roles = [
+	{ value: 'ceo', label: 'Chief Executive and Head of Administration' },
+	{ value: 'admin', label: 'Administrative Manager' },
+	{ value: 'hr', label: 'Human Resources and Payroll Coordinator' },
+];
+
+const name = ref<string | null>(null);
+const email = ref<string | null>(null);
+const role = ref<string | null>(null);
+const roleLabel = computed(
+	() => roles.find((r) => r.value === role.value)?.label
+);
+</script>
+```
 
 ### Adaptive mobile sheet
 
@@ -1687,7 +1755,9 @@ never instead of it. The full grammar, the merge rules and the global map are
 in the [passthrough guide](./guides/passthrough.md).
 
 A `pt` value written in `<script>` (a constant, a preset, a wrapper's
-`pt` prop) is typed as `BbSelectPopoverProps['pt']`, never an imported `PtValue`: see
+`pt` prop) is typed as `BbSelectPopoverProps<Row>['pt']`, or
+`BbSelectPopoverProps<object>['pt']` for a preset that fits any row type
+(never `<any>`), not an imported `PtValue`: see
 [passthrough § Typing `pt` in `<script>`](./guides/passthrough.md#typing-pt-in-script).
 
 ### Works well with
@@ -1715,12 +1785,11 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
   the "search to begin" hint until the user types. It quietly falls back to
   loading on open when writing is disabled, the model is non-empty, or `items` is
   an array.
-- Closing clears the search. With a provider, a panel closed on a searched list
-  reopens with a fresh empty-query request (the provider gets `''`), showing
-  loading until it answers, never the old results; a search still in flight at
-  close is dropped. Search-first reopens to the "search to begin" hint without
-  a request. A panel closed on the unfiltered list reopens as it was, with no
-  request, and the selection is never touched.
+- Closing clears the search. With a provider, reopening after a search sends a
+  fresh `''` request (loading shows, never the old results; a search in flight
+  at close is dropped); search-first reopens to its hint with no request; a
+  panel closed on the unfiltered list reopens as it was. The selection is never
+  touched.
 - `enforce-coherence` + a provider that drops the selection on the calls the
   popover starts itself (`reason !== 'search'`) = wiped model — and since the
   check runs on the **first** load, that wipe happens at mount rather than
@@ -1735,13 +1804,11 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 - **Clicking the selected option does not clear a single select** — it re-picks
   it and closes the panel. Emptying is the `clear` callback (activator/panel
   slot scope), never an accidental second click. Multiple mode still toggles.
-- **`null` as a real "All" option** works — it resolves and renders as the
-  selection — but it overloads the value the component uses for _nothing
-  selected_. So a `null` model stays lazy (nothing to resolve, no load, not even
-  with `enforce-coherence`), `clear` is indistinguishable from picking "All", and
-  an `enforce-coherence` prune emits `null` — i.e. a stale value **widens to
-  "All"** rather than clearing. Fine if you want it; use a sentinel
-  (`'all'`) if "everything" and "nothing" must stay distinct.
+- **`null` as a real "All" option** works, but `null` also means _nothing
+  selected_: a `null` model stays lazy (no load, even with `enforce-coherence`),
+  `clear` equals picking "All", and an `enforce-coherence` prune emits `null`, so
+  a stale value **widens to "All"**. Use a sentinel (`'all'`) when "everything"
+  and "nothing" must differ.
 
 ### Anti-patterns
 
@@ -1819,7 +1886,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 
 | 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`, `footer`, `header`, `input`, `itemDescription`, `itemIcon`, `itemText`, `list`, `option`, `panel`, `root`, `sheet`. States: `disabled`, `open`, `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 `BbSelectPopoverProps['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: `clear`, `footer`, `header`, `input`, `itemDescription`, `itemIcon`, `itemText`, `list`, `option`, `panel`, `root`, `sheet`. States: `disabled`, `open`, `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 `BbSelectPopoverProps<Row>['pt']` (`BbSelectPopoverProps<object>['pt']` for a preset that fits any row type, never `<any>`) (`PtValue` is not exported): § Typing `pt` in `<script>`. |
 | `activator` | `Record<string, any> \| HTMLElement \| null \| undefined` |  |  | External activator element or component ref. When provided, the activator slot is not rendered and event listeners are attached programmatically to the referenced element. |
 | `adaptive` | `boolean \| undefined` | ``config.adaptive` (`true`)` |  | On mobile, the panel opens as a bottom sheet instead of a floating popover, with the same search and list. Unset, the global `config.adaptive` applies. |
 | `anchor` | `Record<string, any> \| HTMLElement \| null \| undefined` | `null` |  | Override the element used for popover positioning and width measurement. Useful when the focusable activator is narrower than its visual container (e.g. a button inside a wrapper). Falls back to `activatorEl` when omitted. |
@@ -1848,7 +1915,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 | `items` | `Item[] \| ((context: BbSelectPopoverItemsContext) => Item[] \| Promise<Item[]>)` | `[]` | yes | The options: an array, or a sync or async provider given a `BbSelectPopoverItemsContext` (`query`, `reason`, `modelValue`, `signal`). Branch on `reason !== 'search'` to resolve the selection by id. A provider fails by THROWING, never by returning `[]`. |
 | `itemText` | `ItemAccessor<Item, string> \| undefined` | `own `label`, else `text`, else `JSON.stringify(item)`` |  | Path to item property for display text or function to extract it. Unset: own `label`, else `text` (`{ label, value }` needs no accessor). |
 | `itemValue` | `ItemAccessor<Item> \| undefined` | `own `value`, else the whole item` |  | Path to item property for value or function to extract it. Unset: own `value`, even `null`. |
-| `knownItems` | `(BbSelectKnownItem \| null \| undefined)[] \| undefined` |  |  | `{ value, label }` rows naming the value the app already holds, whatever the options' shape: the activator's `text` with no request until the first open (`prefill: true` still loads). Not options; the options' accessors never run on them; slots get the row as `item` until the list brings its own. |
+| `knownItems` | `([Known] extends [undefined] ? BbSelectKnownItems : Known) \| undefined` |  |  | `{ value, label }` rows naming the value the app already holds, whatever the options' shape: the activator's `text` with no request until the first open (`prefill: true` still loads). Not options: accessors never run on them; slots get one as `item`, `known: true`, until the list brings its own. |
 | `loading` | `boolean \| undefined` | `false` |  | Display the loading state styles. |
 | `loadingText` | `string \| undefined` |  |  | Message shown while items are being loaded. |
 | `max` | `number \| undefined` | `Infinity` |  | Maximum number of selectable items (limits selection when `multiple` is true). |
@@ -1915,11 +1982,11 @@ States are listed in precedence order: when two are on at once and their entries
 
 - `activator` — scope: `BbSelectPopoverActivatorSlotProps` `{ clear: () => void; close: () => Promise<void>; focus: () => void; disabled: boolean; loading: boolean; open: () => Promise<void>; props: { ref: (reference: unknown) => void; }; query: string; readonly: boolean; selectedOptions: BbSelectResolvedOption<any>[]; shown: boolean; text: string; toggle: () => Promise<void> }` — Replaces the default trigger element that opens the select popover.
 - `empty` — scope: `{ query: string; focus: () => void; error: unknown; }` — Content shown when no options match the query or the list is empty. `error` is what the latest failed load threw, untouched (`null` when none).
-- `footer` — scope: `BbSelectPopoverPanelSlotProps` `{ close: () => Promise<void>; clear: () => void; focus: () => void; query: string; selectedOptions: BbSelectResolvedOption<any>[] }` — Content pinned to the bottom of the panel, below the options list. Rendered in both the desktop popover and the adaptive sheet.
+- `footer` — scope: `BbSelectPopoverPanelSlotProps` `{ close: () => Promise<void>; clear: () => void; focus: () => void; query: string; selectedOptions: BbSelectResolvedOption<any>[]; titleId: string }` — Content pinned to the bottom of the panel, below the options list. Rendered in both the desktop popover and the adaptive sheet.
 - `group` — scope: `BbSelectPopoverGroupSlotProps<Item>` `{ disabled: boolean; index: number; item: Item; length: number; text: string }` — Replaces the default group header rendered above grouped options. Not called for rows with no group (`group-by` gives `null`/`undefined`, known rows): they are listed without a header.
-- `header` — scope: `BbSelectPopoverPanelSlotProps` `{ close: () => Promise<void>; clear: () => void; focus: () => void; query: string; selectedOptions: BbSelectResolvedOption<any>[] }` — Content pinned to the top of the panel, above the search field. Rendered in both the desktop popover and the adaptive sheet.
+- `header` — scope: `BbSelectPopoverPanelSlotProps` `{ close: () => Promise<void>; clear: () => void; focus: () => void; query: string; selectedOptions: BbSelectResolvedOption<any>[]; titleId: string }` — Content pinned to the top of the panel, above the search field. Rendered in both the desktop popover and the adaptive sheet.
 - `loading` — scope: `{ query: string; }` — Content shown inside the options dropdown while items are loading.
-- `option` — scope: `BbSelectPopoverOptionSlotProps<Item>` `{ disabled: boolean; focused: boolean; index: number; item: Item; loading: boolean; selected: boolean; text: string; value: any; description: string }` — Replaces the default rendering of each option row in the dropdown.
+- `option` — scope: `BbSelectPopoverOptionSlotProps<Item, Known>` `{ known: boolean; item: BbSelectKnownItem \| Item; disabled: boolean; focused: boolean; index: number; loading: boolean; selected: boolean; text: string; value: any; description: string }` — Replaces the default rendering of each option row in the dropdown. With `known-items` bound, a row the list has not brought yet is the known `{ value, label }` row, `known: true`: check `known` before reading an option field off `item`.
 
 ## CSS custom properties
 
@@ -1942,7 +2009,7 @@ Set these on the element, or on a class you put on it, to retune this component
 - Listed nodes are the ones `BbSelectPopover`'s API reaches or that declare a documented CSS variable; the rest fold into "also mounts". The complete tree, repeats and undocumented locals included, is `manifest/components/BbSelectPopover.tree.json`.
 
 - `BbSelectPopover` _(this component)_ — its own template binds: `input` → `input.bb-select-popover__input`, `clear` → `ClearableButton`, `panel` → `CommonPopover`, `root` → `CommonPopover`, `header` → `div.bb-select-popover__header`, `footer` → `div.bb-select-popover__footer`; hands `BbOffCanvas` the pt map `{ header: 'header', footer: 'footer', panel: 'root', sheet: 'root' }` (ours → theirs)
-  - `BbBadge` _(public — [contract](./BbBadge.md))_ — its own pt parts (`BbBadge`): `spinner` → `BbSpinner`, `icon` → `BbIcon`, `clear` → `button.bb-badge__clear`; documented CSS variables: `--bg`, `--fg`, `--bw`, `--ring-color`, `--ring-size`, `--min-size-md`, `--min-size`, `--elev`, `--r`, `--fs`, `--icon-size`, `--gap`, `--px`, `--clear-size`, `--bg-disabled`, `--fg-disabled`, `--border-disabled`, `--pad-left`; also mounts `BbIcon`, `BbSpinner`, `BadgeBodyContent`
+  - `BbBadge` _(public — [contract](./BbBadge.md))_ — its own pt parts (`BbBadge`): `spinner` → `BbSpinner`, `icon` → `span.bb-badge__append-icon`, `icon` → `BbIcon`, `clear` → `button.bb-badge__clear`; documented CSS variables: `--bg`, `--fg`, `--bw`, `--ring-color`, `--ring-size`, `--min-size-md`, `--min-size`, `--elev`, `--r`, `--fs`, `--icon-size`, `--gap`, `--px`, `--clear-size`, `--bg-disabled`, `--fg-disabled`, `--border-disabled`, `--pad-left`; also mounts `BbIcon`, `BbSpinner`, `BadgeBodyContent`
   - `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__content`, `footer` → `div.bb-offcanvas__footer`; documented CSS variables: `--stack-x`, `--snap-y`, `--stack-fill`, `--stack-transition-duration`, `--px`, `--handle-w`, `--handle-h`, `--handle-bg`, `--safe-top`, `--close-size`
     - `CloseButton` _(internal — not importable, reach it through `BbOffCanvas`)_ — documented CSS variables: `--size`, `--p`
   - `ListBox` _(internal — not importable, reach it through `BbSelectPopover`)_

package/dist/ai/BbSwitch.md

@@ -674,7 +674,7 @@ const settings = reactive<Setting[]>([
 </script>
 ```
 
-An attribute in `attrs` wins over ours. The visually hidden native input is
+An attribute in `attrs` wins over ours. The invisible native input under the glyph is
 not a part — plain attributes on the component land on the root. A listener in `attrs` runs after the control's own
 handler, never instead of it. The full grammar, the merge rules and the global
 map are in the [passthrough guide](./guides/passthrough.md).

package/dist/ai/BbSwitchGroup.md

@@ -41,6 +41,27 @@
 | `--inset` | `pt:icon` | `BbBaseSwitchIcon` | Equal gap around the thumb — centres it vertically by construction, and is reused as the resting left/right inset. |
 | `--travel` | `pt:icon` | `BbBaseSwitchIcon` | How far the thumb slides between off and on (inset ↔ inset). |
 | `--ctrl-line` | `pt:label` | `CommonField` | Where the control's first line is centred, from the top of the control column (half the box height by default); the label's first line aligns to it in side-by-side layouts. |
+| `--list-bg` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | The strip behind the triggers |
+| `--list-border` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | 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` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | strip inner padding — the gutter the indicator sits in, and the scroll inset |
+| `--list-r` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | strip corners |
+| `--list-h` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | strip min height |
+| `--fs` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | trigger label size |
+| `--trigger-gap` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | space between triggers |
+| `--trigger-px` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | trigger side padding |
+| `--trigger-r` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | Trigger corners, concentric inside --list-r |
+| `--trigger-min-h` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | Trigger height inside the padded strip |
+| `--list-fg` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | unchecked trigger label |
+| `--hover-fg` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | hovered trigger label |
+| `--active-fg` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | checked trigger label |
+| `--active-fw` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | checked trigger label weight (unchecked labels are 500) |
+| `--indicator-bg` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | the indicator's fill |
+| `--indicator-border` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | The indicator's edge |
+| `--indicator-r` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | The indicator's corners — the pill's, concentric inside --list-r |
+| `--indicator-h` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | 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` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | 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` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | The theme's resting lift, composed UNDER the indicator's own shadow |
+| `--indicator-shadow` | `pt:list`, `pt:item`, `pt:label`, `pt:itemDescription` | `OptionsContainer` | Indicator lift, painted on top of --elev |
 
 ## Usage & Guidelines
 
@@ -624,6 +645,12 @@ that list is a type error and an ESLint error.
 The notification channels above, restyled as option tiles: `pt:item` is a
 broadcast over every row, `pt:item:checked` resolves per row.
 
+In `list-layout="tiles"` the whole tile is the switch's click and hover
+target, padding included; a link or a button inside a tile keeps its own
+click. A side hidden with the library's or Tailwind's hiding classes
+(`pt:icon="hidden"`, `hide-label`, `pt:label="sr-only"`) takes its gap with
+it, so the other side stays centred.
+
 **pt:item — notification tiles, the selected ones accented**
 
 ```vue
@@ -686,7 +713,7 @@ ours, an attribute in `attrs` wins over ours. The full grammar, the merge rules
 and the global map are in the [passthrough guide](./guides/passthrough.md).
 
 A `pt` value written in `<script>` (a constant, a preset, a wrapper's
-`pt` prop) is typed as `BbSwitchGroupProps<Row>['pt']`, or `BbSwitchGroupProps['pt']`
+`pt` prop) is typed as `BbSwitchGroupProps<Row>['pt']`, or `BbSwitchGroupProps<object>['pt']`
 for a preset that fits any row type (never `<any>`), not an imported
 `PtValue`: see
 [passthrough § Typing `pt` in `<script>`](./guides/passthrough.md#typing-pt-in-script).
@@ -739,7 +766,7 @@ for a preset that fits any row type (never `<any>`), not an imported
 
 | 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`, `icon`, `item`, `itemDescription`, `label`, `legend`, `list`, `message`, `root`. States: `disabled`, `errors`, `hasValue`, `loading`, `readonly`, `warnings`, `checked`, `focused`, `focusVisible`. 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 `BbSwitchGroupProps<Row>['pt']` (`BbSwitchGroupProps['pt']` for a preset that fits any row type, never `<any>`) (`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`, `icon`, `item`, `itemDescription`, `label`, `legend`, `list`, `message`, `root`. States: `disabled`, `errors`, `hasValue`, `loading`, `readonly`, `warnings`, `checked`, `focused`, `focusVisible`. 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 `BbSwitchGroupProps<Row>['pt']` (`BbSwitchGroupProps<object>['pt']` for a preset that fits any row type, never `<any>`) (`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. |
 | `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. |
 | `dependencies` | `unknown[] \| undefined` |  |  | Defines an array of dependencies that will trigger actions in the component upon change. |
@@ -865,7 +892,7 @@ Set these on the element, or on a class you put on it, to retune this component
 
 - `BbSwitchGroup` _(this component)_ — its own template binds: `icon` → `BbBaseSwitchIcon`
   - `CommonField` _(internal — not importable, reach it through `BbSwitchGroup`)_ — `BbSwitchGroup`'s pt parts land here: `root` → `div.bb-field`, `label` → `component`, `description` → `span.bb-field__description`, `hint` → `span.bb-field__hint`, `counter` → `span.bb-field__counter`, `message` → `div.bb-field__message`; documented CSS variables: `--ctrl-line`; also mounts `BbAsterisk`
-  - `OptionsContainer` _(internal — not importable, reach it through `BbSwitchGroup`)_ — `BbSwitchGroup`'s pt parts land here: `list` → `span`, `item` → `label`, `label` → `span`, `itemDescription` → `span`
+  - `OptionsContainer` _(internal — not importable, reach it through `BbSwitchGroup`)_ — `BbSwitchGroup`'s pt parts land here: `list` → `span`, `item` → `label`, `label` → `span`, `itemDescription` → `span`; documented CSS variables: `--list-bg`, `--list-border`, `--p`, `--list-r`, `--list-h`, `--fs`, `--trigger-gap`, `--trigger-px`, `--trigger-r`, `--trigger-min-h`, `--list-fg`, `--hover-fg`, `--active-fg`, `--active-fw`, `--indicator-bg`, `--indicator-border`, `--indicator-r`, `--indicator-h`, `--indicator-inset`, `--elev`, `--indicator-shadow`
   - Also mounts `BbBaseSwitchIcon`
 
 ## See Also

package/dist/ai/BbTable.md

@@ -93,17 +93,24 @@ needs is declared here, not in markup:
   for about three, fitted to the room the sized columns leave. Values a line
   break would harm stay whole: a short name or status ("Poltrona 10", "In
   attesa di verifica"), an amount with its currency, a range or pair ("0,00 € /
-  450,00 €"), a date or code ("16/10/2026", a grouped IBAN). When room runs
-  short, longer values wrap first, then prose narrows, then a long heading of
+  450,00 €"), a date or code ("16/10/2026", a grouped IBAN). The floors are
+  estimated on the server and then refined in the browser from the text as it
+  actually renders (its font, weight, letter-spacing, text-transform, numeric
+  features and size), so a value the table keeps on one line stays whole in
+  any font, including a web font that loads late. When room runs short,
+  longer values wrap first, then prose narrows, then a long heading of
   several words takes two lines; a table that scrolls sideways anyway keeps
   all of those whole. Only a table that would otherwise _start_ scrolling
   wraps them, and long-form text never runs wider than a readable measure.
-  You rarely need `whitespace-nowrap` in a `td-class`. The header is always
-  part of that floor, so a heading never clips. (On a server-rendered page
-  the server cannot know the width: a table whose headings need two lines
-  takes them, once, when the page hydrates.) The floors read every row up
-  to 2,000; past that, the first 1,000 and a sample across the rest (a
-  `virtual` table has no floors at all). No floor on `fixed` or
+  You rarely need `whitespace-nowrap` in a `td-class`, in any font. It
+  overrides the table's choice: the value stays whole even where the table
+  would wrap it to spare a sideways scroll. The header is always part of
+  that floor, so a heading never clips. (On a server-rendered page the
+  server cannot know the width: a table whose headings need two lines takes
+  them, once, when the page hydrates.) The floors read every row up to
+  2,000; past that, the first 1,000 and a sample across the rest, and a value
+  only the unread rows show may wrap (a `virtual` table has no floors at
+  all). No floor on `fixed` or
   `virtual` tables, slot columns, or under a custom `#thead`, so never slot a
   column only to restyle its blank: use [`--placeholder`](#empty-cells-value-and-placeholder). A grid keyword or function is the track as written:
   `'auto'`, `'2fr'`, `'minmax(0, 1fr)'` (a share that may shrink below its
@@ -4068,7 +4075,7 @@ The full grammar, the merge rules and the global map are in the
 [passthrough guide](./guides/passthrough.md).
 
 A `pt` value written in `<script>` (a constant, a preset, a wrapper's
-`pt` prop) is typed as `BbTableProps<Row>['pt']`, or `BbTableProps['pt']`
+`pt` prop) is typed as `BbTableProps<Row>['pt']`, or `BbTableProps<object>['pt']`
 for a preset that fits any row type (never `<any>`), not an imported
 `PtValue`: see
 [passthrough § Typing `pt` in `<script>`](./guides/passthrough.md#typing-pt-in-script).
@@ -4234,7 +4241,7 @@ for a preset that fits any row type (never `<any>`), not an imported
 
 | 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: `body`, `caption`, `cell`, `cellColumnHeader`, `dragHandle`, `dragIcon`, `expand`, `firstRow`, `foot`, `head`, `headerRow`, `lastRow`, `root`, `row`, `selectIcon`, `sortIcon`, `table`. States: `disabled`, `empty`, `expanded`, `highlighted`, `indeterminate`, `loading`, `placeholder`, `selected`, `sorted`, `sortedDesc`, `value`. 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 `BbTableProps<Row>['pt']` (`BbTableProps['pt']` for a preset that fits any row type, never `<any>`) (`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: `body`, `caption`, `cell`, `cellColumnHeader`, `dragHandle`, `dragIcon`, `expand`, `firstRow`, `foot`, `head`, `headerRow`, `lastRow`, `root`, `row`, `selectIcon`, `sortIcon`, `table`. States: `disabled`, `empty`, `expanded`, `highlighted`, `indeterminate`, `loading`, `placeholder`, `selected`, `sorted`, `sortedDesc`, `value`. 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 `BbTableProps<Row>['pt']` (`BbTableProps<object>['pt']` for a preset that fits any row type, never `<any>`) (`PtValue` is not exported): § Typing `pt` in `<script>`. |
 | `accessibleLabel` | `((columns: MappedCell[], item: any) => string) \| undefined` |  |  | The label of each row's selection checkbox, from `(columns, item)`. Unset: the row's name in the locale's select template (its `rowHeader` cells, else its first column: "Select INV-1041"). The cells arrive in render order: look one up by `key`, never by position. |
 | `actionsText` | `string \| undefined` |  |  | Label used in the header of the actions column. |
 | `align` | `"left" \| "center" \| "right" \| undefined` | `"left"` |  | Text alignment of the columns. |

package/dist/ai/BbTabs.md

@@ -649,7 +649,9 @@ every variant. Three ship:
 
 - **`pill`** (default) — the segmented strip: a muted rounded bar with a raised
   pill sliding under the active trigger. Reach for it to switch _views of the
-  same content_ (Board / Table, Code / Preview).
+  same content_ (Board / Table, Code / Preview). Switch views → `BbTabs`;
+  pick a value a form or a filter submits → a segmented `BbRadioGroup`
+  (BbRadioGroup § Segmented control), even when the two look alike.
 - **`line`** — triggers on a thin baseline that runs the full width of the
   strip's container, a sliding underline under the active one (on the side edge
   when `direction="vertical"`), active label bold. Reach
@@ -1838,7 +1840,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 
 | 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: `indicator`, `item`, `list`, `panel`, `panels`, `root`, `wrapper`. 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`. In `<script>` a `pt` value is typed `BbTabsProps['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: `indicator`, `item`, `list`, `panel`, `panels`, `root`, `wrapper`. States: `active`, `disabled`, `line`, `none`, `pill`. 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 `BbTabsProps['pt']` (`PtValue` is not exported): § Typing `pt` in `<script>`. |
 | `block` | `boolean \| undefined` | `false` |  | Displays the component as full width. |
 | `compact` | `boolean \| undefined` | `false` |  | Adds a CSS class that applies a compact style to the component. |
 | `direction` | `"horizontal" \| "vertical" \| undefined` | `"horizontal"` |  | Direction of the tabs component. |
@@ -1887,6 +1889,9 @@ States are listed in precedence order: when two are on at once and their entries
 | --- | --- |
 | `disabled` | On every part while the whole tabs is `disabled`; per node on `item`: a tab that is disabled. |
 | `active` | Per node, on `item` and `panel`: the selected tab's trigger and its shown panel. |
+| `line` | On the strip's parts: `variant: 'line'`. Below the real states, like every variant. |
+| `none` | On the strip's parts: `variant: 'none'`. Below the real states, like every variant. |
+| `pill` | On the strip's parts: `variant: 'pill'`. Merged after the part's base entry and before its states, so the real states still win. |
 
 ## Events
 
@@ -1941,7 +1946,7 @@ Set these on the element, or on a class you put on it, to retune this component
 - **CSS custom properties** listed on a node are declared on THAT node's root and read by elements inside it. Set one on that node's root or on the element inside it that reads it — the pt part that lands there is how you reach it (`pt:box="[--border-color:…]"` on a text input) — never on `BbTabs`'s root, where the node's own declaration masks it (design-tokens guide, _Overriding one from a consumer app_, rule 0).
 - Listed nodes are the ones `BbTabs`'s API reaches or that declare a documented CSS variable; the rest fold into "also mounts". The complete tree, repeats and undocumented locals included, is `manifest/components/BbTabs.tree.json`.
 
-- `BbTabs` _(this component)_ — hands `BbTabsList` the pt map `passthrough.forwardInstance(LIST_PARTS)` (ours → theirs); hands `BbTabsPanels` the pt map `passthrough.forwardInstance(PANELS_PARTS)` (ours → theirs)
+- `BbTabs` _(this component)_ — hands `BbTabsList` the pt map `passthrough.forwardInstance(LIST_PARTS, LIST_STATES)` (ours → theirs); hands `BbTabsPanels` the pt map `passthrough.forwardInstance(PANELS_PARTS)` (ours → theirs)
   - `BbTabsList` _(public — [contract](./BbTabsList.md))_ — `BbTabs`'s pt parts land here: `list` → `ul.bb-tabs-list__list`, `indicator` → `li.bb-tabs-list__indicator`, `item` → `BbBaseButton`
     - `BbBaseButton` _(public — [contract](./BbBaseButton.md))_ — its own pt parts (`BbBaseButton`): `root` → `RouterComponent`, `root` → `a`, `root` → `component`; also mounts `RouterComponent`
   - `BbTabsPanels` _(public — [contract](./BbTabsPanels.md))_ — `BbTabs`'s pt parts land here: `panel` → `section.bb-tabs__panel`

package/dist/ai/BbTabsList.md

@@ -20,7 +20,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: `indicator`, `item`, `list`, `root`. 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`. In `<script>` a `pt` value is typed `BbTabsListProps['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: `indicator`, `item`, `list`, `root`. States: `active`, `disabled`, `line`, `none`, `pill`. 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 `BbTabsListProps['pt']` (`PtValue` is not exported): § Typing `pt` in `<script>`. |
 | `variant` | `'none'` \| `'pill'` \| `'line'` |  |  | Look of this strip — the `variant` of the owning `BbTabs` / `BbTabsRoot` unless set here. See `BbTabsProps.variant` for the values. |
 
 ## Passthrough parts and states
@@ -40,6 +40,9 @@ States are listed in precedence order: when two are on at once and their entries
 | --- | --- |
 | `disabled` | On every part while the whole tabs is `disabled`; per node on `item`: a tab that is disabled. |
 | `active` | Per node, on `item` and `panel`: the selected tab's trigger and its shown panel. |
+| `line` | On the strip's parts: `variant: 'line'`. Below the real states, like every variant. |
+| `none` | On the strip's parts: `variant: 'none'`. Below the real states, like every variant. |
+| `pill` | On the strip's parts: `variant: 'pill'`. Merged after the part's base entry and before its states, so the real states still win. |
 
 ## Events
 

package/dist/ai/BbTag.md

@@ -493,7 +493,7 @@ only sets the label's text alignment.
 
 | 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: `badge`, `box`, `clear`, `comma`, `description`, `hint`, `icon`, `input`, `label`, `message`, `prefix`, `root`, `spinner`, `suffix`. States: `disabled`, `errors`, `hasValue`, `highlighted`, `loading`, `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`. In `<script>` a `pt` value is typed `BbTagProps['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: `badge`, `box`, `clear`, `comma`, `description`, `hint`, `icon`, `input`, `label`, `message`, `prefix`, `root`, `spinner`, `suffix`. States: `disabled`, `errors`, `hasValue`, `highlighted`, `loading`, `readonly`, `warnings`, `ghost`, `outline`, `secondary`. 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 `BbTagProps['pt']` (`PtValue` is not exported): § Typing `pt` in `<script>`. |
 | `append:icon` | `string \| undefined` |  |  | Name of the icon to be added at the end of the input. |
 | `autocomplete` | `string \| undefined` | `"off"` |  | Guides to the browser as to the type of information expected in the field. |
 | `autofocus` | `Booleanish \| undefined` |  |  | Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field. |
@@ -565,6 +565,9 @@ States are listed in precedence order: when two are on at once and their entries
 | `errors` | Component-wide: the control is in its error state (`errors` / `has-errors`, or its validation) — the message line and the box turn red. |
 | `highlighted` | Per node, on `badge` / `comma`: the tag the arrow keys are on (`bb-badge--highlighted` / `bb-tag__comma--highlighted`). A cursor, not focus: focus stays in the text input. |
 | `loading` | Component-wide: `loading` is on; the box shows its `spinner`. |
+| `ghost` | On the field's parts: `variant: 'ghost'`. Below the real states, like every variant. |
+| `outline` | On the field's parts: `variant: 'outline'`. Merged after the part's base entry and before its states, so the real states still win. |
+| `secondary` | On the field's parts: `variant: 'secondary'`. Below the real states, like every variant. |
 
 ## Events
 
@@ -619,7 +622,7 @@ Set these on the element, or on a class you put on it, to retune this component
   - `CommonField` _(internal — not importable, reach it through `BbTag`)_ — `BbTag`'s pt parts land here: `root` → `div.bb-field`, `label` → `component`, `description` → `span.bb-field__description`, `hint` → `span.bb-field__hint`, `counter` → `span.bb-field__counter`, `message` → `div.bb-field__message`; documented CSS variables: `--ctrl-line`; also mounts `BbAsterisk`
   - `CommonFieldInput` _(internal — not importable, reach it through `BbTag`)_ — `BbTag`'s pt parts land here: `box` → `span.bb-field-input__box`, `prefix` → `span.bb-field-input__prefix`, `icon` → `BbIcon`, `clear` → `ClearableButton`, `spinner` → `BbSpinner`, `suffix` → `span.bb-field-input__suffix`; documented CSS variables: `--bg`, `--bg-hover`, `--bg-focus`, `--bg-disabled`, `--fg-disabled`, `--border-color`, `--border-focus`, `--ring-size`, `--ring-color`, `--elev`, `--frost`, `--inside-label-clearance`; also mounts `ErrorIcon`, `WarningIcon`, `ClearableButton`, `BbIcon`, `BbSpinner`
   - `ChipsBox` _(internal — not importable, reach it through `BbTag`)_ — `BbTag`'s pt parts land here: `badge` → `BbBadge`
-    - `BbBadge` _(public — [contract](./BbBadge.md))_ — its own pt parts (`BbBadge`): `spinner` → `BbSpinner`, `icon` → `BbIcon`, `clear` → `button.bb-badge__clear`; documented CSS variables: `--bg`, `--fg`, `--bw`, `--ring-color`, `--ring-size`, `--min-size-md`, `--min-size`, `--elev`, `--r`, `--fs`, `--icon-size`, `--gap`, `--px`, `--clear-size`, `--bg-disabled`, `--fg-disabled`, `--border-disabled`, `--pad-left`; also mounts `BbIcon`, `BbSpinner`, `BadgeBodyContent`
+    - `BbBadge` _(public — [contract](./BbBadge.md))_ — its own pt parts (`BbBadge`): `spinner` → `BbSpinner`, `icon` → `span.bb-badge__append-icon`, `icon` → `BbIcon`, `clear` → `button.bb-badge__clear`; documented CSS variables: `--bg`, `--fg`, `--bw`, `--ring-color`, `--ring-size`, `--min-size-md`, `--min-size`, `--elev`, `--r`, `--fs`, `--icon-size`, `--gap`, `--px`, `--clear-size`, `--bg-disabled`, `--fg-disabled`, `--border-disabled`, `--pad-left`; also mounts `BbIcon`, `BbSpinner`, `BadgeBodyContent`
   - `CommaBox` _(internal — not importable, reach it through `BbTag`)_ — `BbTag`'s pt parts land here: `comma` → `span.bb-tag__comma`
   - Also mounts `BbSmoothHeight`
 

package/dist/ai/BbTextInput.md

@@ -1267,7 +1267,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 
 | 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: `box`, `clear`, `counter`, `description`, `hint`, `icon`, `input`, `label`, `message`, `prefix`, `root`, `spinner`, `suffix`. States: `atLimit`, `disabled`, `errors`, `hasValue`, `loading`, `nearLimit`, `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`. In `<script>` a `pt` value is typed `BbTextInputProps['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: `box`, `clear`, `counter`, `description`, `hint`, `icon`, `input`, `label`, `message`, `prefix`, `root`, `spinner`, `suffix`. States: `atLimit`, `disabled`, `errors`, `ghost`, `hasValue`, `loading`, `nearLimit`, `outline`, `readonly`, `secondary`, `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 `BbTextInputProps['pt']` (`PtValue` is not exported): § Typing `pt` in `<script>`. |
 | `append:icon` | `string \| undefined` |  |  | Name of the icon to be added at the end of the input. |
 | `autocomplete` | `string \| undefined` |  |  | Guides to the browser as to the type of information expected in the field. |
 | `autofocus` | `Booleanish \| undefined` |  |  | Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field. |
@@ -1341,6 +1341,9 @@ States are listed in precedence order: when two are on at once and their entries
 | `warnings` | Component-wide: the control is in its warning state (`warnings` / `has-warnings`) and not in an error state — errors win, so the two are never on together. |
 | `errors` | Component-wide: the control is in its error state (`errors` / `has-errors`, or its validation) — the message line and the box turn red. |
 | `loading` | Component-wide: `loading` is on; the box shows its `spinner`. |
+| `ghost` | On the field's parts: `variant: 'ghost'`. Below the real states, like every variant. |
+| `outline` | On the field's parts: `variant: 'outline'`. Merged after the part's base entry and before its states, so the real states still win. |
+| `secondary` | On the field's parts: `variant: 'secondary'`. Below the real states, like every variant. |
 
 ## Events
 

package/dist/ai/BbTextarea.md

@@ -1026,7 +1026,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 
 | 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: `box`, `clear`, `counter`, `description`, `hint`, `icon`, `input`, `label`, `message`, `prefix`, `root`, `spinner`, `suffix`. States: `atLimit`, `disabled`, `errors`, `hasValue`, `loading`, `nearLimit`, `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`. In `<script>` a `pt` value is typed `BbTextareaProps['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: `box`, `clear`, `counter`, `description`, `hint`, `icon`, `input`, `label`, `message`, `prefix`, `root`, `spinner`, `suffix`. States: `atLimit`, `disabled`, `errors`, `ghost`, `hasValue`, `loading`, `nearLimit`, `outline`, `readonly`, `secondary`, `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 `BbTextareaProps['pt']` (`PtValue` is not exported): § Typing `pt` in `<script>`. |
 | `append:icon` | `string \| undefined` |  |  | Name of the icon to be added at the end of the input. |
 | `autocomplete` | `string \| undefined` |  |  | Guides to the browser as to the type of information expected in the field. |
 | `autofocus` | `Booleanish \| undefined` |  |  | Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field. |
@@ -1098,6 +1098,9 @@ States are listed in precedence order: when two are on at once and their entries
 | `warnings` | Component-wide: the control is in its warning state (`warnings` / `has-warnings`) and not in an error state — errors win, so the two are never on together. |
 | `errors` | Component-wide: the control is in its error state (`errors` / `has-errors`, or its validation) — the message line and the box turn red. |
 | `loading` | Component-wide: `loading` is on; the box shows its `spinner`. |
+| `ghost` | On the field's parts: `variant: 'ghost'`. Below the real states, like every variant. |
+| `outline` | On the field's parts: `variant: 'outline'`. Merged after the part's base entry and before its states, so the real states still win. |
+| `secondary` | On the field's parts: `variant: 'secondary'`. Below the real states, like every variant. |
 
 ## Events
 

package/dist/ai/BbTimePicker.md

@@ -165,7 +165,8 @@ On mobile the columns open in a bottom off-canvas sheet instead of a floating
 popover (`adaptive`, on by default via `config.adaptive`; forward extra sheet
 props with `offCanvasProps`). Position the desktop popover with `placement`,
 `offset`, `padding`, `boundary`, and `disableFlip` — the same knobs as the other
-overlays. Escape and backdrop clicks close it; focus returns to the activator.
+overlays (`placement` is read at open: a change while open applies at the next
+open). Escape and backdrop clicks close it; focus returns to the activator.
 
 The sheet can be **dragged down to dismiss** and shows **no ✕** — picking,
 drag, backdrop tap and Escape close it. The time wheels are no-drag zones: a

package/dist/ai/BbTimePickerInput.md

@@ -304,7 +304,7 @@ Messages _also_ render in an `aria-live="polite"` region.
 
 | 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: `activator`, `box`, `cellColumnHeader`, `clear`, `description`, `header`, `hint`, `icon`, `input`, `item`, `label`, `message`, `panel`, `prefix`, `root`, `sheet`, `spinner`, `suffix`. States: `disabled`, `errors`, `hasValue`, `loading`, `open`, `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 `BbTimePickerInputProps['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: `activator`, `box`, `cellColumnHeader`, `clear`, `description`, `header`, `hint`, `icon`, `input`, `item`, `label`, `message`, `panel`, `prefix`, `root`, `sheet`, `spinner`, `suffix`. States: `disabled`, `errors`, `ghost`, `hasValue`, `loading`, `open`, `outline`, `readonly`, `secondary`, `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 `BbTimePickerInputProps['pt']` (`PtValue` is not exported): § Typing `pt` in `<script>`. |
 | `adaptive` | `boolean \| undefined` | ``config.adaptive` (`true`)` |  | On mobile the time columns open inside a bottom off-canvas sheet instead of a floating popover. When unset, falls back to the global `config.adaptive`. |
 | `ampm` | `boolean \| undefined` | `false` |  | 12-hour display with an AM/PM segment. Purely a field-composition concern: the model stays 24-hour. Type `A`/`P` (or ArrowUp/Down) to set the meridiem. |
 | `append:icon` | `string \| undefined` |  |  | Name of the icon to be added at the end of the input. |
@@ -387,6 +387,9 @@ States are listed in precedence order: when two are on at once and their entries
 | `errors` | Component-wide: the control is in its error state (`errors` / `has-errors`, or its validation) — the message line and the box turn red. |
 | `open` | Component-wide: the panel is showing — `pt:activator:open` styles the trigger while it is. |
 | `loading` | Component-wide: `loading` is on; the box shows its `spinner`. |
+| `ghost` | On the field's parts: `variant: 'ghost'`. Below the real states, like every variant. |
+| `outline` | On the field's parts: `variant: 'outline'`. Merged after the part's base entry and before its states, so the real states still win. |
+| `secondary` | On the field's parts: `variant: 'secondary'`. Below the real states, like every variant. |
 
 ## Events
 

package/dist/ai/BbToast.md

@@ -772,7 +772,7 @@ The map is typed where you write it by `definePt`, never with an imported
 
 | 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: `action`, `close`, `content`, `footer`, `icon`, `panel`, `root`, `text`, `title`. 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`. In `<script>` a `pt` value is typed `BbToastProps['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: `action`, `close`, `content`, `footer`, `icon`, `panel`, `root`, `text`, `title`. States: `default`, `destructive`, `info`, `loading`, `success`, `warning`. 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 `BbToastProps['pt']` (`PtValue` is not exported): § Typing `pt` in `<script>`. |
 
 ## Passthrough parts and states
 
@@ -795,6 +795,11 @@ States are listed in precedence order: when two are on at once and their entries
 | State | When it is on |
 | --- | --- |
 | `loading` | Per toast, on its card parts (every part but `root`): the toast is `loading` (the spinner shows in its `icon`). |
+| `default` | Per toast, on its card parts: `variant: 'default'`. Merged after the part's base entry and before its states, so the real states still win. |
+| `destructive` | Per toast, on its card parts: `variant: 'destructive'`. Below the real states, like every variant. |
+| `info` | Per toast, on its card parts: `variant: 'info'`. Below the real states, like every variant. |
+| `success` | Per toast, on its card parts: `variant: 'success'`. Below the real states, like every variant. |
+| `warning` | Per toast, on its card parts: `variant: 'warning'`. Below the real states, like every variant. |
 
 ## Events
 
@@ -822,7 +827,8 @@ Set these on the element, or on a class you put on it, to retune this component
 | `--r` | `.bb-toast__panel` | `min(var(--bb-radius), 10px)` | Card corners. `border-radius` caps whatever lands here again, at 14px. |
 | `--ring-size` | `.bb-toast__panel` | `2px` | focus ring on the close button |
 | `--bg` | `.bb-toast__panel` | `var(--bb-panel)` | card fill, and the close button's own fill |
-| `--border-color` | `.bb-toast__panel` | `var(--bb-border)` | Card edge, painted as an inset ring (the card carries no `border`) |
+| `--border-color` | `.bb-toast__panel` | `var(--bb-border)` | card edge |
+| `--bw` | `.bb-toast__panel` | `var(--bb-border-w)` | Edge width: a real `border`, counted in the measured height; the inner padding and the × take it back, so the card keeps its size. |
 | `--fg` | `.bb-toast__panel` | `var(--bb-text)` | title, text and close glyph |
 | `--icon-color` | `.bb-toast__panel` | `var(--bb-text)` | The status glyph only — the variants below re-point this and nothing else |
 | `--icon-color` | `.bb-toast__panel--success` | `var(--bb-success)` |  |
@@ -843,7 +849,7 @@ Set these on the element, or on a class you put on it, to retune this component
 - `BbToast` _(this component)_
   - `BbToastRegion` _(internal — not importable, reach it through `BbToast`)_ — `BbToast`'s pt parts land here: `root` → `ol.bb-toast`
     - `BbToastMessage` _(internal — not importable, reach it through `BbToast`)_ — also mounts `BbIcon`, `BbSpinner`
-      - `BbButton` _(public — [contract](./BbButton.md))_ — its own pt parts (`BbButton`): `root` → `BbBaseButton`, `spinner` → `BbSpinner`, `icon` → `BbIcon`, `text` → `span.bb-button__text`; documented CSS variables: `--h-xs`, `--h`, `--icon-size`, `--px`, `--fs`, `--r`, `--gap`, `--bg`, `--bg-hover`, `--bg-pressed`, `--fg`, `--border-color`, `--ring-color`, `--ring-size`, `--bw`, `--fg-hover`, `--border-hover`, `--fg-pressed`, `--border-pressed`, `--bg-disabled`, `--fg-disabled`, `--border-disabled`, `--opacity-disabled`, `--elev-tier`, `--elev`; also mounts `BbIcon`, `BbSpinner`
+      - `BbButton` _(public — [contract](./BbButton.md))_ — its own pt parts (`BbButton`): `root` → `BbBaseButton`, `spinner` → `BbSpinner`, `icon` → `span.bb-button__icon`, `icon` → `BbIcon`, `icon` → `span.bb-button__prepend-icon`, `text` → `span.bb-button__text`, `icon` → `span.bb-button__append-icon`; documented CSS variables: `--h-xs`, `--h`, `--icon-size`, `--px`, `--fs`, `--r`, `--gap`, `--bg`, `--bg-hover`, `--bg-pressed`, `--fg`, `--border-color`, `--ring-color`, `--ring-size`, `--bw`, `--fg-hover`, `--border-hover`, `--fg-pressed`, `--border-pressed`, `--bg-disabled`, `--fg-disabled`, `--border-disabled`, `--opacity-disabled`, `--elev-tier`, `--elev`; also mounts `BbIcon`, `BbSpinner`
         - `BbBaseButton` _(public — [contract](./BbBaseButton.md))_ — its own pt parts (`BbBaseButton`): `root` → `RouterComponent`, `root` → `a`, `root` → `component`; also mounts `RouterComponent`
 
 ## See Also