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

package/dist/ai/BbCalendar.md

@@ -186,6 +186,54 @@ const onPick = (value: string | string[] | null) => {
 };
 ```
 
+### Several months side by side
+
+`:number-of-months="2"` shows two month grids next to each other, so a range
+that crosses the month line has both ends on screen. Any count renders as
+asked. Each month is its own labelled grid (its month and year), and the whole
+calendar is still one Tab stop. The arrows step a whole page (all the months on
+show), and the keyboard moves from the last day of one month into the next
+one. Past the last month on show, the view jumps a whole page. When there isn't
+room for all the months in one row, they wrap onto the next row. The month and
+year headings belong to the first month. Their panels replace it, and picking
+there moves the whole view. The day grids are the only ones with several
+months: `type="month"` and `type="year"` ignore the prop.
+
+**A stay across the month line — two months**
+
+```vue
+<template>
+	<div class="grid w-fit gap-3 rounded-(--bb-radius) border p-4">
+		<p class="m-0 text-sm font-medium">{{ summary }}</p>
+		<BbCalendar
+			v-model="stay"
+			aria-label="Stay"
+			floating
+			:number-of-months="2"
+			range
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { BbCalendar } from 'bitboss-ui';
+
+/** A stay that crosses the month line: both ends on screen at once. */
+const stay = ref<string[]>(['2026-10-29', '2026-11-03']);
+
+const summary = computed(() => {
+	const [from, to] = stay.value;
+	if (!from) return 'Pick a check-in day';
+	if (!to) return 'Now pick the check-out day';
+	return `${from} → ${to}`;
+});
+</script>
+```
+
+With more than one month, the days of the neighbouring months are left blank:
+a date belongs to one grid only.
+
 ### `type` — what you are picking
 
 One prop decides the grid and the shape of the emitted string:
@@ -194,14 +242,73 @@ One prop decides the grid and the shape of the emitted string:
 | ------------------ | -------------------- | --------------------- | ------------- |
 | `date` _(default)_ | the day grid         | `2026-08-14`          | ISO instant   |
 | `datetime`         | day grid + time rail | `2026-08-14` + `time` | ISO instant   |
+| `week`             | day grid, week rows  | `2026-W44`            | —             |
 | `month`            | the 12-month grid    | `2026-08`             | —             |
 | `year`             | the year list        | `2026`                | —             |
 
-`month` and `year` are **calendar labels, not instants**: they force
+`week`, `month` and `year` are **calendar labels, not instants**: they force
 `floating`, ignore `utc` (with a DEV warning), and take `min` / `max` /
 `selectable` in their own shape (`min="2026-03"`). A bound finer than the
 unit is rounded outward, never silently truncated.
 
+#### Weeks
+
+`type="week"` picks ISO 8601 weeks (Monday to Sunday, numbered by the year
+that owns the week's Thursday) and emits `YYYY-Www`: `2026-W44`, and
+`2026-W53` for the week that runs into January 2027. The grid stays the day
+grid, with three differences:
+
+- a **week-number column** heads every row (its header names it for screen
+  readers only), and the grid always starts on Monday (`first-day-of-week` is
+  ignored: a week cannot straddle two rows);
+- **any day picks its week**: the whole row is the selection, one band from
+  Monday to Sunday. Hovering a row (or moving the keyboard cursor into it)
+  outlines the week a click would pick;
+- `min` / `max` take a week (`min="2026-W44"`) or a date, and a week is
+  selectable only when **all seven days** are inside them: `min="2026-10-28"`
+  (a Wednesday) leaves that week out. `selectable` receives the week value.
+
+`range` gives `['2026-W41', '2026-W43']` (solid ends, a wash between),
+`multiple` a sorted list of weeks. The day buttons and the keyboard are the
+day grid's; each day's accessible name adds its week and the week's dates
+("…, week 44, October 26 – November 1, 2026"), which are never shown.
+
+**A delivery week — type=week**
+
+```vue
+<template>
+	<div class="grid w-fit gap-3 rounded-(--bb-radius) border p-4">
+		<div>
+			<p class="m-0 text-sm font-medium">Delivery week</p>
+			<p class="m-0 text-xs text-(--bb-text-muted)">
+				{{ week ?? 'Any day picks its week' }}
+			</p>
+		</div>
+		<BbCalendar
+			v-model="week"
+			aria-label="Delivery week"
+			max="2026-W52"
+			min="2026-W40"
+			type="week"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { BbCalendar } from 'bitboss-ui';
+
+/**
+ * `type="week"`: any day of a row picks its ISO week, and the value is the
+ * label `YYYY-Www` — no day, no zone. `min` / `max` take the same shape.
+ */
+const week = ref<string | null>('2026-W45');
+</script>
+```
+
+`week` (the row) and `weekNumber` (its number) restyle the rows: see
+[Restyling with passthrough](#restyling-with-passthrough).
+
 **A reporting period — type=month + range**
 
 ```vue
@@ -520,7 +627,8 @@ weekday headers follow, and so does a locale switch at runtime. Pass
 `first-day-of-week` (`0` = Sunday … `6` = Saturday) when the app's week is not
 its language's — an `en` app for a European audience takes
 `:first-day-of-week="1"`. `BbDatePicker` and `BbDatePickerInput` take the same
-prop and the same default.
+prop and the same default. Under `type="week"` the grid starts on Monday
+whatever the prop says (ISO weeks).
 
 ### Keyboard and accessibility
 
@@ -528,6 +636,8 @@ The calendar is an ordinary control in the tab order: **one tab stop** lands
 on the day under the cursor (the value, or today), arrows move by day and
 week, Home / End jump to the ends of the grid's row, PageUp / PageDown page by month
 (with Shift, by year), typing a day number jumps to it, Enter or Space picks.
+With `number-of-months`, every key crosses from one month on show into the
+next, and leaving the last (or first) one moves the view a whole page.
 The grid is a `role="grid"` of `role="row"` / `gridcell` nodes; a picked day
 carries `aria-selected` and says "selected" in its name, a pending range
 announces "select an end date", and the month / year headings are buttons
@@ -547,8 +657,9 @@ tokens, so `pt:root="[--px:2px]"` tightens the padding and the grid width
 follows), `header` (the navigation bar), `arrow` (the previous / next
 buttons), `month` and `year` (the heading buttons), `cellColumnHeader` (each
 weekday letter), `day` (one whole day cell) and `dayButton` (the button
-inside it), `monthItem` and `yearItem` (one button of the month / year
-panel).
+inside it), `week` (one row of seven days with `type="week"`) and
+`weekNumber` (its ISO week number), `monthItem` and `yearItem` (one button of
+the month / year panel).
 
 States: `root` is `disabled` while the calendar is; `arrow` is `disabled` at a
 `min` / `max` bound; `month` and `year` are `active` while their panel is
@@ -556,7 +667,10 @@ open. The cells resolve per node — on `day` and `dayButton`: `selected`,
 `disabled`, `today`, `outside` (a day of the previous or next month),
 `rangeStart` / `rangeEnd` / `inRange` (a committed range) and `highlighted`
 (the keyboard cursor). The panel items carry the same set without `today` and
-`outside`.
+`outside`. The week rows resolve per row — on `week` and `weekNumber`:
+`selected` (a chosen week; under `range` its two ends, as on their days),
+`rangeStart` / `rangeEnd` / `inRange`, and `disabled` only while the whole
+calendar is.
 
 `day` is the whole cell and `dayButton` the rounded mark inside it: a
 background on `pt:day` paints the full cell square, so restyle the mark on
@@ -576,6 +690,19 @@ bound's time on the day `min` / `max` falls on), and `header` /
 />
 ```
 
+Under `type="week"` the row and its number take the same grammar:
+
+```vue
+<BbCalendar
+	v-model="sprint"
+	pt:week-number="text-(--bb-text-muted)"
+	pt:week-number:selected="font-semibold"
+	pt:week:in-range="italic"
+	range
+	type="week"
+/>
+```
+
 `BbDatePicker` and `BbDatePickerInput` forward every one of these parts to
 the calendar they host: `pt:day` written on the picker, on the input or on a
 calendar in place lands on the same node, with the same states. The full
@@ -605,24 +732,25 @@ the page is `BbDatePicker`.
 
 | 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: `arrow`, `cellColumnHeader`, `day`, `dayButton`, `header`, `item`, `month`, `monthItem`, `root`, `year`, `yearItem`. States: `active`, `disabled`, `highlighted`, `inRange`, `outside`, `rangeEnd`, `rangeStart`, `selected`, `today`. 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 `BbCalendarProps['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: `arrow`, `cellColumnHeader`, `day`, `dayButton`, `header`, `item`, `month`, `monthItem`, `root`, `week`, `weekNumber`, `year`, `yearItem`. States: `disabled`, `highlighted`, `inRange`, `outside`, `rangeEnd`, `rangeStart`, `selected`, `today`, `active`. 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 `BbCalendarProps['pt']` (`PtValue` is not exported): § Typing `pt` in `<script>`. |
 | `activeSegment` | `'start'` \| `'end'` |  |  | Which end the time rail edits in range + `type="datetime"` (`v-model:active-segment`). Standalone use manages this internally; an embedding host (the date input) drives it from its focused field. Ignored outside range + datetime. |
 | `ampm` | `boolean \| undefined` | `false` |  | 12-hour display with an AM/PM column (requires `type="datetime"`); emits stay 24h. |
 | `disabled` | `boolean \| undefined` | `false` |  | Disables every cell, the navigation and the time rail. |
-| `firstDayOfWeek` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `the locale's week start` |  | First day of the week (0 = Sunday … 6 = Saturday). Omitted, the active locale's week start: Monday for `it`, `de`, `fr`, `en-gb`…, Sunday for bare `en` (US) and `pt` (Brazil). |
-| `floating` | `boolean \| undefined` | `false` |  | Emit plain calendar strings instead of zoned ISO instants. Implied (and forced) by `type="month"` and `type="year"`. |
-| `max` | `string \| undefined` |  |  | Maximum selectable value, in this `type`'s shape. A finer bound is accepted and ceiled to the unit, with a warning. With `datetime`, on its own day the time rail disables the times after it. |
-| `min` | `string \| undefined` |  |  | Minimum selectable value in this `type`'s shape (`YYYY-MM-DD`; `YYYY-MM-DDTHH:mm` with `datetime`, `YYYY-MM` with `month`, `YYYY` with `year`). A finer bound is floored to the unit, with a warning. With `datetime` the rail also disables the earlier times on its day. |
-| `modelValue` | `string \| string[] \| null` |  | yes | v-model: `null` when empty, a string, a `[start, end]` pair with `range`, or a sorted array with `multiple`. The string is `YYYY-MM-DD` when `floating` (`YYYY-MM` / `YYYY` for `month` / `year`), otherwise a zoned ISO instant (carrying the time under `datetime`). |
-| `multiple` | `boolean \| undefined` | `false` |  | Multi-selection: each pick toggles a value in a sorted array (days, months or years). Needs an array `modelValue` (`[]` when empty, never `null`). Throws with `range` or `type="datetime"`. |
-| `range` | `boolean \| undefined` | `false` |  | Enables range selection (`[start, end]`). |
+| `firstDayOfWeek` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `the locale's week start` |  | First day of the week (0 = Sunday … 6 = Saturday). Omitted, the active locale's week start: Monday for `it`, `de`, `fr`, `en-gb`…, Sunday for bare `en` (US) and `pt` (Brazil). Ignored under `type="week"`: ISO weeks run Monday to Sunday, so a week grid always starts on Monday. |
+| `floating` | `boolean \| undefined` | `false` |  | Emit plain calendar strings instead of zoned ISO instants. Implied (and forced) by `type="week"`, `type="month"` and `type="year"`. |
+| `max` | `string \| undefined` |  |  | Maximum selectable value, in this `type`'s shape (as `min`). A finer bound is ceiled to the unit, with a warning. With `datetime`, on its own day the time rail disables the times after it. |
+| `min` | `string \| undefined` |  |  | Minimum selectable value in this `type`'s shape (`YYYY-MM-DD`, `…THH:mm` with `datetime`, `YYYY-MM` / `YYYY` with `month` / `year`; a week or a date with `week`, whole weeks only). A finer bound is floored to the unit, with a warning. With `datetime` the rail disables the earlier times on its day. |
+| `modelValue` | `string \| string[] \| null` |  | yes | v-model: `null` when empty, a string, a `[start, end]` pair with `range`, or a sorted array with `multiple`. The string is `YYYY-MM-DD` when `floating` (`YYYY-Www` / `YYYY-MM` / `YYYY` for `week` / `month` / `year`), otherwise a zoned ISO instant (carrying the time under `datetime`). |
+| `multiple` | `boolean` | `false` |  | Multi-selection: each pick toggles a value in a sorted array (days, weeks, months or years). Needs an array `modelValue` (`[]` when empty, never `null`). Throws with `range` or `type="datetime"`. |
+| `numberOfMonths` | `number \| undefined` | `1` |  | How many months show side by side (day grids only). The keyboard crosses from one month into the next, and the arrows page all of them at once. Too narrow for them all, the months wrap onto the next row. |
+| `range` | `boolean` | `false` |  | Enables range selection (`[start, end]`). |
 | `readonly` | `boolean \| undefined` | `false` |  | Shows the calendar and lets the user page through it, but no pick changes the value. |
 | `seconds` | `boolean \| undefined` | `false` |  | Adds the seconds column (requires `type="datetime"`). |
-| `selectable` | `((date: string) => boolean) \| undefined` |  |  | Predicate invoked per candidate; return `false` to disable it. Receives the value in this `type`'s shape — `YYYY-MM` under `month`, `YYYY` under `year`. |
+| `selectable` | `((date: string) => boolean) \| undefined` |  |  | Predicate invoked per candidate; return `false` to disable it. Receives the value in this `type`'s shape — `YYYY-Www` under `week` (so a week is enabled or disabled whole), `YYYY-MM` under `month`, `YYYY` under `year`. |
 | `step` | `number \| undefined` | `1` |  | Minute-column granularity and arrow stepping (requires `type="datetime"`). |
 | `time` | `string \| string[] \| null \| undefined` |  |  | Companion time model (`v-model:time`), 24-hour `HH:mm` / `HH:mm:ss`. With `floating` it is the only carrier of the time; otherwise it mirrors the time inside `modelValue`. Requires `type="datetime"`. |
-| `type` | `'date'` \| `'month'` \| `'year'` \| `'datetime'` | `"date"` |  | What the calendar selects and emits: `date` (a day), `datetime` (a day plus a time rail), `month` (`YYYY-MM`) or `year` (`YYYY`). `month` / `year` force `floating`, ignore `utc`, and leave the time props inert. |
-| `utc` | `boolean \| undefined` | `false` |  | Emit UTC (`...Z`) instead of the local offset. Ignored with `floating`, and therefore with `type="month"`/`type="year"`. |
+| `type` | `'date'` \| `'month'` \| `'year'` \| `'week'` \| `'datetime'` | `"date"` |  | What the calendar selects and emits: `date` (a day), `datetime` (a day plus a time rail), `week` (an ISO week, `YYYY-Www`: any day picks its row), `month` (`YYYY-MM`) or `year` (`YYYY`). `week` / `month` / `year` force `floating`, ignore `utc`, and leave the time props inert. |
+| `utc` | `boolean \| undefined` | `false` |  | Emit UTC (`...Z`) instead of the local offset. Ignored with `floating`, and therefore with `type="week"`/`type="month"`/`type="year"`. |
 
 ## Passthrough parts and states
 
@@ -631,11 +759,13 @@ the page is `BbDatePicker`.
 | Part | What it is |
 | --- | --- |
 | `root` | The calendar's box: the grid and, with `type="datetime"`, the time rail beside it. A consumer `class` lands here. It carries the sizing tokens — `pt:root="[--cell:36px]"` widens the whole calendar, `pt:root="[--px:2px]"` tightens its padding — and the grid's width follows. |
-| `header` | The navigation bar: the previous / next arrows and the month / year headings. |
+| `header` | The navigation bar: the previous / next arrows and the month / year headings. With `number-of-months`, every month's header row (the later ones caption their month). |
 | `arrow` | The previous / next buttons — a broadcast. |
 | `month` | The month heading button; it opens the month panel. |
 | `year` | The year heading button; it opens the year panel. |
 | `cellColumnHeader` | Each weekday letter above the grid — a broadcast. |
+| `week` | One row of seven days with `type="week"` — the band a picked week paints and the hover outline. A broadcast resolved per row. |
+| `weekNumber` | The ISO week number heading each row with `type="week"` — a broadcast resolved per row. |
 | `day` | One whole day cell — a broadcast resolved per day. A background here paints the full cell square; restyle the round mark on `dayButton`. |
 | `dayButton` | The button inside a day cell — the mark that shows selection. A broadcast resolved per day. |
 | `monthItem` | One month button of the month panel (the home grid of `type="month"`) — a broadcast resolved per month. |
@@ -648,11 +778,11 @@ States are listed in precedence order: when two are on at once and their entries
 | --- | --- |
 | `outside` | Per node, on `day` / `dayButton`: a day of the previous or next month, shown to fill the grid. |
 | `today` | Per node, on `day` / `dayButton`: today. |
-| `inRange` | Per node, on the cells (`day`, `dayButton`, `monthItem`, `yearItem`): inside a committed range, between its ends. |
-| `selected` | Per node, on the cells: a chosen day, month or year; on `item`, the picked time's entry in each column. |
-| `rangeStart` | Per node, on the cells: a committed range's first day, month or year. |
-| `rangeEnd` | Per node, on the cells: a committed range's last day, month or year. |
-| `disabled` | Component-wide while the calendar is `disabled`. Also per node: on the cells, one outside `min` / `max` or refused by `selectable`; on `arrow`, at a bound or while the month / year panel is open; on `item`, a time entry outside the bound's time on the day `min` / `max` falls on. |
+| `inRange` | Per node, on the cells (`day`, `dayButton`, `monthItem`, `yearItem`) and the week rows (`week`, `weekNumber`): inside a committed range, between its ends. |
+| `selected` | Per node, on the cells: a chosen day, month or year; on `week` / `weekNumber`, a chosen week (a range's ends too, as on its days); on `item`, the picked time's entry in each column. |
+| `rangeStart` | Per node, on the cells and the week rows: a committed range's first day, week, month or year. |
+| `rangeEnd` | Per node, on the cells and the week rows: a committed range's last day, week, month or year. |
+| `disabled` | Component-wide while the calendar is `disabled`. Also per node: on the cells, one outside `min` / `max` or refused by `selectable`; on `arrow`, at a bound or while the month / year panel is open; on `year`, while the year panel cannot open; on `item`, a time entry outside the bound's time on the day `min` / `max` falls on. |
 | `active` | Per node, on `month` / `year`: its panel is open. |
 | `highlighted` | Per node, on the cells: the keyboard cursor. |
 
@@ -683,6 +813,9 @@ Set these on the element, or on a class you put on it, to retune this component
 | `--py` | `.bb-calendar` | `8px` |  |
 | `--nav-button-h` | `.bb-calendar` | `24px` |  |
 | `--unit-row` | `.bb-calendar` | `calc(var(--cell) * 1.25)` | Row pitch for the coarse grids (month/year), where a "row" is one of four month rows rather than a week. Roomier than --cell because twelve months in a 4×3 grid have space the 6×7 day grid does not. |
+| `--ring-t` | `.bb-calendar__arrow` | `var(--bb-transition-medium)` |  |
+| `--ring-t` | `.bb-calendar__heading-btn` | `var(--bb-transition-medium)` |  |
+| `--wk` | `.bb-calendar--week` | `calc(var(--cell) * 0.6)` | Two tabular digits at 11px, with air: the column holds numbers only. |
 
 ## Component tree
 
@@ -693,7 +826,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 `BbCalendar`'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 `BbCalendar`'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/BbCalendar.tree.json`.
 
-- `BbCalendar` _(this component)_ — its own template binds: `header` → `div.bb-calendar__header`, `arrow` → `BbBaseButton`, `month` → `BbBaseButton`, `year` → `BbBaseButton`, `day` → `div.bb-calendar__day`, `dayButton` → `button.bb-calendar__day-button`
+- `BbCalendar` _(this component)_ — its own template binds: `header` → `div.bb-calendar__header`, `arrow` → `BbBaseButton`, `month` → `BbBaseButton`, `year` → `BbBaseButton`, `week` → `div.bb-calendar__week`, `weekNumber` → `div.bb-calendar__week-number`, `day` → `div.bb-calendar__day`, `dayButton` → `button.bb-calendar__day-button`
   - `BbBaseButton` _(public — [contract](./BbBaseButton.md))_ — its own pt parts (`BbBaseButton`): `root` → `RouterComponent`, `root` → `a`, `root` → `component`; also mounts `RouterComponent`
   - `CommonTimeSelector` _(internal — not importable, reach it through `BbCalendar`)_ — `BbCalendar`'s pt parts land here: `header` → `div.bb-time-selector__header`, `cellColumnHeader` → `div.bb-time-selector__cell-column-header`, `item` → `BbBaseButton`; documented CSS variables: `--time-mark`; also mounts `BbBaseButton`
   - Also mounts `ScaleFade`, `Slide`, `CalendarMonthPanel`, `CalendarYearPanel`

package/dist/ai/BbCheckbox.md

@@ -587,7 +587,7 @@ no box.
 				:name="pref.name"
 				:persistent-hint="!!pref.hint"
 				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"
 			/>
 		</div>
@@ -685,6 +685,10 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 
 ### Accessibility
 
+- On a touch screen a lone checkbox'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.
 - Always pass a `label` (or `label` slot) — never rely on nearby text alone.
 - `errors`, `warnings`, `description` and `hint` are all wired to the input through
   `aria-describedby`, in that order: the reason the field is invalid is spoken

package/dist/ai/BbCheckboxGroup.md

@@ -510,7 +510,7 @@ checked day painted, the hint reading the choice back:
 			pt:icon="hidden"
 			pt:item="justify-items-center rounded-(--bb-radius) border py-2 hover:bg-(--bb-muted)"
 			pt:item:checked="border-(--bb-primary) bg-(--bb-primary) hover:bg-(--bb-primary-hover)"
-			pt:item:focus-visible="ring-2 ring-(--bb-primary-ring)"
+			pt:item:focus-visible="ring-2 ring-(--bb-ring)"
 			pt:label="text-sm font-medium"
 			pt:label:checked="text-(--bb-primary-fg)"
 			pt:list="[--gap:6px] [--tile-min-width:0px]"
@@ -664,8 +664,11 @@ never wraps (it scrolls); `list-layout="vertical"` stacks it into a column
 (runs stack on the Y axis), `"vertical-stretch"` spans the field, and the
 other layouts and `item-layout` do not apply. `pt:indicator` reaches every
 pill or bar, and `pt:<part>:pill` / `pt:<part>:line` style a part in one look
-only. The strip's tokens are its own, named and valued as a tab strip's; a
-registered `checkboxVariants: ['brand']` sets them on
+only. The strip's tokens are its own, named and valued as a tab strip's. 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-checkbox-group__list--strip`; beside an `sm` button that
+is `pt:list="[--list-h:24px] [--fs:12px] [--p:2px]"`. A registered `checkboxVariants: ['brand']` sets them on
 `.bb-checkbox-group__list--brand` and draws pills per run, as `pill` does.
 
 **Pick values with the tabs look**
@@ -1113,7 +1116,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 pill per run of adjacent picks) or `'line'` (a bar under each pick). `list-layout="vertical"` stacks it. Register more with `checkboxVariants`. Unset: the group's own rows. |
+| `variant` | `'pill'` \| `'line'` |  |  | A tab-strip look: `'pill'` (a pill per run of adjacent picks) or `'line'` (a bar under each pick). `list-layout="vertical"` stacks it. Register more with `checkboxVariants`. 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
@@ -1179,11 +1182,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-checkbox-group__list` | `24px` | Space between rows on one line. |
+| `--row-gap` | `.bb-checkbox-group__list` | `10px` | Space between wrapped lines. |
+| `--tile-min-width` | `.bb-checkbox-group__list` | `96px` | How narrow a tile may get before the tiles wrap (`tiles` only). |
+| `--list-bg` | `.bb-checkbox-group__list--strip` | `color-mix(in oklab, var(--bb-text) 8%, transparent)` | The strip behind the triggers |
+| `--list-border` | `.bb-checkbox-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-checkbox-group__list--strip` | `3px` | strip inner padding — the gutter the indicator sits in, and the scroll inset |
+| `--list-r` | `.bb-checkbox-group__list--strip` | `var(--bb-radius)` | strip corners |
+| `--list-h` | `.bb-checkbox-group__list--strip` | `var(--bb-control-h)` | strip min height |
+| `--fs` | `.bb-checkbox-group__list--strip` | `var(--bb-fs)` | trigger label size |
+| `--trigger-gap` | `.bb-checkbox-group__list--strip` | `0px` | space between triggers |
+| `--trigger-px` | `.bb-checkbox-group__list--strip` | `10px` | trigger side padding |
+| `--trigger-r` | `.bb-checkbox-group__list--strip` | `calc(var(--list-r) - var(--p))` | Trigger corners, concentric inside --list-r |
+| `--trigger-min-h` | `.bb-checkbox-group__list--strip` | `calc(var(--list-h) - var(--p) * 2)` | Trigger height inside the padded strip |
+| `--list-fg` | `.bb-checkbox-group__list--strip` | `var(--bb-text-muted)` | unchecked trigger label |
+| `--hover-fg` | `.bb-checkbox-group__list--strip` | `var(--bb-text)` | hovered trigger label |
+| `--active-fg` | `.bb-checkbox-group__list--strip` | `var(--bb-text)` | checked trigger label |
+| `--active-fw` | `.bb-checkbox-group__list--strip` | `500` | checked trigger label weight (unchecked labels are 500) |
+| `--indicator-bg` | `.bb-checkbox-group__list--strip` | `var(--bb-panel)` | the indicator's fill |
+| `--indicator-border` | `.bb-checkbox-group__list--strip` | `color-mix(in oklab, var(--bb-text) 8%, transparent)` | The indicator's edge |
+| `--indicator-r` | `.bb-checkbox-group__list--strip` | `var(--trigger-r)` | The indicator's corners — the pill's, concentric inside --list-r |
+| `--indicator-h` | `.bb-checkbox-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-checkbox-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-checkbox-group__list--strip` | `var(--bb-elev)` | The theme's resting lift, composed UNDER the indicator's own shadow |
+| `--indicator-shadow` | `.bb-checkbox-group__list--strip` | `var(--bb-shadow-sm)` | Indicator lift, painted on top of --elev |
+| `--list-bg` | `.bb-checkbox-group__list--line` | `transparent` |  |
+| `--list-border` | `.bb-checkbox-group__list--line` | `var(--bb-border)` |  |
+| `--p` | `.bb-checkbox-group__list--line` | `0px` |  |
+| `--list-r` | `.bb-checkbox-group__list--line` | `0px` |  |
+| `--trigger-r` | `.bb-checkbox-group__list--line` | `var(--bb-radius-sm)` |  |
+| `--active-fw` | `.bb-checkbox-group__list--line` | `600` |  |
+| `--indicator-bg` | `.bb-checkbox-group__list--line` | `var(--bb-primary)` |  |
+| `--indicator-border` | `.bb-checkbox-group__list--line` | `transparent` |  |
+| `--indicator-r` | `.bb-checkbox-group__list--line` | `0` |  |
+| `--indicator-h` | `.bb-checkbox-group__list--line` | `2px` |  |
+| `--indicator-shadow` | `.bb-checkbox-group__list--line` | `none` |  |
+| `--elev` | `.bb-checkbox-group__list--line` | `none` |  |
 
 ## Component tree
 

package/dist/ai/BbColorInput.md

@@ -43,7 +43,7 @@
 | `--border-focus` | `pt:box` | `CommonFieldInput` | frame while focused, or --active |
 | `--ring-size` | `pt:box` | `CommonFieldInput` | ring width; 0 is a variant declining the ring |
 | `--ring-color` | `pt:box` | `CommonFieldInput` | ring colour; state owns it, not variants |
-| `--elev` | `pt:box` | `CommonFieldInput` | Resting lift, composed UNDER the ring at every box-shadow site below. `0 0 0 0 transparent` and not `none`, so the shadow list keeps a constant length and stays interpolable whatever a variant assigns — the same reason `--bb-elev` itself ships that value. |
+| `--elev` | `pt:box` | `CommonFieldInput` | Resting lift, alone in `box-shadow`: the ring is the box's outline, so a theme's `--elev: none` never takes the ring with it. |
 | `--frost` | `pt:box` | `CommonFieldInput` | Plate frost — a full `backdrop-filter` value (see --bb-surface-filter). Routed through a local rather than read from the token directly, so a chrome-less variant can decline it: frosting a ghost field gives it the plate it is contractually not supposed to have. |
 | `--inside-label-clearance` | `pt:box`, `pt:prefix`, `pt:suffix` | `CommonFieldInput` | Height and top padding added above the text for a label rendered inside the box. Zero here; the `--inside-label` rules at the bottom of this file raise it to one label line, or two with a description. |
 | `--w` | `pt:icon` | `BbIcon` | `--w` is set inline by BbIcon from the size prop. The `initial` default seals it: without it an ancestor's `--w` (e.g. a dropdown's width bridge) would inherit in and size the icon. The `--size` indirection stays so higher-specificity rules (e.g. `.bb-badge .bb-icon`) can re-point it. |
@@ -682,7 +682,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`, `description`, `hint`, `icon`, `indicator`, `input`, `label`, `message`, `panel`, `prefix`, `root`, `sheet`, `spinner`, `suffix`, `swatch`. States: `disabled`, `errors`, `ghost`, `hasValue`, `loading`, `outline`, `readonly`, `secondary`, `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 `BbColorInputProps['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`, `description`, `hint`, `icon`, `indicator`, `input`, `label`, `message`, `panel`, `prefix`, `root`, `sheet`, `spinner`, `suffix`, `swatch`. States: `disabled`, `errors`, `ghost`, `hasValue`, `loading`, `open`, `outline`, `readonly`, `secondary`, `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 `BbColorInputProps['pt']` (`PtValue` is not exported): § Typing `pt` in `<script>`. |
 | `adaptive` | `boolean \| undefined` | ``config.adaptive` (`true`)` |  | When `true`, the color palette opens as a bottom off-canvas sheet on mobile viewports instead of a floating popover; on desktop it stays a popover. Mirrors the adaptive behaviour of `BbSelect`/`BbDatePickerInput`. When unset, falls back to the global `config.adaptive`. |
 | `alpha` | `boolean \| undefined` | `false` |  | Enable the alpha channel. Shows an opacity slider and uses `#RRGGBBAA` hex8 format. |
 | `append:icon` | `string \| undefined` |  |  | Name of the icon to be added at the end of the input. |
@@ -697,7 +697,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 | `formless` | `boolean \| undefined` | `false` |  | Keep this control out of the enclosing `BbForm` entirely: not submitted, not dirty, not reset, not validated. For a control that is not form data (a filter, a "show advanced" switch). |
 | `hasErrors` | `boolean \| undefined` | `false` |  | Define if the component should be in an error state. It usually attaches a CSS class for styling purposes. |
 | `hasWarnings` | `boolean \| undefined` | `false` |  | Define if the component should be in a warning state. Same chrome as errors with `--bb-warn`; errors take priority. |
-| `hideLabel` | `boolean \| undefined` | `false` |  | Visually hides the label of the input while maintaining accessibility. |
+| `hideLabel` | `boolean \| undefined` | `false` |  | Visually hides the label of the input while maintaining accessibility. Pair it with a `placeholder`: an empty field otherwise shows nothing saying what it is for. |
 | `hint` | `string \| undefined` |  |  | Text box to be displayed near the input, usually to indicate instructions. |
 | `id` | `string \| undefined` |  |  | The `id` of the native control; the label's `for` and the description and message ids derive from it. Generated when omitted. |
 | `inputAlign` | `FieldCrossAlign \| undefined` |  |  | Vertical position of the control in a side-by-side row; not `inputPosition`, the horizontal one. Omitted, the control's first line meets the label's. |
@@ -756,6 +756,7 @@ States are listed in precedence order: when two are on at once and their entries
 | `disabled` | Component-wide: the control is `disabled`. |
 | `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. |
+| `open` | Component-wide: the palette is showing — `pt:indicator:open` styles the swatch button 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. |
@@ -799,6 +800,7 @@ Set these on the element, or on a class you put on it, to retune this component
 | Property | Set on | Default | What it is |
 | --- | --- | --- | --- |
 | `--elev` | `.bb-color-input__indicator` | `var(--bb-elev-sm)` | Small-chrome resting lift, DECLARED here so it is sealed: an ancestor that sets `--elev` for its own plate must not reach in and lift this. Same tier and same name as the checkbox and radio glyphs. |
+| `--ring-t` | `.bb-color-input__indicator` | `var(--bb-transition-medium)` |  |
 | `--border-color` | `pt:box` | `per variant` | The resting border, at the fixed --bb-border-w. Errors and warnings paint their frame over it, so `pt:box="[--border-color:…]"` recolours the rest without hiding the state; a plain `border-*` utility on the base pt:box would hide it (ESLint `no-box-border-color`). |
 
 ## Component tree

package/dist/ai/BbColorPalette.md

@@ -808,9 +808,13 @@ 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 |
-| --- | --- | --- |
-| `--edge` | `color-mix(in oklab, var(--bb-text) 8%, transparent)` | The swatch's own edge: a text-tone hairline, so a pale swatch reads on a light panel AND a deep one (green-900, indigo-900) on a dark panel — a fixed black 8% vanished there. |
+| Property | Set on | Default | What it is |
+| --- | --- | --- | --- |
+| `--ring-t` | `.bb-color-palette__canvas-wrap` | `var(--bb-transition-medium)` |  |
+| `--ring-t` | `.bb-color-palette__eyedropper` | `var(--bb-transition-medium)` |  |
+| `--ring-t` | `.bb-color-palette__slider-wrap` | `var(--bb-transition-medium)` |  |
+| `--edge` | `.bb-color-palette__swatch` | `color-mix(in oklab, var(--bb-text) 8%, transparent)` | The swatch's own edge: a text-tone hairline, so a pale swatch reads on a light panel AND a deep one (green-900, indigo-900) on a dark panel — a fixed black 8% vanished there. |
+| `--ring-t` | `.bb-color-palette__swatch` | `var(--bb-transition-medium)` |  |
 
 ## Component tree