bitboss-ui 3.0.0-beta.21 → 3.0.0-beta.22

package/dist/ai/BbBreadcrumbs.md

@@ -68,19 +68,19 @@ route paths or `to`.
 ```vue
 <template>
 	<div
-		class="max-w-md overflow-hidden rounded-[var(--bb-radius)] border border-[color:var(--bb-border)]"
+		class="max-w-md overflow-hidden rounded-(--bb-radius) border border-(--bb-border)"
 	>
-		<div class="space-y-2 border-b border-[color:var(--bb-border)] p-3">
+		<div class="space-y-2 border-b border-(--bb-border) p-3">
 			<BbBreadcrumbs :items="trail" :offset-width="54" />
 			<div class="flex flex-col gap-0.5">
 				<p class="text-sm font-medium">Members</p>
-				<p class="text-xs text-[color:var(--bb-text-muted)]">
+				<p class="text-xs text-(--bb-text-muted)">
 					Northwind Billing · invite and manage workspace access.
 				</p>
 			</div>
 		</div>
 
-		<ul class="divide-y divide-[color:var(--bb-border)] px-3">
+		<ul class="divide-y divide-(--bb-border) px-3">
 			<li
 				v-for="member in members"
 				:key="member.email"
@@ -88,11 +88,11 @@ route paths or `to`.
 			>
 				<span class="min-w-0 truncate">
 					<span class="font-medium">{{ member.name }}</span>
-					<span class="text-xs text-[color:var(--bb-text-muted)]">
+					<span class="text-xs text-(--bb-text-muted)">
 						· {{ member.email }}</span
 					>
 				</span>
-				<span class="shrink-0 text-xs text-[color:var(--bb-text-muted)]">{{
+				<span class="shrink-0 text-xs text-(--bb-text-muted)">{{
 					member.role
 				}}</span>
 			</li>
@@ -228,7 +228,7 @@ When slot (or icon) content adds width the estimator cannot see, set
 	]"
 >
 	<template #prepend>
-		<span class="text-xs text-[color:var(--bb-text-muted)]">You are here</span>
+		<span class="text-xs text-(--bb-text-muted)">You are here</span>
 	</template>
 	<template #item:prepend="{ item }">
 		<BbIcon
@@ -249,19 +249,15 @@ at. Keep them `size="xs"` and account for them with `offset-width`:
 ```vue
 <template>
 	<div
-		class="max-w-md overflow-hidden rounded-[var(--bb-radius)] border border-[color:var(--bb-border)]"
+		class="max-w-md overflow-hidden rounded-(--bb-radius) border border-(--bb-border)"
 	>
 		<div
-			class="flex items-center gap-2 border-b border-[color:var(--bb-border)] px-2.5 py-1.5"
+			class="flex items-center gap-2 border-b border-(--bb-border) px-2.5 py-1.5"
 		>
-			<span
-				class="min-w-0 flex-auto truncate text-xs text-[color:var(--bb-text-muted)]"
-			>
+			<span class="min-w-0 flex-auto truncate text-xs text-(--bb-text-muted)">
 				acme-ui / src / components
 			</span>
-			<span class="shrink-0 text-xs text-[color:var(--bb-text-muted)]"
-				>12.4 KB · TSX</span
-			>
+			<span class="shrink-0 text-xs text-(--bb-text-muted)">12.4 KB · TSX</span>
 		</div>
 
 		<div class="p-3">
@@ -326,7 +322,7 @@ keys that collide with the reserved slots (`prepend`, `append`, `divider`,
 	<template #release="{ text }">
 		<span class="inline-flex items-center gap-1.5">
 			<span
-				class="size-2 rounded-full bg-[color:var(--bb-primary)]"
+				class="size-2 rounded-full bg-(--bb-primary)"
 			></span>
 			{{ text }}
 		</span>
@@ -357,7 +353,7 @@ wider than `…`, pair it with `ellipsis-width`.
 		]"
 	>
 		<template #divider>
-			<span class="text-[color:var(--bb-text-muted)]">/</span>
+			<span class="text-(--bb-text-muted)">/</span>
 		</template>
 		<template #ellipsis="{ overflowCount }">
 			<span class="text-xs font-medium">+{{ overflowCount }}</span>
@@ -379,40 +375,33 @@ folded into the overflow menu keep their `onClick` too.
 ```vue
 <template>
 	<div
-		class="max-w-md overflow-hidden rounded-[var(--bb-radius)] border border-[color:var(--bb-border)]"
+		class="max-w-md overflow-hidden rounded-(--bb-radius) border border-(--bb-border)"
 	>
 		<div
-			class="flex items-center gap-1.5 border-b border-[color:var(--bb-border)] px-2.5 py-1.5"
+			class="flex items-center gap-1.5 border-b border-(--bb-border) px-2.5 py-1.5"
 		>
-			<BbIcon
-				class="text-[color:var(--bb-text-muted)]"
-				icon="lucide:folder"
-				size="sm"
-			/>
+			<BbIcon class="text-(--bb-text-muted)" icon="lucide:folder" size="sm" />
 			<span class="text-xs font-medium">Files</span>
-			<span class="ml-auto text-xs text-[color:var(--bb-text-muted)]"
-				>northwind-docs</span
-			>
+			<span class="ml-auto text-xs text-(--bb-text-muted)">northwind-docs</span>
 		</div>
 
 		<div class="space-y-2 p-3">
 			<BbBreadcrumbs :items="items" :offset-width="iconOffset" />
-			<ul class="divide-y divide-[color:var(--bb-border)] text-sm">
+			<ul class="divide-y divide-(--bb-border) text-sm">
 				<li
 					v-for="entry in entries"
 					:key="entry.name"
 					class="flex items-center gap-1.5 py-1.5"
 				>
 					<BbIcon
-						class="shrink-0 text-[color:var(--bb-text-muted)]"
+						class="shrink-0 text-(--bb-text-muted)"
 						:icon="entry.kind === 'folder' ? 'lucide:folder' : 'lucide:file'"
 						size="sm"
 					/>
 					<span class="min-w-0 truncate">{{ entry.name }}</span>
-					<span
-						class="ml-auto shrink-0 text-xs text-[color:var(--bb-text-muted)]"
-						>{{ entry.meta }}</span
-					>
+					<span class="ml-auto shrink-0 text-xs text-(--bb-text-muted)">{{
+						entry.meta
+					}}</span>
 				</li>
 			</ul>
 		</div>
@@ -563,7 +552,7 @@ overflow calculation runs after hydration once real widths exist.
 | `ellipsisWidth` | `number \| undefined` |  |  | Explicit width used by the estimator for the ellipsis activator. |
 | `estimationBias` | `number \| undefined` | `1.12` |  | Multiplier applied to each estimated item width. A higher value will result in more over-estimation. |
 | `gapWidth` | `number \| undefined` | `4` |  | Horizontal gap between breadcrumb elements in pixels. |
-| `items` | `Item[]` |  | yes | Array of items that describe how the breadcrumbs should behave. Compatible with navigating through `a` or `router-link`. |
+| `items` | `BbBreadcrumbsItem[]` |  | yes | Array of items that describe how the breadcrumbs should behave. Compatible with navigating through `a` or `router-link`. |
 | `offsetWidth` | `number \| undefined` | `0` |  | Extra one-off width in pixels added to the total estimate (e.g. prepend/append/item slot content). |
 
 ## Events

package/dist/ai/BbButton.md

@@ -125,16 +125,16 @@ accident; set `type="submit"` for the one that should, and let the form's
 
 ```vue
 <form
-	class="flex max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-3"
+	class="flex max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-3"
 	@submit.prevent="state.sent = true"
 >
 	<div class="flex flex-col gap-0.5">
 		<span class="text-sm font-medium">Request workspace access</span>
-		<span class="text-xs text-[color:var(--bb-text-muted)]">Acme Studio · billing team</span>
+		<span class="text-xs text-(--bb-text-muted)">Acme Studio · billing team</span>
 	</div>
 	<div class="flex items-center gap-2">
 		<BbButton type="submit" variant="primary">Request access</BbButton>
-		<span class="text-xs text-[color:var(--bb-text-muted)]">
+		<span class="text-xs text-(--bb-text-muted)">
 			{{ state.sent ? 'Request sent — check your email.' : 'Owner will approve by email.' }}
 		</span>
 	</div>
@@ -201,7 +201,7 @@ padding, icon size and radius stay at the `default` entry's values.
 
 Use `prepend:icon` / `append:icon` for labelled buttons, and `icon` for
 icon-only buttons. Accessibility here is **symmetric**: the label content still
-matters, it is just rendered `sr-only` when `icon` is set. So give an icon-only
+matters, it is just rendered visually hidden (`bb-sr-only`) when `icon` is set. So give an icon-only
 button its accessible name the same way as any other — through the default slot
 (or `text`): `<BbButton icon="lucide:settings">Settings</BbButton>` renders no
 visible text but announces "Settings". `aria-label` is plan B — an override for
@@ -214,13 +214,13 @@ the `lucide:*` set (see the icons policy).
 
 ```vue
 <div
-	class="flex max-w-sm items-center justify-between gap-2 rounded-[var(--bb-radius)] border p-3"
+	class="flex max-w-sm items-center justify-between gap-2 rounded-(--bb-radius) border p-3"
 >
 	<span class="text-sm font-medium">Invoices</span>
 	<div class="flex items-center gap-1.5">
 		<BbButton variant="primary" prepend:icon="lucide:plus">New invoice</BbButton>
 		<BbButton variant="outline" append:icon="lucide:download">Export</BbButton>
-		<!-- Label comes from slot content, rendered sr-only — no aria-label needed. -->
+		<!-- Label comes from slot content, rendered visually hidden — no aria-label needed. -->
 		<BbButton variant="ghost" icon="lucide:settings">Settings</BbButton>
 	</div>
 </div>
@@ -286,12 +286,10 @@ own semantics, and there is no arrow-key roving between them.
 
 ```vue
 <template>
-	<div
-		class="flex max-w-md flex-col gap-3 rounded-[var(--bb-radius)] border p-3"
-	>
+	<div class="flex max-w-md flex-col gap-3 rounded-(--bb-radius) border p-3">
 		<div class="flex flex-col gap-0.5">
 			<span class="text-sm font-medium">Issues</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Acme workspace ·
 				{{
 					statusFilter
@@ -303,7 +301,7 @@ own semantics, and there is no arrow-key roving between them.
 		</div>
 
 		<div class="flex flex-col gap-1.5">
-			<span class="text-xs text-[color:var(--bb-text-muted)]">Status</span>
+			<span class="text-xs text-(--bb-text-muted)">Status</span>
 			<div>
 				<BbButton
 					v-for="status in statuses"
@@ -321,7 +319,7 @@ own semantics, and there is no arrow-key roving between them.
 		</div>
 
 		<div class="flex flex-col gap-1.5">
-			<span class="text-xs text-[color:var(--bb-text-muted)]">View</span>
+			<span class="text-xs text-(--bb-text-muted)">View</span>
 			<div>
 				<BbButton
 					v-for="view in views"
@@ -377,16 +375,10 @@ stays on as the accessible name:
 
 ```vue
 <template>
-	<div
-		class="flex max-w-sm flex-col gap-2 rounded-[var(--bb-radius)] border p-3"
-	>
+	<div class="flex max-w-sm flex-col gap-2 rounded-(--bb-radius) border p-3">
 		<div class="flex items-center justify-between gap-2">
-			<span class="text-xs font-medium text-[color:var(--bb-text-muted)]"
-				>Format</span
-			>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">{{
-				summary
-			}}</span>
+			<span class="text-xs font-medium text-(--bb-text-muted)">Format</span>
+			<span class="text-xs text-(--bb-text-muted)">{{ summary }}</span>
 		</div>
 		<div>
 			<BbButton
@@ -462,12 +454,10 @@ hand-placed `BbSpinner`.
 
 ```vue
 <template>
-	<div
-		class="flex max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-3"
-	>
+	<div class="flex max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-3">
 		<div class="flex flex-col gap-0.5">
 			<span class="text-sm font-medium">Invoice INV-1042</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Acme Studio · draft · due Jul 31, 2026
 			</span>
 		</div>
@@ -475,9 +465,7 @@ hand-placed `BbSpinner`.
 			<BbButton prepend:icon="lucide:save" variant="primary" @click="save">
 				Save changes
 			</BbButton>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">{{
-				status
-			}}</span>
+			<span class="text-xs text-(--bb-text-muted)">{{ status }}</span>
 		</div>
 	</div>
 </template>
@@ -507,7 +495,7 @@ Escape hatches, when the default isn't right:
   loading state, for controls that must stay interactive (this is how the
   `BbDropdownButton` caret stays usable while the primary action runs).
 
-The sr-only loading announcement is localized via the plugin's `locale`
+The visually-hidden loading announcement is localized via the plugin's `locale`
 option. `disabled` and `loading` are independent: `disabled` wins the muted
 styling and native blocking; don't set both.
 
@@ -515,11 +503,11 @@ styling and native blocking; don't set both.
 
 ```vue
 <div
-	class="flex max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-3"
+	class="flex max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-3"
 >
 	<div class="flex flex-col gap-0.5">
 		<span class="text-sm font-medium">Release notes</span>
-		<span class="text-xs text-[color:var(--bb-text-muted)]">v2.4.0 · draft in review</span>
+		<span class="text-xs text-(--bb-text-muted)">v2.4.0 · draft in review</span>
 	</div>
 	<div class="flex items-center gap-2">
 		<BbButton :loading="state.publishing" variant="primary">Publish</BbButton>
@@ -555,11 +543,11 @@ adapts to what you pass:
 
 ```vue
 <div
-	class="flex max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-3"
+	class="flex max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-3"
 >
 	<div class="flex flex-col gap-0.5">
 		<span class="text-sm font-medium">Q2 revenue report</span>
-		<span class="text-xs text-[color:var(--bb-text-muted)]">Ready · exported Jul 12, 2026</span>
+		<span class="text-xs text-(--bb-text-muted)">Ready · exported Jul 12, 2026</span>
 	</div>
 	<div class="flex flex-wrap items-center gap-1.5">
 		<BbButton variant="outline" href="#reports">View report</BbButton>
@@ -656,7 +644,12 @@ concern:
 - **Lifecycle hooks** — `onBefore`, `onStart`, `onProgress`, `onSuccess`,
   `onError`, `onCancel`, `onFinish`, plus `onCancelToken` to capture a cancel
   handle and `onPrefetching`/`onPrefetched` for the prefetch pair. Bind them as
-  props (`:on-success="..."`), not `@` listeners.
+  props (`:on-success="..."`), not `@` listeners. The listener spelling
+  (`@success`) does reach the same prop — Vue compiles it to an `onSuccess`
+  vnode entry and prop resolution claims it — but it is a trap, not a synonym:
+  a modifier (`@success.once`) has nothing to attach to, and a second handler
+  for the same name silently becomes an array the prop is not typed for.
+  `no-unknown-event` warns and names the prop form.
 
 **`onError` here means VALIDATION errors** — the ordinary 422 — and it is the
 only failure callback `<Link>` accepts. Inertia's other two,
@@ -707,12 +700,10 @@ library's public types are not allowed to import.
 
 ```vue
 <template>
-	<div
-		class="flex max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-3"
-	>
+	<div class="flex max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-3">
 		<div class="flex flex-col gap-0.5">
 			<span class="text-sm font-medium">API keys</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				<span data-count>{{ keys.length }}</span> active · revoking is immediate
 			</span>
 		</div>
@@ -724,7 +715,7 @@ library's public types are not allowed to import.
 		>
 			<div class="flex min-w-0 flex-1 flex-col">
 				<span class="truncate text-sm font-medium">{{ key.label }}</span>
-				<span class="font-mono text-xs text-[color:var(--bb-text-muted)]">
+				<span class="font-mono text-xs text-(--bb-text-muted)">
 					{{ key.masked }} · created {{ key.created }}
 				</span>
 			</div>
@@ -737,10 +728,7 @@ library's public types are not allowed to import.
 				Revoke
 			</BbButton>
 		</div>
-		<p
-			v-if="keys.length === 0"
-			class="text-xs text-[color:var(--bb-text-muted)]"
-		>
+		<p v-if="keys.length === 0" class="text-xs text-(--bb-text-muted)">
 			No active keys.
 		</p>
 
@@ -799,12 +787,12 @@ const revoke = async (key: ApiKey) => {
 
 ```vue
 <div
-	class="flex max-w-sm items-center justify-between gap-2 rounded-[var(--bb-radius)] border p-3"
+	class="flex max-w-sm items-center justify-between gap-2 rounded-(--bb-radius) border p-3"
 >
 	<span class="text-sm font-medium">Acme Studio</span>
 	<div class="flex items-center gap-1.5">
 		<BbIndicator :text="3" variant="destructive">
-			<!-- Accessible name from slot content, rendered sr-only. -->
+			<!-- Accessible name from slot content, rendered visually hidden. -->
 			<BbButton variant="outline" icon="lucide:bell">Notifications</BbButton>
 		</BbIndicator>
 		<BbButton
@@ -856,13 +844,13 @@ Anti-patterns:
 ### Accessibility
 
 - 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 `sr-only` when
+  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
   as the default mechanism. Never ship an icon-only button with no name at all.
 - Toggles expose `aria-pressed` (`true`/`false`) automatically — never add your
   own.
 - While loading: `aria-disabled="true"`, `tabindex="-1"`, and a localized
-  sr-only loading announcement.
+  visually-hidden loading announcement.
 - Disabled links render with `role="link"`, `aria-disabled="true"`, no `href`,
   and leave the tab order.
 - The exact-active link gets `aria-current` (default `"page"`) on every

package/dist/ai/BbCheckbox.md

@@ -36,7 +36,7 @@ Pick the right sibling instead when the shape changes:
 **The states you'll actually ship**
 
 ```vue
-<div class="grid max-w-sm gap-2 rounded-[var(--bb-radius)] border p-3">
+<div class="grid max-w-sm gap-2 rounded-(--bb-radius) border p-3">
 	<BbCheckbox label="Email me product updates" name="s-on" checked />
 	<BbCheckbox
 		label="Send a weekly digest"
@@ -104,12 +104,10 @@ and `false-value` when unchecking.
 
 ```vue
 <template>
-	<div
-		class="flex max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-3"
-	>
+	<div class="flex max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-3">
 		<div class="flex flex-col gap-0.5">
 			<p class="text-sm font-medium">Privacy consent</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Posted as a domain value — not a raw boolean.
 			</p>
 		</div>
@@ -121,9 +119,9 @@ and `false-value` when unchecking.
 			submit-when-false
 			true-value="accepted"
 		/>
-		<p class="text-xs text-[color:var(--bb-text-muted)]">
+		<p class="text-xs text-(--bb-text-muted)">
 			Submitted value:
-			<span class="font-medium text-[color:var(--bb-text)]">{{ consent }}</span>
+			<span class="font-medium text-(--bb-text)">{{ consent }}</span>
 		</p>
 	</div>
 </template>
@@ -190,12 +188,10 @@ than toggling. The slot receives `{ text, hasErrors }`.
 
 ```vue
 <template>
-	<div
-		class="flex max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-3"
-	>
+	<div class="flex max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-3">
 		<div class="flex flex-col gap-0.5">
 			<p class="text-sm font-medium">Accept terms</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Links stay real anchors — clicks navigate instead of toggling.
 			</p>
 		</div>
@@ -236,12 +232,10 @@ the label `text`.
 
 ```vue
 <template>
-	<div
-		class="flex max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-3"
-	>
+	<div class="flex max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-3">
 		<div class="flex flex-col gap-0.5">
 			<p class="text-sm font-medium">Critical alerts</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Custom icon owns both states — checked and unchecked.
 			</p>
 		</div>
@@ -252,14 +246,12 @@ the label `text`.
 		>
 			<template #icon="{ checked, focusVisible }">
 				<span
-					class="inline-flex h-5 w-5 items-center justify-center rounded-[var(--bb-radius-sm)]"
+					class="inline-flex h-5 w-5 items-center justify-center rounded-(--bb-radius-sm)"
 					:class="[
 						checked
-							? 'bg-[color:var(--bb-primary)] text-[color:var(--bb-primary-fg)]'
-							: 'border border-[color:var(--bb-border)] text-[color:var(--bb-text-muted)]',
-						focusVisible
-							? 'ring-2 ring-[color:var(--bb-ring)] ring-offset-1'
-							: '',
+							? 'bg-(--bb-primary) text-(--bb-primary-fg)'
+							: 'border border-(--bb-border) text-(--bb-text-muted)',
+						focusVisible ? 'ring-2 ring-(--bb-ring) ring-offset-1' : '',
 					]"
 				>
 					<BbIcon icon="lucide:bell" size="xs" />
@@ -288,12 +280,10 @@ even though a Save button posts them; the Save button is not what decides it.
 
 ```vue
 <template>
-	<div
-		class="flex max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-3"
-	>
+	<div class="flex max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-3">
 		<div class="flex flex-col gap-0.5">
 			<p class="text-sm font-medium">Email notifications</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Saved with your account — nothing changes until you hit Save.
 			</p>
 		</div>
@@ -320,9 +310,7 @@ even though a Save button posts them; the Save button is not what decides it.
 		</div>
 		<div class="flex items-center gap-2">
 			<BbButton variant="primary" @click="save">Save preferences</BbButton>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">{{
-				status
-			}}</span>
+			<span class="text-xs text-(--bb-text-muted)">{{ status }}</span>
 		</div>
 	</div>
 </template>
@@ -358,12 +346,10 @@ the disabled state can simply tell the truth up front.
 
 ```vue
 <template>
-	<div
-		class="flex max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-3"
-	>
+	<div class="flex max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-3">
 		<div class="flex flex-col gap-0.5">
 			<p class="text-sm font-medium">Create your account</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Last step — accept the terms to unlock Create account.
 			</p>
 		</div>
@@ -410,12 +396,10 @@ for the children.
 
 ```vue
 <template>
-	<div
-		class="flex max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-3"
-	>
+	<div class="flex max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-3">
 		<div class="flex flex-col gap-0.5">
 			<p class="text-sm font-medium">Token permissions</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Scopes this personal access token can use.
 			</p>
 		</div>
@@ -437,7 +421,7 @@ for the children.
 				legend="Scopes"
 				name="scope-list"
 			/>
-			<p class="selection-summary text-xs text-[color:var(--bb-text-muted)]">
+			<p class="selection-summary text-xs text-(--bb-text-muted)">
 				{{ granted.length }} of {{ scopes.length }} scopes granted
 			</p>
 		</fieldset>

package/dist/ai/BbCheckboxGroup.md

@@ -39,10 +39,10 @@ mapped (here, channel ids), which is what you send back to the server.
 
 ```vue
 <template>
-	<div class="grid max-w-sm gap-3 rounded-[var(--bb-radius)] border p-3">
+	<div class="grid max-w-sm gap-3 rounded-(--bb-radius) border p-3">
 		<div>
 			<h3 class="text-sm font-medium">Notification preferences</h3>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				We only send what you opt into.
 			</p>
 		</div>
@@ -57,7 +57,7 @@ mapped (here, channel ids), which is what you send back to the server.
 			name="channels"
 			persistent-hint
 		/>
-		<p class="channel-summary text-xs text-[color:var(--bb-text-muted)]">
+		<p class="channel-summary text-xs text-(--bb-text-muted)">
 			{{ selected.length }} channel{{ selected.length === 1 ? '' : 's' }} on
 		</p>
 	</div>
@@ -139,10 +139,10 @@ choice out. Pair it with a `hint` that states the limit.
 
 ```vue
 <template>
-	<div class="grid max-w-md gap-3 rounded-[var(--bb-radius)] border p-3">
+	<div class="grid max-w-md gap-3 rounded-(--bb-radius) border p-3">
 		<div>
 			<h3 class="text-sm font-medium">Personalize your feed</h3>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Pick up to three topics to follow.
 			</p>
 		</div>
@@ -157,7 +157,7 @@ choice out. Pair it with a `hint` that states the limit.
 			name="topics"
 			persistent-hint
 		/>
-		<p class="text-xs text-[color:var(--bb-text-muted)]">
+		<p class="text-xs text-(--bb-text-muted)">
 			{{ topics.length }} / 3 selected
 		</p>
 	</div>
@@ -192,10 +192,10 @@ on the row, feed that field to the predicate.
 
 ```vue
 <template>
-	<div class="grid max-w-sm gap-3 rounded-[var(--bb-radius)] border p-3">
+	<div class="grid max-w-sm gap-3 rounded-(--bb-radius) border p-3">
 		<div>
 			<h3 class="text-sm font-medium">Delivery channels</h3>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Unconfigured channels stay unavailable until setup finishes.
 			</p>
 		</div>
@@ -277,10 +277,10 @@ border) — floating mode is not supported for checkbox groups.
 
 ```vue
 <template>
-	<div class="grid max-w-sm gap-3 rounded-[var(--bb-radius)] border p-3">
+	<div class="grid max-w-sm gap-3 rounded-(--bb-radius) border p-3">
 		<div>
 			<h3 class="text-sm font-medium">Privacy & contact</h3>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Choose how we may reach you about your account.
 			</p>
 		</div>
@@ -346,10 +346,10 @@ Read-only, with no cleanup code.
 
 ```vue
 <template>
-	<div class="grid max-w-md gap-3 rounded-[var(--bb-radius)] border p-3">
+	<div class="grid max-w-md gap-3 rounded-(--bb-radius) border p-3">
 		<div>
 			<h3 class="text-sm font-medium">Create access token</h3>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Scopes stay coherent with the selected role.
 			</p>
 		</div>
@@ -378,7 +378,7 @@ Read-only, with no cleanup code.
 			name="token-scopes"
 			persistent-hint
 		/>
-		<p class="scope-summary text-xs text-[color:var(--bb-text-muted)]">
+		<p class="scope-summary text-xs text-(--bb-text-muted)">
 			{{ scopes.length }} scope{{ scopes.length === 1 ? '' : 's' }} granted
 		</p>
 	</div>