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

package/dist/ai/BbAvatar.md

@@ -38,6 +38,10 @@ accessible name.
 **Photo, initials, and the built-in fallback**
 
 ```vue
+<!-- Any image URL works. `timeout` is the deadline before the fallback shows
+     (default 400ms, meant for SSR/slow networks); a remote origin like this
+     one needs the headroom or the initials flash in first — see "Slow
+     networks, SSR and the timeout prop" below. -->
 <div class="flex items-center gap-3">
 	<BbAvatar
 		size="56"
@@ -147,12 +151,12 @@ separates them with a panel-colored ring (an explicit override of the
 ```vue
 <template>
 	<div
-		class="flex max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-3 text-sm"
+		class="flex max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-3 text-sm"
 	>
 		<div class="flex items-center justify-between gap-2">
 			<div class="flex flex-col gap-0.5">
 				<span class="font-medium">Design review</span>
-				<span class="text-xs text-[color:var(--bb-text-muted)]">
+				<span class="text-xs text-(--bb-text-muted)">
 					PR #842 · {{ reviewers.length }} reviewers
 				</span>
 			</div>
@@ -168,7 +172,7 @@ separates them with a panel-colored ring (an explicit override of the
 				:alt="reviewer.name"
 				size="40"
 				:src="reviewer.src"
-				:timeout="demoAvatarTimeout"
+				:timeout="avatarTimeout"
 			>
 				{{ reviewer.initials }}
 			</BbAvatar>
@@ -186,7 +190,20 @@ separates them with a panel-colored ring (an explicit override of the
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { BbAvatar, BbButton } from 'bitboss-ui';
-import { demoAvatarTimeout, demoFaces } from './demoAvatars';
+
+// Self-contained demo data. Any image URL works here — these are stock
+// portraits; swap in your own. `timeout` is BbAvatar's deadline before the
+// fallback shows (default 400ms, meant for SSR/slow networks): a remote demo
+// origin needs headroom or the initials flash in first. See the guide §
+// "Slow networks, SSR and the timeout prop".
+const avatarTimeout = 4000;
+const face = (photoId: string) =>
+	`https://images.unsplash.com/${photoId}?w=256&h=256&fit=crop&crop=faces&auto=format`;
+const faces = {
+	ada: face('photo-1494790108377-be9c29b29330'),
+	alan: face('photo-1507003211169-0a1dd7228f2d'),
+	margaret: face('photo-1580489944761-15a19d654956'),
+};
 
 type Reviewer = {
 	name: string;
@@ -197,11 +214,11 @@ type Reviewer = {
 // The overflow indicator is just another avatar with the count in its slot —
 // same size, same ring, no special markup.
 const reviewers: Reviewer[] = [
-	{ name: 'Ada Lovelace', src: demoFaces.ada },
+	{ name: 'Ada Lovelace', src: faces.ada },
 	{ name: 'Grace Hopper', initials: 'GH' },
-	{ name: 'Alan Turing', src: demoFaces.alan },
+	{ name: 'Alan Turing', src: faces.alan },
 	{ name: 'Katherine Johnson', initials: 'KJ' },
-	{ name: 'Margaret Hamilton', src: demoFaces.margaret },
+	{ name: 'Margaret Hamilton', src: faces.margaret },
 ];
 const maxVisible = 3;
 
@@ -242,12 +259,12 @@ list — the row markup stays identical whether a member has a photo or not.
 ```vue
 <template>
 	<div
-		class="flex max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-3 text-sm"
+		class="flex max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-3 text-sm"
 	>
 		<div class="flex items-center justify-between gap-2">
 			<div class="flex flex-col gap-0.5">
 				<span class="font-medium">Team</span>
-				<span class="text-xs text-[color:var(--bb-text-muted)]">
+				<span class="text-xs text-(--bb-text-muted)">
 					{{ visible.length }} of {{ members.length }} members
 				</span>
 			</div>
@@ -274,14 +291,14 @@ list — the row markup stays identical whether a member has a photo or not.
 						:alt="member.name"
 						size="40"
 						:src="member.src"
-						:timeout="demoAvatarTimeout"
+						:timeout="avatarTimeout"
 					>
 						{{ member.initials }}
 					</BbAvatar>
 				</BbIndicator>
 				<span class="flex min-w-0 flex-1 flex-col">
 					<span class="truncate font-medium">{{ member.name }}</span>
-					<span class="truncate text-xs text-[color:var(--bb-text-muted)]">
+					<span class="truncate text-xs text-(--bb-text-muted)">
 						{{ member.role }} · {{ member.online ? 'Online' : 'Away' }}
 					</span>
 				</span>
@@ -293,7 +310,19 @@ list — the row markup stays identical whether a member has a photo or not.
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { BbAvatar, BbIndicator, BbButton } from 'bitboss-ui';
-import { demoAvatarTimeout, demoFaces } from './demoAvatars';
+
+// Self-contained demo data. Any image URL works here — these are stock
+// portraits; swap in your own. `timeout` is BbAvatar's deadline before the
+// fallback shows (default 400ms, meant for SSR/slow networks): a remote demo
+// origin needs headroom or the initials flash in first. See the guide §
+// "Slow networks, SSR and the timeout prop".
+const avatarTimeout = 4000;
+const face = (photoId: string) =>
+	`https://images.unsplash.com/${photoId}?w=256&h=256&fit=crop&crop=faces&auto=format`;
+const faces = {
+	ada: face('photo-1494790108377-be9c29b29330'),
+	alan: face('photo-1507003211169-0a1dd7228f2d'),
+};
 
 type Member = {
 	name: string;
@@ -310,7 +339,7 @@ const members: Member[] = [
 		name: 'Ada Lovelace',
 		role: 'Engineering',
 		online: true,
-		src: demoFaces.ada,
+		src: faces.ada,
 	},
 	{
 		name: 'Grace Hopper',
@@ -322,7 +351,7 @@ const members: Member[] = [
 		name: 'Alan Turing',
 		role: 'Research',
 		online: false,
-		src: demoFaces.alan,
+		src: faces.alan,
 	},
 	{
 		name: 'Katherine Johnson',
@@ -362,13 +391,11 @@ it for you.
 ```vue
 <template>
 	<div
-		class="flex max-w-sm flex-col gap-3 rounded-[var(--bb-radius)] border p-3 text-sm"
+		class="flex max-w-sm flex-col gap-3 rounded-(--bb-radius) border p-3 text-sm"
 	>
 		<div class="flex items-center justify-between gap-2">
 			<span class="font-medium">Release activity</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]"
-				>main · production</span
-			>
+			<span class="text-xs text-(--bb-text-muted)">main · production</span>
 		</div>
 
 		<ul class="flex flex-col gap-2">
@@ -377,7 +404,7 @@ it for you.
 					:alt="entry.actor"
 					size="40"
 					:src="entry.src"
-					:timeout="demoAvatarTimeout"
+					:timeout="avatarTimeout"
 				>
 					<BbIcon v-if="entry.bot" :icon="releaseBotMark" size="sm" />
 					<template v-else>{{ entry.initials }}</template>
@@ -387,9 +414,7 @@ it for you.
 						<span class="font-medium">{{ entry.actor }}</span>
 						{{ entry.action }}
 					</span>
-					<span class="text-xs text-[color:var(--bb-text-muted)]">{{
-						entry.time
-					}}</span>
+					<span class="text-xs text-(--bb-text-muted)">{{ entry.time }}</span>
 				</span>
 			</li>
 		</ul>
@@ -402,7 +427,18 @@ import { BbAvatar, BbIcon } from 'bitboss-ui';
 // brand art that lives in no icon collection. It paints in `currentColor`,
 // so on the avatar's fallback surface it inherits `--bb-primary-fg`.
 import releaseBotMark from '@/assets/icons/sparkles.svg?raw';
-import { demoAvatarTimeout, demoFaces } from './demoAvatars';
+
+// Self-contained demo data. Any image URL works here — these are stock
+// portraits; swap in your own. `timeout` is BbAvatar's deadline before the
+// fallback shows (default 400ms, meant for SSR/slow networks): a remote demo
+// origin needs headroom or the initials flash in first. See the guide §
+// "Slow networks, SSR and the timeout prop".
+const avatarTimeout = 4000;
+const face = (photoId: string) =>
+	`https://images.unsplash.com/${photoId}?w=256&h=256&fit=crop&crop=faces&auto=format`;
+const faces = {
+	ada: face('photo-1494790108377-be9c29b29330'),
+};
 
 type FeedEntry = {
 	id: number;
@@ -429,7 +465,7 @@ const feed: FeedEntry[] = [
 		actor: 'Ada Lovelace',
 		action: 'approved the release',
 		time: '14 minutes ago',
-		src: demoFaces.ada,
+		src: faces.ada,
 		initials: 'AL',
 	},
 	{

package/dist/ai/BbBadge.md

@@ -62,12 +62,10 @@ the soft palette from
 
 ```vue
 <template>
-	<div
-		class="flex max-w-md flex-col gap-3 rounded-[var(--bb-radius)] border p-3"
-	>
+	<div class="flex max-w-md flex-col gap-3 rounded-(--bb-radius) border p-3">
 		<div class="flex flex-col gap-0.5">
 			<p class="text-sm font-medium">Invoice status</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Soft accents for a small, fixed status set — not every row color.
 			</p>
 		</div>
@@ -80,16 +78,14 @@ the soft palette from
 			>
 				<span class="min-w-0 truncate">
 					<span class="font-medium">{{ row.number }}</span>
-					<span class="text-[color:var(--bb-text-muted)]">
-						· {{ row.client }}</span
-					>
+					<span class="text-(--bb-text-muted)"> · {{ row.client }}</span>
 				</span>
 				<BbBadge size="sm" :variant="row.variant">{{ row.status }}</BbBadge>
 			</li>
 		</ul>
 
 		<div class="flex flex-wrap items-center gap-1.5 border-t pt-3">
-			<span class="mr-1 text-xs text-[color:var(--bb-text-muted)]">Plan</span>
+			<span class="mr-1 text-xs text-(--bb-text-muted)">Plan</span>
 			<BbBadge size="sm" variant="soft-gray">Free</BbBadge>
 			<BbBadge size="sm" variant="soft-blue">Pro</BbBadge>
 			<BbBadge size="sm" variant="soft-amber">Enterprise</BbBadge>
@@ -186,17 +182,15 @@ yourself (`99+`) — there is no `max` prop.
 <template>
 	<nav
 		aria-label="Mail folders"
-		class="flex max-w-56 flex-col gap-0.5 rounded-[var(--bb-radius)] border p-1.5 text-sm"
+		class="flex max-w-56 flex-col gap-0.5 rounded-(--bb-radius) border p-1.5 text-sm"
 	>
 		<a
 			v-for="folder in folders"
 			:key="folder.href"
 			:aria-current="folder.active ? 'page' : undefined"
-			class="flex items-center justify-between gap-2 rounded-[var(--bb-radius-sm)] px-2 py-1"
+			class="flex items-center justify-between gap-2 rounded-(--bb-radius-sm) px-2 py-1"
 			:class="
-				folder.active
-					? 'bg-[color:var(--bb-muted)] font-medium'
-					: 'text-[color:var(--bb-text)]'
+				folder.active ? 'bg-(--bb-muted) font-medium' : 'text-(--bb-text)'
 			"
 			:href="folder.href"
 		>
@@ -355,16 +349,14 @@ button. Reserve `sm` for dense in-table status pills, and omit `size`
 
 ```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-center justify-between gap-2">
 			<p class="text-sm font-medium">Invoices</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">{{ resultLabel }}</p>
+			<p class="text-xs text-(--bb-text-muted)">{{ resultLabel }}</p>
 		</div>
 
 		<div class="flex flex-wrap items-center gap-1.5">
-			<span class="text-xs text-[color:var(--bb-text-muted)]">Filtered by</span>
+			<span class="text-xs text-(--bb-text-muted)">Filtered by</span>
 			<BbBadge
 				v-for="filter in filters"
 				:key="filter.id"
@@ -539,9 +531,9 @@ anchor an overlay directly — no wrapper element, no `defineExpose`:
 ```vue
 <template>
 	<div
-		class="flex max-w-sm flex-wrap items-center gap-2 rounded-[var(--bb-radius)] border p-3"
+		class="flex max-w-sm flex-wrap items-center gap-2 rounded-(--bb-radius) border p-3"
 	>
-		<span class="text-xs text-[color:var(--bb-text-muted)]">Filters</span>
+		<span class="text-xs text-(--bb-text-muted)">Filters</span>
 
 		<BbBadge
 			append:icon="lucide:chevron-down"

package/dist/ai/BbBaseButton.md

@@ -65,27 +65,27 @@ primitive brings no look of its own):
 	<div class="flex flex-wrap items-center gap-2 text-sm">
 		<!-- No href/to → a native <button>. -->
 		<BbBaseButton
-			class="rounded-[var(--bb-radius)] bg-[var(--bb-primary)] px-3 py-1.5 text-[var(--bb-primary-fg)]"
+			class="rounded-(--bb-radius) bg-(--bb-primary) px-3 py-1.5 text-(--bb-primary-fg)"
 			@click="pinged = true"
 		>
 			Native button
 		</BbBaseButton>
 		<!-- Same-origin href → an <a>. -->
 		<BbBaseButton
-			class="rounded-[var(--bb-radius)] px-3 py-1.5 text-[color:var(--bb-primary)] underline"
+			class="rounded-(--bb-radius) px-3 py-1.5 text-(--bb-primary) underline"
 			href="#docs"
 		>
 			Anchor link
 		</BbBaseButton>
 		<!-- href + target → a plain <a target="_blank"> with rel secured. -->
 		<BbBaseButton
-			class="rounded-[var(--bb-radius)] px-3 py-1.5 underline"
+			class="rounded-(--bb-radius) px-3 py-1.5 underline"
 			href="https://example.com"
 			target="_blank"
 		>
 			External ↗
 		</BbBaseButton>
-		<span class="text-xs text-[color:var(--bb-text-muted)]">{{
+		<span class="text-xs text-(--bb-text-muted)">{{
 			pinged ? 'button clicked' : ''
 		}}</span>
 	</div>
@@ -120,7 +120,7 @@ the right base for a clickable card or a bespoke nav item:
 	<!-- Styled entirely by utility classes — neutral hover chrome. -->
 	<BbBaseButton
 		href="#b"
-		class="rounded-[var(--bb-radius)] border border-[var(--bb-border)] px-3 py-1 font-medium hover:bg-[color:var(--bb-hover)]"
+		class="rounded-(--bb-radius) border border-(--bb-border) px-3 py-1 font-medium hover:bg-(--bb-hover)"
 	>
 		Branded pill
 	</BbBaseButton>
@@ -140,21 +140,19 @@ A whole card as a single navigable element — the primitive's signature use:
 		<BbBaseButton
 			v-for="project in projects"
 			:key="project.name"
-			class="project-card flex flex-col items-start gap-1.5 rounded-[var(--bb-radius)] border border-[var(--bb-border)] bg-[var(--bb-panel)] p-3 text-left hover:bg-[color:var(--bb-surface-hover)]"
+			class="project-card flex flex-col items-start gap-1.5 rounded-(--bb-radius) border border-(--bb-border) bg-(--bb-panel) p-3 text-left hover:bg-(--bb-surface-hover)"
 			:href="project.href"
 		>
 			<span class="flex w-full items-center justify-between gap-2">
 				<span
-					class="flex size-7 shrink-0 items-center justify-center rounded-[var(--bb-radius-sm)] bg-[color:var(--bb-muted)] text-[color:var(--bb-text-muted)]"
+					class="flex size-7 shrink-0 items-center justify-center rounded-(--bb-radius-sm) bg-(--bb-muted) text-(--bb-text-muted)"
 				>
 					<BbIcon :icon="project.icon" size="sm" />
 				</span>
 				<BbBadge variant="secondary">{{ project.status }}</BbBadge>
 			</span>
 			<span class="text-sm font-medium">{{ project.name }}</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]">{{
-				project.meta
-			}}</span>
+			<span class="text-xs text-(--bb-text-muted)">{{ project.meta }}</span>
 		</BbBaseButton>
 	</div>
 </template>
@@ -269,7 +267,7 @@ The classic home for this is a settings sidebar — every item is a bare
 <template>
 	<nav
 		aria-label="Settings"
-		class="grid w-full max-w-xs gap-0.5 rounded-[var(--bb-radius)] border border-[var(--bb-border)] bg-[var(--bb-panel)] p-1.5"
+		class="grid w-full max-w-xs gap-0.5 rounded-(--bb-radius) border border-(--bb-border) bg-(--bb-panel) p-1.5"
 	>
 		<!-- Each nav item is a bare BbBaseButton: element resolution and active
 		     matching come from the primitive, the entire look comes from these
@@ -279,7 +277,7 @@ The classic home for this is a settings sidebar — every item is a bare
 			v-for="item in items"
 			:key="item.label"
 			block
-			class="settings-nav-item flex items-center gap-2 rounded-[var(--bb-radius-sm)] px-2 py-1.5 text-left text-sm text-[color:var(--bb-text-muted)] hover:bg-[color:var(--bb-hover)] hover:text-[color:var(--bb-text)]"
+			class="settings-nav-item flex items-center gap-2 rounded-(--bb-radius-sm) px-2 py-1.5 text-left text-sm text-(--bb-text-muted) hover:bg-(--bb-hover) hover:text-(--bb-text)"
 			exact-active-class="settings-nav-active"
 			:href="item.href"
 		>
@@ -347,7 +345,7 @@ attribute. On a link it keeps the element in place but strips navigation: the
 <div class="flex items-center gap-2 text-sm">
 	<BbBaseButton
 		disabled
-		class="rounded-[var(--bb-radius)] bg-[var(--bb-primary)] px-3 py-1.5 text-[var(--bb-primary-fg)] opacity-50"
+		class="rounded-(--bb-radius) bg-(--bb-primary) px-3 py-1.5 text-(--bb-primary-fg) opacity-50"
 	>
 		Disabled button
 	</BbBaseButton>
@@ -379,11 +377,11 @@ When it renders as a native button you can retune the element:
 ```vue
 <template>
 	<form
-		class="grid max-w-xs gap-2 rounded-[var(--bb-radius)] border border-[var(--bb-border)] bg-[var(--bb-panel)] p-3"
+		class="grid max-w-xs gap-2 rounded-(--bb-radius) border border-(--bb-border) bg-(--bb-panel) p-3"
 		@submit.prevent="sent = true"
 	>
 		<p class="text-sm font-medium">New workspace</p>
-		<p class="text-xs text-[color:var(--bb-text-muted)]">
+		<p class="text-xs text-(--bb-text-muted)">
 			{{
 				sent
 					? 'Submitted via the native form event.'
@@ -392,7 +390,7 @@ When it renders as a native button you can retune the element:
 		</p>
 		<BbBaseButton
 			block
-			class="rounded-[var(--bb-radius)] bg-[var(--bb-primary)] px-3 py-1.5 text-sm text-[var(--bb-primary-fg)]"
+			class="rounded-(--bb-radius) bg-(--bb-primary) px-3 py-1.5 text-sm text-(--bb-primary-fg)"
 			type="submit"
 		>
 			Create workspace

package/dist/ai/BbBaseCheckboxIcon.md

@@ -51,12 +51,10 @@ around it.
 
 ```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">Invoice alerts</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Northwind · overdue notices for INV-1042 and later
 			</p>
 		</div>
@@ -66,11 +64,11 @@ around it.
 			<label
 				v-for="channel in channels"
 				:key="channel.id"
-				class="flex cursor-pointer items-center gap-2.5 rounded-[var(--bb-radius)] border p-2.5 transition-colors"
+				class="flex cursor-pointer items-center gap-2.5 rounded-(--bb-radius) border p-2.5 transition-colors"
 				:class="
 					selected.includes(channel.id)
-						? 'border-[color:var(--bb-primary)] bg-[color:var(--bb-muted)]'
-						: 'border-[color:var(--bb-border)] hover:bg-[color:var(--bb-surface-hover)]'
+						? 'border-(--bb-primary) bg-(--bb-muted)'
+						: 'border-(--bb-border) hover:bg-(--bb-surface-hover)'
 				"
 			>
 				<!-- Glyph is decorative; the sr-only input owns focus, keyboard, and form state. -->
@@ -83,9 +81,7 @@ around it.
 				<BbBaseCheckboxIcon :checked="selected.includes(channel.id)" />
 				<span class="flex min-w-0 flex-col">
 					<span class="text-sm font-medium">{{ channel.label }}</span>
-					<span class="text-xs text-[color:var(--bb-text-muted)]">{{
-						channel.hint
-					}}</span>
+					<span class="text-xs text-(--bb-text-muted)">{{ channel.hint }}</span>
 				</span>
 			</label>
 		</fieldset>

package/dist/ai/BbBaseRadioIcon.md

@@ -50,12 +50,10 @@ and arrow-key navigation for free.
 
 ```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">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>
@@ -65,11 +63,11 @@ and arrow-key navigation for free.
 			<label
 				v-for="plan in plans"
 				:key="plan.id"
-				class="flex cursor-pointer items-center gap-2.5 rounded-[var(--bb-radius)] border p-2.5 transition-colors"
+				class="flex cursor-pointer items-center gap-2.5 rounded-(--bb-radius) border p-2.5 transition-colors"
 				:class="
 					selected === plan.id
-						? 'border-[color:var(--bb-primary)] bg-[color:var(--bb-muted)]'
-						: 'border-[color:var(--bb-border)] hover:bg-[color:var(--bb-surface-hover)]'
+						? 'border-(--bb-primary) bg-(--bb-muted)'
+						: 'border-(--bb-border) hover:bg-(--bb-surface-hover)'
 				"
 			>
 				<!-- Native radios sharing `name` give exclusive selection + arrow keys. -->
@@ -84,9 +82,7 @@ and arrow-key navigation for free.
 				<span class="flex min-w-0 flex-1 items-start justify-between gap-3">
 					<span class="flex min-w-0 flex-col">
 						<span class="text-sm font-medium">{{ plan.label }}</span>
-						<span class="text-xs text-[color:var(--bb-text-muted)]">{{
-							plan.hint
-						}}</span>
+						<span class="text-xs text-(--bb-text-muted)">{{ plan.hint }}</span>
 					</span>
 					<span class="shrink-0 text-xs font-medium tabular-nums">
 						{{ plan.price }}

package/dist/ai/BbBaseSwitchIcon.md

@@ -50,27 +50,23 @@ keyboard support, focus, and switch semantics for free.
 
 ```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">Workspace experiments</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Northwind Billing · flags apply to every seat
 			</p>
 		</div>
 
-		<div class="flex flex-col divide-y rounded-[var(--bb-radius)] border">
+		<div class="flex flex-col divide-y rounded-(--bb-radius) border">
 			<label
 				v-for="flag in flags"
 				:key="flag.id"
-				class="flex cursor-pointer items-center justify-between gap-3 px-2.5 py-2 hover:bg-[color:var(--bb-surface-hover)]"
+				class="flex cursor-pointer items-center justify-between gap-3 px-2.5 py-2 hover:bg-(--bb-surface-hover)"
 			>
 				<span class="flex min-w-0 flex-col">
 					<span class="text-sm font-medium">{{ flag.label }}</span>
-					<span class="text-xs text-[color:var(--bb-text-muted)]">{{
-						flag.hint
-					}}</span>
+					<span class="text-xs text-(--bb-text-muted)">{{ flag.hint }}</span>
 				</span>
 				<!-- Glyph tracks state; the checkbox + role="switch" owns a11y. -->
 				<input