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

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

@@ -505,8 +505,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 `indicator` (the colour dot that opens the palette), `panel` (the palette box — the popover's painted bubble on desktop, the box inside the sheet 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
+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`, `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. |
@@ -718,7 +718,7 @@ of it. The full grammar, the merge rules and the global map are in the
 | `suffix` | The `#suffix` slot's wrapper, inside the box after the input. |
 | `clear` | The ✕ that empties this control (`clearable`) — one node, never a chip's own ✕. |
 | `indicator` | The colour dot in the box that opens the palette. |
-| `panel` | The palette box — the popover's painted bubble on desktop, the box inside the sheet on a phone. |
+| `panel` | The palette surface — the popover's painted bubble on desktop, the sheet itself on a phone. |
 | `sheet` | The bottom sheet the palette opens in on a phone — no node on desktop. |
 | `swatch` | One palette swatch (after the `swatches` prop) — a broadcast resolved per swatch. |
 
@@ -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`. |
@@ -796,7 +796,7 @@ Set these on the element, or on a class you put on it, to retune this component
 - `BbColorInput` _(this component)_ — its own template binds: `controlAttrs` → `input.bb-color-input__input`, `input` → `input.bb-color-input__input`, `indicator` → `button.bb-color-input__indicator`, `suffix` → `span.bb-field-input__suffix`; hands `BbColorPalette` the pt map `{ panel: 'panel', sheet: 'sheet', swatch: 'swatch' }` (ours → theirs)
   - `CommonField` _(internal — not importable, reach it through `BbColorInput`)_ — `BbColorInput`'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`
   - `CommonFieldInput` _(internal — not importable, reach it through `BbColorInput`)_ — `BbColorInput`'s pt parts land here: `box` → `span.bb-field-input__box`, `prefix` → `span.bb-field-input__prefix`, `icon` → `BbIcon`, `clear` → `ClearableButton`, `spinner` → `BbSpinner`, `suffix` → `span.bb-field-input__suffix`; documented CSS variables: `--bg`, `--bg-hover`, `--bg-focus`, `--bg-disabled`, `--border-color`, `--border-focus`, `--ring-size`, `--ring-color`, `--elev`, `--frost`, `--inside-label-clearance`; also mounts `ErrorIcon`, `WarningIcon`, `ClearableButton`, `BbIcon`, `BbSpinner`
-  - `BbColorPalette` _(public — [contract](./BbColorPalette.md))_ — its own pt parts (`BbColorPalette`): `swatch` → `button.bb-color-palette__swatch`, `panel` → `div`, `panel` → `CommonPopover`; hands `BbOffCanvas` the pt map `{ sheet: 'root' }` (ours → theirs); also mounts `CommonPopover`
+  - `BbColorPalette` _(public — [contract](./BbColorPalette.md))_ — its own pt parts (`BbColorPalette`): `swatch` → `button.bb-color-palette__swatch`, `panel` → `div`, `panel` → `CommonPopover`; hands `BbOffCanvas` the pt map `{ panel: 'root', sheet: 'root' }` (ours → theirs); also mounts `CommonPopover`
     - `BbOffCanvas` _(public — [contract](./BbOffCanvas.md))_ — its own pt parts (`BbOffCanvas`): `header` → `div.bb-offcanvas__header`, `title` → `span.bb-offcanvas__title`, `description` → `p.bb-offcanvas__description`, `close` → `CloseButton`, `content` → `div.bb-offcanvas__body`, `footer` → `div.bb-offcanvas__footer`; documented CSS variables: `--stack-x`, `--stack-fill`, `--stack-transition-duration`, `--px`, `--handle-w`, `--handle-h`, `--handle-bg`, `--close-size`
       - `CloseButton` _(internal — not importable, reach it through `BbOffCanvas`)_ — documented CSS variables: `--size`, `--p`
 

package/dist/ai/BbColorPalette.md

@@ -15,6 +15,7 @@
 | pt part | Lands on | In |
 | --- | --- | --- |
 | `pt:panel` | the root of `CommonPopover` | `CommonPopover` _(internal)_ |
+| `pt:panel` | `pt:root` of `BbOffCanvas` | `BbOffCanvas` ([contract](./BbOffCanvas.md)) |
 | `pt:sheet` | `pt:root` of `BbOffCanvas` | `BbOffCanvas` ([contract](./BbOffCanvas.md)) |
 
 ## Usage & Guidelines
@@ -557,11 +558,11 @@ styling (a caret, a highlight). Two props gate interaction:
 
 `pt` reaches a named part with a class list — or, in the object form, a
 style and attributes — optionally only while a state is on. Parts: `root`
-(the floating element — the bottom sheet on a phone), `panel` (the palette box you
-see: the popover's painted bubble on desktop, the box inside the sheet on a
-phone — canvas, sliders, swatches; `pt:panel="px-1"`
-tightens its padding), `sheet` (the bottom sheet on a phone only, applied
-after `root`) and `swatch` (one swatch, named after the `swatches` prop — a
+(the floating element — an invisible positioning wrapper, no node on a
+phone), `panel` (the palette surface you see: the popover's painted bubble on
+desktop, the sheet itself on a phone — canvas, sliders, swatches; `pt:panel="px-1"`
+tightens the bubble's padding), `sheet` (the bottom sheet on a phone only, applied
+after `panel`) and `swatch` (one swatch, named after the `swatches` prop — a
 broadcast). States: `open`, and
 `selected` per swatch (the one matching the value). The canvas and the sliders
 are not parts.
@@ -762,9 +763,9 @@ The full grammar, the merge rules and the global map are in the
 
 | Part | What it is |
 | --- | --- |
-| `root` | The floating element — on a phone, the bottom sheet (as on `BbPopover`). |
-| `panel` | The picker box you see — the popover's painted bubble on desktop, the box inside the sheet on a phone — holding the canvas, the sliders and the swatches. The canvas and the sliders are not parts. |
-| `sheet` | The bottom sheet on a phone only (the `BbOffCanvas` root). Applied after `root`, so it wins a conflict there. |
+| `root` | The floating element — an invisible positioning wrapper; a `class` on the component lands here. No node on the phone sheet: style what you see with `panel`. |
+| `panel` | The picker surface you see — the popover's painted bubble on desktop, the sheet itself on a phone — holding the canvas, the sliders and the swatches. The canvas and the sliders are not parts. |
+| `sheet` | The bottom sheet on a phone only (the `BbOffCanvas` root). Applied after `panel`, so it wins a conflict there. |
 | `swatch` | One swatch (after the `swatches` prop) — a broadcast resolved per swatch. |
 
 States are listed in precedence order: when two are on at once and their entries conflict, the later one wins.
@@ -795,7 +796,7 @@ States are listed in precedence order: when two are on at once and their entries
 - **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 `BbColorPalette`'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 `BbColorPalette`'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`.
 
-- `BbColorPalette` _(this component)_ — its own template binds: `swatch` → `button.bb-color-palette__swatch`, `panel` → `div`, `panel` → `CommonPopover`; hands `BbOffCanvas` the pt map `{ sheet: 'root' }` (ours → theirs)
+- `BbColorPalette` _(this component)_ — its own template binds: `swatch` → `button.bb-color-palette__swatch`, `panel` → `div`, `panel` → `CommonPopover`; hands `BbOffCanvas` the pt map `{ panel: 'root', sheet: 'root' }` (ours → theirs)
   - `BbOffCanvas` _(public — [contract](./BbOffCanvas.md))_ — its own pt parts (`BbOffCanvas`): `header` → `div.bb-offcanvas__header`, `title` → `span.bb-offcanvas__title`, `description` → `p.bb-offcanvas__description`, `close` → `CloseButton`, `content` → `div.bb-offcanvas__body`, `footer` → `div.bb-offcanvas__footer`; documented CSS variables: `--stack-x`, `--stack-fill`, `--stack-transition-duration`, `--px`, `--handle-w`, `--handle-h`, `--handle-bg`, `--close-size`
     - `CloseButton` _(internal — not importable, reach it through `BbOffCanvas`)_ — documented CSS variables: `--size`, `--p`
   - Also mounts `CommonPopover`

package/dist/ai/BbDatePicker.md

@@ -15,6 +15,7 @@
 | pt part | Lands on | In |
 | --- | --- | --- |
 | `pt:panel` | the root of `CommonPopover` | `CommonPopover` _(internal)_ |
+| `pt:panel` | `pt:root` of `BbOffCanvas` | `BbOffCanvas` ([contract](./BbOffCanvas.md)) |
 | `pt:sheet` | `pt:root` of `BbOffCanvas` | `BbOffCanvas` ([contract](./BbOffCanvas.md)) |
 
 ## Usage & Guidelines
@@ -202,6 +203,31 @@ const time = ref<string | null>(null);
 </template>
 ```
 
+### Decorating days
+
+The picker passes its day slots straight to the calendar inside it, so the four
+day-grid slots work here unchanged:
+
+- `#day` replaces every day's number and `#append:day` adds under every day
+  (event dots, prices). Both receive `label`, `selected`, `outside`,
+  `first` / `middle` / `last` and `item` (the day as a dayjs object).
+- `#<YYYY_MM_DD>` and `#append:<YYYY_MM_DD>` do the same for one date, e.g.
+  `#append:2026_12_25`: its local `YYYY-MM-DD` with `_` for `-`. A date's slot
+  wins over the every-day one.
+
+```vue
+<BbDatePicker v-model="pickup">
+	<template #activator="{ props, value }">
+		<BbButton v-bind="props" variant="outline">{{ value ?? 'Pickup day' }}</BbButton>
+	</template>
+	<template #append:2026_12_25><span class="text-[10px]">Closed</span></template>
+</BbDatePicker>
+```
+
+Use per-date slots for a few fixed dates; mark data-driven days through
+`#append:day` and a lookup on `item`. The [BbCalendar](./BbCalendar.md) guide
+has a worked example.
+
 ### Adaptive and positioning
 
 On mobile the calendar opens in a bottom off-canvas sheet instead of a floating
@@ -267,24 +293,24 @@ into, `BbDatePickerInput` when there is.
 
 `pt` reaches a named part with a class list — or, in the object form, a
 style and attributes — optionally only while a state is on. Parts: `root`
-(the floating element — the bottom sheet on a phone), `panel` (the calendar box you
-see: the popover's painted bubble on desktop, the box inside the sheet on a
-phone — it also carries the sizing tokens, so
+(the floating element — an invisible positioning wrapper, no node on a
+phone), `panel` (the calendar surface you see: the popover's painted bubble on
+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 `root`), `header` (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
@@ -375,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`. |
@@ -412,29 +438,29 @@ and digit typeahead; the time rail exposes labelled columns. Always pass a
 
 | Part | What it is |
 | --- | --- |
-| `root` | The floating element — on a phone, the bottom sheet (as on `BbPopover`). |
+| `root` | The floating element — an invisible positioning wrapper; a `class` on the component lands here. No node on the phone sheet: style what you see with `panel`. |
 | `header` | The navigation bar: the previous / next arrows and the month / year headings. |
 | `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. |
-| `panel` | The calendar box you see — the popover's painted bubble on desktop, the box inside the sheet on a phone. It carries the calendar's sizing tokens: `pt:panel="[--cell:36px]"` widens the calendar, `pt:panel="[--pad-x:2px]"` tightens it. |
-| `sheet` | The bottom sheet on a phone only (the `BbOffCanvas` root). Applied after `root`, so it wins a conflict there. |
+| `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. |
 
 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 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. |
@@ -457,6 +483,8 @@ States are listed in precedence order: when two are on at once and their entries
 - `activator` — scope: `BbDatePickerActivatorSlotProps` — Custom activator element. Apply `v-bind="props"` to your trigger.
 - `append:day` — scope: `BbCalendarDaySlotProps` — Appends content below each calendar day.
 - `day` — scope: `BbCalendarDaySlotProps` — Replaces the day button label inside each calendar day.
+- `#<YYYY_MM_DD>` (named from data) — scope: `BbCalendarDaySlotProps` — One date's button label (e.g. `#2024_03_15`: the local `YYYY-MM-DD` through `slotKey`); beats `day`. Day grid only.
+- `#append:<YYYY_MM_DD>` (named from data) — scope: `BbCalendarDaySlotProps` — Content under one date's cell; beats `append:day`.
 
 ## CSS custom properties
 
@@ -470,9 +498,20 @@ Set these on the element, or on a class you put on it, to retune this component
 | `--nav-button-h` | `.bb-date-picker__panel` | `24px` |  |
 | `--day-slot-allowance` | `.bb-date-picker__panel` | `0px` | Allowance for the day slot append area - needed for the slot to be visible |
 | `--unit-row` | `.bb-date-picker__panel` | `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. |
-| `--sheet-cell` | `.bb-date-picker__panel--sheet` | `40px` | Declared on the container so the time rail (the grid's sibling inside the calendar) can align its wheels to the same column grid. |
-| `--cell` | `.bb-date-picker__panel--sheet` | `var(--sheet-cell)` | One touch scale for the whole sheet: 40px day cells (36px marks), and a nav row to match — on the panel, where the tokens live. |
-| `--nav-button-h` | `.bb-date-picker__panel--sheet` | `40px` |  |
+| `--sheet-cell` | `.bb-date-picker-offcanvas` | `40px` |  |
+| `--cell` | `.bb-date-picker-offcanvas` | `var(--sheet-cell)` |  |
+| `--pad-x` | `.bb-date-picker-offcanvas` | `6px` |  |
+| `--pad-y` | `.bb-date-picker-offcanvas` | `8px` |  |
+| `--nav-button-h` | `.bb-date-picker-offcanvas` | `40px` |  |
+| `--day-slot-allowance` | `.bb-date-picker-offcanvas` | `0px` |  |
+| `--unit-row` | `.bb-date-picker-offcanvas` | `calc(var(--cell) * 1.25)` |  |
+| `--sheet-cell` | `.bb-date-picker__panel--sheet` | `inherit` |  |
+| `--cell` | `.bb-date-picker__panel--sheet` | `inherit` |  |
+| `--pad-x` | `.bb-date-picker__panel--sheet` | `inherit` |  |
+| `--pad-y` | `.bb-date-picker__panel--sheet` | `inherit` |  |
+| `--nav-button-h` | `.bb-date-picker__panel--sheet` | `inherit` |  |
+| `--day-slot-allowance` | `.bb-date-picker__panel--sheet` | `inherit` |  |
+| `--unit-row` | `.bb-date-picker__panel--sheet` | `inherit` |  |
 
 ## Component tree
 
@@ -483,8 +522,8 @@ 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 `BbDatePicker`'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 `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 `{ 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`
+- `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`, `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)_ |
@@ -589,6 +589,12 @@ below it (badges, event dots, price tags). Both receive the day's state — `lab
 decorations lightweight; they render for every visible cell. The appointment
 example above uses `append:day` for event dots.
 
+One date can have its own slot: `#<YYYY_MM_DD>` replaces that date's number and
+`#append:<YYYY_MM_DD>` adds under it, e.g. `#append:2026_12_25` — the local
+`YYYY-MM-DD` with `_` for `-`. A date's slot wins over `day` / `append:day` for
+that date. Use them for a few fixed dates (holidays); mark data-driven days with
+`append:day` and a lookup on `item`.
+
 ### Calendar keyboard navigation
 
 The calendar grid is a `role="grid"` with a roving tabindex (the current day is
@@ -716,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 box you see — the popover's painted bubble on desktop, the box inside the sheet 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
@@ -851,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. |
@@ -917,29 +923,29 @@ label>')` matches nothing; query each segment by its own label instead. See
 | `suffix` | The `#suffix` slot's wrapper, inside the box after the input. |
 | `clear` | The ✕ that empties this control (`clearable`) — one node, never a chip's own ✕. |
 | `activator` | The button in the box that opens the calendar. Merged after the picker's own activator props and handlers, so a listener of yours runs after ours. Its glyph is not a part. |
-| `panel` | The calendar box — the popover's painted bubble on desktop, the box inside the sheet on a phone. It carries the calendar's sizing tokens (`pt:panel="[--cell:36px]"`). |
+| `panel` | The calendar surface — the popover's painted bubble on desktop, the sheet itself on a phone. It carries the calendar's sizing tokens (`pt:panel="[--cell:36px]"`). |
 | `sheet` | The bottom sheet around the calendar on a phone only. |
 | `header` | The navigation bar: the previous / next arrows and the month / year headings. |
 | `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. |
@@ -974,6 +980,8 @@ States are listed in precedence order: when two are on at once and their entries
 - `prepend` — scope: `object` — Content rendered before the date fields, at the start of the field box.
 - `prepend-outer` — scope: `object` — Content rendered before the entire date picker control, outside the input chrome.
 - `suffix` — scope: `object` — Inline content rendered at the end of the input field area, after the date fields.
+- `#<YYYY_MM_DD>` (named from data) — scope: `BbCalendarDaySlotProps` — One date's button label (e.g. `#2024_03_15`: the local `YYYY-MM-DD` through `slotKey`); beats `day`. Day grid only.
+- `#append:<YYYY_MM_DD>` (named from data) — scope: `BbCalendarDaySlotProps` — Content under one date's cell; beats `append:day`.
 
 ## Validated variant
 
@@ -1002,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)
-  - `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 `{ sheet: 'root' }` (ours → theirs); documented CSS variables: `--cell`, `--day-slot-allowance`, `--unit-row`, `--sheet-cell`, `--cell`; 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`
+- `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`, `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/BbDialog.md

@@ -715,14 +715,14 @@ Dialogs sharing a `stack` name **replace** one another: only the most recently
 opened member is visible, the ones beneath are hidden until it closes — the
 stack reads as a single surface whose content swaps as you drill in. When a
 member closes, the one beneath crossfades in as it fades out. Each stacked
-member dims what lies beneath it (via `--bb-overlay-stacked`, half of
-`--bb-overlay` by default); only the bottom member blurs, and its backdrop is
+member dims what lies beneath it (via `--bb-overlay-stacked`, the same
+dim as `--bb-overlay` by default); only the bottom member blurs, and its backdrop is
 never handed off while members swap above it, so the page behind never
 re-blurs between them. Set `--bb-overlay-stacked: transparent` for a single
 dim under the whole stack. The backdrop split follows the **open order of
 every dialog**, whatever its `stack` name or none, exactly as for
 off-canvases: the bottom-most open dialog blurs and dims, each one opened
-above it adds the lighter stacked dim. The `stack` name only decides
+above it adds the stacked dim. The `stack` name only decides
 cover/replace. Dialogs with different names (or none) therefore pile up
 visibly, each dimming the one beneath. Use a stack for a two-step flow that
 should not read as two boxes piling up.