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

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>

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>

package/dist/ai/BbTooltip.md

@@ -128,30 +128,28 @@ bubbles from flickering while the pointer crosses the dense toolbar.
 ```vue
 <template>
 	<div
-		class="flex max-w-sm flex-col gap-2 rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-3"
+		class="flex max-w-sm flex-col gap-2 rounded-(--bb-radius) border border-(--bb-border) p-3"
 	>
 		<div class="flex items-start justify-between gap-2">
 			<div class="flex min-w-0 flex-col gap-0.5">
 				<span class="truncate text-sm font-medium">Q3 board deck</span>
-				<span class="text-xs text-[color:var(--bb-text-muted)]">
+				<span class="text-xs text-(--bb-text-muted)">
 					Shared draft · Acme Studio · edited 2h ago
 				</span>
 			</div>
-			<span class="shrink-0 text-xs text-[color:var(--bb-text-muted)]"
-				>PDF</span
-			>
+			<span class="shrink-0 text-xs text-(--bb-text-muted)">PDF</span>
 		</div>
 
 		<div
 			aria-label="Document actions"
-			class="inline-flex w-fit items-center gap-0.5 rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-0.5"
+			class="inline-flex w-fit items-center gap-0.5 rounded-(--bb-radius) border border-(--bb-border) p-0.5"
 			role="toolbar"
 		>
 			<template v-for="action in actions" :key="action.label">
 				<span
 					v-if="action.startsGroup"
 					aria-hidden="true"
-					class="mx-0.5 h-4 w-px bg-[color:var(--bb-border)]"
+					class="mx-0.5 h-4 w-px bg-(--bb-border)"
 				></span>
 				<BbTooltip :delay="400" :text="action.label">
 					<template #activator="{ props }">
@@ -211,7 +209,7 @@ works on any variant.
 		</template>
 		<span class="flex items-center gap-1.5">
 			Search
-			<kbd class="rounded border border-current px-1 font-mono text-[10px] leading-4 opacity-75">⌘K</kbd>
+			<kbd class="rounded-sm border border-current px-1 font-mono text-[10px] leading-4 opacity-75">⌘K</kbd>
 		</span>
 	</BbTooltip>
 	<BbTooltip>
@@ -226,7 +224,7 @@ works on any variant.
 		</template>
 		<span class="flex items-center gap-1.5">
 			Toggle sidebar
-			<kbd class="rounded border border-current px-1 font-mono text-[10px] leading-4 opacity-75">⌘B</kbd>
+			<kbd class="rounded-sm border border-current px-1 font-mono text-[10px] leading-4 opacity-75">⌘B</kbd>
 		</span>
 	</BbTooltip>
 </div>
@@ -244,8 +242,14 @@ is concerned — the whole label (shortcut included) is flattened into the
   useful on dense toolbars to avoid a flicker of bubbles while the cursor passes
   over. It delays only the **open**; the close is always a short debounce (so the
   pointer can travel from the trigger into the bubble without it vanishing).
-- `width` caps the bubble (pixels, or a percentage of the activator) so long
-  hints wrap instead of stretching across the screen.
+- `width` caps the bubble so long hints wrap instead of stretching across the
+  screen. It is a **maximum, not a fixed width** — the bubble still shrinks to
+  short text, so a one-line hint never sits in an oversized box. A bare number
+  is pixels, a percentage is measured against the activator, and any other CSS
+  length (`'20rem'`, `'min(320px, 90vw)'`) passes through. Bubbles already cap
+  at `40ch` without it; reach for the prop when a specific hint wants a
+  different measure, and for a library-wide change set `--max-w` on
+  `.bb-tooltip` in your own CSS.
 - `disabled` suppresses the tooltip entirely — and dismisses it if already open,
   so you can bind it to skip a hint when the label is already visible elsewhere.
 - Content is **lazy** (rendered on first open); `eager` renders it up front, and
@@ -339,25 +343,23 @@ brief settle, matching dense toolbars.
 ```vue
 <template>
 	<div
-		class="max-w-sm overflow-hidden rounded-[var(--bb-radius)] border border-[color:var(--bb-border)]"
+		class="max-w-sm overflow-hidden rounded-(--bb-radius) border border-(--bb-border)"
 	>
 		<div
-			class="flex items-baseline justify-between gap-2 border-b border-[color:var(--bb-border)] px-3 py-2"
+			class="flex items-baseline justify-between gap-2 border-b border-(--bb-border) px-3 py-2"
 		>
 			<span class="text-sm font-medium">Attachments</span>
-			<span class="text-xs text-[color:var(--bb-text-muted)]"
-				>INV-1042 · 3 files</span
-			>
+			<span class="text-xs text-(--bb-text-muted)">INV-1042 · 3 files</span>
 		</div>
 
-		<div class="divide-y divide-[color:var(--bb-border)]">
+		<div class="divide-y divide-(--bb-border)">
 			<div
 				v-for="file in files"
 				:key="file.name"
 				class="flex items-center gap-2 px-3 py-1.5 text-sm"
 			>
 				<BbIcon
-					class="shrink-0 text-[color:var(--bb-text-muted)]"
+					class="shrink-0 text-(--bb-text-muted)"
 					:icon="file.icon"
 					size="sm"
 				/>
@@ -369,7 +371,7 @@ brief settle, matching dense toolbars.
 				>
 					{{ file.name }}
 				</span>
-				<span class="shrink-0 text-xs text-[color:var(--bb-text-muted)]">{{
+				<span class="shrink-0 text-xs text-(--bb-text-muted)">{{
 					file.size
 				}}</span>
 			</div>
@@ -468,7 +470,7 @@ const files: SharedFile[] = [
 | `text` | `string \| undefined` |  |  | Text content of the component. |
 | `transitionDuration` | `number \| undefined` | `250` |  | How long the transition has to last in milliseconds |
 | `variant` | `keyof TooltipVariantRegistry \| undefined` | `"default"` |  | Visual variant. `'default'` is the inverted (primary) bubble, `'destructive'` is the danger-tinted bubble for warnings. Any other string is applied as a `bb-tooltip--<name>` class hook. |
-| `width` | `string \| number \| undefined` |  |  | Width of the tooltip bubble in pixels, or as a percentage of the activator. |
+| `width` | `string \| number \| undefined` |  |  | Caps the width of the tooltip bubble: it wraps at this measure but still shrinks to its text, so a short hint never sits in an oversized bubble. A bare number is read as pixels, a percentage is measured against the activator, and any other … |
 
 ## Events