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

package/dist/ai/recipes/nuxt/wizard-form.md

@@ -1108,7 +1108,7 @@ const today = new Date().toISOString().slice(0, 10);
 		>
 			<div class="flex items-center justify-between gap-2">
 				<h3
-					class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 				>
 					Audience
 				</h3>
@@ -1155,7 +1155,7 @@ const today = new Date().toISOString().slice(0, 10);
 		>
 			<div class="flex items-center justify-between gap-2">
 				<h3
-					class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 				>
 					Content
 				</h3>
@@ -1186,7 +1186,7 @@ const today = new Date().toISOString().slice(0, 10);
 		>
 			<div class="flex items-center justify-between gap-2">
 				<h3
-					class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 				>
 					Schedule
 				</h3>
@@ -1352,7 +1352,7 @@ const isReview = computed(() => ctx.step.value === 'review');
 		<!-- The segment's definition, so "who is in here" is answerable in place. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Conditions
 			</h3>
@@ -1371,7 +1371,7 @@ const isReview = computed(() => ctx.step.value === 'review');
 		<!-- Recent campaigns to this segment: fatigue check before sending. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent campaigns
 			</h3>

package/dist/ai/recipes/vue/approvals-inbox.md

@@ -1174,7 +1174,7 @@ const clearSelection = () => {
 		<!-- Receipt: bigger than the row thumbnail, with a full-size link out. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Receipt
 			</h3>
@@ -1221,7 +1221,7 @@ const clearSelection = () => {
 		<!-- Activity feed. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Activity
 			</h3>
@@ -1373,7 +1373,7 @@ const statusLabel = (status: ExpenseStatus) =>
 		<!-- Recent expenses: names drill down again — the stack keeps growing. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent expenses
 			</h3>

package/dist/ai/recipes/vue/inline-edit-workspace.md

@@ -1455,7 +1455,7 @@ const clearSelection = () => {
 		<!-- Description. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Description
 			</h3>
@@ -1467,7 +1467,7 @@ const clearSelection = () => {
 		<!-- Activity feed. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Activity
 			</h3>

package/dist/ai/recipes/vue/onboarding.md

@@ -769,7 +769,7 @@ const ctx = useOnboardingWorkspace();
 		</span>
 		<span
 			v-if="step.status === 'skipped'"
-			class="shrink-0 text-xs uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+			class="shrink-0 text-xs tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 		>
 			Skipped
 		</span>
@@ -1375,7 +1375,7 @@ const cadences: { value: ReminderCadence; label: string }[] = [
 		<!-- What you'll get. -->
 		<section class="flex flex-col gap-2.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				What you'll get
 			</h3>

package/dist/ai/recipes/vue/record-form.md

@@ -712,7 +712,7 @@ const trail = computed(() => [
 <template>
 	<section class="flex flex-col gap-3">
 		<h2
-			class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+			class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 		>
 			Details
 		</h2>
@@ -834,7 +834,7 @@ const ctx = useInvoiceForm();
 	<section class="flex flex-col gap-3">
 		<div class="flex items-center justify-between">
 			<h2
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Line items
 			</h2>
@@ -926,7 +926,7 @@ const currency = new Intl.NumberFormat('en-US', {
 			<div class="grid min-w-0 flex-1 grid-cols-3 gap-3">
 				<div>
 					<p
-						class="mb-1 text-right text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+						class="mb-1 text-right text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 					>
 						Qty
 					</p>
@@ -934,7 +934,7 @@ const currency = new Intl.NumberFormat('en-US', {
 				</div>
 				<div>
 					<p
-						class="mb-1 text-right text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+						class="mb-1 text-right text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 					>
 						Unit price
 					</p>
@@ -942,7 +942,7 @@ const currency = new Intl.NumberFormat('en-US', {
 				</div>
 				<div>
 					<p
-						class="mb-1 text-right text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+						class="mb-1 text-right text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 					>
 						Amount
 					</p>
@@ -975,7 +975,7 @@ const currency = new Intl.NumberFormat('en-US', {
 
 		<div>
 			<p
-				class="mb-1 text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="mb-1 text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Description
 			</p>
@@ -1024,7 +1024,7 @@ const currency = new Intl.NumberFormat('en-US', {
 	/>
 	<button
 		v-else
-		class="w-full whitespace-pre-wrap rounded-[var(--bb-radius)] px-1 py-0.5 text-left hover:bg-[color:var(--bb-hover)]"
+		class="w-full rounded-[var(--bb-radius)] px-1 py-0.5 text-left whitespace-pre-wrap hover:bg-[color:var(--bb-hover)]"
 		:class="{
 			'text-[color:var(--bb-text-muted)]': !line.description,
 			'text-[color:var(--bb-danger)]': hasError,
@@ -1409,7 +1409,7 @@ const ctx = useInvoiceForm();
 		<!-- Billing profile: exactly the fields this form negotiates. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Billing profile
 			</h3>
@@ -1439,7 +1439,7 @@ const ctx = useInvoiceForm();
 		     through the route-leave guard. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent invoices
 			</h3>
@@ -1453,7 +1453,7 @@ const ctx = useInvoiceForm();
 						{{ recent.number }}
 					</BbBaseButton>
 					<BbBadge variant="outline">{{ recent.status }}</BbBadge>
-					<span class="text-xs tabular-nums text-[color:var(--bb-text-muted)]">
+					<span class="text-xs text-[color:var(--bb-text-muted)] tabular-nums">
 						{{ currency.format(recent.amount) }}
 					</span>
 				</li>

package/dist/ai/recipes/vue/records-workspace.md

@@ -1074,7 +1074,7 @@ const clearSelection = () => {
 		<!-- Line items: a real mini-table, not a summary sentence. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Line items
 			</h3>
@@ -1098,7 +1098,7 @@ const clearSelection = () => {
 		<!-- Payments so far. -->
 		<section v-if="invoice.payments.length" class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Payments
 			</h3>
@@ -1121,7 +1121,7 @@ const clearSelection = () => {
 		<!-- Activity feed. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Activity
 			</h3>
@@ -1242,7 +1242,7 @@ const longDate = (value: string) =>
 		     variant — same identity-cell rule as the invoices table. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent invoices
 			</h3>

package/dist/ai/recipes/vue/upload-center.md

@@ -1074,7 +1074,7 @@ const formattedSize = computed(() => {
 			class="flex-1"
 			:model-value="upload.progress"
 		/>
-		<span class="text-xs tabular-nums text-[color:var(--bb-text-muted)]"
+		<span class="text-xs text-[color:var(--bb-text-muted)] tabular-nums"
 			>{{ upload.progress }}%</span
 		>
 	</div>
@@ -1508,7 +1508,7 @@ const clearSelection = () => {
 		<section class="flex flex-col gap-1.5">
 			<div class="flex items-center justify-between">
 				<h3
-					class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 				>
 					Extracted fields
 				</h3>
@@ -1548,7 +1548,7 @@ const clearSelection = () => {
 		     one-click cell as in the table. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Details
 			</h3>
@@ -1565,7 +1565,7 @@ const clearSelection = () => {
 		<!-- Activity feed. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Activity
 			</h3>
@@ -1712,7 +1712,7 @@ const longDate = (value: string) =>
 		<!-- Recent receipts: names drill down again — the stack keeps growing. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent receipts
 			</h3>
@@ -1730,7 +1730,7 @@ const longDate = (value: string) =>
 						{{ recent.filename }}
 					</BbButton>
 					<BbBadge variant="outline">{{ recent.status }}</BbBadge>
-					<span class="text-xs tabular-nums text-[color:var(--bb-text-muted)]">
+					<span class="text-xs text-[color:var(--bb-text-muted)] tabular-nums">
 						{{ currency.format(recent.amount) }}
 					</span>
 				</li>

package/dist/ai/recipes/vue/wizard-form.md

@@ -1042,7 +1042,7 @@ const today = new Date().toISOString().slice(0, 10);
 		>
 			<div class="flex items-center justify-between gap-2">
 				<h3
-					class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 				>
 					Audience
 				</h3>
@@ -1089,7 +1089,7 @@ const today = new Date().toISOString().slice(0, 10);
 		>
 			<div class="flex items-center justify-between gap-2">
 				<h3
-					class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 				>
 					Content
 				</h3>
@@ -1120,7 +1120,7 @@ const today = new Date().toISOString().slice(0, 10);
 		>
 			<div class="flex items-center justify-between gap-2">
 				<h3
-					class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 				>
 					Schedule
 				</h3>
@@ -1286,7 +1286,7 @@ const isReview = computed(() => ctx.step.value === 'review');
 		<!-- The segment's definition, so "who is in here" is answerable in place. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Conditions
 			</h3>
@@ -1305,7 +1305,7 @@ const isReview = computed(() => ctx.step.value === 'review');
 		<!-- Recent campaigns to this segment: fatigue check before sending. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent campaigns
 			</h3>

package/dist/ai/source/BbBadge.md

@@ -41,7 +41,7 @@
 				<BbIcon :icon="clearIcon" />
 			</button>
 		</span>
-		<span v-if="props.loading" class="sr-only">{{
+		<span v-if="props.loading" class="bb-sr-only">{{
 			t('common.loadingText')
 		}}</span>
 	</span>

package/dist/ai/source/BbBaseCheckbox.md

@@ -166,7 +166,7 @@ const inputAttributes = computed(() => {
 		// readonly is announced only via aria-readonly.
 		'aria-readonly': props.readonly ? true : undefined,
 		checked: internalChecked.value,
-		class: 'sr-only',
+		class: 'bb-sr-only',
 		disabled: props.disabled,
 		id: props.id,
 		indeterminate: props.indeterminate,

package/dist/ai/source/BbBaseColorInput.md

@@ -21,6 +21,7 @@
 		:loading="props.loading"
 		:prepend:icon="props['prepend:icon']"
 		:readonly="props.readonly"
+		:variant="props.variant"
 		@click:clear="$emit('update:modelValue', null)"
 	>
 		<template #prepend-outer><slot name="prepend-outer"></slot></template>
@@ -166,6 +167,7 @@ const options = computed<MaskInputOptions>(() => ({
 ## Types
 
 ```ts
+import type { InputVariantType } from '@/types/InputVariant';
 import type { IconType } from '@/types/Icon';
 import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
 
@@ -218,6 +220,11 @@ export type BaseColorInputProps = {
 	 * Display the component in a compact layout.
 	 */
 	compact?: boolean;
+
+	/**
+	 * Visual variant of the field box, forwarded to `CommonInputWrapper`.
+	 */
+	variant?: InputVariantType;
 	/**
 	 * Disable all interactions.
 	 */

package/dist/ai/source/BbBaseDatePicker.md

@@ -13,8 +13,8 @@
 		:class="isCoarse ? `bb-base-date-picker--unit-${homeMode}` : undefined"
 		:style="{ '--weeks': weeksInMonth }"
 	>
-		<span aria-live="polite" class="sr-only">{{ formattedYear }}</span>
-		<div aria-live="polite" class="sr-only">{{ cursorAnnouncement }}</div>
+		<span aria-live="polite" class="bb-sr-only">{{ formattedYear }}</span>
+		<div aria-live="polite" class="bb-sr-only">{{ cursorAnnouncement }}</div>
 		<div class="bb-base-date-picker__body">
 			<!-- No controls row under `type="year"`: the year list scrolls itself
 			     (and extends lazily at both ends), so there is nothing for the
@@ -42,7 +42,7 @@
 							stroke-width="1.5"
 						/>
 					</svg>
-					<span class="sr-only">{{ previousPageLabel }}</span>
+					<span class="bb-sr-only">{{ previousPageLabel }}</span>
 				</BbBaseButton>
 
 				<div class="bb-base-date-picker__nav-center">
@@ -98,7 +98,7 @@
 							stroke-width="1.5"
 						/>
 					</svg>
-					<span class="sr-only">{{ nextPageLabel }}</span>
+					<span class="bb-sr-only">{{ nextPageLabel }}</span>
 				</BbBaseButton>
 			</div>
 
@@ -141,7 +141,7 @@
 			:id="`${globalId}-status`"
 			aria-atomic="true"
 			aria-live="polite"
-			class="sr-only"
+			class="bb-sr-only"
 			role="status"
 		>
 			{{ modeAnnouncement }}

package/dist/ai/source/BbBaseDatePickerInput.md

@@ -25,6 +25,7 @@
 		:loading="props.loading"
 		:prepend:icon="props['prepend:icon']"
 		:readonly="props.readonly"
+		:variant="props.variant"
 		@click:clear="onClickClear"
 		@focusin="onFocusIn"
 	>
@@ -165,7 +166,7 @@
 
 		<span
 			:id="descriptionId"
-			class="bb-base-date-picker-input__accessible-description sr-only"
+			class="bb-base-date-picker-input__accessible-description bb-sr-only"
 			>{{ t('baseDatePickerInput.dateFormat') }} {{ formatHint }}</span
 		>
 		<template v-if="$slots.suffix" #suffix><slot name="suffix" /></template>
@@ -1006,7 +1007,7 @@ const timeHintKey = computed(() =>
 		: 'baseDatePickerInput.timeFormat'
 );
 
-/** Localized format hint used by the placeholder and the sr-only description. */
+/** Localized format hint used by the placeholder and the bb-sr-only description. */
 const formatHint = computed(() => {
 	// The hint has to describe the fields that are actually there — promising
 	// DD/MM/YYYY to a two-field month input is worse than no hint at all.
@@ -1564,6 +1565,7 @@ onBeforeUnmount(() => {
 ## Types
 
 ```ts
+import type { InputVariantType } from '@/types/InputVariant';
 import type { DatePickerType } from '@/types/DatePickerType';
 import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import type { IconType } from '@/types/Icon';
@@ -1630,6 +1632,11 @@ export type BaseDatePickerInputProps = {
 	 */
 	compact?: boolean;
 
+	/**
+	 * Visual variant of the field box, forwarded to `CommonInputWrapper`.
+	 */
+	variant?: InputVariantType;
+
 	/**
 	 * Disables the input, calendar trigger, and popover.
 	 */

package/dist/ai/source/BbBaseNumberInput.md

@@ -21,6 +21,7 @@
 		:prepend:icon="props['prepend:icon']"
 		:readonly="props.readonly"
 		:reserve-append-space="props.clearable"
+		:variant="props.variant"
 		@click:clear="$emit('update:modelValue', null)"
 	>
 		<template #prepend-outer
@@ -372,6 +373,7 @@ defineExpose({
 ## Types
 
 ```ts
+import type { InputVariantType } from '@/types/InputVariant';
 import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import type { IconType } from '@/types/Icon';
 
@@ -410,6 +412,11 @@ export type BaseNumberInputProps = {
 	 */
 	compact?: boolean;
 
+	/**
+	 * Visual variant of the field box, forwarded to `CommonInputWrapper`.
+	 */
+	variant?: InputVariantType;
+
 	/**
 	 * Disable manual input and the exposed increase/decrease helpers.
 	 */

package/dist/ai/source/BbBaseRadio.md

@@ -20,7 +20,7 @@
 			'bb-base-radio--readonly': readonly,
 		}"
 	>
-		<input v-bind="inputAttributes" class="sr-only" />
+		<input v-bind="inputAttributes" class="bb-sr-only" />
 		<slot name="icon" v-bind="slotAttributes">
 			<BbBaseRadioIcon
 				:checked="checked"

package/dist/ai/source/BbBaseRating.md

@@ -20,7 +20,7 @@
 			:role="groupRole"
 		>
 			<slot name="prepend"></slot>
-			<span v-if="showClearHint" :id="clearHintId" class="sr-only">{{
+			<span v-if="showClearHint" :id="clearHintId" class="bb-sr-only">{{
 				clearHintText
 			}}</span>
 			<label
@@ -34,7 +34,7 @@
 					'bb-base-rating__option--readonly': readonly,
 				}"
 			>
-				<span class="bb-base-rating__label-text sr-only">{{
+				<span class="bb-base-rating__label-text bb-sr-only">{{
 					option.value == 1
 						? t('rating.singleStar', option.value, props.stars).value
 						: t('rating.multipleStars', option.value, props.stars).value
@@ -44,7 +44,7 @@
 					:aria-describedby="computedAriaDescribedby"
 					:autofocus="autofocus && !index"
 					:checked="option.checked"
-					class="sr-only"
+					class="bb-sr-only"
 					:disabled="option.disabled"
 					:name="option.name"
 					:required="required"
@@ -508,7 +508,7 @@ export const sizeMap: Sizes = {
 	--color: var(--bb-primary);
 	--ring-color: var(--bb-ring);
 	--size: 24px;
-	--spacing: 0px;
+	--space: 0px;
 
 	/* Highlights all previous and current stars when hovering the component so it previews stars */
 	&:not(.bb-base-rating--disabled):not(.bb-base-rating--readonly):not(
@@ -558,7 +558,7 @@ export const sizeMap: Sizes = {
 	}
 
 	&__inner-container {
-		column-gap: var(--spacing);
+		column-gap: var(--space);
 		display: inline-flex;
 		flex-wrap: wrap;
 	}

package/dist/ai/source/BbBaseSelect.md

@@ -87,6 +87,7 @@
 				:loading="activatorLoading"
 				:prepend:icon="props['prepend:icon']"
 				:readonly="readonly"
+				:variant="variant"
 				@click:clear="
 					() => {
 						clear();
@@ -190,7 +191,7 @@
 				so a visually-hidden copy nested inside it would double every reading.
 				The chips keep their ✕ buttons — those are real tab stops and must stay
 				named; the activator's name just stops reading them. -->
-				<span :id="`${id}__selection`" class="sr-only">{{
+				<span :id="`${id}__selection`" class="bb-sr-only">{{
 					accessibleSelectionText(text)
 				}}</span>
 				<template #append-outer
@@ -462,6 +463,7 @@ const hiddenInputs = computed(() =>
 ## Types
 
 ```ts
+import type { InputVariantType } from '@/types/InputVariant';
 import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import type { IconType } from '@/types/Icon';
 import type { BbSelectResolvedOption } from '../BbSelectPopover/types';
@@ -532,6 +534,11 @@ export type BaseSelectProps<Item = any> = {
 	 */
 	compact?: boolean;
 
+	/**
+	 * Visual variant of the field box, forwarded to `CommonInputWrapper`.
+	 */
+	variant?: InputVariantType;
+
 	/**
 	 * Additional dependencies that trigger item reloading when changed.
 	 * @defaultValue `[]`

package/dist/ai/source/BbBaseSlider.md

@@ -30,7 +30,7 @@
 			<input
 				:id="id"
 				ref="hiddenInput"
-				class="sr-only"
+				class="bb-sr-only"
 				:disabled="disabled"
 				:name="name"
 				:readonly="true"
@@ -132,10 +132,10 @@
 		<!-- Localized qualifiers referenced by the range thumbs' aria-labelledby
 		so the two identical role=slider spans are distinguishable to AT. -->
 		<template v-if="props.range && props.id">
-			<span :id="`${props.id}__thumb_label_lower`" class="sr-only">{{
+			<span :id="`${props.id}__thumb_label_lower`" class="bb-sr-only">{{
 				t('slider.minimumThumb').value
 			}}</span>
-			<span :id="`${props.id}__thumb_label_higher`" class="sr-only">{{
+			<span :id="`${props.id}__thumb_label_higher`" class="bb-sr-only">{{
 				t('slider.maximumThumb').value
 			}}</span>
 		</template>
@@ -181,11 +181,11 @@ const { t } = useLocale();
 
 /**
  * `role="slider"` is name-from-author: the container's visible `<label>`
- * targets the sr-only hidden input (`for`/`id`), which never names these
+ * targets the bb-sr-only hidden input (`for`/`id`), which never names these
  * sibling thumb spans — without an explicit reference the focused thumb
  * announces as an unnamed "slider, N". The wrapped layer (BbSlider →
  * BbBaseInputContainer) renders that label as `${id}__label`, so the thumbs
- * point at it; range mode appends a localized sr-only qualifier so the two
+ * point at it; range mode appends a localized bb-sr-only qualifier so the two
  * thumbs are distinguishable. Bare BbBaseSlider without a container keeps its
  * documented hole: the reference targets nothing and the name stays empty.
  */

package/dist/ai/source/BbBaseSwitch.md

@@ -158,7 +158,7 @@ const inputAttributes = computed(() => {
 		// readonly is NOT disabled — native `disabled` conveys disabled.
 		'aria-readonly': props.readonly ? true : undefined,
 		checked: internalChecked.value,
-		class: 'sr-only',
+		class: 'bb-sr-only',
 		disabled: props.disabled,
 		id: props.id,
 		indeterminate: props.indeterminate,

package/dist/ai/source/BbBaseTag.md

@@ -26,6 +26,7 @@
 		:loading="loading"
 		:prepend:icon="props['prepend:icon']"
 		:readonly="readonly"
+		:variant="variant"
 		@click="onWrapperClick"
 		@click:clear="onClear"
 		@focusin="onWrapperFocusIn"
@@ -413,6 +414,7 @@ onBeforeUnmount(() => {
 ## Types
 
 ```ts
+import type { InputVariantType } from '@/types/InputVariant';
 import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import type { IconType } from '@/types/Icon';
 
@@ -466,6 +468,11 @@ export type BaseTagProps = {
 	 */
 	compact?: boolean;
 
+	/**
+	 * Visual variant of the field box, forwarded to `CommonInputWrapper`.
+	 */
+	variant?: InputVariantType;
+
 	/**
 	 * Disable all interactions with the tag input.
 	 */