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

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
 

package/dist/ai/BbTree.md

@@ -68,20 +68,14 @@ normally:
 ```vue
 <template>
 	<div
-		class="w-full max-w-xs overflow-hidden rounded-[var(--bb-radius)] border border-[color:var(--bb-border)]"
+		class="w-full max-w-xs overflow-hidden rounded-(--bb-radius) border border-(--bb-border)"
 	>
 		<div
-			class="flex items-center gap-1.5 border-b border-[color:var(--bb-border)] px-2.5 py-1.5"
+			class="flex items-center gap-1.5 border-b border-(--bb-border) px-2.5 py-1.5"
 		>
-			<BbIcon
-				class="text-[color:var(--bb-text-muted)]"
-				icon="lucide:users"
-				size="sm"
-			/>
+			<BbIcon class="text-(--bb-text-muted)" icon="lucide:users" size="sm" />
 			<span class="text-xs font-medium">People</span>
-			<span class="ml-auto text-xs text-[color:var(--bb-text-muted)]"
-				>Acme Studio</span
-			>
+			<span class="ml-auto text-xs text-(--bb-text-muted)">Acme Studio</span>
 		</div>
 
 		<BbTree
@@ -96,12 +90,12 @@ normally:
 				<button
 					v-if="expandable"
 					:aria-label="`${expanded ? 'Collapse' : 'Expand'} ${meta.name}`"
-					class="flex w-full items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 text-left text-sm font-medium hover:bg-[color:var(--bb-surface-hover)]"
+					class="flex w-full items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 text-left text-sm font-medium hover:bg-(--bb-surface-hover)"
 					type="button"
 					v-bind="expandProps"
 				>
 					<BbIcon
-						class="shrink-0 text-[color:var(--bb-text-muted)]"
+						class="shrink-0 text-(--bb-text-muted)"
 						:icon="expanded ? 'lucide:chevron-down' : 'lucide:chevron-right'"
 						size="sm"
 					/>
@@ -114,7 +108,7 @@ normally:
 				     expanded with no toggle, so it reads as a pinned section. -->
 				<span
 					v-else-if="item.children?.length"
-					class="flex items-center gap-1.5 px-1.5 py-1 text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="flex items-center gap-1.5 px-1.5 py-1 text-xs font-semibold tracking-wide text-(--bb-text-muted) uppercase"
 				>
 					{{ meta.name }}
 				</span>
@@ -124,7 +118,7 @@ normally:
 						{{ initials(meta.name) }}
 					</BbAvatar>
 					<span class="min-w-0 truncate font-medium">{{ meta.name }}</span>
-					<span class="shrink-0 text-xs text-[color:var(--bb-text-muted)]">{{
+					<span class="shrink-0 text-xs text-(--bb-text-muted)">{{
 						meta.role
 					}}</span>
 				</span>
@@ -222,20 +216,14 @@ as plain rows.
 ```vue
 <template>
 	<div
-		class="w-full max-w-xs overflow-hidden rounded-[var(--bb-radius)] border border-[color:var(--bb-border)]"
+		class="w-full max-w-xs overflow-hidden rounded-(--bb-radius) border border-(--bb-border)"
 	>
 		<div
-			class="flex items-center gap-1.5 border-b border-[color:var(--bb-border)] px-2.5 py-1.5"
+			class="flex items-center gap-1.5 border-b border-(--bb-border) px-2.5 py-1.5"
 		>
-			<BbIcon
-				class="text-[color:var(--bb-text-muted)]"
-				icon="lucide:files"
-				size="sm"
-			/>
+			<BbIcon class="text-(--bb-text-muted)" icon="lucide:files" size="sm" />
 			<span class="text-xs font-medium">Explorer</span>
-			<span class="ml-auto text-xs text-[color:var(--bb-text-muted)]"
-				>acme-web</span
-			>
+			<span class="ml-auto text-xs text-(--bb-text-muted)">acme-web</span>
 		</div>
 
 		<BbTree
@@ -249,17 +237,17 @@ as plain rows.
 				<button
 					v-if="expandable"
 					:aria-label="`${expanded ? 'Collapse' : 'Expand'} ${meta.name}`"
-					class="flex w-full items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 text-left text-sm hover:bg-[color:var(--bb-surface-hover)]"
+					class="flex w-full items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 text-left text-sm hover:bg-(--bb-surface-hover)"
 					type="button"
 					v-bind="expandProps"
 				>
 					<BbIcon
-						class="shrink-0 text-[color:var(--bb-text-muted)]"
+						class="shrink-0 text-(--bb-text-muted)"
 						:icon="expanded ? 'lucide:chevron-down' : 'lucide:chevron-right'"
 						size="sm"
 					/>
 					<BbIcon
-						class="shrink-0 text-[color:var(--bb-text-muted)]"
+						class="shrink-0 text-(--bb-text-muted)"
 						:icon="expanded ? 'lucide:folder-open' : 'lucide:folder'"
 						size="sm"
 					/>
@@ -267,16 +255,14 @@ as plain rows.
 				</button>
 				<span
 					v-else
-					class="flex items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 pl-[1.55rem] text-sm text-[color:var(--bb-text-muted)]"
+					class="flex items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 pl-[1.55rem] text-sm text-(--bb-text-muted)"
 				>
 					<BbIcon
-						class="shrink-0 text-[color:var(--bb-text-faint)]"
+						class="shrink-0 text-(--bb-text-faint)"
 						icon="lucide:file"
 						size="sm"
 					/>
-					<span class="truncate text-[color:var(--bb-text)]">{{
-						meta.name
-					}}</span>
+					<span class="truncate text-(--bb-text)">{{ meta.name }}</span>
 				</span>
 			</template>
 		</BbTree>
@@ -364,7 +350,7 @@ or restore them on reload.
 
 		<BbTree
 			v-model:expanded-items="expandedSections"
-			class="rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-1.5"
+			class="rounded-(--bb-radius) border border-(--bb-border) p-1.5"
 			:expandable="(node) => !!node.children?.length"
 			item-value="id"
 			:items="sections"
@@ -374,7 +360,7 @@ or restore them on reload.
 				<button
 					v-if="expandable"
 					:aria-label="`${expanded ? 'Collapse' : 'Expand'} ${meta.label}`"
-					class="flex w-full items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 text-left text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)] hover:bg-[color:var(--bb-surface-hover)]"
+					class="flex w-full items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 text-left text-xs font-semibold tracking-wide text-(--bb-text-muted) uppercase hover:bg-(--bb-surface-hover)"
 					type="button"
 					v-bind="expandProps"
 				>
@@ -471,7 +457,7 @@ useful for a custom layout or an inline empty state under one branch.
 ```vue
 <template>
 	<BbTree
-		class="w-full max-w-xs rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-1.5"
+		class="w-full max-w-xs rounded-(--bb-radius) border border-(--bb-border) p-1.5"
 		:expandable="(n) => !!n.children?.length"
 		item-value="id"
 		:items="pages"
@@ -481,7 +467,7 @@ useful for a custom layout or an inline empty state under one branch.
 		<template #0="{ meta, expanded, expandProps }">
 			<button
 				:aria-label="`${expanded ? 'Collapse' : 'Expand'} ${meta.label}`"
-				class="flex w-full items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 text-left text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)] hover:bg-[color:var(--bb-surface-hover)]"
+				class="flex w-full items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 text-left text-xs font-semibold tracking-wide text-(--bb-text-muted) uppercase hover:bg-(--bb-surface-hover)"
 				type="button"
 				v-bind="expandProps"
 			>
@@ -498,7 +484,7 @@ useful for a custom layout or an inline empty state under one branch.
 		<template #trash="{ meta, expanded, expandProps }">
 			<button
 				:aria-label="`${expanded ? 'Collapse' : 'Expand'} ${meta.label}`"
-				class="knowledge-base-tree__trash flex w-full items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 text-left text-sm"
+				class="knowledge-base-tree__trash flex w-full items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 text-left text-sm"
 				type="button"
 				v-bind="expandProps"
 			>
@@ -514,13 +500,11 @@ useful for a custom layout or an inline empty state under one branch.
 				<li
 					v-for="page in item.children ?? []"
 					:key="page.meta.id"
-					class="flex items-center gap-1.5 px-1.5 py-0.5 pl-[1.55rem] text-sm text-[color:var(--bb-text-muted)] line-through"
+					class="flex items-center gap-1.5 px-1.5 py-0.5 pl-[1.55rem] text-sm text-(--bb-text-muted) line-through"
 				>
 					<BbIcon icon="lucide:file-x" size="sm" /> {{ page.meta.label }}
 				</li>
-				<li
-					class="px-1.5 pb-1 pl-[1.55rem] text-xs text-[color:var(--bb-text-muted)]"
-				>
+				<li class="px-1.5 pb-1 pl-[1.55rem] text-xs text-(--bb-text-muted)">
 					Deleted pages are removed for good after 30 days.
 				</li>
 			</ul>
@@ -529,10 +513,10 @@ useful for a custom layout or an inline empty state under one branch.
 		<!-- Default slot: every remaining node (the pages). -->
 		<template #default="{ meta }">
 			<span
-				class="flex items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 pl-[1.55rem] text-sm"
+				class="flex items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 pl-[1.55rem] text-sm"
 			>
 				<BbIcon
-					class="text-[color:var(--bb-text-faint)]"
+					class="text-(--bb-text-faint)"
 					icon="lucide:file-text"
 					size="sm"
 				/>
@@ -646,7 +630,7 @@ out of the box: collapsing is a smooth CSS grid-rows transition, not a remount.
 		},
 	]"
 	:expandable="(n) => !!n.children?.length"
-	class="max-w-xs rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-1.5"
+	class="max-w-xs rounded-(--bb-radius) border border-(--bb-border) p-1.5"
 	style="--indent:1.5rem; --gap:.375rem"
 >
 	<template #default="{ meta, expandable, expanded, expandProps }">
@@ -654,16 +638,16 @@ out of the box: collapsing is a smooth CSS grid-rows transition, not a remount.
 			v-if="expandable"
 			v-bind="expandProps"
 			type="button"
-			class="flex w-full items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 text-left text-sm font-medium hover:bg-[color:var(--bb-surface-hover)]"
+			class="flex w-full items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 text-left text-sm font-medium hover:bg-(--bb-surface-hover)"
 		>
 			<BbIcon
-				class="text-[color:var(--bb-text-muted)]"
+				class="text-(--bb-text-muted)"
 				:icon="expanded ? 'lucide:chevron-down' : 'lucide:chevron-right'"
 				size="sm"
 			/>
 			{{ meta.name }}
 		</button>
-		<span v-else class="px-1.5 py-0.5 text-sm text-[color:var(--bb-text-muted)]">{{ meta.name }}</span>
+		<span v-else class="px-1.5 py-0.5 text-sm text-(--bb-text-muted)">{{ meta.name }}</span>
 	</template>
 </BbTree>
 ```
@@ -682,7 +666,7 @@ scoped under a wrapper class so it stays local.
 ```vue
 <template>
 	<BbTree
-		class="connector-tree w-full max-w-xs rounded-[var(--bb-radius)] border border-[color:var(--bb-border)] p-1.5"
+		class="connector-tree w-full max-w-xs rounded-(--bb-radius) border border-(--bb-border) p-1.5"
 		:expandable="(node) => !!node.children?.length"
 		item-value="path"
 		:items="items"
@@ -691,12 +675,12 @@ scoped under a wrapper class so it stays local.
 			<button
 				v-if="expandable"
 				:aria-label="`${expanded ? 'Collapse' : 'Expand'} ${meta.name}`"
-				class="flex items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 text-sm hover:bg-[color:var(--bb-surface-hover)]"
+				class="flex items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 text-sm hover:bg-(--bb-surface-hover)"
 				type="button"
 				v-bind="expandProps"
 			>
 				<BbIcon
-					class="shrink-0 text-[color:var(--bb-text-muted)]"
+					class="shrink-0 text-(--bb-text-muted)"
 					:icon="expanded ? 'lucide:folder-open' : 'lucide:folder'"
 					size="sm"
 				/>
@@ -704,14 +688,14 @@ scoped under a wrapper class so it stays local.
 			</button>
 			<span
 				v-else
-				class="flex items-center gap-1.5 px-1.5 py-0.5 text-sm text-[color:var(--bb-text-muted)]"
+				class="flex items-center gap-1.5 px-1.5 py-0.5 text-sm text-(--bb-text-muted)"
 			>
 				<BbIcon
-					class="shrink-0 text-[color:var(--bb-text-faint)]"
+					class="shrink-0 text-(--bb-text-faint)"
 					icon="lucide:file"
 					size="sm"
 				/>
-				<span class="text-[color:var(--bb-text)]">{{ meta.name }}</span>
+				<span class="text-(--bb-text)">{{ meta.name }}</span>
 			</span>
 		</template>
 	</BbTree>
@@ -829,20 +813,14 @@ fetch and swap its children.
 ```vue
 <template>
 	<div
-		class="w-full max-w-xs overflow-hidden rounded-[var(--bb-radius)] border border-[color:var(--bb-border)]"
+		class="w-full max-w-xs overflow-hidden rounded-(--bb-radius) border border-(--bb-border)"
 	>
 		<div
-			class="flex items-center gap-1.5 border-b border-[color:var(--bb-border)] px-2.5 py-1.5"
+			class="flex items-center gap-1.5 border-b border-(--bb-border) px-2.5 py-1.5"
 		>
-			<BbIcon
-				class="text-[color:var(--bb-text-muted)]"
-				icon="lucide:cloud"
-				size="sm"
-			/>
+			<BbIcon class="text-(--bb-text-muted)" icon="lucide:cloud" size="sm" />
 			<span class="text-xs font-medium">Remote files</span>
-			<span class="ml-auto text-xs text-[color:var(--bb-text-muted)]"
-				>lazy load</span
-			>
+			<span class="ml-auto text-xs text-(--bb-text-muted)">lazy load</span>
 		</div>
 
 		<BbTree
@@ -857,17 +835,17 @@ fetch and swap its children.
 				<button
 					v-if="expandable"
 					:aria-label="`${isOpen ? 'Collapse' : 'Expand'} ${meta.label}`"
-					class="flex w-full items-center gap-1.5 rounded-[var(--bb-radius-sm)] px-1.5 py-0.5 text-left text-sm hover:bg-[color:var(--bb-surface-hover)]"
+					class="flex w-full items-center gap-1.5 rounded-(--bb-radius-sm) px-1.5 py-0.5 text-left text-sm hover:bg-(--bb-surface-hover)"
 					type="button"
 					v-bind="expandProps"
 				>
 					<BbIcon
-						class="shrink-0 text-[color:var(--bb-text-muted)]"
+						class="shrink-0 text-(--bb-text-muted)"
 						:icon="isOpen ? 'lucide:chevron-down' : 'lucide:chevron-right'"
 						size="sm"
 					/>
 					<BbIcon
-						class="shrink-0 text-[color:var(--bb-text-muted)]"
+						class="shrink-0 text-(--bb-text-muted)"
 						:icon="isOpen ? 'lucide:folder-open' : 'lucide:folder'"
 						size="sm"
 					/>
@@ -875,7 +853,7 @@ fetch and swap its children.
 				</button>
 				<span
 					v-else-if="meta.loading"
-					class="flex items-center gap-1.5 px-1.5 py-0.5 pl-[1.55rem] text-sm text-[color:var(--bb-text-muted)]"
+					class="flex items-center gap-1.5 px-1.5 py-0.5 pl-[1.55rem] text-sm text-(--bb-text-muted)"
 				>
 					<BbSpinner size="xs" /> Loading…
 				</span>
@@ -883,11 +861,7 @@ fetch and swap its children.
 					v-else
 					class="flex items-center gap-1.5 px-1.5 py-0.5 pl-[1.55rem] text-sm"
 				>
-					<BbIcon
-						class="text-[color:var(--bb-text-faint)]"
-						icon="lucide:file"
-						size="sm"
-					/>
+					<BbIcon class="text-(--bb-text-faint)" icon="lucide:file" size="sm" />
 					{{ meta.label }}
 				</span>
 			</template>

package/dist/ai/CommonInputWrapper.md

@@ -25,6 +25,7 @@
 | `preventFocus` | `boolean \| undefined` | `false` |  | Prevents the wrapper from focusing the inner input on click. |
 | `readonly` | `boolean \| undefined` | `false` |  | Whether the input is readonly. |
 | `reserveAppendSpace` | `boolean \| undefined` | `false` |  | Keeps trailing action/icon space reserved even when currently empty. |
+| `variant` | `InputVariantType \| undefined` | `"outline"` |  | Visual variant of the field box. Controls colours only — background, border colour, focus border — while height, padding and border WIDTH stay identical across variants, so switching one never reflows a form. Mirrors the equally named `BbBu… |
 
 ## Events