bitboss-ui 3.0.0-beta.65 → 3.0.0-beta.67

package/dist/ai/BbBaseButton.md

@@ -56,8 +56,10 @@ in this priority order:
    `NuxtLink` (Nuxt), or the Inertia `Link` — resolved for you from the active
    framework.
 2. **Anchor `<a>`** — when `href` is set but the above doesn't apply: external or
-   cross-origin URLs, any `href` with a `target`, or a disabled `to` link (kept
-   as an anchor for correct link semantics).
+   cross-origin URLs, a fragment (`href="#actions"`), any `href` with a
+   `target`, or a disabled `to` link (kept as an anchor for correct link
+   semantics). Those need no `external`: it is for a same-origin route the
+   router must not take.
 3. **Native `<button>`** — the default when there is no `href`/`to`. Polymorphic
    via `tag` (below), but a real `<button>` unless you say otherwise.
 
@@ -73,21 +75,21 @@ primitive brings no look of its own):
 	<div class="flex flex-wrap items-center gap-2 text-sm">
 		<!-- No href/to → a native <button>. -->
 		<BbBaseButton
-			class="rounded-(--bb-radius) bg-(--bb-primary) px-3 py-1.5 text-(--bb-primary-fg) focus-visible:ring-2 focus-visible:ring-(--bb-ring)"
+			class="rounded-(--bb-radius) bg-(--bb-primary) px-3 py-1.5 text-(--bb-primary-fg) focus-visible:outline-(--bb-ring)"
 			@click="pinged = true"
 		>
 			Native button
 		</BbBaseButton>
 		<!-- Same-origin href → an <a>. -->
 		<BbBaseButton
-			class="rounded-(--bb-radius) px-3 py-1.5 text-(--bb-primary) underline focus-visible:ring-2 focus-visible:ring-(--bb-ring)"
+			class="rounded-(--bb-radius) px-3 py-1.5 text-(--bb-primary) underline focus-visible:outline-(--bb-ring)"
 			href="#docs"
 		>
 			Anchor link
 		</BbBaseButton>
 		<!-- href + target → a plain <a target="_blank"> with rel secured. -->
 		<BbBaseButton
-			class="rounded-(--bb-radius) px-3 py-1.5 underline focus-visible:ring-2 focus-visible:ring-(--bb-ring)"
+			class="rounded-(--bb-radius) px-3 py-1.5 underline focus-visible:outline-(--bb-ring)"
 			href="https://example.com"
 			target="_blank"
 		>
@@ -117,19 +119,21 @@ scaffold, `cursor` and transitions), `bb-base-button--block` and
 library button, tab, row and menu item draws on, and each of those paints its
 own focus; a native outline would sit on top of all of them. So a bare
 `BbBaseButton` shows **no keyboard focus until you style it**. Every class you
-give it needs a `:focus-visible` style too; the library's own ring is one
-utility pair:
+give it needs a `:focus-visible` style too. The base already draws a 2px
+transparent outline (the ring scaffold), so the library's own ring is one
+utility that colours it:
 
 ```vue
 <BbBaseButton
-	class="rounded-(--bb-radius) px-3 py-1.5 focus-visible:ring-2 focus-visible:ring-(--bb-ring)"
+	class="rounded-(--bb-radius) px-3 py-1.5 focus-visible:outline-(--bb-ring)"
 >
 	Save
 </BbBaseButton>
 ```
 
-The ring animates in through the base's `box-shadow` transition (that is the
-scaffold). There is **no padding, background, border, or
+The ring fades in through the base's `outline-color` transition (that is the
+scaffold), as the library's own rings do: an outline, never a `box-shadow`, so
+a shadow you set on the element never takes the ring with it. There is **no padding, background, border, or
 variant appearance** — that is the whole point. It sets **no text color**, so a
 `text-*` utility on the element just works with no specificity fight; the text
 inherits from its container (in anchor mode, the browser's blue-and-underlined
@@ -146,7 +150,7 @@ the right base for a clickable card or a bespoke nav item:
 	<!-- Styled entirely by utility classes — neutral hover chrome. -->
 	<BbBaseButton
 		href="#b"
-		class="rounded-(--bb-radius) border border-(--bb-border) px-3 py-1 font-medium hover:bg-(--bb-hover) focus-visible:ring-2 focus-visible:ring-(--bb-ring)"
+		class="rounded-(--bb-radius) border border-(--bb-border) px-3 py-1 font-medium hover:bg-(--bb-hover) focus-visible:outline-(--bb-ring)"
 	>
 		Branded pill
 	</BbBaseButton>
@@ -172,7 +176,7 @@ stay outside the link:
 		<article
 			v-for="project in projects"
 			:key="project.name"
-			class="relative flex flex-col items-start gap-1.5 rounded-(--bb-radius) border border-(--bb-border) bg-(--bb-panel) p-3 hover:bg-(--bb-surface-hover) has-focus-visible:ring-2 has-focus-visible:ring-(--bb-ring)"
+			class="relative flex flex-col items-start gap-1.5 rounded-(--bb-radius) border border-(--bb-border) bg-(--bb-panel) p-3 hover:bg-(--bb-surface-hover) has-focus-visible:outline-2 has-focus-visible:outline-(--bb-ring)"
 		>
 			<span class="flex w-full items-center justify-between gap-2">
 				<span
@@ -236,9 +240,9 @@ const projects: Project[] = [
 - **Optional links:** render the overlay only when there is a destination
   (`v-if="href"`); the card needs no other change — no `tag` switching.
 - **Focus:** the overlay is invisible, so show focus on the card
-  (`has-focus-visible:ring-2 has-focus-visible:ring-(--bb-ring)`) and drop it
-  from the overlay (`outline-none`; the primitive's own ring scaffold is
-  zero-width until you style it).
+  (`has-focus-visible:outline-2 has-focus-visible:outline-(--bb-ring)`) and
+  drop it from the overlay (`outline-none`, so the scaffold's transparent
+  outline never paints).
 
 ### Label
 
@@ -450,7 +454,7 @@ When it renders as a native button you can retune the element:
 		</p>
 		<BbBaseButton
 			block
-			class="rounded-(--bb-radius) bg-(--bb-primary) px-3 py-1.5 text-sm text-(--bb-primary-fg) focus-visible:ring-2 focus-visible:ring-(--bb-ring)"
+			class="rounded-(--bb-radius) bg-(--bb-primary) px-3 py-1.5 text-sm text-(--bb-primary-fg) focus-visible:outline-(--bb-ring)"
 			type="submit"
 		>
 			Create workspace
@@ -520,7 +524,8 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 - `tag="div"`/`tag="span"` throws away native button semantics — only do it when a
   `<button>` is genuinely invalid, and restore keyboard/focus behavior yourself.
 - Style the focus state: the base removes the browser's ring and provides only
-  a _scaffold_ (`box-shadow`/`outline` transitions), so a class without a
+  a _scaffold_ (a transparent 2px outline and its colour transition), so a
+  class without a
   `:focus-visible` style ships an invisible keyboard focus. See "It removes the
   browser's focus ring" above.
 
@@ -544,7 +549,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: `root`. States: `activeLink`, `disabled`, `exactActiveLink`. 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 `BbBaseButtonProps['pt']` (`PtValue` is not exported): § Typing `pt` in `<script>`. |
 | `activeClass` | `string \| undefined` | `'router-link-active'` |  | CSS class applied when the component renders as a link and the target of the link is the current route or the url matches partially. Ported for Inertia compatibility. |
-| `ariaCurrentValue` | `"page" \| "step" \| "location" \| "date" \| "time" \| "true" \| "false" \| undefined` | `'page'` |  | Value forwarded to the `aria-current` attribute when the component renders as a router link and the target route is an exact match. Use to communicate the current location to assistive technologies. |
+| `ariaCurrentValue` | `"time" \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| undefined` | `'page'` |  | Value forwarded to the `aria-current` attribute when the component renders as a router link and the target route is an exact match. Use to communicate the current location to assistive technologies. |
 | `async` | `boolean \| undefined` | `false` |  | Inertia: runs the visit without blocking — the page stays interactive and several async visits can be in flight at once. |
 | `block` | `boolean \| undefined` | `false` |  | Makes the component take the full available width (block-level layout) and centres its label; an anchor becomes `display: block` so the width applies. Adds the `bb-base-button--block` modifier class. |
 | `cacheFor` | `string \| number \| (string \| number)[] \| undefined` |  |  | Inertia: how long a prefetched response stays fresh before it is re-fetched. A single duration, or `[staleAfter, expiresAfter]`. Typed platform-agnostically (matching BbButton) so the library's types never require `@inertiajs/vue3` to be installed. |
@@ -557,7 +562,7 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 | `except` | `string[] \| undefined` |  |  | Inertia: the inverse of `only` — properties to EXCLUDE from a partial reload. Pass one or the other, not both. |
 | `external` | `boolean \| undefined` | `false` |  | Forces an `href` link to render as a plain `<a>` (native navigation), bypassing Inertia/router interception, as Nuxt's `NuxtLink` `external` does. For links outside the SPA; a native-anchor signal alongside `target` and `download`. |
 | `headers` | `object \| undefined` |  |  | Additional HTTP headers forwarded to Inertia when navigating via `href` in an Inertia-enabled app. |
-| `href` | `string \| undefined` |  |  | Hyperlink reference used when rendering as an anchor (or as an Inertia link in Inertia-enabled apps). If provided and not disabled, the component renders as an anchor/Inertia link. |
+| `href` | `string \| { url: string; method: "get" \| "post" \| "put" \| "patch" \| "delete"; } \| undefined` |  |  | The link target: renders an anchor (an Inertia `<Link>` under Inertia). Also takes Inertia's `{ url, method }`, a Wayfinder route: Inertia visits with its method; elsewhere the link is its `url`. |
 | `instant` | `boolean \| undefined` | `false` |  | Inertia: navigate optimistically on click and reconcile when the response lands, instead of waiting for the round trip. |
 | `method` | `"get" \| "post" \| "put" \| "patch" \| "delete" \| undefined` |  |  | HTTP method used for Inertia navigation when `href` is provided in an Inertia-enabled app. Ignored otherwise: an Inertia POST visit is `href="/orders/5/archive" method="post"`, never `to` (a `to` link is a Vue Router link and sends no method). |
 | `onBefore` | `(() => void) \| undefined` |  |  | Lifecycle hook invoked by Inertia right before the request is sent. |
@@ -582,8 +587,8 @@ A `pt` value written in `<script>` (a constant, a preset, a wrapper's
 | `tag` | `'button'` \| `'div'` \| `'span'` \| `'label'` | `'button'` |  | Element of the plain (non-link) button: `'button'` (default), `'div'` / `'span'` (a clickable box inside a button or link) or `'label'` (a file-upload trigger). Ignored with `href` / `to`. Off `button`, native `type` / `disabled` drop (disabled stays a class). |
 | `target` | `string \| undefined` |  |  | Target browsing context for anchor/Inertia links (e.g. `_self`, `_blank`). Ignored when rendering as a native button. |
 | `text` | `string \| undefined` |  |  | Fallback text content rendered when no default slot is provided. |
-| `to` | `string \| wt \| bt \| undefined` |  |  | Route location to navigate to. When provided (and not disabled), the component renders as a Vue Router link. |
-| `type` | `"button" \| "submit" \| "reset" \| undefined` | `"button"` |  | Native `type` attribute used when rendering as a button (e.g. `button`, `submit`, `reset`). |
+| `to` | `string \| et \| X \| undefined` |  |  | Route location to navigate to. When provided (and not disabled), the component renders as a Vue Router link. |
+| `type` | `"button" \| "reset" \| "submit" \| undefined` | `"button"` |  | Native `type` attribute used when rendering as a button (e.g. `button`, `submit`, `reset`). |
 | `viewTransition` | `boolean \| undefined` | `false` |  | Inertia: run the page swap inside a View Transition, where the browser supports one. |
 
 ## Passthrough parts and states

package/dist/ai/BbBaseCheckboxIcon.md

@@ -294,6 +294,7 @@ Set these on the element, or on a class you put on it, to retune this component
 | `--elev` | `var(--bb-elev-sm)` | Resting lift; a no-op until a theme pins `--bb-elev`. |
 | `--bg` | `var(--bb-panel)` | The glyph plate. DECLARED here, not consumed bare, because this glyph renders inside surfaces that declare `--bg` themselves — a table row or header cell, a dialog, an off-canvas sheet. Without the declaration it would inherit that surface's fill, which happens to match at the shipped default and would diverge the moment anyone writes `.my-table { --bg: … }`. Identical to the raw tokens it replaces at every theme. |
 | `--border-color` | `var(--bb-border)` | Resting border colour of the glyph; re-pointed by error and warning states. |
+| `--ring-t` | `var(--bb-transition-medium)` |  |
 
 ## See Also
 

package/dist/ai/BbBaseRadioIcon.md

@@ -306,6 +306,7 @@ Set these on the element, or on a class you put on it, to retune this component
 | `--elev` | `var(--bb-elev-sm)` | Same resting lift as the checkbox glyph — see BbBaseCheckboxIcon. |
 | `--bg` | `var(--bb-panel)` | The glyph plate. DECLARED here, not consumed bare, because this glyph renders inside surfaces that declare `--bg` themselves — a table row or header cell, a dialog, an off-canvas sheet. Without the declaration it would inherit that surface's fill, which happens to match at the shipped default and would diverge the moment anyone writes `.my-table { --bg: … }`. Identical to the raw tokens it replaces at every theme. |
 | `--border-color` | `var(--bb-border)` |  |
+| `--ring-t` | `var(--bb-transition-medium)` |  |
 
 ## See Also
 

package/dist/ai/BbBaseSwitchIcon.md

@@ -307,6 +307,7 @@ Set these on the element, or on a class you put on it, to retune this component
 | `--thumb` | `min(16px, calc(var(--h) - 2 * var(--bw)))` | Capped by the track's inner height, so a thick-hairline theme shrinks the thumb instead of overflowing it. Unclamped, a 6px plate hairline leaves a 12px inner track carrying a 16px thumb; `--inset` then goes negative and the thumb paints over its own border. `16px` at every hairline the library ships, so no shipped pixel moves. Do NOT floor `--inset` at 0 instead: that keeps the oversized thumb and pushes it out of the bottom of the track (measured +1px protrusion at a 6px hairline), and it uncancels `--bw` from `--travel`, which is a constant 14px by construction. |
 | `--inset` | `calc((var(--h) - 2 * var(--bw) - var(--thumb)) / 2)` | Equal gap around the thumb — centres it vertically by construction, and is reused as the resting left/right inset. |
 | `--travel` | `calc(var(--w) - 2 * var(--bw) - var(--thumb) - 2 * var(--inset))` | How far the thumb slides between off and on (inset ↔ inset). |
+| `--ring-t` | `var(--bb-transition-medium)` |  |
 
 ## See Also
 

package/dist/ai/BbBreadcrumbs.md

@@ -717,7 +717,7 @@ States are listed in precedence order: when two are on at once and their entries
 | State | When it is on |
 | --- | --- |
 | `disabled` | Per node: a crumb that is disabled on its own; component-wide while the whole component is `disabled`. |
-| `active` | Per node, on each crumb's `item` / `text`: the current page — the last crumb, when it has no target (`href` / `to` / `onClick`). |
+| `active` | Per node, on each crumb's `item` / `text` / `icon`: the current page — the last crumb, when it has no target (`href` / `to` / `onClick`). |
 
 ## Events
 
@@ -735,6 +735,14 @@ States are listed in precedence order: when two are on at once and their entries
 - `#<value>:prepend` (named from data) — scope: `BbBreadcrumbsItemSlotProps` — The glyph before one crumb's label; beats `item:prepend`, which beats its `prepend:icon`.
 - `#<value>:append` (named from data) — scope: `BbBreadcrumbsItemSlotProps` — The glyph after one crumb's label; beats `item:append`, which beats its `append:icon`.
 
+## CSS custom properties
+
+Set these on the element, or on a class you put on it, to retune this component alone — the sanctioned alternative to reaching past the API with `:deep()`. They are this component's own locals — a **Set on** of `pt:<part>` means the local lives on that part's element, so set it through that entry (`pt:box="[--border-color:var(--color-green-500)]"`); the global `--bb-*` theme tokens are a separate tier (see the [design-tokens guide](./guides/design-tokens.md), or the MCP `list_tokens` tool).
+
+| Property | Default | What it is |
+| --- | --- | --- |
+| `--ring-t` | `var(--bb-transition-medium)` |  |
+
 ## Component tree
 
 `BbBreadcrumbs` is not one component: rendering it mounts every component below, and each one is live inside it. **Read this before styling, theming or debugging `BbBreadcrumbs`, and before concluding a part, a token or a behaviour does not exist** — it may live on a component further down. How to read it:

package/dist/ai/BbButton.md

@@ -104,6 +104,10 @@ bitbossUi({ buttonVariants: ['upgrade'] });
 export default defineNuxtConfig({ bitboss: { buttonVariants: ['upgrade'] } });
 ```
 
+Retint through these locals, never colour utilities on the button
+(`bg-* text-* border-*`): a utility paints one colour over every state, so
+hover, pressed, disabled and focus all look the same.
+
 The library ships **no CSS for registered variants**: style
 `.bb-button--upgrade` yourself by re-pointing the same locals the built-ins
 use. The root paints rest, hover, press and focus from these, so you never
@@ -160,7 +164,11 @@ primary has no room left, as the default black in light and white in dark
 do: hover is always visible and never sinks into the surface. Pressed takes
 the same move with a larger 1.6:1 step, so it is always the strongest state
 and never equals rest, and a pressed toggle keeps its pressed fill under
-keyboard focus, with the focus ring still showing. The built-in primary
+keyboard focus, with the focus ring still showing. Any BbButton carrying
+`aria-expanded="true"` (menus, popovers, collapsible triggers, row
+expanders) takes the pressed paint while open, since focus has usually moved
+into what it opened; a BbButton without the attribute never does. The
+built-in primary
 moves its frame with the hover and pressed fills and,
 where `contrast-color()` exists, picks each state's label for its own fill
 (a white label on a mid blue can turn dark on the lighter dark-scheme
@@ -278,6 +286,10 @@ no wrapper of your own (`<BbButton>Synced <span class="dot" /></BbButton>`).
 A plain text label is untouched. Wrap rich text in one element
 (`<span>Save <b>all</b></span>`) to keep it one sentence; unwrapped, the `<b>`
 is a child of its own and sits the gap away.
+The label stays on one line: a button with too little room (a full toolbar, a
+narrow card) shrinks and ends its label in "…", the icons kept whole. Several
+children are clipped at the end, not ellipsed, so put a count or a shortcut
+that must stay visible in `append:icon` or next to the button.
 `type` defaults to `'button'`, so a `BbButton` inside a form never submits by
 accident; set `type="submit"` for the one that should, and let the form's
 `@submit` handler own the logic:
@@ -321,6 +333,17 @@ fields — and being the default, you simply omit the `size` prop. Use
 bulk-action bars) and `lg`+ only for a rare hero action. `block` stretches
 the button to its container's width (e.g. mobile CTAs, dialog footers).
 
+Which button sits flush with which field (measured in the default theme; fields
+and choice strips have no `size`, only `compact`):
+
+| Beside                                                                  | Height | Flush button       |
+| ----------------------------------------------------------------------- | ------ | ------------------ |
+| A field (text, number, select, date…) or a `pill` / `line` choice strip | 32px   | `lg`               |
+| The same, `compact`                                                     | 28px   | `md` (the default) |
+
+A strip to match a smaller button is retuned with its own locals (`--list-h`,
+`--fs`, `--p`, …: BbRadioGroup § Segmented control).
+
 **Stretch ≠ `block`.** A flex-column parent (`flex flex-col`) stretches its
 children on the cross axis by default, so a bare `BbButton` dropped into one
 looks exactly as wide as a `block` button even though `block` was never set —
@@ -661,7 +684,7 @@ Escape hatches, when the default isn't right:
   own: promise tracking (e.g. the handler opens a dialog and you don't want a
   spinner flash) and a `type="submit"` button's spin while its `BbForm` saves.
   Only an explicit `loading` shows the spinner then. A click that awaits a
-  dialog (`await useBbDialogContext(id).show()`, `await confirm()`) spins
+  dialog (`await useBbDialog(id).show()`, `await confirm()`) spins
   until the dialog settles, like any async click: that is where this prop
   goes.
 - `interactive-while-loading` — keeps the button clickable while it shows the
@@ -916,6 +939,35 @@ never arrived — offline, DNS, connection reset), are **`router.visit()` /
 does nothing. Reach for a form or an explicit visit when you need to tell those
 apart — see the Inertia helpers guide.
 
+**A spinner for a write that is not a form submit** (resend an invite): an
+`href` + `method` visit shows no loading state, and
+`@click="router.post(url)"` returns nothing to wait on. Return the visit as a
+promise from `@click` instead, and the button spins until the server answers,
+with no `loading` flag of your own: the Inertia helpers' `usePromiseRouter`
+(`usePromiseForm` for a form; Inertia helpers guide § usePromiseRouter):
+
+```ts
+const visits = usePromiseRouter();
+const { toast } = useToast();
+// Catch the rejection: the error bag itself, or an Error (a 500, offline).
+const resend = () =>
+	visits
+		.post(`/users/${id}/invite`)
+		.catch(() =>
+			toast({ title: 'Not sent. Try again.', variant: 'destructive' })
+		);
+// <BbButton @click="resend">Resend invite</BbButton>
+```
+
+**Laravel Wayfinder routes go in as they are.** `href` also takes Inertia's
+`{ url, method }`, what a Wayfinder route returns (the default in Laravel's
+starter kits), so there is no `.url` to split off and no wrapper:
+`<BbButton :href="destroy(user)">Delete</BbButton>` visits with `delete`. The
+pair's `method` wins over a `method` prop, as on Inertia's `<Link>`. The same
+holds for a breadcrumb item's or a dropdown row's `href`. Outside Inertia (a
+plain `<a>`, Nuxt) the link is the pair's `url`, and a method other than
+`get` is ignored, as the `method` prop is: a plain link cannot post.
+
 Every prop Inertia's own `<Link>` accepts is forwarded, and
 `npm run check:inertia-props` fails the build both when Inertia adds one we
 don't forward and when we declare a callback `<Link>` never accepted. The list
@@ -951,8 +1003,8 @@ object form, a style and attributes — optionally only while a state is on.
 Parts: `root` (the button), `icon` (every content icon the button renders:
 `icon`, `prepend:icon`, `append:icon` — a broadcast), `spinner`, `text` (the
 label span). Typography inherits from `root`, so reach for `text` only when a
-class must apply to the label ALONE — `truncate` on a long label that must not
-clip the icons beside it. That span also carries the margin the label slides by
+class must apply to the label ALONE — a mono font, say (it already ends a long
+label in "…" without clipping the icons beside it). That span also carries the margin the label slides by
 while the spinner is in, so a margin of your own fights the slide. States:
 `loading`, `disabled`, `pressed` (a `v-model` toggle that is on), and on a
 link `activeLink` / `exactActiveLink` (it points at the current page: see
@@ -1034,9 +1086,9 @@ utility wins. What works in every build:
 
 - `BbDropdownButton` — escalate to it when a primary action grows close
   alternates; it shares this component's `variant`/`size`/loading language.
-- `useConfirm` — gate every `destructive` button behind a confirm: mount the
-  `<BbHost />` once (app root), `await confirm(...)` in the handler and
-  act only on a yes. The dialog's own buttons are `BbButton` configs (see the
+- `useConfirm` — gate every `destructive` button behind a confirm:
+  `await confirm(...)` in the handler and act only on a yes (the plugin's
+  `<BbHost />` renders it, nothing to mount). The dialog's own buttons are `BbButton` configs (see the
   composable doc), so the confirm speaks the same `variant`/icon language:
 
 **Destructive action gated behind useConfirm**
@@ -1074,18 +1126,11 @@ utility wins. What works in every build:
 		<p v-if="keys.length === 0" class="text-xs text-(--bb-text-muted)">
 			No active keys.
 		</p>
-
-		<!--
-			Standalone example: it mounts its own host because it has no app root.
-			A real app mounts exactly one <BbHost /> at the app root, and pages
-			mount none. See ai/guides/agent-contract.md § Global Host Rule.
-		-->
-		<BbHost />
 	</div>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import { BbButton, BbHost, useConfirm } from 'bitboss-ui';
+import { BbButton, useConfirm } from 'bitboss-ui';
 
 type ApiKey = { id: string; label: string; masked: string; created: string };
 
@@ -1189,6 +1234,12 @@ Anti-patterns:
 
 ### Accessibility
 
+- On a touch screen (`pointer: coarse`) an invisible hit area takes a button
+  to 44×44 without moving anything you see. It stops short of a neighbour: the
+  full 44px with no element beside the button, 4px a side when one sits next
+  to it (keep 8px between touch controls and the areas meet in the gap), none
+  across a `group`'s shared edge, a table cell's padding in a table, and none
+  on `variant="link"`. A mouse gets the visual box only.
 - Icon-only buttons still need an accessible name, but it works like any other
   button: put it in the default slot (or `text`) and it renders visually hidden (`bb-sr-only`) when
   `icon` is set — not removed. Use `aria-label` only to override that name, not
@@ -1220,7 +1271,7 @@ Anti-patterns:
 | `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`, `root`, `spinner`, `text`. States: `activeLink`, `destructive`, `disabled`, `exactActiveLink`, `ghost`, `link`, `loading`, `outline`, `pressed`, `primary`, `secondary`. 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 `BbButtonProps['pt']` (`PtValue` is not exported): § Typing `pt` in `<script>`. |
 | `activeClass` | `string \| undefined` |  |  | Class to apply when the link is active. |
 | `append:icon` | `string \| undefined` |  |  | Icon to be added on the right of the text. |
-| `ariaCurrentValue` | `"page" \| "step" \| "location" \| "date" \| "time" \| "true" \| "false" \| undefined` | `'page'` |  | Value passed to the attribute `aria-current` when the link is exact active. |
+| `ariaCurrentValue` | `"time" \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| undefined` | `'page'` |  | Value passed to the attribute `aria-current` when the link is exact active. |
 | `async` | `boolean \| undefined` | `false` |  | Inertia: runs the visit without blocking — the page stays interactive and several async visits can be in flight at once. |
 | `block` | `boolean \| undefined` | `false` |  | Displays the component as full width. |
 | `cacheFor` | `string \| number \| (string \| number)[] \| undefined` |  |  | Inertia: how long a prefetched response stays fresh before it is re-fetched. A single duration, or `[staleAfter, expiresAfter]`. Typed platform-agnostically (matching BbButton) so the library's types never require `@inertiajs/vue3` to be installed. |
@@ -1236,7 +1287,7 @@ Anti-patterns:
 | `falseValue` | `any` | `false` |  | Value emitted when the toggle is deactivated. |
 | `group` | `boolean \| undefined` | `false` |  | Identifies the button as part of a button group: adjacent `group` buttons fuse into one segment (shared borders and radius). Adjacent `group` toggles (each with a `v-model`) are also one Tab stop, with ArrowLeft / ArrowRight / Home / End moving between them. |
 | `headers` | `object \| undefined` |  |  | Additional HTTP headers forwarded to Inertia when navigating via `href` in an Inertia-enabled app. |
-| `href` | `string \| undefined` |  |  | Returns the hyperlink's URL. Can be set, to change the URL. |
+| `href` | `string \| { url: string; method: "get" \| "post" \| "put" \| "patch" \| "delete"; } \| undefined` |  |  | The link target: renders an anchor (an Inertia `<Link>` under Inertia). Also takes Inertia's `{ url, method }`, a Wayfinder route: Inertia visits with its method; elsewhere the link is its `url`. |
 | `icon` | `string \| undefined` |  |  | Used when only an icon with no text should be displayed. |
 | `instant` | `boolean \| undefined` | `false` |  | Inertia: navigate optimistically on click and reconcile when the response lands, instead of waiting for the round trip. |
 | `interactiveWhileLoading` | `boolean \| undefined` | `false` |  | Keeps the button clickable while it is loading. Buttons are disabled while loading by default; this escape hatch exists for toggles that must stay interactive (e.g. the dropdown-button caret). |
@@ -1266,9 +1317,9 @@ Anti-patterns:
 | `tag` | `'button'` \| `'div'` \| `'span'` \| `'label'` | `'button'` |  | Element to render for the plain (non-link, non-router) button: `'button'` (default), `'div'`/`'span'` when nesting inside another button or link, or `'label'` for a file-upload trigger. Ignored when `href`/`to` make the button render as a link. |
 | `target` | `string \| undefined` |  |  | Sets or retrieves the window or frame at which to target content. |
 | `text` | `string \| undefined` |  |  | Text content of the component. |
-| `to` | `string \| wt \| bt \| undefined` |  |  | Route Location the link should navigate to when clicked on. |
+| `to` | `string \| et \| X \| undefined` |  |  | Route Location the link should navigate to when clicked on. |
 | `trueValue` | `any` | `true` |  | Value emitted when the toggle is activated. |
-| `type` | `"button" \| "submit" \| "reset" \| undefined` |  |  | Gets the classification and default behavior of the button. |
+| `type` | `"button" \| "reset" \| "submit" \| undefined` |  |  | Gets the classification and default behavior of the button. |
 | `variant` | `'outline'` \| `'primary'` \| `'destructive'` \| `'secondary'` \| `'none'` \| `'ghost'` \| `'link'` | `"primary"` |  | Visual variant of the button: colours and surface only, never spacing or size. `'none'` takes no look (you own hover, focus and disabled); register a real one with the plugin's `buttonVariants` and style `.bb-button--<name>` (no CSS ships for it). |
 | `viewTransition` | `boolean \| undefined` | `false` |  | Inertia: run the page swap inside a View Transition, where the browser supports one. |
 
@@ -1364,7 +1415,7 @@ Set these on the element, or on a class you put on it, to retune this component
 | `--gap` | `var(--gap-md)` | between icon and label |
 | `--bg` | `transparent` | the plate |
 | `--bg-hover` | `var(--bg)` | also the focus-visible fill; no change by default |
-| `--bg-pressed` | `var(--bg)` | fill while [aria-pressed='true'] |
+| `--bg-pressed` | `var(--bg)` | fill while pressed, or open (aria-expanded) |
 | `--fg` | `initial` | label and icons (icons paint currentColor) |
 | `--border-color` | `transparent` | the frame; its width is --bw |
 | `--ring-color` | `transparent` | focus ring colour, per variant |
@@ -1372,12 +1423,13 @@ Set these on the element, or on a class you put on it, to retune this component
 | `--bw` | `var(--bb-border-w)` | border width |
 | `--fg-hover` | `var(--fg)` | label and icons on hover (and focus-visible) |
 | `--border-hover` | `var(--border-color)` | the frame on hover (and focus-visible) |
-| `--fg-pressed` | `var(--fg)` | label and icons while [aria-pressed='true'] |
-| `--border-pressed` | `var(--border-color)` | the frame while [aria-pressed='true'] |
+| `--fg-pressed` | `var(--fg)` | label and icons while pressed or open |
+| `--border-pressed` | `var(--border-color)` | the frame while pressed or open |
 | `--bg-disabled` | `var(--bb-muted)` | the plate while disabled (not loading) |
 | `--fg-disabled` | `color-mix(in oklab, var(--bb-text) 45%, var(--bb-panel))` | label and icons while disabled |
 | `--border-disabled` | `var(--bb-muted)` | the frame while disabled |
 | `--opacity-disabled` | `1` | whole-button opacity while disabled — `.5` with the three above set to the resting tokens gives "fade instead of grey" |
+| `--ring-t` | `var(--bb-transition-medium)` |  |
 | `--elev-tier` | `var(--bb-elev)` | the shadow a plate variant may take |
 | `--elev` | `0 0 0 0 transparent` | the shadow painted; flat variants keep this |