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

package/dist/ai/BbPagination.md

@@ -42,7 +42,7 @@ control instead.
 ```vue
 <div class="space-y-2">
 	<BbPagination v-model="state.page" :total-pages="24" />
-	<p class="text-xs text-[color:var(--bb-text-muted)]">On page {{ state.page ?? 1 }} of 24.</p>
+	<p class="text-xs text-(--bb-text-muted)">On page {{ state.page ?? 1 }} of 24.</p>
 </div>
 ```
 
@@ -96,29 +96,27 @@ list or table it drives.
 	<!-- Manual wire-up: the pager reports the page; you slice (or fetch) from it.
 	     Prefer this over `table-id` when the list is not a BbTable. -->
 	<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)"
 	>
-		<ul class="divide-y divide-[color:var(--bb-border)]">
+		<ul class="divide-y divide-(--bb-border)">
 			<li
 				v-for="invoice in pageItems"
 				:key="invoice.id"
 				class="flex items-center justify-between gap-2 px-3 py-2 text-sm"
 			>
 				<span class="font-medium tabular-nums">{{ invoice.number }}</span>
-				<span
-					class="min-w-0 flex-1 truncate text-[color:var(--bb-text-muted)]"
-					>{{ invoice.customer }}</span
-				>
-				<span
-					class="shrink-0 text-xs tabular-nums text-[color:var(--bb-text-muted)]"
-					>{{ invoice.amount }}</span
-				>
+				<span class="min-w-0 flex-1 truncate text-(--bb-text-muted)">{{
+					invoice.customer
+				}}</span>
+				<span class="shrink-0 text-xs text-(--bb-text-muted) tabular-nums">{{
+					invoice.amount
+				}}</span>
 			</li>
 		</ul>
 		<div
-			class="flex flex-wrap items-center justify-between gap-2 border-t border-[color:var(--bb-border)] px-3 py-2"
+			class="flex flex-wrap items-center justify-between gap-2 border-t border-(--bb-border) px-3 py-2"
 		>
-			<p class="text-xs text-[color:var(--bb-text-muted)]" data-test="range">
+			<p class="text-xs text-(--bb-text-muted)" data-test="range">
 				{{ rangeStart }}–{{ rangeEnd }} of {{ invoices.length }}
 			</p>
 			<BbPagination
@@ -178,10 +176,10 @@ their wiring; the slots only swap what is painted inside them.
 ```vue
 <template>
 	<div
-		class="max-w-sm space-y-2 rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3"
+		class="max-w-sm space-y-2 rounded-(--bb-radius) border border-(--bb-border) p-3"
 	>
 		<div
-			class="rounded-[var(--bb-radius)] bg-[color:var(--bb-muted)] px-3 py-8 text-center text-sm text-[color:var(--bb-text-muted)]"
+			class="rounded-(--bb-radius) bg-(--bb-muted) px-3 py-8 text-center text-sm text-(--bb-text-muted)"
 		>
 			Sheet {{ sheet }} of 18 · Q3 board pack
 		</div>
@@ -248,7 +246,7 @@ your own. Sit the pager in the table footer:
 	     `dependencies` wiring is needed — the provider just reads `page` from the
 	     same context the pager drives. -->
 	<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)"
 	>
 		<BbTable
 			id="audit-log"
@@ -259,9 +257,9 @@ your own. Sit the pager in the table footer:
 			:items="fetchEvents"
 		/>
 		<div
-			class="flex flex-wrap items-center justify-between gap-2 border-t border-[color:var(--bb-border)] px-3 py-2"
+			class="flex flex-wrap items-center justify-between gap-2 border-t border-(--bb-border) px-3 py-2"
 		>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				{{ rangeStart }}–{{ rangeEnd }} of {{ totalItems }}
 			</p>
 			<BbPagination label="Audit log pagination" table-id="audit-log" />
@@ -357,24 +355,24 @@ them in sync from then on:
 	     instead of walking every page click. Seed v-model from the route once —
 	     the control writes the URL, it does not read it at mount. -->
 	<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)"
 	>
-		<ul class="divide-y divide-[color:var(--bb-border)]">
+		<ul class="divide-y divide-(--bb-border)">
 			<li
 				v-for="row in pageItems"
 				:key="row.id"
 				class="flex items-center justify-between gap-2 px-3 py-2 text-sm"
 			>
 				<span class="font-medium">{{ row.label }}</span>
-				<span class="text-xs tabular-nums text-[color:var(--bb-text-muted)]">{{
+				<span class="text-xs text-(--bb-text-muted) tabular-nums">{{
 					row.when
 				}}</span>
 			</li>
 		</ul>
 		<div
-			class="flex flex-wrap items-center justify-between gap-2 border-t border-[color:var(--bb-border)] px-3 py-2"
+			class="flex flex-wrap items-center justify-between gap-2 border-t border-(--bb-border) px-3 py-2"
 		>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Page {{ page }} of {{ totalPages }}
 			</p>
 			<BbPagination

package/dist/ai/BbPopover.md

@@ -53,11 +53,11 @@ dismiss the panel.
 ```vue
 <template>
 	<div
-		class="flex max-w-sm items-center justify-between gap-3 rounded-[var(--bb-radius)] border p-3"
+		class="flex max-w-sm items-center justify-between gap-3 rounded-(--bb-radius) border p-3"
 	>
 		<div class="min-w-0">
 			<p class="truncate text-sm font-medium">Invoices</p>
-			<p class="truncate text-xs text-[color:var(--bb-text-muted)]">
+			<p class="truncate text-xs text-(--bb-text-muted)">
 				24 open · last synced 2m ago
 			</p>
 		</div>
@@ -102,11 +102,11 @@ a record and closes itself on save via the `close` callback.
 ```vue
 <template>
 	<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"
 	>
 		<div class="min-w-0">
 			<p class="truncate text-sm font-medium">{{ name }}</p>
-			<p class="truncate text-xs text-[color:var(--bb-text-muted)]">
+			<p class="truncate text-xs text-(--bb-text-muted)">
 				Shared report · edited today
 			</p>
 		</div>
@@ -173,10 +173,10 @@ the name, and the panel is pure content: any navigation ("View profile") is an
 ```vue
 <template>
 	<div
-		class="max-w-md rounded-[var(--bb-radius)] border p-3 text-sm text-[color:var(--bb-text-muted)]"
+		class="max-w-md rounded-(--bb-radius) border p-3 text-sm text-(--bb-text-muted)"
 	>
 		Deploy of
-		<span class="font-medium text-[var(--bb-text)]">invoice-export</span>
+		<span class="font-medium text-(--bb-text)">invoice-export</span>
 		approved by
 		<BbPopover placement="bottom-start" :width="280">
 			<template #activator="{ props }">
@@ -198,15 +198,15 @@ the name, and the panel is pure content: any navigation ("View profile") is an
 						<span>{{ member.initials }}</span>
 					</BbAvatar>
 					<div class="min-w-0">
-						<div class="truncate text-sm font-medium text-[var(--bb-text)]">
+						<div class="truncate text-sm font-medium text-(--bb-text)">
 							{{ member.name }}
 						</div>
-						<div class="truncate text-xs text-[color:var(--bb-text-muted)]">
+						<div class="truncate text-xs text-(--bb-text-muted)">
 							{{ member.role }}
 						</div>
 					</div>
 				</div>
-				<div class="grid gap-1 text-xs text-[color:var(--bb-text-muted)]">
+				<div class="grid gap-1 text-xs text-(--bb-text-muted)">
 					<div class="flex items-center gap-1.5">
 						<BbIcon icon="lucide:mail" size="xs" />
 						<span class="truncate">{{ member.email }}</span>
@@ -268,10 +268,10 @@ dismissible.
 
 ```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 flex-col gap-0.5">
 			<p class="text-sm font-medium">Invoice retention</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				How long paid invoices stay searchable in the workspace.
 			</p>
 		</div>
@@ -296,7 +296,7 @@ dismissible.
 				</template>
 				<div class="grid gap-2 text-sm">
 					<p class="m-0 font-medium">Retention period</p>
-					<p class="m-0 text-xs text-[color:var(--bb-text-muted)]">
+					<p class="m-0 text-xs text-(--bb-text-muted)">
 						Paid invoices older than this window are archived and drop out of
 						search. Drafts and unpaid invoices are never archived by retention.
 					</p>
@@ -375,13 +375,11 @@ utility (BbButton centers labels by default).
 ```vue
 <template>
 	<div
-		class="flex max-w-sm items-center justify-between gap-3 rounded-[var(--bb-radius)] border p-3"
+		class="flex max-w-sm items-center justify-between gap-3 rounded-(--bb-radius) border p-3"
 	>
 		<div class="min-w-0">
 			<p class="truncate text-sm font-medium">Acme Studio</p>
-			<p class="truncate text-xs text-[color:var(--bb-text-muted)]">
-				Workspace · Billing
-			</p>
+			<p class="truncate text-xs text-(--bb-text-muted)">Workspace · Billing</p>
 		</div>
 		<BbPopover scrollable :width="300">
 			<template #activator="{ props }">
@@ -466,7 +464,7 @@ actions, reach for `BbDropdown` instead.)
 			<button
 				v-bind="props"
 				type="button"
-				class="grid h-24 w-full place-items-center rounded-[var(--bb-radius)] border border-dashed text-sm text-[color:var(--bb-text-muted)]"
+				class="grid h-24 w-full place-items-center rounded-(--bb-radius) border border-dashed text-sm text-(--bb-text-muted)"
 			>
 				Right-click anywhere here
 			</button>

package/dist/ai/BbProgress.md

@@ -28,7 +28,7 @@ one-way `:model-value` binding and keep the source of truth in your state.
 <div class="max-w-sm flex flex-col gap-2">
 	<div class="flex justify-between text-sm">
 		<span>Profile completeness</span>
-		<span class="text-[color:var(--bb-text-muted)]">60%</span>
+		<span class="text-(--bb-text-muted)">60%</span>
 	</div>
 	<BbProgress :model-value="60" />
 </div>
@@ -46,17 +46,15 @@ hook (a theme token — never a hardcoded hex).
 
 ```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">
 				<span class="text-sm font-medium">Storage</span>
-				<span class="text-xs text-[color:var(--bb-text-muted)]">
+				<span class="text-xs text-(--bb-text-muted)">
 					Northwind Billing · Team plan
 				</span>
 			</div>
-			<span class="text-xs tabular-nums text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted) tabular-nums">
 				{{ usedGb }} / {{ maxGb }} GB
 			</span>
 		</div>
@@ -71,7 +69,7 @@ hook (a theme token — never a hardcoded hex).
 		/>
 
 		<div class="flex items-center justify-between gap-3">
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				{{ remainingGb }} GB free
 				<template v-if="nearLimit"> · nearly full</template>
 			</span>
@@ -105,7 +103,7 @@ transition.
 <div class="max-w-sm flex flex-col gap-2">
 	<div class="flex justify-between text-sm">
 		<span>Q3 sales target</span>
-		<span class="text-[color:var(--bb-text-muted)]">€310k of the €250–370k band</span>
+		<span class="text-(--bb-text-muted)">€310k of the €250–370k band</span>
 	</div>
 	<BbProgress :min="250" :max="370" :model-value="310" />
 </div>
@@ -120,17 +118,13 @@ percentage label is derived from the same source of truth.
 
 ```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 justify-between gap-3">
 			<span class="flex min-w-0 items-center gap-2 text-sm font-medium">
 				<BbIcon icon="lucide:file-up" size="sm" />
 				<span class="truncate">quarterly-report.pdf</span>
 			</span>
-			<span
-				class="shrink-0 text-xs tabular-nums text-[color:var(--bb-text-muted)]"
-			>
+			<span class="shrink-0 text-xs text-(--bb-text-muted) tabular-nums">
 				{{ uploadedMb }} / {{ totalMb }} MB
 			</span>
 		</div>
@@ -143,7 +137,7 @@ percentage label is derived from the same source of truth.
 		/>
 
 		<div class="flex items-center justify-between gap-3">
-			<span class="text-xs tabular-nums text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted) tabular-nums">
 				{{ percent }}% uploaded
 			</span>
 			<BbButton
@@ -207,17 +201,13 @@ emits nothing.
 
 ```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 justify-between gap-3">
 			<span class="flex min-w-0 items-center gap-2 text-sm font-medium">
 				<BbIcon icon="lucide:file-spreadsheet" size="sm" />
 				<span class="truncate">contacts.csv</span>
 			</span>
-			<span
-				class="shrink-0 text-xs tabular-nums text-[color:var(--bb-text-muted)]"
-			>
+			<span class="shrink-0 text-xs text-(--bb-text-muted) tabular-nums">
 				{{ statusLabel }}
 			</span>
 		</div>
@@ -232,7 +222,7 @@ emits nothing.
 		<!-- Unmeasurable phase: swap to a spinner — never fake a creeping bar. -->
 		<div
 			v-else-if="phase === 'processing'"
-			class="flex items-center gap-2 text-sm text-[color:var(--bb-text-muted)]"
+			class="flex items-center gap-2 text-sm text-(--bb-text-muted)"
 			role="status"
 		>
 			<BbSpinner size="sm" />
@@ -243,7 +233,17 @@ emits nothing.
 			1,284 contacts imported
 		</div>
 
-		<div class="flex justify-end">
+		<div class="flex justify-end gap-2">
+			<!-- Demo control: one click = one chunk sent, then the server's
+			     "done". In an app the transfer and the job's completion drive
+			     these; nothing here ticks on its own. -->
+			<BbButton
+				v-if="phase === 'uploading' || phase === 'processing'"
+				prepend:icon="lucide:step-forward"
+				:text="phase === 'uploading' ? 'Send next chunk' : 'Processing done'"
+				variant="ghost"
+				@click="onAdvance"
+			/>
 			<BbButton
 				:disabled="phase === 'uploading' || phase === 'processing'"
 				prepend:icon="lucide:upload"
@@ -256,25 +256,19 @@ emits nothing.
 </template>
 
 <script setup lang="ts">
-import { computed, onUnmounted, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { BbButton, BbIcon, BbProgress, BbSpinner } from 'bitboss-ui';
 
 type Phase = 'idle' | 'uploading' | 'processing' | 'done';
 
-// Simulated transfer: the upload is measurable (bytes sent), the server-side
-// row parsing that follows is not — that boundary is where the bar hands off
-// to BbSpinner.
+// The upload is measurable (bytes sent), the server-side row parsing that
+// follows is not — that boundary is where the bar hands off to BbSpinner.
 const totalKb = 640;
-const chunkKb = 80;
+const chunkKb = 160;
 
 const phase = ref<Phase>('idle');
 const sentKb = ref(0);
 
-let timer: ReturnType<typeof setInterval> | undefined;
-onUnmounted(() => {
-	if (timer !== undefined) clearInterval(timer);
-});
-
 const statusLabel = computed(() => {
 	if (phase.value === 'uploading') return `${sentKb.value} / ${totalKb} KB`;
 	if (phase.value === 'processing') return 'Upload complete';
@@ -282,19 +276,18 @@ const statusLabel = computed(() => {
 	return `${totalKb} KB`;
 });
 
-/** Run the upload → processing → done sequence with deterministic timers. */
 const onStartImport = () => {
 	phase.value = 'uploading';
 	sentKb.value = 0;
-	timer = setInterval(() => {
+};
+
+const onAdvance = () => {
+	if (phase.value === 'uploading') {
 		sentKb.value = Math.min(totalKb, sentKb.value + chunkKb);
-		if (sentKb.value < totalKb) return;
-		if (timer !== undefined) clearInterval(timer);
-		phase.value = 'processing';
-		setTimeout(() => {
-			phase.value = 'done';
-		}, 500);
-	}, 70);
+		if (sentKb.value === totalKb) phase.value = 'processing';
+		return;
+	}
+	if (phase.value === 'processing') phase.value = 'done';
 };
 </script>
 ```
@@ -309,17 +302,13 @@ fill transition animates each advance for free.
 
 ```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 justify-between gap-3">
 			<div class="flex flex-col gap-0.5">
 				<span class="text-sm font-medium">Workspace setup</span>
-				<span class="text-xs text-[color:var(--bb-text-muted)]">{{
-					steps[step]
-				}}</span>
+				<span class="text-xs text-(--bb-text-muted)">{{ steps[step] }}</span>
 			</div>
-			<span class="text-xs tabular-nums text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted) tabular-nums">
 				Step {{ step + 1 }} of {{ steps.length }}
 			</span>
 		</div>
@@ -336,7 +325,7 @@ fill transition animates each advance for free.
 				v-for="(label, index) in steps"
 				:key="label"
 				class="flex items-center gap-2 text-sm"
-				:class="index <= step ? '' : 'text-[color:var(--bb-text-muted)]'"
+				:class="index <= step ? '' : 'text-(--bb-text-muted)'"
 			>
 				<BbIcon
 					:icon="index < step ? 'lucide:circle-check' : 'lucide:circle'"
@@ -459,7 +448,7 @@ What's still on you:
 <div class="max-w-sm flex flex-col gap-2">
 	<div class="flex justify-between text-sm">
 		<span>Storage used</span>
-		<span class="text-[color:var(--bb-text-muted)]">220 / 500 GB</span>
+		<span class="text-(--bb-text-muted)">220 / 500 GB</span>
 	</div>
 	<BbProgress
 		aria-label="Storage used"

package/dist/ai/BbRadio.md

@@ -50,18 +50,18 @@ name (see Accessibility).
 	>
 		<div class="flex flex-col gap-0.5">
 			<p class="text-sm font-medium">Workspace plan</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Billed monthly · cancel anytime
 			</p>
 		</div>
 		<div
 			v-for="plan in plans"
 			:key="plan.value"
-			class="flex items-start justify-between gap-3 rounded-[var(--bb-radius)] border p-2.5"
+			class="flex items-start justify-between gap-3 rounded-(--bb-radius) border p-2.5"
 			:class="
 				selected === plan.value
-					? 'border-[color:var(--bb-primary)]'
-					: 'border-[color:var(--bb-border)]'
+					? 'border-(--bb-primary)'
+					: 'border-(--bb-border)'
 			"
 		>
 			<BbRadio
@@ -75,7 +75,7 @@ name (see Accessibility).
 				{{ plan.price }}
 			</span>
 		</div>
-		<p class="plan-summary text-xs text-[color:var(--bb-text-muted)]">
+		<p class="plan-summary text-xs text-(--bb-text-muted)">
 			Selected plan: {{ selected }}
 		</p>
 	</div>
@@ -147,7 +147,7 @@ amber and red at once.
 **Readonly, error and disabled**
 
 ```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">
 	<BbRadio
 		:model-value="'locked'"
 		value="locked"
@@ -207,12 +207,12 @@ individual `BbRadio` buttons.
 <template>
 	<div
 		aria-label="Merge method"
-		class="grid max-w-sm gap-2 rounded-[var(--bb-radius)] border p-3"
+		class="grid max-w-sm gap-2 rounded-(--bb-radius) border p-3"
 		role="radiogroup"
 	>
 		<div class="flex flex-col gap-0.5">
 			<p class="text-sm font-medium">Merge pull request #482</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				feature/invoice-export → main
 			</p>
 		</div>
@@ -244,7 +244,7 @@ individual `BbRadio` buttons.
 			name="merge-method"
 			value="rebase"
 		/>
-		<p class="merge-summary text-xs text-[color:var(--bb-text-muted)]">
+		<p class="merge-summary text-xs text-(--bb-text-muted)">
 			Pull request #482 will be merged via {{ labels[strategy] }}.
 		</p>
 	</div>

package/dist/ai/BbRadioGroup.md

@@ -40,9 +40,7 @@ wins) — see the
 
 ```vue
 <template>
-	<div
-		class="flex max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-4"
-	>
+	<div class="flex max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-4">
 		<BbRadioGroup
 			v-model="plan"
 			compact
@@ -53,7 +51,7 @@ wins) — see the
 			legend="Subscription plan"
 			name="plan"
 		/>
-		<p class="plan-summary text-xs text-[var(--bb-text-muted)]">
+		<p class="plan-summary text-xs text-(--bb-text-muted)">
 			Selected: {{ plan }}
 		</p>
 	</div>
@@ -109,7 +107,7 @@ from `v-model` inline.
 
 ```vue
 <template>
-	<div class="max-w-sm rounded-[var(--bb-radius)] border p-4">
+	<div class="max-w-sm rounded-(--bb-radius) border p-4">
 		<BbRadioGroup
 			v-model="speed"
 			compact
@@ -159,7 +157,7 @@ it participates in native form validation. `legend-mode` places the legend
 
 ```vue
 <template>
-	<div class="max-w-sm rounded-[var(--bb-radius)] border p-4">
+	<div class="max-w-sm rounded-(--bb-radius) border p-4">
 		<BbRadioGroup
 			v-model="cycle"
 			compact
@@ -234,9 +232,7 @@ valid yet" and gate the submit on it.
 
 ```vue
 <template>
-	<div
-		class="flex max-w-md flex-col gap-3 rounded-[var(--bb-radius)] border p-4"
-	>
+	<div class="flex max-w-md flex-col gap-3 rounded-(--bb-radius) border p-4">
 		<BbRadioGroup
 			v-model="branch"
 			compact
@@ -262,7 +258,7 @@ valid yet" and gate the submit on it.
 			name="merge-strategy"
 			persistent-hint
 		/>
-		<p class="strategy-summary text-xs text-[var(--bb-text-muted)]">
+		<p class="strategy-summary text-xs text-(--bb-text-muted)">
 			Strategy: {{ strategy ?? 'none selected' }}
 		</p>
 	</div>
@@ -334,7 +330,7 @@ modifier class when checked — style off that, not a `:has()` selector.
 
 ```vue
 <template>
-	<div class="max-w-md rounded-[var(--bb-radius)] border p-4">
+	<div class="max-w-md rounded-(--bb-radius) border p-4">
 		<BbRadioGroup
 			v-model="theme"
 			class="theme-tiles"

package/dist/ai/BbRating.md

@@ -78,7 +78,7 @@ sample size next to the stars.
 ```vue
 <BbRating :model-value="4" readonly legend="Average rating" name="avg">
 	<template #append>
-		<span class="text-sm text-[color:var(--bb-text-muted)]">4.0 · 128 reviews</span>
+		<span class="text-sm text-(--bb-text-muted)">4.0 · 128 reviews</span>
 	</template>
 </BbRating>
 ```
@@ -138,12 +138,10 @@ from the `size` prop through the shared scale — pass it straight to `BbIcon`'s
 
 ```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">Pulse · App Store</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]"
+			<span class="text-xs text-(--bb-text-muted)"
 				>How much do you love it?</span
 			>
 		</div>
@@ -155,9 +153,7 @@ from the `size` prop through the shared scale — pass it straight to `BbIcon`'s
 		>
 			<template #icon="{ checked, size }">
 				<BbIcon
-					:class="
-						checked ? 'text-rose-500' : 'text-[color:var(--bb-text-faint)]'
-					"
+					:class="checked ? 'text-rose-500' : 'text-(--bb-text-faint)'"
 					icon="lucide:heart"
 					:size="size"
 				/>
@@ -201,13 +197,13 @@ as the user picks a value.
 ```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"
 		novalidate
 		@submit.prevent
 	>
 		<div class="flex flex-col gap-0.5">
 			<span class="text-sm font-medium">How was your order?</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">
+			<span class="text-xs text-(--bb-text-muted)">
 				Order #10482 · delivered Jul 8, 2026
 			</span>
 		</div>
@@ -221,7 +217,7 @@ as the user picks a value.
 			required
 			@update:model-value="onScoreChange"
 		/>
-		<p class="text-sm text-[color:var(--bb-text-muted)]" data-testid="score">
+		<p class="text-sm text-(--bb-text-muted)" data-testid="score">
 			{{ score === null ? 'Not rated yet' : `${score}/5 — ${labels[score]}` }}
 		</p>
 		<BbTextarea
@@ -238,7 +234,7 @@ as the user picks a value.
 			<BbButton variant="primary" @click="submit">Submit review</BbButton>
 			<span
 				v-if="sent"
-				class="text-xs text-[color:var(--bb-text-muted)]"
+				class="text-xs text-(--bb-text-muted)"
 				data-testid="sent"
 			>
 				Thanks — review received.