bitboss-ui 3.0.0-beta.51 → 3.0.0-beta.53

package/bin/bitboss-ui-mcp.mjs

@@ -2724,16 +2724,24 @@ function listChanges({
 			guide: doc.guide,
 			count: all.length,
 			releases,
+			// Zero counts are left out (a missing key is 0): the map grows by a
+			// release each beta and must stay one small answer (beta.53 hit the
+			// 3 000-char budget with every bucket spelling out its zeros).
 			perRelease: Object.fromEntries(
-				Object.entries(perRelease).sort(([a], [b]) =>
-					a === 'unreleased'
-						? 1
-						: b === 'unreleased'
-							? -1
-							: compareVersions(a, b)
-				)
+				Object.entries(perRelease)
+					.sort(([a], [b]) =>
+						a === 'unreleased'
+							? 1
+							: b === 'unreleased'
+								? -1
+								: compareVersions(a, b)
+					)
+					.map(([at, bucket]) => [
+						at,
+						Object.fromEntries(Object.entries(bucket).filter(([, n]) => n > 0)),
+					])
 			),
-			hint: 'Counts only. What breaks when you bump: list_changes({ since: "<the version you have>" }) — one line per change; coming from v2: since: "2". One component: { component: "BbSelect" }. Full rows: detail: "rows".',
+			hint: 'Counts only (a missing count is 0). What a bump breaks: list_changes({ since: "<your version>" }), one line per change; from v2: since: "2". One component: { component: "BbSelect" }. Full rows: detail: "rows".',
 		};
 	}
 

package/dist/ai/BbBadge.md

@@ -70,7 +70,8 @@ For a small, closed status set (paid / pending / overdue, plan tiers), register
 the soft palette from
 [design language guide](./guides/design-language.md) § Using color
 (`soft-gray` / `soft-blue` / `soft-green` / `soft-amber` / `soft-red`) and style
-`.bb-badge--<name>` in your project stylesheet. Never invent `variant="success"`
+`.bb-badge--<name>` in your project stylesheet. Type a status map as
+`Record<Status, BadgeVariantType>`. Never invent `variant="success"`
 — that name is not built-in and ships no CSS. The example below uses the soft
 names: in your app it type-checks only after the `badgeVariants` registration
 and renders styled only with that CSS — both are in the linked section.
@@ -863,7 +864,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 | `loading` | `boolean \| undefined` | `false` |  | Shows a spinner in place of the leftmost icon (`icon` or `prepend:icon`; the `append:icon` when it is the only one; else the leading slot), as `BbButton` does, with a hidden loading announcement. |
 | `prepend:icon` | `string \| undefined` |  |  | Icon rendered before the label. |
 | `size` | `'xs'` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'2xl'` | `"md"` |  | Preset size of the badge. |
-| `variant` | `'outline'` \| `'primary'` \| `'destructive'` \| `'secondary'` \| `'none'` | `"primary"` |  | Visual variant: `primary`, `secondary`, `destructive`, or `outline`. Register more via the vite plugin `badgeVariants` option and style `.bb-badge--<variant>` (set `--bg` / `--fg`). `'none'` renders no variant class — an escape hatch for a one-off look set through `--bg` / `--fg` on the element. |
+| `variant` | `'outline'` \| `'primary'` \| `'destructive'` \| `'secondary'` \| `'none'` | `"primary"` |  | Visual variant: `primary`, `secondary`, `destructive`, or `outline`. Status colours are a registration (vite plugin `badgeVariants`, the `soft-*` palette in design-language.md) styled as `.bb-badge--<variant>`. `'none'` renders no variant class: set `--bg` / `--fg` on the element. |
 
 ## Passthrough parts and states
 

package/dist/ai/BbColorPalette.md

@@ -447,8 +447,9 @@ The float itself is tuned with the popover props:
   unless you set `disable-flip`.
 - `offset` (default 4) — gap between anchor and popover; `padding` (default 6) —
   minimum space kept from the viewport edge.
-- `boundary` — constrain the popover inside an element (ref or CSS selector),
-  e.g. a scrolling panel.
+- `boundary` — keep the popover inside an element (ref or CSS selector)
+  alongside its trigger, e.g. a scrolling panel's width; it may open past the
+  edge away from the trigger, and only the viewport flips it.
 - `transition-duration` (default 250ms) and `eager` — render the palette content
   before it is first shown (useful for SSR/measurement; off by default so the
   body mounts lazily).
@@ -757,7 +758,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 | `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 to the global `config.adaptive`. |
 | `alpha` | `boolean \| undefined` | `false` |  | Enable the alpha channel. The picker shows an opacity slider and emits `#RRGGBBAA` hex8 values. |
 | `anchor` | `ElementOrComponentRef \| undefined` |  |  | Element or component ref the popover positions itself relative to. Defaults to the activator element when omitted, allowing the popover to be anchored to a larger container (e.g. the full input row) while a smaller element (e.g. a color dot) remains the click target. |
-| `boundary` | `ElementOrComponentRefOrSelector \| undefined` |  |  | Constrains the popover within a bounding element. Accepts an HTMLElement, a Vue component ref, or a CSS selector string. |
+| `boundary` | `ElementOrComponentRefOrSelector \| undefined` |  |  | Constrains the popover within a bounding element: it stays inside it alongside its trigger (sideways for a popover above or below); away from the trigger it may pass the edge, and it flips at the viewport only. Accepts an HTMLElement, a Vue component ref, or a CSS selector string. |
 | `disabled` | `boolean \| undefined` | `false` |  | Disable all interaction (activator and palette). |
 | `disableFlip` | `boolean \| undefined` | `false` |  | Disables the automatic flip to the opposite side when the popover would overflow (flipping is on by default). |
 | `eager` | `boolean \| undefined` | `false` |  | Renders the palette panel at mount instead of on the first open (the phone sheet's too). |

package/dist/ai/BbDatePicker.md

@@ -416,7 +416,7 @@ and digit typeahead; the time rail exposes labelled columns. Always pass a
 | `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`. |
 | `ampm` | `boolean \| undefined` | `false` |  | 12-hour display with an AM/PM column (requires `type="datetime"`); emits stay 24h. |
 | `anchor` | `ElementOrComponentRef \| undefined` |  |  | Element or component ref the popover positions itself relative to. Defaults to the activator when omitted (anchor to a larger row while a smaller element stays the click target). |
-| `boundary` | `ElementOrComponentRefOrSelector \| undefined` |  |  | Constrains the popover within a bounding element or CSS selector. |
+| `boundary` | `ElementOrComponentRefOrSelector \| undefined` |  |  | Constrains the popover within a bounding element or CSS selector: sideways only, alongside the trigger; it flips at the viewport. |
 | `disabled` | `boolean \| undefined` | `false` |  | Disables the activator and the calendar. |
 | `disableFlip` | `boolean \| undefined` | `false` |  | Disable the automatic flip to the opposite side on overflow. |
 | `eager` | `boolean \| undefined` | `false` |  | Render popover content before it is first shown. |

package/dist/ai/BbDropdown.md

@@ -1600,7 +1600,11 @@ const items: BbDropdownItem[] = [
   `placement` is `'cursor'`.
 - `offset` (gap from the anchor), `padding` (minimum space kept from the
   viewport edge), and `boundary` (an element, component ref, or CSS selector
-  that confines the panel) tune positioning; `eager` pre-renders the panel
+  the panel stays inside alongside its trigger; it may still open past the
+  edge away from the trigger, and only the viewport flips it) tune positioning.
+  Pass `boundary` a `useTemplateRef` or a selector, not `$refs.x`: `$refs` is
+  not reactive, so a menu in a table cell rendered before the ref was set keeps
+  no boundary until that row happens to re-render. `eager` pre-renders the panel
   before first open; `transitionDuration` controls the open/close animation.
 - The menu closes itself on outside click/focus, on `Escape`, when another
   dropdown opens, and when the activator scrolls out of view. `disabled`
@@ -2170,7 +2174,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 | `activator` | `Record<string, any> \| HTMLElement \| null \| undefined` |  |  | An external activator element or component ref: the activator slot is not rendered, and the listeners and ARIA (`aria-haspopup` / `aria-expanded` / `aria-controls`) are attached to it; don't add your own. |
 | `adaptive` | `boolean \| undefined` | ``config.adaptive` (`true`)` |  | On mobile (below `config.mobileMaxWidth`), renders the menu as a bottom sheet that drills into submenus one level at a time instead of hover flyouts; slots and selection are unchanged. Unset: the global `config.adaptive`. |
 | `anchor` | `Record<string, any> \| HTMLElement \| null \| undefined` | `the activator element` |  | The element the panel positions against when it should differ from the activator (a wrapper the activator is part of); an HTMLElement or component ref. It also drives a percentage `width`. Ignored with `placement="cursor"`. |
-| `boundary` | `string \| Record<string, any> \| HTMLElement \| null \| undefined` |  |  | Constrains the dropdown within a bounding element. Accepts an HTMLElement, a Vue component ref, or a CSS selector string. |
+| `boundary` | `string \| Record<string, any> \| HTMLElement \| null \| undefined` |  |  | Keeps the panel inside this element alongside its trigger (sideways for a menu above or below); away from the trigger it may pass the edge, and only the viewport flips it. An HTMLElement, a component ref or a CSS selector: a `useTemplateRef`, never `$refs.x` (not reactive). |
 | `compact` | `boolean \| undefined` | `false` |  | Compact density, the `BbSelect` ladder: flyout rows 28px → 24px, sheet rows 44px → 36px (a sheet row stays a touch target). The label size does not change. |
 | `disabled` | `boolean \| undefined` | `false` |  | Disables the component |
 | `eager` | `boolean \| undefined` | `false` |  | Renders the menu panel at mount instead of on the first open (the phone sheet's too), and keeps its rows after a close. Without it the rows mount on each open and go once the menu has closed. |

package/dist/ai/BbForm.md

@@ -125,21 +125,26 @@ import {
 	useBbFormContext,
 } from 'bitboss-ui';
 
-const signup = z
-	.object({
-		// An emptied text field holds `null`: the type's message covers it.
-		name: z.string('Enter your name').trim().min(1, 'Enter your name'),
-		// A transform: `@submit` receives the lower-cased address.
-		email: z.email('Enter a valid email').toLowerCase(),
-		password: z.string('Choose a password').min(8, 'At least 8 characters'),
-		confirm: z.string('Repeat the password'),
-		terms: z.literal(true, 'Accept the terms to continue'),
-	})
-	// A cross-field rule: `path` puts the message on the second field.
-	.refine((form) => form.password === form.confirm, {
-		message: 'The passwords do not match',
-		path: ['confirm'],
-	});
+const fields = z.object({
+	// An emptied text field holds `null`: the type's message covers it.
+	name: z.string('Enter your name').trim().min(1, 'Enter your name'),
+	// A transform: `@submit` receives the lower-cased address.
+	email: z.email('Enter a valid email').toLowerCase(),
+	password: z.string('Choose a password').min(8, 'At least 8 characters'),
+	confirm: z.string('Repeat the password'),
+	terms: z.literal(true, 'Accept the terms to continue'),
+});
+
+// A cross-field rule: `path` puts the message on the second field, `when`
+// runs it as soon as the two passwords parse (zod otherwise skips it while
+// any other field fails).
+const signup = fields.refine((form) => form.password === form.confirm, {
+	message: 'The passwords do not match',
+	path: ['confirm'],
+	when: (payload) =>
+		fields.pick({ password: true, confirm: true }).safeParse(payload.value)
+			.success,
+});
 
 const form = useBbFormContext('signup');
 const created = ref<z.output<typeof signup> | null>(null);
@@ -165,7 +170,9 @@ What you get from the one prop:
   `name="lines[0][qty]"` (brackets read as dots). A field with no `name` is
   named after its label, `Full name` → `fullname`, so schema-driven forms set
   `name` on every field. A cross-field rule
-  reaches the right field through its `path` (`path: ['confirm']` above).
+  reaches the right field through its `path` (`path: ['confirm']` above);
+  its `when` lets it run while other fields still fail (a zod object
+  refinement is skipped until the whole object parses).
 - **Submit is gated** by the schema, async refinements included, exactly as it
   is by field rules.
 - **`@submit` receives the schema's output.** Transforms and coercions have
@@ -1176,7 +1183,8 @@ first (`JSON.parse(JSON.stringify(form.values.value))`).
 
 ### `resetForm()` clears the fields, and your model
 
-Resetting publishes the new value back through each field's
+`resetForm()` is the slot's name; from outside the form the same reset is
+`useBbFormContext(id).reset()` (the handle has no `resetForm`). Resetting publishes the new value back through each field's
 `update:modelValue` (and writes it into the object bound with `:model`), so
 the control, the form's own state and whatever ref you bound all agree
 afterwards.

package/dist/ai/BbHoverCard.md

@@ -463,7 +463,7 @@ value written in `<script>` is typed as `BbHoverCardProps['pt']`.
 | --- | --- | --- | --- | --- |
 | `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: `content`, `footer`, `header`, `panel`, `root`. States: `open`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. In `<script>` a `pt` value is typed `BbHoverCardProps['pt']` (`PtValue` is not exported): § Typing `pt` in `<script>`. |
 | `activator` | `ElementOrComponentRef \| undefined` |  |  | External activator element or component ref. When provided, the activator slot is not rendered and the hover / focus listeners are attached programmatically to the referenced element. |
-| `boundary` | `ElementOrComponentRefOrSelector \| undefined` |  |  | Constrains the card within a bounding element. When provided, the card will not overflow this container's bounds (e.g. a sidebar). Accepts an HTMLElement, a Vue component ref, or a CSS selector string. |
+| `boundary` | `ElementOrComponentRefOrSelector \| undefined` |  |  | Constrains the card within a bounding element: it stays inside it alongside its trigger (sideways for a card above or below); away from the trigger it may pass the edge, and it flips at the viewport only. Accepts an HTMLElement, a Vue component ref, or a CSS selector string. |
 | `delay` | `number \| undefined` | `350` |  | Milliseconds the pointer (or keyboard focus) rests on the activator before the card shows; longer than BbTooltip's, so passing over does not open it. Closing has a fixed grace (guide § Timing and the safe zone). |
 | `disabled` | `boolean \| undefined` | `false` |  | Disables the component. Disabling an open card closes it. |
 | `eager` | `boolean \| undefined` | `false` |  | Renders the card's content at mount instead of on the first open. |

package/dist/ai/BbPopover.md

@@ -472,8 +472,10 @@ Fine-tune the geometry with:
 - `offset` — gap (px) between the activator and the panel (default `4`).
 - `padding` — minimum gap (px) the panel keeps from the page edge (default
   `10`).
-- `boundary` — an element, ref, or CSS selector that constrains the panel so it
-  never escapes a scrolling region or sidebar.
+- `boundary` — an element, ref, or CSS selector the panel stays inside
+  alongside its trigger (a sidebar's width, a table's). Away from the trigger
+  it may pass the edge: a panel under a table's last row opens below it
+  rather than flipping, and only the viewport flips it.
 
 `BbPopover` is a floating **panel**, not a speech bubble — it never renders an
 arrow. Reach for `BbTooltip` when you want an arrow pointing back at the trigger
@@ -871,7 +873,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 | `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: `content`, `footer`, `header`, `panel`, `root`, `sheet`. States: `open`. What each one is: _Passthrough parts and states_ below. `pt` is the object form with the same keys minus the prefix (`{ icon: '…', 'icon:loading': '…' }`). See `guides/passthrough.md`. In `<script>` a `pt` value is typed `BbPopoverProps['pt']` (`PtValue` is not exported): § Typing `pt` in `<script>`. |
 | `activator` | `ElementOrComponentRef \| undefined` |  |  | External activator element or component ref. When provided, the activator slot is not rendered and click events are attached programmatically to the referenced element. |
 | `adaptive` | `boolean \| undefined` | ``config.adaptive` (`true`)` |  | On mobile (below `config.mobileMaxWidth`), renders as a bottom sheet instead of a floating panel, with the same `header`, `default` and `footer` slots. `width` is ignored there: size the sheet with `offCanvasProps`. Unset: the global `config.adaptive`. |
-| `boundary` | `ElementOrComponentRefOrSelector \| undefined` |  |  | Constrains the popover within a bounding element. When provided, the popover will not overflow this container's bounds (e.g. a sidebar). Accepts an HTMLElement, a Vue component ref, or a CSS selector string. |
+| `boundary` | `ElementOrComponentRefOrSelector \| undefined` |  |  | Constrains the popover within a bounding element: it stays inside it alongside its trigger (sideways for a popover above or below); away from the trigger it may pass the edge, and it flips at the viewport only. Accepts an HTMLElement, a Vue component ref, or a CSS selector string. |
 | `disabled` | `boolean \| undefined` | `false` |  | Disables the component. |
 | `eager` | `boolean \| undefined` | `false` |  | Renders the panel's content at mount instead of on the first open (the phone sheet's too). |
 | `focusTarget` | `string \| undefined` |  |  | Selector for the element that receives focus after opening. Defaults to the first focusable element inside the popover. |

package/dist/ai/BbSelectPopover.md

@@ -1758,7 +1758,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 | `ariaDescribedby` | `string \| string[] \| undefined` |  |  | Space-separated IDREF(s) that describe this field for assistive technologies. Accepts either a string or array of ids. |
 | `ariaInvalid` | `boolean \| undefined` | `undefined` |  | Explicit invalid state for accessibility semantics. Falls back to `hasErrors` when not provided. |
 | `autocomplete` | `string \| undefined` | `"off"` |  | Browser autocomplete hint for the popover search input. |
-| `boundary` | `string \| Record<string, any> \| HTMLElement \| null \| undefined` |  |  | Constrains the popover to a specific boundary element. |
+| `boundary` | `string \| Record<string, any> \| HTMLElement \| null \| undefined` |  |  | Constrains the popover to a specific boundary element: it stays inside it alongside its trigger (sideways for a popover above or below); away from the trigger it may pass the edge, and it flips at the viewport only. |
 | `clearable` | `boolean \| undefined` | `false` |  | Shows a clear button in the search field, in the lens' place while there is a query or a selection; it resets both. None without a search field. Leave it off when the activator already clears (as BbSelect's does). |
 | `compact` | `boolean \| undefined` | `false` |  | Apply the compact density variant. |
 | `dependencies` | `unknown[] \| undefined` | `[]` |  | Additional dependencies that trigger item reloading when changed. |