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

package/dist/ai/source/CommonInputWrapper.md

@@ -19,6 +19,7 @@
 			'common-input-wrapper--warnings': showWarning,
 			'common-input-wrapper--loading': loading,
 			'common-input-wrapper--readonly': readonly,
+			[`common-input-wrapper--${variant}`]: variant !== 'none',
 		}"
 	>
 		<slot name="prepend-outer" />
@@ -94,6 +95,7 @@ const props = withDefaults(defineProps<CommonInputWrapperProps>(), {
 	// catches null/undefined). default: undefined keeps it undefined when unset
 	// so consumers that don't forward it still get the intended "assume value".
 	hasValue: undefined,
+	variant: 'outline',
 });
 const emit = defineEmits<CommonInputWrapperEvents>();
 
@@ -177,6 +179,7 @@ const onClickClear = () => {
 
 ```ts
 import type { IconType } from '@/types/Icon';
+import type { InputVariantType } from '@/types/InputVariant';
 
 export type CommonInputWrapperProps = {
 	/**
@@ -246,6 +249,16 @@ export type CommonInputWrapperProps = {
 	 * Whether the input is readonly.
 	 */
 	readonly?: boolean;
+
+	/**
+	 * 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 `BbButton` variants.
+	 *
+	 * @defaultValue `'outline'`
+	 */
+	variant?: InputVariantType;
 };
 
 export type CommonInputWrapperEvents = {
@@ -295,7 +308,37 @@ export type CommonInputWrapperSlots = {
 
 ```css
 /* @inherit --h — read off embedded .bb-button elements, which define it */
+/*
+ * STRUCTURE vs LOOK. The inner box's geometry — height, padding, radius and
+ * border WIDTH — is declared once and never varies. Everything a variant may
+ * change is a colour, routed through the five look variables below, so
+ * `variant="ghost"` and `variant="outline"` measure the same to the pixel and
+ * switching one never reflows a form. `--<variant>` modifiers only assign
+ * those variables; a custom variant registered via `inputVariants` does the
+ * same from a project stylesheet.
+ *
+ * State (errors, warnings) contributes ONE input to the look: `--state-border`.
+ * A variant that shows a border reads it (`var(--state-border, <rest>)`); a
+ * variant with no border ignores it. That is how ghost stays borderless under
+ * errors without a `:not(--ghost)` on every state rule (owner ruling
+ * 2026-09-10: the icon and the messages carry the state). The ring colour is
+ * state-owned and applies to every variant.
+ */
 .common-input-wrapper {
+	/* Look variables — the `none` variant is exactly these fallbacks:
+	   geometry intact, every colour transparent, and NO ring (`none` opts out
+	   of variant styling, and a ring is styling — owner, 2026-09-10). The ring
+	   COLOUR stays state-owned (`--ring-color`); whether a ring is drawn at all
+	   is the variant's call, through `--ring-size`. */
+	--bg: transparent;
+	--bg-hover: var(--bg);
+	--bg-focus: var(--bg);
+	--bg-disabled: var(--bg);
+	--border-color: transparent;
+	--border-focus: var(--border-color);
+	--ring-size: 0px;
+	--ring-color: var(--bb-ring);
+
 	align-items: center;
 	display: inline-flex;
 	/* Grid/flex item: without this its automatic minimum is the trigger's
@@ -303,9 +346,50 @@ export type CommonInputWrapperSlots = {
 	   See the note on `.bb-base-input-container`. */
 	min-width: 0;
 
+	/* ── Variants: the same names and tokens as BbButton ─────────────────── */
+
+	/* The default. A raised panel with the neutral border — inputs are
+	   surfaces, so unlike the transparent button outline the box keeps
+	   `--bb-panel`; the border, focus and ring match the button. */
+	&--outline {
+		--bg: var(--bb-panel);
+		--bg-disabled: var(--bb-muted);
+		--border-color: var(--state-border, var(--bb-outline-border));
+		--border-focus: var(--state-border, var(--bb-primary));
+		--ring-size: var(--bb-ring-size);
+	}
+
+	/* A soft tinted surface with a faint border, for fields on a panel that
+	   should sit back from primary content. Focus keeps the hover wash, as the
+	   secondary button does. */
+	&--secondary {
+		--bg: var(--bb-secondary);
+		--bg-hover: var(--bb-secondary-hover);
+		--bg-focus: var(--bb-secondary-hover);
+		--bg-disabled: var(--bb-muted);
+		--border-color: var(--state-border, var(--bb-secondary-border));
+		--border-focus: var(--state-border, var(--bb-primary));
+		--ring-size: var(--bb-ring-size);
+	}
+
+	/* Chrome-less until engaged: no border in ANY state (not even errors), a
+	   hover wash as the affordance, and the SAME wash under the focus ring —
+	   a ring around nothing reads as a glitch (owner, 2026-09-10; the ghost
+	   button does the same). The inline-edit cell. */
+	&--ghost {
+		--bg: var(--bb-ghost);
+		--bg-hover: var(--bb-ghost-hover);
+		--bg-focus: var(--bb-ghost-hover);
+		--bg-disabled: transparent;
+		--border-color: var(--bb-ghost-border);
+		--border-focus: var(--bb-ghost-border);
+		--ring-size: var(--bb-ring-size);
+	}
+
 	&--active > .common-input-wrapper__inner {
-		border-color: var(--bb-primary);
-		box-shadow: 0px 0px 0px var(--bb-ring-size) var(--ring-color);
+		background-color: var(--bg-focus);
+		border-color: var(--border-focus);
+		box-shadow: 0px 0px 0px var(--ring-size) var(--ring-color);
 	}
 
 	&--compact {
@@ -318,44 +402,24 @@ export type CommonInputWrapperSlots = {
 		}
 	}
 
-	&--disabled .common-input-wrapper__inner {
-		background-color: var(--bb-muted);
-
-		input,
-		textarea {
-			color: var(--bb-text-muted);
-		}
-
-		&:focus-within {
-			border-color: var(--bb-border);
-			box-shadow: 0px 0px 0px 0px var(--bb-ring);
-		}
-	}
-
-	&--errors .common-input-wrapper__inner {
+	&--errors {
 		--ring-color: var(--bb-ring-danger);
-		border-color: var(--bb-danger);
-
-		&:focus-within {
-			border-color: var(--bb-danger);
-		}
+		--state-border: var(--bb-danger);
 	}
 
-	&--warnings .common-input-wrapper__inner {
+	&--warnings {
 		--ring-color: var(--bb-ring-warn);
-		border-color: var(--bb-warn);
-
-		&:focus-within {
-			border-color: var(--bb-warn);
-		}
+		--state-border: var(--bb-warn);
 	}
 
 	&__inner {
-		--ring-color: var(--bb-ring);
 		--inside-label-clearance: 0px;
 		align-items: center;
-		background-color: var(--bb-panel);
-		border: var(--bb-border-w) solid var(--bb-border);
+		background-color: var(--bg);
+		/* The width is structure and is the same for every variant — a
+		   transparent border keeps the box height where a removed one would
+		   not. Variants set only the colour. */
+		border: var(--bb-border-w) solid var(--border-color);
 		border-radius: var(--bb-radius);
 		box-shadow: 0px 0px 0px 0px var(--bb-ring);
 		display: inline-flex;
@@ -379,9 +443,14 @@ export type CommonInputWrapperSlots = {
 			min-height var(--bb-transition-medium) var(--bb-ease),
 			padding-top var(--bb-transition-medium) var(--bb-ease);
 
+		&:hover {
+			background-color: var(--bg-hover);
+		}
+
 		&:focus-within {
-			border-color: var(--bb-primary);
-			box-shadow: 0px 0px 0px var(--bb-ring-size) var(--ring-color);
+			background-color: var(--bg-focus);
+			border-color: var(--border-focus);
+			box-shadow: 0px 0px 0px var(--ring-size) var(--ring-color);
 		}
 
 		input,
@@ -471,6 +540,11 @@ export type CommonInputWrapperSlots = {
 		align-self: stretch;
 		color: var(--bb-text-muted);
 		display: inline-grid;
+		/* Never shrink. The input's flex basis claims the row, so as a default
+		   flex item the affix shrank below its text and — being end-justified —
+		   spilled it LEFT, where the box clips (`https://` rendered `ttps://`).
+		   The input is the one that gives way; it keeps its 50px floor. */
+		flex: none;
 		font-size: var(--bb-input-fs);
 		height: calc(var(--bb-input-h) - var(--bb-border-w) * 2);
 		min-width: var(--bb-input-prefix-w);
@@ -495,6 +569,27 @@ export type CommonInputWrapperSlots = {
 		margin-right: calc(var(--bb-input-px) * -1);
 	}
 
+	/* Disabled — after the variants and the inner hover/focus rules so it wins
+	   the cascade at equal specificity: no hover wash, no ring, rest border. */
+	&--disabled .common-input-wrapper__inner {
+		background-color: var(--bg-disabled);
+
+		input,
+		textarea {
+			color: var(--bb-text-muted);
+		}
+
+		&:hover {
+			background-color: var(--bg-disabled);
+		}
+
+		&:focus-within {
+			background-color: var(--bg-disabled);
+			border-color: var(--border-color);
+			box-shadow: 0px 0px 0px 0px var(--bb-ring);
+		}
+	}
+
 	.bb-clearable-button {
 		color: var(--bb-text-muted);
 	}

package/dist/ai/source/GuidesComponent.md

@@ -250,6 +250,13 @@ watch(selectedExamplePath, (examplePath) => {
 </script>
 
 <style scoped lang="postcss">
+/*
+ * Tailwind v4: an SFC \3c style> block is its own PostCSS pass, so `@apply`
+ * cannot see the theme or the class-based `dark` variant without this.
+ * Emits nothing itself — it only makes the utilities resolvable.
+ */
+@reference '../../assets/css/index.css';
+
 .guides-component {
 	@apply overflow-hidden border text-[color:var(--bb-text)];
 	background: var(--bb-panel);
@@ -278,7 +285,7 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__code {
-	@apply rounded px-1 py-0.5 font-mono text-[13px];
+	@apply rounded-sm px-1 py-0.5 font-mono text-[13px];
 	background: var(--bb-muted);
 	color: var(--bb-text);
 }
@@ -288,12 +295,12 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__select-label {
-	@apply text-[11px] font-semibold uppercase tracking-[0.06em];
+	@apply text-[11px] font-semibold tracking-[0.06em] uppercase;
 	color: var(--bb-text-muted);
 }
 
 .guides-component__select {
-	@apply w-full px-3 py-2 text-sm outline-none;
+	@apply w-full px-3 py-2 text-sm outline-hidden;
 	background: var(--bb-panel);
 	border: var(--bb-border-w) solid var(--bb-border);
 	border-radius: var(--bb-radius);
@@ -311,7 +318,7 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__tab {
-	@apply whitespace-nowrap px-2.5 py-1.5 text-[13px] transition-colors;
+	@apply px-2.5 py-1.5 text-[13px] whitespace-nowrap transition-colors;
 	border-radius: var(--bb-radius);
 	color: var(--bb-text-muted);
 }
@@ -343,7 +350,7 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__preview-card {
-	@apply border-b lg:border-b-0 lg:border-r;
+	@apply border-b lg:border-r lg:border-b-0;
 	border-color: var(--bb-border);
 }
 
@@ -352,7 +359,7 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__preview-title {
-	@apply text-[11px] font-semibold uppercase tracking-[0.06em];
+	@apply text-[11px] font-semibold tracking-[0.06em] uppercase;
 	color: var(--bb-text-muted);
 }
 
@@ -369,7 +376,7 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__source {
-	@apply m-0 max-h-[28rem] overflow-auto p-3 font-mono text-[13px] leading-relaxed;
+	@apply m-0 max-h-112 overflow-auto p-3 font-mono text-[13px] leading-relaxed;
 	background: color-mix(in oklab, var(--bb-text) 90%, transparent);
 	border-radius: var(--bb-radius);
 	color: color-mix(in oklab, var(--bb-panel) 90%, white);

package/dist/ai/source/OptionsContainer.md

@@ -50,7 +50,7 @@
 					<span
 						:class="{
 							[`${classPrefix}-option__text`]: true,
-							'sr-only': hideLabel,
+							'bb-sr-only': hideLabel,
 						}"
 						><slot
 							:checked="!!option.selected"

package/dist/components/BbBadge/BadgeBodyContent.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import n from "../BbSpinner/BbSpinner.vue.js";
 import { useBadgeHost as r } from "./badgeButtonContext.js";
 import { Fragment as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, openBlock as u, renderSlot as d, unref as f } from "vue";
 //#region src/components/BbBadge/BadgeBodyContent.vue?vue&type=script&setup=true&lang.ts
-var p = { class: "bb-badge__content sr-only" }, m = { class: "bb-badge__content" }, h = /*@__PURE__*/ l({
+var p = { class: "bb-badge__content bb-sr-only" }, m = { class: "bb-badge__content" }, h = /*@__PURE__*/ l({
 	__name: "BadgeBodyContent",
 	setup(l) {
 		let h = r() ?? e().throw("[BbBadge] internal body renderer mounted outside a badge — this is a bug.");

package/dist/components/BbBadge/BbBadge.vue_vue_type_script_setup_true_lang.js

@@ -20,7 +20,7 @@ var O = ["id"], k = {
 	"aria-labelledby"
 ], j = {
 	key: 3,
-	class: "sr-only"
+	class: "bb-sr-only"
 }, M = /*@__PURE__*/ v({
 	__name: "BbBadge",
 	props: {

package/dist/components/BbBaseCheckbox/BbBaseCheckbox.vue_vue_type_script_setup_true_lang.js

@@ -78,7 +78,7 @@ var g = /*@__PURE__*/ s({
 				autofocus: _.autofocus,
 				"aria-readonly": _.readonly ? !0 : void 0,
 				checked: S.value,
-				class: "sr-only",
+				class: "bb-sr-only",
 				disabled: _.disabled,
 				id: _.id,
 				indeterminate: _.indeterminate,

package/dist/components/BbBaseColorInput/BbBaseColorInput.vue_vue_type_script_setup_true_lang.js

@@ -41,6 +41,7 @@ var S = [
 		autofocus: {},
 		clearable: { type: Boolean },
 		compact: { type: Boolean },
+		variant: {},
 		disabled: { type: Boolean },
 		hasErrors: { type: Boolean },
 		hasWarning: { type: Boolean },
@@ -108,6 +109,7 @@ var S = [
 			loading: E.loading,
 			"prepend:icon": E["prepend:icon"],
 			readonly: E.readonly,
+			variant: E.variant,
 			"onClick:clear": t[1] ||= (t) => e.$emit("update:modelValue", null)
 		}, d({
 			"prepend-outer": y(() => [_(e.$slots, "prepend-outer")]),
@@ -176,7 +178,8 @@ var S = [
 			"has-warning",
 			"loading",
 			"prepend:icon",
-			"readonly"
+			"readonly",
+			"variant"
 		]));
 	}
 });

package/dist/components/BbBaseColorInput/types.d.ts

@@ -1,3 +1,4 @@
+import { InputVariantType } from '../../types/InputVariant';
 import { IconType } from '../../types/Icon';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 /**
@@ -48,6 +49,10 @@ 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/components/BbBaseDatePicker/BbBaseDatePicker.vue_vue_type_script_setup_true_lang.js

@@ -27,14 +27,14 @@ import Te from "dayjs/plugin/weekOfYear";
 //#region src/components/BbBaseDatePicker/BbBaseDatePicker.vue?vue&type=script&setup=true&lang.ts
 var Ee = {
 	"aria-live": "polite",
-	class: "sr-only"
+	class: "bb-sr-only"
 }, De = {
 	"aria-live": "polite",
-	class: "sr-only"
+	class: "bb-sr-only"
 }, Oe = { class: "bb-base-date-picker__body" }, ke = {
 	key: 0,
 	class: "bb-base-date-picker__controls"
-}, Ae = { class: "sr-only" }, je = { class: "bb-base-date-picker__nav-center" }, Me = { class: "sr-only" }, Ne = { class: "bb-base-date-picker__content" }, Pe = ["id"], w = /*@__PURE__*/ ge({
+}, Ae = { class: "bb-sr-only" }, je = { class: "bb-base-date-picker__nav-center" }, Me = { class: "bb-sr-only" }, Ne = { class: "bb-base-date-picker__content" }, Pe = ["id"], w = /*@__PURE__*/ ge({
 	__name: "BbBaseDatePicker",
 	props: {
 		disabled: { type: Boolean },
@@ -397,7 +397,7 @@ var Ee = {
 				id: `${b(Le)}-status`,
 				"aria-atomic": "true",
 				"aria-live": "polite",
-				class: "sr-only",
+				class: "bb-sr-only",
 				role: "status"
 			}, y(We.value), 9, Pe)
 		], 6));

package/dist/components/BbBaseDatePicker/BbBaseDatePickerInputDaySelector.vue_vue_type_script_setup_true_lang.js

@@ -24,7 +24,7 @@ var ne = ["aria-label", "onKeydown"], re = {
 	"tabindex"
 ], M = { class: "bb-base-date-picker__date-append" }, N = {
 	"aria-live": "polite",
-	class: "sr-only",
+	class: "bb-sr-only",
 	role: "status"
 }, se = 366, P = /*@__PURE__*/ b({
 	__name: "BbBaseDatePickerInputDaySelector",

package/dist/components/BbBaseDatePickerInput/BbBaseDatePickerInput.vue_vue_type_script_setup_true_lang.js

@@ -61,6 +61,7 @@ var we = ["data-value"], Te = [
 		autofocus: {},
 		clearable: { type: Boolean },
 		compact: { type: Boolean },
+		variant: {},
 		disabled: { type: Boolean },
 		firstDayOfWeek: {},
 		floating: { type: Boolean },
@@ -589,6 +590,7 @@ var we = ["data-value"], Te = [
 			loading: T.loading,
 			"prepend:icon": T["prepend:icon"],
 			readonly: T.readonly,
+			variant: T.variant,
 			"onClick:clear": it,
 			onFocusin: Je
 		}, le({
@@ -706,7 +708,7 @@ var we = ["data-value"], Te = [
 				onClick: (e) => x(yt)(U.value[n + 1], { select: !0 })
 			}, b(pt(U.value[n], U.value[n + 1])), 11, Ee)) : ce("", !0)], 64))), 128))], 6), h("span", {
 				id: Pe,
-				class: "bb-base-date-picker-input__accessible-description sr-only"
+				class: "bb-base-date-picker-input__accessible-description bb-sr-only"
 			}, b(x(A)("baseDatePickerInput.dateFormat")) + " " + b(Lt.value), 1)]),
 			_: 2
 		}, [e.$slots.prefix ? {
@@ -729,7 +731,8 @@ var we = ["data-value"], Te = [
 			"has-warning",
 			"loading",
 			"prepend:icon",
-			"readonly"
+			"readonly",
+			"variant"
 		]));
 	}
 });

package/dist/components/BbBaseDatePickerInput/types.d.ts

@@ -1,3 +1,4 @@
+import { InputVariantType } from '../../types/InputVariant';
 import { DatePickerType } from '../../types/DatePickerType';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { IconType } from '../../types/Icon';
@@ -53,6 +54,10 @@ export type BaseDatePickerInputProps = {
      * Applies the compact density styles to the control.
      */
     compact?: boolean;
+    /**
+     * Visual variant of the field box, forwarded to `CommonInputWrapper`.
+     */
+    variant?: InputVariantType;
     /**
      * Disables the input, calendar trigger, and popover.
      */

package/dist/components/BbBaseInputContainer/BbBaseInputContainer.vue.d.ts

@@ -1,10 +1,10 @@
 import { BaseInputContainerProps, BaseInputContainerSlots } from './types';
 type __VLS_Slots = BaseInputContainerSlots;
 declare const __VLS_base: import('vue').DefineComponent<BaseInputContainerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BaseInputContainerProps> & Readonly<{}>, {
+    reverse: boolean;
     labelPosition: "left" | "center" | "right";
     direction: import('../..').InputDirection;
     tag: import('../../types/CommonProps').ContainerTag;
-    reverse: boolean;
     labelTag: import('../../types/CommonProps').LabelTag;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/BbBaseNumberInput/BbBaseNumberInput.vue_vue_type_script_setup_true_lang.js

@@ -30,6 +30,7 @@ var v = [
 		autofocus: {},
 		clearable: { type: Boolean },
 		compact: { type: Boolean },
+		variant: {},
 		disabled: { type: Boolean },
 		hasErrors: { type: Boolean },
 		hasWarning: { type: Boolean },
@@ -139,6 +140,7 @@ var v = [
 			"prepend:icon": x["prepend:icon"],
 			readonly: x.readonly,
 			"reserve-append-space": x.clearable,
+			variant: x.variant,
 			"onClick:clear": n[0] ||= (t) => e.$emit("update:modelValue", null)
 		}, s({
 			"prepend-outer": g(() => [p(e.$slots, "prepend-outer", {
@@ -207,7 +209,8 @@ var v = [
 			"loading",
 			"prepend:icon",
 			"readonly",
-			"reserve-append-space"
+			"reserve-append-space",
+			"variant"
 		]));
 	}
 });

package/dist/components/BbBaseNumberInput/types.d.ts

@@ -1,3 +1,4 @@
+import { InputVariantType } from '../../types/InputVariant';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { IconType } from '../../types/Icon';
 /**
@@ -29,6 +30,10 @@ export type BaseNumberInputProps = {
      * Apply the compact density variant.
      */
     compact?: boolean;
+    /**
+     * Visual variant of the field box, forwarded to `CommonInputWrapper`.
+     */
+    variant?: InputVariantType;
     /**
      * Disable manual input and the exposed increase/decrease helpers.
      */

package/dist/components/BbBaseRadio/BbBaseRadio.vue_vue_type_script_setup_true_lang.js

@@ -92,7 +92,7 @@ var m = /*@__PURE__*/ o({
 			"bb-base-radio--focused": v.value,
 			"bb-base-radio--focus-visible": y.value,
 			"bb-base-radio--readonly": e.readonly
-		}]) }, [i("input", c(C.value, { class: "sr-only" }), null, 16), p(e.$slots, "icon", u(s(w.value)), () => [a(t, {
+		}]) }, [i("input", c(C.value, { class: "bb-sr-only" }), null, 16), p(e.$slots, "icon", u(s(w.value)), () => [a(t, {
 			checked: _.value,
 			disabled: !!e.disabled,
 			"focus-visible": y.value,

package/dist/components/BbBaseRating/BbBaseRating.vue_vue_type_script_setup_true_lang.js

@@ -13,7 +13,7 @@ var w = [
 	"aria-labelledby",
 	"aria-readonly",
 	"role"
-], T = ["id"], E = { class: "bb-base-rating__label-text sr-only" }, D = [
+], T = ["id"], E = { class: "bb-base-rating__label-text bb-sr-only" }, D = [
 	"id",
 	"aria-describedby",
 	"autofocus",
@@ -142,7 +142,7 @@ var w = [
 			V.value ? (_(), f("span", {
 				key: 0,
 				id: S(R),
-				class: "sr-only"
+				class: "bb-sr-only"
 			}, x(S(H)), 9, T)) : d("", !0),
 			(_(!0), f(l, null, y(Y.value, (n, r) => (_(), f("label", {
 				key: n.value,
@@ -159,7 +159,7 @@ var w = [
 					"aria-describedby": U.value,
 					autofocus: e.autofocus && !r,
 					checked: n.checked,
-					class: "sr-only",
+					class: "bb-sr-only",
 					disabled: n.disabled,
 					name: n.name,
 					required: e.required,

package/dist/components/BbBaseSelect/BbBaseSelect.vue_vue_type_script_setup_true_lang.js

@@ -36,6 +36,7 @@ var re = ["id"], ie = [
 		clearable: { type: Boolean },
 		comma: { type: Boolean },
 		compact: { type: Boolean },
+		variant: {},
 		dependencies: {},
 		depsDebounceTime: {},
 		disabled: { type: Boolean },
@@ -203,6 +204,7 @@ var re = ["id"], ie = [
 				loading: i,
 				"prepend:icon": P["prepend:icon"],
 				readonly: e.readonly,
+				variant: e.variant,
 				"onClick:clear": () => {
 					s(), x(le);
 				},
@@ -270,7 +272,7 @@ var re = ["id"], ie = [
 					class: S(["bb-base-select__display-value", [{ "bb-base-select__placeholder": !a }]])
 				}, A(a || e.placeholder), 3))], 8, re), m("span", {
 					id: `${j(z)}__selection`,
-					class: "sr-only"
+					class: "bb-sr-only"
 				}, A(ue(a)), 9, oe)]),
 				_: 2
 			}, [e.$slots.prefix ? {
@@ -294,6 +296,7 @@ var re = ["id"], ie = [
 				"loading",
 				"prepend:icon",
 				"readonly",
+				"variant",
 				"onClick:clear",
 				"onContainer:click"
 			]), (E(!0), p(l, null, O(me.value, (e) => (E(), p("input", b({

package/dist/components/BbBaseSelect/types.d.ts

@@ -1,3 +1,4 @@
+import { InputVariantType } from '../../types/InputVariant';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { IconType } from '../../types/Icon';
 import { BbSelectResolvedOption } from '../BbSelectPopover/types';
@@ -55,6 +56,10 @@ export type BaseSelectProps<Item = any> = {
      * Apply the compact density variant.
      */
     compact?: boolean;
+    /**
+     * Visual variant of the field box, forwarded to `CommonInputWrapper`.
+     */
+    variant?: InputVariantType;
     /**
      * Additional dependencies that trigger item reloading when changed.
      * @defaultValue `[]`

package/dist/components/BbBaseSlider/BbBaseSlider.vue_vue_type_script_setup_true_lang.js

@@ -238,7 +238,7 @@ var le = {
 					id: e.id,
 					ref_key: "hiddenInput",
 					ref: j,
-					class: "sr-only",
+					class: "bb-sr-only",
 					disabled: e.disabled,
 					name: e.name,
 					readonly: !0,
@@ -328,10 +328,10 @@ var le = {
 			}),
 			S.range && S.id ? (_(), f(l, { key: 0 }, [p("span", {
 				id: `${S.id}__thumb_label_lower`,
-				class: "sr-only"
+				class: "bb-sr-only"
 			}, b(x(T)("slider.minimumThumb").value), 9, pe), p("span", {
 				id: `${S.id}__thumb_label_higher`,
-				class: "sr-only"
+				class: "bb-sr-only"
 			}, b(x(T)("slider.maximumThumb").value), 9, me)], 64)) : d("", !0)
 		], 16));
 	}

package/dist/components/BbBaseSwitch/BbBaseSwitch.vue_vue_type_script_setup_true_lang.js

@@ -78,7 +78,7 @@ var g = /*@__PURE__*/ s({
 				autofocus: _.autofocus,
 				"aria-readonly": _.readonly ? !0 : void 0,
 				checked: S.value,
-				class: "sr-only",
+				class: "bb-sr-only",
 				disabled: _.disabled,
 				id: _.id,
 				indeterminate: _.indeterminate,