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

package/dist/components/BbBaseTag/BbBaseTag.vue_vue_type_script_setup_true_lang.js

@@ -32,6 +32,7 @@ var E = { class: "bb-base-tag__input-container" }, D = [
 		caseSensitive: { type: Boolean },
 		clearable: { type: Boolean },
 		compact: { type: Boolean },
+		variant: {},
 		disabled: { type: Boolean },
 		divider: { default: "Enter" },
 		hasErrors: { type: Boolean },
@@ -180,6 +181,7 @@ var E = { class: "bb-base-tag__input-container" }, D = [
 			loading: e.loading,
 			"prepend:icon": k["prepend:icon"],
 			readonly: e.readonly,
+			variant: e.variant,
 			onClick: Q,
 			"onClick:clear": fe,
 			onFocusin: J
@@ -258,7 +260,8 @@ var E = { class: "bb-base-tag__input-container" }, D = [
 			"has-warning",
 			"loading",
 			"prepend:icon",
-			"readonly"
+			"readonly",
+			"variant"
 		]));
 	}
 });

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

@@ -1,3 +1,4 @@
+import { InputVariantType } from '../../types/InputVariant';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { IconType } from '../../types/Icon';
 export type BaseTagProps = {
@@ -41,6 +42,10 @@ export type BaseTagProps = {
      * Apply the compact density variant.
      */
     compact?: boolean;
+    /**
+     * Visual variant of the field box, forwarded to `CommonInputWrapper`.
+     */
+    variant?: InputVariantType;
     /**
      * Disable all interactions with the tag input.
      */

package/dist/components/BbBaseTextInput/BbBaseTextInput.vue_vue_type_script_setup_true_lang.js

@@ -32,6 +32,7 @@ var v = [
 		autofocus: {},
 		clearable: { type: Boolean },
 		compact: { type: Boolean },
+		variant: {},
 		disabled: { type: Boolean },
 		emitMasked: { type: Boolean },
 		hasErrors: { type: Boolean },
@@ -142,6 +143,7 @@ var v = [
 			"prepend:icon": x["prepend:icon"],
 			readonly: x.readonly,
 			"reserve-append-space": x.clearable,
+			variant: x.variant,
 			"onClick:clear": r[0] ||= (t) => e.$emit("update:modelValue", null)
 		}, o({
 			"prepend-outer": g(() => [p(e.$slots, "prepend-outer")]),
@@ -192,7 +194,8 @@ var v = [
 			"loading",
 			"prepend:icon",
 			"readonly",
-			"reserve-append-space"
+			"reserve-append-space",
+			"variant"
 		]));
 	}
 });

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

@@ -1,3 +1,4 @@
+import { InputVariantType } from '../../types/InputVariant';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { IconType } from '../../types/Icon';
 import { MaskInputOptions } from 'maska';
@@ -29,6 +30,10 @@ export type BaseTextInputProps = {
      * Apply the compact density variant.
      */
     compact?: boolean;
+    /**
+     * Visual variant of the field box, forwarded to `CommonInputWrapper`.
+     */
+    variant?: InputVariantType;
     /**
      * Disable all interactions with the input.
      */

package/dist/components/BbBaseTextarea/BbBaseTextarea.vue_vue_type_script_setup_true_lang.js

@@ -29,6 +29,7 @@ var b = [
 		autofocus: {},
 		clearable: { type: Boolean },
 		compact: { type: Boolean },
+		variant: {},
 		disabled: { type: Boolean },
 		hasErrors: { type: Boolean },
 		hasWarning: { type: Boolean },
@@ -124,6 +125,7 @@ var b = [
 			"prepend:icon": S["prepend:icon"],
 			readonly: S.readonly,
 			"reserve-append-space": r.clearable,
+			variant: S.variant,
 			"onClick:clear": c[0] ||= (e) => r.$emit("update:modelValue", null)
 		}, o({
 			"prepend-outer": v(() => [h(r.$slots, "prepend-outer")]),
@@ -179,7 +181,8 @@ var b = [
 			"loading",
 			"prepend:icon",
 			"readonly",
-			"reserve-append-space"
+			"reserve-append-space",
+			"variant"
 		]));
 	}
 });

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

@@ -1,3 +1,4 @@
+import { InputVariantType } from '../../types/InputVariant';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { IconType } from '../../types/Icon';
 /**
@@ -34,6 +35,10 @@ export type BaseTextareaProps = {
      * Apply the compact density variant.
      */
     compact?: boolean;
+    /**
+     * Visual variant of the field box, forwarded to `CommonInputWrapper`.
+     */
+    variant?: InputVariantType;
     /**
      * Disable all interactions with the textarea.
      */

package/dist/components/BbBaseTimePickerInput/BbBaseTimePickerInput.vue_vue_type_script_setup_true_lang.js

@@ -58,6 +58,7 @@ var _e = ["data-value"], ve = [
 		autofocus: {},
 		clearable: { type: Boolean },
 		compact: { type: Boolean },
+		variant: {},
 		disabled: { type: Boolean },
 		disableWriting: {
 			type: [Boolean, String],
@@ -362,6 +363,7 @@ var _e = ["data-value"], ve = [
 			loading: C.loading,
 			"prepend:icon": C["prepend:icon"],
 			readonly: C.readonly,
+			variant: C.variant,
 			"onClick:clear": rt,
 			onFocusin: it
 		}, le({
@@ -433,7 +435,7 @@ var _e = ["data-value"], ve = [
 				}, v(Me(P.value[n], P.value[n + 1])), 11, ye)) : u("", !0)], 64))), 128))], 6),
 				f("span", {
 					id: A,
-					class: "bb-base-time-picker-input__accessible-description sr-only"
+					class: "bb-base-time-picker-input__accessible-description bb-sr-only"
 				}, v(Xe.value), 1),
 				p(y(at), null, {
 					default: x(() => [f("div", {
@@ -511,7 +513,8 @@ var _e = ["data-value"], ve = [
 			"has-warning",
 			"loading",
 			"prepend:icon",
-			"readonly"
+			"readonly",
+			"variant"
 		]));
 	}
 });

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

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

package/dist/components/BbBreadcrumbs/BbBreadcrumbs.vue_vue_type_script_setup_true_lang.js

@@ -6,13 +6,13 @@ import { slotKey as i } from "../../utilities/functions/slotKey.js";
 import a from "../../assets/svgs/chevron_right.svg_raw.js";
 import o from "../BbDropdown/BbDropdown.vue.js";
 import { estimateBreadcrumbItemWidth as s, estimateEllipsisWidth as c } from "./estimateBreadcrumbItemWidth.js";
-import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createSlots as ee, createTextVNode as te, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeProps as v, normalizeProps as y, normalizeStyle as ne, onBeforeUnmount as b, openBlock as x, ref as S, renderList as C, renderSlot as w, unref as T, useSlots as re, watch as ie, withCtx as E } from "vue";
-import { useResizeObserver as ae } from "@vueuse/core";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createSlots as ee, createTextVNode as te, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeProps as v, normalizeProps as y, normalizeStyle as ne, onBeforeUnmount as b, openBlock as x, ref as S, renderList as C, renderSlot as w, unref as T, useSlots as re, watch as E, withCtx as D } from "vue";
+import { useResizeObserver as O } from "@vueuse/core";
 //#region src/components/BbBreadcrumbs/BbBreadcrumbs.vue?vue&type=script&setup=true&lang.ts
-var oe = ["aria-label"], se = { class: "bb-breadcrumbs__container" }, ce = {
+var ie = ["aria-label"], ae = { class: "bb-breadcrumbs__container" }, oe = {
 	key: 0,
 	class: "bb-breadcrumbs__edge bb-breadcrumbs__edge--prepend"
-}, D = { class: "bb-breadcrumbs__list" }, O = {
+}, se = { class: "bb-breadcrumbs__list" }, ce = {
 	key: 0,
 	class: "bb-breadcrumbs__item"
 }, le = { class: "bb-breadcrumbs__breadcrumb-container" }, ue = ["aria-label", "disabled"], de = {
@@ -26,10 +26,10 @@ var oe = ["aria-label"], se = { class: "bb-breadcrumbs__container" }, ce = {
 	key: 0,
 	"aria-hidden": "true",
 	class: "bb-breadcrumbs__divider"
-}, k = {
+}, he = {
 	key: 1,
 	class: "bb-breadcrumbs__edge bb-breadcrumbs__edge--append"
-}, he = 5, A = 20, ge = 1, j = 8.5, _e = .5, ve = 8, M = 200, N = /*@__PURE__*/ g({
+}, k = 20, ge = 1, A = 8.5, _e = .5, ve = 8, ye = 200, j = /*@__PURE__*/ g({
 	__name: "BbBreadcrumbs",
 	props: {
 		disabled: { type: Boolean },
@@ -41,122 +41,122 @@ var oe = ["aria-label"], se = { class: "bb-breadcrumbs__container" }, ce = {
 		ellipsisWidth: {}
 	},
 	setup(g) {
-		let N = g, { t: P } = n();
+		let j = g, { t: M } = n();
 		e();
-		let F = re(), ye = /* @__PURE__ */ new Set([
+		let N = re(), P = /* @__PURE__ */ new Set([
 			"prepend",
 			"append",
 			"ellipsis",
 			"divider",
 			"activator"
-		]), I = (e) => i(e.key), be = (e) => {
+		]), F = (e) => i(e.key), be = (e) => {
 			let { "prepend:icon": t, "append:icon": n, ...r } = e;
 			return r;
-		}, L = (e, t) => {
-			let n = `${I(e)}:${t}`;
-			return F[n] ? {
+		}, I = (e, t) => {
+			let n = `${F(e)}:${t}`;
+			return N[n] ? {
 				name: n,
 				exists: !0
-			} : F[`item:${t}`] ? {
+			} : N[`item:${t}`] ? {
 				name: `item:${t}`,
 				exists: !0
 			} : {
 				name: n,
 				exists: !1
 			};
-		}, xe = u(() => Object.keys(F).filter((e) => !ye.has(e))), R = S(null), z = S(0), B = u(() => N.gapWidth), V = u(() => Math.max(0, N.offsetWidth)), Se = u(() => N.estimationBias), H = u(() => N.ellipsisWidth ?? c(j)), Ce = u(() => P("breadcrumbs.label").value), we = u(() => P("breadcrumbs.openHiddenLabelCount", z.value).value), U = (e) => s(e.text ?? String(e.key), {
+		}, xe = u(() => Object.keys(N).filter((e) => !P.has(e))), L = S(null), R = S(0), z = u(() => j.gapWidth), B = u(() => Math.max(0, j.offsetWidth)), Se = u(() => j.estimationBias), V = u(() => j.ellipsisWidth ?? c(A)), Ce = u(() => M("breadcrumbs.label").value), we = u(() => M("breadcrumbs.openHiddenLabelCount", R.value).value), H = (e) => s(e.text ?? String(e.key), {
 			estimationBias: Se.value,
-			fontWidth: j
+			fontWidth: A
 		}), Te = u(() => {
-			let e = N.items.length;
+			let e = j.items.length;
 			if (e === 0) return 0;
-			let t = N.dividerWidth, n = B.value;
-			return N.items.map(U).reduce((e, t) => e + t, 0) + (e > 1 ? (e - 1) * (t + 2 * n) : 0) + V.value + A + he;
+			let t = j.dividerWidth, n = z.value;
+			return j.items.map(H).reduce((e, t) => e + t, 0) + (e > 1 ? (e - 1) * (t + 2 * n) : 0) + B.value + k + 12;
 		}), Ee = u(() => ({
 			"--flex-basis": `${Math.ceil(Te.value)}px`,
-			"--flex-grow": z.value > 0 ? "1" : "0",
-			"--gap": `${B.value}px`
+			"--flex-grow": R.value > 0 ? "1" : "0",
+			"--gap": `${z.value}px`
 		})), De = (e) => {
-			let t = N.items.length;
+			let t = j.items.length;
 			if (t === 0) {
-				z.value = 0;
+				R.value = 0;
 				return;
 			}
-			let n = Math.max(0, e - ge - V.value - A), r = N.dividerWidth, i = H.value, a = B.value, o = N.items.map(U), s = Array.from({ length: t + 1 }, () => 0);
+			let n = Math.max(0, e - ge - B.value - k), r = j.dividerWidth, i = V.value, a = z.value, o = j.items.map(H), s = Array.from({ length: t + 1 }, () => 0);
 			for (let e = t - 1; e >= 0; e--) s[e] = s[e + 1] + o[e];
-			let c = (e) => n - e <= A / 2, l = s[0] + (t > 1 ? (t - 1) * (r + 2 * a) : 0);
+			let c = (e) => n - e <= k / 2, l = s[0] + (t > 1 ? (t - 1) * (r + 2 * a) : 0);
 			if (l <= n) {
 				if (t > 1 && c(l)) {
-					z.value = 1;
+					R.value = 1;
 					return;
 				}
-				z.value = 0;
+				R.value = 0;
 				return;
 			}
 			for (let e = t - 1; e >= 0; e--) {
 				let o = s[t - e], l = i + e * (r + 2 * a) + o;
 				if (l <= n) {
 					if (e > 0 && c(l)) {
-						z.value = t - (e - 1);
+						R.value = t - (e - 1);
 						return;
 					}
-					z.value = t - e;
+					R.value = t - e;
 					return;
 				}
 			}
-			z.value = t;
-		}, W = u(() => R.value), Oe = u(() => N.items.map((e) => `${String(e.key)}::${e.text ?? ""}`).join("|")), G = null, K = null, q = null, J = null, Y = 0, X = null, Z = (e, t) => Math.abs(e - t) <= _e, Q = () => {
-			X != null && clearTimeout(X), X = setTimeout(() => {
-				X = null, Y = 0;
-			}, M);
-		}, ke = () => {
-			if (K = null, G == null) return;
-			let e = G;
-			if (G = null, q != null && Z(e, q)) {
-				Q();
+			R.value = t;
+		}, U = u(() => L.value), Oe = u(() => j.items.map((e) => `${String(e.key)}::${e.text ?? ""}`).join("|")), W = null, G = null, K = null, q = null, J = 0, Y = null, X = (e, t) => Math.abs(e - t) <= _e, Z = () => {
+			Y != null && clearTimeout(Y), Y = setTimeout(() => {
+				Y = null, J = 0;
+			}, ye);
+		}, Q = () => {
+			if (G = null, W == null) return;
+			let e = W;
+			if (W = null, K != null && X(e, K)) {
+				Z();
 				return;
 			}
-			if (Y = J != null && q != null && Z(e, J) && !Z(e, q) ? Y + 1 : 0, Y >= ve) {
-				J = q, q = e, Q();
+			if (J = q != null && K != null && X(e, q) && !X(e, K) ? J + 1 : 0, J >= ve) {
+				q = K, K = e, Z();
 				return;
 			}
-			J = q, q = e, De(e), Q();
+			q = K, K = e, De(e), Z();
 		}, $ = (e) => {
-			G = e, K ??= requestAnimationFrame(ke);
+			W = e, G ??= requestAnimationFrame(Q);
 		};
-		ae(W, ([e]) => {
+		O(U, ([e]) => {
 			$(e.contentRect.width);
-		}), ie([
-			W,
+		}), E([
+			U,
 			Oe,
-			() => N.dividerWidth,
-			() => N.gapWidth,
-			() => N.offsetWidth,
-			() => N.estimationBias,
-			() => N.ellipsisWidth
+			() => j.dividerWidth,
+			() => j.gapWidth,
+			() => j.offsetWidth,
+			() => j.estimationBias,
+			() => j.ellipsisWidth
 		], ([e]) => {
 			e && $(e.clientWidth);
 		}, { immediate: !0 }), b(() => {
-			K != null && cancelAnimationFrame(K), X != null && clearTimeout(X);
+			G != null && cancelAnimationFrame(G), Y != null && clearTimeout(Y);
 		});
-		let Ae = u(() => N.items.slice(0, z.value).map((e) => ({
+		let ke = u(() => j.items.slice(0, R.value).map((e) => ({
 			...e,
 			text: e.text ?? e.key
 		})));
 		return (e, n) => (x(), p("nav", {
 			ref_key: "navRef",
-			ref: R,
+			ref: L,
 			"aria-label": Ce.value,
 			class: "bb-breadcrumbs",
 			style: ne(Ee.value)
-		}, [m("div", se, [
-			e.$slots.prepend ? (x(), p("div", ce, [w(e.$slots, "prepend", { disabled: e.disabled })])) : f("", !0),
-			m("ol", D, [z.value > 0 ? (x(), p("li", O, [h(o, {
-				items: Ae.value,
+		}, [m("div", ae, [
+			e.$slots.prepend ? (x(), p("div", oe, [w(e.$slots, "prepend", { disabled: e.disabled })])) : f("", !0),
+			m("ol", se, [R.value > 0 ? (x(), p("li", ce, [h(o, {
+				items: ke.value,
 				padding: 0,
 				placement: "bottom-start"
 			}, ee({
-				activator: E(({ props: t }) => [m("span", le, [m("button", v(t, {
+				activator: D(({ props: t }) => [m("span", le, [m("button", v(t, {
 					"aria-label": we.value,
 					class: "bb-breadcrumbs__ellipsis",
 					disabled: e.disabled,
@@ -164,24 +164,24 @@ var oe = ["aria-label"], se = { class: "bb-breadcrumbs__container" }, ce = {
 				}), [w(e.$slots, "ellipsis", y(_({
 					props: t,
 					disabled: e.disabled,
-					overflowCount: z.value,
-					ellipsisWidth: H.value
+					overflowCount: R.value,
+					ellipsisWidth: V.value
 				})), () => [n[0] ||= te(" … ")])], 16, ue)])]),
 				_: 2
 			}, [C(xe.value, (t) => ({
 				name: t,
-				fn: E((n) => [w(e.$slots, t, y(_(n)))])
-			}))]), 1032, ["items"]), z.value < e.items.length ? (x(), p("span", de, [w(e.$slots, "divider", {}, () => [h(r, {
+				fn: D((n) => [w(e.$slots, t, y(_(n)))])
+			}))]), 1032, ["items"]), R.value < e.items.length ? (x(), p("span", de, [w(e.$slots, "divider", {}, () => [h(r, {
 				icon: T(a),
 				size: "14"
-			}, null, 8, ["icon"])])])) : f("", !0)])) : f("", !0), (x(!0), p(l, null, C(e.items, (n, i) => (x(), p(l, { key: n.key }, [i >= z.value ? (x(), p("li", fe, [m("span", pe, [
-				w(e.$slots, L(n, "prepend").name, {
+			}, null, 8, ["icon"])])])) : f("", !0)])) : f("", !0), (x(!0), p(l, null, C(e.items, (n, i) => (x(), p(l, { key: n.key }, [i >= R.value ? (x(), p("li", fe, [m("span", pe, [
+				w(e.$slots, I(n, "prepend").name, {
 					disabled: !!(n.disabled || e.disabled),
 					index: i,
 					item: n,
 					text: n.text
 				}),
-				!L(n, "prepend").exists && n["prepend:icon"] ? (x(), d(r, {
+				!I(n, "prepend").exists && n["prepend:icon"] ? (x(), d(r, {
 					key: 0,
 					class: "bb-breadcrumbs__item-icon bb-breadcrumbs__item-icon--prepend",
 					icon: n["prepend:icon"],
@@ -192,7 +192,7 @@ var oe = ["aria-label"], se = { class: "bb-breadcrumbs__container" }, ce = {
 					class: "bb-breadcrumbs__breadcrumb",
 					disabled: n.disabled || e.disabled
 				}), {
-					default: E(() => [w(e.$slots, I(n), {
+					default: D(() => [w(e.$slots, F(n), {
 						disabled: !!(n.disabled || e.disabled),
 						index: i,
 						item: n,
@@ -200,13 +200,13 @@ var oe = ["aria-label"], se = { class: "bb-breadcrumbs__container" }, ce = {
 					})]),
 					_: 2
 				}, 1040, ["aria-current", "disabled"]),
-				w(e.$slots, L(n, "append").name, {
+				w(e.$slots, I(n, "append").name, {
 					disabled: !!(n.disabled || e.disabled),
 					index: i,
 					item: n,
 					text: n.text
 				}),
-				!L(n, "append").exists && n["append:icon"] ? (x(), d(r, {
+				!I(n, "append").exists && n["append:icon"] ? (x(), d(r, {
 					key: 1,
 					class: "bb-breadcrumbs__item-icon bb-breadcrumbs__item-icon--append",
 					icon: n["append:icon"],
@@ -216,9 +216,9 @@ var oe = ["aria-label"], se = { class: "bb-breadcrumbs__container" }, ce = {
 				icon: T(a),
 				size: "14"
 			}, null, 8, ["icon"])])])) : f("", !0)])) : f("", !0)], 64))), 128))]),
-			e.$slots.append ? (x(), p("div", k, [w(e.$slots, "append", { disabled: e.disabled })])) : f("", !0)
-		])], 12, oe));
+			e.$slots.append ? (x(), p("div", he, [w(e.$slots, "append", { disabled: e.disabled })])) : f("", !0)
+		])], 12, ie));
 	}
 });
 //#endregion
-export { N as default };
+export { j as default };

package/dist/components/BbButton/BbButton.vue_vue_type_script_setup_true_lang.js

@@ -14,7 +14,7 @@ import { Transition as f, computed as p, createBlock as m, createCommentVNode as
 //#region src/components/BbButton/BbButton.vue?vue&type=script&setup=true&lang.ts
 var M = {
 	key: 3,
-	class: "bb-button__loading-label sr-only"
+	class: "bb-button__loading-label bb-sr-only"
 }, N = /*@__PURE__*/ y({
 	inheritAttrs: !1,
 	__name: "BbButton",
@@ -180,7 +180,7 @@ var M = {
 					class: "bb-button__prepend-icon",
 					icon: P["prepend:icon"]
 				}, null, 8, ["icon"])) : h("", !0),
-				_("span", { class: S(["bb-button__content", { "sr-only": !!e.icon }]) }, [T(e.$slots, "default", {}, () => [v(E(e.text), 1)])], 2),
+				_("span", { class: S(["bb-button__content", { "bb-sr-only": !!e.icon }]) }, [T(e.$slots, "default", {}, () => [v(E(e.text), 1)])], 2),
 				G.value ? (C(), g("span", M, E(D(z)("common.loadingText")), 1)) : h("", !0),
 				!e.icon && P["append:icon"] ? (C(), m(s, {
 					key: 4,

package/dist/components/BbColorInput/BbColorInput.vue_vue_type_script_setup_true_lang.js

@@ -19,6 +19,7 @@ var _ = /*@__PURE__*/ l({
 		autofocus: {},
 		clearable: { type: Boolean },
 		compact: { type: Boolean },
+		variant: {},
 		description: {},
 		direction: {},
 		disabled: { type: Boolean },
@@ -124,7 +125,8 @@ var _ = /*@__PURE__*/ l({
 				"prepend:icon": v["prepend:icon"],
 				readonly: e.readonly,
 				required: e.required,
-				swatches: e.swatches
+				swatches: e.swatches,
+				variant: e.variant
 			}, T), {
 				"append-outer": g(() => [h(e.$slots, "append-outer")]),
 				append: g(() => [h(e.$slots, "append")]),
@@ -154,7 +156,8 @@ var _ = /*@__PURE__*/ l({
 				"prepend:icon",
 				"readonly",
 				"required",
-				"swatches"
+				"swatches",
+				"variant"
 			])]),
 			_: 3
 		}, 8, [

package/dist/components/BbColorInput/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';
@@ -36,6 +37,17 @@ export type BbColorInputProps = {
      * 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/BbDatePickerInput/BbDatePickerInput.vue_vue_type_script_setup_true_lang.js

@@ -21,6 +21,7 @@ var y = /*@__PURE__*/ l({
 		autofocus: {},
 		clearable: { type: Boolean },
 		compact: { type: Boolean },
+		variant: {},
 		direction: {},
 		disabled: { type: Boolean },
 		errors: {},
@@ -140,7 +141,8 @@ var y = /*@__PURE__*/ l({
 				time: e.time,
 				"transition-duration": e.transitionDuration,
 				type: e.type,
-				utc: e.utc
+				utc: e.utc,
+				variant: e.variant
 			}, O), {
 				"prepend-outer": v(() => [_(e.$slots, "prepend-outer")]),
 				prepend: v(() => [_(e.$slots, "prepend")]),
@@ -151,7 +153,7 @@ var y = /*@__PURE__*/ l({
 				day: v((t) => [_(e.$slots, "day", f(u(t)))]),
 				"append:day": v((t) => [_(e.$slots, "append:day", f(u(t)))]),
 				_: 2
-			}, 1040, /* @__PURE__ */ "id.adaptive.ampm.append:icon.aria-describedby.autocomplete.autofocus.clearable.compact.disable-calendar.disable-writing.disabled.first-day-of-week.floating.has-errors.has-warning.loading.max.min.model-value.name.off-canvas-props.placeholder.prepend:icon.range.readonly.required.seconds.selectable.step.time.transition-duration.type.utc".split("."))]),
+			}, 1040, /* @__PURE__ */ "id.adaptive.ampm.append:icon.aria-describedby.autocomplete.autofocus.clearable.compact.disable-calendar.disable-writing.disabled.first-day-of-week.floating.has-errors.has-warning.loading.max.min.model-value.name.off-canvas-props.placeholder.prepend:icon.range.readonly.required.seconds.selectable.step.time.transition-duration.type.utc.variant".split("."))]),
 			_: 3
 		}, 8, [
 			"id",

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

@@ -1,3 +1,4 @@
+import { InputVariantType } from '../../types/InputVariant';
 import { DatePickerType } from '../../types/DatePickerType';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { InputDirection } from '../../types/InputDirection';
@@ -52,6 +53,17 @@ export type BbDatePickerInputProps = {
      * 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;
     /**
      * Direction of the layout of the component. Can either be a predefined value or a pattern separated by a space like `xx xxxxx`.
      */