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

package/dist/composables/useBbTabsContext.js

@@ -6,39 +6,39 @@ import { useUrlQueryParam as i } from "./useUrlQueryParam.js";
 import { useId as a } from "./useId.js";
 import { slotKey as o } from "../utilities/functions/slotKey.js";
 import { isNotNil as s } from "../utilities/functions/isNotNil.js";
-import { computed as c, getCurrentInstance as l, inject as u, onScopeDispose as d, provide as f, ref as p, shallowReactive as m, watch as h } from "vue";
+import { computed as c, getCurrentInstance as l, inject as u, nextTick as d, onMounted as f, onScopeDispose as p, onUnmounted as m, provide as h, ref as g, shallowReactive as _, watch as v } from "vue";
 //#region src/composables/useBbTabsContext.ts
-var g = Symbol("BbTabsContext"), _ = m(/* @__PURE__ */ new Map()), v = (u, m) => {
-	let v = i(() => u.queryKey), { route: y, router: b } = v, { error: x, warn: S } = e(), { isInertia: C } = r(), w = l(), T = a().id.value, E = u.id ?? T, D = `bb-tabs_${E}`, O = p(null), k = c(() => u.items.findIndex((e) => e.value === O.value)), A = c(() => k.value === 0), j = c(() => k.value === u.items.length - 1);
+var y = Symbol("BbTabsContext"), b = _(/* @__PURE__ */ new Map()), x = /* @__PURE__ */ new Map(), S = (u, _) => {
+	let S = i(() => u.queryKey), { route: C, router: w } = S, { error: T, warn: E } = e(), { isInertia: ee } = r(), D = l(), O = a().id.value, k = u.id ?? O, A = `bb-tabs_${k}`, j = g(null), M = c(() => u.items.findIndex((e) => e.value === j.value)), N = c(() => M.value === 0), P = c(() => M.value === u.items.length - 1);
 	u.items.forEach((e) => {
-		e.value ? (u.server || e.server) && !u.navigation && x(`A tab item has a server property but the navigation prop is false: ${JSON.stringify(e, null, 2)}`) : x(`A tab item has no value: ${JSON.stringify(e, null, 2)}`);
+		e.value ? (u.server || e.server) && !u.navigation && T(`A tab item has a server property but the navigation prop is false: ${JSON.stringify(e, null, 2)}`) : T(`A tab item has no value: ${JSON.stringify(e, null, 2)}`);
 	});
-	let M = v.tracked, N = (e) => String(e).split(/\W+/g).join("_").toLowerCase(), P = (e) => {
+	let F = S.tracked, I = (e) => String(e).split(/\W+/g).join("_").toLowerCase(), L = (e) => {
 		let t = u.items.find((t) => o(t.value) === e);
 		if (t) return {
 			key: t.value,
 			legacy: !1
 		};
-		let n = u.items.find((t) => N(t.value) === e);
+		let n = u.items.find((t) => I(t.value) === e);
 		return n ? {
 			key: n.value,
 			legacy: !0
 		} : null;
-	}, F = v.readLive, I = (e) => {
+	}, R = S.readLive, z = (e) => {
 		if (typeof window > "u") return;
 		let t = o(e);
-		(b && y.value ? y.value.query?.[u.queryKey] : F()) !== t && v.write(t, "replace");
-	}, L = () => {
-		let e = v.read(), t = e ? P(e) : null, n = t?.key ?? null;
-		if (u.navigation && n) O.value = n, t?.legacy && typeof window < "u" && queueMicrotask(() => I(n));
-		else if (u.modelValue) O.value = u.modelValue;
+		(w && C.value ? C.value.query?.[u.queryKey] : R()) !== t && S.write(t, "replace");
+	}, B = () => {
+		let e = S.read(), t = e ? L(e) : null, n = t?.key ?? null;
+		if (u.navigation && n) j.value = n, t?.legacy && typeof window < "u" && queueMicrotask(() => z(n));
+		else if (u.modelValue) j.value = u.modelValue;
 		else if (u.items[0]) {
 			let e = u.items.find((e) => !e.disabled);
-			e && (O.value = e.value);
+			e && (j.value = e.value);
 		}
 	};
-	L();
-	let R = (e) => ({
+	B();
+	let V = (e) => ({
 		headers: e.headers ?? u.headers,
 		only: e.only ?? u.only,
 		preserveScroll: e.preserveScroll ?? u.preserveScroll,
@@ -51,35 +51,35 @@ var g = Symbol("BbTabsContext"), _ = m(/* @__PURE__ */ new Map()), v = (u, m) =>
 		onError: e.onError ?? u.onError,
 		onCancel: e.onCancel ?? u.onCancel,
 		onFinish: e.onFinish ?? u.onFinish
-	}), z = (e) => {
-		u.modelValue !== e && m("update:modelValue", e), O.value = e;
-	}, B = (e, n = u.replace) => {
+	}), H = (e) => {
+		u.modelValue !== e && _("update:modelValue", e), j.value = e;
+	}, U = (e, n = u.replace) => {
 		let r = u.items.find((t) => t.value === e);
 		if (t(r)) {
-			S(`Cannot select tab "${e}" on tabs "${E}": no item with this key. Available keys: ${u.items.map((e) => e.value).join(", ")}. Selection unchanged.`);
+			E(`Cannot select tab "${e}" on tabs "${k}": no item with this key. Available keys: ${u.items.map((e) => e.value).join(", ")}. Selection unchanged.`);
 			return;
 		}
-		if (r.value === O.value) return;
+		if (r.value === j.value) return;
 		let i = o(e);
-		if (u.navigation && y.value && b && M.value !== i) v.write(i, n ? "replace" : "push");
-		else if (u.navigation && C && F() !== i) {
+		if (u.navigation && C.value && w && F.value !== i) S.write(i, n ? "replace" : "push");
+		else if (u.navigation && ee && R() !== i) {
 			let t = r.href ?? globalThis.location.href;
 			if (u.server || r.server) {
-				let n = w?.proxy?.$inertia, a = R(r), o = Object.fromEntries(Object.entries(a).filter(([e, t]) => s(t))), c = new URL(t, window.location.origin);
+				let n = D?.proxy?.$inertia, a = V(r), o = Object.fromEntries(Object.entries(a).filter(([e, t]) => s(t))), c = new URL(t, window.location.origin);
 				c.searchParams.set(u.queryKey, i), n.visit(c.toString(), {
 					...o,
-					onSuccess: (...t) => (z(e), a.onSuccess?.(...t))
+					onSuccess: (...t) => (H(e), a.onSuccess?.(...t))
 				});
 				return;
 			}
-			v.write(i, n ? "replace" : "push", t);
+			S.write(i, n ? "replace" : "push", t);
 		}
-		z(e);
-	}, V = () => {
-		O.value && u.modelValue !== O.value && m("update:modelValue", O.value);
+		H(e);
+	}, W = () => {
+		j.value && u.modelValue !== j.value && _("update:modelValue", j.value);
 	};
-	V();
-	let H = (e, t) => {
+	W();
+	let G = (e, t) => {
 		let n = null;
 		switch (e) {
 			case "first":
@@ -103,35 +103,35 @@ var g = Symbol("BbTabsContext"), _ = m(/* @__PURE__ */ new Map()), v = (u, m) =>
 		if (n === null) return null;
 		let r = u.items[n];
 		return !r || r.disabled ? null : n;
-	}, U = (e) => {
-		document.getElementById(`${D}_tab_${o(u.items[e].value)}`)?.focus();
-	}, W = (e) => {
+	}, K = (e) => {
+		document.getElementById(`${A}_tab_${o(u.items[e].value)}`)?.focus();
+	}, q = (e) => {
 		if (![
 			"first",
 			"previous",
 			"next",
 			"last"
 		].includes(e)) {
-			S(`Invalid goTo target "${e}" on tabs "${E}". Valid targets: 'first', 'previous', 'next', 'last'. Selection unchanged.`);
+			E(`Invalid goTo target "${e}" on tabs "${k}". Valid targets: 'first', 'previous', 'next', 'last'. Selection unchanged.`);
 			return;
 		}
 		if (!u.items.length) return;
-		let t = H(e, k.value);
-		t !== null && (U(t), B(u.items[t].value));
-	}, G = c(() => u.manualActivation ?? (!!u.server || u.items.some((e) => !!e.server))), K = (e, t) => {
-		if (!G.value) {
-			W(e);
+		let t = G(e, M.value);
+		t !== null && (K(t), U(u.items[t].value));
+	}, J = c(() => u.manualActivation ?? (!!u.server || u.items.some((e) => !!e.server))), Y = (e, t) => {
+		if (!J.value) {
+			q(e);
 			return;
 		}
 		if (!u.items.length) return;
-		let n = t.currentTarget?.id, r = u.items.findIndex((e) => `${D}_tab_${o(e.value)}` === n), i = r === -1 ? k.value : r, a = H(e, i);
-		a !== null && U(a);
-	}, q = (e) => {
+		let n = t.currentTarget?.id, r = u.items.findIndex((e) => `${A}_tab_${o(e.value)}` === n), i = r === -1 ? M.value : r, a = G(e, i);
+		a !== null && K(a);
+	}, X = (e) => {
 		if (u.disabled) return;
 		let t = u.direction === "vertical";
-		e.key === "ArrowRight" || t && e.key === "ArrowDown" ? (e.preventDefault(), K("next", e)) : e.key === "ArrowLeft" || t && e.key === "ArrowUp" ? (e.preventDefault(), K("previous", e)) : e.key === "Home" ? (e.preventDefault(), K("first", e)) : e.key === "End" && (e.preventDefault(), K("last", e));
-	}, J = c(() => {
-		let e = O.value, t = k.value;
+		e.key === "ArrowRight" || t && e.key === "ArrowDown" ? (e.preventDefault(), Y("next", e)) : e.key === "ArrowLeft" || t && e.key === "ArrowUp" ? (e.preventDefault(), Y("previous", e)) : e.key === "Home" ? (e.preventDefault(), Y("first", e)) : e.key === "End" && (e.preventDefault(), Y("last", e));
+	}, Z = c(() => {
+		let e = j.value, t = M.value;
 		return u.items.map((n) => {
 			let { value: r, label: i, eager: a } = n, s = r === e, c = !!(n.disabled || u.disabled);
 			return {
@@ -139,8 +139,8 @@ var g = Symbol("BbTabsContext"), _ = m(/* @__PURE__ */ new Map()), v = (u, m) =>
 				value: r,
 				label: i,
 				eager: a,
-				tabId: `${D}_tab_${o(r)}`,
-				panelId: `${D}_tabpanel_${o(r)}`,
+				tabId: `${A}_tab_${o(r)}`,
+				panelId: `${A}_tabpanel_${o(r)}`,
 				labelSlotName: `${o(r)}:label`,
 				panelSlotName: o(r),
 				active: s,
@@ -151,40 +151,40 @@ var g = Symbol("BbTabsContext"), _ = m(/* @__PURE__ */ new Map()), v = (u, m) =>
 					current: e,
 					currentIndex: t,
 					disabled: c,
-					isFirst: A.value,
-					isLast: j.value,
+					isFirst: N.value,
+					isLast: P.value,
 					selected: s,
 					label: i,
 					value: r,
-					goTo: W
+					goTo: q
 				},
-				onClick: () => B(r),
-				onKeydown: q
+				onClick: () => U(r),
+				onKeydown: X
 			};
 		});
 	});
-	h(() => u.modelValue, (e) => {
-		e && B(e);
-	}), v.onExternalChange((e) => {
-		if (!e || !b && !u.navigation) return;
-		let t = P(e);
-		t && (B(t.key, t.legacy || void 0), t.legacy && I(t.key));
+	v(() => u.modelValue, (e) => {
+		e && U(e);
+	}), S.onExternalChange((e) => {
+		if (!e || !w && !u.navigation) return;
+		let t = L(e);
+		t && (U(t.key, t.legacy || void 0), t.legacy && z(t.key));
 	});
-	let Y = p("right");
-	h(O, (e, t) => {
+	let Q = g("right");
+	v(j, (e, t) => {
 		if (e && t) {
 			let n = u.items.findIndex((t) => t.value === e), r = u.items.findIndex((e) => e.value === t);
-			Y.value = n > r ? "right" : "left";
+			Q.value = n > r ? "right" : "left";
 		}
-	}, { flush: "sync" }), h(() => n(u.items), () => {
-		O.value && !u.items.find((e) => e.value === O.value) && (L(), V());
+	}, { flush: "sync" }), v(() => n(u.items), () => {
+		j.value && !u.items.find((e) => e.value === j.value) && (B(), W());
 	}, {
 		immediate: !0,
 		deep: !0
 	});
-	let X = {
-		id: E,
-		instanceid: D,
+	let $ = {
+		id: k,
+		instanceid: A,
 		items: c(() => u.items),
 		disabled: c(() => !!u.disabled),
 		eager: c(() => !!u.eager),
@@ -194,21 +194,35 @@ var g = Symbol("BbTabsContext"), _ = m(/* @__PURE__ */ new Map()), v = (u, m) =>
 		compact: c(() => !!u.compact),
 		direction: c(() => u.direction),
 		variant: c(() => u.variant),
-		currentTab: O,
-		currentTabIndex: k,
-		isFirst: A,
-		isLast: j,
-		mappedItems: J,
-		animationDirection: Y,
-		select: B,
-		goTo: W
+		currentTab: j,
+		currentTabIndex: M,
+		isFirst: N,
+		isLast: P,
+		mappedItems: Z,
+		animationDirection: Q,
+		select: U,
+		goTo: q
 	};
-	return f(g, X), typeof window < "u" && (_.has(E) && x(`Duplicate tabs id "${E}": useBbTabsContext("${E}") will resolve to the most recently mounted instance.`), _.set(E, X), d(() => {
-		_.get(E) === X && _.delete(E);
-	})), X;
-}, y = () => u(g, null), b = (t) => {
+	if (h(y, $), typeof window < "u") {
+		b.set(k, $);
+		let e = {};
+		f(() => {
+			let t = x.get(k) ?? /* @__PURE__ */ new Set();
+			t.add(e), x.set(k, t), d(() => {
+				let t = x.get(k);
+				t && t.size > 1 && [...t].at(-1) === e && T(`Duplicate tabs id "${k}": useBbTabsContext("${k}") will resolve to the most recently mounted instance.`);
+			});
+		}), m(() => {
+			let t = x.get(k);
+			t?.delete(e), t?.size || x.delete(k);
+		}), p(() => {
+			b.get(k) === $ && b.delete(k);
+		});
+	}
+	return $;
+}, C = () => u(y, null), w = (t) => {
 	let { warn: n } = e(), r = (e) => {
-		let r = _.get(t);
+		let r = b.get(t);
 		if (!r) {
 			n(`[useBbTabsContext] No mounted <BbTabs>/<BbTabsRoot> with id "${t}"; call ignored.`);
 			return;
@@ -216,9 +230,9 @@ var g = Symbol("BbTabsContext"), _ = m(/* @__PURE__ */ new Map()), v = (u, m) =>
 		e(r);
 	};
 	return {
-		isReady: c(() => _.has(t)),
+		isReady: c(() => b.has(t)),
 		current: c({
-			get: () => _.get(t)?.currentTab.value ?? null,
+			get: () => b.get(t)?.currentTab.value ?? null,
 			set: (e) => {
 				if (e == null) {
 					n(`[useBbTabsContext] "current" cannot be set to null for id "${t}"; a tab is always selected. Assignment ignored.`);
@@ -227,12 +241,12 @@ var g = Symbol("BbTabsContext"), _ = m(/* @__PURE__ */ new Map()), v = (u, m) =>
 				r((t) => t.select(e));
 			}
 		}),
-		currentIndex: c(() => _.get(t)?.currentTabIndex.value ?? -1),
-		isFirst: c(() => _.get(t)?.isFirst.value ?? !1),
-		isLast: c(() => _.get(t)?.isLast.value ?? !1),
+		currentIndex: c(() => b.get(t)?.currentTabIndex.value ?? -1),
+		isFirst: c(() => b.get(t)?.isFirst.value ?? !1),
+		isLast: c(() => b.get(t)?.isLast.value ?? !1),
 		goTo: (e) => r((t) => t.goTo(e)),
 		select: (e) => r((t) => t.select(e))
 	};
 };
 //#endregion
-export { v as createTabsContext, b as useBbTabsContext, y as useInternalTabsContext };
+export { S as createTabsContext, w as useBbTabsContext, C as useInternalTabsContext };

package/dist/composables/useChoiceIndicator.d.ts

@@ -0,0 +1,58 @@
+import { Ref } from 'vue';
+import { Option } from '../types/Option';
+type Box = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/** One indicator box, measured against the list (its offset parent). */
+export type ChoiceIndicatorBox = Box & {
+    /** Stable across measurements, so a moving or growing box animates. */
+    key: string;
+    /**
+     * Fading out (a run left with no pick): drawn at the centre of its old
+     * box at size zero on the strip's axis, transparent, then dropped.
+     */
+    vanishing?: boolean;
+    /** Split off another pill: no pop-in, it opens the hole from there. */
+    peeled?: boolean;
+    /**
+     * This pill touches another on its low (left / top) or high (right /
+     * bottom) side, physically: drawn as one shape with it there.
+     */
+    seamStart?: boolean;
+    seamEnd?: boolean;
+    /** Placed without a transition: a split pill's starting box. */
+    instant?: boolean;
+};
+/**
+ * The indicators of a choice group's tabs look (`variant`, Q76.11 d):
+ * BbTabs' sliding indicator on a radio or checkbox group. Measures the
+ * checked rows (rendered in option order, so row `i` is option `i`) against
+ * the list, on the strip's axis (`vertical` stacks the rows):
+ *
+ * - a radio group has ONE indicator, which slides from row to row;
+ * - a checkbox `line` has one bar per checked row; adjacent bars abut;
+ * - a checkbox `pill` (and a registered look) has persistent pills: one
+ *   per run of adjacent picks at first, then each pill stretches, shortens,
+ *   splits or fades as options are ticked (see `measurePills`).
+ *
+ * `ready` turns on two frames after the first real measurement, as in
+ * BbTabsList: until then the CSS paints the checked rows themselves and the
+ * indicators do not transition, so a mount never animates in from 0×0.
+ */
+export declare const useChoiceIndicator: (options: {
+    kind: "radio" | "checkbox";
+    variant: () => string | undefined;
+    vertical: () => boolean;
+    list: () => HTMLElement | null | undefined;
+    rows: () => readonly Option[];
+    /** The row class (`bb-radio-group__item`): the list's direct children that are rows. */
+    rowClass: string;
+}) => {
+    boxes: Ref<ChoiceIndicatorBox[]>;
+    ready: Ref<boolean>;
+    styleOf: (box: ChoiceIndicatorBox) => Record<string, string | undefined>;
+};
+export {};

package/dist/composables/useChoiceIndicator.js

@@ -0,0 +1,197 @@
+import { nextTick as e, onBeforeUnmount as t, onMounted as n, ref as r, watch as i } from "vue";
+//#region src/composables/useChoiceIndicator.ts
+var a = 300, o = (o) => {
+	let s = r([]), c = r(!1), l = 0, u = (e, t) => {
+		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = window.devicePixelRatio || 1, a = (e) => Math.round(e * i) / i, o = a(n.left - r.left - t.clientLeft + t.scrollLeft), s = a(n.top - r.top - t.clientTop + t.scrollTop);
+		return {
+			left: o,
+			top: s,
+			width: a(n.left - r.left - t.clientLeft + t.scrollLeft + n.width) - o,
+			height: a(n.top - r.top - t.clientTop + t.scrollTop + n.height) - s
+		};
+	}, d = (e, t) => {
+		let n = Math.min(e.left, t.left), r = Math.min(e.top, t.top);
+		return {
+			left: n,
+			top: r,
+			width: Math.max(e.left + e.width, t.left + t.width) - n,
+			height: Math.max(e.top + e.height, t.top + t.height) - r
+		};
+	}, f = (e) => o.vertical() ? {
+		...e,
+		top: e.top + e.height / 2,
+		height: 0
+	} : {
+		...e,
+		left: e.left + e.width / 2,
+		width: 0
+	}, p = [], m, h = !1, g = () => {
+		h && (h = !1, T());
+	}, _ = () => {
+		for (let e of p) clearTimeout(e);
+		p = [], m !== void 0 && cancelAnimationFrame(m), m = void 0;
+	}, v = (e) => {
+		m = requestAnimationFrame(() => {
+			m = requestAnimationFrame(() => {
+				m = void 0, e();
+			});
+		});
+	}, y = [], b = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Map(), S = [], C = /* @__PURE__ */ new Set(), w = (e) => {
+		let t = new Map(e.map((e) => [e.option.valueHash, e.index])), n = new Map(e.map((e) => [e.option.valueHash, e.box])), r = e.filter((e) => e.option.selected).map((e) => e.option.valueHash), i = new Set(r), u = new Set(y.flatMap((e) => e.hashes)), w = (e) => t.get(e) ?? -1, T = (e, t = n) => e.hashes.map((e) => t.get(e)).reduce(d), E = (e, t) => !!e && !!t && w(e.hashes[e.hashes.length - 1]) + 1 === w(t.hashes[0]), D = r.length === u.size && r.every((e) => u.has(e));
+		if (D && y.length && (p.length || m !== void 0)) {
+			h = !0;
+			return;
+		}
+		let O = /* @__PURE__ */ new Map();
+		if (D || _(), !y.length) for (let e of [...r].sort((e, t) => w(e) - w(t))) {
+			let t = y[y.length - 1];
+			t && w(t.hashes[t.hashes.length - 1]) === w(e) - 1 ? t.hashes.push(e) : y.push({
+				key: `pill-${++l}`,
+				seq: l,
+				hashes: [e]
+			});
+		}
+		else if (!D) {
+			let e = [...u].filter((e) => !i.has(e)).sort((e, t) => w(t) - w(e));
+			for (let t of e) {
+				let e = y.find((e) => e.hashes.includes(t)), n = e.hashes.indexOf(t);
+				if (n === 0 || n === e.hashes.length - 1) {
+					e.hashes.splice(n, 1);
+					continue;
+				}
+				let r = e.hashes.splice(n).slice(1), i = {
+					key: `pill-${++l}`,
+					seq: l,
+					hashes: r,
+					peeled: !0
+				};
+				y.push(i), O.set(i.key, [t, ...r].map((e) => b.get(e)).reduce(d));
+			}
+			for (let e of y.filter((e) => !e.hashes.length)) {
+				let t = x.get(e.key);
+				if (!t) continue;
+				let n = {
+					key: e.key,
+					...f(t),
+					vanishing: !0
+				};
+				S.push(n);
+				let r = setTimeout(() => {
+					C.delete(r), S = S.filter((e) => e !== n), s.value = s.value.filter((e) => e.key !== n.key);
+				}, c.value ? a : 0);
+				C.add(r);
+			}
+			y = y.filter((e) => e.hashes.length);
+			let t = r.filter((e) => !u.has(e)).sort((e, t) => w(e) - w(t));
+			for (let e of t) {
+				let t = w(e), n = y.find((e) => w(e.hashes[e.hashes.length - 1]) === t - 1), r = y.find((e) => w(e.hashes[0]) === t + 1);
+				n ? n.hashes.push(e) : r ? r.hashes.unshift(e) : y.push({
+					key: `pill-${++l}`,
+					seq: l,
+					hashes: [e]
+				});
+			}
+		}
+		let k = [...y].sort((e, t) => w(e.hashes[0]) - w(t.hashes[0])), A = (e) => o.vertical() ? e.top : e.left, j = k.map((e) => ({
+			pill: e,
+			box: T(e)
+		})), M = [...y].sort((e, t) => e.seq - t.seq).map((e) => {
+			let t = k.indexOf(e), { box: n } = j[t], r = [E(j[t - 1]?.pill, e) ? j[t - 1] : void 0, E(e, j[t + 1]?.pill) ? j[t + 1] : void 0].filter((e) => !!e).map((e) => A(e.box) < A(n) ? "low" : "high");
+			return {
+				key: e.key,
+				...n,
+				seamStart: r.includes("low") || void 0,
+				seamEnd: r.includes("high") || void 0,
+				peeled: e.peeled
+			};
+		});
+		if (b = n, x = new Map(M.map((e) => [e.key, T(y.find((t) => t.key === e.key))])), !c.value) {
+			s.value = M;
+			return;
+		}
+		O.size ? (s.value = [...M.map((e) => O.has(e.key) ? {
+			...e,
+			...O.get(e.key),
+			instant: !0
+		} : e), ...S], v(() => {
+			for (let e of Array.from(o.list()?.children ?? [])) {
+				let t = getComputedStyle(e);
+				t.left, t.top, t.width, t.height;
+			}
+			s.value = [...M, ...S], g();
+		})) : s.value = [...M, ...S];
+	}, T = () => {
+		let e = o.list(), t = o.variant();
+		if (!e || !t) {
+			_(), s.value = [], y = [], S = [];
+			return;
+		}
+		let n = Array.from(e.children).filter((e) => e instanceof HTMLElement && e.classList.contains(o.rowClass)), r = o.rows();
+		if (n.length !== r.length) return;
+		let i = r.map((t, r) => ({
+			option: t,
+			index: r,
+			box: u(n[r], e)
+		})), a = i.filter(({ option: e }) => e.selected);
+		if (o.kind === "radio") {
+			let e = a[0], t = e && n[e.index];
+			s.value = t ? [{
+				key: "one",
+				left: t.offsetLeft,
+				top: t.offsetTop,
+				width: t.clientWidth,
+				height: t.clientHeight
+			}] : [];
+		} else t === "line" ? s.value = a.map(({ option: e, box: t }) => ({
+			key: e.valueHash,
+			...t
+		})) : w(i);
+		!c.value && s.value.some((e) => e.width > 0) && requestAnimationFrame(() => requestAnimationFrame(() => {
+			c.value = !0;
+		}));
+	}, E, D = () => {
+		E?.disconnect();
+		let e = o.list();
+		if (!(!e || !o.variant() || typeof ResizeObserver > "u")) {
+			E ??= new ResizeObserver(() => T()), E.observe(e);
+			for (let t of Array.from(e.children)) t.classList.contains(o.rowClass) && E.observe(t);
+		}
+	};
+	return n(() => {
+		T(), D(), document.fonts?.ready.then(T);
+	}), t(() => {
+		E?.disconnect(), _();
+		for (let e of C) clearTimeout(e);
+	}), i(() => [
+		o.variant(),
+		o.vertical(),
+		o.list(),
+		o.rows().map((e) => `${e.valueHash}:${+!!e.selected}`).join("|")
+	], async () => {
+		await e(), T(), D();
+	}, { flush: "post" }), {
+		boxes: s,
+		ready: c,
+		styleOf: (e) => {
+			let t = o.vertical(), n = {
+				"--left": `${e.left}px`,
+				"--top": `${e.top}px`,
+				"--width": `${e.width + (e.seamEnd && !t ? 1 : 0)}px`,
+				"--height": `${e.height + (e.seamEnd && t ? 1 : 0)}px`,
+				opacity: e.vanishing ? "0" : void 0,
+				animation: e.peeled ? "none" : void 0,
+				transition: e.instant ? "none" : void 0
+			};
+			if (!e.seamStart && !e.seamEnd) return n;
+			let [r, i] = t ? ["Top", "Bottom"] : ["Left", "Right"], a = (e) => t ? [`border${e}LeftRadius`, `border${e}RightRadius`] : [`borderTop${e}Radius`, `borderBottom${e}Radius`];
+			for (let [t, o] of [[e.seamStart, r], [e.seamEnd, i]]) if (t) {
+				for (let e of a(o)) n[e] = "0";
+				n[`border${o}Width`] = "0";
+			}
+			let s = `${1 / (window.devicePixelRatio || 1)}px`, c = e.seamStart ? s : "-8px", l = e.seamEnd ? "0" : "-8px";
+			return n.clipPath = t ? `inset(${c} -8px ${l} -8px)` : `inset(-8px ${l} -8px ${c})`, n;
+		}
+	};
+};
+//#endregion
+export { o as useChoiceIndicator };

package/dist/composables/useConfirm.d.ts

@@ -255,15 +255,15 @@ export declare const confirmState: import('vue').ComputedRef<{
     readonly actionBusy: number | null;
     readonly current: {
         readonly fullscreen?: boolean | "mobile" | undefined;
-        readonly text?: string | undefined;
-        readonly size?: keyof DialogSizes | undefined;
-        readonly title?: string | undefined;
         readonly data?: {
             readonly [x: string]: any;
         } | undefined;
+        readonly text?: string | undefined;
+        readonly size?: keyof DialogSizes | undefined;
+        readonly title?: string | undefined;
+        readonly variant?: ConfirmVariantType | undefined;
         readonly stack?: string | undefined;
         readonly hideClose?: boolean | undefined;
-        readonly variant?: ConfirmVariantType | undefined;
         readonly duration?: number | undefined;
         readonly focusTarget?: string | undefined;
         readonly persistent?: boolean | undefined;

package/dist/composables/usePassthrough.d.ts

@@ -50,6 +50,35 @@ export interface PassthroughOptions<Part extends string, State extends string> {
         component: string;
         parts: Partial<Record<Part, string>>;
     };
+    /**
+     * The component's variant as a passthrough state (Q76.7): `pt:root:destructive`,
+     * `{ 'item:destructive': '…' }`. One key, `<part>:<variant>`, merged after the
+     * part's base entry and BEFORE its real states, so `disabled` / `selected`
+     * still win. `current` is the component-level variant; a per-node one (a
+     * dropdown entry's) is the fourth argument of `part()`. `names` are the
+     * built-in names, `option` the plugin option that registers the app's own
+     * (`buttonVariants`), both only for the dev check of unknown keys and for
+     * `forward()`. A list for a component with two (BbDropdownButton: its
+     * button's on the control parts, its menu entries' on the entry parts).
+     */
+    variant?: PassthroughVariant<Part> | ReadonlyArray<PassthroughVariant<Part>>;
+    /**
+     * A row's facts beyond its states and variant, added to every per-item
+     * function's context (Q77.7: a select's `known`, on for a `known-items`
+     * stand-in). Called only for a row that has a function to call.
+     */
+    facts?: (item: unknown) => Record<string, unknown>;
+}
+/** The `variant` option of `usePassthrough`. */
+export interface PassthroughVariant<Part extends string> {
+    /** The component-level variant right now; leave it out for a per-node one. */
+    current?: () => string | undefined;
+    /** The built-in variant names (the registry interface's keys). */
+    names: readonly string[];
+    /** The build plugin option carrying the app's variant names. */
+    option: string;
+    /** The parts the variant styles. Default: every part. */
+    parts?: readonly Part[];
 }
 /**
  * The text-like controls' `controlAttrs`: native attributes of `<input>` /
@@ -94,7 +123,9 @@ export type PassthroughBindings<Part extends string, State extends string> = Rea
      * falsy result returns the cached binding unchanged. A part with no
      * function pays nothing beyond the cached lookup.
      */
-    part: (part: Part, states: Partial<Record<State, boolean>>, item?: unknown) => PtBinding;
+    part: (part: Part, states: Partial<Record<State, boolean>>, item?: unknown, 
+    /** A per-node variant (a dropdown entry's), over the component-level one. */
+    variant?: string) => PtBinding;
     /**
      * The RAW entries for some parts, re-keyed for a nested PUBLIC component's
      * own `pt` prop (`<BbSelectPopover :pt="passthrough.forward(['panel', 'option'], BB_SELECT_POPOVER_PT.states)" />`).
@@ -177,6 +208,28 @@ export declare const __ptStats: {
  * @internal
  */
 export declare const __resetPtWarningsForTest: () => void;
+/**
+ * Every registered name of a variant registry: the built-ins plus the app's
+ * own from the build-time config.
+ */
+export declare const registeredVariantNames: (names: readonly string[], option: string) => string[];
+/**
+ * The `pt:<part>:<name>` props of an app's OWN variant names (Q76.7 part 2),
+ * for a component's `defineOptions({ mixins: [variantPt(BB_X_PT)] })`. The
+ * built-in names are declared props of the component; an app's names exist
+ * only once the app registers them, so they come from the build-time config
+ * at module evaluation, as a props-only mixin Vue merges into the
+ * component's props (with the Options API on, Vue's default; with
+ * `__VUE_OPTIONS_API__: false` mixins do not merge, so an app's names work in
+ * the object form and the global map only). The resolver reads them like any
+ * declared `pt:*` prop. No custom name, no mixin props.
+ */
+export declare const variantPt: (pt: {
+    parts: readonly string[];
+    variant: PassthroughVariant<string> | ReadonlyArray<PassthroughVariant<string>>;
+}) => {
+    props: Record<string, null>;
+};
 /**
  * The shared passthrough resolver. Wire it once per component:
  *