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

package/dist/ai/BbTabs.md

@@ -45,12 +45,10 @@ in one component.
 
 ```vue
 <template>
-	<div
-		class="max-w-md rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3"
-	>
+	<div class="max-w-md rounded-(--bb-radius) border border-(--bb-border) p-3">
 		<div class="mb-3 flex flex-col gap-0.5">
 			<p class="text-sm font-medium">Acme Checkout</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Project · last deploy 14m ago
 			</p>
 		</div>
@@ -58,34 +56,34 @@ in one component.
 			<template #overview>
 				<div class="grid gap-1.5 pt-3 text-sm">
 					<p class="font-medium">Health: stable</p>
-					<p class="text-xs text-[color:var(--bb-text-muted)]">
+					<p class="text-xs text-(--bb-text-muted)">
 						Error rate 0.12% · p95 180ms · 3 open incidents
 					</p>
 				</div>
 			</template>
 			<template #activity>
-				<ul class="divide-y divide-[color:var(--bb-border)] pt-3">
+				<ul class="divide-y divide-(--bb-border) pt-3">
 					<li
 						v-for="event in activity"
 						:key="event.id"
 						class="flex flex-col gap-0.5 py-2"
 					>
 						<p class="text-sm">{{ event.text }}</p>
-						<p class="text-xs text-[color:var(--bb-text-muted)]">
+						<p class="text-xs text-(--bb-text-muted)">
 							{{ event.when }}
 						</p>
 					</li>
 				</ul>
 			</template>
 			<template #members>
-				<ul class="divide-y divide-[color:var(--bb-border)] pt-3">
+				<ul class="divide-y divide-(--bb-border) pt-3">
 					<li
 						v-for="member in members"
 						:key="member.email"
 						class="flex items-center justify-between gap-2 py-2 text-sm"
 					>
 						<span class="truncate">{{ member.name }}</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>
@@ -136,9 +134,7 @@ dynamic-name slot instead of writing one block per key:
 **Dynamic pane slots from generated items**
 
 ```vue
-<div
-	class="max-w-md rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3"
->
+<div class="max-w-md rounded-(--bb-radius) border border-(--bb-border) p-3">
 	<BbTabs
 		compact
 		:items="[
@@ -152,7 +148,7 @@ dynamic-name slot instead of writing one block per key:
 			:key="stage"
 			#[stage]
 		>
-			<p class="pt-3 text-sm capitalize text-[color:var(--bb-text-muted)]">{{ stage }} documents.</p>
+			<p class="pt-3 text-sm capitalize text-(--bb-text-muted)">{{ stage }} documents.</p>
 		</template>
 	</BbTabs>
 </div>
@@ -172,9 +168,7 @@ button or link inside a label — the trigger is already the control).
 
 ```vue
 <template>
-	<div
-		class="max-w-md rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3"
-	>
+	<div class="max-w-md rounded-(--bb-radius) border border-(--bb-border) p-3">
 		<BbTabs v-model="active" compact :items="tabs">
 			<template #label:inbox="{ text }">
 				<span class="inline-flex items-center gap-1.5">
@@ -183,26 +177,26 @@ button or link inside a label — the trigger is already the control).
 				</span>
 			</template>
 			<template #inbox>
-				<ul class="divide-y divide-[color:var(--bb-border)] pt-3">
+				<ul class="divide-y divide-(--bb-border) pt-3">
 					<li
 						v-for="thread in inbox"
 						:key="thread.id"
 						class="flex flex-col gap-0.5 py-2"
 					>
 						<p class="text-sm font-medium">{{ thread.subject }}</p>
-						<p class="text-xs text-[color:var(--bb-text-muted)]">
+						<p class="text-xs text-(--bb-text-muted)">
 							{{ thread.from }} · {{ thread.when }}
 						</p>
 					</li>
 				</ul>
 			</template>
 			<template #sent>
-				<p class="pt-3 text-sm text-[color:var(--bb-text-muted)]">
+				<p class="pt-3 text-sm text-(--bb-text-muted)">
 					12 messages sent this week.
 				</p>
 			</template>
 			<template #spam>
-				<p class="pt-3 text-sm text-[color:var(--bb-text-muted)]">
+				<p class="pt-3 text-sm text-(--bb-text-muted)">
 					3 filtered messages · last scan 2h ago.
 				</p>
 			</template>
@@ -290,12 +284,10 @@ the Audience and Schedule tabs:
 
 ```vue
 <template>
-	<div
-		class="max-w-md rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3"
-	>
+	<div class="max-w-md rounded-(--bb-radius) border border-(--bb-border) p-3">
 		<div class="mb-3 flex flex-col gap-0.5">
 			<p class="text-sm font-medium">Product announcement</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Draft · scheduled for Tue 09:00 local
 			</p>
 		</div>
@@ -320,7 +312,7 @@ the Audience and Schedule tabs:
 				</div>
 			</template>
 			<template #audience>
-				<p class="pt-3 text-sm text-[color:var(--bb-text-muted)]">
+				<p class="pt-3 text-sm text-(--bb-text-muted)">
 					Sending to
 					<span class="font-medium tabular-nums">{{
 						recipients.toLocaleString()
@@ -329,7 +321,7 @@ the Audience and Schedule tabs:
 				</p>
 			</template>
 			<template #schedule>
-				<p class="pt-3 text-sm text-[color:var(--bb-text-muted)]">
+				<p class="pt-3 text-sm text-(--bb-text-muted)">
 					Queued for Tuesday 09:00 in each recipient's local timezone.
 				</p>
 			</template>
@@ -379,12 +371,10 @@ nothing when you flip back:
 
 ```vue
 <template>
-	<div
-		class="max-w-md rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3"
-	>
+	<div class="max-w-md rounded-(--bb-radius) border border-(--bb-border) p-3">
 		<div class="mb-3 flex flex-col gap-0.5">
 			<p class="text-sm font-medium">Release notes</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Markdown draft · preview before publishing.
 			</p>
 		</div>
@@ -405,14 +395,12 @@ nothing when you flip back:
 				</div>
 			</template>
 			<template #preview>
-				<div class="grid gap-1.5 whitespace-pre-line pt-3 text-sm">
+				<div class="grid gap-1.5 pt-3 text-sm whitespace-pre-line">
 					<template v-if="draft.trim()">
 						<p class="font-medium">{{ previewTitle }}</p>
-						<p class="text-[color:var(--bb-text-muted)]">{{ previewBody }}</p>
+						<p class="text-(--bb-text-muted)">{{ previewBody }}</p>
 					</template>
-					<p v-else class="text-[color:var(--bb-text-muted)]">
-						Nothing to preview.
-					</p>
+					<p v-else class="text-(--bb-text-muted)">Nothing to preview.</p>
 				</div>
 			</template>
 		</BbTabs>
@@ -470,12 +458,10 @@ active section stays in the URL without flooding Back history:
 
 ```vue
 <template>
-	<div
-		class="max-w-md rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3"
-	>
+	<div class="max-w-md rounded-(--bb-radius) border border-(--bb-border) p-3">
 		<div class="mb-3 flex flex-col gap-0.5">
 			<p class="text-sm font-medium">Workspace settings</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Northwind Billing · changes save per section.
 			</p>
 		</div>
@@ -511,7 +497,7 @@ active section stays in the URL without flooding Back history:
 				</div>
 			</template>
 			<template #members>
-				<ul class="divide-y divide-[color:var(--bb-border)] pt-3">
+				<ul class="divide-y divide-(--bb-border) pt-3">
 					<li
 						v-for="member in members"
 						:key="member.email"
@@ -519,11 +505,11 @@ active section stays in the URL without flooding Back history:
 					>
 						<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>
@@ -532,7 +518,7 @@ active section stays in the URL without flooding Back history:
 			<template #billing>
 				<div class="grid gap-1.5 pt-3">
 					<p class="text-sm font-medium">Pro · €49 / month</p>
-					<p class="text-xs text-[color:var(--bb-text-muted)]">
+					<p class="text-xs text-(--bb-text-muted)">
 						Next invoice Jul 28, 2026 · Visa ···· 4242
 					</p>
 					<div class="pt-1">
@@ -577,9 +563,7 @@ const onSaveGeneral = async () => {
 **Full-width strip with a disabled tab**
 
 ```vue
-<div
-	class="max-w-md rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3"
->
+<div class="max-w-md rounded-(--bb-radius) border border-(--bb-border) p-3">
 	<BbTabs
 		block
 		compact
@@ -589,9 +573,9 @@ const onSaveGeneral = async () => {
 			{ key: 'billing', label: 'Billing', disabled: true },
 		]"
 	>
-		<template #summary><p class="pt-3 text-sm text-[color:var(--bb-text-muted)]">Environment status at a glance.</p></template>
-		<template #integrations><p class="pt-3 text-sm text-[color:var(--bb-text-muted)]">Connected services.</p></template>
-		<template #billing><p class="pt-3 text-sm text-[color:var(--bb-text-muted)]">Locked on this plan.</p></template>
+		<template #summary><p class="pt-3 text-sm text-(--bb-text-muted)">Environment status at a glance.</p></template>
+		<template #integrations><p class="pt-3 text-sm text-(--bb-text-muted)">Connected services.</p></template>
+		<template #billing><p class="pt-3 text-sm text-(--bb-text-muted)">Locked on this plan.</p></template>
 	</BbTabs>
 </div>
 ```
@@ -599,9 +583,7 @@ const onSaveGeneral = async () => {
 **Vertical, compact strip**
 
 ```vue
-<div
-	class="max-w-md rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3"
->
+<div class="max-w-md rounded-(--bb-radius) border border-(--bb-border) p-3">
 	<BbTabs
 		compact
 		direction="vertical"
@@ -611,9 +593,9 @@ const onSaveGeneral = async () => {
 			{ key: 'api', label: 'API keys' },
 		]"
 	>
-		<template #general><p class="px-3 text-sm text-[color:var(--bb-text-muted)]">Workspace basics.</p></template>
-		<template #security><p class="px-3 text-sm text-[color:var(--bb-text-muted)]">Sessions and 2FA.</p></template>
-		<template #api><p class="px-3 text-sm text-[color:var(--bb-text-muted)]">Personal access tokens.</p></template>
+		<template #general><p class="px-3 text-sm text-(--bb-text-muted)">Workspace basics.</p></template>
+		<template #security><p class="px-3 text-sm text-(--bb-text-muted)">Sessions and 2FA.</p></template>
+		<template #api><p class="px-3 text-sm text-(--bb-text-muted)">Personal access tokens.</p></template>
 	</BbTabs>
 </div>
 ```
@@ -640,12 +622,10 @@ ends.
 
 ```vue
 <template>
-	<div
-		class="max-w-md rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3"
-	>
+	<div class="max-w-md rounded-(--bb-radius) border border-(--bb-border) p-3">
 		<div class="mb-3 flex flex-col gap-0.5">
 			<p class="text-sm font-medium">Release timeline</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Monthly notes · scroll arrows when the strip overflows.
 			</p>
 		</div>
@@ -674,17 +654,17 @@ ends.
 			</template>
 			<!--
 				`slotKey(...)`, never the raw key. A pane's slot name is the
-				NORMALIZED key, so `#[release.key]` only happens to work while the
-				keys are already slug-safe (`v1`…`v9`). Give a release a realistic
-				tag — `v3-1`, `2026-03` — and the raw key stops matching the slot
-				name, and every pane silently renders empty.
+				NORMALIZED key: `v3.0` becomes `v3_0`, so `#[release.key]` would
+				name a slot that never matches and every pane would silently render
+				empty. The keys here carry a dot on purpose — with slug-safe keys
+				(`v1`…`v9`) the mistake is invisible.
 			-->
 			<template
 				v-for="release in releases"
 				:key="release.key"
 				#[slotKey(release.key)]
 			>
-				<p class="pt-3 text-sm text-[color:var(--bb-text-muted)]">
+				<p class="pt-3 text-sm text-(--bb-text-muted)">
 					{{ release.label }} shipped the design-token overhaul and the tabs
 					keyboard-navigation pass.
 				</p>
@@ -711,12 +691,14 @@ const months = [
 	'August',
 	'September',
 ];
+// Realistic release tags: `v3.0` … `v3.8`. The dot is what makes the
+// `slotKey` call in the template load-bearing (see the note there).
 const releases: BbTabsItem[] = months.map((label, index) => ({
-	key: `v${index + 1}`,
-	label: `${label} 2026`,
+	key: `v3.${index}`,
+	label: `${label} · v3.${index}`,
 }));
 
-const active = ref('v1');
+const active = ref('v3.0');
 </script>
 ```
 
@@ -743,12 +725,10 @@ context; use nesting freely.
 
 ```vue
 <template>
-	<div
-		class="max-w-md rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3"
-	>
+	<div class="max-w-md rounded-(--bb-radius) border border-(--bb-border) p-3">
 		<div class="mb-3 flex flex-col gap-0.5">
 			<p class="text-sm font-medium">Acme Checkout</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Workspace · Prev/Next via root slot
 			</p>
 		</div>
@@ -775,21 +755,21 @@ context; use nesting freely.
 						</BbButton>
 					</div>
 				</div>
-				<hr class="my-3 border-[color:var(--bb-border)]" />
+				<hr class="my-3 border-(--bb-border)" />
 				<BbTabsPanes>
 					<template #overview>
-						<p class="text-sm text-[color:var(--bb-text-muted)]">
+						<p class="text-sm text-(--bb-text-muted)">
 							Health stable · owners Alex + Sam · objective: cut checkout
 							latency 20%.
 						</p>
 					</template>
 					<template #activity>
-						<p class="text-sm text-[color:var(--bb-text-muted)]">
+						<p class="text-sm text-(--bb-text-muted)">
 							Shipped billing retries; fixed avatar upload timeout.
 						</p>
 					</template>
 					<template #members>
-						<p class="text-sm text-[color:var(--bb-text-muted)]">
+						<p class="text-sm text-(--bb-text-muted)">
 							14 editors, 23 viewers, 3 billing admins.
 						</p>
 					</template>
@@ -852,7 +832,7 @@ the tabs jumps straight to the Security section:
 ```vue
 <template>
 	<div
-		class="max-w-md space-y-3 rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3"
+		class="max-w-md space-y-3 rounded-(--bb-radius) border border-(--bb-border) p-3"
 	>
 		<div class="grid gap-2">
 			<BbAlert
@@ -899,7 +879,7 @@ the tabs jumps straight to the Security section:
 			<template #security>
 				<div class="grid gap-1.5 pt-3 text-sm">
 					<p class="font-medium">Two-factor authentication</p>
-					<p class="text-xs text-[color:var(--bb-text-muted)]">
+					<p class="text-xs text-(--bb-text-muted)">
 						Off · last password change Mar 12, 2026 · 2 active sessions
 					</p>
 					<div class="pt-1">
@@ -910,15 +890,12 @@ the tabs jumps straight to the Security section:
 				</div>
 			</template>
 			<template #notifications>
-				<p class="pt-3 text-sm text-[color:var(--bb-text-muted)]">
+				<p class="pt-3 text-sm text-(--bb-text-muted)">
 					Email digests and mention alerts for alex@northwind.io.
 				</p>
 			</template>
 		</BbTabs>
-		<p
-			class="text-xs text-[color:var(--bb-text-muted)]"
-			data-test="active-section"
-		>
+		<p class="text-xs text-(--bb-text-muted)" data-test="active-section">
 			Active section: {{ current }}
 		</p>
 	</div>

package/dist/ai/BbTag.md

@@ -55,12 +55,10 @@ for the next.
 
 ```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 flex-col gap-0.5">
 			<span class="text-sm font-medium">Profile · Skills</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Shown on your public profile and in search
 			</span>
 		</div>
@@ -74,7 +72,7 @@ for the next.
 			persistent-hint
 			placeholder="Add a skill…"
 		/>
-		<p class="text-xs text-[color:var(--bb-text-muted)]" data-testid="count">
+		<p class="text-xs text-(--bb-text-muted)" data-testid="count">
 			{{ skills.length }} skill{{ skills.length === 1 ? '' : 's' }} shown on
 			your profile
 		</p>
@@ -105,12 +103,10 @@ up to the first delimiter.
 
 ```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">Issue #4821</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]"
+			<span class="text-xs text-(--bb-text-muted)"
 				>bitboss-ui · triage labels</span
 			>
 		</div>
@@ -124,7 +120,7 @@ up to the first delimiter.
 			persistent-hint
 			placeholder="bug, regression, breaking-change…"
 		/>
-		<p class="text-xs text-[color:var(--bb-text-muted)]" data-testid="labels">
+		<p class="text-xs text-(--bb-text-muted)" data-testid="labels">
 			{{ labels.join(' · ') || 'No labels yet' }}
 		</p>
 	</div>
@@ -168,12 +164,10 @@ when a remaining allowance hits the floor), not “unlimited”.
 
 ```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 flex-col gap-0.5">
 			<span class="text-sm font-medium">Invite to Acme Studio</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Up to 5 people · they get editor access
 			</span>
 		</div>
@@ -190,10 +184,7 @@ when a remaining allowance hits the floor), not “unlimited”.
 			@max="onMax"
 			@update:model-value="warning = ''"
 		/>
-		<p
-			class="text-xs text-[color:var(--bb-text-muted)]"
-			data-testid="invite-status"
-		>
+		<p class="text-xs text-(--bb-text-muted)" data-testid="invite-status">
 			{{ recipients.length }} / 5 invited<span v-if="warning">
 				— {{ warning }}</span
 			>
@@ -245,12 +236,10 @@ rarely. `clearable` still empties the whole field.
 
 ```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">Weekly digest</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Topics land as a compact comma list
 			</span>
 		</div>
@@ -263,7 +252,7 @@ rarely. `clearable` still empties the whole field.
 			name="topics"
 			placeholder="Add a topic…"
 		/>
-		<p class="text-xs text-[color:var(--bb-text-muted)]">
+		<p class="text-xs text-(--bb-text-muted)">
 			Your weekly digest covers {{ topics.length }} topics.
 		</p>
 	</div>

package/dist/ai/BbTextInput.md

@@ -55,10 +55,10 @@ label already plays that role and the two would overlap.
 
 ```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">Profile basics</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Same field, three label placements — pick one per product.
 			</p>
 		</div>
@@ -85,10 +85,10 @@ const inside = ref<string | null>('Bitboss');
 
 ```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">Workspace settings</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Required fields mark the label — keep the accessible name intact.
 			</p>
 		</div>
@@ -102,11 +102,7 @@ const inside = ref<string | null>('Bitboss');
 			<template #label="{ text, hasErrors }">
 				{{ text }}
 				<span
-					:class="
-						hasErrors
-							? 'text-[color:var(--bb-danger)]'
-							: 'text-[color:var(--bb-text-muted)]'
-					"
+					:class="hasErrors ? 'text-(--bb-danger)' : 'text-(--bb-text-muted)'"
 				>
 					*
 				</span>
@@ -171,10 +167,8 @@ validation layer should still drive `errors`.
 ```vue
 <template>
 	<div class="grid max-w-sm gap-3">
-		<div class="grid gap-2 rounded-[var(--bb-radius)] border p-3">
-			<p class="text-xs font-medium text-[color:var(--bb-text-muted)]">
-				Invite teammate
-			</p>
+		<div class="grid gap-2 rounded-(--bb-radius) border p-3">
+			<p class="text-xs font-medium text-(--bb-text-muted)">Invite teammate</p>
 			<BbTextInput
 				v-model="email"
 				compact
@@ -186,8 +180,8 @@ validation layer should still drive `errors`.
 				type="email"
 			/>
 		</div>
-		<div class="grid gap-2 rounded-[var(--bb-radius)] border p-3">
-			<p class="text-xs font-medium text-[color:var(--bb-text-muted)]">
+		<div class="grid gap-2 rounded-(--bb-radius) border p-3">
+			<p class="text-xs font-medium text-(--bb-text-muted)">
 				Non-blocking hint
 			</p>
 			<BbTextInput
@@ -199,7 +193,7 @@ validation layer should still drive `errors`.
 				:warnings="['This name is very short — is it what you meant?']"
 			/>
 		</div>
-		<div class="rounded-[var(--bb-radius)] border px-2 py-1.5">
+		<div class="rounded-(--bb-radius) border px-2 py-1.5">
 			<BbTextInput
 				v-model="search"
 				class="w-full"
@@ -258,10 +252,10 @@ The full slot ring, inside → out:
 
 ```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">Workspace & billing</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Icons and short affixes live inside the chrome; actions sit outside.
 			</p>
 		</div>
@@ -328,10 +322,10 @@ the status.
 
 ```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">Claim your handle</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Debounced check — spinner while pending, hint or error on result.
 			</p>
 		</div>
@@ -550,10 +544,10 @@ five carry `labelMode` and all five fall back to
 
 ```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>
 			<p class="text-sm font-medium">Billing contact</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Outside labels only — horizontal rows keep dense forms scannable.
 			</p>
 		</div>
@@ -591,10 +585,10 @@ const company = ref<string | null>('Bitboss');
 
 ```vue
 <template>
-	<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">
 		<div>
 			<p class="text-sm font-medium">Merino Tee — Black / M</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Product identifiers · compact density
 			</p>
 		</div>
@@ -655,7 +649,7 @@ submit, format checks on blur, errors cleared as the user fixes them.
 ```vue
 <template>
 	<form
-		class="grid max-w-md gap-3 rounded-[var(--bb-radius)] border p-4"
+		class="grid max-w-md gap-3 rounded-(--bb-radius) border p-4"
 		novalidate
 		@submit.prevent="submit"
 	>
@@ -663,7 +657,7 @@ submit, format checks on blur, errors cleared as the user fixes them.
 			<p class="text-sm font-medium">
 				Invoice for {{ customer || 'a new client' }}
 			</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Draft INV-2048 · validate on blur / submit, clear as they type
 			</p>
 		</div>