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

package/dist/components/BbSelectPopover/BbSelectPopover.vue_vue_type_script_setup_true_lang.js

@@ -8,26 +8,26 @@ import { extractDomContainer as o } from "../../utilities/functions/extractDomCo
 import { waitFor as s } from "../../utilities/functions/waitFor.js";
 import { transitions as ee } from "../../utilities/misc/transitions.js";
 import te from "../CommonPopover/CommonPopover.vue.js";
-import { parseWidthString as ne } from "../../utilities/functions/parseWidthString.js";
-import { isTopEscapeEntry as re, pushEscapeEntry as ie, removeEscapeEntry as ae } from "../../utils/overlayEscapeStack.js";
-import { useMobile as oe } from "../../composables/useMobile.js";
-import { provideSheetSurface as se } from "../../composables/useSheetSurface.js";
-import { useClosingInert as ce } from "../../composables/useClosingInert.js";
+import { isTopEscapeEntry as ne, pushEscapeEntry as re, removeEscapeEntry as ie } from "../../utils/overlayEscapeStack.js";
+import { useMobile as ae } from "../../composables/useMobile.js";
+import { provideSheetSurface as oe } from "../../composables/useSheetSurface.js";
+import { useClosingInert as se } from "../../composables/useClosingInert.js";
 import { wait as c } from "../../utilities/functions/wait.js";
-import { get as le } from "../../utilities/functions/get.js";
-import { useLocale as ue } from "../../composables/useLocale.js";
-import de from "../BbIcon/BbIcon.vue.js";
-import fe from "../BbBadge/BbBadge.vue.js";
-import { isNil as pe } from "../../utilities/functions/isNil.js";
-import { matchAnyKey as me } from "../../utilities/functions/matchAnyKey.js";
-import he from "../../assets/svgs/search.svg_raw.js";
-import { useImeDismissBlur as ge } from "../../composables/useImeDismissBlur.js";
-import _e from "../BbOffCanvas/BbOffCanvas.vue.js";
-import ve from "../BbSmoothHeight/BbSmoothHeight.vue.js";
-import { hash as ye } from "../../utilities/functions/hash.js";
-import { useArray as be } from "../../composables/useArray.js";
-import { useItemsGetter as xe } from "../../composables/useItemsGetter.js";
-import { useHashedWatcher as Se } from "../../composables/useHashedWatcher.js";
+import { get as ce } from "../../utilities/functions/get.js";
+import { useLocale as le } from "../../composables/useLocale.js";
+import ue from "../BbIcon/BbIcon.vue.js";
+import de from "../BbBadge/BbBadge.vue.js";
+import { isNil as fe } from "../../utilities/functions/isNil.js";
+import { matchAnyKey as pe } from "../../utilities/functions/matchAnyKey.js";
+import me from "../../assets/svgs/search.svg_raw.js";
+import { useImeDismissBlur as he } from "../../composables/useImeDismissBlur.js";
+import ge from "../BbOffCanvas/BbOffCanvas.vue.js";
+import _e from "../BbSmoothHeight/BbSmoothHeight.vue.js";
+import { hash as ve } from "../../utilities/functions/hash.js";
+import { useArray as ye } from "../../composables/useArray.js";
+import { useItemsGetter as be } from "../../composables/useItemsGetter.js";
+import { useHashedWatcher as xe } from "../../composables/useHashedWatcher.js";
+import { parseWidthString as Se } from "../../utilities/functions/parseWidthString.js";
 import Ce from "../ClearableButton/ClearableButton.vue.js";
 import { useIndexById as we } from "../../composables/useIndexById.js";
 import { useBaseOptions as Te } from "../../composables/useBaseOptions.js";
@@ -162,7 +162,7 @@ var qe = {
 		S(() => E.activator, (e) => {
 			e && ct(e);
 		}, { immediate: !0 });
-		let { isMobile: P } = oe(), F = l(() => E.disableWriting === "mobile" ? !P.value : E.disableWriting === "desktop" ? P.value : !E.disableWriting), lt = l(() => E.disableWriting === "mobile" && P.value || E.disableWriting === "desktop" && !P.value ? "none" : void 0), { t: ut } = ue(), dt = l(() => E.searchInputAriaLabel ?? ut("select.searchLabel").value), ft = l(() => !!E.clearable && (H.value.length > 0 || (E.multiple ? Array.isArray(E.modelValue) && E.modelValue.length > 0 : !pe(E.modelValue)))), I = E.id || t().id.value, pt = l(() => E.ariaInvalid ?? !!E.hasErrors ? "true" : void 0), mt = l(() => {
+		let { isMobile: P } = ae(), F = l(() => E.disableWriting === "mobile" ? !P.value : E.disableWriting === "desktop" ? P.value : !E.disableWriting), lt = l(() => E.disableWriting === "mobile" && P.value || E.disableWriting === "desktop" && !P.value ? "none" : void 0), { t: ut } = le(), dt = l(() => E.searchInputAriaLabel ?? ut("select.searchLabel").value), ft = l(() => !!E.clearable && (H.value.length > 0 || (E.multiple ? Array.isArray(E.modelValue) && E.modelValue.length > 0 : !fe(E.modelValue)))), I = E.id || t().id.value, pt = l(() => E.ariaInvalid ?? !!E.hasErrors ? "true" : void 0), mt = l(() => {
 			let e = E.ariaDescribedby;
 			if (Array.isArray(e)) return e.map((e) => e.trim()).filter(Boolean).join(" ") || void 0;
 			if (typeof e == "string") return e.trim() || void 0;
@@ -179,7 +179,7 @@ var qe = {
 			if (E.width === "auto") return "auto";
 			if (E.width == null || E.width === "") return N.value ? `${N.value}px` : "320px";
 			try {
-				let { value: e, unit: t } = ne(E.width);
+				let { value: e, unit: t } = Se(E.width);
 				return t === "%" ? N.value ? `${N.value * (e / 100)}px` : "320px" : `${e}${t}`;
 			} catch {
 				return typeof E.width == "string" ? E.width.trim() : N.value ? `${N.value}px` : "320px";
@@ -215,7 +215,7 @@ var qe = {
 			let t = e.target instanceof Element ? e.target : e.target instanceof Text ? e.target.parentElement : null;
 			if (!t) return;
 			let n = M.value?.contains(t), r = !!t.closest(".bb-common-popover");
-			if (n || r) return;
+			if (n || r || e.type === "focusin" && M.value && t.contains(M.value)) return;
 			let i = t instanceof HTMLLabelElement ? t : t.closest("label");
 			i?.control && M.value?.contains(i.control) || (await Y(), On());
 		}, kt = l(() => !(E.readonly || E.disabled || G.value && !Ut.value.length)), At = new AbortController(), jt = async () => s(() => !!k.value, {
@@ -254,11 +254,11 @@ var qe = {
 		}, B = async () => {
 			K.value && (await Y(), L());
 		}, V = Symbol("bb-select-popover-escape"), Lt = (e) => {
-			!K.value || e.key !== "Escape" || re(V) && (e.stopImmediatePropagation(), e.preventDefault(), B());
-		}, H = v(""), Rt = v(!1), { getter: zt, debouncedGetter: Bt, clientReproducible: Vt, hydratedFromSsr: Ht, items: Ut, loading: Wt } = xe({
+			!K.value || e.key !== "Escape" || ne(V) && (e.stopImmediatePropagation(), e.preventDefault(), B());
+		}, H = v(""), Rt = v(!1), { getter: zt, debouncedGetter: Bt, clientReproducible: Vt, hydratedFromSsr: Ht, items: Ut, loading: Wt } = be({
 			items: b(E, "items"),
 			debounce: E.queryDebounceTime
-		}), { array: Gt, add: Kt, remove: qt, set: Jt } = be(), Yt = l(() => E.multiple ? !!E.modelValue?.length : !pe(E.modelValue)), Xt = l(() => E.prefill === !1 && !Array.isArray(E.items) && F.value && !Yt.value), Zt = l(() => Xt.value && !H.value ? ut("select.searchToStart").value : E.noDataText), { hasPrefilled: Qt, isPrefilling: $t, canLoad: en, prefill: tn, markPrefilled: nn } = De({
+		}), { array: Gt, add: Kt, remove: qt, set: Jt } = ye(), Yt = l(() => E.multiple ? !!E.modelValue?.length : !fe(E.modelValue)), Xt = l(() => E.prefill === !1 && !Array.isArray(E.items) && F.value && !Yt.value), Zt = l(() => Xt.value && !H.value ? ut("select.searchToStart").value : E.noDataText), { hasPrefilled: Qt, isPrefilling: $t, canLoad: en, prefill: tn, markPrefilled: nn } = De({
 			alreadyLoaded: Ht,
 			clientReproducible: Vt,
 			trigger: l(() => Array.isArray(E.items) || E.prefill === !0 || E.enforceCoherence && Yt.value || E.prefill === "interaction" && Rt.value),
@@ -281,17 +281,17 @@ var qe = {
 		}), { coherent: sn, coherentValue: cn } = Ee({
 			modelValue: b(E, "modelValue"),
 			multiple: E.multiple,
-			iteratee: (e) => !!on.value[ye(e)]
-		}), W = l(() => [].concat(E.modelValue).map((e) => on.value[ye(e)]).filter(Boolean)), ln = (e) => ({
+			iteratee: (e) => !!on.value[ve(e)]
+		}), W = l(() => [].concat(E.modelValue).map((e) => on.value[ve(e)]).filter(Boolean)), ln = (e) => ({
 			item: e.item,
 			text: e.text,
 			value: e.value,
 			selected: e.selected ?? !0,
 			disabled: e.disabled ?? !1
 		}), un = l(() => W.value.map(ln)), G = l(() => !!(Wt.value || E.loading)), dn = l(() => G.value && U.value.length > 0), fn = l(() => !!E.hasErrors), pn = l(() => !!E.hasWarning && !fn.value), mn = l(() => W.value.map((e) => e.text).filter(Boolean).join(", ") || "");
-		Se(() => E.modelValue, async () => {
+		xe(() => E.modelValue, async () => {
 			en.value && (sn.value || (await zt(H.value, !0, E.modelValue), E.enforceCoherence && (D("update:modelValue", cn.value), k.value?.blur())));
-		}, { debounce: E.modelValueDebounceTime }), Se(() => [E.dependencies, E.items], async () => {
+		}, { debounce: E.modelValueDebounceTime }), xe(() => [E.dependencies, E.items], async () => {
 			en.value && (await zt(H.value, !0, E.modelValue), E.enforceCoherence && !sn.value && (D("update:modelValue", cn.value), k.value?.blur()));
 		}, { debounce: E.depsDebounceTime });
 		let hn = async (e) => {
@@ -309,11 +309,11 @@ var qe = {
 		}, _n = l(() => {
 			if (!H.value || !E.multiple && W.value.some((e) => e.text === H.value)) return U.value;
 			let e = H.value.trim();
-			return E.filterBy.length ? U.value.filter((t) => me(t.item, E.filterBy, e)) : U.value.filter((t) => me(t, ["text"], e));
-		}), vn = Symbol("default"), yn = (e) => pe(E.groupBy) ? vn : typeof E.groupBy == "function" ? E.groupBy(e.item) : le(e.item, E.groupBy), bn = l(() => {
+			return E.filterBy.length ? U.value.filter((t) => pe(t.item, E.filterBy, e)) : U.value.filter((t) => pe(t, ["text"], e));
+		}), vn = Symbol("default"), yn = (e) => fe(E.groupBy) ? vn : typeof E.groupBy == "function" ? E.groupBy(e.item) : ce(e.item, E.groupBy), bn = l(() => {
 			let e = {};
 			for (let t of _n.value) {
-				let n = yn(t), r = ye(n);
+				let n = yn(t), r = ve(n);
 				e[r] || (e[r] = {
 					id: r,
 					data: n ?? null,
@@ -321,14 +321,14 @@ var qe = {
 				}), e[r].options.push(t);
 			}
 			return Object.values(e).filter((e) => e.options.length);
-		}), K = v(!1), xn = n(K), Sn = ce(K, () => E.transitionDuration), Cn = () => (E.adaptive ?? tt.adaptive) && P.value ? "canvas" : "popover", wn = v(Cn()), q = l(() => wn.value === "canvas");
+		}), K = v(!1), xn = n(K), Sn = se(K, () => E.transitionDuration), Cn = () => (E.adaptive ?? tt.adaptive) && P.value ? "canvas" : "popover", wn = v(Cn()), q = l(() => wn.value === "canvas");
 		S([
 			() => E.adaptive,
 			P,
 			K
 		], () => {
 			K.value || (wn.value = Cn());
-		}), se(q), ge({
+		}), oe(q), he({
 			active: () => K.value && q.value,
 			input: () => A.value
 		});
@@ -343,9 +343,9 @@ var qe = {
 			...E.offCanvasProps?.title ? {} : { "aria-labelledby": Pn.value },
 			...E.offCanvasProps
 		})), J = async ({ focusPopoverContent: e = !0 } = {}) => {
-			E.disabled || E.readonly || K.value || (wn.value = Cn(), Rt.value = !0, K.value = !0, !(!Qt.value && !$t.value && !Xt.value && (await tn(), !K.value)) && (await Ie(), K.value && (q.value || (ht = !0, gt(), ie(V), document.addEventListener("click", z), document.addEventListener("focusin", z), document.addEventListener("keydown", Lt, { capture: !0 }), e && (await c(0), K.value && (F.value ? R() : bt()))))));
+			E.disabled || E.readonly || K.value || (wn.value = Cn(), Rt.value = !0, K.value = !0, !(!Qt.value && !$t.value && !Xt.value && (await tn(), !K.value)) && (await Ie(), K.value && (q.value || (ht = !0, gt(), re(V), document.addEventListener("click", z, { capture: !0 }), document.addEventListener("focusin", z, { capture: !0 }), document.addEventListener("keydown", Lt, { capture: !0 }), e && (await c(0), K.value && (F.value ? R() : bt()))))));
 		}, Y = async () => {
-			K.value && (K.value = !1, k.value?.blur(), j.value = void 0, H.value = "", !q.value && (_t(), ae(V), document.removeEventListener("click", z), document.removeEventListener("focusin", z), document.removeEventListener("keydown", Lt, { capture: !0 })));
+			K.value && (K.value = !1, k.value?.blur(), j.value = void 0, H.value = "", !q.value && (_t(), ie(V), document.removeEventListener("click", z, { capture: !0 }), document.removeEventListener("focusin", z, { capture: !0 }), document.removeEventListener("keydown", Lt, { capture: !0 })));
 		}, En = () => {
 			k.value?.blur(), j.value = void 0, H.value = "", On(), L();
 		}, Dn = () => K.value ? Y() : J(), X = v(!1), Z = () => {
@@ -436,7 +436,7 @@ var qe = {
 		], ([e, t, n, r, i, a, o, s]) => {
 			e && (e.setAttribute("aria-expanded", String(t)), o || e.setAttribute("aria-label", s), r == null ? e.removeAttribute("aria-invalid") : e.setAttribute("aria-invalid", r), n ? e.setAttribute("aria-controls", `${I}_listbox`) : e.removeAttribute("aria-controls"), i == null ? e.removeAttribute("aria-describedby") : e.setAttribute("aria-describedby", i), t && a ? e.setAttribute("aria-activedescendant", a) : e.removeAttribute("aria-activedescendant"));
 		}, { immediate: !0 }), ze(() => {
-			clearTimeout(An), $?.(), At.abort(), ae(V), document.removeEventListener("click", z), document.removeEventListener("focusin", z), document.removeEventListener("keydown", Lt, { capture: !0 });
+			clearTimeout(An), $?.(), At.abort(), ie(V), document.removeEventListener("click", z, { capture: !0 }), document.removeEventListener("focusin", z, { capture: !0 }), document.removeEventListener("keydown", Lt, { capture: !0 });
 		}), (e, t) => (_(), f(je, null, [
 			st.value ? d("", !0) : y(e.$slots, "activator", g(h({ key: 0 }, {
 				props: { ref: ct },
@@ -493,11 +493,11 @@ var qe = {
 						class: "bb-select-popover__search-warning-icon",
 						focusable: "false"
 					}),
-					p(de, {
+					p(ue, {
 						"aria-hidden": "true",
 						class: "bb-select-popover__search-icon",
 						focusable: "false",
-						icon: x(he)
+						icon: x(me)
 					}, null, 8, ["icon"]),
 					e.clearable ? (_(), u(Ce, {
 						key: 0,
@@ -517,7 +517,7 @@ var qe = {
 					"aria-expanded": "true",
 					"aria-invalid": pt.value,
 					"aria-label": dt.value,
-					class: "bb-select-popover__focus-proxy sr-only",
+					class: "bb-select-popover__focus-proxy bb-sr-only",
 					role: "combobox",
 					tabindex: "-1",
 					type: "button",
@@ -573,7 +573,7 @@ var qe = {
 				])]),
 				_: 3
 			}),
-			q.value ? (_(), u(_e, h({
+			q.value ? (_(), u(ge, h({
 				key: 1,
 				modelValue: K.value,
 				"onUpdate:modelValue": t[3] ||= (e) => K.value = e,
@@ -592,7 +592,7 @@ var qe = {
 					}]),
 					tabindex: "-1"
 				}, [
-					e.multiple && W.value.length ? (_(), f("div", Ze, [Me("div", Qe, [(_(!0), f(je, null, Be(W.value, (n) => (_(), u(fe, {
+					e.multiple && W.value.length ? (_(), f("div", Ze, [Me("div", Qe, [(_(!0), f(je, null, Be(W.value, (n) => (_(), u(de, {
 						key: n.valueHash,
 						class: "bb-select-popover__sheet-chip",
 						clearable: !e.disabled && !e.readonly,
@@ -605,7 +605,7 @@ var qe = {
 						_: 2
 					}, 1032, ["clearable", "onClick:clear"]))), 128))])])) : d("", !0),
 					p(x(rt)),
-					p(ve, null, {
+					p(_e, null, {
 						default: C(() => [p(x(at))]),
 						_: 1
 					})

package/dist/components/BbSpinner/BbSpinner.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ import { createBlock as i, createElementBlock as a, createElementVNode as o, cre
 var f = {
 	key: 0,
 	role: "status"
-}, p = { class: "sr-only" }, m = /*@__PURE__*/ c({
+}, p = { class: "bb-sr-only" }, m = /*@__PURE__*/ c({
 	__name: "BbSpinner",
 	props: {
 		size: { default: "md" },

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

@@ -7,7 +7,7 @@ export type Size = IconSize;
 export type BbSpinnerProps = Pick<BbIconProps, 'size'> & {
     /**
      * Accessible loading announcement. When set, the spinner is wrapped in a
-     * `role="status"` element containing this text rendered `sr-only`, so
+     * `role="status"` element containing this text rendered `bb-sr-only`, so
      * screen readers announce the loading state. When omitted the markup is
      * unchanged and the spinner is purely decorative.
      */

package/dist/components/BbTable/BbTable.vue_vue_type_script_setup_true_lang.js

@@ -27,18 +27,18 @@ import { defaultRangeExtractor as Ve, elementScroll as He, observeElementOffset
 //#region src/components/BbTable/BbTable.vue?vue&type=script&setup=true&lang.ts
 var Ye = {
 	key: 0,
-	class: "sr-only"
+	class: "bb-sr-only"
 }, Xe = ["id"], Ze = ["id"], Qe = {
 	"aria-live": "polite",
-	class: "bb-table-loading__text sr-only",
+	class: "bb-table-loading__text bb-sr-only",
 	role: "status"
 }, $e = {
 	"aria-live": "polite",
-	class: "bb-table__reorder-status sr-only",
+	class: "bb-table__reorder-status bb-sr-only",
 	role: "status"
-}, et = ["aria-labelledby", "aria-rowcount"], tt = ["inert"], nt = ["aria-rowindex"], rt = { class: "bb-table-header__content" }, it = { class: "bb-table-check__label-text sr-only" }, at = {
+}, et = ["aria-labelledby", "aria-rowcount"], tt = ["inert"], nt = ["aria-rowindex"], rt = { class: "bb-table-header__content" }, it = { class: "bb-table-check__label-text bb-sr-only" }, at = {
 	key: 1,
-	class: "bb-table-radio__label-text sr-only"
+	class: "bb-table-radio__label-text bb-sr-only"
 }, ot = [
 	"aria-describedby",
 	"aria-sort",
@@ -50,7 +50,7 @@ var Ye = {
 ], st = { class: "bb-table-header__content" }, ct = {
 	key: 1,
 	class: "bb-table-header__content"
-}, lt = ["onDblclick", "onPointerdown"], ut = { class: "bb-table-header__content sr-only" }, dt = ["aria-rowindex"], ft = {
+}, lt = ["onDblclick", "onPointerdown"], ut = { class: "bb-table-header__content bb-sr-only" }, dt = ["aria-rowindex"], ft = {
 	key: 0,
 	class: "bb-table-skeleton__cell bb-table-skeleton__cell--select",
 	role: "cell"
@@ -1478,12 +1478,12 @@ var Ye = {
 				e.caption ? (S(), _("div", {
 					key: 1,
 					id: nn.value,
-					class: b(["bb-table-caption", { "sr-only": !e.displayCaption }])
+					class: b(["bb-table-caption", { "bb-sr-only": !e.displayCaption }])
 				}, T(e.caption), 11, Xe)) : g("", !0),
 				e.reorderable || e.resizable ? (S(), _("div", {
 					key: 2,
 					id: rn.value,
-					class: "sr-only"
+					class: "bb-sr-only"
 				}, [e.reorderable ? (S(), _(m, { key: 0 }, [Ce(T(E(L)("table.reorderInstructions").value), 1)], 64)) : g("", !0), e.resizable && !J.value ? (S(), _(m, { key: 1 }, [Ce(T(E(L)("table.resizeInstructions").value), 1)], 64)) : g("", !0)], 8, Ze)) : g("", !0),
 				v("span", Qe, T(Di.value ? e.loadingText || E(L)("common.loadingText").value : ""), 1),
 				e.reorderable ? (S(), _(m, { key: 3 }, [v("span", $e, T(fn.value), 1), v("div", {

package/dist/components/BbTable/BbTableDataRow.js

@@ -54,7 +54,7 @@ var s = r({
 				disabled: o.disabled,
 				readonly: n.readonly,
 				onChange: l
-			}), i("span", { class: "bb-table-check__label-text sr-only" }, o.accessibleLabel)]) : i("label", { class: ["bb-table-radio__label", { "bb-table-radio__label--disabled": o.disabled }] }, [i(t, {
+			}), i("span", { class: "bb-table-check__label-text bb-sr-only" }, o.accessibleLabel)]) : i("label", { class: ["bb-table-radio__label", { "bb-table-radio__label--disabled": o.disabled }] }, [i(t, {
 				checked: o.selected,
 				class: "bb-table-radio",
 				disabled: o.disabled,
@@ -62,7 +62,7 @@ var s = r({
 				readonly: n.readonly,
 				value: o.value,
 				onChange: l
-			}), i("span", { class: "bb-table-radio__label-text sr-only" }, o.accessibleLabel)])]));
+			}), i("span", { class: "bb-table-radio__label-text bb-sr-only" }, o.accessibleLabel)])]));
 		}, d = () => {
 			let { context: e, item: t } = r, s = t.cols.length - 1;
 			return t.cols.map((c, l) => i("div", {

package/dist/components/BbTag/BbTag.vue_vue_type_script_setup_true_lang.js

@@ -15,6 +15,7 @@ var g = /*@__PURE__*/ c({
 		comma: { type: Boolean },
 		clearable: { type: Boolean },
 		compact: { type: Boolean },
+		variant: {},
 		description: {},
 		direction: {},
 		disabled: { type: Boolean },
@@ -130,7 +131,8 @@ var g = /*@__PURE__*/ c({
 				placeholder: e.placeholder,
 				"prepend:icon": _["prepend:icon"],
 				readonly: e.readonly,
-				required: e.required
+				required: e.required,
+				variant: e.variant
 			}, w), {
 				"prepend-outer": h((t) => [m(e.$slots, "prepend-outer", d(l(t)))]),
 				prepend: h((t) => [m(e.$slots, "prepend", d(l(t)))]),
@@ -160,7 +162,8 @@ var g = /*@__PURE__*/ c({
 				"placeholder",
 				"prepend:icon",
 				"readonly",
-				"required"
+				"required",
+				"variant"
 			])]),
 			_: 3
 		}, 8, [

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

@@ -1,3 +1,4 @@
+import { InputVariantType } from '../../types/InputVariant';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { InputDirection } from '../../types/InputDirection';
 import { IconType } from '../../types/Icon';
@@ -38,6 +39,17 @@ export type BbTagProps = {
      * Sets the component in a compact mode.
      */
     compact?: boolean;
+    /**
+     * 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 state (errors and warnings show through
+     * the icon and the messages); every variant keeps the focus ring.
+     * Register extra names with the plugin's `inputVariants` option.
+     *
+     * @defaultValue `'outline'`
+     */
+    variant?: InputVariantType;
     /**
      * Descriptive text displayed below the label and above the input. Unlike the hint it is always
      * visible, and it is linked to the input via `aria-describedby` (after any

package/dist/components/BbTextInput/BbTextInput.vue_vue_type_script_setup_true_lang.js

@@ -13,6 +13,7 @@ var v = /*@__PURE__*/ l({
 		autofocus: {},
 		clearable: { type: Boolean },
 		compact: { type: Boolean },
+		variant: {},
 		description: {},
 		direction: {},
 		disabled: { type: Boolean },
@@ -124,7 +125,8 @@ var v = /*@__PURE__*/ l({
 				"prepend:icon": y["prepend:icon"],
 				readonly: e.readonly,
 				required: e.required,
-				type: e.type
+				type: e.type,
+				variant: e.variant
 			}, O), s({
 				"append-outer": _(() => [h(e.$slots, "append-outer")]),
 				append: _(() => [h(e.$slots, "append")]),
@@ -161,7 +163,8 @@ var v = /*@__PURE__*/ l({
 				"prepend:icon",
 				"readonly",
 				"required",
-				"type"
+				"type",
+				"variant"
 			])]),
 			_: 3
 		}, 8, [

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

@@ -1,3 +1,4 @@
+import { InputVariantType } from '../../types/InputVariant';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { InputDirection } from '../../types/InputDirection';
 import { MaskInputOptions } from 'maska';
@@ -24,6 +25,17 @@ export type BbTextInputProps = {
      * Displays the component in a compact version.
      */
     compact?: boolean;
+    /**
+     * 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 state (errors and warnings show through
+     * the icon and the messages); every variant keeps the focus ring.
+     * Register extra names with the plugin's `inputVariants` option.
+     *
+     * @defaultValue `'outline'`
+     */
+    variant?: InputVariantType;
     /**
      * Descriptive text displayed below the label and above the input. Unlike the hint it is always
      * visible, and it is linked to the input via `aria-describedby` (after any

package/dist/components/BbTextarea/BbTextarea.vue_vue_type_script_setup_true_lang.js

@@ -13,6 +13,7 @@ var h = /*@__PURE__*/ s({
 		autoGrow: { type: Boolean },
 		clearable: { type: Boolean },
 		compact: { type: Boolean },
+		variant: {},
 		description: {},
 		direction: {},
 		disabled: { type: Boolean },
@@ -117,7 +118,8 @@ var h = /*@__PURE__*/ s({
 				"prepend:icon": g["prepend:icon"],
 				readonly: e.readonly,
 				required: e.required,
-				rows: e.rows
+				rows: e.rows,
+				variant: e.variant
 			}, w), {
 				"append-outer": m(() => [p(e.$slots, "append-outer")]),
 				append: m(() => [p(e.$slots, "append")]),
@@ -145,7 +147,8 @@ var h = /*@__PURE__*/ s({
 				"prepend:icon",
 				"readonly",
 				"required",
-				"rows"
+				"rows",
+				"variant"
 			])]),
 			_: 3
 		}, 8, [

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

@@ -1,3 +1,4 @@
+import { InputVariantType } from '../../types/InputVariant';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { InputDirection } from '../../types/InputDirection';
 import { IconType } from '../../types/Icon';
@@ -27,6 +28,17 @@ export type BbTextareaProps = {
      * Sets the component in a compact state.
      */
     compact?: boolean;
+    /**
+     * 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 state (errors and warnings show through
+     * the icon and the messages); every variant keeps the focus ring.
+     * Register extra names with the plugin's `inputVariants` option.
+     *
+     * @defaultValue `'outline'`
+     */
+    variant?: InputVariantType;
     /**
      * Descriptive text displayed below the label and above the input. Unlike the hint it is always
      * visible, and it is linked to the input via `aria-describedby` (after any

package/dist/components/BbTimePickerInput/BbTimePickerInput.vue_vue_type_script_setup_true_lang.js

@@ -17,6 +17,7 @@ var _ = /*@__PURE__*/ s({
 		autofocus: {},
 		clearable: { type: Boolean },
 		compact: { type: Boolean },
+		variant: {},
 		description: {},
 		direction: {},
 		disabled: { type: Boolean },
@@ -120,7 +121,8 @@ var _ = /*@__PURE__*/ s({
 				required: e.required,
 				seconds: e.seconds,
 				step: e.step,
-				"transition-duration": e.transitionDuration
+				"transition-duration": e.transitionDuration,
+				variant: e.variant
 			}, E), {
 				"prepend-outer": g(() => [h(e.$slots, "prepend-outer")]),
 				prepend: g(() => [h(e.$slots, "prepend")]),
@@ -129,7 +131,7 @@ var _ = /*@__PURE__*/ s({
 				append: g(() => [h(e.$slots, "append")]),
 				"append-outer": g(() => [h(e.$slots, "append-outer")]),
 				_: 2
-			}, 1040, /* @__PURE__ */ "id.adaptive.ampm.append:icon.aria-describedby.autocomplete.autofocus.clearable.compact.disable-writing.disabled.has-errors.has-warning.loading.max.min.model-value.name.off-canvas-props.placeholder.prepend:icon.range.readonly.required.seconds.step.transition-duration".split("."))]),
+			}, 1040, /* @__PURE__ */ "id.adaptive.ampm.append:icon.aria-describedby.autocomplete.autofocus.clearable.compact.disable-writing.disabled.has-errors.has-warning.loading.max.min.model-value.name.off-canvas-props.placeholder.prepend:icon.range.readonly.required.seconds.step.transition-duration.variant".split("."))]),
 			_: 3
 		}, 8, [
 			"id",

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

@@ -1,3 +1,4 @@
+import { InputVariantType } from '../../types/InputVariant';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { InputDirection } from '../../types/InputDirection';
 import { IconType } from '../../types/Icon';
@@ -34,6 +35,17 @@ export type BbTimePickerInputProps = {
     clearable?: boolean;
     /** Sets the component in a compact state. */
     compact?: boolean;
+    /**
+     * 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 state (errors and warnings show through
+     * the icon and the messages); every variant keeps the focus ring.
+     * Register extra names with the plugin's `inputVariants` option.
+     *
+     * @defaultValue `'outline'`
+     */
+    variant?: InputVariantType;
     /**
      * Descriptive text displayed below the label and above the input. Always
      * visible and linked to the input via `aria-describedby` (after any