bitboss-ui 3.0.0-beta.31 → 3.0.0-beta.32

package/dist/ai/BbBaseCheckboxIcon.md

@@ -157,7 +157,7 @@ from an ancestor — so `--size` set on a wrapper `div` is simply ignored
 ### Restyling with passthrough
 
 `pt` reaches the one part with a class list — or, in the object form, a
-style and attributes. Part: `root` (the drawn glyph). States: `checked`, `indeterminate`, `readonly`, `disabled`, `warnings`, `errors`, `focused`, `focus-visible` — each
+style and attributes. Part: `root` (the drawn glyph). States: `checked`, `indeterminate`, `readonly`, `disabled`, `warnings`, `errors`, `focused`, `focusVisible` — each
 true exactly while the glyph paints it, so they follow its own rules:
 `warnings` is off while `errors` is on.
 
@@ -202,7 +202,7 @@ The full grammar, the merge rules and the global map are in the
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
-| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: `checked`, `disabled`, `errors`, `focus-visible`, `focused`, `indeterminate`, `readonly`, `warnings`. 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`. |
+| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: `checked`, `disabled`, `errors`, `focused`, `focusVisible`, `indeterminate`, `readonly`, `warnings`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `checked` | `boolean \| undefined` | `false` |  | Renders the checked state (fills the box and draws the checkmark). |
 | `disabled` | `boolean \| undefined` | `false` |  | Disables the glyph (muted fill, not-allowed cursor). Purely visual. |
 | `focused` | `boolean \| undefined` | `false` |  | Whether the paired native input has focus — any focus, mouse included. Paints `--focused`, the hook the `focused` passthrough state aliases (T19); draws nothing by itself — the ring stays on `focusVisible`. |
@@ -231,7 +231,7 @@ States are listed in precedence order: when two are on at once and their entries
 | `warnings` | Component-wide: the toggle shows warnings and no errors. |
 | `errors` | Component-wide: the toggle shows errors — the glyph and the message line turn red. |
 | `focused` | Component-wide: the native input has focus — any focus, mouse included, like the `focused` slot prop. |
-| `focus-visible` | Component-wide: that focus is keyboard-visible — where a focus ring belongs. |
+| `focusVisible` | Component-wide: that focus is keyboard-visible — where a focus ring belongs. |
 
 ## Events
 

package/dist/ai/BbBaseRadioIcon.md

@@ -171,7 +171,7 @@ from an ancestor — so `--size` set on a wrapper `div` is simply ignored
 ### Restyling with passthrough
 
 `pt` reaches the one part with a class list — or, in the object form, a
-style and attributes. Part: `root` (the drawn glyph). States: `checked`, `readonly`, `disabled`, `warnings`, `errors`, `focused`, `focus-visible` — each
+style and attributes. Part: `root` (the drawn glyph). States: `checked`, `readonly`, `disabled`, `warnings`, `errors`, `focused`, `focusVisible` — each
 true exactly while the glyph paints it, so they follow its own rules:
 `warnings` is off while `errors` is on.
 
@@ -217,7 +217,7 @@ The full grammar, the merge rules and the global map are in the
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
-| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: `checked`, `disabled`, `errors`, `focus-visible`, `focused`, `readonly`, `warnings`. 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`. |
+| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: `checked`, `disabled`, `errors`, `focused`, `focusVisible`, `readonly`, `warnings`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `checked` | `boolean \| undefined` | `false` |  | Renders the checked state (grows the inner dot). |
 | `disabled` | `boolean \| undefined` | `false` |  | Disables the glyph (muted fill, not-allowed cursor). Purely visual. |
 | `focused` | `boolean \| undefined` | `false` |  | Whether the paired native input has focus — any focus, mouse included. Paints `--focused`, the hook the `focused` passthrough state aliases (T19); draws nothing by itself — the ring stays on `focusVisible`. |
@@ -244,7 +244,7 @@ States are listed in precedence order: when two are on at once and their entries
 | `warnings` | Component-wide: the toggle shows warnings and no errors. |
 | `errors` | Component-wide: the toggle shows errors — the glyph and the message line turn red. |
 | `focused` | Component-wide: the native input has focus — any focus, mouse included, like the `focused` slot prop. |
-| `focus-visible` | Component-wide: that focus is keyboard-visible — where a focus ring belongs. |
+| `focusVisible` | Component-wide: that focus is keyboard-visible — where a focus ring belongs. |
 
 ## Events
 

package/dist/ai/BbBaseSwitchIcon.md

@@ -167,7 +167,7 @@ from an ancestor — so `--w` set on a wrapper `div` is simply ignored
 ### Restyling with passthrough
 
 `pt` reaches the one part with a class list — or, in the object form, a
-style and attributes. Part: `root` (the drawn glyph). States: `checked`, `indeterminate`, `readonly`, `disabled`, `warnings`, `errors`, `focused`, `focus-visible` — each
+style and attributes. Part: `root` (the drawn glyph). States: `checked`, `indeterminate`, `readonly`, `disabled`, `warnings`, `errors`, `focused`, `focusVisible` — each
 true exactly while the glyph paints it, so they follow its own rules:
 `warnings` is off while `errors` is on.
 
@@ -213,7 +213,7 @@ The full grammar, the merge rules and the global map are in the
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
-| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: `checked`, `disabled`, `errors`, `focus-visible`, `focused`, `indeterminate`, `readonly`, `warnings`. 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`. |
+| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `root`. States: `checked`, `disabled`, `errors`, `focused`, `focusVisible`, `indeterminate`, `readonly`, `warnings`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `checked` | `boolean \| undefined` | `false` |  | Renders the checked state (fills the track and slides the thumb to the end). |
 | `disabled` | `boolean \| undefined` | `false` |  | Disables the glyph (muted track, not-allowed cursor). Purely visual. |
 | `focused` | `boolean \| undefined` | `false` |  | Whether the paired native input has focus — any focus, mouse included. Paints `--focused`, the hook the `focused` passthrough state aliases (T19); draws nothing by itself — the ring stays on `focusVisible`. |
@@ -242,7 +242,7 @@ States are listed in precedence order: when two are on at once and their entries
 | `warnings` | Component-wide: the toggle shows warnings and no errors. |
 | `errors` | Component-wide: the toggle shows errors — the glyph and the message line turn red. |
 | `focused` | Component-wide: the native input has focus — any focus, mouse included, like the `focused` slot prop. |
-| `focus-visible` | Component-wide: that focus is keyboard-visible — where a focus ring belongs. |
+| `focusVisible` | Component-wide: that focus is keyboard-visible — where a focus ring belongs. |
 
 ## Events
 

package/dist/ai/BbCalendar.md

@@ -470,20 +470,20 @@ and attributes — optionally only while a state is on. Parts: `root` (the
 calendar's box, where a consumer `class` lands too; it carries the sizing
 tokens, so `pt:root="[--pad-x:2px]"` tightens the padding and the grid width
 follows), `header` (the navigation bar), `arrow` (the previous / next
-buttons), `month` and `year` (the heading buttons), `column-header` (each
-weekday letter), `day` (one whole day cell) and `day-button` (the button
-inside it), `month-item` and `year-item` (one button of the month / year
+buttons), `month` and `year` (the heading buttons), `columnHeader` (each
+weekday letter), `day` (one whole day cell) and `dayButton` (the button
+inside it), `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
-open. The cells resolve per node — on `day` and `day-button`: `selected`,
+open. The cells resolve per node — on `day` and `dayButton`: `selected`,
 `disabled`, `today`, `outside` (a day of the previous or next month),
-`range-start` / `range-end` / `in-range` (a committed range) and `highlighted`
+`rangeStart` / `rangeEnd` / `inRange` (a committed range) and `highlighted`
 (the keyboard cursor). The panel items carry the same set without `today` and
 `outside`.
 
-`day` is the whole cell and `day-button` the rounded mark inside it: a
+`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
 `pt:day-button`. The time rail is not a part.
 
@@ -522,7 +522,7 @@ 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`, `column-header`, `day`, `day-button`, `header`, `month`, `month-item`, `root`, `year`, `year-item`. States: `active`, `disabled`, `highlighted`, `in-range`, `outside`, `range-end`, `range-start`, `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`. |
+| `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`, `columnHeader`, `day`, `dayButton`, `header`, `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`. |
 | `activeSegment` | `BbCalendarSegment \| undefined` |  |  | 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. |
@@ -552,22 +552,22 @@ the page is `BbDatePicker`.
 | `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. |
-| `column-header` | Each weekday letter above the grid — a broadcast. |
-| `day` | One whole day cell — a broadcast resolved per day. A background here paints the full cell square; restyle the round mark on `day-button`. |
-| `day-button` | The button inside a day cell — the mark that shows selection. A broadcast resolved per day. |
-| `month-item` | One month button of the month panel (the home grid of `type="month"`) — a broadcast resolved per month. |
-| `year-item` | One year button of the year list — a broadcast resolved per year. |
+| `columnHeader` | Each weekday letter above the grid — a broadcast. |
+| `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. |
+| `yearItem` | One year button of the year list — a broadcast resolved per year. |
 
 States are listed in precedence order: when two are on at once and their entries conflict, the later one wins.
 
 | State | When it is on |
 | --- | --- |
-| `outside` | Per node, on `day` / `day-button`: a day of the previous or next month, shown to fill the grid. |
-| `today` | Per node, on `day` / `day-button`: today. |
-| `in-range` | Per node, on the cells (`day`, `day-button`, `month-item`, `year-item`): inside a committed range, between its ends. |
+| `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. |
-| `range-start` | Per node, on the cells: a committed range's first day, month or year. |
-| `range-end` | Per node, on the cells: a committed range's last day, month or year. |
+| `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. |
 | `active` | Per node, on `month` / `year`: its panel is open. |
 | `highlighted` | Per node, on the cells: the keyboard cursor. |
@@ -610,7 +610,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 the `tree` field of this component in `components.json`.
 
-- `BbCalendar` _(this component)_ — its own template binds: `header` → `div.bb-calendar__controls`, `arrow` → `BbBaseButton`, `month` → `BbBaseButton`, `year` → `BbBaseButton`, `day` → `div.bb-calendar__date`, `day-button` → `button.bb-calendar__date-button`
+- `BbCalendar` _(this component)_ — its own template binds: `header` → `div.bb-calendar__controls`, `arrow` → `BbBaseButton`, `month` → `BbBaseButton`, `year` → `BbBaseButton`, `day` → `div.bb-calendar__date`, `dayButton` → `button.bb-calendar__date-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`)_ — documented CSS variables: `--time-mark`; also mounts `BbBaseButton`
   - Also mounts `ScaleFade`, `Slide`, `CalendarMonthPanel`, `CalendarYearPanel`

package/dist/ai/BbCheckbox.md

@@ -670,7 +670,7 @@ map are in the [passthrough guide](./guides/passthrough.md).
 
 | 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`, `label`, `message`, `root`. States: `checked`, `disabled`, `errors`, `focus-visible`, `focused`, `indeterminate`, `readonly`, `warnings`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
+| `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`, `label`, `message`, `root`. States: `checked`, `disabled`, `errors`, `focused`, `focusVisible`, `indeterminate`, `readonly`, `warnings`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `autofocus` | `Booleanish \| undefined` |  |  | Sets autofocus on page load. |
 | `checked` | `boolean \| undefined` | `undefined` |  | Defines the input as checked. |
 | `description` | `string \| undefined` |  |  | Descriptive text displayed below the label and above the input. Unlike the hint it is always visible, and it is linked to the input via `aria-describedby` (after any `errors` / `warnings`, before the `hint`). |
@@ -721,7 +721,7 @@ States are listed in precedence order: when two are on at once and their entries
 | `warnings` | Component-wide: the toggle shows warnings and no errors. |
 | `errors` | Component-wide: the toggle shows errors — the glyph and the message line turn red. |
 | `focused` | Component-wide: the native input has focus — any focus, mouse included, like the `focused` slot prop. |
-| `focus-visible` | Component-wide: that focus is keyboard-visible — where a focus ring belongs. |
+| `focusVisible` | Component-wide: that focus is keyboard-visible — where a focus ring belongs. |
 
 ## Events
 

package/dist/ai/BbCheckboxGroup.md

@@ -24,7 +24,7 @@
 | `pt:list` | `span` | `OptionsContainer` _(internal)_ |
 | `pt:item` | `label` | `OptionsContainer` _(internal)_ |
 | `pt:label` | `span` | `OptionsContainer` _(internal)_ |
-| `pt:item-description` | `span` | `OptionsContainer` _(internal)_ |
+| `pt:itemDescription` | `span` | `OptionsContainer` _(internal)_ |
 
 **CSS variables you can set through those parts** — declared deeper in the tree, so set one on the part that reads it (`pt:<part>="[--name:value]"`), never on `BbCheckboxGroup`'s root:
 
@@ -588,13 +588,13 @@ object form, a style and attributes — optionally only while a state is on.
 Parts: `root` (the fieldset), `legend` (the group's heading, after the `legend`
 prop), `description`, `message`, `hint` (the helper line — shown on focus, or
 always with `persistent-hint`), `item` — one option row —, `icon` — that row's glyph —, `label` — that
-option's label text, both as on a standalone control — and `item-description` — its
+option's label text, both as on a standalone control — and `itemDescription` — its
 muted second line (`itemProps.description`), never the group's `description`.
-`item`, `icon`, `label` and `item-description` are broadcasts resolved per row. States of the
-whole group, on every part: `has-value` (something is chosen), `readonly`,
+`item`, `icon`, `label` and `itemDescription` are broadcasts resolved per row. States of the
+whole group, on every part: `hasValue` (something is chosen), `readonly`,
 `loading` (the items are being fetched), `disabled`, `warnings`, `errors`.
 States of one row, on the row parts only: `checked`, `focused` (that row's
-input has focus), `focus-visible` (that focus is keyboard-visible), and the
+input has focus), `focusVisible` (that focus is keyboard-visible), and the
 row's own `disabled` — the states a standalone control has. A name outside
 that list is a type error and an ESLint error.
 
@@ -636,6 +636,13 @@ const cadence = ref<string[]>(['Daily']);
 </script>
 ```
 
+A look that depends on the ITEM — a paid channel tinted differently, a
+deprecated option muted — is a **per-item function** on a row part:
+`:pt:item="({ item, checked }) => …"`, called with the raw item (typed as your
+item) and every state as a boolean for that row, its result merged after
+`pt:item:checked`. Row parts only (`item`, `icon`, `label`, `itemDescription`),
+on the instance only — never in the plugin's global map or a scope.
+
 This is the old `:deep()` reach-in on the selected row's modifier class,
 spelled as a part and a state — your class, our promise. Classes append to
 ours, an attribute in `attrs` wins over ours. The full grammar, the merge rules
@@ -696,7 +703,7 @@ and the global map are in the [passthrough guide](./guides/passthrough.md).
 
 | 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`, `item-description`, `label`, `legend`, `list`, `message`, `root`. States: `disabled`, `errors`, `has-value`, `loading`, `readonly`, `warnings`, `checked`, `focus-visible`, `focused`. 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`. |
+| `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`. |
 | `autofocus` | `Booleanish \| undefined` |  |  | Sets autofocus on page load. |
 | `compact` | `boolean \| undefined` | `false` |  | Displays the component in a compact version. |
 | `dependencies` | `unknown[] \| undefined` |  |  | Defines an array of dependencies that will trigger actions in the component upon change. |
@@ -747,22 +754,22 @@ and the global map are in the [passthrough guide](./guides/passthrough.md).
 | `hint` | The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`. |
 | `list` | The node that lays the rows out (flex + wrap, gaps on `--gap` / `--row-gap`): `pt:list="grid grid-cols-3"` re-lays them, `pt:list="[--gap:8px]"` tightens them. Takes the group-wide states only. |
 | `item` | One option row — a broadcast, resolved per option with its own `checked` / `disabled` / focus. Takes a per-item function. |
-| `icon` | One row's drawn glyph — the default one: a consumer `icon` slot replaces it. |
-| `label` | One option's label text (the `label` slot's default). |
-| `item-description` | One option's muted second line, its description. |
+| `icon` | One row's drawn glyph — the default one: a consumer `icon` slot replaces it. Takes a per-item function. |
+| `label` | One option's label text (the `label` slot's default). Takes a per-item function. |
+| `itemDescription` | One option's muted second line, its description. Takes a per-item function. |
 
 States are listed in precedence order: when two are on at once and their entries conflict, the later one wins.
 
 | State | When it is on |
 | --- | --- |
-| `has-value` | Component-wide: at least one option is chosen. |
-| `checked` | Per row, on `item`, `icon`, `label` and `item-description`: that option is chosen. Never on a field part. |
+| `hasValue` | Component-wide: at least one option is chosen. |
+| `checked` | Per row, on `item`, `icon`, `label` and `itemDescription`: that option is chosen. Never on a field part. |
 | `readonly` | Component-wide: the group is `readonly`. |
 | `disabled` | Component-wide while the group is `disabled`; also per row, on the row parts of an option that is disabled on its own. |
 | `warnings` | Component-wide: the group shows warnings and no errors. |
 | `errors` | Component-wide: the group shows errors. |
 | `focused` | Per row, on the row parts: that option's input has focus — any focus, mouse included. |
-| `focus-visible` | Per row, on the row parts: that option's focus is keyboard-visible — where a focus ring belongs. |
+| `focusVisible` | Per row, on the row parts: that option's focus is keyboard-visible — where a focus ring belongs. |
 | `loading` | Component-wide: the items are being fetched. |
 
 ## Events
@@ -820,7 +827,7 @@ Set these on the element, or on a class you put on it, to retune this component
 
 - `BbCheckboxGroup` _(this component)_ — its own template binds: `icon` → `BbBaseCheckboxIcon`
   - `CommonField` _(internal — not importable, reach it through `BbCheckboxGroup`)_ — `BbCheckboxGroup`'s pt parts land here: `root` → `div.bb-field`, `label` → `component`, `description` → `span.bb-field__description`, `hint` → `span.bb-field__hint-text`, `message` → `div.bb-field__errors`, `message` → `div.bb-field__warnings`
-  - `OptionsContainer` _(internal — not importable, reach it through `BbCheckboxGroup`)_ — `BbCheckboxGroup`'s pt parts land here: `list` → `span`, `item` → `label`, `label` → `span`, `item-description` → `span`
+  - `OptionsContainer` _(internal — not importable, reach it through `BbCheckboxGroup`)_ — `BbCheckboxGroup`'s pt parts land here: `list` → `span`, `item` → `label`, `label` → `span`, `itemDescription` → `span`
   - Also mounts `BbBaseCheckboxIcon`
 
 ## See Also

package/dist/ai/BbColorInput.md

@@ -506,7 +506,7 @@ the `BbTextInput` guide.
 `pt` reaches a named part of the control with a class list — or, in the
 object form, a style and attributes — optionally only while a state is on.
 Parts: `root` (the container), `label`, `description`, `message` (the errors / warnings region — one node each, only one ever shows), `hint` (the helper line — shown on focus, or always with `persistent-hint`), `box` (the bordered field box), `input` (the native control), `icon` (`prepend:icon` + `append:icon` — a broadcast; the state glyphs are chrome), `spinner` (the spinner shown while `loading`), `prefix`, `suffix`, `clear` (the ✕ that empties the field). Plus `indicator` (the colour dot that opens the palette), `panel` (the palette surface — the popover's painted bubble on desktop, the sheet itself on a phone), `sheet` (the bottom sheet the color palette opens in on a phone — no node on desktop) and `swatch` (one palette swatch, after the `swatches` prop — a broadcast).
-States: `errors`, `warnings` (never beside errors), `loading`, `disabled`, `readonly`, `has-value` (written `pt:box:has-value`), on every part; plus `selected` on `swatch` only — the swatch matching the value (`pt:swatch:selected`). A name outside that list is a type error and an
+States: `errors`, `warnings` (never beside errors), `loading`, `disabled`, `readonly`, `hasValue` (written `pt:box:has-value`), on every part; plus `selected` on `swatch` only — the swatch matching the value (`pt:swatch:selected`). A name outside that list is a type error and an
 ESLint error.
 
 The workspace appearance form above, restyled through those parts: mono on
@@ -664,7 +664,7 @@ of it. The full grammar, the merge rules and the global map are in the
 
 | Prop | Type | Default | Required | Description |
 | --- | --- | --- | --- | --- |
-| `pt:<part>`, `pt:<part>:<state>`, `pt` | `PtValue` | | | Passthrough — a class list, or `{ class, style, attrs }`, bound to one named part of the component; the state form applies only while that state is on. Parts: `box`, `clear`, `description`, `hint`, `icon`, `indicator`, `input`, `label`, `message`, `panel`, `prefix`, `root`, `sheet`, `spinner`, `suffix`, `swatch`. States: `disabled`, `errors`, `has-value`, `loading`, `readonly`, `warnings`, `selected`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
+| `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`, `hasValue`, `loading`, `readonly`, `warnings`, `selected`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `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 … |
 | `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. |
@@ -726,7 +726,7 @@ States are listed in precedence order: when two are on at once and their entries
 
 | State | When it is on |
 | --- | --- |
-| `has-value` | Component-wide: the control holds a value, by its own rule (`0` counts on `BbNumberInput`, `''` on `BbColorInput`). |
+| `hasValue` | Component-wide: the control holds a value, by its own rule (`0` counts on `BbNumberInput`, `''` on `BbColorInput`). |
 | `selected` | Per node, on `swatch` only: the swatch that matches the value. |
 | `readonly` | Component-wide: the control is `readonly` — shown, focusable, not editable. |
 | `disabled` | Component-wide: the control is `disabled`. |

package/dist/ai/BbDatePicker.md

@@ -299,18 +299,18 @@ desktop, the sheet itself on a phone — it also carries the sizing tokens, so
 `pt:panel="[--pad-x:2px]"` tightens the padding and the grid width follows), `sheet` (the
 bottom sheet on a phone only, applied after `panel`), `header` (the
 navigation bar), `arrow` (the previous / next buttons), `month` and `year`
-(the heading buttons), `column-header` (each weekday letter), `day` (one whole
-day cell) and `day-button` (the button inside it), `month-item` and
-`year-item` (one button of the month / year panel).
+(the heading buttons), `columnHeader` (each weekday letter), `day` (one whole
+day cell) and `dayButton` (the button inside it), `monthItem` and
+`yearItem` (one button of the month / year panel).
 
 States: `open` follows the surface; `arrow` is `disabled` at a `min` / `max`
 bound; `month` and `year` are `active` while their panel is open. The cells
-resolve per node — on `day` and `day-button`: `selected`, `disabled`, `today`,
-`outside` (a day of the previous or next month), `range-start` / `range-end` /
-`in-range` (a committed range) and `highlighted` (the keyboard cursor). The
+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`.
 
-`day` is the whole cell and `day-button` the rounded mark inside it: a
+`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
 `pt:day-button`. The time rail is not a part. The calendar parts are
 `BbCalendar`'s — this component forwards them to the calendar it hosts, and
@@ -401,7 +401,7 @@ and digit typeahead; the time rail exposes labelled columns. Always pass a
 
 | 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`, `column-header`, `day`, `day-button`, `header`, `month`, `month-item`, `panel`, `root`, `sheet`, `year`, `year-item`. States: `active`, `disabled`, `highlighted`, `in-range`, `open`, `outside`, `range-end`, `range-start`, `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`. |
+| `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`, `columnHeader`, `day`, `dayButton`, `header`, `month`, `monthItem`, `panel`, `root`, `sheet`, `year`, `yearItem`. States: `active`, `disabled`, `highlighted`, `inRange`, `open`, `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`. |
 | `activator` | `ElementOrComponentRef \| undefined` |  |  | External activator element or component ref. When provided, the `activator` slot is not rendered and click + ARIA are attached programmatically to the referenced element — mirroring the `BbColorPalette` activator API. |
 | `activeSegment` | `BbCalendarSegment \| undefined` |  |  | 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. |
 | `adaptive` | `boolean \| undefined` | ``config.adaptive` (`true`)` |  | On mobile, open in a bottom off-canvas sheet instead of a floating popover. When unset, falls back to the global `config.adaptive`. |
@@ -443,11 +443,11 @@ and digit typeahead; the time rail exposes labelled columns. Always pass a
 | `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. |
-| `column-header` | Each weekday letter above the grid — a broadcast. |
-| `day` | One whole day cell — a broadcast resolved per day. A background here paints the full cell square; restyle the round mark on `day-button`. |
-| `day-button` | The button inside a day cell — the mark that shows selection. A broadcast resolved per day. |
-| `month-item` | One month button of the month panel (the home grid of `type="month"`) — a broadcast resolved per month. |
-| `year-item` | One year button of the year list — a broadcast resolved per year. |
+| `columnHeader` | Each weekday letter above the grid — a broadcast. |
+| `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. |
+| `yearItem` | One year button of the year list — a broadcast resolved per year. |
 | `panel` | The calendar surface you see — the popover's painted bubble on desktop, the sheet itself on a phone. It carries the sizing tokens: `pt:panel="[--cell:36px]"` widens the calendar, `[--pad-x:2px]` tightens. |
 | `sheet` | The bottom sheet on a phone only (the `BbOffCanvas` root). Applied after `panel`, so it wins a conflict there. |
 
@@ -455,12 +455,12 @@ States are listed in precedence order: when two are on at once and their entries
 
 | State | When it is on |
 | --- | --- |
-| `outside` | Per node, on `day` / `day-button`: a day of the previous or next month, shown to fill the grid. |
-| `today` | Per node, on `day` / `day-button`: today. |
-| `in-range` | Per node, on the cells (`day`, `day-button`, `month-item`, `year-item`): inside a committed range, between its ends. |
+| `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. |
-| `range-start` | Per node, on the cells: a committed range's first day, month or year. |
-| `range-end` | Per node, on the cells: a committed range's last day, month or year. |
+| `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 picker 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. |
 | `active` | Per node, on `month` / `year`: its panel is open. |
 | `open` | Component-wide: the calendar is showing. |
@@ -523,7 +523,7 @@ Set these on the element, or on a class you put on it, to retune this component
 - Listed nodes are the ones `BbDatePicker`'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 the `tree` field of this component in `components.json`.
 
 - `BbDatePicker` _(this component)_ — its own template binds: `panel` → `div`, `panel` → `CommonPopover`; hands `BbCalendar` the pt map ` passthrough.forward(DATE_PICKER_CALENDAR_PARTS, BB_CALENDAR_PT.states) ` (ours → theirs); hands `BbOffCanvas` the pt map `{ panel: 'root', sheet: 'root' }` (ours → theirs)
-  - `BbCalendar` _(public — [contract](./BbCalendar.md))_ — its own pt parts (`BbCalendar`): `header` → `div.bb-calendar__controls`, `arrow` → `BbBaseButton`, `month` → `BbBaseButton`, `year` → `BbBaseButton`, `day` → `div.bb-calendar__date`, `day-button` → `button.bb-calendar__date-button`; documented CSS variables: `--cell`, `--day-slot-allowance`, `--unit-row`; also mounts `ScaleFade`, `Slide`, `CalendarMonthPanel`, `CalendarYearPanel`
+  - `BbCalendar` _(public — [contract](./BbCalendar.md))_ — its own pt parts (`BbCalendar`): `header` → `div.bb-calendar__controls`, `arrow` → `BbBaseButton`, `month` → `BbBaseButton`, `year` → `BbBaseButton`, `day` → `div.bb-calendar__date`, `dayButton` → `button.bb-calendar__date-button`; documented CSS variables: `--cell`, `--day-slot-allowance`, `--unit-row`; also mounts `ScaleFade`, `Slide`, `CalendarMonthPanel`, `CalendarYearPanel`
     - `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`)_ — documented CSS variables: `--time-mark`; also mounts `BbBaseButton`
   - `BbOffCanvas` _(public — [contract](./BbOffCanvas.md))_ — its own pt parts (`BbOffCanvas`): `header` → `div.bb-offcanvas__header`, `title` → `span.bb-offcanvas__title`, `description` → `p.bb-offcanvas__description`, `close` → `CloseButton`, `content` → `div.bb-offcanvas__body`, `footer` → `div.bb-offcanvas__footer`; documented CSS variables: `--stack-x`, `--stack-fill`, `--stack-transition-duration`, `--px`, `--handle-w`, `--handle-h`, `--handle-bg`, `--close-size`

package/dist/ai/BbDatePickerInput.md

@@ -20,11 +20,11 @@
 | `pt:arrow` | `pt:arrow` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
 | `pt:month` | `pt:month` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
 | `pt:year` | `pt:year` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
-| `pt:column-header` | `pt:column-header` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
+| `pt:columnHeader` | `pt:columnHeader` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
 | `pt:day` | `pt:day` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
-| `pt:day-button` | `pt:day-button` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
-| `pt:month-item` | `pt:month-item` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
-| `pt:year-item` | `pt:year-item` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
+| `pt:dayButton` | `pt:dayButton` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
+| `pt:monthItem` | `pt:monthItem` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
+| `pt:yearItem` | `pt:yearItem` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
 | `pt:root` | `div.bb-field` | `CommonField` _(internal)_ |
 | `pt:label` | `component` | `CommonField` _(internal)_ |
 | `pt:description` | `span.bb-field__description` | `CommonField` _(internal)_ |
@@ -722,8 +722,8 @@ the `BbTextInput` guide.
 
 `pt` reaches a named part of the control with a class list — or, in the
 object form, a style and attributes — optionally only while a state is on.
-Parts: `root` (the container), `label`, `description`, `message` (the errors / warnings region — one node each, only one ever shows), `hint` (the helper line — shown on focus, or always with `persistent-hint`), `box` (the bordered field box), `input` (the native control), `icon` (`prepend:icon` + `append:icon` — a broadcast; the state glyphs are chrome), `spinner` (the spinner shown while `loading`), `prefix`, `suffix`, `clear` (the ✕ that empties the field). Plus `panel` (the calendar surface you see — the popover's painted bubble on desktop, the sheet itself on a phone; it carries the sizing tokens, so `pt:panel="[--pad-x:2px]"` tightens it), `sheet` (the bottom sheet on a phone only) and the calendar's own parts, forwarded to it: `header`, `arrow`, `month`, `year`, `column-header`, `day` (the whole cell), `day-button` (the mark inside it), `month-item` and `year-item` — the `BbDatePicker` guide describes each node. `input` is every segment field; the calendar trigger is chrome.
-States: `errors`, `warnings` (never beside errors), `loading`, `disabled`, `readonly`, `has-value` (written `pt:box:has-value`). Plus `open` (the calendar is showing), and the calendar's per-node states: `selected`, `disabled`, `today`, `outside`, `range-start` / `range-end` / `in-range` and `highlighted` on the cells, `active` on `month` / `year`. A name outside that list is a type error and an
+Parts: `root` (the container), `label`, `description`, `message` (the errors / warnings region — one node each, only one ever shows), `hint` (the helper line — shown on focus, or always with `persistent-hint`), `box` (the bordered field box), `input` (the native control), `icon` (`prepend:icon` + `append:icon` — a broadcast; the state glyphs are chrome), `spinner` (the spinner shown while `loading`), `prefix`, `suffix`, `clear` (the ✕ that empties the field). Plus `panel` (the calendar surface you see — the popover's painted bubble on desktop, the sheet itself on a phone; it carries the sizing tokens, so `pt:panel="[--pad-x:2px]"` tightens it), `sheet` (the bottom sheet on a phone only) and the calendar's own parts, forwarded to it: `header`, `arrow`, `month`, `year`, `columnHeader`, `day` (the whole cell), `dayButton` (the mark inside it), `monthItem` and `yearItem` — the `BbDatePicker` guide describes each node. `input` is every segment field; the calendar trigger is chrome.
+States: `errors`, `warnings` (never beside errors), `loading`, `disabled`, `readonly`, `hasValue` (written `pt:box:has-value`). Plus `open` (the calendar is showing), and the calendar's per-node states: `selected`, `disabled`, `today`, `outside`, `rangeStart` / `rangeEnd` / `inRange` and `highlighted` on the cells, `active` on `month` / `year`. A name outside that list is a type error and an
 ESLint error.
 
 The invoice due-date field above, restyled through those parts: a muted
@@ -857,7 +857,7 @@ label>')` matches nothing; query each segment by its own label instead. See
 
 | 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`, `arrow`, `box`, `clear`, `column-header`, `day`, `day-button`, `description`, `header`, `hint`, `icon`, `input`, `label`, `message`, `month`, `month-item`, `panel`, `prefix`, `root`, `sheet`, `spinner`, `suffix`, `year`, `year-item`. States: `active`, `disabled`, `errors`, `has-value`, `highlighted`, `in-range`, `loading`, `open`, `outside`, `range-end`, `range-start`, `readonly`, `selected`, `today`, `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`. |
+| `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`, `arrow`, `box`, `clear`, `columnHeader`, `day`, `dayButton`, `description`, `header`, `hint`, `icon`, `input`, `label`, `message`, `month`, `monthItem`, `panel`, `prefix`, `root`, `sheet`, `spinner`, `suffix`, `year`, `yearItem`. States: `active`, `disabled`, `errors`, `hasValue`, `highlighted`, `inRange`, `loading`, `open`, `outside`, `rangeEnd`, `rangeStart`, `readonly`, `selected`, `today`, `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`. |
 | `adaptive` | `boolean \| undefined` | ``config.adaptive` (`true`)` |  | On mobile the calendar opens inside a bottom off-canvas sheet instead of a floating popover, mirroring the adaptive behaviour of `BbPopover`/`BbSelect`. When unset, falls back to the global `config.adaptive`. |
 | `ampm` | `boolean \| undefined` | `false` |  | 12-hour display with an AM/PM segment (requires `type="datetime"`). Purely a field-composition concern: `modelValue` and the `time` model stay 24-hour regardless. 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. |
@@ -929,23 +929,23 @@ label>')` matches nothing; query each segment by its own label instead. See
 | `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. |
-| `column-header` | Each weekday letter above the grid — a broadcast. |
-| `day` | One whole day cell — a broadcast resolved per day. A background here paints the full cell square; restyle the round mark on `day-button`. |
-| `day-button` | The button inside a day cell — the mark that shows selection. A broadcast resolved per day. |
-| `month-item` | One month button of the month panel (the home grid of `type="month"`) — a broadcast resolved per month. |
-| `year-item` | One year button of the year list — a broadcast resolved per year. |
+| `columnHeader` | Each weekday letter above the grid — a broadcast. |
+| `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. |
+| `yearItem` | One year button of the year list — a broadcast resolved per year. |
 
 States are listed in precedence order: when two are on at once and their entries conflict, the later one wins.
 
 | State | When it is on |
 | --- | --- |
-| `has-value` | Component-wide: the control holds a value, by its own rule (`0` counts on `BbNumberInput`, `''` on `BbColorInput`). |
-| `outside` | Per node, on `day` / `day-button`: a day of the previous or next month, shown to fill the grid. |
-| `today` | Per node, on `day` / `day-button`: today. |
-| `in-range` | Per node, on the cells (`day`, `day-button`, `month-item`, `year-item`): inside a committed range, between its ends. |
+| `hasValue` | Component-wide: the control holds a value, by its own rule (`0` counts on `BbNumberInput`, `''` on `BbColorInput`). |
+| `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. |
-| `range-start` | Per node, on the cells: a committed range's first day, month or year. |
-| `range-end` | Per node, on the cells: a committed range's last day, month or year. |
+| `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. |
 | `readonly` | Component-wide: the control is `readonly` — shown, focusable, not editable. |
 | `disabled` | Component-wide while the input is `disabled`. Also per node, on the calendar's cells: one outside `min` / `max` or refused by `selectable`; on `arrow`, at a bound or while the month / year panel is open. |
 | `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. |
@@ -1010,9 +1010,9 @@ 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 `BbDatePickerInput`'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 `BbDatePickerInput`'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 the `tree` field of this component in `components.json`.
 
-- `BbDatePickerInput` _(this component)_ — its own template binds: `controlAttrs` → `input.bb-segmented-field__field`, `input` → `input.bb-segmented-field__field`, `activator` → `button.bb-segmented-field__trigger-btn`, `suffix` → `span.bb-field-input__suffix`; hands `BbDatePicker` the pt map `{ panel: 'panel', sheet: 'sheet', header: 'header', arrow: 'arrow', month: 'month', year: 'year', 'column-header': 'column-header', day: 'day', 'day-button': 'day-button', 'month-item': 'month-item', 'year-item': 'year-item', }` (ours → theirs)
+- `BbDatePickerInput` _(this component)_ — its own template binds: `controlAttrs` → `input.bb-segmented-field__field`, `input` → `input.bb-segmented-field__field`, `activator` → `button.bb-segmented-field__trigger-btn`, `suffix` → `span.bb-field-input__suffix`; hands `BbDatePicker` the pt map `{ panel: 'panel', sheet: 'sheet', header: 'header', arrow: 'arrow', month: 'month', year: 'year', columnHeader: 'columnHeader', day: 'day', dayButton: 'dayButton', monthItem: 'monthItem', yearItem: 'yearItem', }` (ours → theirs)
   - `BbDatePicker` _(public — [contract](./BbDatePicker.md))_ — its own pt parts (`BbDatePicker`): `panel` → `div`, `panel` → `CommonPopover`; hands `BbCalendar` the pt map ` passthrough.forward(DATE_PICKER_CALENDAR_PARTS, BB_CALENDAR_PT.states) ` (ours → theirs); hands `BbOffCanvas` the pt map `{ panel: 'root', sheet: 'root' }` (ours → theirs); documented CSS variables: `--cell`, `--day-slot-allowance`, `--unit-row`; also mounts `CommonPopover`
-    - `BbCalendar` _(public — [contract](./BbCalendar.md))_ — its own pt parts (`BbCalendar`): `header` → `div.bb-calendar__controls`, `arrow` → `BbBaseButton`, `month` → `BbBaseButton`, `year` → `BbBaseButton`, `day` → `div.bb-calendar__date`, `day-button` → `button.bb-calendar__date-button`; documented CSS variables: `--cell`, `--day-slot-allowance`, `--unit-row`; also mounts `ScaleFade`, `Slide`, `CalendarMonthPanel`, `CalendarYearPanel`
+    - `BbCalendar` _(public — [contract](./BbCalendar.md))_ — its own pt parts (`BbCalendar`): `header` → `div.bb-calendar__controls`, `arrow` → `BbBaseButton`, `month` → `BbBaseButton`, `year` → `BbBaseButton`, `day` → `div.bb-calendar__date`, `dayButton` → `button.bb-calendar__date-button`; documented CSS variables: `--cell`, `--day-slot-allowance`, `--unit-row`; also mounts `ScaleFade`, `Slide`, `CalendarMonthPanel`, `CalendarYearPanel`
       - `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`)_ — documented CSS variables: `--time-mark`; also mounts `BbBaseButton`
     - `BbOffCanvas` _(public — [contract](./BbOffCanvas.md))_ — its own pt parts (`BbOffCanvas`): `header` → `div.bb-offcanvas__header`, `title` → `span.bb-offcanvas__title`, `description` → `p.bb-offcanvas__description`, `close` → `CloseButton`, `content` → `div.bb-offcanvas__body`, `footer` → `div.bb-offcanvas__footer`; documented CSS variables: `--stack-x`, `--stack-fill`, `--stack-transition-duration`, `--px`, `--handle-w`, `--handle-h`, `--handle-bg`, `--close-size`