bitboss-ui 3.0.0-beta.63 → 3.0.0-beta.64

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

@@ -1,22 +1,22 @@
 import { useLogger as e } from "../../composables/useLogger.js";
-import { TEXT_CONTROL_NATIVE_ATTRS as t, formControlPtActive as n, usePassthrough as r } from "../../composables/usePassthrough.js";
-import { useConfig as i } from "../../composables/useConfig.js";
-import { removedPropsFor as a } from "../../deprecation/removedProps.js";
-import { warnRemovedAttrs as o } from "../../utilities/functions/warnRemovedAttrs.js";
-import { isImeComposing as ee } from "../../utilities/functions/isImeComposing.js";
-import te from "../BbSmoothHeight/BbSmoothHeight.vue.js";
-import { vAutofocus as ne } from "../../utilities/misc/autofocus.js";
-import re from "../CommonField/CommonField.vue.js";
-import { useFormBinding as ie } from "../../composables/useFormBinding.js";
-import { useIndexById as ae } from "../../composables/useIndexById.js";
-import { useBaseOptions as oe } from "../../composables/useBaseOptions.js";
-import se from "../CommonFieldInput/CommonFieldInput.vue.js";
-import ce from "../ChipsBox/ChipsBox.vue.js";
-import le from "../CommaBox/CommaBox.vue.js";
+import { TEXT_CONTROL_NATIVE_ATTRS as t, formControlPtActive as n, usePassthrough as r, variantPt as i } from "../../composables/usePassthrough.js";
+import { useConfig as a } from "../../composables/useConfig.js";
+import { removedPropsFor as o } from "../../deprecation/removedProps.js";
+import { warnRemovedAttrs as ee } from "../../utilities/functions/warnRemovedAttrs.js";
+import { isImeComposing as te } from "../../utilities/functions/isImeComposing.js";
+import ne from "../BbSmoothHeight/BbSmoothHeight.vue.js";
+import { vAutofocus as re } from "../../utilities/misc/autofocus.js";
+import ie from "../CommonField/CommonField.vue.js";
+import { useFormBinding as ae } from "../../composables/useFormBinding.js";
+import { useIndexById as oe } from "../../composables/useIndexById.js";
+import { useBaseOptions as se } from "../../composables/useBaseOptions.js";
+import ce from "../CommonFieldInput/CommonFieldInput.vue.js";
+import le from "../ChipsBox/ChipsBox.vue.js";
+import ue from "../CommaBox/CommaBox.vue.js";
 import { BB_TAG_PT as s } from "./types.js";
-import { computed as c, createBlock as l, createElementVNode as u, createSlots as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeProps as h, nextTick as ue, normalizeClass as de, normalizeProps as g, onBeforeUnmount as fe, onDeactivated as pe, openBlock as _, ref as v, renderSlot as y, toRaw as me, toRef as b, unref as x, useAttrs as he, vModelText as ge, watch as S, withCtx as C, withDirectives as _e, withModifiers as w } from "vue";
+import { computed as c, createBlock as l, createElementVNode as u, createSlots as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeProps as h, nextTick as de, normalizeClass as fe, normalizeProps as g, onBeforeUnmount as pe, onDeactivated as me, openBlock as _, ref as v, renderSlot as y, toRaw as he, toRef as b, unref as x, useAttrs as ge, vModelText as _e, watch as S, withCtx as C, withDirectives as ve, withModifiers as w } from "vue";
 //#region src/components/BbTag/BbTag.vue?vue&type=script&setup=true&lang.ts
-var ve = { class: "bb-tag__input-container" }, ye = [
+var ye = { class: "bb-tag__input-container" }, be = [
 	"id",
 	"aria-describedby",
 	"aria-disabled",
@@ -31,6 +31,7 @@ var ve = { class: "bb-tag__input-container" }, ye = [
 	"required",
 	"aria-required"
 ], T = /*@__PURE__*/ p({
+	mixins: [i(s)],
 	inheritAttrs: !1,
 	__name: "BbTag",
 	props: {
@@ -132,6 +133,42 @@ var ve = { class: "bb-tag__input-container" }, ye = [
 		"pt:comma:hasValue": {},
 		"pt:badge:highlighted": {},
 		"pt:comma:highlighted": {},
+		"pt:root:outline": {},
+		"pt:root:secondary": {},
+		"pt:root:ghost": {},
+		"pt:label:outline": {},
+		"pt:label:secondary": {},
+		"pt:label:ghost": {},
+		"pt:description:outline": {},
+		"pt:description:secondary": {},
+		"pt:description:ghost": {},
+		"pt:message:outline": {},
+		"pt:message:secondary": {},
+		"pt:message:ghost": {},
+		"pt:hint:outline": {},
+		"pt:hint:secondary": {},
+		"pt:hint:ghost": {},
+		"pt:box:outline": {},
+		"pt:box:secondary": {},
+		"pt:box:ghost": {},
+		"pt:input:outline": {},
+		"pt:input:secondary": {},
+		"pt:input:ghost": {},
+		"pt:icon:outline": {},
+		"pt:icon:secondary": {},
+		"pt:icon:ghost": {},
+		"pt:spinner:outline": {},
+		"pt:spinner:secondary": {},
+		"pt:spinner:ghost": {},
+		"pt:prefix:outline": {},
+		"pt:prefix:secondary": {},
+		"pt:prefix:ghost": {},
+		"pt:suffix:outline": {},
+		"pt:suffix:secondary": {},
+		"pt:suffix:ghost": {},
+		"pt:clear:outline": {},
+		"pt:clear:secondary": {},
+		"pt:clear:ghost": {},
 		"pt:badge": {},
 		"pt:comma": {},
 		pt: {},
@@ -193,249 +230,253 @@ var ve = { class: "bb-tag__input-container" }, ye = [
 		"max",
 		"update:modelValue"
 	],
-	setup(p, { emit: T }) {
-		let E = p, { props: D, emit: O, showAsterisk: be, errors: xe, required: k, ariaRequired: Se, model: A, readonly: j } = ie(E, T, {
+	setup(i, { emit: p }) {
+		let T = i, { props: E, emit: D, showAsterisk: xe, errors: Se, required: O, ariaRequired: Ce, model: k, readonly: A } = ae(T, p, {
 			componentName: "BbTag",
-			identifierFallback: () => E.label,
+			identifierFallback: () => T.label,
 			emptyValue: () => [],
 			leaveOn: "inactive"
-		}), Ce = c(() => Se.value ?? (k.value && A.value.length ? !0 : void 0)), we = i();
-		process.env.NODE_ENV !== "production" && o("BbTag", a("BbTag"));
-		let M = v("idle"), N = c(() => M.value === "active"), Te = c(() => D.persistentHint || M.value !== "idle"), P = c(() => (D.modelValue?.length ?? 0) > 0), Ee = c(() => D.labelMode ?? we.defaultInputLabelMode), F = r({
+		}), we = c(() => Ce.value ?? (O.value && k.value.length ? !0 : void 0)), Te = a();
+		process.env.NODE_ENV !== "production" && ee("BbTag", o("BbTag"));
+		let j = v("idle"), M = c(() => j.value === "active"), Ee = c(() => E.persistentHint || j.value !== "idle"), N = c(() => (E.modelValue?.length ?? 0) > 0), De = c(() => E.labelMode ?? Te.defaultInputLabelMode), P = r({
 			component: "BbTag",
-			attrs: he(),
+			attrs: ge(),
 			controlAttrs: t,
-			props: D,
+			props: E,
 			parts: s.parts,
 			states: s.states,
-			active: n(D, () => P.value)
-		}), De = e();
-		Array.isArray(D.modelValue) || De.throw("BbTag: modelValue must be an array.");
-		let I = v(null), L = v(null), R = v(null), z = c(() => D.comma ? L.value : R.value), B = v(null), Oe = () => {
-			B.value instanceof HTMLInputElement && B.value.focus();
-		}, V = v(""), H = c(() => Ae.value.filter((e) => e.selected)), { data: U } = ae({ items: b(D, "modelValue") }), W = (e) => D.caseSensitive ? e : e.toLowerCase(), ke = c(() => new Set(D.modelValue.map((e) => W(String(e))))), { options: Ae } = oe({
-			disabled: b(D, "disabled"),
-			items: c(() => D.modelValue),
+			active: n(E, () => N.value),
+			variant: {
+				...s.variant,
+				current: () => E.variant ?? "outline"
+			}
+		}), Oe = e();
+		Array.isArray(E.modelValue) || Oe.throw("BbTag: modelValue must be an array.");
+		let F = v(null), I = v(null), L = v(null), R = c(() => E.comma ? I.value : L.value), z = v(null), ke = () => {
+			z.value instanceof HTMLInputElement && z.value.focus();
+		}, B = v(""), V = c(() => je.value.filter((e) => e.selected)), { data: H } = oe({ items: b(E, "modelValue") }), U = (e) => E.caseSensitive ? e : e.toLowerCase(), Ae = c(() => new Set(E.modelValue.map((e) => U(String(e))))), { options: je } = se({
+			disabled: b(E, "disabled"),
+			items: c(() => E.modelValue),
 			itemText: void 0,
 			itemValue: void 0,
-			max: b(D, "max"),
+			max: b(E, "max"),
 			selectable: !0,
-			selectedIndexedByHash: U
-		}), G = () => {
-			V.value = "";
-		}, K = async (e) => {
-			if (D.disabled || D.readonly) return;
-			let t = { ...U.value };
-			delete t[e.valueHash], O("update:modelValue", Object.values(t)), Oe();
-		}, q;
-		S(() => D.modelValue, async (e) => {
-			if (me(e) === q) {
-				q = void 0;
+			selectedIndexedByHash: H
+		}), W = () => {
+			B.value = "";
+		}, G = async (e) => {
+			if (E.disabled || E.readonly) return;
+			let t = { ...H.value };
+			delete t[e.valueHash], D("update:modelValue", Object.values(t)), ke();
+		}, K;
+		S(() => E.modelValue, async (e) => {
+			if (he(e) === K) {
+				K = void 0;
 				return;
 			}
-			G();
-		}), S(() => D.disabled, (e) => {
-			e && z.value?.blur();
-		}), S(() => D.readonly, (e) => {
-			e && z.value?.blur();
+			W();
+		}), S(() => E.disabled, (e) => {
+			e && R.value?.blur();
+		}), S(() => E.readonly, (e) => {
+			e && R.value?.blur();
 		});
-		let je = () => {
-			M.value = "active", O("active");
-		}, J = () => {
-			M.value = "idle", O("inactive");
-		}, Me = () => {
-			N.value || (je(), document.addEventListener("click", Q), document.addEventListener("focusin", Q));
-		}, Y = c(() => !(D.readonly || D.disabled || !z.value)), Ne = (e) => {
-			Y.value && (V.value || (e.preventDefault(), H.value.length && z.value?.focusPrevious()));
-		}, Pe = (e) => {
-			Y.value && (V.value || (e.preventDefault(), H.value.length && z.value?.focusNext()));
-		}, X = async () => {
-			!Y.value || V.value || !H.value.length || (z.value?.getHighlighted() && z.value.confirmOption(), await ue(), z.value?.focusPrevious());
-		}, Fe = () => {
-			z.value?.blur();
-		}, Ie = (e) => {
-			!Y.value || V.value || (e.preventDefault(), H.value.length && z.value?.focusFirst());
+		let Me = () => {
+			j.value = "active", D("active");
+		}, q = () => {
+			j.value = "idle", D("inactive");
+		}, Ne = () => {
+			M.value || (Me(), document.addEventListener("click", Z), document.addEventListener("focusin", Z));
+		}, J = c(() => !(E.readonly || E.disabled || !R.value)), Pe = (e) => {
+			J.value && (B.value || (e.preventDefault(), V.value.length && R.value?.focusPrevious()));
+		}, Fe = (e) => {
+			J.value && (B.value || (e.preventDefault(), V.value.length && R.value?.focusNext()));
+		}, Y = async () => {
+			!J.value || B.value || !V.value.length || (R.value?.getHighlighted() && R.value.confirmOption(), await de(), R.value?.focusPrevious());
+		}, Ie = () => {
+			R.value?.blur();
 		}, Le = (e) => {
-			!Y.value || V.value || (e.preventDefault(), H.value.length && z.value?.focusLast());
-		}, Z = c(() => Array.isArray(D.divider) ? D.divider : [D.divider]), Re = async (e) => {
-			if (O("keydown", e), e.key === "Tab") {
-				z.value?.blur();
+			!J.value || B.value || (e.preventDefault(), V.value.length && R.value?.focusFirst());
+		}, Re = (e) => {
+			!J.value || B.value || (e.preventDefault(), V.value.length && R.value?.focusLast());
+		}, X = c(() => Array.isArray(E.divider) ? E.divider : [E.divider]), ze = async (e) => {
+			if (D("keydown", e), e.key === "Tab") {
+				R.value?.blur();
 				return;
 			}
-			if (D.readonly || D.disabled) {
+			if (E.readonly || E.disabled) {
 				e.preventDefault();
 				return;
 			}
-			/^[A-Za-z0-9]$/.test(e.key) && z.value?.blur(), (Z.value.find((t) => t === e.key) ?? (e.key === "Unidentified" ? Z.value.find((e) => V.value.includes(e)) : void 0)) !== void 0 && Be(e);
-		}, ze = () => {
-			let e = [V.value];
-			for (let t of Z.value) t.length === 1 && (e = e.flatMap((e) => e.split(t)));
+			/^[A-Za-z0-9]$/.test(e.key) && R.value?.blur(), (X.value.find((t) => t === e.key) ?? (e.key === "Unidentified" ? X.value.find((e) => B.value.includes(e)) : void 0)) !== void 0 && Ve(e);
+		}, Be = () => {
+			let e = [B.value];
+			for (let t of X.value) t.length === 1 && (e = e.flatMap((e) => e.split(t)));
 			return e.map((e) => e.trim()).filter(Boolean);
-		}, Be = (e) => {
-			let t = ze();
+		}, Ve = (e) => {
+			let t = Be();
 			if (!t.length) {
-				V.value = "";
+				B.value = "";
 				return;
 			}
 			e.preventDefault();
-			let n = new Set(ke.value), r = [], i = [];
+			let n = new Set(Ae.value), r = [], i = [];
 			for (let [e, a] of t.entries()) {
-				if (n.has(W(a))) {
-					O("duplicate", a);
+				if (n.has(U(a))) {
+					D("duplicate", a);
 					continue;
 				}
-				if (D.max !== void 0 && H.value.length + r.length >= D.max) {
-					O("max", a), i = t.slice(e);
+				if (E.max !== void 0 && V.value.length + r.length >= E.max) {
+					D("max", a), i = t.slice(e);
 					break;
 				}
-				n.add(W(a)), r.push(a);
+				n.add(U(a)), r.push(a);
 			}
-			if (V.value = i.join(`${Z.value.find((e) => e.length === 1) ?? ","} `), !r.length) return;
-			let a = D.modelValue.concat(r);
-			q = i.length ? a : void 0, O("update:modelValue", a);
-		}, Ve = {
-			ArrowLeft: Ne,
-			ArrowRight: Pe,
-			Backspace: X,
-			Delete: X,
-			End: Le,
+			if (B.value = i.join(`${X.value.find((e) => e.length === 1) ?? ","} `), !r.length) return;
+			let a = E.modelValue.concat(r);
+			K = i.length ? a : void 0, D("update:modelValue", a);
+		}, He = {
+			ArrowLeft: Pe,
+			ArrowRight: Fe,
+			Backspace: Y,
+			Delete: Y,
+			End: Re,
 			Escape: (e) => {
-				e.preventDefault(), Fe();
+				e.preventDefault(), Ie();
 			},
-			Home: Ie
-		}, He = (e) => {
-			if (ee(e)) {
-				O("keydown", e);
+			Home: Le
+		}, Ue = (e) => {
+			if (te(e)) {
+				D("keydown", e);
 				return;
 			}
-			Re(e), Ve[e.key]?.(e);
-		}, Ue = (e) => {
-			M.value === "idle" && (M.value = "focused"), O("focus", e);
+			ze(e), He[e.key]?.(e);
 		}, We = (e) => {
-			O("click", e);
-		}, Q = async (e) => {
-			if (e.target instanceof Node && I.value && !I.value.$el.contains(e.target)) {
-				J(), document.removeEventListener("click", Q), document.removeEventListener("focusin", Q), G();
+			j.value === "idle" && (j.value = "focused"), D("focus", e);
+		}, Ge = (e) => {
+			D("click", e);
+		}, Z = async (e) => {
+			if (e.target instanceof Node && F.value && !F.value.$el.contains(e.target)) {
+				q(), document.removeEventListener("click", Z), document.removeEventListener("focusin", Z), W();
 				return;
 			}
-		}, $ = {
-			onBlur: (e) => O("blur", e),
-			onChange: (e) => O("change", e),
-			onKeyup: (e) => O("keyup", e),
-			onInput: (e) => O("input", e),
-			onMousedown: (e) => O("mousedown", e),
-			onMouseup: (e) => O("mouseup", e),
-			onPaste: (e) => O("paste", e),
-			onCompositionstart: (e) => O("compositionstart", e),
-			onCompositionend: (e) => O("compositionend", e)
-		}, Ge = c(() => F.input ? h($, F.input) : $), Ke = () => {
-			O("update:modelValue", []);
-		}, qe = () => {
-			N.value ? (J(), G()) : M.value = "idle", document.removeEventListener("click", Q), document.removeEventListener("focusin", Q);
+		}, Q = {
+			onBlur: (e) => D("blur", e),
+			onChange: (e) => D("change", e),
+			onKeyup: (e) => D("keyup", e),
+			onInput: (e) => D("input", e),
+			onMousedown: (e) => D("mousedown", e),
+			onMouseup: (e) => D("mouseup", e),
+			onPaste: (e) => D("paste", e),
+			onCompositionstart: (e) => D("compositionstart", e),
+			onCompositionend: (e) => D("compositionend", e)
+		}, Ke = c(() => P.input ? h(Q, P.input) : Q), qe = () => {
+			D("update:modelValue", []);
+		}, $ = () => {
+			M.value ? (q(), W()) : j.value = "idle", document.removeEventListener("click", Z), document.removeEventListener("focusin", Z);
 		};
-		return pe(qe), fe(qe), (e, t) => (_(), l(re, h({
+		return me($), pe($), (e, t) => (_(), l(ie, h({
 			id: e.id,
 			class: "bb-tag",
-			clearable: e.clearable && P.value,
+			clearable: e.clearable && N.value,
 			compact: e.compact,
 			description: e.description,
 			disabled: e.disabled,
-			errors: x(xe),
+			errors: x(Se),
 			"has-errors": e.hasErrors,
-			"has-value": P.value,
+			"has-value": N.value,
 			"has-warnings": e.hasWarnings,
 			"hide-label": e.hideLabel,
 			hint: e.hint,
 			"input-align": e.inputAlign,
 			label: e.label,
 			"label-align": e.labelAlign,
-			"label-mode": Ee.value,
+			"label-mode": De.value,
 			"label-position": e.labelPosition,
 			layout: e.layout,
 			loading: e.loading,
 			name: e.name,
-			passthrough: x(F),
-			readonly: x(j),
+			passthrough: x(P),
+			readonly: x(A),
 			reverse: e.reverse,
-			"show-asterisk": x(be),
-			"show-hint": Te.value,
+			"show-asterisk": x(xe),
+			"show-hint": Ee.value,
 			warnings: e.warnings
-		}, x(F).forwardAttrs), d({
+		}, x(P).forwardAttrs), d({
 			label: C((t) => [y(e.$slots, "label", g(m(t)))]),
-			input: C(({ id: n, hasErrors: r, hasWarnings: i, ariaDescribedby: a, ariaLabelledby: o }) => [f(se, {
+			input: C(({ id: n, hasErrors: r, hasWarnings: i, ariaDescribedby: a, ariaLabelledby: o }) => [f(ce, {
 				ref_key: "wrapper",
-				ref: I,
-				active: N.value,
-				"append:icon": x(D)["append:icon"],
-				class: de(["bb-tag__field", {
-					"bb-tag__field--active": N.value,
+				ref: F,
+				active: M.value,
+				"append:icon": x(E)["append:icon"],
+				class: fe(["bb-tag__field", {
+					"bb-tag__field--active": M.value,
 					"bb-tag__field--compact": e.compact
 				}]),
 				clearable: e.clearable,
 				compact: e.compact,
 				disabled: e.disabled,
 				"has-errors": r,
-				"has-value": P.value,
+				"has-value": N.value,
 				"has-warnings": i,
 				loading: e.loading,
-				passthrough: x(F),
-				"prepend:icon": x(D)["prepend:icon"],
-				readonly: x(j),
+				passthrough: x(P),
+				"prepend:icon": x(E)["prepend:icon"],
+				readonly: x(A),
 				variant: e.variant,
-				onClick: We,
-				"onClick:clear": Ke,
-				onFocusin: Me
+				onClick: Ge,
+				"onClick:clear": qe,
+				onFocusin: Ne
 			}, d({
 				"prepend:outer": C(() => [y(e.$slots, "prepend:outer")]),
 				prepend: C(() => [y(e.$slots, "prepend")]),
 				append: C(() => [y(e.$slots, "append")]),
 				"append:outer": C(() => [y(e.$slots, "append:outer")]),
-				default: C(() => [f(te, { tag: "span" }, {
-					default: C(() => [u("span", ve, [e.comma ? (_(), l(le, {
+				default: C(() => [f(ne, { tag: "span" }, {
+					default: C(() => [u("span", ye, [e.comma ? (_(), l(ue, {
 						key: 0,
 						ref_key: "commaBox",
-						ref: L,
-						options: H.value,
-						passthrough: x(F),
-						"onOption:unselected": K
-					}, null, 8, ["options", "passthrough"])) : (_(), l(ce, {
+						ref: I,
+						options: V.value,
+						passthrough: x(P),
+						"onOption:unselected": G
+					}, null, 8, ["options", "passthrough"])) : (_(), l(le, {
 						key: 1,
 						ref_key: "chipsBox",
-						ref: R,
-						disabled: e.disabled || x(j),
-						options: H.value,
-						passthrough: x(F),
+						ref: L,
+						disabled: e.disabled || x(A),
+						options: V.value,
+						passthrough: x(P),
 						size: "lg",
-						"onOption:unselected": K
+						"onOption:unselected": G
 					}, null, 8, [
 						"disabled",
 						"options",
 						"passthrough"
-					])), _e(u("input", h({
+					])), ve(u("input", h({
 						id: n,
 						ref_key: "input",
-						ref: B,
-						"onUpdate:modelValue": t[0] ||= (e) => V.value = e,
+						ref: z,
+						"onUpdate:modelValue": t[0] ||= (e) => B.value = e,
 						"aria-describedby": a,
 						"aria-disabled": e.disabled || void 0,
 						"aria-invalid": r || void 0,
 						"aria-labelledby": o,
-						"aria-readonly": x(j) || void 0,
+						"aria-readonly": x(A) || void 0,
 						autocomplete: e.autocomplete,
 						autofocus: e.autofocus,
 						class: "bb-tag__input",
 						disabled: e.disabled,
 						enterkeyhint: "done",
 						placeholder: e.placeholder,
-						readonly: x(j),
-						required: x(k) && !x(A).length,
-						"aria-required": Ce.value,
+						readonly: x(A),
+						required: x(O) && !x(k).length,
+						"aria-required": we.value,
 						size: "1",
-						style: { "--characters": V.value.length },
+						style: { "--characters": B.value.length },
 						type: "text",
-						onFocus: w(Ue, ["stop"]),
-						onKeydown: w(He, ["stop"])
-					}, h(x(F).controlAttrs, Ge.value)), null, 16, ye), [[ge, V.value], [x(ne)]])])]),
+						onFocus: w(We, ["stop"]),
+						onKeydown: w(Ue, ["stop"])
+					}, h(x(P).controlAttrs, Ke.value)), null, 16, be), [[_e, B.value], [x(re)]])])]),
 					_: 2
 				}, 1024)]),
 				_: 2

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

@@ -1,7 +1,7 @@
 import { Responsive } from '../../types/ResponsiveSize';
-import { InputVariantType } from '../../types/InputVariant';
+import { InputVariantBuiltIn, InputVariantRegistry, InputVariantType } from '../../types/InputVariant';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
-import { FormControlPtState, PtItemCtx, PtItemFn, PtItemResult, PtMap, PtValue, TextControlPtPart } from '../../types/passthrough';
+import { FormControlPtState, PtItemCtx, PtItemFn, PtItemResult, PtMap, PtValue, TextControlPtPart, PtVariantAttrs } from '../../types/passthrough';
 import { FieldCrossAlign, FieldLayout } from '../../types/FieldLayout';
 import { IconType } from '../../types/Icon';
 import { FormFieldProps } from '../../composables/useFormBinding';
@@ -39,10 +39,15 @@ export declare const BB_TAG_PT: {
     /** `rowStates` are declared on `rowParts` only. */
     readonly rowParts: readonly ["badge", "comma"];
     readonly rowStates: readonly ["highlighted"];
+    readonly variant: {
+        readonly names: readonly ["outline", "secondary", "ghost"];
+        readonly option: "inputVariants";
+        readonly parts: readonly ["root", "label", "description", "message", "hint", "box", "input", "icon", "spinner", "prefix", "suffix", "clear"];
+    };
 };
 export type BbTagProps = {
-    [K in `pt:${TextControlPtPart}` | `pt:${BbTagPtPart}:${FormControlPtState}` | 'pt:badge:highlighted' | 'pt:comma:highlighted']?: PtValue;
-} & {
+    [K in `pt:${TextControlPtPart}` | `pt:${BbTagPtPart}:${FormControlPtState}` | 'pt:badge:highlighted' | 'pt:comma:highlighted' | `pt:${TextControlPtPart}:${InputVariantBuiltIn}`]?: PtValue;
+} & /* @vue-ignore */ PtVariantAttrs<TextControlPtPart, keyof InputVariantRegistry> & {
     [K in `pt:${BbTagItemPtPart}`]?: PtValue | ((ctx: PtItemCtx<string, BbTagPtState>) => PtItemResult);
 } & {
     /**
@@ -53,6 +58,8 @@ export type BbTagProps = {
         [K in `${BbTagItemPtPart}:${FormControlPtState}` | 'badge:highlighted' | 'comma:highlighted']?: PtValue;
     } & {
         [K in BbTagItemPtPart]?: PtValue | PtItemFn<string, BbTagPtState>;
+    } & {
+        [K in `${TextControlPtPart}:${InputVariantBuiltIn | keyof InputVariantRegistry}`]?: PtValue;
     };
     /**
      * Name of the icon to be added at the end of the input.

package/dist/components/BbTag/types.js

@@ -1,6 +1,7 @@
 import { TEXT_CONTROL_PT_PARTS as e } from "../../types/passthrough.js";
+import { INPUT_VARIANTS as t } from "../../types/InputVariant.js";
 //#region src/components/BbTag/types.ts
-var t = {
+var n = {
 	parts: [
 		...e,
 		"badge",
@@ -16,7 +17,12 @@ var t = {
 		"loading"
 	],
 	rowParts: ["badge", "comma"],
-	rowStates: ["highlighted"]
+	rowStates: ["highlighted"],
+	variant: {
+		names: t,
+		option: "inputVariants",
+		parts: e
+	}
 };
 //#endregion
-export { t as BB_TAG_PT };
+export { n as BB_TAG_PT };