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

package/dist/components/BbBadge/badgeButtonContext.d.ts

@@ -1,5 +1,18 @@
-import { ComputedRef } from 'vue';
 import { IconType } from '../../types/Icon';
+/**
+ * A read-only view of one piece of the host's state.
+ *
+ * Deliberately NOT `ComputedRef`: the badge publishes seven of these and a
+ * table cell can hold several badges, so seven `computed()` effects per badge
+ * per row was pure ceremony — every one of them is a bare prop read with
+ * nothing to memoize. A getter is tracked exactly the same way when the
+ * consumer reads it inside its own render effect, and costs nothing to create.
+ * Shaped as `{ value }` so every call site reads `host.x.value`, as it did
+ * when these were refs.
+ */
+export type HostValue<T> = {
+    readonly value: T;
+};
 /**
  * State `BbBadge` publishes to its subtree. `BadgeBodyContent` renders the
  * badge's leading side from it — identically whether the body wrapper is the
@@ -8,20 +21,20 @@ import { IconType } from '../../types/Icon';
  */
 export type BadgeHostContext = {
     /** `icon`-mode glyph; when set the label renders visually hidden. */
-    icon: ComputedRef<IconType | undefined>;
-    prependIcon: ComputedRef<IconType | undefined>;
-    appendIcon: ComputedRef<IconType | undefined>;
-    loading: ComputedRef<boolean>;
+    icon: HostValue<IconType | undefined>;
+    prependIcon: HostValue<IconType | undefined>;
+    appendIcon: HostValue<IconType | undefined>;
+    loading: HostValue<boolean>;
     /** Whether the loading spinner takes the leading slot (BbButton convention). */
-    spinnerLeads: ComputedRef<boolean>;
+    spinnerLeads: HostValue<boolean>;
     /** Whether it takes the trailing slot instead (a sole `append:icon`). */
-    spinnerTrails: ComputedRef<boolean>;
+    spinnerTrails: HostValue<boolean>;
     /**
      * Whether the badge renders a clear control. It owns the trailing side, and
      * the append icon joins it there to share the hover swap — so the body keeps
      * the append icon only when the badge is *not* clearable.
      */
-    clearable: ComputedRef<boolean>;
+    clearable: HostValue<boolean>;
 };
 export declare const provideBadgeHost: (context: BadgeHostContext) => void;
 export declare const useBadgeHost: () => BadgeHostContext | null;

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

@@ -34,8 +34,14 @@ export type BbBadgeProps = {
      */
     clearable?: boolean;
     /**
-     * Accessible label for the clear button. Falls back to the localized
-     * `badge.clearLabel` key.
+     * Accessible label for the clear button.
+     *
+     * Rarely needed: unset, the name is **composed** from the localized
+     * `badge.clearLabel` verb and the badge's own text — "Remove Italy", not a
+     * bare "Remove" — which is already the right name in almost every case.
+     * Composition is skipped when a `BbBadgeButton` owns the body (the verb
+     * then stands alone, so the two controls do not both announce the label).
+     * Set this only to override that composed name outright.
      */
     clearableLabel?: string;
     /**

package/dist/components/BbBaseButton/BbBaseButton.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
-import { useFrameworkDetection as e } from "../../composables/useFrameworkDetection.js";
-import t from "./RouterComponent.vue.js";
-import { useHydrated as n } from "../../composables/useHydrated.js";
-import { useInertiaPage as r } from "../../composables/useInertiaPage.js";
-import { config as i } from "virtual:bitboss-ui/config";
+import { useConfig as e } from "../../composables/useConfig.js";
+import { useFrameworkDetection as t } from "../../composables/useFrameworkDetection.js";
+import n from "./RouterComponent.vue.js";
+import { useHydrated as r } from "../../composables/useHydrated.js";
+import { useInertiaPage as i } from "../../composables/useInertiaPage.js";
 import { computed as a, createBlock as o, createElementBlock as s, createTextVNode as c, defineComponent as l, mergeProps as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, withCtx as h } from "vue";
 //#region src/components/BbBaseButton/BbBaseButton.vue?vue&type=script&setup=true&lang.ts
 var g = "http://localhost", _ = /*@__PURE__*/ l({
@@ -60,7 +60,7 @@ var g = "http://localhost", _ = /*@__PURE__*/ l({
 		viewTransition: { type: Boolean }
 	},
 	setup(l) {
-		let _ = l, { isInertia: v, isNuxt: y } = e(), { isHydrated: b } = n(), { getPageUrl: x } = r(), S = typeof window < "u", C = S ? window.location.origin : null, w = (e, t) => {
+		let _ = l, v = e(), { isInertia: y, isNuxt: b } = t(), { isHydrated: x } = r(), { getPageUrl: S } = i(), C = typeof window < "u", w = C ? window.location.origin : null, T = (e, t) => {
 			let n = e.trim();
 			if (!n) return !1;
 			if (n.startsWith("#") || n.startsWith("//")) return !0;
@@ -71,52 +71,52 @@ var g = "http://localhost", _ = /*@__PURE__*/ l({
 			} catch {
 				return !0;
 			}
-		}, T = (e) => e === "/" ? e : e.replace(/\/+$/, ""), E = a(() => {
-			let e = x();
+		}, E = (e) => e === "/" ? e : e.replace(/\/+$/, ""), D = a(() => {
+			let e = S();
 			if (e) try {
-				return T(new URL(e, g).pathname);
+				return E(new URL(e, g).pathname);
 			} catch {
 				return;
 			}
-		}), D = a(() => !!(_.href && !w(_.href, C))), O = a(() => {
-			if (!D.value || !_.href) return;
-			let e = E.value ?? "/";
+		}), O = a(() => !!(_.href && !T(_.href, w))), k = a(() => {
+			if (!O.value || !_.href) return;
+			let e = D.value ?? "/";
 			try {
-				return T(new URL(_.href, `${g}${e}`).pathname);
+				return E(new URL(_.href, `${g}${e}`).pathname);
 			} catch {
 				return;
 			}
-		}), k = a(() => S && b.value ? T(window.location.pathname) : void 0), A = a(() => {
-			if (!_.href || w(_.href, C)) return;
-			let e = k.value ?? "/";
+		}), A = a(() => C && x.value ? E(window.location.pathname) : void 0), j = a(() => {
+			if (!_.href || T(_.href, w)) return;
+			let e = A.value ?? "/";
 			try {
-				return T(new URL(_.href, `${g}${e}`).pathname);
+				return E(new URL(_.href, `${g}${e}`).pathname);
 			} catch {
 				return;
 			}
-		}), j = a(() => v ? E.value : k.value), M = a(() => v ? O.value : A.value), N = a(() => {
+		}), M = a(() => y ? D.value : A.value), N = a(() => y ? k.value : j.value), P = a(() => {
 			if (_.to) return !1;
-			let e = j.value, t = M.value;
+			let e = M.value, t = N.value;
 			return !e || !t ? !1 : t === e;
-		}), P = a(() => {
+		}), F = a(() => {
 			if (_.to) return !1;
-			let e = j.value, t = M.value;
+			let e = M.value, t = N.value;
 			return !e || !t ? !1 : t === "/" ? e.startsWith("/") : e === t || e.startsWith(`${t}/`);
-		}), F = a(() => !!(_.href && v && D.value && !_.disabled && !_.target && !_.download && !_.external || _.to && !_.disabled)), I = a(() => !!(_.href || _.to && _.disabled)), L = a(() => _.activeClass ?? i.linkActiveClass), R = a(() => _.exactActiveClass ?? i.linkExactActiveClass), z = a(() => ({
+		}), I = a(() => !!(_.href && y && O.value && !_.disabled && !_.target && !_.download && !_.external || _.to && !_.disabled)), L = a(() => !!(_.href || _.to && _.disabled)), R = a(() => _.activeClass ?? v.linkActiveClass), z = a(() => _.exactActiveClass ?? v.linkExactActiveClass), B = a(() => ({
 			"bb-base-button": !0,
 			"bb-base-button--block": _.block,
 			"bb-base-button--disabled": _.disabled,
-			[L.value]: P.value,
-			[R.value]: N.value
-		})), B = a(() => {
+			[R.value]: F.value,
+			[z.value]: P.value
+		})), V = a(() => {
 			let e = _.rel?.trim() ?? "";
 			if (!_.target || _.target === "_self") return e || void 0;
 			let t = new Set(e.split(/\s+/).filter(Boolean));
 			return t.add("noopener"), t.add("noreferrer"), Array.from(t).join(" ");
-		}), V = () => ({
+		}), H = () => ({
 			disabled: _.disabled,
 			type: _.type
-		}), H = () => {
+		}), U = () => {
 			if (_.disabled) return {
 				"aria-disabled": !0,
 				role: "link",
@@ -125,12 +125,12 @@ var g = "http://localhost", _ = /*@__PURE__*/ l({
 			};
 			let e = {
 				href: _.href,
-				rel: B.value,
+				rel: V.value,
 				target: _.target,
 				download: _.download === !0 ? "" : (_.download ?? void 0) || void 0
 			};
-			return N.value && (e["aria-current"] = _.ariaCurrentValue ?? "page"), e;
-		}, U = () => ({
+			return P.value && (e["aria-current"] = _.ariaCurrentValue ?? "page"), e;
+		}, W = () => ({
 			data: _.data,
 			async: _.async,
 			cacheFor: _.cacheFor,
@@ -159,32 +159,32 @@ var g = "http://localhost", _ = /*@__PURE__*/ l({
 			preserveState: _.preserveState,
 			queryStringArrayFormat: _.queryStringArrayFormat,
 			replace: _.replace
-		}), W = () => ({
-			activeClass: L.value,
+		}), G = () => ({
+			activeClass: R.value,
 			ariaCurrentValue: _.ariaCurrentValue,
-			exactActiveClass: R.value,
-			...y ? { external: _.external } : {},
-			rel: B.value,
+			exactActiveClass: z.value,
+			...b ? { external: _.external } : {},
+			rel: V.value,
 			replace: _.replace,
 			target: _.target,
 			to: _.to
-		}), G = a(() => _.tag ?? "button"), K = a(() => G.value === "button" ? V() : {}), q = a(() => H()), J = a(() => W()), Y = a(() => v ? {
-			...q.value,
-			...U()
-		} : J.value);
-		return (e, n) => F.value ? (d(), o(t, u({
+		}), K = a(() => _.tag ?? "button"), q = a(() => K.value === "button" ? H() : {}), J = a(() => U()), Y = a(() => G()), X = a(() => y ? {
+			...J.value,
+			...W()
+		} : Y.value);
+		return (e, t) => I.value ? (d(), o(n, u({
 			key: 0,
-			class: z.value
-		}, Y.value), {
+			class: B.value
+		}, X.value), {
 			default: h(() => [f(e.$slots, "default", {}, () => [c(m(e.text), 1)])]),
 			_: 3
-		}, 16, ["class"])) : I.value ? (d(), s("a", u({
+		}, 16, ["class"])) : L.value ? (d(), s("a", u({
 			key: 1,
-			class: z.value
-		}, q.value), [f(e.$slots, "default", {}, () => [c(m(e.text), 1)])], 16)) : (d(), o(p(G.value), u({
+			class: B.value
+		}, J.value), [f(e.$slots, "default", {}, () => [c(m(e.text), 1)])], 16)) : (d(), o(p(K.value), u({
 			key: 2,
-			class: z.value
-		}, K.value), {
+			class: B.value
+		}, q.value), {
 			default: h(() => [f(e.$slots, "default", {}, () => [c(m(e.text), 1)])]),
 			_: 3
 		}, 16, ["class"]));

package/dist/components/BbBaseButton/RouterComponent.vue_vue_type_script_setup_true_lang.js

@@ -1,25 +1,25 @@
-import { useLogger as e } from "../../composables/useLogger.js";
-import { useFrameworkDetection as t } from "../../composables/useFrameworkDetection.js";
-import { config as n } from "virtual:bitboss-ui/config";
+import { useConfig as e } from "../../composables/useConfig.js";
+import { useLogger as t } from "../../composables/useLogger.js";
+import { useFrameworkDetection as n } from "../../composables/useFrameworkDetection.js";
 import { createBlock as r, defineComponent as i, getCurrentInstance as a, openBlock as o, renderSlot as s, resolveComponent as c, resolveDynamicComponent as l, unref as u, withCtx as d } from "vue";
 import { InertiaLink as f } from "virtual:bitboss-ui/link";
 //#region src/components/BbBaseButton/RouterComponent.vue?vue&type=script&setup=true&lang.ts
 var p = /*@__PURE__*/ i({
 	__name: "RouterComponent",
 	setup(i) {
-		let { isInertia: p, isNuxt: m } = t(), h;
-		if (p) {
-			if (h = a()?.appContext.components?.[n.inertiaLinkName] ?? f, !h) {
-				let { warn: t } = e();
-				t(`Inertia link component "${n.inertiaLinkName}" could not be resolved, and "@inertiajs/vue3" is not installed in this app. Install it, register a link component globally under the name "${n.inertiaLinkName}", or set the bitboss-ui config key "inertiaLinkName" to the name you do register.`), h = n.inertiaLinkName;
+		let p = e(), { isInertia: m, isNuxt: h } = n(), g;
+		if (m) {
+			if (g = a()?.appContext.components?.[p.inertiaLinkName] ?? f, !g) {
+				let { warn: e } = t();
+				e(`Inertia link component "${p.inertiaLinkName}" could not be resolved, and "@inertiajs/vue3" is not installed in this app. Install it, register a link component globally under the name "${p.inertiaLinkName}", or set the bitboss-ui config key "inertiaLinkName" to the name you do register.`), g = p.inertiaLinkName;
 			}
-		} else if (m) {
-			if (h = c(n.nuxtLinkName), typeof h == "string") {
-				let { warn: t } = e();
-				t(`Nuxt link component "${n.nuxtLinkName}" could not be resolved. Ensure you app registers a link component with the name "${n.nuxtLinkName}" or set bitboss-ui config key "nuxtLinkName" to the correct value globally.`);
+		} else if (h) {
+			if (g = c(p.nuxtLinkName), typeof g == "string") {
+				let { warn: e } = t();
+				e(`Nuxt link component "${p.nuxtLinkName}" could not be resolved. Ensure you app registers a link component with the name "${p.nuxtLinkName}" or set bitboss-ui config key "nuxtLinkName" to the correct value globally.`);
 			}
-		} else h = "router-link";
-		return (e, t) => (o(), r(l(u(h)), null, {
+		} else g = "router-link";
+		return (e, t) => (o(), r(l(u(g)), null, {
 			default: d(() => [s(e.$slots, "default")]),
 			_: 3
 		}));

package/dist/components/BbBaseCheckboxGroup/BbBaseCheckboxGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { useLogger as e } from "../../composables/useLogger.js";
-import { useItemsGetter as t } from "../../composables/useItemsGetter.js";
-import { hash as n } from "../../utilities/functions/hash.js";
+import { hash as t } from "../../utilities/functions/hash.js";
+import { useItemsGetter as n } from "../../composables/useItemsGetter.js";
 import { useHashedWatcher as r } from "../../composables/useHashedWatcher.js";
 import i from "../BbBaseCheckbox/BbBaseCheckbox.vue.js";
 import a from "../OptionsContainer/OptionsContainer.vue.js";
@@ -69,54 +69,56 @@ var D = /*@__PURE__*/ g({
 		});
 		let j = T("container"), { active: M } = u(j);
 		d(M, () => k("inactive")), f(M, () => k("active"));
-		let { getter: N, items: P, loading: F } = t({ items: C(O, "items") }), I = () => {
-			O.enforceCoherence && !W.value && k("update:modelValue", G.value);
-		}, { hasPrefilled: L } = l({
+		let { getter: N, clientReproducible: P, hydratedFromSsr: F, items: I, loading: L } = n({ items: C(O, "items") }), R = () => {
+			O.enforceCoherence && !K.value && k("update:modelValue", q.value);
+		}, { hasPrefilled: z } = l({
+			alreadyLoaded: F,
+			clientReproducible: P,
 			trigger: !0,
 			currentValue: O.modelValue,
 			multiple: O.multiple,
 			fn: async (e) => {
-				await N(e, O.modelValue), I();
+				await N(e, O.modelValue), R();
 			}
-		}), R = p(() => [].concat(O.modelValue)), { data: z } = o({ items: R }), { options: B } = s({
+		}), B = p(() => [].concat(O.modelValue)), { data: V } = o({ items: B }), { options: H } = s({
 			disabled: C(O, "disabled"),
-			items: P,
+			items: I,
 			itemText: O.itemText,
 			itemValue: O.itemValue,
 			max: O.max,
 			selectable: C(O, "selectable"),
-			selectedIndexedByHash: z
-		}), V = (e) => {
+			selectedIndexedByHash: V
+		}), U = (e) => {
 			if (O.multiple) {
-				k("update:modelValue", R.value.concat(e.value));
+				k("update:modelValue", B.value.concat(e.value));
 				return;
 			}
 			k("update:modelValue", e.value);
-		}, H = (e) => {
+		}, W = (e) => {
 			if (!O.multiple) {
 				k("update:modelValue", null);
 				return;
 			}
-			let t = { ...z.value };
+			let t = { ...V.value };
 			delete t[e.valueHash], k("update:modelValue", Object.values(t));
-		}, { data: U } = o({
-			items: B,
+		}, { data: G } = o({
+			items: H,
 			key: "valueHash"
-		}), { coherent: W, coherentValue: G } = c({
+		}), { coherent: K, coherentValue: q } = c({
 			modelValue: C(O, "modelValue"),
 			multiple: O.multiple,
-			iteratee: (e) => !!U.value[n(e)]
-		}), K = 0;
+			iteratee: (e) => !!G.value[t(e)]
+		}), J = 0;
 		r(() => O.modelValue, async () => {
-			K++, W.value || (await N(!0, O.modelValue), I()), K--;
+			J++, K.value || (await N(!0, O.modelValue), R()), J--;
 		}, { debounce: O.modelValueDebounceTime }), r(() => [O.dependencies, O.items], async () => {
-			L.value && (K++, await N(!0, O.modelValue), K === 1 && I(), K--);
+			z.value && (J++, await N(!0, O.modelValue), J === 1 && R(), J--);
 		}, { debounce: O.depsDebounceTime });
-		let q = (e) => {
+		let Y = (e) => {
 			if (O.id) return [O.id, e.valueHash].filter(Boolean).join("-");
-		}, J = (e, t) => {
-			k("change", e), t.selected ? H(t) : V(t);
-		}, Y = {
+		}, X = (e, t) => {
+			k("change", e), t.selected ? W(t) : U(t);
+		}, Z = {
 			onBlur: (e) => k("blur", e),
 			onClick: (e) => k("click", e),
 			onFocus: (e) => k("focus", e),
@@ -133,17 +135,17 @@ var D = /*@__PURE__*/ g({
 			"has-errors": e.hasErrors,
 			"has-warning": e.hasWarning,
 			"hide-label": e.hideLabel,
-			loading: !!w(F),
+			loading: !!w(L),
 			"loading-text": e.loadingText,
 			"no-data-text": e.noDataText,
-			options: w(B)
+			options: w(H)
 		}, {
 			prepend: E(() => [S(e.$slots, "prepend")]),
 			loading: E(() => [S(e.$slots, "loading")]),
 			"no-data": E(() => [S(e.$slots, "no-data")]),
 			label: E((t) => [S(e.$slots, "label", y(_(t)))]),
 			input: E(({ option: t, index: n }) => [h(i, v({
-				id: q(t),
+				id: Y(t),
 				"aria-describedby": e.ariaDescribedby,
 				autofocus: e.autofocus && !n,
 				checked: t.selected,
@@ -153,7 +155,7 @@ var D = /*@__PURE__*/ g({
 				name: e.name,
 				readonly: e.readonly,
 				"true-value": t.value
-			}, Y, { onChange: (e) => J(e, t) }), {
+			}, Z, { onChange: (e) => X(e, t) }), {
 				icon: E((n) => [S(e.$slots, "icon", v({
 					item: t.item,
 					text: t.text

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

@@ -38,7 +38,7 @@ export type BaseCheckboxGroupProps<T = any> = {
     /**
      * Enforces that `modelValue` contains only values present in `items`.
      * Incoherent values are removed and `update:modelValue` is emitted with a
-     * coherent array. Please check out {@link https://ui-components-docs.vercel.app/it/guides/coherence | the docs} for more information.
+     * coherent array. Please check out {@link https://ui-components.bitboss.it/it/guides/coherence | the docs} for more information.
      * @defaultValue `false`
      */
     enforceCoherence?: boolean;
@@ -148,7 +148,7 @@ export type BaseCheckboxGroupEvents = {
      */
     (e: 'blur', event: FocusEvent): void;
     /**
-     * Emitted when a checkbox option is toggled.
+     * Emitted when an option is toggled.
      * Forwards the original DOM `Event` from the checkbox input.
      */
     (e: 'change', event: Event): void;