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

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>
@@ -623,6 +617,47 @@ const barcode = ref<string | null>('0 12345 67890 5');
 </script>
 ```
 
+### Variants
+
+`variant` picks the field box's look — and only its look. Height, padding and
+border width are identical across variants, so mixing them in one view never
+reflows anything. The names and tokens are the `BbButton` ones, so a page
+reads one vocabulary for buttons and fields:
+
+- **`outline`** (default) — the raised panel with the neutral border.
+- **`secondary`** — a soft tinted surface with a faint border; fields that
+  should sit back on a busy panel.
+- **`ghost`** — no border in **any** state, a hover wash as the affordance,
+  and the same wash under the focus ring (a ring around nothing reads as a
+  glitch). Errors and warnings do not tint it; the icon and
+  the message carry the state. This is the inline-edit table cell: the field
+  reads as text at rest and needs no `:deep()` to get there.
+- **`none`** — structure only: every colour transparent and **no focus
+  ring**. An escape hatch for a fully custom look; prefer registering a
+  variant, which keeps the ring.
+
+**The variant ladder**
+
+```vue
+<template>
+	<div class="grid gap-3 sm:grid-cols-3">
+		<BbTextInput label="Outline" model-value="Ada Lovelace" />
+		<BbTextInput
+			label="Secondary"
+			model-value="Ada Lovelace"
+			variant="secondary"
+		/>
+		<BbTextInput label="Ghost" model-value="Ada Lovelace" variant="ghost" />
+	</div>
+</template>
+```
+
+`variant` is the same prop on `BbTextarea`, `BbNumberInput`, `BbSelect`,
+`BbTag`, `BbDatePickerInput`, `BbTimePickerInput` and `BbColorInput`. Extra
+names are registered through the plugin's `inputVariants` option and styled
+as a token block on `common-input-wrapper--<name>` — see the installation
+guide.
+
 ### Global config & platforms
 
 - `config.defaultInputLabelMode` — project-wide default for `labelMode`
@@ -655,7 +690,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 +698,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>
@@ -880,7 +915,7 @@ const formattedTotal = computed(() =>
 | `hideLabel` | `boolean \| undefined` | `false` |  | Visually hides the label of the input while maintaining accessibility. |
 | `hint` | `string \| undefined` |  |  | Text box to be displayed near the input, usually to indicate instructions. |
 | `id` | `string \| undefined` |  |  | The identifier of the component. |
-| `inputMode` | `"text" \| "search" \| "email" \| "url" \| "tel" \| "none" \| "numeric" \| "decimal" \| undefined` |  |  | The inputmode of the input. |
+| `inputMode` | `"text" \| "none" \| "search" \| "email" \| "url" \| "tel" \| "numeric" \| "decimal" \| undefined` |  |  | The inputmode of the input. |
 | `label` | `string` |  | yes | Text content of the label of the element. |
 | `labelMode` | `"floating" \| "outside" \| "inside" \| undefined` |  |  | Label rendering mode. |
 | `labelPosition` | `"left" \| "center" \| "right" \| undefined` |  |  | Sets the text alignment of the label. |
@@ -895,6 +930,7 @@ const formattedTotal = computed(() =>
 | `required` | `boolean \| undefined` | `false` |  | Sets the input as required. |
 | `reverse` | `boolean \| undefined` | `false` |  | Reverses the layout. Applicable in every direction the order of the label and the input is swapped. |
 | `type` | `"text" \| "search" \| "email" \| "url" \| "tel" \| "password" \| undefined` |  |  | Type of the input. Restricted to the textual input types this component supports — use `BbNumberInput` for numbers and `BbDatePickerInput` for dates. |
+| `variant` | `InputVariantType \| undefined` | `'outline'` |  | Visual variant of the field box — the same names and tokens as the `BbButton` variants. Colours only: height, padding and border width are identical across variants, so a form never reflows when one changes. `'ghost'` has no border in any s… |
 | `warnings` | `string \| string[] \| undefined` |  |  | Warning messages to display beneath the field, in their own `aria-live` region and amber (`--bb-text-warn`). A string or array; a non-empty list implies the warning state. Errors suppress warnings when both are set. While displayed they are… |
 
 ## Events

package/dist/ai/BbTextarea.md

@@ -51,10 +51,10 @@ form or read from `FormData`.
 
 ```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">Member profile</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Label stays required — hide it visually or customize the slot.
 			</p>
 		</div>
@@ -69,11 +69,7 @@ form or read from `FormData`.
 			<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>
@@ -118,10 +114,10 @@ label and the placeholder occupy the same spot.
 
 ```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">Checkout · shipping</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Floating and inside labels — skip placeholders on floating fields.
 			</p>
 		</div>
@@ -191,10 +187,10 @@ validation layer should still drive `errors`.
 ```vue
 <template>
 	<div class="grid max-w-sm gap-3">
-		<div class="grid gap-3 rounded-[var(--bb-radius)] border p-4">
+		<div class="grid gap-3 rounded-(--bb-radius) border p-4">
 			<div>
 				<p class="text-sm font-medium">Public profile</p>
-				<p class="text-xs text-[color:var(--bb-text-muted)]">
+				<p class="text-xs text-(--bb-text-muted)">
 					Description before typing; hint while focused.
 				</p>
 			</div>
@@ -210,12 +206,10 @@ validation layer should still drive `errors`.
 				:rows="3"
 			/>
 		</div>
-		<div class="grid gap-3 rounded-[var(--bb-radius)] border p-4">
+		<div class="grid gap-3 rounded-(--bb-radius) border p-4">
 			<div>
 				<p class="text-sm font-medium">Request a refund</p>
-				<p class="text-xs text-[color:var(--bb-text-muted)]">
-					INV-2048 · Acme Studio
-				</p>
+				<p class="text-xs text-(--bb-text-muted)">INV-2048 · Acme Studio</p>
 			</div>
 			<BbTextarea
 				v-model="reason"
@@ -265,10 +259,10 @@ Two ways to size the box — and they compose:
 
 ```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">Issue description</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Fixed rows, auto-grow, or rows as a minimum floor.
 			</p>
 		</div>
@@ -320,10 +314,10 @@ while the comment saves:
 
 ```vue
 <template>
-	<div class="grid max-w-md gap-3 rounded-[var(--bb-radius)] border p-3">
+	<div class="grid max-w-md gap-3 rounded-(--bb-radius) border p-3">
 		<div>
 			<p class="text-sm font-medium">PR #2048 · Review</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				feat/command-palette · 2 comments
 			</p>
 		</div>
@@ -332,7 +326,7 @@ while the comment saves:
 			:key="comment.id"
 			class="grid gap-0.5 border-t pt-2 first:border-t-0 first:pt-0"
 		>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				{{ comment.author }} · {{ comment.postedAt }}
 			</p>
 			<p class="text-sm">{{ comment.body }}</p>
@@ -409,10 +403,10 @@ informed. For a simple inline readout the `suffix` slot is enough:
 
 ```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">Status update</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Inline suffix counter — visual only, no hard cap.
 			</p>
 		</div>
@@ -445,10 +439,10 @@ companion SFC:
 
 ```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">Contact support</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Ticket #4812 · counter is visual; cap is enforced via errors.
 			</p>
 		</div>
@@ -509,10 +503,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">Deal notes</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Icons inside the chrome; copy actions sit in append-outer.
 			</p>
 		</div>
@@ -568,10 +562,10 @@ change mid-operation (e.g. an autosave round-trip). They compose freely.
 
 ```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">Meeting notes</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Q3 roadmap sync · clearable draft and autosave spinner.
 			</p>
 		</div>
@@ -619,10 +613,10 @@ content — screen-reader and keyboard users can still reach it.
 ```vue
 <template>
 	<div class="grid max-w-sm gap-3">
-		<div class="grid gap-3 rounded-[var(--bb-radius)] border p-4">
+		<div class="grid gap-3 rounded-(--bb-radius) border p-4">
 			<div>
 				<p class="text-sm font-medium">Refund policy</p>
-				<p class="text-xs text-[color:var(--bb-text-muted)]">
+				<p class="text-xs text-(--bb-text-muted)">
 					Readonly keeps terms focusable and copyable.
 				</p>
 			</div>
@@ -635,10 +629,10 @@ content — screen-reader and keyboard users can still reach it.
 				:rows="3"
 			/>
 		</div>
-		<div class="grid gap-3 rounded-[var(--bb-radius)] border p-4">
+		<div class="grid gap-3 rounded-(--bb-radius) border p-4">
 			<div>
 				<p class="text-sm font-medium">Deploy log</p>
-				<p class="text-xs text-[color:var(--bb-text-muted)]">
+				<p class="text-xs text-(--bb-text-muted)">
 					Disabled greys the field and blocks interaction.
 				</p>
 			</div>
@@ -678,10 +672,10 @@ order. This makes it a good pick for label-beside-field settings rows.
 
 ```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">Issue properties</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Horizontal outside labels + compact density on the whole panel.
 			</p>
 		</div>
@@ -751,6 +745,19 @@ comment composer above).
 />
 ```
 
+### Variants
+
+`variant` picks the field box's look and nothing else — height, padding and
+border width are identical across variants. `outline` (default) is the raised
+panel with the neutral border, `secondary` a soft tinted surface with a faint
+border, and `ghost` draws **no border in any state**: a hover wash is the
+affordance, the focus ring still shows, and errors or warnings surface through
+the icon and the message rather than a tinted edge. `ghost` is the inline-edit
+table cell (`<BbTextarea compact hide-label variant="ghost" />`) — no
+`:deep()` needed. The names and tokens are the `BbButton` ones; extra names
+register through the plugin's `inputVariants` option. The full ladder is in
+the `BbTextInput` guide.
+
 ### Works well with
 
 - `BbTextInput` / `BbNumberInput` / `BbDatePickerInput` — same chrome and
@@ -829,6 +836,7 @@ comment composer above).
 | `required` | `boolean \| undefined` | `false` |  | Sets the input as required. |
 | `reverse` | `boolean \| undefined` | `false` |  | Reverses the layout. Applicable in every direction the order of the label and the input is swapped. |
 | `rows` | `string \| number \| undefined` |  |  | Sets the number of visible text lines for the control. |
+| `variant` | `InputVariantType \| undefined` | `'outline'` |  | Visual variant of the field box — the same names and tokens as the `BbButton` variants. Colours only: height, padding and border width are identical across variants, so a form never reflows when one changes. `'ghost'` has no border in any s… |
 | `warnings` | `string \| string[] \| undefined` |  |  | Warning messages to display beneath the field, in their own `aria-live` region and amber (`--bb-text-warn`). A string or array; a non-empty list implies the warning state. Errors suppress warnings when both are set. While displayed they are… |
 
 ## Events

package/dist/ai/BbTimePickerInput.md

@@ -101,6 +101,19 @@ interaction.
 | `active`/`inactive` | —                            | focus enters / leaves the whole control |
 | `focus`             | `FocusEvent`                 | a native field gains focus              |
 
+### Variants
+
+`variant` picks the field box's look and nothing else — height, padding and
+border width are identical across variants. `outline` (default) is the raised
+panel with the neutral border, `secondary` a soft tinted surface with a faint
+border, and `ghost` draws **no border in any state**: a hover wash is the
+affordance, the focus ring still shows, and errors or warnings surface through
+the icon and the message rather than a tinted edge. `ghost` is the inline-edit
+table cell (`<BbTimePickerInput compact hide-label variant="ghost" />`) — no
+`:deep()` needed. The names and tokens are the `BbButton` ones; extra names
+register through the plugin's `inputVariants` option. The full ladder is in
+the `BbTextInput` guide.
+
 ### Gotchas & anti-patterns
 
 - **Don't parse the value with `new Date('14:30')`** — it's a wall-clock
@@ -165,6 +178,7 @@ Messages _also_ render in an `aria-live="polite"` region.
 | `seconds` | `boolean \| undefined` | `false` |  | Adds the seconds segment. Without it an incoming value carrying seconds displays truncated and zeroes out on the next user commit. |
 | `step` | `number \| undefined` | `1` |  | Minute granularity for the minute column and its arrow stepping. Constrains what the columns produce, never what typing accepts. |
 | `transitionDuration` | `number \| undefined` |  |  | Transition duration, in milliseconds, for the popover appearance. |
+| `variant` | `InputVariantType \| undefined` | `'outline'` |  | Visual variant of the field box — the same names and tokens as the `BbButton` variants. Colours only: height, padding and border width are identical across variants, so a form never reflows when one changes. `'ghost'` has no border in any s… |
 | `warnings` | `string \| string[] \| undefined` |  |  | Warning messages to display beneath the field, in their own `aria-live` region and amber (`--bb-text-warn`). A string or array; a non-empty list implies the warning state. Errors suppress warnings when both are set. While displayed they are… |
 
 ## Events

package/dist/ai/BbToast.md

@@ -70,14 +70,10 @@ per-message options. Built-in variants: `default`, `success`, `info`,
 
 ```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">Alex Rivera</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
-				alex@northwind.co · Product
-			</p>
+			<p class="text-xs text-(--bb-text-muted)">alex@northwind.co · Product</p>
 		</div>
 
 		<div class="flex flex-wrap items-center gap-2">
@@ -196,14 +192,10 @@ the spinner and the pinning stay).
 
 ```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">invoice-INV-1042.pdf</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
-				248 KB · ready to upload
-			</p>
+			<p class="text-xs text-(--bb-text-muted)">248 KB · ready to upload</p>
 		</div>
 
 		<BbButton prepend:icon="lucide:upload" variant="primary" @click="upload">
@@ -261,12 +253,10 @@ status, "copied" — so hammering the action never floods the corner.
 
 ```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">Proposal — Acme Studio</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Draft · last edited just now · {{ saveCount }} saves this session
 			</p>
 		</div>
@@ -362,12 +352,10 @@ toast expires, the delete simply stands.
 
 ```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">Saved replies</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Delete commits immediately — Undo lives on the toast.
 			</p>
 		</div>
@@ -389,9 +377,7 @@ toast expires, the delete simply stands.
 				</BbButton>
 			</li>
 		</ul>
-		<p v-else class="text-sm text-[color:var(--bb-text-muted)]">
-			No saved replies left.
-		</p>
+		<p v-else class="text-sm text-(--bb-text-muted)">No saved replies left.</p>
 
 		<!--
 			Standalone example: it mounts its own host because it has no app root.
@@ -449,12 +435,10 @@ morphs in place with a fresh countdown (e.g. into a success confirmation).
 
 ```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">Workspace sync</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Northwind · last synced 12 minutes ago
 			</p>
 		</div>
@@ -546,12 +530,10 @@ overlays unless `hideClose`.
 
 ```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">Invite teammate</p>
-			<p class="text-xs text-[color:var(--bb-text-muted)]">
+			<p class="text-xs text-(--bb-text-muted)">
 				Portal toast with avatar + custom actions.
 			</p>
 		</div>
@@ -572,9 +554,7 @@ overlays unless `hideClose`.
 				<BbAvatar size="32">{{ props.initials }}</BbAvatar>
 				<div class="min-w-0 flex-1">
 					<p class="text-sm font-semibold">{{ props.name }} was invited</p>
-					<p class="text-xs text-[color:var(--bb-text-muted)]">
-						Northwind · Design
-					</p>
+					<p class="text-xs text-(--bb-text-muted)">Northwind · Design</p>
 					<div class="mt-2 flex gap-2">
 						<BbButton size="xs" @click="close">Got it</BbButton>
 						<BbButton size="xs" variant="outline" @click="close">Undo</BbButton>