bitboss-ui 3.0.0-beta.21 → 3.0.0-beta.23

package/dist/components/BbToast/BbToastRegion.vue_vue_type_script_setup_true_lang.js

@@ -1,92 +1,92 @@
 import { overlaySurfaceIsolation as e } from "../../utils/overlaySurfaceIsolation.js";
-import { viewportHeight as t, viewportWidth as n } from "../../composables/useViewportWidth.js";
-import { topLayerHost as r } from "../../composables/useTopLayer.js";
-import { useSafeAreaInternal as i } from "../../composables/useSafeAreaInternal.js";
-import { dismissToast as a } from "../../composables/useToast.js";
-import o from "./BbToastMessage.vue.js";
-import { Fragment as s, computed as c, createBlock as l, createElementBlock as u, defineComponent as d, mergeProps as f, onBeforeUnmount as p, onMounted as m, openBlock as h, reactive as g, ref as _, renderList as v, toHandlers as y, unref as b, watch as x, watchEffect as S } from "vue";
+import { viewportClientHeight as t, viewportClientWidth as n, viewportWidth as r } from "../../composables/useViewportWidth.js";
+import { topLayerHost as i } from "../../composables/useTopLayer.js";
+import { useSafeAreaInternal as a } from "../../composables/useSafeAreaInternal.js";
+import { dismissToast as o } from "../../composables/useToast.js";
+import s from "./BbToastMessage.vue.js";
+import { Fragment as c, computed as l, createBlock as u, createElementBlock as d, defineComponent as f, mergeProps as p, onBeforeUnmount as m, onMounted as h, openBlock as g, reactive as _, ref as v, renderList as y, toHandlers as b, unref as x, watch as S, watchEffect as C } from "vue";
 //#region src/components/BbToast/BbToastRegion.vue?vue&type=script&setup=true&lang.ts
-var C = /*@__PURE__*/ d({
+var w = /*@__PURE__*/ f({
 	__name: "BbToastRegion",
 	props: {
 		position: {},
 		toasts: {}
 	},
-	setup(d) {
-		let C = d, w = _(), T = _(!1), E = _(!1), D = g({}), O = c(() => T.value), k = c(() => T.value || E.value), A = _(0), j = _(0), M = g({});
-		S(() => {
-			let e = C.toasts.filter((e) => !e.removed), t = e.length - 1;
+	setup(f) {
+		let w = f, T = v(), E = v(!1), D = v(!1), O = _({}), k = l(() => E.value), A = l(() => E.value || D.value), j = v(0), M = v(0), N = _({});
+		C(() => {
+			let e = w.toasts.filter((e) => !e.removed), t = e.length - 1;
 			e.forEach((n, r) => {
 				let i = 0;
-				for (let n = r + 1; n <= t; n++) i += D[e[n].id] ?? 0;
-				M[n.id] = {
+				for (let n = r + 1; n <= t; n++) i += O[e[n].id] ?? 0;
+				N[n.id] = {
 					frontIndex: t - r,
 					heightBefore: i
 				};
-			}), A.value = e.length, j.value = t >= 0 ? D[e[t].id] ?? 0 : 0;
-			let n = new Set(C.toasts.map((e) => e.id));
-			for (let e of Object.keys(M)) n.has(e) || delete M[e];
-			for (let e of Object.keys(D)) n.has(e) || delete D[e];
+			}), j.value = e.length, M.value = t >= 0 ? O[e[t].id] ?? 0 : 0;
+			let n = new Set(w.toasts.map((e) => e.id));
+			for (let e of Object.keys(N)) n.has(e) || delete N[e];
+			for (let e of Object.keys(O)) n.has(e) || delete O[e];
 		});
-		let { occupied: N } = i(), P = c(() => n.value < 640 ? 14 : 20), F = c(() => {
-			let e = C.toasts.filter((e) => !e.removed);
-			return O.value && e.length ? e.reduce((e, t) => e + (D[t.id] ?? 0), 0) : j.value;
-		}), I = c(() => {
-			let e = P.value * 2, r = C.position.startsWith("top") ? N.top.value : N.bottom.value, i = r + F.value + e <= t.value, a = C.position.endsWith("right") ? N.right.value : C.position.endsWith("left") ? N.left.value : 0, o = a + (w.value?.offsetWidth ?? 356) + e <= n.value;
+		let { occupied: P } = a(), F = l(() => r.value < 640 ? 14 : 20), I = l(() => {
+			let e = w.toasts.filter((e) => !e.removed);
+			return k.value && e.length ? e.reduce((e, t) => e + (O[t.id] ?? 0), 0) : M.value;
+		}), L = l(() => {
+			let e = F.value * 2, r = w.position.startsWith("top") ? P.top.value : P.bottom.value, i = r + I.value + e <= t.value, a = w.position.endsWith("right") ? P.right.value : w.position.endsWith("left") ? P.left.value : 0, o = a + (T.value?.offsetWidth ?? 356) + e <= n.value;
 			return {
 				"--safe-v": `${i ? r : 0}px`,
 				"--safe-h": `${o ? a : 0}px`
 			};
-		}), L = c(() => ({
-			height: `${F.value}px`,
-			...I.value
-		})), R = () => {
-			let e = w.value;
+		}), R = l(() => ({
+			height: `${I.value}px`,
+			...L.value
+		})), z = () => {
+			let e = T.value;
 			!e || !e.isConnected || (e.matches(":popover-open") && e.hidePopover(), e.showPopover());
 		};
-		x([
-			c(() => C.toasts.filter((e) => !e.removed).length),
-			c(() => N.top.value + N.right.value + N.bottom.value + N.left.value),
-			r
+		S([
+			l(() => w.toasts.filter((e) => !e.removed).length),
+			l(() => P.top.value + P.right.value + P.bottom.value + P.left.value),
+			i
 		], ([e, t, n], [r, i, a]) => {
-			e !== 0 && (e > r || t !== i || n !== a) && R();
+			e !== 0 && (e > r || t !== i || n !== a) && z();
 		}, { flush: "post" });
-		let z = (e, t) => {
-			D[e] = t;
-		}, B = (e, t) => {
-			a(e, t);
-		}, V = (e) => {
-			w.value?.contains(e.relatedTarget) || (T.value = !1);
-		}, H = () => {
-			E.value = document.hidden;
+		let B = (e, t) => {
+			O[e] = t;
+		}, V = (e, t) => {
+			o(e, t);
+		}, H = (e) => {
+			T.value?.contains(e.relatedTarget) || (E.value = !1);
+		}, U = () => {
+			D.value = document.hidden;
 		};
-		return m(() => {
-			w.value?.showPopover(), document.addEventListener("visibilitychange", H);
-		}), p(() => {
-			w.value?.hidePopover(), document.removeEventListener("visibilitychange", H);
-		}), (t, n) => (h(), u("ol", f({
+		return h(() => {
+			T.value?.showPopover(), document.addEventListener("visibilitychange", U);
+		}), m(() => {
+			T.value?.hidePopover(), document.removeEventListener("visibilitychange", U);
+		}), (t, n) => (g(), d("ol", p({
 			ref_key: "regionEl",
-			ref: w,
-			class: ["bb-toast", [`bb-toast--${t.position}`, { "bb-toast--expanded": O.value }]],
+			ref: T,
+			class: ["bb-toast", [`bb-toast--${t.position}`, { "bb-toast--expanded": k.value }]],
 			popover: "manual",
-			style: L.value,
+			style: R.value,
 			tabindex: "-1"
-		}, y(b(e), !0), {
-			onFocusin: n[0] ||= (e) => T.value = !0,
-			onFocusout: V,
-			onPointerenter: n[1] ||= (e) => T.value = !0,
-			onPointerleave: n[2] ||= (e) => T.value = !1
-		}), [(h(!0), u(s, null, v(t.toasts, (e) => (h(), l(o, {
+		}, b(x(e), !0), {
+			onFocusin: n[0] ||= (e) => E.value = !0,
+			onFocusout: H,
+			onPointerenter: n[1] ||= (e) => E.value = !0,
+			onPointerleave: n[2] ||= (e) => E.value = !1
+		}), [(g(!0), d(c, null, y(t.toasts, (e) => (g(), u(s, {
 			key: e.id,
-			"front-height": j.value,
-			"front-index": M[e.id]?.frontIndex ?? 0,
-			"height-before": M[e.id]?.heightBefore ?? 0,
-			paused: k.value,
+			"front-height": M.value,
+			"front-index": N[e.id]?.frontIndex ?? 0,
+			"height-before": N[e.id]?.heightBefore ?? 0,
+			paused: A.value,
 			position: t.position,
 			toast: e,
-			total: A.value,
-			onDismiss: B,
-			onHeight: z
+			total: j.value,
+			onDismiss: V,
+			onHeight: B
 		}, null, 8, [
 			"front-height",
 			"front-index",
@@ -99,4 +99,4 @@ var C = /*@__PURE__*/ d({
 	}
 });
 //#endregion
-export { C as default };
+export { w as default };

package/dist/components/BbTooltip/BbTooltip.vue_vue_type_script_setup_true_lang.js

@@ -1,18 +1,17 @@
 import { useId as e } from "../../composables/useId.js";
 import { useUntil as t } from "../../composables/useUntil.js";
 import { removedPropsFor as n } from "../../deprecation/removedProps.js";
-import { warnRemovedAttrs as ee } from "../../utilities/functions/warnRemovedAttrs.js";
-import { extractDomContainer as r } from "../../utilities/functions/extractDomContainer.js";
-import { transitions as i } from "../../utilities/misc/transitions.js";
-import te from "../CommonPopover/CommonPopover.vue.js";
-import { parseWidthString as a } from "../../utilities/functions/parseWidthString.js";
-import { Comment as o, Fragment as s, computed as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as ne, createVNode as f, defineComponent as p, mergeModels as m, mergeProps as h, normalizeProps as g, normalizeStyle as _, onBeforeUnmount as v, onMounted as y, openBlock as b, ref as x, renderSlot as S, toDisplayString as C, useModel as w, useSlots as T, useTemplateRef as E, watch as D, withCtx as re } from "vue";
-import { useElementSize as O } from "@vueuse/core";
+import { warnRemovedAttrs as r } from "../../utilities/functions/warnRemovedAttrs.js";
+import { extractDomContainer as i } from "../../utilities/functions/extractDomContainer.js";
+import { transitions as a } from "../../utilities/misc/transitions.js";
+import o from "../CommonPopover/CommonPopover.vue.js";
+import { Comment as s, Fragment as ee, computed as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, mergeProps as g, normalizeProps as te, normalizeStyle as _, onBeforeUnmount as v, onMounted as y, openBlock as b, ref as x, renderSlot as S, toDisplayString as C, useModel as w, useSlots as T, useTemplateRef as E, watch as D, withCtx as O } from "vue";
+import { useElementSize as k } from "@vueuse/core";
 //#region src/components/BbTooltip/BbTooltip.vue?vue&type=script&setup=true&lang.ts
-var k = /*@__PURE__*/ p({
+var A = /*@__PURE__*/ m({
 	inheritAttrs: !1,
 	__name: "BbTooltip",
-	props: /*@__PURE__*/ m({
+	props: /*@__PURE__*/ h({
 		arrowPadding: { default: 10 },
 		disabled: { type: Boolean },
 		eager: { type: Boolean },
@@ -21,7 +20,7 @@ var k = /*@__PURE__*/ p({
 		padding: { default: 10 },
 		placement: { default: "top" },
 		text: {},
-		transitionDuration: { default: i.medium },
+		transitionDuration: { default: a.medium },
 		activator: {},
 		boundary: {},
 		variant: { default: "default" },
@@ -35,98 +34,102 @@ var k = /*@__PURE__*/ p({
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(i) {
-		let p = w(i, "modelValue"), m = i, k = T();
-		process.env.NODE_ENV !== "production" && ee("BbTooltip", n("BbTooltip"));
-		let A = `bb_${m.id ?? e().id.value}`, j = `${A}_desc`, M = (e) => {
+	setup(a) {
+		let m = w(a, "modelValue"), h = a, A = T();
+		process.env.NODE_ENV !== "production" && r("BbTooltip", n("BbTooltip"));
+		let j = `bb_${h.id ?? e().id.value}`, M = `${j}_desc`, N = (e) => {
 			if (!e) return "";
 			let t = "";
 			for (let n of e) {
-				if (n.type === o) continue;
+				if (n.type === s) continue;
 				let e = n.children;
-				typeof e == "string" ? t += e : Array.isArray(e) && (t += M(e));
+				typeof e == "string" ? t += e : Array.isArray(e) && (t += N(e));
 			}
 			return t;
-		}, N = x(!1), P = c(() => (m.text ?? (N.value ? M(k.default?.({})) : "")).replace(/\s+/g, " ").trim()), F = x(), ie = c(() => m.activator != null), I = E("popover"), L = c(() => r(I.value)), R = t(p), z = (e) => {
-			let t = r(e);
-			t && (F.value = t);
-		}, B, V, H = () => {
-			clearTimeout(V);
+		}, P = x(!1), F = c(() => (h.text ?? (P.value ? N(A.default?.({})) : "")).replace(/\s+/g, " ").trim()), I = x(), ne = c(() => h.activator != null), re = E("popover"), ie = c(() => i(re.value)), L = t(m), R = (e) => {
+			let t = i(e);
+			t && (I.value = t);
+		}, z, B, V = () => {
+			clearTimeout(B);
+		}, H = () => {
+			clearTimeout(z), clearTimeout(B), m.value = !1;
 		}, U = () => {
-			clearTimeout(B), clearTimeout(V), p.value = !1;
+			clearTimeout(z), clearTimeout(B), B = setTimeout(H, 50);
 		}, W = () => {
-			clearTimeout(B), clearTimeout(V), V = setTimeout(U, 50);
-		}, G = () => {
-			H(), !(p.value || m.disabled) && (B = setTimeout(() => {
-				p.value = !0;
-			}, m.delay));
+			V(), !(m.value || h.disabled) && (z = setTimeout(() => {
+				m.value = !0;
+			}, h.delay));
+		}, G = (e) => {
+			e.key === "Escape" && H();
 		}, K = (e) => {
-			e.key === "Escape" && U();
-		}, q = (e) => {
-			e.currentTarget?.matches(":focus-visible") && G();
+			e.currentTarget?.matches(":focus-visible") && W();
 		};
-		D(p, (e) => {
-			e ? document.addEventListener("keydown", K) : document.removeEventListener("keydown", K);
-		}), D(() => m.disabled, (e) => {
-			e && U();
-		}), D(() => m.activator, (e) => {
-			e && z(e);
+		D(m, (e) => {
+			e ? document.addEventListener("keydown", G) : document.removeEventListener("keydown", G);
+		}), D(() => h.disabled, (e) => {
+			e && H();
+		}), D(() => h.activator, (e) => {
+			e && R(e);
 		}, { immediate: !0 });
-		let J = null;
-		D(F, (e) => {
-			J &&= (J(), null), e && (e.addEventListener("mouseenter", G, { passive: !0 }), e.addEventListener("mouseleave", W, { passive: !0 }), e.addEventListener("focus", q, { passive: !0 }), e.addEventListener("blur", U, { passive: !0 }), J = () => {
-				e.removeEventListener("mouseenter", G), e.removeEventListener("mouseleave", W), e.removeEventListener("focus", q), e.removeEventListener("blur", U);
+		let q = null;
+		D(I, (e) => {
+			q &&= (q(), null), e && (e.addEventListener("mouseenter", W, { passive: !0 }), e.addEventListener("mouseleave", U, { passive: !0 }), e.addEventListener("focus", K, { passive: !0 }), e.addEventListener("blur", H, { passive: !0 }), q = () => {
+				e.removeEventListener("mouseenter", W), e.removeEventListener("mouseleave", U), e.removeEventListener("focus", K), e.removeEventListener("blur", H);
 			});
 		}, { immediate: !0 });
-		let Y = null;
-		D(L, (e) => {
-			Y &&= (Y(), null), e && (e.addEventListener("mouseenter", H, { passive: !0 }), e.addEventListener("mouseleave", W, { passive: !0 }), Y = () => {
-				e.removeEventListener("mouseenter", H), e.removeEventListener("mouseleave", W);
+		let J = null;
+		D(ie, (e) => {
+			J &&= (J(), null), e && (e.addEventListener("mouseenter", V, { passive: !0 }), e.addEventListener("mouseleave", U, { passive: !0 }), J = () => {
+				e.removeEventListener("mouseenter", V), e.removeEventListener("mouseleave", U);
 			});
 		}, { immediate: !0 });
-		let ae = /* @__PURE__ */ new Set([A, j]), X = null, Z = (e, t) => {
+		let ae = /* @__PURE__ */ new Set([j, M]), Y = null, X = (e, t) => {
 			let n = (e.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((e) => e && !ae.has(e));
 			t && n.push(t), n.length ? e.setAttribute("aria-describedby", n.join(" ")) : e.removeAttribute("aria-describedby");
-		}, Q = () => {
-			let e = F.value ?? null;
-			X && X !== e && Z(X, null), X = e, e && (P.value ? Z(e, j) : Z(e, R.value ? A : null));
+		}, Z = () => {
+			let e = I.value ?? null;
+			Y && Y !== e && X(Y, null), Y = e, e && (F.value ? X(e, M) : X(e, L.value ? j : null));
 		};
 		y(() => {
-			Q(), N.value = !0;
+			Z(), P.value = !0;
 		}), D([
-			F,
-			R,
-			P
-		], Q, { flush: "post" }), v(() => {
-			J?.(), Y?.(), X &&= (Z(X, null), null), U(), document.removeEventListener("keydown", K);
+			I,
+			L,
+			F
+		], Z, { flush: "post" }), v(() => {
+			q?.(), J?.(), Y &&= (X(Y, null), null), H(), document.removeEventListener("keydown", G);
 		});
-		let $ = c(() => {
-			if (!m.width) return;
-			let { value: e, unit: t } = a(m.width);
-			return t === "%" ? e : void 0;
-		}), { width: oe } = O(c(() => $.value == null ? void 0 : F.value), {
+		let oe = /^-?\d*\.?\d+$/, se = /^(-?\d*\.?\d+)%$/, Q = c(() => {
+			if (typeof h.width != "string") return;
+			let e = h.width.trim().match(se);
+			return e ? parseFloat(e[1]) : void 0;
+		}), { width: $ } = k(c(() => Q.value == null ? void 0 : I.value), {
 			width: 0,
 			height: 0
-		}, { box: "border-box" }), se = c(() => {
-			if (m.width) return $.value == null ? `${a(m.width).value}px` : F.value ? `${oe.value * ($.value / 100)}px` : "0px";
+		}, { box: "border-box" }), ce = c(() => {
+			if (h.width == null || h.width === "") return;
+			if (Q.value != null) return $.value ? `${$.value * (Q.value / 100)}px` : void 0;
+			if (typeof h.width == "number") return Number.isFinite(h.width) ? `${h.width}px` : void 0;
+			let e = h.width.trim();
+			return oe.test(e) ? `${e}px` : e;
 		});
-		return (e, t) => (b(), u(s, null, [
-			P.value ? (b(), u("span", {
+		return (e, t) => (b(), u(ee, null, [
+			F.value ? (b(), u("span", {
 				key: 0,
-				id: j,
-				class: "sr-only"
-			}, C(P.value), 1)) : l("", !0),
-			ie.value ? l("", !0) : S(e.$slots, "activator", g(h({ key: 1 }, {
-				props: { ref: z },
+				id: M,
+				class: "bb-sr-only"
+			}, C(F.value), 1)) : l("", !0),
+			ne.value ? l("", !0) : S(e.$slots, "activator", te(g({ key: 1 }, {
+				props: { ref: R },
 				disabled: e.disabled,
-				open: p.value,
+				open: m.value,
 				placement: e.placement
 			}))),
-			f(te, h({
+			p(o, g({
 				ref: "popover",
-				modelValue: p.value,
-				"onUpdate:modelValue": t[0] ||= (e) => p.value = e,
-				anchor: F.value,
+				modelValue: m.value,
+				"onUpdate:modelValue": t[0] ||= (e) => m.value = e,
+				anchor: I.value,
 				"arrow-padding": e.arrowPadding,
 				boundary: e.boundary,
 				class: ["bb-tooltip", { [`bb-tooltip--${e.variant}`]: !0 }],
@@ -137,12 +140,12 @@ var k = /*@__PURE__*/ p({
 				tag: "span",
 				"transition-duration": e.transitionDuration
 			}, e.$attrs), {
-				default: re(() => [d("span", {
-					id: A,
+				default: O(() => [d("span", {
+					id: j,
 					class: "bb-tooltip__content",
 					role: "tooltip",
-					style: _({ width: se.value })
-				}, [S(e.$slots, "default", {}, () => [ne(C(e.text), 1)])], 4)]),
+					style: _({ "--max-w": ce.value })
+				}, [S(e.$slots, "default", {}, () => [f(C(e.text), 1)])], 4)]),
 				_: 3
 			}, 16, [
 				"modelValue",
@@ -160,4 +163,4 @@ var k = /*@__PURE__*/ p({
 	}
 });
 //#endregion
-export { k as default };
+export { A as default };

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

@@ -88,7 +88,14 @@ export type BbTooltipProps = {
      */
     delay?: number;
     /**
-     * Width of the tooltip bubble in pixels, or as a percentage of the activator.
+     * Caps the width of the tooltip bubble: it wraps at this measure but still
+     * shrinks to its text, so a short hint never sits in an oversized bubble.
+     * A bare number is read as pixels, a percentage is measured against the
+     * activator, and any other CSS length (`'20rem'`, `'min(320px, 90vw)'`)
+     * is passed through.
+     *
+     * Replaces the default cap of `40ch`, which is also reachable in CSS as
+     * `--max-w` on the tooltip root.
      */
     width?: number | string;
 };

package/dist/components/ChipsBox/ChipsBox.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import { hash as n } from "../../utilities/functions/hash.js";
 import { Fragment as r, computed as i, createBlock as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, normalizeClass as u, openBlock as d, ref as f, renderList as p, toDisplayString as m, watch as h, withCtx as g, withModifiers as _ } from "vue";
 //#region src/components/ChipsBox/ChipsBox.vue?vue&type=script&setup=true&lang.ts
 var v = {
-	class: "sr-only",
+	class: "bb-sr-only",
 	role: "status"
 }, y = /*@__PURE__*/ l({
 	__name: "ChipsBox",

package/dist/components/CommaBox/CommaBox.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { hash as t } from "../../utilities/functions/hash.js";
 import { Fragment as n, computed as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, ref as l, renderList as u, toDisplayString as d, watch as f } from "vue";
 //#region src/components/CommaBox/CommaBox.vue?vue&type=script&setup=true&lang.ts
 var p = {
-	class: "sr-only",
+	class: "bb-sr-only",
 	role: "status"
 }, m = /*@__PURE__*/ o({
 	__name: "CommaBox",

package/dist/components/CommonInputWrapper/CommonInputWrapper.vue.d.ts

@@ -7,6 +7,7 @@ declare const __VLS_base: import('vue').DefineComponent<CommonInputWrapperProps,
     "onClick:clear"?: (() => any) | undefined;
     "onContainer:click"?: (() => any) | undefined;
 }>, {
+    variant: import('../../index').InputVariantType;
     hasValue: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/CommonInputWrapper/CommonInputWrapper.vue_vue_type_script_setup_true_lang.js

@@ -29,7 +29,8 @@ var b = {
 		"prepend:icon": {},
 		preventFocus: { type: Boolean },
 		reserveAppendSpace: { type: Boolean },
-		readonly: { type: Boolean }
+		readonly: { type: Boolean },
+		variant: { default: "outline" }
 	},
 	emits: ["click:clear", "container:click"],
 	setup(f, { emit: S }) {
@@ -63,7 +64,8 @@ var b = {
 			"common-input-wrapper--errors": o.hasErrors,
 			"common-input-wrapper--warnings": k.value,
 			"common-input-wrapper--loading": o.loading,
-			"common-input-wrapper--readonly": o.readonly
+			"common-input-wrapper--readonly": o.readonly,
+			[`common-input-wrapper--${o.variant}`]: o.variant !== "none"
 		}]) }, [
 			_(o.$slots, "prepend-outer"),
 			u("span", {

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

@@ -1,4 +1,5 @@
 import { IconType } from '../../types/Icon';
+import { InputVariantType } from '../../types/InputVariant';
 export type CommonInputWrapperProps = {
     /**
      * Name of the icon to be added at the end of the input.
@@ -53,6 +54,15 @@ export type CommonInputWrapperProps = {
      * Whether the input is readonly.
      */
     readonly?: boolean;
+    /**
+     * Visual variant of the field box. Controls colours only — background,
+     * border colour, focus border — while height, padding and border WIDTH
+     * stay identical across variants, so switching one never reflows a form.
+     * Mirrors the equally named `BbButton` variants.
+     *
+     * @defaultValue `'outline'`
+     */
+    variant?: InputVariantType;
 };
 export type CommonInputWrapperEvents = {
     /**

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

@@ -38,7 +38,7 @@ var m = /*@__PURE__*/ s({
 				option: t
 			}), a("span", { class: c({
 				[`${e.classPrefix}-option__text`]: !0,
-				"sr-only": e.hideLabel
+				"bb-sr-only": e.hideLabel
 			}) }, [d(e.$slots, "label", {
 				checked: !!t.selected,
 				item: t.item,

package/dist/composables/useConfirm.d.ts

@@ -205,6 +205,28 @@ export declare const namedPortalRegistry: import('vue').Reactive<Map<string, ()
 export declare const registerNamedPortal: (name: string, fn: () => VNode[] | undefined) => () => boolean;
 /** Duration to wait before clearing state, matching BaseDialog transition. */
 export declare const TRANSITION_DURATION: number;
+/**
+ * Grace period before the zero-host warning fires.
+ *
+ * The check cannot be synchronous. A host mounted anywhere but the app root —
+ * a layout, say — unmounts and remounts across a route change, and a
+ * `confirm()` landing inside that gap is NOT broken: a late-mounting host
+ * renders the pending dialog and the promise settles normally (verified). So
+ * "no host right now" does not mean "no host is coming", and warning on it
+ * would be a false positive on every route transition.
+ *
+ * Waiting also removes the need to guess. At fire time we re-read the real
+ * state — a host mounted, or the promise settled — and stay quiet if either is
+ * true, so the delay only ever has to be long enough for a slow async layout
+ * chunk to arrive. That makes a generous value strictly safer than a tight
+ * one; there is no false-positive risk left to trade against.
+ *
+ * This supersedes the 2026-07-30 `hostEverMounted` latch, which suppressed the
+ * warning for the whole process once ANY host had ever mounted. That silenced
+ * exactly the case a non-root host produces: mounted once, gone now, promise
+ * hangs with no diagnostic.
+ */
+export declare const NO_HOST_WARNING_DELAY = 1000;
 /**
  * Called by `<BbConfirm>` on mount. Internal — not re-exported from
  * `src/index.ts`. Returns the host count including this one (for the