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

package/dist/ai/BbCollapsible.md

@@ -41,12 +41,10 @@ fields visible; tuck rarely-needed controls behind the disclosure.
 
 ```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 webhook</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Northwind Billing · deliver invoice events to your endpoint.
 			</p>
 		</div>
@@ -147,12 +145,10 @@ the switch's checked state already conveys 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">Custom domain</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Acme Docs · serve from your domain instead of *.bitdocs.app.
 			</p>
 		</div>
@@ -211,12 +207,10 @@ entry that reveals the full bullet list on demand.
 
 ```vue
 <template>
-	<div
-		class="flex max-w-md flex-col gap-2 rounded-[var(--bb-radius)] border p-3"
-	>
+	<div class="flex max-w-md flex-col gap-2 rounded-(--bb-radius) border p-3">
 		<div class="flex items-baseline gap-2">
 			<p class="text-sm font-medium">v3.2.0</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">Jul 18, 2026</p>
+			<p class="text-xs text-(--bb-text-muted)">Jul 18, 2026</p>
 		</div>
 
 		<p class="text-sm leading-relaxed">
@@ -225,9 +219,7 @@ entry that reveals the full bullet list on demand.
 		</p>
 
 		<BbCollapsible id="changelog-more" v-model="more">
-			<ul
-				class="flex flex-col gap-1.5 pt-1 text-sm text-[color:var(--bb-text-muted)]"
-			>
+			<ul class="flex flex-col gap-1.5 pt-1 text-sm text-(--bb-text-muted)">
 				<li v-for="note in notes" :key="note">{{ note }}</li>
 			</ul>
 		</BbCollapsible>
@@ -278,12 +270,10 @@ grid-rows transition) and the opacity/visibility fade. Under
 
 ```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 flex-col gap-0.5">
 			<p class="text-sm font-medium">Checkout · 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>
@@ -306,7 +296,7 @@ grid-rows transition) and the opacity/visibility fade. Under
 			eager
 			:transition-duration="350"
 		>
-			<p class="pt-1 text-sm text-[color:var(--bb-text-muted)]">
+			<p class="pt-1 text-sm text-(--bb-text-muted)">
 				Refunds return to the original payment method within 5–10 business days.
 				Annual plans are refundable in full within 30 days of purchase.
 			</p>
@@ -332,12 +322,10 @@ triggers live in a segmented control or toolbar rather than stacked headers.
 
 ```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">Studio Display</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				INV-1042 · Acme Studio · $1,599.00
 			</p>
 		</div>
@@ -357,12 +345,12 @@ triggers live in a segmented control or toolbar rather than stacked headers.
 		</div>
 
 		<BbCollapsible :id="tabs[0].panelId" :model-value="active === 'specs'">
-			<p class="text-sm text-[color:var(--bb-text-muted)]">
+			<p class="text-sm text-(--bb-text-muted)">
 				Aluminium body · 1.2&nbsp;kg · USB-C · 14&quot; matte display · 60 Hz.
 			</p>
 		</BbCollapsible>
 		<BbCollapsible :id="tabs[1].panelId" :model-value="active === 'shipping'">
-			<p class="text-sm text-[color:var(--bb-text-muted)]">
+			<p class="text-sm text-(--bb-text-muted)">
 				Ships in 2–3 business days. Free returns within 30 days of delivery.
 			</p>
 		</BbCollapsible>

package/dist/ai/BbColorInput.md

@@ -53,18 +53,18 @@ users can type or pick — both paths land in the same `v-model`.
 ```vue
 <template>
 	<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
 	>
 		<div class="flex flex-col gap-0.5">
 			<span class="text-sm font-medium">Workspace appearance</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Brand and accent colors for buttons, links, and chrome.
 			</span>
 		</div>
 
 		<div
-			class="flex items-center gap-2 rounded-[var(--bb-radius)] border bg-[color:var(--bb-muted)] px-3 py-2"
+			class="flex items-center gap-2 rounded-(--bb-radius) border bg-(--bb-muted) px-3 py-2"
 		>
 			<span
 				class="rounded-full px-2.5 py-0.5 text-xs font-medium"
@@ -85,9 +85,7 @@ users can type or pick — both paths land in the same `v-model`.
 			>
 				Accent
 			</span>
-			<span v-else class="text-xs text-[color:var(--bb-text-muted)]"
-				>No accent yet</span
-			>
+			<span v-else class="text-xs text-(--bb-text-muted)">No accent yet</span>
 		</div>
 
 		<BbColorInput
@@ -162,12 +160,10 @@ const resetToDefaults = () => {
 
 ```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">Label & overlay</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Custom swatch columns, optional alpha, and eyedropper when available.
 			</span>
 		</div>
@@ -220,12 +216,10 @@ color) can parse it without guards.
 
 ```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">New label</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				GitHub-style — name a label and paint it as you drag.
 			</span>
 		</div>
@@ -316,12 +310,10 @@ server-side rules, surfaced through `errors`.
 
 ```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">Theme colors</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Floating label, always-visible description, and a required-field error.
 			</span>
 		</div>
@@ -377,12 +369,10 @@ The full common-field surface applies:
 
 ```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">Chart series</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Compact field with a palette icon and a hex suffix.
 			</span>
 		</div>
@@ -395,7 +385,7 @@ The full common-field surface applies:
 			swatches
 		>
 			<template #suffix>
-				<span class="text-xs text-[color:var(--bb-text-muted)]">hex</span>
+				<span class="text-xs text-(--bb-text-muted)">hex</span>
 			</template>
 		</BbColorInput>
 	</div>

package/dist/ai/BbColorPalette.md

@@ -68,17 +68,15 @@ drag would hit your backend.
 
 ```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">
 				<span class="text-sm font-medium">Repository labels</span>
-				<span class="text-xs text-[color:var(--bb-text-muted)]"
+				<span class="text-xs text-(--bb-text-muted)"
 					>bitboss/ui · paint from the row</span
 				>
 			</div>
-			<span class="shrink-0 text-xs text-[color:var(--bb-text-muted)]">
+			<span class="shrink-0 text-xs text-(--bb-text-muted)">
 				{{ pending ? 'Saving…' : 'All changes saved' }}
 			</span>
 		</div>
@@ -87,7 +85,7 @@ drag would hit your backend.
 			<li
 				v-for="label in labels"
 				:key="label.name"
-				class="flex items-center gap-2 rounded-[var(--bb-radius)] px-1 py-1 hover:bg-[color:var(--bb-surface-hover)]"
+				class="flex items-center gap-2 rounded-(--bb-radius) px-1 py-1 hover:bg-(--bb-surface-hover)"
 			>
 				<span
 					class="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium"
@@ -98,9 +96,7 @@ drag would hit your backend.
 				>
 					{{ label.name }}
 				</span>
-				<span
-					class="mr-auto truncate text-xs text-[color:var(--bb-text-muted)]"
-				>
+				<span class="mr-auto truncate text-xs text-(--bb-text-muted)">
 					{{ label.description }}
 				</span>
 
@@ -114,8 +110,8 @@ drag would hit your backend.
 					<template #activator="{ props, value, open }">
 						<button
 							v-bind="props"
-							class="h-4 w-4 shrink-0 rounded-full border border-[color:var(--bb-border)] outline-none ring-offset-1 focus-visible:ring-2 focus-visible:ring-[color:var(--bb-ring)]"
-							:class="open ? 'ring-2 ring-[color:var(--bb-ring)]' : ''"
+							class="h-4 w-4 shrink-0 rounded-full border border-(--bb-border) ring-offset-1 outline-hidden focus-visible:ring-2 focus-visible:ring-(--bb-ring)"
+							:class="open ? 'ring-2 ring-(--bb-ring)' : ''"
 							:style="{ backgroundColor: value ?? 'transparent' }"
 							type="button"
 						/>
@@ -205,12 +201,10 @@ is one instance per row.
 
 ```vue
 <template>
-	<div
-		class="flex max-w-xs flex-col gap-2 rounded-[var(--bb-radius)] border p-3"
-	>
+	<div class="flex max-w-xs flex-col gap-2 rounded-(--bb-radius) border p-3">
 		<div class="flex flex-col gap-0.5">
 			<span class="text-sm font-medium">My calendars</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Dot triggers — one palette instance per category.
 			</span>
 		</div>
@@ -219,7 +213,7 @@ is one instance per row.
 			<li
 				v-for="category in categories"
 				:key="category.name"
-				class="flex items-center justify-between gap-3 rounded-[var(--bb-radius)] px-1 py-1 hover:bg-[color:var(--bb-surface-hover)]"
+				class="flex items-center justify-between gap-3 rounded-(--bb-radius) px-1 py-1 hover:bg-(--bb-surface-hover)"
 			>
 				<span class="text-sm">{{ category.name }}</span>
 
@@ -232,8 +226,8 @@ is one instance per row.
 					<template #activator="{ props, value, open }">
 						<button
 							v-bind="props"
-							class="h-4 w-4 shrink-0 rounded-full border border-[color:var(--bb-border)] outline-none ring-offset-1 focus-visible:ring-2 focus-visible:ring-[color:var(--bb-ring)]"
-							:class="open ? 'ring-2 ring-[color:var(--bb-ring)]' : ''"
+							class="h-4 w-4 shrink-0 rounded-full border border-(--bb-border) ring-offset-1 outline-hidden focus-visible:ring-2 focus-visible:ring-(--bb-ring)"
+							:class="open ? 'ring-2 ring-(--bb-ring)' : ''"
 							:style="{ backgroundColor: value ?? 'transparent' }"
 							type="button"
 						/>
@@ -348,19 +342,17 @@ Three independent enrichments to the palette body:
 
 ```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">Overlay tint</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Custom columns, alpha channel, and eyedropper when the browser supports
 				it.
 			</span>
 		</div>
 
 		<div
-			class="flex h-16 items-end overflow-hidden rounded-[var(--bb-radius)] border"
+			class="flex h-16 items-end overflow-hidden rounded-(--bb-radius) border"
 			style="
 				background-image:
 					linear-gradient(45deg, var(--bb-muted) 25%, transparent 25%),
@@ -391,11 +383,11 @@ Three independent enrichments to the palette body:
 			<template #activator="{ props, value, open }">
 				<button
 					v-bind="props"
-					class="inline-flex w-full items-center gap-2 rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] px-3 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--bb-ring)]"
+					class="inline-flex w-full items-center gap-2 rounded-(--bb-radius) border border-(--bb-border) px-3 py-1.5 text-sm outline-hidden focus-visible:ring-2 focus-visible:ring-(--bb-ring)"
 					type="button"
 				>
 					<span
-						class="h-4 w-4 shrink-0 rounded-full border border-[color:var(--bb-border)]"
+						class="h-4 w-4 shrink-0 rounded-full border border-(--bb-border)"
 						:style="{ backgroundColor: value ?? 'transparent' }"
 					/>
 					<span class="mr-auto tabular-nums">{{
@@ -450,12 +442,10 @@ The float itself is tuned with the popover props:
 
 ```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 flex-col gap-0.5">
 			<span class="text-sm font-medium">Brand settings</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Row anchors the popover; only the swatch is clickable.
 			</span>
 		</div>
@@ -469,20 +459,18 @@ The float itself is tuned with the popover props:
 			<template #activator="{ props, anchorProps, value, open }">
 				<span
 					v-bind="anchorProps"
-					class="flex items-center justify-between gap-3 rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] px-3 py-2 hover:bg-[color:var(--bb-surface-hover)]"
+					class="flex items-center justify-between gap-3 rounded-(--bb-radius) border border-(--bb-border) px-3 py-2 hover:bg-(--bb-surface-hover)"
 				>
 					<span class="flex min-w-0 flex-col gap-0.5">
 						<span class="text-sm font-medium">Brand accent</span>
-						<span
-							class="truncate text-xs tabular-nums text-[color:var(--bb-text-muted)]"
-						>
+						<span class="truncate text-xs text-(--bb-text-muted) tabular-nums">
 							{{ value ?? 'No color' }}
 						</span>
 					</span>
 					<button
 						v-bind="props"
-						class="h-5 w-5 shrink-0 rounded-full border border-[color:var(--bb-border)] outline-none ring-offset-1 focus-visible:ring-2 focus-visible:ring-[color:var(--bb-ring)]"
-						:class="open ? 'ring-2 ring-[color:var(--bb-ring)]' : ''"
+						class="h-5 w-5 shrink-0 rounded-full border border-(--bb-border) ring-offset-1 outline-hidden focus-visible:ring-2 focus-visible:ring-(--bb-ring)"
+						:class="open ? 'ring-2 ring-(--bb-ring)' : ''"
 						:style="{ backgroundColor: value ?? 'transparent' }"
 						type="button"
 					/>

package/dist/ai/BbConfirm.md

@@ -73,19 +73,17 @@ inherits the destructive button style automatically. Everything after the
 
 ```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>
 		<div v-for="key in keys" :key="key.id" class="flex items-center gap-2">
 			<div class="flex min-w-0 flex-1 flex-col">
 				<span class="truncate text-sm font-medium">{{ key.label }}</span>
-				<span class="text-xs text-[color:var(--bb-text-muted)]">
+				<span class="text-xs text-(--bb-text-muted)">
 					{{ key.masked }} · created {{ key.created }}
 				</span>
 			</div>
@@ -98,10 +96,7 @@ inherits the destructive button style automatically. Everything after the
 				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>
 
@@ -170,12 +165,10 @@ callback's own return value rather than a plain boolean. One sharp edge:
 
 ```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">Changelog — week 28</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Status: <span data-status>{{ status }}</span>
 			</span>
 		</div>
@@ -268,12 +261,10 @@ the array (`as const` keeps the literal types; without it each handler infers
 
 ```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">Post editor</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Last decision: <span data-decision>{{ decision }}</span>
 			</span>
 		</div>
@@ -391,12 +382,10 @@ edits, so every implicit way out is blocked and the user answers with a button.
 
 ```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">Profile</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Saved as: <span data-saved>{{ saved }}</span>
 			</span>
 		</div>
@@ -463,12 +452,10 @@ By default the dialog closes as soon as the promise settles. Set
 
 ```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">Workspace backup</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]" data-status>{{
+			<span class="text-xs text-(--bb-text-muted)" data-status>{{
 				status
 			}}</span>
 		</div>
@@ -550,13 +537,11 @@ portal never renders.
 
 ```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-center gap-2">
 			<div class="flex min-w-0 flex-1 flex-col">
 				<span class="truncate text-sm font-medium">Sofia Esposito</span>
-				<span class="text-xs text-[color:var(--bb-text-muted)]"
+				<span class="text-xs text-(--bb-text-muted)"
 					>Editor · sofia@acme.dev</span
 				>
 			</div>
@@ -564,7 +549,7 @@ portal never renders.
 				Remove
 			</BbButton>
 		</div>
-		<p class="text-xs text-[color:var(--bb-text-muted)]" data-result>
+		<p class="text-xs text-(--bb-text-muted)" data-result>
 			{{ result }}
 		</p>
 
@@ -574,10 +559,10 @@ portal never renders.
 			<template #default="{ props }">
 				<div class="flex flex-col items-center gap-1 text-center">
 					<p class="text-sm font-medium">{{ props.name }}</p>
-					<p class="text-xs text-[color:var(--bb-text-muted)]">
+					<p class="text-xs text-(--bb-text-muted)">
 						{{ props.role }}
 					</p>
-					<p class="mt-1 text-xs text-[color:var(--bb-text-muted)]">
+					<p class="mt-1 text-xs text-(--bb-text-muted)">
 						They lose access to every shared resource.
 					</p>
 				</div>

package/dist/ai/BbDatePickerInput.md

@@ -92,12 +92,10 @@ en-dash.
 
 ```vue
 <template>
-	<div class="grid max-w-sm gap-3 rounded-[var(--bb-radius)] border p-4">
+	<div class="grid max-w-sm gap-3 rounded-(--bb-radius) border p-4">
 		<div>
 			<p class="text-sm font-medium">Book your stay</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
-				Seaside Loft · Lisbon
-			</p>
+			<p class="text-xs text-(--bb-text-muted)">Seaside Loft · Lisbon</p>
 		</div>
 		<BbDatePickerInput
 			v-model="stay"
@@ -109,7 +107,7 @@ en-dash.
 			prepend:icon="lucide:calendar"
 			range
 		/>
-		<p class="text-xs text-[color:var(--bb-text-muted)]">
+		<p class="text-xs text-(--bb-text-muted)">
 			<template v-if="stay.length === 2">
 				{{ stay[0] }} → {{ stay[1] }} · {{ nights }} night{{
 					nights === 1 ? '' : 's'
@@ -181,10 +179,10 @@ predicate, `floating` output, and the `append:day` slot to dot specific days.
 
 ```vue
 <template>
-	<div class="grid max-w-sm gap-3 rounded-[var(--bb-radius)] border p-4">
+	<div class="grid max-w-sm gap-3 rounded-(--bb-radius) border p-4">
 		<div>
 			<p class="text-sm font-medium">Book a demo</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				30 minutes. Dotted days still have open slots.
 			</p>
 		</div>
@@ -208,7 +206,7 @@ predicate, `floating` output, and the `append:day` slot to dot specific days.
 				/>
 			</template>
 		</BbDatePickerInput>
-		<p class="text-xs text-[color:var(--bb-text-muted)]">
+		<p class="text-xs text-(--bb-text-muted)">
 			{{ appointment ? `Booked for ${appointment}` : 'No date chosen yet.' }}
 		</p>
 	</div>
@@ -265,13 +263,11 @@ name while the field reads as toolbar chrome.
 
 ```vue
 <template>
-	<div class="grid max-w-md gap-3 rounded-[var(--bb-radius)] border p-4">
+	<div class="grid max-w-md gap-3 rounded-(--bb-radius) border p-4">
 		<div class="flex flex-wrap items-center justify-between gap-2">
 			<div>
 				<p class="text-sm font-medium">Issue date</p>
-				<p class="text-xs text-[color:var(--bb-text-muted)]">
-					Filter the invoice list
-				</p>
+				<p class="text-xs text-(--bb-text-muted)">Filter the invoice list</p>
 			</div>
 			<div class="flex gap-1.5">
 				<BbButton size="xs" variant="outline" @click="setPreset(7)">
@@ -297,7 +293,7 @@ name while the field reads as toolbar chrome.
 			prepend:icon="lucide:calendar-range"
 			range
 		/>
-		<p class="text-xs text-[color:var(--bb-text-muted)]">
+		<p class="text-xs text-(--bb-text-muted)">
 			{{
 				period.length === 2
 					? `Showing invoices from ${period[0]} to ${period[1]}`
@@ -447,15 +443,13 @@ issue date and surfaces the normalisation.
 
 ```vue
 <template>
-	<div class="grid max-w-sm gap-3 rounded-[var(--bb-radius)] border p-4">
+	<div class="grid max-w-sm gap-3 rounded-(--bb-radius) border p-4">
 		<div class="flex items-start justify-between gap-3">
 			<div>
 				<p class="text-sm font-medium">INV-2048</p>
-				<p class="text-xs text-[color:var(--bb-text-muted)]">
-					Acme Studio · $2,400.00
-				</p>
+				<p class="text-xs text-(--bb-text-muted)">Acme Studio · $2,400.00</p>
 			</div>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">Draft</p>
+			<p class="text-xs text-(--bb-text-muted)">Draft</p>
 		</div>
 		<BbDatePickerInput
 			v-model="dueDate"
@@ -472,7 +466,7 @@ issue date and surfaces the normalisation.
 			@error="onError"
 			@update:model-value="dueError = ''"
 		/>
-		<p class="text-xs text-[color:var(--bb-text-muted)]">
+		<p class="text-xs text-(--bb-text-muted)">
 			Issued {{ issuedAt }} · Net 30 from issue
 		</p>
 	</div>
@@ -571,10 +565,10 @@ typing and the calendar (`aria-readonly`).
 
 ```vue
 <template>
-	<div class="grid max-w-sm gap-3 rounded-[var(--bb-radius)] border p-4">
+	<div class="grid max-w-sm gap-3 rounded-(--bb-radius) border p-4">
 		<div>
 			<p class="text-sm font-medium">Contract dates</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Clear the start date, or copy the locked created stamp.
 			</p>
 		</div>