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

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/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