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

package/dist/components/BbSelect/BbSelect.vue_vue_type_script_setup_true_lang.js

@@ -1,42 +1,43 @@
 import { isNotEmpty as e } from "../../utilities/functions/isNotEmpty.js";
-import { SELECT_CONTROL_NATIVE_ATTRS as t, formControlPtActive as n, usePassthrough as r } from "../../composables/usePassthrough.js";
-import { useConfig as ee } from "../../composables/useConfig.js";
-import { hash as i } from "../../utilities/functions/hash.js";
-import { removedPropsFor as a } from "../../deprecation/removedProps.js";
-import { warnRemovedAttrs as o } from "../../utilities/functions/warnRemovedAttrs.js";
-import { useMobile as s } from "../../composables/useMobile.js";
-import { useLocale as c } from "../../composables/useLocale.js";
+import { SELECT_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 { hash as ee } from "../../utilities/functions/hash.js";
+import { removedPropsFor as o } from "../../deprecation/removedProps.js";
+import { warnRemovedAttrs as s } from "../../utilities/functions/warnRemovedAttrs.js";
+import { useMobile as c } from "../../composables/useMobile.js";
+import { useLocale as l } from "../../composables/useLocale.js";
 import te from "../BbBadge/BbBadge.vue.js";
-import l from "../../assets/svgs/chevron_down.svg_raw.js";
-import { vAutofocus as ne } from "../../utilities/misc/autofocus.js";
-import re from "../CommonField/CommonField.vue.js";
-import { hasVnodeListener as u } from "../../utilities/functions/hasVnodeListener.js";
-import { useFormBinding as d } from "../../composables/useFormBinding.js";
+import ne from "../../assets/svgs/chevron_down.svg_raw.js";
+import { vAutofocus as re } from "../../utilities/misc/autofocus.js";
+import u from "../CommonField/CommonField.vue.js";
+import { hasVnodeListener as d } from "../../utilities/functions/hasVnodeListener.js";
+import { useFormBinding as f } from "../../composables/useFormBinding.js";
 import ie from "../CommonFieldInput/CommonFieldInput.vue.js";
-import { provideSheetChipAttrs as f } from "../BbSelectPopover/sheetChipAttrs.js";
-import { KnownItemsScope as ae, indexKnownRows as oe, knownRowsCover as se } from "../BbSelectPopover/knownItems.js";
-import { BB_SELECT_POPOVER_PT as ce } from "../BbSelectPopover/types.js";
-import le from "../BbSelectPopover/BbSelectPopover.vue.js";
-import { throttle as ue } from "../../utilities/functions/throttle.js";
-import { when as de } from "../../utilities/functions/when.js";
-import { reject as fe } from "../../utilities/functions/reject.js";
+import { provideSheetChipAttrs as ae } from "../BbSelectPopover/sheetChipAttrs.js";
+import { KnownItemsScope as oe, indexKnownRows as se, knownRowsCover as ce } from "../BbSelectPopover/knownItems.js";
+import { BB_SELECT_POPOVER_PT as le } from "../BbSelectPopover/types.js";
+import ue from "../BbSelectPopover/BbSelectPopover.vue.js";
+import { throttle as de } from "../../utilities/functions/throttle.js";
+import { when as fe } from "../../utilities/functions/when.js";
+import { reject as pe } from "../../utilities/functions/reject.js";
 import { BB_SELECT_PT as p } from "./types.js";
-import { Fragment as m, computed as h, createBlock as pe, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createSlots as y, createTextVNode as me, createVNode as b, defineComponent as he, getCurrentInstance as ge, guardReactiveProps as x, mergeProps as S, nextTick as C, normalizeClass as w, normalizeProps as T, onMounted as _e, onUnmounted as ve, openBlock as E, ref as D, renderList as O, renderSlot as k, toDisplayString as A, unref as j, useAttrs as ye, watch as M, withCtx as N, withDirectives as be, withModifiers as xe } from "vue";
+import { Fragment as m, computed as h, createBlock as me, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createSlots as y, createTextVNode as he, createVNode as b, defineComponent as ge, getCurrentInstance as _e, guardReactiveProps as x, mergeProps as S, nextTick as C, normalizeClass as w, normalizeProps as T, onMounted as ve, onUnmounted as ye, openBlock as E, ref as D, renderList as O, renderSlot as k, toDisplayString as A, unref as j, useAttrs as be, watch as M, withCtx as N, withDirectives as xe, withModifiers as Se } from "vue";
 //#region src/components/BbSelect/BbSelect.vue?vue&type=script&setup=true&lang.ts
-var Se = ["id"], Ce = [
+var Ce = ["id"], we = [
 	"id",
 	"aria-labelledby",
 	"aria-readonly",
 	"aria-required",
 	"autofocus",
 	"disabled"
-], we = {
+], Te = {
 	key: 1,
 	class: "bb-select__max-reached"
-}, Te = {
+}, Ee = {
 	key: 2,
 	class: "bb-select__display-value bb-select__placeholder"
-}, Ee = ["id"], P = /*@__PURE__*/ he({
+}, De = ["id"], P = /*@__PURE__*/ ge({
+	mixins: [i(p)],
 	inheritAttrs: !1,
 	__name: "BbSelect",
 	props: {
@@ -250,6 +251,42 @@ var Se = ["id"], Ce = [
 		"pt:comma:hasValue": {},
 		"pt:comma:open": {},
 		"pt:comma:selected": {},
+		"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:activator:outline": {},
+		"pt:activator:secondary": {},
+		"pt:activator: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:option": {},
 		"pt:itemText": {},
 		"pt:itemIcon": {},
@@ -351,63 +388,70 @@ var Se = ["id"], Ce = [
 		"update:modelValue",
 		"option:add"
 	],
-	setup(he, { emit: P }) {
-		let F = he, { props: I, emit: L, showAsterisk: De, errors: Oe, ariaRequired: ke, required: Ae, model: je, readonly: R } = d(F, P, {
+	setup(i, { emit: ge }) {
+		let P = i, { props: F, emit: I, showAsterisk: Oe, errors: ke, ariaRequired: Ae, required: je, model: Me, readonly: L } = f(P, ge, {
 			componentName: "BbSelect",
-			identifierFallback: () => F.label,
+			identifierFallback: () => P.label,
 			leaveOn: "inactive"
-		}), Me = h(() => ke.value ?? (Ae.value ? !0 : void 0)), Ne = ee(), { t: Pe } = c();
-		process.env.NODE_ENV !== "production" && o("BbSelect", a("BbSelect"));
-		let z = D(!1), { isMobile: Fe } = s(), Ie = h(() => I.persistentHint || z.value), B = h(() => e(I.modelValue)), Le = h(() => !!I.clearable && B.value), Re = h(() => I.labelMode ?? Ne.defaultInputLabelMode), V = D(!1), H = r({
+		}), Ne = h(() => Ae.value ?? (je.value ? !0 : void 0)), Pe = a(), { t: Fe } = l();
+		process.env.NODE_ENV !== "production" && s("BbSelect", o("BbSelect"));
+		let R = D(!1), { isMobile: Ie } = c(), Le = h(() => F.persistentHint || R.value), z = h(() => e(F.modelValue)), Re = h(() => !!F.clearable && z.value), ze = h(() => F.labelMode ?? Pe.defaultInputLabelMode), B = D(!1), V = r({
 			component: "BbSelect",
-			attrs: ye(),
+			attrs: be(),
 			controlAttrs: t,
-			props: I,
+			props: F,
 			parts: p.parts,
 			states: p.states,
 			active: {
-				...n(I, () => B.value),
-				open: () => V.value
+				...n(F, () => z.value),
+				open: () => B.value
+			},
+			variant: {
+				...p.variant,
+				current: () => F.variant ?? "outline"
 			}
 		});
-		f((e) => H.part("badge", {}, e));
-		let ze = () => ({
-			...H.forward([
+		ae((e) => V.part("badge", {}, e));
+		let Be = () => ({
+			...V.forward([
 				"panel",
 				"sheet",
 				"header",
 				"footer",
 				"input",
 				"list"
-			], ce.states.filter((e) => e !== "disabled")),
-			...H.forward([
+			], le.states.filter((e) => e !== "disabled")),
+			...V.forward([
 				"option",
 				"itemText",
 				"itemIcon",
 				"itemDescription"
-			], ce.states)
-		}), Be = [
+			], le.states)
+		}), Ve = [
 			"box",
 			"icon",
 			"spinner",
 			"clear",
 			"prefix",
 			"suffix"
-		], Ve = (e) => Object.fromEntries(Be.map((t) => [t, H.part(t, { loading: e })])), He = h(() => ({
-			title: I.label,
-			...I.offCanvasProps
-		})), Ue = h(() => I["append:icon"] === void 0 ? l : I["append:icon"]), U = h(() => I.maxSelectedLabels === void 0 ? Infinity : I.maxSelectedLabels), We = {
-			rows: () => I.knownItems,
-			prefill: () => I.prefill
-		}, Ge = h(() => se(oe(I.knownItems), I.modelValue, I.multiple)), Ke = h(() => B.value && !Ge.value ? !0 : I.prefill ?? "interaction"), W = D(), G = D(), qe = D(), K = h(() => I.multiple ? Array.isArray(I.modelValue) ? I.modelValue.length : I.modelValue == null ? 0 : 1 : 0), Je = h(() => U.value !== Infinity), q = h(() => !Je.value), J = D(!1), Y = h(() => K.value <= 1 ? !1 : Je.value ? K.value > U.value : J.value), X = h(() => !I.disabled && !I.readonly), Ye = (e) => {
-			if (X.value) if (We.userUnpick?.([e.value]), I.multiple) {
-				let t = fe(I.modelValue, e.value);
-				L("update:modelValue", t);
-			} else L("update:modelValue", null);
-		}, Xe = () => {
+		], He = (e) => Object.fromEntries(Ve.map((t) => [t, V.part(t, { loading: e })])), Ue = h(() => ({
+			title: F.label,
+			...F.offCanvasProps
+		})), We = h(() => F["append:icon"] === void 0 ? ne : F["append:icon"]), H = h(() => F.maxSelectedLabels === void 0 ? Infinity : F.maxSelectedLabels), U = {
+			rows: () => F.knownItems,
+			prefill: () => F.prefill
+		}, Ge = (e) => ({
+			known: !!U.isKnown?.(e),
+			item: e
+		}), Ke = h(() => ce(se(F.knownItems), F.modelValue, F.multiple)), qe = h(() => z.value && !Ke.value ? !0 : F.prefill ?? "interaction"), W = D(), G = D(), Je = D(), K = h(() => F.multiple ? Array.isArray(F.modelValue) ? F.modelValue.length : F.modelValue == null ? 0 : 1 : 0), Ye = h(() => H.value !== Infinity), q = h(() => !Ye.value), J = D(!1), Y = h(() => K.value <= 1 ? !1 : Ye.value ? K.value > H.value : J.value), X = h(() => !F.disabled && !F.readonly), Xe = (e) => {
+			if (X.value) if (U.userUnpick?.([e.value]), F.multiple) {
+				let t = pe(F.modelValue, e.value);
+				I("update:modelValue", t);
+			} else I("update:modelValue", null);
+		}, Ze = () => {
 			(W.value?.$el)?.querySelector(".bb-select__activator")?.focus();
-		}, Z = h(() => I.selectedLabelsFn ? I.selectedLabelsFn(K.value) : Pe("select.multipleMaxReached", K.value).value), Ze = (e) => I.multiple && Y.value ? Z.value : e || I.placeholder || "", Q = ue(() => {
-			let e = qe.value;
+		}, Qe = h(() => F.selectedLabelsFn ? F.selectedLabelsFn(K.value) : Fe("select.multipleMaxReached", K.value).value), $e = (e) => F.multiple && Y.value ? Qe.value : e || F.placeholder || "", Z = de(() => {
+			let e = Je.value;
 			if (!q.value || !e || K.value <= 1) {
 				J.value = !1;
 				return;
@@ -416,93 +460,93 @@ var Se = ["id"], Ce = [
 		}, 100, {
 			leading: !0,
 			trailing: !0
-		}), $ = null, Qe = () => {
-			$?.disconnect(), $ = null, q.value && ($ = new ResizeObserver(Q), G.value && $.observe(G.value), C(() => {
-				Q();
+		}), Q = null, et = () => {
+			Q?.disconnect(), Q = null, q.value && (Q = new ResizeObserver(Z), G.value && Q.observe(G.value), C(() => {
+				Z();
 			}));
 		};
-		_e(Qe), M(q, Qe, { flush: "post" }), ve(() => {
-			$?.disconnect(), Q.cancel();
-		}), M(() => [I.modelValue, U.value], () => {
+		ve(et), M(q, et, { flush: "post" }), ye(() => {
+			Q?.disconnect(), Z.cancel();
+		}), M(() => [F.modelValue, H.value], () => {
 			q.value && C(() => {
-				Q();
+				Z();
 			});
 		}), M(() => [
-			I.compact,
-			I.comma,
-			I["prepend:icon"]
+			F.compact,
+			F.comma,
+			F["prepend:icon"]
 		], () => {
 			q.value && C(() => {
-				Q();
+				Z();
 			});
 		});
-		let $e = de((e) => typeof e != "string", JSON.stringify), et = h(() => (I.multiple ? [].concat(I.modelValue ?? []) : [I.modelValue]).filter((e) => e != null).map((e) => ({
-			disabled: I.disabled,
-			name: I.name,
-			required: I.required,
+		let tt = fe((e) => typeof e != "string", JSON.stringify), nt = h(() => (F.multiple ? [].concat(F.modelValue ?? []) : [F.modelValue]).filter((e) => e != null).map((e) => ({
+			disabled: F.disabled,
+			name: F.name,
+			required: F.required,
 			type: "hidden",
-			value: $e(e)
-		}))), tt = {
+			value: tt(e)
+		}))), $ = {
 			onBlur: (e) => {
-				z.value = !1, L("blur", e);
+				R.value = !1, I("blur", e);
 			},
-			onChange: (e) => L("change", e),
-			onClick: (e) => L("click", e),
+			onChange: (e) => I("change", e),
+			onClick: (e) => I("click", e),
 			onFocus: (e) => {
-				z.value = !0, L("focus", e);
+				R.value = !0, I("focus", e);
 			},
 			onActive: () => {
-				z.value = !0, L("active");
+				R.value = !0, I("active");
 			},
 			onShow: () => {
-				V.value = !0, L("show");
+				B.value = !0, I("show");
 			},
-			onShown: () => L("shown"),
+			onShown: () => I("shown"),
 			onHide: () => {
-				V.value = !1, L("hide");
+				B.value = !1, I("hide");
 			},
-			onHidden: () => L("hidden"),
+			onHidden: () => I("hidden"),
 			onInactive: () => {
-				z.value = !1, L("inactive");
+				R.value = !1, I("inactive");
 			},
-			onInput: (e) => L("input", e),
-			"onUpdate:modelValue": (e) => L("update:modelValue", e)
-		}, nt = {
-			...tt,
-			"onOption:add": (e) => L("option:add", e)
-		}, rt = ge(), it = () => u(rt, "option:add") ? nt : tt;
-		return (e, t) => (E(), pe(re, S({
+			onInput: (e) => I("input", e),
+			"onUpdate:modelValue": (e) => I("update:modelValue", e)
+		}, rt = {
+			...$,
+			"onOption:add": (e) => I("option:add", e)
+		}, it = _e(), at = () => d(it, "option:add") ? rt : $;
+		return (e, t) => (E(), me(u, S({
 			id: e.id,
 			class: "bb-select",
-			clearable: Le.value,
+			clearable: Re.value,
 			compact: e.compact,
 			description: e.description,
 			disabled: e.disabled,
-			errors: j(Oe),
+			errors: j(ke),
 			"has-errors": e.hasErrors,
-			"has-value": B.value,
+			"has-value": z.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": Re.value,
+			"label-mode": ze.value,
 			"label-position": e.labelPosition,
 			layout: e.layout,
 			loading: e.loading,
-			mobile: j(Fe),
+			mobile: j(Ie),
 			name: e.name,
-			passthrough: j(H),
-			readonly: j(R),
+			passthrough: j(V),
+			readonly: j(L),
 			reverse: e.reverse,
-			"show-asterisk": j(De),
-			"show-hint": Ie.value,
+			"show-asterisk": j(Oe),
+			"show-hint": Le.value,
 			warnings: e.warnings
-		}, j(H).forwardAttrs), y({
+		}, j(V).forwardAttrs), y({
 			label: N((t) => [k(e.$slots, "label", T(x(t)))]),
-			input: N(({ id: n, hasErrors: r, hasWarnings: ee, ariaDescribedby: a }) => [b(j(ae), { source: We }, {
-				default: N(() => [b(le, S({
+			input: N(({ id: n, hasErrors: r, hasWarnings: i, ariaDescribedby: a }) => [b(j(oe), { source: U }, {
+				default: N(() => [b(ue, S({
 					id: n,
 					adaptive: e.adaptive,
 					anchor: W.value,
@@ -528,42 +572,42 @@ var Se = ["id"], Ce = [
 					loading: e.loading,
 					"loading-text": e.loadingText,
 					max: e.max,
-					"model-value": j(je),
+					"model-value": j(Me),
 					"model-value-debounce-time": e.modelValueDebounceTime,
 					multiple: e.multiple,
-					"off-canvas-props": He.value,
-					prefill: Ke.value,
-					pt: ze(),
+					"off-canvas-props": Ue.value,
+					prefill: qe.value,
+					pt: Be(),
 					"query-debounce-time": e.queryDebounceTime,
-					readonly: j(R),
+					readonly: j(L),
 					selectable: e.selectable,
 					stash: e.stash,
 					"transition-duration": e.transitionDuration,
 					width: "100%"
-				}, it()), y({
-					activator: N(({ props: a, shown: o, loading: s, text: c, selectedOptions: l, clear: re, query: u, focus: d, close: f, toggle: ae }) => [b(ie, {
+				}, at()), y({
+					activator: N(({ props: a, shown: o, loading: s, text: c, selectedOptions: l, clear: ne, query: u, focus: d, close: f, toggle: ae }) => [b(ie, {
 						ref_key: "wrapperRef",
 						ref: W,
 						active: o,
-						"append:icon": Ue.value,
+						"append:icon": We.value,
 						class: w(["bb-select__field", {
 							"bb-select__field--shown": o,
 							"bb-select__field--disabled": e.disabled,
-							"bb-select__field--readonly": j(R)
+							"bb-select__field--readonly": j(L)
 						}]),
 						clearable: e.clearable,
 						compact: e.compact,
 						disabled: e.disabled,
 						"has-errors": r,
-						"has-value": B.value,
-						"has-warnings": ee,
+						"has-value": z.value,
+						"has-warnings": i,
 						loading: s,
-						passthrough: Ve(s),
-						"prepend:icon": F["prepend:icon"],
-						readonly: j(R),
+						passthrough: He(s),
+						"prepend:icon": P["prepend:icon"],
+						readonly: j(L),
 						variant: e.variant,
 						"onClick:clear": () => {
-							re(), C(Xe);
+							ne(), C(Ze);
 						},
 						"onContainer:click": ae
 					}, y({
@@ -590,55 +634,55 @@ var Se = ["id"], Ce = [
 							ref_key: "valueRef",
 							ref: G,
 							class: "bb-select__value"
-						}, [be(v("input", S({
+						}, [xe(v("input", S({
 							id: n,
 							"aria-labelledby": `${n}__label ${n}__selection`,
-							"aria-readonly": j(R) || void 0,
-							"aria-required": Me.value,
+							"aria-readonly": j(L) || void 0,
+							"aria-required": Ne.value,
 							autofocus: e.autofocus,
 							class: "bb-select__activator",
 							disabled: e.disabled,
 							type: "button"
-						}, S(a, j(H).part("activator", { loading: s }))), null, 16, Ce), [[j(ne)]]), e.multiple ? (E(), _(m, { key: 0 }, [
+						}, S(a, j(V).part("activator", { loading: s }))), null, 16, we), [[j(re)]]), e.multiple ? (E(), _(m, { key: 0 }, [
 							q.value || !Y.value ? (E(), _("span", {
 								key: 0,
 								ref_key: "chipsContainerRef",
-								ref: qe,
+								ref: Je,
 								class: w(["bb-select__chips-row", {
 									"bb-select__chips-row--hidden": Y.value,
 									"bb-select__chips-row--chips": !e.comma && !!l.length
 								}]),
-								onVnodeUpdated: t[0] ||= (e) => q.value && j(Q)()
+								onVnodeUpdated: t[0] ||= (e) => q.value && j(Z)()
 							}, [e.comma ? (E(!0), _(m, { key: 0 }, O(l, (e) => (E(), _("span", S({
-								key: j(i)(e.value),
+								key: j(ee)(e.value),
 								class: "bb-select__comma",
 								ref_for: !0
-							}, j(H).part("comma", {}, e.item)), A(e.text), 17))), 128)) : (E(!0), _(m, { key: 1 }, O(l, (t) => k(e.$slots, "chip", {
-								key: j(i)(t.value),
-								deselect: () => Ye(t),
+							}, j(V).part("comma", {}, e.item)), A(e.text), 17))), 128)) : (E(!0), _(m, { key: 1 }, O(l, (t) => k(e.$slots, "chip", S({
+								key: j(ee)(t.value),
+								deselect: () => Xe(t),
 								disabled: !X.value,
-								item: t.item,
 								text: t.text,
-								value: t.value
-							}, () => [b(te, S({
+								value: t.value,
+								ref_for: !0
+							}, Ge(t.item)), () => [b(te, S({
 								class: "bb-select__badge",
 								clearable: X.value,
 								size: "lg",
 								variant: "secondary",
 								ref_for: !0
-							}, j(H).part("badge", {}, t.item), { "onClick:clear": xe((e) => Ye(t), ["stop"]) }), {
-								default: N(() => [me(A(t.text), 1)]),
+							}, j(V).part("badge", {}, t.item), { "onClick:clear": Se((e) => Xe(t), ["stop"]) }), {
+								default: N(() => [he(A(t.text), 1)]),
 								_: 2
 							}, 1040, ["clearable", "onClick:clear"])])), 128))], 2)) : g("", !0),
-							Y.value ? (E(), _("span", we, A(Z.value), 1)) : g("", !0),
-							!l.length && e.placeholder ? (E(), _("span", Te, A(e.placeholder), 1)) : g("", !0)
+							Y.value ? (E(), _("span", Te, A(Qe.value), 1)) : g("", !0),
+							!l.length && e.placeholder ? (E(), _("span", Ee, A(e.placeholder), 1)) : g("", !0)
 						], 64)) : (E(), _("span", {
 							key: 1,
 							class: w(["bb-select__display-value", [{ "bb-select__placeholder": !c }]])
-						}, A(c || e.placeholder), 3))], 8, Se), v("span", {
+						}, A(c || e.placeholder), 3))], 8, Ce), v("span", {
 							id: `${n}__selection`,
 							hidden: ""
-						}, A(Ze(c)), 9, Ee)]),
+						}, A($e(c)), 9, De)]),
 						_: 2
 					}, [e.$slots.prefix ? {
 						name: "prefix",
@@ -665,10 +709,10 @@ var Se = ["id"], Ce = [
 						"variant",
 						"onClick:clear",
 						"onContainer:click"
-					]), (E(!0), _(m, null, O(et.value, (e) => (E(), _("input", S({
+					]), (E(!0), _(m, null, O(nt.value, (e) => (E(), _("input", S({
 						key: e.value,
 						ref_for: !0
-					}, S(e, j(H).controlAttrs)), null, 16))), 128))]),
+					}, S(e, j(V).controlAttrs)), null, 16))), 128))]),
 					loading: N((t) => [k(e.$slots, "loading", T(x(t)))]),
 					empty: N((t) => [k(e.$slots, "empty", T(x(t)))]),
 					group: N((t) => [k(e.$slots, "group", T(x(t)))]),

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

@@ -1,13 +1,13 @@
 import { Responsive } from '../../types/ResponsiveSize';
 import { BbSelectItemProps } from '../../types/ItemProps';
-import { InputVariantType } from '../../types/InputVariant';
-import { PtNoInfer, FormControlPtState, PtItemCtx, PtItemMap, PtItemResult, PtValue } from '../../types/passthrough';
+import { InputVariantBuiltIn, InputVariantRegistry, InputVariantType } from '../../types/InputVariant';
+import { PtNoInfer, FormControlPtState, PtItemCtx, PtItemMap, PtItemResult, PtValue, PtVariantAttrs } from '../../types/passthrough';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { FieldCrossAlign, FieldLayout } from '../../types/FieldLayout';
 import { ItemAccessor } from '../../types/ItemAccessor';
 import { BbSelectItemsContext } from '../../types/ItemsProvider';
 import { IconType } from '../../types/Icon';
-import { BbSelectKnownItem, BbSelectResolvedOption } from '../BbSelectPopover/types';
+import { BbSelectKnownItems, BbSelectResolvedOption, BbSelectSlotRow } from '../BbSelectPopover/types';
 import { BbOffCanvasProps } from '../BbOffCanvas/types';
 import { FormFieldProps } from '../../composables/useFormBinding';
 import { CommonFieldAsteriskSlotProps } from '../CommonField/types';
@@ -67,21 +67,33 @@ export type BbSelectOptionPtPart = 'option' | 'itemText' | 'itemIcon' | 'itemDes
  */
 export type BbSelectPtState = FormControlPtState | 'open' | 'selected';
 /** The runtime lists the resolver is wired with — kept next to the types so the two cannot drift. */
+/**
+ * The parts the input `variant` styles (Q76.7): the field, not the options
+ * surface — `input` is the search field there. Spelled flat (T20).
+ */
+export type BbSelectVariantPtPart = 'root' | 'label' | 'description' | 'message' | 'hint' | 'box' | 'activator' | 'icon' | 'spinner' | 'prefix' | 'suffix' | 'clear';
 export declare const BB_SELECT_PT: {
     readonly parts: readonly ["root", "label", "description", "message", "hint", "box", "activator", "input", "icon", "spinner", "prefix", "suffix", "clear", "panel", "sheet", "header", "footer", "list", "option", "itemText", "itemIcon", "itemDescription", "badge", "comma"];
     readonly states: readonly ["hasValue", "selected", "readonly", "disabled", "warnings", "errors", "open", "loading"];
+    readonly variant: {
+        readonly names: readonly ["outline", "secondary", "ghost"];
+        readonly option: "inputVariants";
+        readonly parts: readonly ["root", "label", "description", "message", "hint", "box", "activator", "icon", "spinner", "prefix", "suffix", "clear"];
+    };
 };
-export type { BbSelectKnownItem } from '../BbSelectPopover/types';
-export type BbSelectProps<T> = {
-    [K in `pt:${BbSelectFieldPtPart}` | `pt:${BbSelectPtPart}:${BbSelectPtState}`]?: PtValue;
-} & {
-    [K in `pt:${BbSelectOptionPtPart}`]?: PtValue | ((ctx: PtItemCtx<PtNoInfer<T>, BbSelectPtState>) => PtItemResult);
+export type { BbSelectKnownItem, BbSelectKnownItems, BbSelectSlotRow, } from '../BbSelectPopover/types';
+export type BbSelectProps<T, Known extends BbSelectKnownItems | undefined = BbSelectKnownItems> = {
+    [K in `pt:${BbSelectFieldPtPart}` | `pt:${BbSelectPtPart}:${BbSelectPtState}` | `pt:${BbSelectVariantPtPart}:${InputVariantBuiltIn}`]?: PtValue;
+} & /* @vue-ignore */ PtVariantAttrs<BbSelectVariantPtPart, keyof InputVariantRegistry> & {
+    [K in `pt:${BbSelectOptionPtPart}`]?: PtValue | ((ctx: PtItemCtx<PtNoInfer<T>, BbSelectPtState, never, BbSelectSlotRow<PtNoInfer<T>, PtNoInfer<Known>>>) => PtItemResult);
 } & {
     /**
      * Passthrough, object form: the same keys as the `pt:*` attributes
      * without the prefix. See the `pt:<part>` row.
      */
-    pt?: PtItemMap<BbSelectPtPart, BbSelectOptionPtPart, BbSelectPtState, PtNoInfer<T>>;
+    pt?: PtItemMap<BbSelectPtPart, BbSelectOptionPtPart, BbSelectPtState, PtNoInfer<T>, never, BbSelectSlotRow<PtNoInfer<T>, PtNoInfer<Known>>> & {
+        [K in `${BbSelectVariantPtPart}:${InputVariantBuiltIn | keyof InputVariantRegistry}`]?: PtValue;
+    };
     /**
      * When `true`, the options panel opens as a bottom off-canvas sheet on mobile
      * viewports instead of a floating popover; on desktop it stays a popover.
@@ -288,9 +300,10 @@ export type BbSelectProps<T> = {
      * `{ value, label }` rows naming the value the app already holds, whatever
      * the options' shape: no request until the first open (`prefill: true`
      * still loads). Not options; the options' accessors never run on them;
-     * slots get the row as `item` until the list brings its own.
+     * slots get the row as `item`, with `known: true`, until the list brings
+     * its own.
      */
-    knownItems?: Array<BbSelectKnownItem | null | undefined>;
+    knownItems?: [Known] extends [undefined] ? BbSelectKnownItems : Known;
     /**
      * Text content of the label of the element.
      */
@@ -470,7 +483,7 @@ export type BbSelectLabelSlotProps = CommonFieldAsteriskSlotProps & {
     hasWarnings: boolean;
 };
 /** Props exposed by the `option` slot. */
-export type BbSelectOptionSlotProps<T> = {
+export type BbSelectOptionSlotProps<T, Known extends BbSelectKnownItems | undefined = undefined> = BbSelectSlotRow<T, Known> & {
     /** Whether this option is disabled. */
     disabled: boolean;
     /** Whether this option currently has keyboard focus. */
@@ -479,8 +492,6 @@ export type BbSelectOptionSlotProps<T> = {
     index: number;
     /** Whether the select is in an error state. */
     hasErrors?: boolean;
-    /** The raw item from the `items` prop. */
-    item: T;
     /** Whether items are still being fetched. */
     loading: boolean;
     /** Whether this option is currently selected. */
@@ -509,9 +520,7 @@ export type BbSelectGroupSlotProps<T> = {
  * Props exposed by the `chip` slot — called once per selected value in
  * `multiple` mode, in place of the default badge.
  */
-export type BbSelectChipSlotProps<T> = {
-    /** The selected item, exactly as it was supplied in `items`. */
-    item: T;
+export type BbSelectChipSlotProps<T, Known extends BbSelectKnownItems | undefined = undefined> = BbSelectSlotRow<T, Known> & {
     /** The item's resolved display text (what the default badge prints). */
     text: string;
     /** The item's resolved value — what sits in the v-model. */
@@ -540,7 +549,7 @@ export type BbSelectPanelSlotProps = {
     /** The resolved options that are currently selected. */
     selectedOptions: BbSelectResolvedOption[];
 };
-export type BbSelectSlots<T> = {
+export type BbSelectSlots<T, Known extends BbSelectKnownItems | undefined = undefined> = {
     /**
      * Content pinned to the top of the options panel, above the search field.
      * Rendered in both the desktop popover and the adaptive sheet.
@@ -592,9 +601,12 @@ export type BbSelectSlots<T> = {
         error: unknown;
     }) => any;
     /**
-     * Replaces the default rendering of each option row in the dropdown.
+     * Replaces the default rendering of each option row in the dropdown. With
+     * `known-items` bound, a row the list has not brought yet is the known
+     * `{ value, label }` row, `known: true`: check `known` before reading an
+     * option field off `item`.
      */
-    option?: (props: BbSelectOptionSlotProps<T>) => any;
+    option?: (props: BbSelectOptionSlotProps<T, Known>) => any;
     /**
      * Replaces the default group header rendered above grouped options.
      * Not called for rows with no group (`group-by` gives `null`/`undefined`,
@@ -603,9 +615,11 @@ export type BbSelectSlots<T> = {
     group?: (props: BbSelectGroupSlotProps<T>) => any;
     /**
      * Replaces the default badge rendered for each selection in `multiple` mode.
-     * Not called in `comma` mode, nor for the collapsed "+N" summary.
+     * Not called in `comma` mode, nor for the collapsed "+N" summary. With
+     * `known-items` bound, `item` is the known `{ value, label }` row
+     * (`known: true`) until the list brings the real one.
      */
-    chip?: (props: BbSelectChipSlotProps<T>) => any;
+    chip?: (props: BbSelectChipSlotProps<T, Known>) => any;
     /**
      * Content rendered as an inline prefix inside the input field.
      */