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

package/dist/components/GroupedListBox/GroupedListBox.vue_vue_type_script_setup_true_lang.js

@@ -9,13 +9,16 @@ import { listboxHeaderHeight as s, listboxOptionFontSize as c, listboxOptionHeig
 import { isNotNil as u } from "../../utilities/functions/isNotNil.js";
 import { useListboxFocus as d } from "../../composables/useListboxFocus.js";
 import { indexBy as f } from "../../utilities/functions/indexBy.js";
-import { Fragment as p, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createTextVNode as y, createVNode as ee, defineComponent as b, mergeProps as x, nextTick as te, normalizeClass as ne, normalizeStyle as S, openBlock as C, ref as re, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useId as ie, useSlots as ae, useTemplateRef as O, watch as k, withModifiers as A } from "vue";
-import { useVirtualizer as oe } from "@tanstack/vue-virtual";
+import { Fragment as p, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createTextVNode as y, createVNode as ee, defineComponent as b, mergeProps as x, nextTick as te, normalizeClass as S, normalizeStyle as C, openBlock as w, ref as ne, renderList as T, renderSlot as E, toDisplayString as D, unref as O, useId as re, useSlots as ie, useTemplateRef as k, watch as A, withModifiers as j } from "vue";
+import { useVirtualizer as ae } from "@tanstack/vue-virtual";
 //#region src/components/GroupedListBox/GroupedListBox.vue?vue&type=script&setup=true&lang.ts
-var se = { class: "bb-listbox__outer-container scrollbar-border" }, ce = {
+var oe = { class: "bb-listbox__outer-container scrollbar-border" }, se = {
 	ref: "inner",
 	class: "bb-listbox__inner-container",
 	tabindex: "-1"
+}, ce = {
+	class: "bb-listbox__status",
+	role: "status"
 }, le = {
 	key: 0,
 	class: "bb-listbox__loading"
@@ -42,9 +45,9 @@ var se = { class: "bb-listbox__outer-container scrollbar-border" }, ce = {
 	key: 0,
 	class: "bb-listbox__option-content"
 }, _e = ["id"], ve = ["id"], ye = {
-	key: 3,
+	key: 1,
 	class: "bb-listbox__loading bb-listbox__loading--below"
-}, be = ["id"], xe = { class: "bb-listbox__failed-text" }, j = /*@__PURE__*/ b({
+}, be = ["id"], xe = { class: "bb-listbox__failed-text" }, M = /*@__PURE__*/ b({
 	__name: "GroupedListBox",
 	props: {
 		passthrough: {},
@@ -70,11 +73,11 @@ var se = { class: "bb-listbox__outer-container scrollbar-border" }, ce = {
 		"option:unselected",
 		"focused:change"
 	],
-	setup(t, { expose: b, emit: j }) {
-		let M = t, N = j, Se = ae(), { t: P } = r(), F = O("inner"), Ce = O("listbox"), { touch: I } = n(), L = m(() => M.optionHeight ? M.optionHeight : l(I.value, !!M.compact, !!M.described)), R = m(() => M.headerHeight ? M.headerHeight : s(I.value, !!M.compact)), we = m(() => c(I.value)), z = (t) => e(M.groups[t].data) ? 0 : R.value, Te = m(() => {
+	setup(t, { expose: b, emit: M }) {
+		let N = t, P = M, Se = ie(), { t: F } = r(), I = k("inner"), Ce = k("listbox"), { touch: L } = n(), R = m(() => N.optionHeight ? N.optionHeight : l(L.value, !!N.compact, !!N.described)), z = m(() => N.headerHeight ? N.headerHeight : s(L.value, !!N.compact)), we = m(() => c(L.value)), B = (t) => e(N.groups[t].data) ? 0 : z.value, Te = m(() => {
 			let t = 0;
-			return M.groups.map((n, r) => {
-				let i = n.id, a = t, o = n.options.length, s = Y(r), c = e(n.data) ? void 0 : `${U}-group-header-${n.id}`, l = typeof n.data == "string" ? n.data : e(n.data) ? "" : JSON.stringify(n.data), u = n.options.every((e) => e.disabled), d = n.data, f = n.options;
+			return N.groups.map((n, r) => {
+				let i = n.id, a = t, o = n.options.length, s = X(r), c = e(n.data) ? void 0 : `${W}-group-header-${n.id}`, l = typeof n.data == "string" ? n.data : e(n.data) ? "" : JSON.stringify(n.data), u = n.options.every((e) => e.disabled), d = n.data, f = n.options;
 				return t += o, {
 					offset: a,
 					length: o,
@@ -88,15 +91,15 @@ var se = { class: "bb-listbox__outer-container scrollbar-border" }, ce = {
 					options: f
 				};
 			});
-		}), B = m(() => f(Te.value, "index")), V = m(() => {
+		}), V = m(() => f(Te.value, "index")), H = m(() => {
 			let e = /* @__PURE__ */ new Map();
-			return M.groups.flatMap((t, n) => t.options.map((r, i) => {
+			return N.groups.flatMap((t, n) => t.options.map((r, i) => {
 				let a = r.valueHash, o = Ee(`${t.id}-${r.valueHash}`), s = (e.get(o) ?? 0) + 1;
 				e.set(o, s);
 				let c = s === 1 ? o : `${o}-${s}`;
 				return {
 					id: a,
-					globalIndex: B.value[n].offset + i,
+					globalIndex: V.value[n].offset + i,
 					groupIndex: n,
 					groupId: t.id,
 					indexInGroup: i,
@@ -112,52 +115,52 @@ var se = { class: "bb-listbox__outer-container scrollbar-border" }, ce = {
 					domId: c
 				};
 			}));
-		}), H = m(() => {
-			let e = M.groups.map(() => []);
-			for (let t of V.value) e[t.groupIndex].push(t);
+		}), U = m(() => {
+			let e = N.groups.map(() => []);
+			for (let t of H.value) e[t.groupIndex].push(t);
 			return e;
-		}), U = ie(), Ee = (e) => `${U}-listbox-option-${e}`, W = (e) => `${e}__label`, G = (e) => `${e}__description`, K = (e) => !!e && !Se.option, q = m(() => {
-			if (e(Z.value)) return;
-			let t = V.value[Z.value];
+		}), W = re(), Ee = (e) => `${W}-listbox-option-${e}`, G = (e) => `${e}__label`, K = (e) => `${e}__description`, q = (e) => !!e && !Se.option, J = m(() => {
+			if (e(Q.value)) return;
+			let t = H.value[Q.value];
 			if (t) return t.domId;
-		}), J = m(() => V.value.length > 0);
-		function Y(e) {
-			return z(e) + M.groups[e].options.length * L.value;
+		}), Y = m(() => H.value.length > 0);
+		function X(e) {
+			return B(e) + N.groups[e].options.length * R.value;
 		}
-		let X = oe({
+		let Z = ae({
 			get count() {
-				return M.groups.length;
+				return N.groups.length;
 			},
-			getScrollElement: () => F.value ?? null,
-			estimateSize: (e) => Y(e),
+			getScrollElement: () => I.value ?? null,
+			estimateSize: (e) => X(e),
 			overscan: 2
-		}), De = m(() => X.value.getVirtualItems()), Oe = m(() => X.value.getTotalSize()), { focusedIndex: Z, focusNext: ke, focusPrevious: Ae, focusFirst: je, focusLast: Me, focusFirstSelected: Ne, focusLastSelected: Pe, focusByHash: Fe, focusByPointer: Ie, blurPointerFocus: Le, blur: Q, getHighlighted: Re } = d(m(() => V.value), { disabled: () => !M.open }), $ = re(!1), ze = async () => {
-			if (!F.value || e(Z.value)) return;
-			let t = V.value[Z.value]?.groupIndex;
-			u(t) && (X.value.scrollToIndex(t, { align: "auto" }), await te());
-			let n = F.value.querySelector(`[data-index="${Z.value}"]`);
+		}), De = m(() => Z.value.getVirtualItems()), Oe = m(() => Z.value.getTotalSize()), { focusedIndex: Q, focusNext: ke, focusPrevious: Ae, focusFirst: je, focusLast: Me, focusFirstSelected: Ne, focusLastSelected: Pe, focusByHash: Fe, focusByPointer: Ie, blurPointerFocus: Le, blur: Re, getHighlighted: ze } = d(m(() => H.value), { disabled: () => !N.open }), $ = ne(!1), Be = async () => {
+			if (!I.value || e(Q.value)) return;
+			let t = H.value[Q.value]?.groupIndex;
+			u(t) && (Z.value.scrollToIndex(t, { align: "auto" }), await te());
+			let n = I.value.querySelector(`[data-index="${Q.value}"]`);
 			n && n.scrollIntoView({ block: "nearest" });
 		};
-		k(Z, () => {
-			$.value || ze(), $.value = !1, N("focused:change", q.value);
+		A(Q, () => {
+			$.value || Be(), $.value = !1, P("focused:change", J.value);
 		});
-		let Be = () => X.value.scrollToOffset(0), Ve = () => {
-			let e = V.value.find((e) => e.selected);
-			if (!e) return Be();
-			X.value.getTotalSize();
-			let t = X.value.measurementsCache[e.groupIndex];
-			t && X.value.scrollToOffset(t.start + z(e.groupIndex) + e.indexInGroup * L.value);
+		let Ve = () => Z.value.scrollToOffset(0), He = () => {
+			let e = H.value.find((e) => e.selected);
+			if (!e) return Ve();
+			Z.value.getTotalSize();
+			let t = Z.value.measurementsCache[e.groupIndex];
+			t && Z.value.scrollToOffset(t.start + B(e.groupIndex) + e.indexInGroup * R.value);
 		};
-		k(() => M.open && !!F.value, (e) => {
-			e && Ve();
+		A(() => N.open && !!I.value, (e) => {
+			e && He();
 		}, { flush: "post" });
-		let He = (e) => {
-			M.open && ($.value = !0, Ie(e));
-		}, Ue = () => {
-			Le();
+		let Ue = (e) => {
+			N.open && ($.value = !0, Ie(e));
 		}, We = () => {
-			if (e(Z.value) || !M.open) return;
-			let t = V.value[Z.value];
+			Le();
+		}, Ge = () => {
+			if (e(Q.value) || !N.open) return;
+			let t = H.value[Q.value];
 			if (!t || t.disabled) return;
 			let n = {
 				text: t.text,
@@ -167,21 +170,21 @@ var se = { class: "bb-listbox__outer-container scrollbar-border" }, ce = {
 				selected: t.selected,
 				disabled: t.disabled
 			};
-			t.selected ? N("option:unselected", n) : N("option:selected", n);
-		}, Ge = (t) => {
-			if (t.preventDefault(), F.value && t.target instanceof HTMLElement && Ce.value) {
+			t.selected ? P("option:unselected", n) : P("option:selected", n);
+		}, Ke = (t) => {
+			if (t.preventDefault(), I.value && t.target instanceof HTMLElement && Ce.value) {
 				let n = t.target, r = n.dataset.index;
 				for (; e(r) && n.parentElement;) n = n.parentElement, r = n.dataset.index;
 				if (r) {
-					let e = V.value[+r];
-					e && !e.disabled && (Z.value = +r, We());
+					let e = H.value[+r];
+					e && !e.disabled && (Q.value = +r, Ge());
 				}
 			}
 		};
-		return k(() => M.groups, (e, t) => {
-			e.flatMap((e) => [e.id, ...e.options.map((e) => e.valueHash)]).join(",") !== t.flatMap((e) => [e.id, ...e.options.map((e) => e.valueHash)]).join(",") && (X.value.measure(), Q());
-		}, { flush: "post" }), k([L, R], () => {
-			X.value.measure();
+		return A(() => N.groups, (e, t) => {
+			e.flatMap((e) => [e.id, ...e.options.map((e) => e.valueHash)]).join(",") !== t.flatMap((e) => [e.id, ...e.options.map((e) => e.valueHash)]).join(",") && (Z.value.measure(), Re());
+		}, { flush: "post" }), A([R, z], () => {
+			Z.value.measure();
 		}, { flush: "post" }), b({
 			focusNext: ke,
 			focusPrevious: Ae,
@@ -189,39 +192,39 @@ var se = { class: "bb-listbox__outer-container scrollbar-border" }, ce = {
 			focusFirstSelected: Ne,
 			focusLast: Me,
 			focusLastSelected: Pe,
-			blur: Q,
-			confirmOption: We,
+			blur: Re,
+			confirmOption: Ge,
 			focusByHash: Fe,
-			getHighlighted: Re,
-			getActiveDescendantId: () => q.value,
-			scrollToTop: Be,
-			scrollToSelected: Ve
-		}), (e, t) => (C(), _("span", {
-			class: ne(["bb-listbox bb-listbox--grouped", {
+			getHighlighted: ze,
+			getActiveDescendantId: () => J.value,
+			scrollToTop: Ve,
+			scrollToSelected: He
+		}), (e, t) => (w(), _("span", {
+			class: S(["bb-listbox bb-listbox--grouped", {
 				"bb-listbox--compact": e.compact,
 				"bb-listbox--described": e.described,
 				"bb-listbox--loading": e.loading,
 				"bb-listbox--multiple": e.multiple,
-				"bb-listbox--empty": !J.value,
+				"bb-listbox--empty": !Y.value,
 				"bb-listbox--open": e.open
 			}]),
-			style: S({
+			style: C({
 				"--transition-duration": `${e.transitionDuration}ms`,
-				"--option-height": `${L.value}px`,
-				"--group-header-height": `${R.value}px`,
+				"--option-height": `${R.value}px`,
+				"--group-header-height": `${z.value}px`,
 				"--option-font-size": we.value
 			}),
-			onClickCapture: Ge,
-			onClick: t[0] ||= A(() => {}, ["stop"]),
-			onMousedown: t[1] ||= A(() => {}, ["prevent"])
-		}, [v("span", se, [v("span", ce, [
-			T(e.$slots, "options:prepend"),
-			e.loading && !J.value ? (C(), _("span", le, [T(e.$slots, "loading", {}, () => [y(E(e.loadingText || D(P)("common.loadingText").value), 1)])])) : !J.value && !e.failedText ? (C(), _("span", ue, [T(e.$slots, "empty", {}, () => [y(E(e.emptyText || D(P)("common.emptyText").value), 1)])])) : g("", !0),
-			J.value ? (C(), _("span", x({
-				key: 2,
+			onClickCapture: Ke,
+			onClick: t[0] ||= j(() => {}, ["stop"]),
+			onMousedown: t[1] ||= j(() => {}, ["prevent"])
+		}, [v("span", oe, [v("span", se, [
+			E(e.$slots, "options:prepend"),
+			v("span", ce, [e.loading && !Y.value ? (w(), _("span", le, [E(e.$slots, "loading", {}, () => [y(D(e.loadingText || O(F)("common.loadingText").value), 1)])])) : !Y.value && !e.failedText ? (w(), _("span", ue, [E(e.$slots, "empty", {}, () => [y(D(e.emptyText || O(F)("common.emptyText").value), 1)])])) : g("", !0)]),
+			Y.value ? (w(), _("span", x({
+				key: 0,
 				id: e.id,
 				ref: "listbox",
-				"aria-activedescendant": q.value,
+				"aria-activedescendant": J.value,
 				"aria-label": e.listLabelledby ? void 0 : e.listLabel,
 				"aria-labelledby": e.listLabelledby,
 				"aria-multiselectable": e.multiple ? !0 : void 0,
@@ -229,113 +232,113 @@ var se = { class: "bb-listbox__outer-container scrollbar-border" }, ce = {
 				role: "listbox",
 				style: { height: `${Oe.value}px` },
 				tabindex: "-1",
-				onMouseleave: Ue
-			}, e.passthrough?.list), [(C(!0), _(p, null, w(De.value, (t) => (C(), _("span", {
-				key: B.value[t.index].id,
-				"aria-disabled": B.value[t.index].allOptionsAreDisabled,
-				"aria-labelledby": B.value[t.index].headerId,
+				onMouseleave: We
+			}, e.passthrough?.list), [(w(!0), _(p, null, T(De.value, (t) => (w(), _("span", {
+				key: V.value[t.index].id,
+				"aria-disabled": V.value[t.index].allOptionsAreDisabled,
+				"aria-labelledby": V.value[t.index].headerId,
 				class: "bb-listbox__group",
 				role: "group",
-				style: S({ transform: `translateY(${t.start}px)` })
-			}, [B.value[t.index].headerId ? (C(), _("span", {
+				style: C({ transform: `translateY(${t.start}px)` })
+			}, [V.value[t.index].headerId ? (w(), _("span", {
 				key: 0,
-				id: B.value[t.index].headerId,
+				id: V.value[t.index].headerId,
 				class: "bb-listbox__group-header",
 				role: "presentation"
-			}, [T(e.$slots, "group", {
-				disabled: B.value[t.index].allOptionsAreDisabled,
+			}, [E(e.$slots, "group", {
+				disabled: V.value[t.index].allOptionsAreDisabled,
 				index: t.index,
-				item: B.value[t.index].data,
-				length: B.value[t.index].length,
-				text: B.value[t.index].label
-			}, () => [v("span", me, E(B.value[t.index].label), 1)])], 8, pe)) : g("", !0), (C(!0), _(p, null, w(B.value[t.index].options, (n, r) => (C(), _("span", x({
-				id: H.value[t.index][r].domId,
+				item: V.value[t.index].data,
+				length: V.value[t.index].length,
+				text: V.value[t.index].label
+			}, () => [v("span", me, D(V.value[t.index].label), 1)])], 8, pe)) : g("", !0), (w(!0), _(p, null, T(V.value[t.index].options, (n, r) => (w(), _("span", x({
+				id: U.value[t.index][r].domId,
 				key: n.valueHash,
-				"aria-describedby": K(H.value[t.index][r].description) ? G(H.value[t.index][r].domId) : void 0,
-				"aria-disabled": H.value[t.index][r].disabled ? !0 : void 0,
-				"aria-labelledby": K(H.value[t.index][r].description) ? W(H.value[t.index][r].domId) : void 0,
-				"aria-posinset": H.value[t.index][r].indexInGroup + 1,
-				"aria-selected": H.value[t.index][r].selected,
-				"aria-setsize": B.value[t.index].length,
+				"aria-describedby": q(U.value[t.index][r].description) ? K(U.value[t.index][r].domId) : void 0,
+				"aria-disabled": U.value[t.index][r].disabled ? !0 : void 0,
+				"aria-labelledby": q(U.value[t.index][r].description) ? G(U.value[t.index][r].domId) : void 0,
+				"aria-posinset": U.value[t.index][r].indexInGroup + 1,
+				"aria-selected": U.value[t.index][r].selected,
+				"aria-setsize": V.value[t.index].length,
 				class: ["bb-listbox__option", {
-					"bb-listbox__option--focused": D(Z) === H.value[t.index][r].globalIndex,
-					"bb-listbox__option--selected": H.value[t.index][r].selected,
-					"bb-listbox__option--disabled": H.value[t.index][r].disabled
+					"bb-listbox__option--focused": O(Q) === U.value[t.index][r].globalIndex,
+					"bb-listbox__option--selected": U.value[t.index][r].selected,
+					"bb-listbox__option--disabled": U.value[t.index][r].disabled
 				}],
-				"data-index": H.value[t.index][r].globalIndex,
+				"data-index": U.value[t.index][r].globalIndex,
 				role: "option",
-				onMouseenter: A((e) => He(H.value[t.index][r].globalIndex), ["stop"]),
+				onMouseenter: j((e) => Ue(U.value[t.index][r].globalIndex), ["stop"]),
 				ref_for: !0
 			}, e.passthrough?.part?.("option", {
-				selected: H.value[t.index][r].selected,
-				disabled: H.value[t.index][r].disabled || void 0
-			}, H.value[t.index][r].item)), [
-				H.value[t.index][r]["prepend:icon"] ? (C(), h(i, x({
+				selected: U.value[t.index][r].selected,
+				disabled: U.value[t.index][r].disabled || void 0
+			}, U.value[t.index][r].item)), [
+				U.value[t.index][r]["prepend:icon"] ? (w(), h(i, x({
 					key: 0,
 					"aria-hidden": "true",
 					class: "bb-listbox__item-icon bb-listbox__option-prepend-icon",
-					icon: H.value[t.index][r]["prepend:icon"],
+					icon: U.value[t.index][r]["prepend:icon"],
 					ref_for: !0
 				}, e.passthrough?.part?.("itemIcon", {
-					selected: H.value[t.index][r].selected,
-					disabled: H.value[t.index][r].disabled || void 0
-				}, H.value[t.index][r].item)), null, 16, ["icon"])) : g("", !0),
-				T(e.$slots, "option", {
-					description: H.value[t.index][r].description,
-					disabled: !!H.value[t.index][r].disabled,
-					focused: D(Z) === H.value[t.index][r].globalIndex,
-					index: H.value[t.index][r].globalIndex,
-					item: H.value[t.index][r].item,
-					selected: !!H.value[t.index][r].selected,
-					text: H.value[t.index][r].text,
-					value: H.value[t.index][r].value
-				}, () => [H.value[t.index][r].description ? (C(), _("span", ge, [v("span", x({
-					id: W(H.value[t.index][r].domId),
+					selected: U.value[t.index][r].selected,
+					disabled: U.value[t.index][r].disabled || void 0
+				}, U.value[t.index][r].item)), null, 16, ["icon"])) : g("", !0),
+				E(e.$slots, "option", {
+					description: U.value[t.index][r].description,
+					disabled: !!U.value[t.index][r].disabled,
+					focused: O(Q) === U.value[t.index][r].globalIndex,
+					index: U.value[t.index][r].globalIndex,
+					item: U.value[t.index][r].item,
+					selected: !!U.value[t.index][r].selected,
+					text: U.value[t.index][r].text,
+					value: U.value[t.index][r].value
+				}, () => [U.value[t.index][r].description ? (w(), _("span", ge, [v("span", x({
+					id: G(U.value[t.index][r].domId),
 					class: "bb-listbox__item-text",
 					ref_for: !0
 				}, e.passthrough?.part?.("itemText", {
-					selected: H.value[t.index][r].selected,
-					disabled: H.value[t.index][r].disabled || void 0
-				}, H.value[t.index][r].item)), E(H.value[t.index][r].text), 17, _e), v("span", x({
-					id: G(H.value[t.index][r].domId),
+					selected: U.value[t.index][r].selected,
+					disabled: U.value[t.index][r].disabled || void 0
+				}, U.value[t.index][r].item)), D(U.value[t.index][r].text), 17, _e), v("span", x({
+					id: K(U.value[t.index][r].domId),
 					class: "bb-listbox__item-description",
 					ref_for: !0
 				}, e.passthrough?.part?.("itemDescription", {
-					selected: H.value[t.index][r].selected,
-					disabled: H.value[t.index][r].disabled || void 0
-				}, H.value[t.index][r].item)), E(H.value[t.index][r].description), 17, ve)])) : (C(), _("span", x({
+					selected: U.value[t.index][r].selected,
+					disabled: U.value[t.index][r].disabled || void 0
+				}, U.value[t.index][r].item)), D(U.value[t.index][r].description), 17, ve)])) : (w(), _("span", x({
 					key: 1,
 					class: "bb-listbox__item-text",
 					ref_for: !0
 				}, e.passthrough?.part?.("itemText", {
-					selected: H.value[t.index][r].selected,
-					disabled: H.value[t.index][r].disabled || void 0
-				}, H.value[t.index][r].item)), E(H.value[t.index][r].text), 17))]),
-				H.value[t.index][r]["append:icon"] && !H.value[t.index][r].selected ? (C(), h(i, x({
+					selected: U.value[t.index][r].selected,
+					disabled: U.value[t.index][r].disabled || void 0
+				}, U.value[t.index][r].item)), D(U.value[t.index][r].text), 17))]),
+				U.value[t.index][r]["append:icon"] && !U.value[t.index][r].selected ? (w(), h(i, x({
 					key: 1,
 					"aria-hidden": "true",
 					class: "bb-listbox__item-icon bb-listbox__option-append-icon",
-					icon: H.value[t.index][r]["append:icon"],
+					icon: U.value[t.index][r]["append:icon"],
 					ref_for: !0
 				}, e.passthrough?.part?.("itemIcon", {
-					selected: H.value[t.index][r].selected,
-					disabled: H.value[t.index][r].disabled || void 0
-				}, H.value[t.index][r].item)), null, 16, ["icon"])) : g("", !0),
+					selected: U.value[t.index][r].selected,
+					disabled: U.value[t.index][r].disabled || void 0
+				}, U.value[t.index][r].item)), null, 16, ["icon"])) : g("", !0),
 				ee(i, {
 					"aria-hidden": "true",
 					class: "bb-listbox__option-check",
-					icon: D(o)
+					icon: O(o)
 				}, null, 8, ["icon"])
 			], 16, he))), 128))], 12, fe))), 128))], 16, de)) : g("", !0),
-			e.loading && e.loadingBelow && J.value ? (C(), _("span", ye, [T(e.$slots, "loading", {}, () => [y(E(e.loadingText || D(P)("common.loadingText").value), 1)])])) : g("", !0),
-			T(e.$slots, "options:append")
-		], 512)]), e.failedText ? (C(), _("span", {
+			e.loading && e.loadingBelow && Y.value ? (w(), _("span", ye, [E(e.$slots, "loading", {}, () => [y(D(e.loadingText || O(F)("common.loadingText").value), 1)])])) : g("", !0),
+			E(e.$slots, "options:append")
+		], 512)]), e.failedText ? (w(), _("span", {
 			key: 0,
 			id: `${e.id}_failed`,
-			class: ne(["bb-listbox__failed", { "bb-listbox__failed--divided": J.value }]),
+			class: S(["bb-listbox__failed", { "bb-listbox__failed--divided": Y.value }]),
 			role: "status"
-		}, [ee(a, { class: "bb-listbox__failed-icon" }), v("span", xe, [T(e.$slots, "empty", {}, () => [y(E(e.failedText), 1)])])], 10, be)) : g("", !0)], 38));
+		}, [ee(a, { class: "bb-listbox__failed-icon" }), v("span", xe, [E(e.$slots, "empty", {}, () => [y(D(e.failedText), 1)])])], 10, be)) : g("", !0)], 38));
 	}
 });
 //#endregion
-export { j as default };
+export { M as default };

package/dist/components/OptionsContainer/OptionsContainer.vue_vue_type_script_setup_true_lang.js

@@ -12,6 +12,8 @@ var v = ["id"], y = ["id"], b = /*@__PURE__*/ l({
 		itemLabelAlign: {},
 		itemInputAlign: {},
 		listLayout: {},
+		variant: {},
+		indicatorReady: { type: Boolean },
 		hasErrors: { type: Boolean },
 		hasWarnings: { type: Boolean },
 		hideLabel: { type: Boolean },
@@ -67,7 +69,10 @@ var v = ["id"], y = ["id"], b = /*@__PURE__*/ l({
 		return (e, t) => (f(), o("span", u({ class: [C.value.root, {
 			[`${C.value.root}--errors`]: e.hasErrors,
 			[`${C.value.root}--warnings`]: x.value,
-			[`${C.value.root}--${w.value}`]: !0
+			[`${C.value.root}--${w.value}`]: !0,
+			[`${C.value.root}--strip`]: !!e.variant,
+			[`${C.value.root}--${e.variant}`]: !!e.variant,
+			[`${C.value.root}--no-transition`]: !!e.variant && !e.indicatorReady
 		}] }, e.passthrough?.list), [
 			h(e.$slots, "prepend"),
 			!e.options.length && e.loading ? (f(), o("span", {
@@ -97,7 +102,7 @@ var v = ["id"], y = ["id"], b = /*@__PURE__*/ l({
 				h(e.$slots, "input", {
 					descriptionId: t.description ? P(n) : void 0,
 					index: n,
-					labelId: t.description ? N(n) : void 0,
+					labelId: N(n),
 					option: t,
 					rowStates: B(t, n)
 				}),

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

@@ -34,6 +34,17 @@ export type OptionsContainerProps<T = any> = {
      * @defaultValue `'horizontal'`
      */
     listLayout?: ListLayout;
+    /**
+     * A tab-strip look on the list (Q76.11 d): `--strip` plus the variant's
+     * class hook (`--pill`, `--line`, a registered name), the strip and its
+     * triggers (choice-strip.css). The owning group renders the indicators.
+     */
+    variant?: string;
+    /**
+     * With a `variant`: the indicators have been measured and painted, so they
+     * may transition. Until then the list is `--no-transition`.
+     */
+    indicatorReady?: boolean;
     /**
      * Define if the component should be in an error state.
      * It usually attaches a CSS class for styling purposes.
@@ -92,10 +103,10 @@ export type OptionsContainerInputSlotProps<T = any> = {
     /** The full internal Option object for this row. */
     option: Option<T>;
     /**
-     * Id of the row's text, set only when the option has a description. Pass as
-     * `aria-labelledby` so the description stays out of the input's name.
+     * Id of the row's text. Pass as `aria-labelledby` so the `icon` slot and the
+     * description stay out of the input's name.
      */
-    labelId: string | undefined;
+    labelId: string;
     /**
      * Id of the row's description, set only when it has one. Add it to the
      * input's `aria-describedby` (see `withItemDescribedby`).

package/dist/composables/useBbConfig.d.ts

@@ -28,4 +28,5 @@ export type { DynamicConfig } from '../types/Config';
  */
 export declare const useBbConfig: () => {
     setConfig: (patch: Partial<DynamicConfig>) => void;
+    locale: import('vue').ComputedRef<import('../i18n').BuiltinLocaleInput>;
 };

package/dist/composables/useBbConfig.js

@@ -1,11 +1,15 @@
 import { useConfig as e } from "./useConfig.js";
-import { config as t } from "virtual:bitboss-ui/config";
+import { computed as t } from "vue";
+import { config as n } from "virtual:bitboss-ui/config";
 //#region src/composables/useBbConfig.ts
-var n = () => {
-	let n = e(), r = n === t;
-	return { setConfig: (e) => {
-		process.env.NODE_ENV !== "production" && r && typeof window > "u" && console.warn("[bitboss-ui] setConfig() wrote the process-global defaults rather than one app, during a SERVER render — that leaks into other visitors being served concurrently. This app has no per-app config to write to, which means either the call is outside any app context, or the library plugin was never installed on it. Fix, by framework: Vue/Inertia — pass per-request values where the app is created, `app.use(bitbossUiPlugin, { locale })`. Nuxt — the module provides the config for you, so call setConfig from a component, or from your own Nuxt plugin inside `nuxtApp.vueApp.runWithContext(() => …)`; if this still fires, the bitboss-ui Nuxt module is not registered in `modules`."), Object.assign(n, e);
-	} };
+var r = () => {
+	let r = e(), i = r === n;
+	return {
+		setConfig: (e) => {
+			process.env.NODE_ENV !== "production" && i && typeof window > "u" && console.warn("[bitboss-ui] setConfig() wrote the process-global defaults rather than one app, during a SERVER render — that leaks into other visitors being served concurrently. This app has no per-app config to write to, which means either the call is outside any app context, or the library plugin was never installed on it. Fix, by framework: Vue/Inertia — pass per-request values where the app is created, `app.use(bitbossUiPlugin, { locale })`. Nuxt — the module provides the config for you, so call setConfig from a component, or from your own Nuxt plugin inside `nuxtApp.vueApp.runWithContext(() => …)`; if this still fires, the bitboss-ui Nuxt module is not registered in `modules`."), Object.assign(r, e);
+		},
+		locale: t(() => r.locale)
+	};
 };
 //#endregion
-export { n as useBbConfig };
+export { r as useBbConfig };

package/dist/composables/useBbFormContext.d.ts

@@ -181,9 +181,10 @@ export type BbFormContextHandle = {
      * (`setErrors({ ...body.errors, _request: [body.message] })`). A message
      * you take back yourself (your own cross-field check) belongs in BbForm's
      * `field-errors`, computed.
-     * Returns nothing and does not emit `invalid`: the form state is the
-     * answer, so read `fields` / `unmatchedErrors` afterwards (to jump to the
-     * step that holds an error, or show a summary). It moves focus to the first
+     * Returns nothing; a non-empty map emits BbForm's `invalid` with
+     * `source: 'server'` (before any focus), and `fields` / `unmatchedErrors`
+     * hold the same answer afterwards (to jump to the step that holds an
+     * error, or show a summary). It moves focus to the first
      * field that got an error and is on screen, like a failed submit — unless
      * focus has left the form meanwhile, or the form was never submitted and
      * focus is on `<body>`; `{ focus: false }` turns it off. No-op until the