bitboss-ui 3.0.0-beta.26 → 3.0.0-beta.27

package/dist/ai/BbColorInput.md

@@ -14,6 +14,7 @@
 
 | pt part | Lands on | In |
 | --- | --- | --- |
+| `pt:panel` | `pt:panel` of `BbColorPalette` | `BbColorPalette` ([contract](./BbColorPalette.md)) |
 | `pt:sheet` | `pt:sheet` of `BbColorPalette` | `BbColorPalette` ([contract](./BbColorPalette.md)) |
 | `pt:swatch` | `pt:swatch` of `BbColorPalette` | `BbColorPalette` ([contract](./BbColorPalette.md)) |
 | `pt:root` | `div.bb-field` | `CommonField` _(internal)_ |
@@ -504,7 +505,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), `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).
+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
 ESLint error.
 
@@ -663,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`, `prefix`, `root`, `sheet`, `spinner`, `suffix`, `swatch`. States: `disabled`, `errors`, `has-value`, `loading`, `readonly`, `warnings`, `selected`. `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`, `has-value`, `loading`, `readonly`, `warnings`, `selected`. `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. |
@@ -757,10 +758,10 @@ 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 `BbColorInput`'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 `BbColorInput`'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`.
 
-- `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 `{ sheet: 'sheet', swatch: 'swatch' }` (ours → theirs)
+- `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`): `root` → `div.bb-color-palette__picker`, `swatch` → `button.bb-color-palette__swatch`; 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`, `root` → `BbOffCanvas`, `panel` → `div`, `panel` → `CommonPopover`, `root` → `CommonPopover`; hands `BbOffCanvas` the pt map `{ 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`, `--close-size`
       - `CloseButton` _(internal — not importable, reach it through `BbOffCanvas`)_ — documented CSS variables: `--size`, `--p`
 

package/dist/ai/BbColorPalette.md

@@ -14,8 +14,21 @@
 
 | pt part | Lands on | In |
 | --- | --- | --- |
+| `pt:root` | the root of `BbOffCanvas` | `BbOffCanvas` ([contract](./BbOffCanvas.md)) |
+| `pt:panel` | the root of `CommonPopover` | `CommonPopover` _(internal)_ |
+| `pt:root` | the root of `CommonPopover` | `CommonPopover` _(internal)_ |
 | `pt:sheet` | `pt:root` of `BbOffCanvas` | `BbOffCanvas` ([contract](./BbOffCanvas.md)) |
 
+**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 `BbColorPalette`'s root:
+
+| Variable | Set through | Declared by | What it is |
+| --- | --- | --- | --- |
+| `--stack-x` | `pt:root` | `BbOffCanvas` | Inward shift applied to a parent panel while a child is stacked on top. |
+| `--stack-fill` | `pt:root` | `BbOffCanvas` | Length of the pad (see `::after`) that fills from the panel's anchored edge out to the screen edge, so no empty band shows when a descendant is dragged away or shrinks. |
+| `--stack-transition-duration` | `pt:root` | `BbOffCanvas` | Duration for the stack shift + pad. Zeroed while a peer resizes so parents track the live size instead of lagging behind a 250ms animation. |
+| `--px` | `pt:root` | `BbOffCanvas` | Axis split of --bb-panel-p: --px (inline) / --py (block), each branching off it. Set the pair only when the axes differ; setting --bb-panel-p alone keeps them equal. Local on this root class (not :roo… |
+| `--close-size` | `pt:root` | `BbOffCanvas` | Shared by the close control and by the space the title reserves for it, * so the two can never drift apart. |
+
 ## Usage & Guidelines
 
 ### When to use
@@ -556,9 +569,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 palette — canvas, sliders, swatches; the same node in the popover and in
-the sheet), `sheet` (the bottom sheet around it on a phone — no node on
-desktop) and `swatch` (one swatch, named after the `swatches` prop — a
+(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
 broadcast). States: `open`, and
 `selected` per swatch (the one matching the value). The canvas and the sliders
 are not parts.
@@ -733,7 +748,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`, `sheet`, `swatch`. States: `open`, `selected`. `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: `panel`, `root`, `sheet`, `swatch`. States: `open`, `selected`. `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 listeners are attached programmatically to the referenced element — mirroring the BbDropdown activator API. |
 | `adaptive` | `boolean \| undefined` | ``config.adaptive` (`true`)` |  | When `true`, the 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 `BbPopover`/`BbDropdown`/`BbDatePicker`. When unset, falls back … |
 | `alpha` | `boolean \| undefined` | `false` |  | Enable the alpha channel. The picker shows an opacity slider and emits `#RRGGBBAA` hex8 values. |
@@ -774,7 +789,7 @@ The full grammar, the merge rules and the global map are in the
 - **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: `root` → `div.bb-color-palette__picker`, `swatch` → `button.bb-color-palette__swatch`; hands `BbOffCanvas` the pt map `{ sheet: 'root' }` (ours → theirs)
+- `BbColorPalette` _(this component)_ — its own template binds: `swatch` → `button.bb-color-palette__swatch`, `root` → `BbOffCanvas`, `panel` → `div`, `panel` → `CommonPopover`, `root` → `CommonPopover`; hands `BbOffCanvas` the pt map `{ 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`, `--close-size`
     - `CloseButton` _(internal — not importable, reach it through `BbOffCanvas`)_ — documented CSS variables: `--size`, `--p`
   - Also mounts `CommonPopover`

package/dist/ai/BbDatePicker.md

@@ -17,8 +17,21 @@
 | `pt:arrow` | the root of `BbBaseButton` | `BbBaseButton` ([contract](./BbBaseButton.md)) |
 | `pt:month` | the root of `BbBaseButton` | `BbBaseButton` ([contract](./BbBaseButton.md)) |
 | `pt:year` | the root of `BbBaseButton` | `BbBaseButton` ([contract](./BbBaseButton.md)) |
+| `pt:root` | the root of `BbOffCanvas` | `BbOffCanvas` ([contract](./BbOffCanvas.md)) |
+| `pt:panel` | the root of `CommonPopover` | `CommonPopover` _(internal)_ |
+| `pt:root` | the root of `CommonPopover` | `CommonPopover` _(internal)_ |
 | `pt:sheet` | `pt:root` of `BbOffCanvas` | `BbOffCanvas` ([contract](./BbOffCanvas.md)) |
 
+**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 `BbDatePicker`'s root:
+
+| Variable | Set through | Declared by | What it is |
+| --- | --- | --- | --- |
+| `--stack-x` | `pt:root` | `BbOffCanvas` | Inward shift applied to a parent panel while a child is stacked on top. |
+| `--stack-fill` | `pt:root` | `BbOffCanvas` | Length of the pad (see `::after`) that fills from the panel's anchored edge out to the screen edge, so no empty band shows when a descendant is dragged away or shrinks. |
+| `--stack-transition-duration` | `pt:root` | `BbOffCanvas` | Duration for the stack shift + pad. Zeroed while a peer resizes so parents track the live size instead of lagging behind a 250ms animation. |
+| `--px` | `pt:root` | `BbOffCanvas` | Axis split of --bb-panel-p: --px (inline) / --py (block), each branching off it. Set the pair only when the axes differ; setting --bb-panel-p alone keeps them equal. Local on this root class (not :roo… |
+| `--close-size` | `pt:root` | `BbOffCanvas` | Shared by the close control and by the space the title reserves for it, * so the two can never drift apart. |
+
 ## Usage & Guidelines
 
 ### When to use
@@ -252,8 +265,11 @@ 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 calendar panel, in the popover and in the sheet alike), `sheet` (the
-bottom sheet around it on a phone — no node on desktop), `header` (the
+(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
+`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
 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
@@ -355,7 +371,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`, `root`, `sheet`, `year`, `year-item`. States: `active`, `disabled`, `highlighted`, `in-range`, `open`, `outside`, `range-end`, `range-start`, `selected`, `today`. `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`, `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`. `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` | `BbDatePickerSegment \| 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`. |
@@ -410,14 +426,16 @@ Set these on the element, or on a class you put on it, to retune this component
 
 | Property | Set on | Default | What it is |
 | --- | --- | --- | --- |
-| `--cell` | `.bb-date-picker__grid` | `28px` | Cell size drives all grid math: 224px ÷ 7 = 32px exactly |
-| `--pad-x` | `.bb-date-picker__grid` | `6px` |  |
-| `--pad-y` | `.bb-date-picker__grid` | `8px` |  |
-| `--nav-button-h` | `.bb-date-picker__grid` | `24px` |  |
+| `--cell` | `.bb-date-picker__panel` | `28px` | Cell size drives all grid math: 224px ÷ 7 = 32px exactly |
+| `--pad-x` | `.bb-date-picker__panel` | `6px` |  |
+| `--pad-y` | `.bb-date-picker__panel` | `8px` |  |
+| `--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. |
 | `--weeks` | `.bb-date-picker__grid` | `6` |  |
-| `--day-slot-allowance` | `.bb-date-picker__grid` | `0px` | Allowance for the day slot append area - needed for the slot to be visible |
-| `--unit-row` | `.bb-date-picker__grid` | `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__calendar--sheet` | `40px` | Declared on the container so the time rail (the calendar's sibling) can align its wheels to the same column grid. |
+| `--sheet-cell` | `.bb-date-picker__panel--sheet` | `40px` | Declared on the container so the time rail (the calendar's sibling) 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` |  |
 
 ## Component tree
 
@@ -428,7 +446,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 `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: `root` → `div.bb-date-picker__calendar`, `header` → `div.bb-date-picker__controls`, `arrow` → `BbBaseButton`, `month` → `BbBaseButton`, `year` → `BbBaseButton`, `day` → `div.bb-date-picker__date`, `day-button` → `button.bb-date-picker__date-button`; hands `BbOffCanvas` the pt map `{ sheet: 'root' }` (ours → theirs)
+- `BbDatePicker` _(this component)_ — its own template binds: `header` → `div.bb-date-picker__controls`, `arrow` → `BbBaseButton`, `month` → `BbBaseButton`, `year` → `BbBaseButton`, `day` → `div.bb-date-picker__date`, `day-button` → `button.bb-date-picker__date-button`, `root` → `BbOffCanvas`, `panel` → `div`, `panel` → `CommonPopover`, `root` → `CommonPopover`; hands `BbOffCanvas` the pt map `{ sheet: 'root' }` (ours → theirs)
   - `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 `BbDatePicker`)_ — 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`, `--close-size`

package/dist/ai/BbDatePickerInput.md

@@ -14,7 +14,7 @@
 
 | pt part | Lands on | In |
 | --- | --- | --- |
-| `pt:panel` | `pt:root` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
+| `pt:panel` | `pt:panel` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
 | `pt:sheet` | `pt:sheet` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
 | `pt:header` | `pt:header` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
 | `pt:arrow` | `pt:arrow` of `BbDatePicker` | `BbDatePicker` ([contract](./BbDatePicker.md)) |
@@ -707,7 +707,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 `panel` (the calendar, in the popover and in the sheet alike), `sheet` (the bottom sheet around it 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.
+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
 ESLint error.
 
@@ -942,8 +942,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 `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: `input` → `input.bb-segmented-field__field`, `suffix` → `span.bb-field-input__suffix`; hands `BbDatePicker` the pt map `{ panel: 'root', 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`): `root` → `div.bb-date-picker__calendar`, `header` → `div.bb-date-picker__controls`, `arrow` → `BbBaseButton`, `month` → `BbBaseButton`, `year` → `BbBaseButton`, `day` → `div.bb-date-picker__date`, `day-button` → `button.bb-date-picker__date-button`; hands `BbOffCanvas` the pt map `{ sheet: 'root' }` (ours → theirs); documented CSS variables: `--cell`, `--day-slot-allowance`, `--unit-row`, `--sheet-cell`; also mounts `CommonPopover`, `ScaleFade`, `Slide`, `DatePickerMonthPanel`, `DatePickerYearPanel`
+- `BbDatePickerInput` _(this component)_ — its own template binds: `input` → `input.bb-segmented-field__field`, `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`): `header` → `div.bb-date-picker__controls`, `arrow` → `BbBaseButton`, `month` → `BbBaseButton`, `year` → `BbBaseButton`, `day` → `div.bb-date-picker__date`, `day-button` → `button.bb-date-picker__date-button`, `root` → `BbOffCanvas`, `panel` → `div`, `panel` → `CommonPopover`, `root` → `CommonPopover`; hands `BbOffCanvas` the pt map `{ sheet: 'root' }` (ours → theirs); documented CSS variables: `--cell`, `--day-slot-allowance`, `--unit-row`, `--sheet-cell`, `--cell`; also mounts `CommonPopover`, `ScaleFade`, `Slide`, `DatePickerMonthPanel`, `DatePickerYearPanel`
     - `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 `BbDatePicker`)_ — 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`, `--close-size`

package/dist/ai/BbSelect.md

@@ -14,7 +14,7 @@
 
 | pt part | Lands on | In |
 | --- | --- | --- |
-| `pt:panel` | `pt:root` of `BbSelectPopover` | `BbSelectPopover` ([contract](./BbSelectPopover.md)) |
+| `pt:panel` | `pt:panel` of `BbSelectPopover` | `BbSelectPopover` ([contract](./BbSelectPopover.md)) |
 | `pt:sheet` | `pt:sheet` of `BbSelectPopover` | `BbSelectPopover` ([contract](./BbSelectPopover.md)) |
 | `pt:option` | `pt:option` of `BbSelectPopover` | `BbSelectPopover` ([contract](./BbSelectPopover.md)) |
 | `pt:item-text` | `pt:item-text` of `BbSelectPopover` | `BbSelectPopover` ([contract](./BbSelectPopover.md)) |
@@ -1576,7 +1576,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 `panel` (the options surface — the sheet on mobile), `sheet` (that bottom sheet on a phone only, applied after `panel`) `option` (one listbox option, a broadcast), `item-text` (that option's label), `item-icon` (its `itemProps` prepend / append icons — never the field's `icon`) and `item-description` (its muted second line from `itemProps.description` — never the field's `description`), all with the option's `selected` / `disabled`; a custom `#option` slot replaces the label and description. `input` is the activator — the thing you act on to enter the value; the chevron and the clear ✕ are chrome.
+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 options box you see — the popover's painted bubble on desktop, the box inside the sheet on a phone), `sheet` (the bottom sheet on a phone only), `option` (one listbox option, a broadcast), `item-text` (that option's label), `item-icon` (its `itemProps` prepend / append icons — never the field's `icon`) and `item-description` (its muted second line from `itemProps.description` — never the field's `description`), all with the option's `selected` / `disabled`; a custom `#option` slot replaces the label and description. `input` is the activator — the thing you act on to enter the value; the chevron and the clear ✕ are chrome.
 States: `errors`, `warnings` (never beside errors), `loading`, `disabled`, `readonly`, `has-value` (written `pt:box:has-value`). Plus `open` (the options surface is showing) and `selected`, resolved per option. A name outside that list is a type error and an
 ESLint error.
 
@@ -1863,11 +1863,11 @@ 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 `BbSelect`'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 `BbSelect`'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`.
 
-- `BbSelect` _(this component)_ — its own template binds: `input` → `input.bb-select__activator`; hands `BbSelectPopover` the pt map `{ panel: 'root', sheet: 'sheet', option: 'option', 'item-text': 'item-text', 'item-icon': 'item-icon', 'item-description': 'item-description', }` (ours → theirs)
+- `BbSelect` _(this component)_ — its own template binds: `input` → `input.bb-select__activator`; hands `BbSelectPopover` the pt map `{ panel: 'panel', sheet: 'sheet', option: 'option', 'item-text': 'item-text', 'item-icon': 'item-icon', 'item-description': 'item-description', }` (ours → theirs)
   - `CommonField` _(internal — not importable, reach it through `BbSelect`)_ — `BbSelect`'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 `BbSelect`)_ — `BbSelect`'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`
   - `BbBadge` _(public — [contract](./BbBadge.md))_ — its own pt parts (`BbBadge`): `spinner` → `BbSpinner`, `icon` → `BbIcon`, `clear` → `button.bb-badge__clear-button`; documented CSS variables: `--bg`, `--fg`, `--border-width`, `--ring`, `--min-size-md`, `--min-size`, `--elev`, `--radius`, `--font-size`, `--icon-size`, `--gap`, `--padding-inline`, `--clear-size`, `--pad-left`; also mounts `BbIcon`, `BbSpinner`, `BadgeBodyContent`
-  - `BbSelectPopover` _(public — [contract](./BbSelectPopover.md))_ — its own pt parts (`BbSelectPopover`): `input` → `input.bb-select-popover__search-input`, `clear` → `ClearableButton`, `root` → `BbOffCanvas`, `root` → `CommonPopover`, `header` → `div.bb-select-popover__header`, `footer` → `div.bb-select-popover__footer`; hands `BbOffCanvas` the pt map `{ header: 'header', footer: 'footer', sheet: 'root' }` (ours → theirs); also mounts `BbBadge`, `BbIcon`, `ClearableButton`, `CommonPopover`, `ErrorIcon`, `WarningIcon`, `BbSmoothHeight`
+  - `BbSelectPopover` _(public — [contract](./BbSelectPopover.md))_ — its own pt parts (`BbSelectPopover`): `input` → `input.bb-select-popover__search-input`, `clear` → `ClearableButton`, `root` → `BbOffCanvas`, `panel` → `div.bb-select-popover`, `panel` → `CommonPopover`, `root` → `CommonPopover`, `header` → `div.bb-select-popover__header`, `footer` → `div.bb-select-popover__footer`; hands `BbOffCanvas` the pt map `{ header: 'header', footer: 'footer', sheet: 'root' }` (ours → theirs); also mounts `BbBadge`, `BbIcon`, `ClearableButton`, `CommonPopover`, `ErrorIcon`, `WarningIcon`, `BbSmoothHeight`
     - `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`, `--close-size`
       - `CloseButton` _(internal — not importable, reach it through `BbOffCanvas`)_ — documented CSS variables: `--size`, `--p`
     - `ListBox` _(internal — not importable, reach it through `BbSelectPopover`)_

package/dist/ai/BbSelectPopover.md

@@ -16,6 +16,7 @@
 | --- | --- | --- |
 | `pt:clear` | the root of `ClearableButton` | `ClearableButton` _(internal)_ |
 | `pt:root` | the root of `BbOffCanvas` | `BbOffCanvas` ([contract](./BbOffCanvas.md)) |
+| `pt:panel` | the root of `CommonPopover` | `CommonPopover` _(internal)_ |
 | `pt:root` | the root of `CommonPopover` | `CommonPopover` _(internal)_ |
 | `pt:header` | `pt:header` of `BbOffCanvas` | `BbOffCanvas` ([contract](./BbOffCanvas.md)) |
 | `pt:footer` | `pt:footer` of `BbOffCanvas` | `BbOffCanvas` ([contract](./BbOffCanvas.md)) |
@@ -1326,18 +1327,18 @@ floating popover everywhere.
 
 `pt` reaches a named part of the popover with a class list — or, in the
 object form, a style and attributes — optionally only while a state is on.
-Parts: `root` (the flyout — the sheet on mobile), `sheet` (the bottom sheet the surface becomes on a phone — only that sheet, never the desktop surface; applied after `root`, so it wins a conflict there), `input` (the search
+Parts: `root` (the floating element — the sheet on a phone), `panel` (the options box you see: the popover's painted bubble on desktop, the box inside the sheet on a phone), `sheet` (the bottom sheet the surface becomes on a phone — only that sheet, never the desktop surface; applied after `root`, so it wins a conflict there), `input` (the search
 field), `option` (every listbox option, a broadcast resolved per option), `item-text` (that option's label), `item-icon` (its `itemProps` icons) and `item-description` (its muted second line, `itemProps.description`) — all with the option's states; a custom `#option` slot replaces the label and description,
 `header`, `footer`. States: `open`, and `selected` / `disabled` per option.
 `BbSelect` forwards its own `panel` / `sheet` / `option` here.
 
 The filter-pill assignee picker above, restyled through those parts: mono on
 the search `pt:input`, a muted wash on the chosen option
-(`pt:option:selected` is per node), a primary ring on `pt:root:open` (the
-flyout — the sheet on mobile). The activator is yours; don't restyle it
+(`pt:option:selected` is per node), a primary ring on `pt:panel:open` (the
+options box — the box inside the sheet on a phone). The activator is yours; don't restyle it
 through `pt`.
 
-**pt:input / pt:option:selected / pt:root:open — assignee pill**
+**pt:input / pt:option:selected / pt:panel:open — assignee pill**
 
 ```vue
 <template>
@@ -1355,7 +1356,7 @@ through `pt`.
 			:items="teammates"
 			pt:input="font-mono text-sm"
 			pt:option:selected="bg-(--bb-muted) font-semibold"
-			pt:root:open="ring-1 ring-(--bb-primary)"
+			pt:panel:open="ring-1 ring-(--bb-primary)"
 			width="240px"
 		>
 			<template #activator="{ props }">
@@ -1385,7 +1386,7 @@ type Teammate = {
 
 // Same filter-pill assignee picker as `AssigneePicker.vue`, restyled through
 // passthrough: mono on the search `pt:input`, a muted wash on the chosen
-// option (`pt:option:selected` is per node), a primary ring on `pt:root:open`
+// option (`pt:option:selected` is per node), a primary ring on `pt:panel:open`
 // (the flyout — the sheet on mobile).
 const teammates: Teammate[] = [
 	{ id: 'ada', fullName: 'Ada Lovelace' },
@@ -1524,7 +1525,7 @@ 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: `clear`, `footer`, `header`, `input`, `item-description`, `item-icon`, `item-text`, `option`, `root`, `sheet`. States: `disabled`, `open`, `selected`. `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: `clear`, `footer`, `header`, `input`, `item-description`, `item-icon`, `item-text`, `option`, `panel`, `root`, `sheet`. States: `disabled`, `open`, `selected`. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `activator` | `Record<string, any> \| HTMLElement \| null \| undefined` |  |  | External activator element or component ref. When provided, the activator slot is not rendered and event listeners are attached programmatically to the referenced element. |
 | `adaptive` | `boolean \| undefined` | ``config.adaptive` (`true`)` |  | When `true`, the panel opens as a bottom off-canvas sheet on mobile viewports instead of a floating popover; on desktop it stays a popover. The sheet reuses the same search field and options list, adding a representation of the current sele… |
 | `anchor` | `Record<string, any> \| HTMLElement \| null \| undefined` | `null` |  | Override the element used for popover positioning and width measurement. Useful when the focusable activator is narrower than its visual container (e.g. a button inside a wrapper). Falls back to `activatorEl` when omitted. |
@@ -1616,7 +1617,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 `BbSelectPopover`'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 `BbSelectPopover`'s API reaches or that declare a documented CSS variable; the rest fold into "also mounts". The complete tree, repeats and undocumented locals included, is the `tree` field of this component in `components.json`.
 
-- `BbSelectPopover` _(this component)_ — its own template binds: `input` → `input.bb-select-popover__search-input`, `clear` → `ClearableButton`, `root` → `BbOffCanvas`, `root` → `CommonPopover`, `header` → `div.bb-select-popover__header`, `footer` → `div.bb-select-popover__footer`; hands `BbOffCanvas` the pt map `{ header: 'header', footer: 'footer', sheet: 'root' }` (ours → theirs)
+- `BbSelectPopover` _(this component)_ — its own template binds: `input` → `input.bb-select-popover__search-input`, `clear` → `ClearableButton`, `root` → `BbOffCanvas`, `panel` → `div.bb-select-popover`, `panel` → `CommonPopover`, `root` → `CommonPopover`, `header` → `div.bb-select-popover__header`, `footer` → `div.bb-select-popover__footer`; hands `BbOffCanvas` the pt map `{ header: 'header', footer: 'footer', sheet: 'root' }` (ours → theirs)
   - `BbBadge` _(public — [contract](./BbBadge.md))_ — its own pt parts (`BbBadge`): `spinner` → `BbSpinner`, `icon` → `BbIcon`, `clear` → `button.bb-badge__clear-button`; documented CSS variables: `--bg`, `--fg`, `--border-width`, `--ring`, `--min-size-md`, `--min-size`, `--elev`, `--radius`, `--font-size`, `--icon-size`, `--gap`, `--padding-inline`, `--clear-size`, `--pad-left`; also mounts `BbIcon`, `BbSpinner`, `BadgeBodyContent`
   - `BbOffCanvas` _(public — [contract](./BbOffCanvas.md))_ — its own pt parts (`BbOffCanvas`): `header` → `div.bb-offcanvas__header`, `title` → `span.bb-offcanvas__title`, `description` → `p.bb-offcanvas__description`, `close` → `CloseButton`, `content` → `div.bb-offcanvas__body`, `footer` → `div.bb-offcanvas__footer`; documented CSS variables: `--stack-x`, `--stack-fill`, `--stack-transition-duration`, `--px`, `--close-size`
     - `CloseButton` _(internal — not importable, reach it through `BbOffCanvas`)_ — documented CSS variables: `--size`, `--p`

package/dist/ai/BbTimePicker.md

@@ -14,9 +14,22 @@
 
 | pt part | Lands on | In |
 | --- | --- | --- |
+| `pt:root` | the root of `BbOffCanvas` | `BbOffCanvas` ([contract](./BbOffCanvas.md)) |
+| `pt:panel` | the root of `CommonPopover` | `CommonPopover` _(internal)_ |
+| `pt:root` | the root of `CommonPopover` | `CommonPopover` _(internal)_ |
 | `pt:sheet` | `pt:root` of `BbOffCanvas` | `BbOffCanvas` ([contract](./BbOffCanvas.md)) |
 | `pt:item` | the root of `BbBaseButton` | `BbBaseButton` ([contract](./BbBaseButton.md)) |
 
+**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 `BbTimePicker`'s root:
+
+| Variable | Set through | Declared by | What it is |
+| --- | --- | --- | --- |
+| `--stack-x` | `pt:root` | `BbOffCanvas` | Inward shift applied to a parent panel while a child is stacked on top. |
+| `--stack-fill` | `pt:root` | `BbOffCanvas` | Length of the pad (see `::after`) that fills from the panel's anchored edge out to the screen edge, so no empty band shows when a descendant is dragged away or shrinks. |
+| `--stack-transition-duration` | `pt:root` | `BbOffCanvas` | Duration for the stack shift + pad. Zeroed while a peer resizes so parents track the live size instead of lagging behind a 250ms animation. |
+| `--px` | `pt:root` | `BbOffCanvas` | Axis split of --bb-panel-p: --px (inline) / --py (block), each branching off it. Set the pair only when the axes differ; setting --bb-panel-p alone keeps them equal. Local on this root class (not :roo… |
+| `--close-size` | `pt:root` | `BbOffCanvas` | Shared by the close control and by the space the title reserves for it, * so the two can never drift apart. |
+
 ## Usage & Guidelines
 
 ### When to use
@@ -187,8 +200,10 @@ there is no text field to type into, `BbTimePickerInput` 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 time panel, in the popover and in the sheet alike), `sheet` (the bottom
-sheet around it on a phone — no node on desktop) and `item` (one column entry, a broadcast). States: `open`,
+(the floating element — the bottom sheet on a phone), `panel` (the time box you
+see: the popover's painted bubble on desktop, the box inside the sheet on a
+phone), `sheet` (the bottom
+sheet on a phone only, applied after `root`) and `item` (one column entry, a broadcast). States: `open`,
 and `selected` per entry.
 
 The opening-time cell above, restyled through those parts: the current
@@ -256,7 +271,7 @@ typeahead. Always pass a `label` when the trigger is an unlabelled cell or icon.
 
 | 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: `item`, `root`, `sheet`. States: `open`, `selected`. `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: `item`, `panel`, `root`, `sheet`. States: `open`, `selected`. `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 `BbDatePicker`. |
 | `activeSegment` | `BbTimePickerSegment \| undefined` |  |  | Which end the columns edit in range mode (`v-model:active-segment`). Standalone use manages this internally via the in-panel toggle; a host can drive it. Ignored outside `range`. |
 | `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`. |
@@ -304,7 +319,7 @@ typeahead. Always pass a `label` when the trigger is an unlabelled cell or icon.
 - **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 `BbTimePicker`'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 `BbTimePicker`'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`.
 
-- `BbTimePicker` _(this component)_ — its own template binds: `root` → `div.bb-time-picker__panel`; hands `BbOffCanvas` the pt map `{ sheet: 'root' }` (ours → theirs)
+- `BbTimePicker` _(this component)_ — its own template binds: `root` → `BbOffCanvas`, `panel` → `div`, `panel` → `CommonPopover`, `root` → `CommonPopover`; hands `BbOffCanvas` the pt map `{ sheet: 'root' }` (ours → theirs)
   - `CommonTimeSelector` _(internal — not importable, reach it through `BbTimePicker`)_ — `BbTimePicker`'s pt parts land here: `item` → `BbBaseButton`; documented CSS variables: `--time-mark`
     - `BbBaseButton` _(public — [contract](./BbBaseButton.md))_ — its own pt parts (`BbBaseButton`): `root` → `RouterComponent`, `root` → `a`, `root` → `component`; also mounts `RouterComponent`
   - `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`, `--close-size`

package/dist/ai/BbTimePickerInput.md

@@ -14,6 +14,7 @@
 
 | pt part | Lands on | In |
 | --- | --- | --- |
+| `pt:panel` | the root of `CommonPopover` | `CommonPopover` _(internal)_ |
 | `pt:sheet` | `pt:root` of `BbOffCanvas` | `BbOffCanvas` ([contract](./BbOffCanvas.md)) |
 | `pt:root` | `div.bb-field` | `CommonField` _(internal)_ |
 | `pt:label` | `component` | `CommonField` _(internal)_ |
@@ -155,7 +156,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 `panel` (the time columns, in the popover and in the sheet alike), `sheet` (the bottom sheet around them on a phone only) and `item` (one column entry, a broadcast). `input` is every segment field; the clock trigger is chrome.
+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 time box you see — the popover's painted bubble on desktop, the box inside the sheet on a phone), `sheet` (the bottom sheet on a phone only) and `item` (one column entry, a broadcast). `input` is every segment field; the clock trigger is chrome.
 States: `errors`, `warnings` (never beside errors), `loading`, `disabled`, `readonly`, `has-value` (written `pt:box:has-value`). Plus `open` (the panel is showing) and `selected`, resolved per entry. A name outside that list is a type error and an
 ESLint error.
 
@@ -354,7 +355,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 `BbTimePickerInput`'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 `BbTimePickerInput`'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`.
 
-- `BbTimePickerInput` _(this component)_ — its own template binds: `input` → `input.bb-segmented-field__field`, `suffix` → `span.bb-field-input__suffix`, `panel` → `div.bb-time-picker-input__panel`; hands `BbOffCanvas` the pt map `{ sheet: 'root' }` (ours → theirs)
+- `BbTimePickerInput` _(this component)_ — its own template binds: `input` → `input.bb-segmented-field__field`, `suffix` → `span.bb-field-input__suffix`, `panel` → `div`, `panel` → `CommonPopover`; hands `BbOffCanvas` the pt map `{ 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`, `--close-size`
     - `CloseButton` _(internal — not importable, reach it through `BbOffCanvas`)_ — documented CSS variables: `--size`, `--p`
   - `CommonField` _(internal — not importable, reach it through `BbTimePickerInput`)_ — `BbTimePickerInput`'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`

package/dist/ai/changelog.json

@@ -1,7 +1,7 @@
 {
 	"schemaVersion": 2,
 	"library": "bitboss-ui",
-	"version": "3.0.0-beta.26",
+	"version": "3.0.0-beta.27",
 	"upgrade": "v2-to-v3",
 	"guide": "ai/guides/migration/v2-to-v3.md",
 	"releases": [
@@ -39,11 +39,12 @@
 		"3.0.0-beta.23",
 		"3.0.0-beta.24",
 		"3.0.0-beta.25",
-		"3.0.0-beta.26"
+		"3.0.0-beta.26",
+		"3.0.0-beta.27"
 	],
 	"summary": {
 		"renames": 64,
-		"behaviourBreaks": 64,
+		"behaviourBreaks": 65,
 		"unreleased": 0
 	},
 	"breaking": [
@@ -949,6 +950,13 @@
 			"guide": "components/bb-popover.md",
 			"firstReleasedIn": "3.0.0-beta.17"
 		},
+		{
+			"kind": "behaviour",
+			"description": "Picker pt surfaces: BbColorPalette / BbTimePicker / BbDatePicker pt:root moves from the inner content box to the floating element (the sheet on a phone); the box is the new pt:panel (the bubble). BbSelect / BbDatePickerInput / BbTimePickerInput pt:panel now land on the painted bubble, not the floating element / inner box. Classes __picker / __calendar → __panel",
+			"ruling": "Q37",
+			"guide": "ai/guides/passthrough.md (picker surfaces)",
+			"firstReleasedIn": "3.0.0-beta.27"
+		},
 		{
 			"kind": "behaviour",
 			"description": "BbDropdown fetched (pipeline) rows no longer copy BbBaseButton props / icons / variant / onClick / disabled off the raw item — every field beyond text and value comes only from itemProps",