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

package/bin/bitboss-ui-mcp.mjs

@@ -937,7 +937,7 @@ function buildServer() {
 					.boolean()
 					.optional()
 					.describe(
-						'Include reference-only internal components (BbBase*, Common*). Default false — these are not consumer API and should not be recommended.'
+						'Include reference-only internal components (Common*, listbox internals). Default false — these are not consumer API and should not be recommended. BbBaseButton and the BbBase*Icon glyphs are consumer API and are always included.'
 					),
 			},
 		},

package/dist/ai/BbColorInput.md

@@ -761,7 +761,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`, `root` → `BbOffCanvas`, `panel` → `div`, `panel` → `CommonPopover`, `root` → `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 `{ 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,21 +14,9 @@
 
 | 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
@@ -789,7 +777,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: `swatch` → `button.bb-color-palette__swatch`, `root` → `BbOffCanvas`, `panel` → `div`, `panel` → `CommonPopover`, `root` → `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 `{ 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/BbConfirm.md

@@ -72,6 +72,13 @@ Mounting a second host renders every dialog twice
 (nothing warns you). Mounting none is worse: `await confirm(...)` never settles
 and the caller hangs.
 
+**Areas with their own look.** The dialog takes the passthrough scope and the
+tokens of the place its HOST is mounted. When the app is split into areas that
+each wrap their pages in `<BbPtScope>` ([passthrough guide](./guides/passthrough.md) § Named scopes),
+mount one `<BbConfirm />` inside each area's layout, within its scope, and none
+at the app root — which holds only if **every** page renders inside exactly one
+of those layouts, so there is still one host at a time.
+
 ```vue
 <template>
 	<RouterView />
@@ -87,9 +94,12 @@ import { BbConfirm } from 'bitboss-ui';
 standalone example has no app root to mount it in.** In a real app the host is
 already mounted at the root; a page that calls `confirm()` mounts nothing.
 
-The component itself takes no props: everything — content, buttons, size,
-behavior — travels in the message you pass to `confirm()`. At least one of
-`title`, `text`, `portal` should be set (dev warning otherwise).
+The component itself takes almost no props: everything — content, buttons,
+behavior — travels in the message you pass to `confirm()`. The one exception is
+`size`, a host-wide default width every confirm inherits unless its message
+sets its own (see [Size, fullscreen and focus](#size-fullscreen-and-focus)).
+At least one of `title`, `text`, `portal` should be set (dev warning
+otherwise).
 
 ### The destructive flow
 
@@ -636,6 +646,8 @@ standard footer and resolve from inside the slot with its `yes` / `no` helpers.
 
 - `size` picks a maximum-width preset (`'xs'` … `'2xl'`, resolvable through
   the plugin config's `dialogDefaultSizes`); default confirms are compact.
+  To widen every confirm at once, set the same `size` on the host instead —
+  `<BbConfirm size="lg" />` — and let individual messages override it.
 - `fullscreen: true` takes over the whole screen; `fullscreen: 'mobile'`
   restricts that to small viewports.
 - `focusTarget` is a CSS selector focused after opening (default: the first
@@ -768,6 +780,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: `action`, `close`, `content`, `footer`, `header`, `root`, `sheet`, `text`, `title`. States: `open`. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
+| `size` | `keyof Sizes \| undefined` |  |  | Default maximum width for every confirm this host renders, as one of the dialog presets (`'xs'` – `'2xl'`). A per-call `size` in the message wins. When neither is set the dialog falls back to the `BbDialog` default. |
 
 ## Events
 

package/dist/ai/BbDatePicker.md

@@ -17,21 +17,9 @@
 | `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
@@ -221,6 +209,12 @@ props with `offCanvasProps`). Position the desktop popover with `placement`,
 `offset`, `padding`, `boundary`, and `disableFlip` — the same knobs as the other
 overlays. Escape and backdrop clicks close it; focus returns to the activator.
 
+The sheet can be **dragged down to dismiss** and shows **no ✕** — picking,
+drag, backdrop tap and Escape close it. The time wheels and the year list are
+no-drag zones: a swipe there scrolls the list and never moves the sheet, even at
+its top. `offCanvasProps` is spread over those defaults: `{ hideClose: false }`
+brings the ✕ back, `{ draggable: false }` pins the sheet.
+
 ### The `v-bb-date` directive
 
 For the leanest case — a date cell in a table where you don't want a component
@@ -388,7 +382,7 @@ and digit typeahead; the time rail exposes labelled columns. Always pass a
 | `min` | `string \| undefined` |  |  | Minimum selectable value, in this `type`'s shape — `YYYY-MM-DD` (`YYYY-MM-DDTHH:mm` with `datetime`, `YYYY-MM` with `month`, `YYYY` with `year`). A finer bound is accepted and floored to the unit, with a warning. |
 | `modelValue` | `string \| string[] \| null` |  | yes | v-model value. `null` for empty, a single string for single selection, or a two-element `[start, end]` array when `range` is true. The string shape follows `type`: `YYYY-MM-DD` when `floating` (`YYYY-MM` for `month`, `YYYY` for `year`), oth… |
 | `multiple` | `boolean \| undefined` | `false` |  | Enables multi-selection: every pick toggles a value in or out of a sorted array, and the panel stays open until it is dismissed. Works in whatever `type` selects — days, months or years — and requires an array `modelValue` (use `[]` for emp… |
-| `offCanvasProps` | `Partial<BbOffCanvasProps> \| undefined` |  |  | Extra props forwarded to the `BbOffCanvas` sheet when adaptive on mobile. |
+| `offCanvasProps` | `Partial<BbOffCanvasProps> \| undefined` |  |  | Extra props forwarded to the `BbOffCanvas` sheet when `adaptive` is active on mobile (e.g. `title`, `size`, `persistent`). Spread over the defaults: the sheet is `draggable` (the time wheels and the year list never drag it) and hides its ✕ … |
 | `offset` | `number \| undefined` | `4` |  | Space the popover keeps from the activator. |
 | `padding` | `number \| undefined` |  |  | Minimum empty space to keep from the edge of the page. |
 | `placement` | `Placement \| undefined` |  |  | Position of the popover relative to the activator/anchor. |
@@ -446,7 +440,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: `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)
+- `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`, `panel` → `div`, `panel` → `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

@@ -206,6 +206,13 @@ An incomplete date is never emitted: the model updates only once a segment
 parses to a real date, and a half-typed segment is restored to the last coherent
 value when focus leaves the control.
 
+Native attributes that describe typing — `spellcheck`, `autocapitalize`,
+`autocorrect`, `enterkeyhint` — and `form` go to **every segment** (each one
+is a real `<input>` that posts its own `<name>-<field>`); `maxlength`,
+`pattern` and `list` are not routed, because each segment sets its own length
+and parses its own digits. Any other attribute lands on the field root; a
+`pt:input` attribute reaches every segment and wins over the routed ones.
+
 ### Bounds & per-day gating
 
 `min` and `max` (each a `YYYY-MM-DD` string) constrain the selectable window;
@@ -543,8 +550,10 @@ The picker adapts to touch vs pointer, and you can steer that explicitly:
 - **`adaptive`** (defaults to the project's `config.adaptive`): on mobile the
   calendar opens in a bottom `BbOffCanvas` sheet instead of a floating popover.
   The surface is **latched** when the panel opens, so a mid-session resize never
-  swaps a live popover into a sheet. Forward sheet options via `offCanvasProps`
-  (e.g. `title`, `size`, `persistent`, `draggable`). Set `:adaptive="false"` to
+  swaps a live popover into a sheet. The sheet drags down to dismiss and shows
+  no ✕ (the time wheels and the year list never drag it). Forward sheet options
+  via `offCanvasProps`, spread over those defaults (e.g. `title`, `size`,
+  `persistent`, `{ hideClose: false }` to bring the ✕ back). Set `:adaptive="false"` to
   force the floating popover on every viewport (deterministic in tests).
 - **`disableWriting`**: block typing so the calendar is the only way in. Use
   `'mobile'` / `'desktop'` to disable typing on just one platform.
@@ -871,7 +880,7 @@ label>')` matches nothing; query each segment by its own label instead. See
 | `min` | `string \| undefined` |  |  | Minimum selectable date in `YYYY-MM-DD` format — or, with `type="datetime"`, `YYYY-MM-DDTHH:mm` to tighten the boundary day to a minute. Values outside both patterns throw during setup to surface configuration mistakes. |
 | `modelValue` | `string \| string[] \| null` |  | yes | Used by v-model. Can be null, a single string, or an array of strings based on whether a range or single date is needed. |
 | `name` | `string \| undefined` |  |  | Defines the name of the input. |
-| `offCanvasProps` | `Partial<BbOffCanvasProps> \| undefined` |  |  | Extra props forwarded to the `BbOffCanvas` sheet when `adaptive` is active on mobile (e.g. `title`, `size`, `persistent`). |
+| `offCanvasProps` | `Partial<BbOffCanvasProps> \| undefined` |  |  | Extra props forwarded to the `BbOffCanvas` sheet when `adaptive` is active on mobile (e.g. `title`, `size`, `persistent`). Spread over the defaults: the sheet is `draggable` (the time wheels and the year list never drag it) and hides its ✕ … |
 | `persistentHint` | `boolean \| undefined` | `false` |  | Keeps the hint displayed. |
 | `placeholder` | `string \| undefined` |  |  | String displayed when there's no data. |
 | `prepend:icon` | `string \| undefined` |  |  | Name of the icon to be added at the start of the input. |
@@ -942,8 +951,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: '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`
+- `BbDatePickerInput` _(this component)_ — its own template binds: `controlAttrs` → `input.bb-segmented-field__field`, `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`, `panel` → `div`, `panel` → `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/BbDropdownButton.md

@@ -484,7 +484,10 @@ the menu becomes on a phone, only), `item` (every entry), and `item-text` /
 `item-icon` / `item-description` (an entry's label, its icons and its muted
 second line) — all handed to the `BbDropdown` under the same words, so
 `pt:panel:open`, `pt:item:disabled` and `pt:item-text` resolve there, on the
-flyout and on the phone sheet alike. States: `loading`, `disabled`, `open`.
+flyout and on the phone sheet alike. States: `loading`, `disabled`, `open` on
+every part, and `selected` (a selectable group's checked entry) on the entry
+parts only — `pt:item:selected` is the menu's word, `pt:root:selected` a type
+error.
 
 The Save split on INV-2048, restyled through those parts: the brand token on
 `pt:icon` (the main button's glyph — the chevron is chrome), muted
@@ -592,7 +595,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: `icon`, `item`, `item-description`, `item-icon`, `item-text`, `panel`, `root`, `sheet`, `spinner`, `text`. States: `disabled`, `loading`, `open`. `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: `icon`, `item`, `item-description`, `item-icon`, `item-text`, `panel`, `root`, `sheet`, `spinner`, `text`. States: `disabled`, `loading`, `open`, `selected`. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. |
 | `append:icon` | `string \| undefined` |  |  | Icon to be added on the right of the text. |
 | `block` | `boolean \| undefined` | `false` |  | Displays the component as full width. |
 | `disableAutoLoading` | `boolean \| undefined` | `false` |  | Disables the automatic loading state that tracks async actions (enabled by default). Only affects the main action button: the split toggle half still mirrors the dropdown's internal async-action loading state. |

package/dist/ai/BbPtScope.md

@@ -0,0 +1,136 @@
+# BbPtScope
+
+## Agent Contract
+
+- Safety level: **Consumer API**
+- Group: **Layout & Utility**
+- Description: Renderless provider that switches on a named passthrough scope (`ptScopes` in the plugin config) for its subtree — a backoffice and a member area with different looks in one app.
+- Usage rule: Prefer this component for consumer-facing implementations.
+- Implementation source (only when the contract below is not enough): [source/BbPtScope.md](./source/BbPtScope.md)
+
+## Usage & Guidelines
+
+### When to use
+
+The global passthrough map (`bitbossUi({ pt })`) styles every instance in the
+app. When the app has **areas with different looks** — a backoffice next to a
+member webapp, per-tenant areas, a marketing section beside the product — give
+each area a named map in `ptScopes` and wrap the area in `<BbPtScope>`:
+
+```ts
+// bitboss-ui.pt.ts
+import { definePt } from 'bitboss-ui/vite';
+
+export const pt = definePt({
+	BbTextInput: { label: 'text-xs font-medium' },
+});
+
+export const ptScopes = {
+	webapp: definePt({
+		BbTextInput: { label: 'text-white/60' },
+		BbButton: { root: 'rounded-full' },
+	}),
+	backoffice: definePt({
+		BbButton: { root: 'rounded-md' },
+	}),
+};
+```
+
+```vue
+<!-- WebappLayout.vue -->
+<template>
+	<BbPtScope name="webapp">
+		<slot />
+	</BbPtScope>
+</template>
+
+<script setup lang="ts">
+import { BbPtScope } from 'bitboss-ui';
+</script>
+```
+
+Everything rendered inside the scope — however deep — resolves the `webapp`
+entries on top of the global map. Outside it, nothing changes.
+
+### Order and nesting
+
+For each part, the sources merge in this order:
+
+1. the global map (`pt`),
+2. every active scope, outermost `<BbPtScope>` first,
+3. the instance's `class`, `pt` object and `pt:*` attributes.
+
+Nested scopes **add up**: an inner scope merges after the outer one, it never
+hides it. Everything goes through the same merge and class deduper as the rest
+of `pt`, so a conflicting utility on an instance replaces the scope's.
+
+```vue
+<template>
+	<BbPtScope name="webapp">
+		<!-- the scope's `rounded-full`, then this instance's `rounded-none` wins -->
+		<BbButton pt:root="rounded-none">Save</BbButton>
+	</BbPtScope>
+</template>
+
+<script setup lang="ts">
+import { BbButton, BbPtScope } from 'bitboss-ui';
+</script>
+```
+
+### The name is typed
+
+`name` is a `BbPtScopeName`: the plugin generates the union of your `ptScopes`
+keys (`'webapp' | 'backoffice'`) when the dev server or a build runs, so a
+misspelt scope is a `vue-tsc` error. Every component name and key inside a
+scope is checked against the library's manifest at build time, exactly like
+the global map. `name` is reactive: switching it restyles the subtree.
+
+### Overlays, directives, toasts and confirms
+
+The scope follows the **component tree**, not the DOM:
+
+- A dialog, sheet, popover, dropdown or picker opened inside the scope resolves
+  it wherever it paints.
+- `v-bb-tooltip`, `v-bb-dropdown`, `v-bb-date`, `v-bb-time` and `v-bb-color`
+  resolve the scope around the component whose **template** they are written
+  in. A directive written directly in `<BbPtScope>`'s slot, in the same
+  template as the scope, sees the scope above it instead — keep the scope in a
+  layout or a parent component.
+- `<BbToast>` and `<BbConfirm>` render every message where the **host** is
+  mounted. For toasts and confirms in the area's look, mount one of each inside
+  each area's layout, within its scope, and none at the app root — valid only
+  when every page renders inside exactly one of those layouts (see
+  [Agent Contract § Global Host Rule](./guides/agent-contract.md)).
+
+### When NOT to use it
+
+- **One look for the whole app** — that is the global `pt` map.
+- **Colours, radii, sizes for a subtree** — those are tokens: a `.bb-theme`
+  island ([design tokens](./guides/design-tokens.md)). A scope restyles parts;
+  an area usually wants both.
+- **One instance** — use `pt:*` on that instance.
+
+### Works well with
+
+- `BbToast` / `BbConfirm` — mount their hosts inside each scoped area layout.
+- The [passthrough guide](./guides/passthrough.md) — grammar, merging and the
+  full parts table.
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `name` | `BbPtScopeName` |  | yes | The scope to switch on for everything inside: a key of the plugin's `ptScopes` option (`BbPtScopeName`, generated from your config). Nested scopes add up: the outer scope's entries apply first, the inner scope's after them. Reactive — chang… |
+
+## Events
+
+- None.
+
+## Slots
+
+- `default` — scope: `any` — The subtree the scope applies to. Rendered as is — no wrapper element.
+
+## See Also
+
+- [BbToast](./BbToast.md) — Shows transient notification messages (includes the co-located BbToastPortal export).
+- [BbConfirm](./BbConfirm.md) — Prompts users to confirm or cancel critical actions (includes co-located BbConfirmPortal export).

package/dist/ai/BbSelect.md

@@ -1665,6 +1665,12 @@ The full grammar, the merge rules and the global map are in the
 
 ### Gotchas and constraints
 
+- **A `form` attribute goes to the hidden inputs** — the select's value
+  channel — so a select rendered outside its `<form>` still posts with it
+  (`form="checkout"`). No other native attribute is routed: the activator is a
+  button, not a text field, so `spellcheck` and friends have nothing to land
+  on and stay on the field root like any attribute.
+
 - **Clicking the selected option does not clear a single select** — it re-picks
   it and closes the panel. Add `clearable` for an explicit clear button; a
   required status field should not empty itself because someone clicked twice.
@@ -1863,11 +1869,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: 'panel', 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`, `controlAttrs` → `input`; 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`, `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`
+  - `BbSelectPopover` _(public — [contract](./BbSelectPopover.md))_ — its own pt parts (`BbSelectPopover`): `input` → `input.bb-select-popover__search-input`, `clear` → `ClearableButton`, `root` → `BbOffCanvas`, `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

@@ -1617,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`, `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)
+- `BbSelectPopover` _(this component)_ — its own template binds: `input` → `input.bb-select-popover__search-input`, `clear` → `ClearableButton`, `root` → `BbOffCanvas`, `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/BbTag.md

@@ -560,8 +560,6 @@ Set these on the element, or on a class you put on it, to retune this component
 | Property | Set on | Default | What it is |
 | --- | --- | --- | --- |
 | `--compensation-multiplier` | `.bb-tag__field` | `0.3` | Fraction of the shell's inner padding the chip row is pulled back by when no prepend icon precedes it (see the negative margin below). |
-| `--inner-h` | `.bb-tag__field` | `max( calc(var(--bb-leading) + var(--bb-input-py) * 2), calc(var(--bb-input-h) - …` | The first chip row's height: the tallest of one line plus its vertical padding, the input height less its borders, and the icon box. Feeds `--floating-py` and nothing else. |
-| `--floating-py` | `.bb-tag__field` | `calc((var(--inner-h) - var(--bb-input-icon)) / 2)` | Top offset for centring icons and affixes on that first row — the same value BbTextarea uses for that. Nothing in the library reads it, so this and the compact override below are currently inert. |
 | `--border-color` | `pt:box` | `per variant` | The resting border, at the fixed --bb-border-w. Errors and warnings paint their frame over it, so `pt:box="[--border-color:…]"` recolours the rest without hiding the state; a plain `border-*` utility on the base pt:box would hide it (ESLint… |
 
 ## Component tree

package/dist/ai/BbTextInput.md

@@ -511,8 +511,12 @@ The native attributes that only mean something on the input itself —
 `maxlength`, `minlength`, `pattern`, `spellcheck`, `autocapitalize`,
 `autocorrect`, `enterkeyhint`, `list`, `form`, `dirname` — go straight to the
 native `<input>` (the same holds for BbTextarea, BbNumberInput, BbTag and
-BbColorInput, where `wrap` joins them on the textarea). Any other attribute
-you set lands on the field's outer element; reach the input with
+BbColorInput, where `wrap` joins them on the textarea). The controls without
+a text input route only what their native control reads: BbSelect sends
+`form` to its hidden inputs, BbDatePickerInput and BbTimePickerInput send
+`form`, `spellcheck`, `autocapitalize`, `autocorrect` and `enterkeyhint` to
+every segment (each segment keeps its own `maxlength` and parsing). Any other
+attribute you set lands on the field's outer element; reach the input with
 `pt:input="{ attrs: { … } }"`, which also wins over the attributes above.
 
 **An OTP field: text type, numeric keyboard, masked**

package/dist/ai/BbTimePicker.md

@@ -14,22 +14,10 @@
 
 | 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
@@ -158,6 +146,12 @@ props with `offCanvasProps`). Position the desktop popover with `placement`,
 `offset`, `padding`, `boundary`, and `disableFlip` — the same knobs as the other
 overlays. Escape and backdrop clicks close it; focus returns to the activator.
 
+The sheet can be **dragged down to dismiss** and shows **no ✕** — picking,
+drag, backdrop tap and Escape close it. The time wheels are no-drag zones: a
+swipe there scrolls the wheel and never moves the sheet, even at the top of the
+list. `offCanvasProps` is spread over those defaults: `{ hideClose: false }`
+brings the ✕ back, `{ draggable: false }` pins the sheet.
+
 ### The `v-bb-time` directive
 
 For the leanest case — a time cell in a schedule table where you don't want a
@@ -285,7 +279,7 @@ typeahead. Always pass a `label` when the trigger is an unlabelled cell or icon.
 | `max` | `string \| undefined` |  |  | Maximum selectable time in `HH:mm` format. Values outside the pattern throw during setup to surface configuration mistakes. |
 | `min` | `string \| undefined` |  |  | Minimum selectable time in `HH:mm` format. Values outside the pattern throw during setup to surface configuration mistakes. |
 | `modelValue` | `string \| string[] \| null` |  | yes | v-model value: `null` for empty, a 24-hour `HH:mm` (or `HH:mm:ss` with `seconds`) string, or a two-element `[start, end]` array when `range` is true. |
-| `offCanvasProps` | `Partial<BbOffCanvasProps> \| undefined` |  |  | Extra props forwarded to the `BbOffCanvas` sheet when adaptive on mobile. |
+| `offCanvasProps` | `Partial<BbOffCanvasProps> \| undefined` |  |  | Extra props forwarded to the `BbOffCanvas` sheet when `adaptive` is active on mobile (e.g. `title`, `size`, `persistent`). Spread over the defaults: the sheet is `draggable` (the time wheels never drag it) and hides its ✕ (picking, backdrop… |
 | `offset` | `number \| undefined` | `4` |  | Space the popover keeps from the activator. |
 | `padding` | `number \| undefined` |  |  | Minimum empty space to keep from the edge of the page. |
 | `placement` | `Placement \| undefined` |  |  | Position of the popover relative to the activator/anchor. |
@@ -319,7 +313,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` → `BbOffCanvas`, `panel` → `div`, `panel` → `CommonPopover`, `root` → `CommonPopover`; hands `BbOffCanvas` the pt map `{ sheet: 'root' }` (ours → theirs)
+- `BbTimePicker` _(this component)_ — its own template binds: `panel` → `div`, `panel` → `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

@@ -101,6 +101,13 @@ is required.
 <BbTimePickerInput v-model="state.slotAt" ampm :step="15" label="Pickup slot" />
 ```
 
+Native attributes that describe typing — `spellcheck`, `autocapitalize`,
+`autocorrect`, `enterkeyhint` — and `form` go to **every segment** (each one
+is a real `<input>` that posts its own `<name>-<field>`); `maxlength`,
+`pattern` and `list` are not routed, because each segment sets its own length
+and parses its own digits. Any other attribute lands on the field root; a
+`pt:input` attribute reaches every segment and wins over the routed ones.
+
 ### Bounds & ranges
 
 `min` / `max` (`HH:mm`) clamp typed times when interaction ends — the value
@@ -126,7 +133,9 @@ end]`; typing an inverted pair swaps it on blur with the usual
 
 The popover follows the family's adaptive pattern: on mobile (with the global
 `config.adaptive`, or the `adaptive` prop) the columns open in a bottom sheet
-(`offCanvasProps` forwards extras). `disableWriting` (`true` / `'mobile'` /
+that drags down to dismiss and shows no ✕ (the wheels never drag it;
+`offCanvasProps` is spread over those defaults — `{ hideClose: false }` brings
+the ✕ back). `disableWriting` (`true` / `'mobile'` /
 `'desktop'`) turns off typing per platform — the columns then carry the
 interaction.
 
@@ -291,7 +300,7 @@ Messages _also_ render in an `aria-live="polite"` region.
 | `min` | `string \| undefined` |  |  | Minimum selectable time in `HH:mm` format. Values outside the pattern throw during setup to surface configuration mistakes. |
 | `modelValue` | `string \| string[] \| null` |  | yes | v-model value: `null` for empty, a 24-hour `HH:mm` (or `HH:mm:ss` with `seconds`) string, or a two-element array when `range` is true. |
 | `name` | `string \| undefined` |  |  | Defines the name of the input. |
-| `offCanvasProps` | `Partial<BbOffCanvasProps> \| undefined` |  |  | Extra props forwarded to the `BbOffCanvas` sheet when `adaptive` is active on mobile (e.g. `title`, `size`, `persistent`). |
+| `offCanvasProps` | `Partial<BbOffCanvasProps> \| undefined` |  |  | Extra props forwarded to the `BbOffCanvas` sheet when `adaptive` is active on mobile (e.g. `title`, `size`, `persistent`). Spread over the defaults: the sheet is `draggable` (the time wheels never drag it) and hides its ✕ (picking, backdrop… |
 | `persistentHint` | `boolean \| undefined` | `false` |  | Keeps the hint displayed. |
 | `placeholder` | `string \| undefined` |  |  | String displayed when there's no data. |
 | `prepend:icon` | `string \| undefined` |  |  | Name of the icon to be added at the start of the input. |
@@ -355,7 +364,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`, `panel` → `CommonPopover`; hands `BbOffCanvas` the pt map `{ sheet: 'root' }` (ours → theirs)
+- `BbTimePickerInput` _(this component)_ — its own template binds: `controlAttrs` → `input.bb-segmented-field__field`, `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/BbToast.md

@@ -57,6 +57,14 @@ import { BbToast } from 'bitboss-ui';
 </script>
 ```
 
+**Areas with their own look.** A toast takes the passthrough scope and the
+tokens of the place its HOST is mounted, not of the code that fired it. When
+the app is split into areas that each wrap their pages in `<BbPtScope>`
+([passthrough guide](./guides/passthrough.md) § Named scopes), mount one
+`<BbToast />` inside each area's layout, within its scope, and none at the app
+root. That still means one host at a time — as long as **every** page renders
+inside exactly one of those layouts.
+
 On Nuxt the host goes in `app.vue`; on Inertia, in the `createInertiaApp`
 render root — one mount above the router, so every page shares it and no page
 mounts its own. **Every example on this page mounts its own `<BbToast />` only
@@ -736,8 +744,8 @@ The full grammar, the merge rules and the global map are in the
 
 - **No host, no toasts**: `toast(...)` without a mounted `<BbToast />`
   enqueues silently — and the messages never expire, because the dismiss timer
-  lives inside the host. Mount exactly one host, at the app root — never one per
-  page or per component.
+  lives inside the host. Mount exactly one host at a time: at the app root
+  (or one per area layout, see _Setup_) — never one per page or per component.
 - Don't hand-roll notification markup or timers; between variants, upsert,
   portals, and persistence the component covers it.
 - Don't put must-act information only in a toast — it self-dismisses.