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

package/dist/ai/BbSelect.md

@@ -43,12 +43,12 @@ object.
 
 ```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 class="flex items-baseline justify-between gap-2">
 			<h3 class="text-sm font-medium">ISSUE-1842</h3>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">In progress</span>
+			<span class="text-xs text-(--bb-text-muted)">In progress</span>
 		</div>
-		<p class="text-xs text-[color:var(--bb-text-muted)]">
+		<p class="text-xs text-(--bb-text-muted)">
 			Wire invoice PDF export for the Milan office.
 		</p>
 		<BbSelect
@@ -198,10 +198,10 @@ model to `[]` (or `null` in single mode).
 
 ```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">Warehouse coverage</h3>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Cap at 3 hubs for the pilot route.
 			</p>
 		</div>
@@ -241,12 +241,10 @@ const cities = ref<string[]>(['ber', 'mil']);
 
 ```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">Email digests</h3>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
-				Who gets the Monday summary?
-			</p>
+			<p class="text-xs text-(--bb-text-muted)">Who gets the Monday summary?</p>
 		</div>
 		<BbSelect
 			v-model="recipients"
@@ -293,10 +291,10 @@ v-model is yours:
 
 ```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">Incident alerts</h3>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Where should paging go when severity is high?
 			</p>
 		</div>
@@ -352,10 +350,10 @@ is yours:
 
 ```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">Lisbon half-day</h3>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Build a route under about four hours.
 			</p>
 		</div>
@@ -372,7 +370,7 @@ is yours:
 		>
 			<template #header="{ clear }">
 				<div
-					class="flex w-full items-center justify-between gap-2 px-1 text-xs text-[color:var(--bb-text-muted)]"
+					class="flex w-full items-center justify-between gap-2 px-1 text-xs text-(--bb-text-muted)"
 				>
 					<span>{{ summary }}</span>
 					<BbButton
@@ -449,10 +447,10 @@ on your setup:
 
 ```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">Shipping destination</h3>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Search by city or country name.
 			</p>
 		</div>
@@ -507,10 +505,10 @@ short version:
 
 ```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">Pull request reviewers</h3>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Search the directory; picks stay pinned.
 			</p>
 		</div>
@@ -665,10 +663,10 @@ options to look, so you have to say so:
 
 ```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">Invoice filters</h3>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Office location, or every office.
 			</p>
 		</div>
@@ -682,7 +680,7 @@ options to look, so you have to say so:
 			placeholder="Select location…"
 			prefill
 		/>
-		<p class="text-xs text-[color:var(--bb-text-muted)]">
+		<p class="text-xs text-(--bb-text-muted)">
 			Filtering by:
 			<strong>{{ location === null ? 'All locations' : location }}</strong>
 		</p>
@@ -776,10 +774,10 @@ cleaned up automatically. Details in the Coherence playbook.
 
 ```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">Shipping address</h3>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				City options follow the chosen region.
 			</p>
 		</div>
@@ -864,10 +862,10 @@ no watcher, no manual reset:
 
 ```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">Review request</h3>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Reviewers must belong to the selected project.
 			</p>
 		</div>
@@ -953,10 +951,10 @@ This is the idiomatic pattern for closed-but-growable vocabularies.
 
 ```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">Issue labels</h3>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Add from the list, or invent one with Enter.
 			</p>
 		</div>
@@ -1024,12 +1022,10 @@ lists window per row) or pre-chunk the data into smaller 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">Invite teammate</h3>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
-				Roles grouped by department.
-			</p>
+			<p class="text-xs text-(--bb-text-muted)">Roles grouped by department.</p>
 		</div>
 		<BbSelect
 			v-model="role"
@@ -1044,7 +1040,7 @@ lists window per row) or pre-chunk the data into smaller groups.
 		>
 			<template #group="{ text, length }">
 				<div
-					class="flex items-center justify-between px-2 text-xs font-semibold text-[color:var(--bb-text-muted)]"
+					class="flex items-center justify-between px-2 text-xs font-semibold text-(--bb-text-muted)"
 				>
 					<span>{{ text }}</span>
 					<span>{{ length }}</span>
@@ -1092,10 +1088,10 @@ compact control, so it keeps the compact rows on every device — turning
 
 ```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 class="flex items-baseline justify-between gap-2">
 			<h3 class="text-sm font-medium">Code review</h3>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">PR #842</span>
+			<span class="text-xs text-(--bb-text-muted)">PR #842</span>
 		</div>
 		<BbSelect
 			v-model="assignee"
@@ -1110,7 +1106,7 @@ compact control, so it keeps the compact rows on every device — turning
 				<span class="flex w-full items-center gap-2">
 					<BbAvatar :alt="text" size="32">{{ item.initials }}</BbAvatar>
 					<span class="min-w-0 flex-1 truncate">{{ text }}</span>
-					<span class="shrink-0 text-xs text-[color:var(--bb-text-muted)]">{{
+					<span class="shrink-0 text-xs text-(--bb-text-muted)">{{
 						item.role
 					}}</span>
 				</span>
@@ -1175,7 +1171,7 @@ once the chips outgrow the field — keep chips compact, or raise
 
 ```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">
 		<BbSelect
 			v-model="tags"
 			clearable

package/dist/ai/BbSelectPopover.md

@@ -94,9 +94,9 @@ code, and it does not change meaning the day the array becomes a provider.)
 ```vue
 <template>
 	<div
-		class="flex max-w-sm items-center gap-1.5 rounded-[var(--bb-radius)] border p-2"
+		class="flex max-w-sm items-center gap-1.5 rounded-(--bb-radius) border p-2"
 	>
-		<span class="pr-1 text-xs font-medium text-[color:var(--bb-text-muted)]"
+		<span class="pr-1 text-xs font-medium text-(--bb-text-muted)"
 			>Assignee</span
 		>
 		<BbSelectPopover
@@ -164,11 +164,9 @@ summarise the selection — a count, a chip cluster, an avatar stack — from
 ```vue
 <template>
 	<div
-		class="flex max-w-sm items-center gap-1.5 rounded-[var(--bb-radius)] border p-2"
+		class="flex max-w-sm items-center gap-1.5 rounded-(--bb-radius) border p-2"
 	>
-		<span class="pr-1 text-xs font-medium text-[color:var(--bb-text-muted)]"
-			>Filters</span
-		>
+		<span class="pr-1 text-xs font-medium text-(--bb-text-muted)">Filters</span>
 		<BbSelectPopover
 			v-model="reviewers"
 			compact
@@ -234,11 +232,9 @@ height wins everywhere.
 ```vue
 <template>
 	<div
-		class="flex max-w-sm items-center gap-1.5 rounded-[var(--bb-radius)] border p-2"
+		class="flex max-w-sm items-center gap-1.5 rounded-(--bb-radius) border p-2"
 	>
-		<span class="pr-1 text-xs font-medium text-[color:var(--bb-text-muted)]"
-			>Owner</span
-		>
+		<span class="pr-1 text-xs font-medium text-(--bb-text-muted)">Owner</span>
 		<BbSelectPopover
 			v-model="owner"
 			compact
@@ -318,11 +314,9 @@ resolvable even when later responses omit them.
 ```vue
 <template>
 	<div
-		class="flex max-w-sm items-center gap-1.5 rounded-[var(--bb-radius)] border p-2"
+		class="flex max-w-sm items-center gap-1.5 rounded-(--bb-radius) border p-2"
 	>
-		<span class="pr-1 text-xs font-medium text-[color:var(--bb-text-muted)]"
-			>Trip</span
-		>
+		<span class="pr-1 text-xs font-medium text-(--bb-text-muted)">Trip</span>
 		<BbSelectPopover
 			v-model="destination"
 			compact
@@ -492,11 +486,9 @@ every row its own model.
 ```vue
 <template>
 	<div
-		class="flex max-w-md flex-wrap items-center gap-1.5 rounded-[var(--bb-radius)] border p-2"
+		class="flex max-w-md flex-wrap items-center gap-1.5 rounded-(--bb-radius) border p-2"
 	>
-		<span class="pr-1 text-xs font-medium text-[color:var(--bb-text-muted)]"
-			>Filters</span
-		>
+		<span class="pr-1 text-xs font-medium text-(--bb-text-muted)">Filters</span>
 		<BbSelectPopover
 			v-model="project"
 			compact
@@ -638,7 +630,7 @@ row, including the hundreds nobody ever opens.
 <template>
 	<div class="flex max-w-xl flex-col gap-1.5">
 		<div
-			class="overflow-hidden rounded-[var(--bb-radius)] border border-[color:var(--bb-border)]"
+			class="overflow-hidden rounded-(--bb-radius) border border-(--bb-border)"
 		>
 			<BbTable
 				caption="Tickets — edit statuses, then Save the batch"
@@ -694,7 +686,7 @@ row, including the hundreds nobody ever opens.
 			<BbButton :disabled="!dirtyCount" size="sm" @click="save">
 				Save{{ dirtyCount ? ` (${dirtyCount})` : '' }}
 			</BbButton>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Edits live in a draft map keyed by row id — the map is the save payload.
 				Rows are never mutated, so nothing is lost on a refetch.
 			</span>
@@ -909,11 +901,9 @@ option. Identical to `BbSelect`, anchored to your trigger.
 ```vue
 <template>
 	<div
-		class="flex max-w-sm items-center gap-1.5 rounded-[var(--bb-radius)] border p-2"
+		class="flex max-w-sm items-center gap-1.5 rounded-(--bb-radius) border p-2"
 	>
-		<span class="pr-1 text-xs font-medium text-[color:var(--bb-text-muted)]"
-			>Role</span
-		>
+		<span class="pr-1 text-xs font-medium text-(--bb-text-muted)">Role</span>
 		<BbSelectPopover
 			v-model="role"
 			compact
@@ -937,7 +927,7 @@ option. Identical to `BbSelect`, anchored to your trigger.
 			</template>
 			<template #group="{ text, length }">
 				<div
-					class="flex items-center justify-between px-2 text-xs font-medium text-[color:var(--bb-text-muted)]"
+					class="flex items-center justify-between px-2 text-xs font-medium text-(--bb-text-muted)"
 				>
 					<span>{{ text }}</span>
 					<span>{{ length }}</span>
@@ -980,9 +970,9 @@ their string equivalents `loading-text` / `no-data-text`.
 ```vue
 <template>
 	<div
-		class="flex max-w-sm items-center gap-1.5 rounded-[var(--bb-radius)] border p-2"
+		class="flex max-w-sm items-center gap-1.5 rounded-(--bb-radius) border p-2"
 	>
-		<span class="pr-1 text-xs font-medium text-[color:var(--bb-text-muted)]"
+		<span class="pr-1 text-xs font-medium text-(--bb-text-muted)"
 			>Destination</span
 		>
 		<BbSelectPopover
@@ -1058,11 +1048,9 @@ when the option list is short enough to just scroll.
 ```vue
 <template>
 	<div
-		class="flex max-w-sm items-center gap-1.5 rounded-[var(--bb-radius)] border p-2"
+		class="flex max-w-sm items-center gap-1.5 rounded-(--bb-radius) border p-2"
 	>
-		<span class="pr-1 text-xs font-medium text-[color:var(--bb-text-muted)]"
-			>Status</span
-		>
+		<span class="pr-1 text-xs font-medium text-(--bb-text-muted)">Status</span>
 		<BbSelectPopover
 			v-model="status"
 			compact

package/dist/ai/BbSlider.md

@@ -35,7 +35,7 @@ so the current number is legible.
 ```vue
 <div class="w-full max-w-sm">
 	<BbSlider v-model="state.volume" label="Volume" :min="0" :max="100" :step="5" />
-	<p class="text-sm text-[color:var(--bb-text-muted)]">{{ state.volume ?? 0 }}%</p>
+	<p class="text-sm text-(--bb-text-muted)">{{ state.volume ?? 0 }}%</p>
 </div>
 ```
 
@@ -57,12 +57,12 @@ have to reason about which handle is which.
 ```vue
 <template>
 	<div
-		class="flex w-full max-w-sm flex-col gap-2 rounded-[var(--bb-radius)] border p-4"
+		class="flex w-full max-w-sm flex-col gap-2 rounded-(--bb-radius) border p-4"
 	>
 		<div class="flex items-baseline justify-between gap-2">
 			<p class="text-sm font-medium">Price</p>
 			<p
-				class="text-xs tabular-nums text-[color:var(--bb-text-muted)]"
+				class="text-xs text-(--bb-text-muted) tabular-nums"
 				data-testid="range"
 			>
 				€{{ price[0] }} – €{{ price[1] }}
@@ -77,9 +77,7 @@ have to reason about which handle is which.
 			range
 			:step="50"
 		/>
-		<p class="text-xs text-[color:var(--bb-text-muted)]">
-			324 stays in this range
-		</p>
+		<p class="text-xs text-(--bb-text-muted)">324 stays in this range</p>
 	</div>
 </template>
 <script setup lang="ts">
@@ -111,7 +109,7 @@ match the step's resolution (e.g. `:step="0.001"` needs
 ```vue
 <div class="w-full max-w-sm">
 	<BbSlider v-model="state.opacity" label="Layer opacity" :min="0" :max="1" :step="0.05" />
-	<p class="text-sm text-[color:var(--bb-text-muted)]">{{ (state.opacity ?? 0).toFixed(2) }}</p>
+	<p class="text-sm text-(--bb-text-muted)">{{ (state.opacity ?? 0).toFixed(2) }}</p>
 </div>
 ```
 
@@ -128,17 +126,15 @@ mode (they early-return), so don't build a stepper around a range slider.
 ```vue
 <template>
 	<div
-		class="flex w-full max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-4"
+		class="flex w-full max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-4"
 	>
 		<div class="flex items-baseline justify-between gap-2">
 			<div>
 				<p class="text-sm font-medium">Playback volume</p>
-				<p class="text-xs text-[color:var(--bb-text-muted)]">
-					Speaker · MacBook Pro
-				</p>
+				<p class="text-xs text-(--bb-text-muted)">Speaker · MacBook Pro</p>
 			</div>
 			<p
-				class="text-xs tabular-nums text-[color:var(--bb-text-muted)]"
+				class="text-xs text-(--bb-text-muted) tabular-nums"
 				data-testid="value"
 			>
 				{{ volume }}%
@@ -239,7 +235,7 @@ it. (Use `thumb:lower` / `thumb:higher` to target one handle of a range.)
 		<BbSlider v-model="zoom" label="Zoom" :max="200" :min="0" :step="10">
 			<template #thumb="{ value, focused }">
 				<span
-					class="absolute -top-7 left-1/2 -translate-x-1/2 rounded-[var(--bb-radius-sm)] bg-[var(--bb-primary)] px-1.5 py-0.5 text-xs text-[var(--bb-primary-fg)] transition-opacity"
+					class="absolute -top-7 left-1/2 -translate-x-1/2 rounded-(--bb-radius-sm) bg-(--bb-primary) px-1.5 py-0.5 text-xs text-(--bb-primary-fg) transition-opacity"
 					:class="focused ? 'opacity-100' : 'opacity-0'"
 					>{{ value ?? 0 }}%</span
 				>
@@ -267,12 +263,12 @@ slider clamps and snaps whatever the field emits.
 ```vue
 <template>
 	<div
-		class="flex w-full max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-4"
+		class="flex w-full max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-4"
 	>
 		<div class="flex items-baseline justify-between gap-2">
 			<div>
 				<p class="text-sm font-medium">Monthly spend limit</p>
-				<p class="text-xs text-[color:var(--bb-text-muted)]">
+				<p class="text-xs text-(--bb-text-muted)">
 					API usage pauses once the cap is reached.
 				</p>
 			</div>
@@ -350,11 +346,11 @@ is a screen-level decision, not a per-control one.
 ```vue
 <template>
 	<div
-		class="flex w-full max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-4"
+		class="flex w-full max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-4"
 	>
 		<div>
 			<p class="text-sm font-medium">Display</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Applies to this display only.
 			</p>
 		</div>
@@ -368,7 +364,7 @@ is a screen-level decision, not a per-control one.
 				:step="5"
 			/>
 			<p
-				class="text-xs tabular-nums text-[color:var(--bb-text-muted)]"
+				class="text-xs text-(--bb-text-muted) tabular-nums"
 				data-testid="brightness"
 			>
 				{{ brightness }}%
@@ -384,7 +380,7 @@ is a screen-level decision, not a per-control one.
 				:step="5"
 			/>
 			<p
-				class="text-xs tabular-nums text-[color:var(--bb-text-muted)]"
+				class="text-xs text-(--bb-text-muted) tabular-nums"
 				data-testid="warmth"
 			>
 				{{ warmth }}%

package/dist/ai/BbSmoothHeight.md

@@ -59,13 +59,11 @@ also catches text reflow, images loading, and window-resize-driven wrapping.
 
 ```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 items-start justify-between gap-3">
 			<div class="flex flex-col gap-0.5">
 				<p class="text-sm font-medium">Acme Pro</p>
-				<p class="text-xs text-[color:var(--bb-text-muted)]">
+				<p class="text-xs text-(--bb-text-muted)">
 					$29 / month · billed annually
 				</p>
 			</div>
@@ -81,7 +79,7 @@ also catches text reflow, images loading, and window-resize-driven wrapping.
 		<BbSmoothHeight>
 			<ul
 				v-if="showDetails"
-				class="flex flex-col gap-1.5 text-sm text-[color:var(--bb-text-muted)]"
+				class="flex flex-col gap-1.5 text-sm text-(--bb-text-muted)"
 			>
 				<li v-for="perk in perks" :key="perk">{{ perk }}</li>
 			</ul>
@@ -116,12 +114,10 @@ controls above and the actions below stay put while the middle animates.
 
 ```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">Billing details</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Acme Studio · next invoice Jul 31, 2026
 			</p>
 		</div>
@@ -163,7 +159,7 @@ controls above and the actions below stay put while the middle animates.
 					label="IBAN"
 					placeholder="DE89 3704 0044 0532 0130 00"
 				/>
-				<p class="text-xs text-[color:var(--bb-text-muted)]">
+				<p class="text-xs text-(--bb-text-muted)">
 					We will email a SEPA mandate to finance@acme.dev for approval.
 				</p>
 			</div>
@@ -213,9 +209,7 @@ strategy covers all of it, including results wrapping onto more lines.
 
 ```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">
 		<BbTextInput
 			v-model="query"
 			compact
@@ -228,7 +222,7 @@ strategy covers all of it, including results wrapping onto more lines.
 		<BbSmoothHeight>
 			<div
 				v-if="loading"
-				class="flex items-center gap-2 px-1 py-2 text-sm text-[color:var(--bb-text-muted)]"
+				class="flex items-center gap-2 px-1 py-2 text-sm text-(--bb-text-muted)"
 				role="status"
 			>
 				<BbSpinner size="sm" /> Searching…
@@ -240,15 +234,12 @@ strategy covers all of it, including results wrapping onto more lines.
 					class="flex items-baseline justify-between gap-3 px-1 py-1.5 text-sm"
 				>
 					<a class="truncate font-medium" :href="page.href">{{ page.title }}</a>
-					<span class="shrink-0 text-xs text-[color:var(--bb-text-muted)]">{{
+					<span class="shrink-0 text-xs text-(--bb-text-muted)">{{
 						page.section
 					}}</span>
 				</li>
 			</ul>
-			<p
-				v-else-if="query"
-				class="px-1 py-2 text-sm text-[color:var(--bb-text-muted)]"
-			>
+			<p v-else-if="query" class="px-1 py-2 text-sm text-(--bb-text-muted)">
 				No pages match “{{ query }}”.
 			</p>
 		</BbSmoothHeight>
@@ -321,15 +312,11 @@ class swaps or text edits drive the height.
 
 ```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-3">
 			<div class="flex flex-col gap-0.5">
 				<p class="text-sm font-medium">Recent activity</p>
-				<p class="text-xs text-[color:var(--bb-text-muted)]">
-					Q3 launch · Acme Studio
-				</p>
+				<p class="text-xs text-(--bb-text-muted)">Q3 launch · Acme Studio</p>
 			</div>
 			<div class="flex gap-1.5">
 				<BbButton size="sm" variant="ghost" @click="removeEntry">
@@ -350,7 +337,7 @@ class swaps or text edits drive the height.
 					class="flex items-baseline justify-between gap-3 py-2 text-sm first:pt-0 last:pb-0"
 				>
 					<span>{{ entry.text }}</span>
-					<span class="shrink-0 text-xs text-[color:var(--bb-text-muted)]">{{
+					<span class="shrink-0 text-xs text-(--bb-text-muted)">{{
 						entry.when
 					}}</span>
 				</li>
@@ -417,12 +404,10 @@ on the fly.
 
 ```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">Release checklist</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				v2.4.0 · ship window Fri Jul 24
 			</p>
 		</div>
@@ -431,7 +416,7 @@ on the fly.
 			<ul class="flex flex-col gap-1.5 text-sm">
 				<li>Design review signed off</li>
 				<li>Ship the release notes</li>
-				<li v-if="expanded" class="text-[color:var(--bb-text-muted)]">
+				<li v-if="expanded" class="text-(--bb-text-muted)">
 					Notify the changelog subscribers
 				</li>
 			</ul>