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

package/dist/ai/source/BbTabs.md

@@ -150,13 +150,12 @@ export type BbTabsInertiaOptions = {
 		| boolean
 		| ((props: Record<string, unknown>) => boolean)
 		| null;
-	/**
-	 * Uses history replacement instead of push navigation.
-	 *
-	 * Prefer `replace` whenever `navigation` is on: the URL still carries the
-	 * active tab (deep-linkable, survives reload), but switching tabs does not
-	 * stack a history entry per click, so Back leaves the page instead of
-	 * walking the user backwards through every tab they visited.
+	/*
+	 * Documented on `BbTabsProps.replace` — NOT a JSDoc block here on purpose.
+	 * `BbTabsProps` and `BbTabsItem` both intersect this type and re-declare
+	 * `replace`, and vue-component-meta CONCATENATES the JSDoc of every
+	 * declaration it sees, so a doc comment in both places publishes the same
+	 * paragraph twice in the API table. Keep prose on the concrete surface.
 	 */
 	replace?: boolean;
 };

package/dist/ai/source/BbTabsList.md

@@ -325,13 +325,12 @@ export type BbTabsInertiaOptions = {
 		| boolean
 		| ((props: Record<string, unknown>) => boolean)
 		| null;
-	/**
-	 * Uses history replacement instead of push navigation.
-	 *
-	 * Prefer `replace` whenever `navigation` is on: the URL still carries the
-	 * active tab (deep-linkable, survives reload), but switching tabs does not
-	 * stack a history entry per click, so Back leaves the page instead of
-	 * walking the user backwards through every tab they visited.
+	/*
+	 * Documented on `BbTabsProps.replace` — NOT a JSDoc block here on purpose.
+	 * `BbTabsProps` and `BbTabsItem` both intersect this type and re-declare
+	 * `replace`, and vue-component-meta CONCATENATES the JSDoc of every
+	 * declaration it sees, so a doc comment in both places publishes the same
+	 * paragraph twice in the API table. Keep prose on the concrete surface.
 	 */
 	replace?: boolean;
 };

package/dist/ai/source/BbTabsPanes.md

@@ -115,13 +115,12 @@ export type BbTabsInertiaOptions = {
 		| boolean
 		| ((props: Record<string, unknown>) => boolean)
 		| null;
-	/**
-	 * Uses history replacement instead of push navigation.
-	 *
-	 * Prefer `replace` whenever `navigation` is on: the URL still carries the
-	 * active tab (deep-linkable, survives reload), but switching tabs does not
-	 * stack a history entry per click, so Back leaves the page instead of
-	 * walking the user backwards through every tab they visited.
+	/*
+	 * Documented on `BbTabsProps.replace` — NOT a JSDoc block here on purpose.
+	 * `BbTabsProps` and `BbTabsItem` both intersect this type and re-declare
+	 * `replace`, and vue-component-meta CONCATENATES the JSDoc of every
+	 * declaration it sees, so a doc comment in both places publishes the same
+	 * paragraph twice in the API table. Keep prose on the concrete surface.
 	 */
 	replace?: boolean;
 };

package/dist/ai/source/BbTabsRoot.md

@@ -119,13 +119,12 @@ export type BbTabsInertiaOptions = {
 		| boolean
 		| ((props: Record<string, unknown>) => boolean)
 		| null;
-	/**
-	 * Uses history replacement instead of push navigation.
-	 *
-	 * Prefer `replace` whenever `navigation` is on: the URL still carries the
-	 * active tab (deep-linkable, survives reload), but switching tabs does not
-	 * stack a history entry per click, so Back leaves the page instead of
-	 * walking the user backwards through every tab they visited.
+	/*
+	 * Documented on `BbTabsProps.replace` — NOT a JSDoc block here on purpose.
+	 * `BbTabsProps` and `BbTabsItem` both intersect this type and re-declare
+	 * `replace`, and vue-component-meta CONCATENATES the JSDoc of every
+	 * declaration it sees, so a doc comment in both places publishes the same
+	 * paragraph twice in the API table. Keep prose on the concrete surface.
 	 */
 	replace?: boolean;
 };

package/dist/ai/source/BbTag.md

@@ -74,17 +74,16 @@
 import BaseInputContainer from '../BbBaseInputContainer/BbBaseInputContainer.vue';
 import BaseTag from '../BbBaseTag/BbBaseTag.vue';
 import { ref, computed } from 'vue';
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
 import { removedPropsFor } from '@/deprecation/removedProps';
 import { warnRemovedAttrs } from '@/utilities/functions/warnRemovedAttrs';
 import type { BbTagProps, BbTagEvents, BbTagSlots } from './types';
-export type { BbTagProps, BbTagEvents, BbTagSlots };
 
 const props = defineProps<BbTagProps>();
-
 const emit = defineEmits<BbTagEvents>();
-
 defineSlots<BbTagSlots>();
+const config = useConfig();
+export type { BbTagProps, BbTagEvents, BbTagSlots };
 
 if (process.env.NODE_ENV !== 'production')
 	warnRemovedAttrs('BbTag', removedPropsFor('BbTag'));

package/dist/ai/source/BbTextInput.md

@@ -75,20 +75,19 @@ import { ref, computed } from 'vue';
 import BaseInputContainer from '../BbBaseInputContainer/BbBaseInputContainer.vue';
 import BaseTextInput from '../BbBaseTextInput/BbBaseTextInput.vue';
 import { useMobile } from '@/composables/useMobile';
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
 import { isNotEmpty } from '@/utilities/functions/isNotEmpty';
 import type {
 	BbTextInputProps,
 	BbTextInputEvents,
 	BbTextInputSlots,
 } from './types';
-export type { BbTextInputProps, BbTextInputEvents, BbTextInputSlots };
 
 const props = defineProps<BbTextInputProps>();
-
 const emit = defineEmits<BbTextInputEvents>();
-
 defineSlots<BbTextInputSlots>();
+const config = useConfig();
+export type { BbTextInputProps, BbTextInputEvents, BbTextInputSlots };
 
 const active = ref(false);
 const showHint = computed(() => props.persistentHint || active.value);

package/dist/ai/source/BbTextarea.md

@@ -70,20 +70,19 @@
 import { ref, computed } from 'vue';
 import BaseInputContainer from '../BbBaseInputContainer/BbBaseInputContainer.vue';
 import BaseTextarea from '../BbBaseTextarea/BbBaseTextarea.vue';
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
 import { isNotEmpty } from '@/utilities/functions/isNotEmpty';
 import type {
 	BbTextareaProps,
 	BbTextareaEvents,
 	BbTextareaSlots,
 } from './types';
-export type { BbTextareaProps, BbTextareaEvents, BbTextareaSlots };
 
 const props = defineProps<BbTextareaProps>();
-
 const emit = defineEmits<BbTextareaEvents>();
-
 defineSlots<BbTextareaSlots>();
+const config = useConfig();
+export type { BbTextareaProps, BbTextareaEvents, BbTextareaSlots };
 
 const active = ref(false);
 const showHint = computed(() => props.persistentHint || active.value);

package/dist/ai/source/BbTimePicker.md

@@ -94,7 +94,7 @@
 </template>
 
 <script setup lang="ts">
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { extractDomContainer } from '@/utilities/functions/extractDomContainer';
@@ -126,8 +126,11 @@ const props = withDefaults(defineProps<BbTimePickerProps>(), {
 });
 
 const emit = defineEmits<BbTimePickerEvents>();
+
 defineSlots<BbTimePickerSlots>();
 
+const config = useConfig();
+
 const { t } = useLocale();
 const { isMobile } = useMobile();
 const logger = useLogger();

package/dist/ai/source/BbTimePickerInput.md

@@ -75,7 +75,7 @@ import BaseTimePickerInput from '../BbBaseTimePickerInput/BbBaseTimePickerInput.
 import BaseInputContainer from '../BbBaseInputContainer/BbBaseInputContainer.vue';
 import type { BaseTimePickerInputEvents } from '../BbBaseTimePickerInput/types';
 import { ref, computed, onBeforeUnmount, onDeactivated } from 'vue';
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
 import { isNotEmpty } from '@/utilities/functions/isNotEmpty';
 import type {
 	BbTimePickerInputProps,
@@ -89,9 +89,13 @@ const props = withDefaults(defineProps<BbTimePickerInputProps>(), {
 	// default, while the valueless `adaptive` shorthand still means `true`.
 	adaptive: undefined,
 });
+
 const emit = defineEmits<BaseTimePickerInputEvents>();
+
 defineSlots<BbTimePickerInputSlots>();
 
+const config = useConfig();
+
 const active = ref(false);
 const showHint = computed(() => props.persistentHint || active.value);
 const hasValue = computed(() => isNotEmpty(props.modelValue));

package/dist/ai/source/BbToast.md

@@ -22,7 +22,7 @@ export type { BbToastProps } from './types';
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted } from 'vue';
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
 import {
 	toastState,
 	resolveToastPosition,
@@ -38,6 +38,8 @@ import type { BbToastProps } from './types';
 
 const props = defineProps<BbToastProps>();
 
+const config = useConfig();
+
 if (process.env.NODE_ENV !== 'production')
 	warnRemovedAttrs('BbToast', removedPropsFor('BbToast'));
 

package/dist/ai/source/BbTooltip.md

@@ -410,7 +410,11 @@ export type BbTooltipProps = {
 	 */
 	hideArrow?: boolean;
 	/**
-	 * The identifier of the component.
+	 * Seed for the tooltip's internal id. It is **prefixed** (`bb_<id>`) and set
+	 * on the inner content element, not on the root — so
+	 * `document.getElementById(theIdYouPassed)` finds nothing. Pass it to make
+	 * the generated id stable (SSR snapshots, tests), not to look the element
+	 * up.
 	 */
 	id?: string;
 	/**

package/dist/ai/source/CommonInputWrapper.md

@@ -298,6 +298,10 @@ export type CommonInputWrapperSlots = {
 .common-input-wrapper {
 	align-items: center;
 	display: inline-flex;
+	/* Grid/flex item: without this its automatic minimum is the trigger's
+	   min-content, which for a select is the whole nowrap placeholder string.
+	   See the note on `.bb-base-input-container`. */
+	min-width: 0;
 
 	&--active > .common-input-wrapper__inner {
 		border-color: var(--bb-primary);

package/dist/ai/source/CommonPopover.md

@@ -179,6 +179,12 @@ const { floatingStyles, placement, middlewareData, update } = useFloating(
 		placement: props.placement,
 		middleware,
 		strategy: 'fixed',
+		// Without this, floating-ui computes a position the moment both elements
+		// exist — for every CLOSED popover at mount (a menu button per table
+		// row is one computePosition per row). Positioning is owned by the
+		// `autoUpdate` below, which runs only while shown, and `toggle()` calls
+		// `update()` on open; so mount does nothing here.
+		whileElementsMounted: () => () => {},
 	}
 );
 

package/dist/ai/source/FlatListBox.md

@@ -93,12 +93,18 @@
 							<span class="bb-listbox__option-label">{{
 								optionsMeta[row.index].text
 							}}</span>
-							<BbIcon
-								aria-hidden="true"
-								class="bb-listbox__option-check"
-								:icon="checkIcon"
-							/>
 						</slot>
+						<!-- OUTSIDE the slot, mirroring BbDropdown's trailing region: the
+						`option` slot replaces the row's TEXT, never its selection state.
+						Nested inside, any custom row silently lost the check and had to
+						redraw it from the `selected` prop. Free to sit here: the glyph is
+						absolutely positioned (BbSelectPopover/index.css), so it costs the
+						slot no width and only a selected row pads short of it. -->
+						<BbIcon
+							aria-hidden="true"
+							class="bb-listbox__option-check"
+							:icon="checkIcon"
+						/>
 					</span>
 				</span>
 				<slot name="options:append"></slot>

package/dist/ai/source/GroupedListBox.md

@@ -133,12 +133,14 @@
 								<span class="bb-listbox__option-label">{{
 									optionsMetaIndexedById[option.valueHash].text
 								}}</span>
-								<BbIcon
-									aria-hidden="true"
-									class="bb-listbox__option-check"
-									:icon="checkIcon"
-								/>
 							</slot>
+							<!-- Outside the slot — see the note in FlatListBox: `option`
+							replaces the row's text, not its selection state. -->
+							<BbIcon
+								aria-hidden="true"
+								class="bb-listbox__option-check"
+								:icon="checkIcon"
+							/>
 						</span>
 					</span>
 				</span>

package/dist/components/BbAlert/BbAlert.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import { removedPropsFor as e } from "../../deprecation/removedProps.js";
 import { warnRemovedAttrs as t } from "../../utilities/functions/warnRemovedAttrs.js";
 import { transitions as n } from "../../utilities/misc/transitions.js";
-import r from "../BbIcon/BbIcon.vue.js";
-import { useLocale as i } from "../../composables/useLocale.js";
+import { useLocale as r } from "../../composables/useLocale.js";
+import i from "../BbIcon/BbIcon.vue.js";
 import a from "../ClearableButton/ClearableButton.vue.js";
 import { Transition as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, defineComponent as p, guardReactiveProps as m, mergeModels as h, normalizeClass as g, normalizeProps as _, normalizeStyle as v, openBlock as y, renderSlot as b, toDisplayString as x, unref as S, useModel as C, withCtx as w } from "vue";
 //#region src/components/BbAlert/BbAlert.vue?vue&type=script&setup=true&lang.ts
@@ -31,7 +31,7 @@ var T = ["aria-live", "role"], E = { class: "bb-alert__inner-container" }, D = {
 	setup(n) {
 		let p = C(n, "modelValue"), h = n;
 		process.env.NODE_ENV !== "production" && t("BbAlert", e("BbAlert"));
-		let { t: j } = i(), M = s(() => h.variant === "destructive" || h.variant === "warning"), N = s(() => h.role ?? (M.value ? "alert" : "status")), P = s(() => h.ariaLive ?? (M.value ? "assertive" : "polite")), F = () => {
+		let { t: j } = r(), M = s(() => h.variant === "destructive" || h.variant === "warning"), N = s(() => h.role ?? (M.value ? "alert" : "status")), P = s(() => h.ariaLive ?? (M.value ? "assertive" : "polite")), F = () => {
 			p.value = !1;
 		};
 		return (e, t) => (y(), c(o, { name: "bb-alert-transition" }, {
@@ -42,7 +42,7 @@ var T = ["aria-live", "role"], E = { class: "bb-alert__inner-container" }, D = {
 				class: g(["bb-alert", `bb-alert--${h.variant}`]),
 				role: N.value,
 				style: v({ "--transition-duration": `${h.transitionDuration}ms` })
-			}, [d("div", E, [d("div", D, [e.icon ? (y(), c(r, {
+			}, [d("div", E, [d("div", D, [e.icon ? (y(), c(i, {
 				key: 0,
 				class: "bb-alert__icon",
 				icon: e.icon,

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

@@ -66,7 +66,16 @@ export type BbAlertEvents =
 (e: 'update:modelValue', value: boolean) => void;
 /** Props exposed by the `title` slot. */
 export type BbAlertTitleSlotProps = {
-    /** The `title` prop value. */
+    /**
+     * The `title` prop's value — despite the scope being named `text`.
+     *
+     * Both slots name their payload `text` (each meaning "the text of THIS
+     * slot"), so `#title="{ text }"` gives you the title and
+     * `#text="{ text }"` gives you the body. Worth stating because the v2 bug
+     * this replaced was the opposite mix-up: v2's `#text` slot passed the
+     * *title*. Renaming the scope now would be another break, so the rule is
+     * simply: the payload belongs to the slot you are in.
+     */
     text: BbAlertProps['title'];
 };
 /** Props exposed by the `text` slot. */

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

@@ -1,6 +1,6 @@
 import { BbAvatarProps, BbAvatarSlots } from './types';
-export type { BbAvatarProps, BbAvatarSlots };
 type __VLS_Slots = BbAvatarSlots;
+export type { BbAvatarProps, BbAvatarSlots };
 declare const __VLS_base: import('vue').DefineComponent<BbAvatarProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BbAvatarProps> & Readonly<{}>, {
     size: number | ({
         size?: any;

package/dist/components/BbAvatar/BbAvatar.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,11 @@
-import { removedPropsFor as e } from "../../deprecation/removedProps.js";
-import { useLogger as t } from "../../composables/useLogger.js";
-import { warnRemovedAttrs as n } from "../../utilities/functions/warnRemovedAttrs.js";
-import { wait as r } from "../../utilities/functions/wait.js";
-import { parseSize as i } from "../../utilities/functions/parseSize.js";
-import a from "../BbIcon/BbIcon.vue.js";
-import o from "../../assets/svgs/user.svg_raw.js";
-import { config as s } from "virtual:bitboss-ui/config";
+import { useConfig as e } from "../../composables/useConfig.js";
+import { removedPropsFor as t } from "../../deprecation/removedProps.js";
+import { useLogger as n } from "../../composables/useLogger.js";
+import { warnRemovedAttrs as r } from "../../utilities/functions/warnRemovedAttrs.js";
+import { wait as i } from "../../utilities/functions/wait.js";
+import { parseSize as a } from "../../utilities/functions/parseSize.js";
+import o from "../BbIcon/BbIcon.vue.js";
+import s from "../../assets/svgs/user.svg_raw.js";
 import { computed as c, createCommentVNode as l, createElementBlock as u, createVNode as d, defineComponent as f, mergeProps as p, normalizeClass as m, normalizeStyle as h, onMounted as g, openBlock as _, ref as v, renderSlot as y, unref as b, watch as x } from "vue";
 //#region src/components/BbAvatar/BbAvatar.vue?vue&type=script&setup=true&lang.ts
 var S = [
@@ -25,52 +25,52 @@ var S = [
 		timeout: { default: 400 }
 	},
 	setup(f) {
-		let C = f;
-		process.env.NODE_ENV !== "production" && n("BbAvatar", e("BbAvatar"));
-		let w = t(), T = c(() => {
+		let C = f, w = e();
+		process.env.NODE_ENV !== "production" && r("BbAvatar", t("BbAvatar"));
+		let T = n(), E = c(() => {
 			if (C.size != null) try {
-				return i(C.size, s.iconDefaultSizes);
+				return a(C.size, w.iconDefaultSizes);
 			} catch {
-				return w.warn(`Invalid size: "${C.size}" in BbAvatar. Falling back to "md".`), `${s.iconDefaultSizes.md}px`;
+				return T.warn(`Invalid size: "${C.size}" in BbAvatar. Falling back to "md".`), `${w.iconDefaultSizes.md}px`;
 			}
-		}), E = c(() => {
+		}), D = c(() => {
 			let e = {};
-			return T.value && (e["--size"] = T.value), e;
-		}), D = c(() => !!(C.src || C.srcset) && !P.value), O = c(() => D.value && F.value && !N.value), k = c(() => !D.value || O.value), A = c(() => !k.value || !C.alt?.trim() ? {} : {
+			return E.value && (e["--size"] = E.value), e;
+		}), O = c(() => !!(C.src || C.srcset) && !F.value), k = c(() => O.value && I.value && !P.value), A = c(() => !O.value || k.value), j = c(() => !A.value || !C.alt?.trim() ? {} : {
 			role: "img",
 			"aria-label": C.alt.trim()
-		}), j = (e) => !(!e || !e.complete || e.naturalWidth === 0), M = v(null), N = v(!1), P = v(!1), F = v(!1);
+		}), M = (e) => !(!e || !e.complete || e.naturalWidth === 0), N = v(null), P = v(!1), F = v(!1), I = v(!1);
 		g(async () => {
-			D.value && !P.value && !N.value && M.value && (await r(C.timeout), F.value = !j(M.value));
+			O.value && !F.value && !P.value && N.value && (await i(C.timeout), I.value = !M(N.value));
 		});
-		let I = () => {
-			N.value = !0, P.value = !1, F.value = !1;
-		}, L = () => {
-			P.value = !0;
+		let L = () => {
+			P.value = !0, F.value = !1, I.value = !1;
+		}, R = () => {
+			F.value = !0;
 		};
 		return x(() => [C.src, C.srcset], () => {
-			N.value = !1, P.value = !1, F.value = !1;
+			P.value = !1, F.value = !1, I.value = !1;
 		}), (e, t) => (_(), u("span", {
 			class: "bb-avatar",
-			style: h(E.value)
-		}, [D.value ? (_(), u("img", {
+			style: h(D.value)
+		}, [O.value ? (_(), u("img", {
 			key: 0,
 			ref_key: "image",
-			ref: M,
+			ref: N,
 			alt: e.alt,
-			"aria-hidden": O.value || void 0,
-			class: m(["bb-avatar__img", { "bb-avatar__img--hidden": O.value }]),
+			"aria-hidden": k.value || void 0,
+			class: m(["bb-avatar__img", { "bb-avatar__img--hidden": k.value }]),
 			sizes: e.sizes,
 			src: e.src,
 			srcset: e.srcset,
-			onError: L,
-			onLoad: I
-		}, null, 42, S)) : l("", !0), k.value ? (_(), u("span", p({
+			onError: R,
+			onLoad: L
+		}, null, 42, S)) : l("", !0), A.value ? (_(), u("span", p({
 			key: 1,
 			class: "bb-avatar__fallback"
-		}, A.value), [y(e.$slots, "default", {}, () => [d(a, {
+		}, j.value), [y(e.$slots, "default", {}, () => [d(o, {
 			class: "bb-avatar__default-icon",
-			icon: b(o)
+			icon: b(s)
 		}, null, 8, ["icon"])])], 16)) : l("", !0)], 4));
 	}
 });

package/dist/components/BbBadge/BadgeBodyContent.vue_vue_type_script_setup_true_lang.js

@@ -2,33 +2,39 @@ import { useLogger as e } from "../../composables/useLogger.js";
 import t from "../BbIcon/BbIcon.vue.js";
 import n from "../BbSpinner/BbSpinner.vue.js";
 import { useBadgeHost as r } from "./badgeButtonContext.js";
-import i from "./BadgeAppendIcon.vue.js";
-import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, openBlock as d, renderSlot as f, unref as p } from "vue";
+import { Fragment as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, openBlock as u, renderSlot as d, unref as f } from "vue";
 //#region src/components/BbBadge/BadgeBodyContent.vue?vue&type=script&setup=true&lang.ts
-var m = { class: "bb-badge__content sr-only" }, h = { class: "bb-badge__content" }, g = /*@__PURE__*/ u({
+var p = { class: "bb-badge__content sr-only" }, m = { class: "bb-badge__content" }, h = /*@__PURE__*/ l({
 	__name: "BadgeBodyContent",
-	setup(u) {
-		let g = r() ?? e().throw("[BbBadge] internal body renderer mounted outside a badge — this is a bug.");
-		return (e, r) => p(g).icon.value ? (d(), c(a, { key: 0 }, [p(g).loading.value ? (d(), o(n, {
+	setup(l) {
+		let h = r() ?? e().throw("[BbBadge] internal body renderer mounted outside a badge — this is a bug.");
+		return (e, r) => f(h).icon.value ? (u(), s(i, { key: 0 }, [f(h).loading.value ? (u(), a(n, {
 			key: 0,
 			class: "bb-badge__icon"
-		})) : (d(), o(t, {
+		})) : (u(), a(t, {
 			key: 1,
 			class: "bb-badge__icon",
-			icon: p(g).icon.value
-		}, null, 8, ["icon"])), l("span", m, [f(e.$slots, "default")])], 64)) : (d(), c(a, { key: 1 }, [
-			p(g).spinnerLeads.value ? (d(), o(n, {
+			icon: f(h).icon.value
+		}, null, 8, ["icon"])), c("span", p, [d(e.$slots, "default")])], 64)) : (u(), s(i, { key: 1 }, [
+			f(h).spinnerLeads.value ? (u(), a(n, {
 				key: 0,
 				class: "bb-badge__prepend-icon"
-			})) : p(g).prependIcon.value ? (d(), o(t, {
+			})) : f(h).prependIcon.value ? (u(), a(t, {
 				key: 1,
 				class: "bb-badge__prepend-icon",
-				icon: p(g).prependIcon.value
-			}, null, 8, ["icon"])) : s("", !0),
-			l("span", h, [f(e.$slots, "default")]),
-			p(g).clearable.value ? s("", !0) : (d(), o(i, { key: 2 }))
+				icon: f(h).prependIcon.value
+			}, null, 8, ["icon"])) : o("", !0),
+			c("span", m, [d(e.$slots, "default")]),
+			f(h).clearable.value ? o("", !0) : (u(), s(i, { key: 2 }, [f(h).spinnerTrails.value ? (u(), a(n, {
+				key: 0,
+				class: "bb-badge__append-icon"
+			})) : f(h).appendIcon.value ? (u(), a(t, {
+				key: 1,
+				class: "bb-badge__append-icon",
+				icon: f(h).appendIcon.value
+			}, null, 8, ["icon"])) : o("", !0)], 64))
 		], 64));
 	}
 });
 //#endregion
-export { g as default };
+export { h as default };

package/dist/components/BbBadge/BbBadge.vue_vue_type_script_setup_true_lang.js

@@ -2,10 +2,10 @@ import { useId as e } from "../../composables/useId.js";
 import { removedPropsFor as t } from "../../deprecation/removedProps.js";
 import { useLogger as n } from "../../composables/useLogger.js";
 import { warnRemovedAttrs as r } from "../../utilities/functions/warnRemovedAttrs.js";
-import i from "../BbIcon/BbIcon.vue.js";
-import { useLocale as a } from "../../composables/useLocale.js";
-import { provideBadgeHost as o } from "./badgeButtonContext.js";
-import s from "./BadgeAppendIcon.vue.js";
+import { useLocale as i } from "../../composables/useLocale.js";
+import a from "../BbIcon/BbIcon.vue.js";
+import o from "../BbSpinner/BbSpinner.vue.js";
+import { provideBadgeHost as s } from "./badgeButtonContext.js";
 import c from "./BadgeBodyContent.vue.js";
 import l from "./BbBadgeButton.vue.js";
 import u from "../../assets/svgs/clear.svg_raw.js";
@@ -44,15 +44,29 @@ var O = ["id"], k = {
 			"lg",
 			"xl",
 			"2xl"
-		], { t: L } = a(), R = n(), z = f(() => I.includes(N.size) ? N.size : (R.warn(`Invalid size: "${N.size}" in BbBadge. Expected one of: ${I.join(", ")}. Falling back to "md".`), "md")), B = f(() => !!N["append:icon"] && !N["prepend:icon"]), V = (e) => Array.isArray(e) && e.some((e) => y(e) && (e.type === l || e.type === d && V(e.children))), H = () => V(F.default?.({}));
-		o({
-			icon: f(() => N.icon),
-			prependIcon: f(() => N["prepend:icon"]),
-			appendIcon: f(() => N["append:icon"]),
-			loading: f(() => !!N.loading),
-			spinnerLeads: f(() => !!N.loading && !B.value),
-			spinnerTrails: f(() => !!N.loading && B.value),
-			clearable: f(() => !!N.clearable)
+		], { t: L } = i(), R = n(), z = f(() => I.includes(N.size) ? N.size : (R.warn(`Invalid size: "${N.size}" in BbBadge. Expected one of: ${I.join(", ")}. Falling back to "md".`), "md")), B = () => !!N["append:icon"] && !N["prepend:icon"], V = (e) => Array.isArray(e) && e.some((e) => y(e) && (e.type === l || e.type === d && V(e.children))), H = () => V(F.default?.({}));
+		s({
+			icon: { get value() {
+				return N.icon;
+			} },
+			prependIcon: { get value() {
+				return N["prepend:icon"];
+			} },
+			appendIcon: { get value() {
+				return N["append:icon"];
+			} },
+			loading: { get value() {
+				return !!N.loading;
+			} },
+			spinnerLeads: { get value() {
+				return !!N.loading && !B();
+			} },
+			spinnerTrails: { get value() {
+				return !!N.loading && B();
+			} },
+			clearable: { get value() {
+				return !!N.clearable;
+			} }
 		});
 		let U = f(() => [
 			"bb-badge",
@@ -75,14 +89,21 @@ var O = ["id"], k = {
 				default: E(() => [S(e.$slots, "default")]),
 				_: 3
 			})], 8, O)),
-			N.clearable ? (x(), h("span", k, [N.icon ? m("", !0) : (x(), p(s, { key: 0 })), g("button", {
+			N.clearable ? (x(), h("span", k, [N.icon ? m("", !0) : (x(), h(d, { key: 0 }, [N.loading && B() ? (x(), p(o, {
+				key: 0,
+				class: "bb-badge__append-icon"
+			})) : N["append:icon"] ? (x(), p(a, {
+				key: 1,
+				class: "bb-badge__append-icon",
+				icon: N["append:icon"]
+			}, null, 8, ["icon"])) : m("", !0)], 64)), g("button", {
 				id: `${w(W)}__clear`,
 				"aria-label": N.clearableLabel || w(L)("badge.clearLabel").value,
 				"aria-labelledby": G.value,
 				class: "bb-badge__clear-button",
 				type: "button",
 				onClick: D(K, ["stop"])
-			}, [_(i, { icon: w(u) }, null, 8, ["icon"])], 8, A)])) : m("", !0),
+			}, [_(a, { icon: w(u) }, null, 8, ["icon"])], 8, A)])) : m("", !0),
 			N.loading ? (x(), h("span", j, C(w(L)("common.loadingText")), 1)) : m("", !0)
 		], 2));
 	}