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

package/dist/ai/recipes/vue/upload-center.md

@@ -1074,7 +1074,7 @@ const formattedSize = computed(() => {
 			class="flex-1"
 			:model-value="upload.progress"
 		/>
-		<span class="text-xs tabular-nums text-[color:var(--bb-text-muted)]"
+		<span class="text-xs text-[color:var(--bb-text-muted)] tabular-nums"
 			>{{ upload.progress }}%</span
 		>
 	</div>
@@ -1508,7 +1508,7 @@ const clearSelection = () => {
 		<section class="flex flex-col gap-1.5">
 			<div class="flex items-center justify-between">
 				<h3
-					class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 				>
 					Extracted fields
 				</h3>
@@ -1548,7 +1548,7 @@ const clearSelection = () => {
 		     one-click cell as in the table. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Details
 			</h3>
@@ -1565,7 +1565,7 @@ const clearSelection = () => {
 		<!-- Activity feed. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Activity
 			</h3>
@@ -1712,7 +1712,7 @@ const longDate = (value: string) =>
 		<!-- Recent receipts: names drill down again — the stack keeps growing. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent receipts
 			</h3>
@@ -1730,7 +1730,7 @@ const longDate = (value: string) =>
 						{{ recent.filename }}
 					</BbButton>
 					<BbBadge variant="outline">{{ recent.status }}</BbBadge>
-					<span class="text-xs tabular-nums text-[color:var(--bb-text-muted)]">
+					<span class="text-xs text-[color:var(--bb-text-muted)] tabular-nums">
 						{{ currency.format(recent.amount) }}
 					</span>
 				</li>

package/dist/ai/recipes/vue/wizard-form.md

@@ -1042,7 +1042,7 @@ const today = new Date().toISOString().slice(0, 10);
 		>
 			<div class="flex items-center justify-between gap-2">
 				<h3
-					class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 				>
 					Audience
 				</h3>
@@ -1089,7 +1089,7 @@ const today = new Date().toISOString().slice(0, 10);
 		>
 			<div class="flex items-center justify-between gap-2">
 				<h3
-					class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 				>
 					Content
 				</h3>
@@ -1120,7 +1120,7 @@ const today = new Date().toISOString().slice(0, 10);
 		>
 			<div class="flex items-center justify-between gap-2">
 				<h3
-					class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+					class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 				>
 					Schedule
 				</h3>
@@ -1286,7 +1286,7 @@ const isReview = computed(() => ctx.step.value === 'review');
 		<!-- The segment's definition, so "who is in here" is answerable in place. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Conditions
 			</h3>
@@ -1305,7 +1305,7 @@ const isReview = computed(() => ctx.step.value === 'review');
 		<!-- Recent campaigns to this segment: fatigue check before sending. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Recent campaigns
 			</h3>

package/dist/ai/source/BbBadge.md

@@ -41,7 +41,7 @@
 				<BbIcon :icon="clearIcon" />
 			</button>
 		</span>
-		<span v-if="props.loading" class="sr-only">{{
+		<span v-if="props.loading" class="bb-sr-only">{{
 			t('common.loadingText')
 		}}</span>
 	</span>

package/dist/ai/source/BbBaseCheckbox.md

@@ -166,7 +166,7 @@ const inputAttributes = computed(() => {
 		// readonly is announced only via aria-readonly.
 		'aria-readonly': props.readonly ? true : undefined,
 		checked: internalChecked.value,
-		class: 'sr-only',
+		class: 'bb-sr-only',
 		disabled: props.disabled,
 		id: props.id,
 		indeterminate: props.indeterminate,

package/dist/ai/source/BbBaseDatePicker.md

@@ -13,8 +13,8 @@
 		:class="isCoarse ? `bb-base-date-picker--unit-${homeMode}` : undefined"
 		:style="{ '--weeks': weeksInMonth }"
 	>
-		<span aria-live="polite" class="sr-only">{{ formattedYear }}</span>
-		<div aria-live="polite" class="sr-only">{{ cursorAnnouncement }}</div>
+		<span aria-live="polite" class="bb-sr-only">{{ formattedYear }}</span>
+		<div aria-live="polite" class="bb-sr-only">{{ cursorAnnouncement }}</div>
 		<div class="bb-base-date-picker__body">
 			<!-- No controls row under `type="year"`: the year list scrolls itself
 			     (and extends lazily at both ends), so there is nothing for the
@@ -42,7 +42,7 @@
 							stroke-width="1.5"
 						/>
 					</svg>
-					<span class="sr-only">{{ previousPageLabel }}</span>
+					<span class="bb-sr-only">{{ previousPageLabel }}</span>
 				</BbBaseButton>
 
 				<div class="bb-base-date-picker__nav-center">
@@ -98,7 +98,7 @@
 							stroke-width="1.5"
 						/>
 					</svg>
-					<span class="sr-only">{{ nextPageLabel }}</span>
+					<span class="bb-sr-only">{{ nextPageLabel }}</span>
 				</BbBaseButton>
 			</div>
 
@@ -141,7 +141,7 @@
 			:id="`${globalId}-status`"
 			aria-atomic="true"
 			aria-live="polite"
-			class="sr-only"
+			class="bb-sr-only"
 			role="status"
 		>
 			{{ modeAnnouncement }}

package/dist/ai/source/BbBaseDatePickerInput.md

@@ -165,7 +165,7 @@
 
 		<span
 			:id="descriptionId"
-			class="bb-base-date-picker-input__accessible-description sr-only"
+			class="bb-base-date-picker-input__accessible-description bb-sr-only"
 			>{{ t('baseDatePickerInput.dateFormat') }} {{ formatHint }}</span
 		>
 		<template v-if="$slots.suffix" #suffix><slot name="suffix" /></template>
@@ -1006,7 +1006,7 @@ const timeHintKey = computed(() =>
 		: 'baseDatePickerInput.timeFormat'
 );
 
-/** Localized format hint used by the placeholder and the sr-only description. */
+/** Localized format hint used by the placeholder and the bb-sr-only description. */
 const formatHint = computed(() => {
 	// The hint has to describe the fields that are actually there — promising
 	// DD/MM/YYYY to a two-field month input is worse than no hint at all.

package/dist/ai/source/BbBaseRadio.md

@@ -20,7 +20,7 @@
 			'bb-base-radio--readonly': readonly,
 		}"
 	>
-		<input v-bind="inputAttributes" class="sr-only" />
+		<input v-bind="inputAttributes" class="bb-sr-only" />
 		<slot name="icon" v-bind="slotAttributes">
 			<BbBaseRadioIcon
 				:checked="checked"

package/dist/ai/source/BbBaseRating.md

@@ -20,7 +20,7 @@
 			:role="groupRole"
 		>
 			<slot name="prepend"></slot>
-			<span v-if="showClearHint" :id="clearHintId" class="sr-only">{{
+			<span v-if="showClearHint" :id="clearHintId" class="bb-sr-only">{{
 				clearHintText
 			}}</span>
 			<label
@@ -34,7 +34,7 @@
 					'bb-base-rating__option--readonly': readonly,
 				}"
 			>
-				<span class="bb-base-rating__label-text sr-only">{{
+				<span class="bb-base-rating__label-text bb-sr-only">{{
 					option.value == 1
 						? t('rating.singleStar', option.value, props.stars).value
 						: t('rating.multipleStars', option.value, props.stars).value
@@ -44,7 +44,7 @@
 					:aria-describedby="computedAriaDescribedby"
 					:autofocus="autofocus && !index"
 					:checked="option.checked"
-					class="sr-only"
+					class="bb-sr-only"
 					:disabled="option.disabled"
 					:name="option.name"
 					:required="required"
@@ -508,7 +508,7 @@ export const sizeMap: Sizes = {
 	--color: var(--bb-primary);
 	--ring-color: var(--bb-ring);
 	--size: 24px;
-	--spacing: 0px;
+	--space: 0px;
 
 	/* Highlights all previous and current stars when hovering the component so it previews stars */
 	&:not(.bb-base-rating--disabled):not(.bb-base-rating--readonly):not(
@@ -558,7 +558,7 @@ export const sizeMap: Sizes = {
 	}
 
 	&__inner-container {
-		column-gap: var(--spacing);
+		column-gap: var(--space);
 		display: inline-flex;
 		flex-wrap: wrap;
 	}

package/dist/ai/source/BbBaseSelect.md

@@ -190,7 +190,7 @@
 				so a visually-hidden copy nested inside it would double every reading.
 				The chips keep their ✕ buttons — those are real tab stops and must stay
 				named; the activator's name just stops reading them. -->
-				<span :id="`${id}__selection`" class="sr-only">{{
+				<span :id="`${id}__selection`" class="bb-sr-only">{{
 					accessibleSelectionText(text)
 				}}</span>
 				<template #append-outer

package/dist/ai/source/BbBaseSlider.md

@@ -30,7 +30,7 @@
 			<input
 				:id="id"
 				ref="hiddenInput"
-				class="sr-only"
+				class="bb-sr-only"
 				:disabled="disabled"
 				:name="name"
 				:readonly="true"
@@ -132,10 +132,10 @@
 		<!-- Localized qualifiers referenced by the range thumbs' aria-labelledby
 		so the two identical role=slider spans are distinguishable to AT. -->
 		<template v-if="props.range && props.id">
-			<span :id="`${props.id}__thumb_label_lower`" class="sr-only">{{
+			<span :id="`${props.id}__thumb_label_lower`" class="bb-sr-only">{{
 				t('slider.minimumThumb').value
 			}}</span>
-			<span :id="`${props.id}__thumb_label_higher`" class="sr-only">{{
+			<span :id="`${props.id}__thumb_label_higher`" class="bb-sr-only">{{
 				t('slider.maximumThumb').value
 			}}</span>
 		</template>
@@ -181,11 +181,11 @@ const { t } = useLocale();
 
 /**
  * `role="slider"` is name-from-author: the container's visible `<label>`
- * targets the sr-only hidden input (`for`/`id`), which never names these
+ * targets the bb-sr-only hidden input (`for`/`id`), which never names these
  * sibling thumb spans — without an explicit reference the focused thumb
  * announces as an unnamed "slider, N". The wrapped layer (BbSlider →
  * BbBaseInputContainer) renders that label as `${id}__label`, so the thumbs
- * point at it; range mode appends a localized sr-only qualifier so the two
+ * point at it; range mode appends a localized bb-sr-only qualifier so the two
  * thumbs are distinguishable. Bare BbBaseSlider without a container keeps its
  * documented hole: the reference targets nothing and the name stays empty.
  */

package/dist/ai/source/BbBaseSwitch.md

@@ -158,7 +158,7 @@ const inputAttributes = computed(() => {
 		// readonly is NOT disabled — native `disabled` conveys disabled.
 		'aria-readonly': props.readonly ? true : undefined,
 		checked: internalChecked.value,
-		class: 'sr-only',
+		class: 'bb-sr-only',
 		disabled: props.disabled,
 		id: props.id,
 		indeterminate: props.indeterminate,

package/dist/ai/source/BbBaseTimePickerInput.md

@@ -129,7 +129,7 @@
 
 		<span
 			:id="descriptionId"
-			class="bb-base-time-picker-input__accessible-description sr-only"
+			class="bb-base-time-picker-input__accessible-description bb-sr-only"
 			>{{ formatHint }}</span
 		>
 		<template v-if="$slots.suffix" #suffix><slot name="suffix" /></template>

package/dist/ai/source/BbBreadcrumbs.md

@@ -174,9 +174,28 @@ const props = withDefaults(defineProps<BbBreadcrumbsProps>(), {
 defineSlots<BbBreadcrumbsSlots>();
 const { t } = useLocale();
 const logger = useLogger();
-const FLEX_BASIS_OFFSET_WIDTH = 5;
 const SAFETY_MARGIN_WIDTH = 20;
 const COLLAPSE_BUFFER = 1;
+/**
+ * Slack added to `--flex-basis` on top of the width the items actually need.
+ *
+ * It is DERIVED, not tuned: the basis is the width this component asks the flex
+ * row for, and `recompute()` must agree that everything fits at exactly that
+ * width. Substituting `availableWidth = estimatedRequiredWidth` into
+ * `effectiveAvailableWidth` cancels the offset and the safety margin and leaves
+ * `FLEX_BASIS_OFFSET_WIDTH - COLLAPSE_BUFFER`, which then has to clear
+ * `isNearThreshold`'s `SAFETY_MARGIN_WIDTH / 2` band.
+ *
+ * At the old hand-picked `5` it did not: the slack came to `5 - 1 = 4`, inside
+ * the 10px band, so at its own basis the component always declared one item
+ * overflowed. That flipped `--flex-grow` to `1`, the row grew it, everything
+ * then fitted, `--flex-grow` went back to `0`, it shrank to the basis, and the
+ * cycle repeated every frame — a self-inflicted resize→recompute loop that only
+ * showed up once an app stopped overriding `flex-basis` (Tailwind v4 puts
+ * utilities in `@layer utilities`, which lose to our unlayered rule).
+ */
+const COLLAPSE_BUFFER_AND_BAND = COLLAPSE_BUFFER + SAFETY_MARGIN_WIDTH / 2;
+const FLEX_BASIS_OFFSET_WIDTH = COLLAPSE_BUFFER_AND_BAND + 1;
 const FONT_WIDTH = 8.5;
 
 const slots = useSlots();

package/dist/ai/source/BbButton.md

@@ -51,10 +51,10 @@
 			class="bb-button__prepend-icon"
 			:icon="props['prepend:icon']"
 		/>
-		<span class="bb-button__content" :class="{ 'sr-only': !!icon }"
+		<span class="bb-button__content" :class="{ 'bb-sr-only': !!icon }"
 			><slot>{{ text }}</slot></span
 		>
-		<span v-if="loading" class="bb-button__loading-label sr-only">{{
+		<span v-if="loading" class="bb-button__loading-label bb-sr-only">{{
 			t('common.loadingText')
 		}}</span>
 

package/dist/ai/source/BbDialog.md

@@ -50,6 +50,7 @@
 			'bb-dialog--mobile': isMobile,
 			'bb-dialog--deny-close': denyClose,
 			'bb-dialog--covered': isCovered,
+			'bb-dialog--stacked': isStackedAbove,
 		}"
 		:inert="(!model && !isVisible) || isCovered"
 		:style="{
@@ -430,6 +431,20 @@ const isCovered = computed(() => {
 	return list[list.length - 1] !== stackId;
 });
 
+/**
+ * True when this dialog sits ABOVE another member of its stack. A stack paints
+ * ONE backdrop, owned by its bottom member; everyone above rides on it with a
+ * transparent backdrop of their own (see `--stacked` in index.css). Two things
+ * fall out: swapping members never fades a backdrop, so the page behind never
+ * blinks mid-crossfade, and N stacked dialogs cost one blur pass instead of N.
+ */
+const isStackedAbove = computed(() => {
+	if (!props.stack) return false;
+	const list = stacks.value[props.stack];
+	if (!list || !list.includes(stackId)) return false;
+	return list[0] !== stackId;
+});
+
 let releaseTopLayer: (() => void) | null = null;
 const toggleDialog = async (value: boolean) => {
 	if (value) {
@@ -460,13 +475,21 @@ const toggleDialog = async (value: boolean) => {
 		emit('shown');
 	} else {
 		emit('hide');
+		// Leave the stack NOW, not after the fade. The member beneath uncovers
+		// at once and crossfades in under this one's fade-out, so it is fully
+		// visible one transition after the close — not two, with a dead window
+		// where nothing was on screen (measured 2026-09-10: 250ms of blank, the
+		// parent finishing at ~520ms). Safe to do early: while this dialog is
+		// still natively open, the HTML modal algorithm keeps everything outside
+		// it inert regardless of our classes, and Escape stays owned through the
+		// overlay stack until the listener is removed below.
+		partStack();
 		const currentOpenedTimes = openedTimes.value;
 		await wait(props.transitionDuration);
-		// Reopened during the transition — keep it open, and keep its stack
-		// membership + top-layer host intact (they were never released).
+		// Reopened during the transition — keep it open. The open path already
+		// re-joined the stack (on top); the top-layer host was never released.
 		if (currentOpenedTimes !== openedTimes.value) return;
 		removeEscapeListener();
-		partStack();
 		dialog.value?.close();
 		// Release the top-layer host only after close(): releasing at close-start
 		// would re-home body toasts under a still-modal dialog, freezing them for
@@ -842,14 +865,22 @@ export type { BbDialogSlots as BaseDialogSlots };
 		animation: bb-dialog-deny-bounce 220ms cubic-bezier(0.22, 1, 0.36, 1);
 	}
 
-	/* A dialog covered by a later sibling of the same stack fades out entirely —
-	   only the top-most member of the stack stays visible. */
+	/* A dialog covered by a later sibling of the same stack fades its BOX out —
+	   only the top-most member of the stack stays visible. Its backdrop stays:
+	   the bottom member owns the stack's one backdrop (below). */
 	&.bb-dialog--covered {
 		opacity: 0;
+	}
 
-		&::backdrop {
-			opacity: 0;
-		}
+	/* A member above the bottom of its stack rides on the bottom member's
+	   backdrop and paints none of its own. Swapping members therefore never
+	   fades a backdrop — no brightness blink mid-crossfade — and the stack costs
+	   one blur pass however deep it goes. Must follow `--open`, which sets the
+	   backdrop to 1 at equal specificity. */
+	&.bb-dialog--stacked::backdrop {
+		-webkit-backdrop-filter: none;
+		backdrop-filter: none;
+		opacity: 0;
 	}
 
 	&::backdrop {

package/dist/ai/source/BbDropdown.md

@@ -94,7 +94,7 @@
 				menu container: `role="menu"` admits only items and groups, and a
 				reader in menu mode walks items — so the presentational row inside
 				is skipped and an empty search would announce nothing. -->
-				<span class="sr-only" role="status">{{ statusText }}</span>
+				<span class="bb-sr-only" role="status">{{ statusText }}</span>
 				<div v-if="$slots.footer" class="bb-dropdown__footer">
 					<slot
 						:disabled="disabled"

package/dist/ai/source/BbDropzone.md

@@ -41,7 +41,7 @@
 				:aria-label="dropzoneAriaLabel"
 				:aria-labelledby="ariaLabelledby"
 				:autofocus="autofocus"
-				class="sr-only"
+				class="bb-sr-only"
 				:disabled="disabled"
 				:multiple="multiple"
 				type="file"
@@ -54,8 +54,8 @@
 			     half of that composed name ("<your copy> Select files"), so the
 			     name still says the control takes files. Without it the localized
 			     `aria-label` is the whole name and this span would be dead
-			     sr-only chatter on every dropzone. -->
-			<span v-if="hasSlotLabel" :id="defaultLabelId" class="sr-only">{{
+			     bb-sr-only chatter on every dropzone. -->
+			<span v-if="hasSlotLabel" :id="defaultLabelId" class="bb-sr-only">{{
 				dropzoneAriaLabel
 			}}</span>
 		</label>
@@ -330,7 +330,7 @@ const errorContainerId = `${containerId}_errors`;
 const warningContainerId = `${containerId}_warnings`;
 /** Handed to the slot as `labelId`; the consumer puts it on their label node. */
 const slotLabelId = `${containerId}_label`;
-/** Our sr-only copy of the localized instruction, appended to that name. */
+/** Our bb-sr-only copy of the localized instruction, appended to that name. */
 const defaultLabelId = `${containerId}_default_label`;
 
 const dragging = ref(false);
@@ -394,7 +394,7 @@ onUpdated(syncSlotLabel);
 
 /**
  * `aria-labelledby` wins over `aria-label`, so the localized instruction has to
- * be re-supplied as a referenced node — hence the sr-only span. Consumer copy
+ * be re-supplied as a referenced node — hence the bb-sr-only span. Consumer copy
  * first: WCAG 2.5.3 (Label in Name) wants the visible label at the START of the
  * accessible name so speech input can match what the user reads.
  */

package/dist/ai/source/BbIcon.md

@@ -18,7 +18,7 @@
 import {
 	computed,
 	inject,
-	ref,
+	shallowRef,
 	onServerPrefetch,
 	onBeforeMount,
 	watch,
@@ -36,8 +36,10 @@ import { useConfig } from '@/composables/useConfig';
 import {
 	cacheKeyFor as cacheKey,
 	EMPTY_ICON,
+	MISSING_ICON,
 	parseIcon,
 	parsedIcons,
+	resolveRegistryIcon,
 	type ParsedIcon,
 } from './iconCache';
 import type { BbIconProps, BbIconSize } from './types';
@@ -52,7 +54,10 @@ if (process.env.NODE_ENV !== 'production')
 	warnRemovedAttrs('BbIcon', removedPropsFor('BbIcon'));
 
 const logger = useLogger();
-const icons = ref<IconRegistry>();
+// Shallow: the registry is a (possibly Proxy-wrapped) map of loaders — there is
+// nothing to track inside it, and a deep reactive wrapper would proxy the
+// plugin's own Proxy on every lookup.
+const icons = shallowRef<IconRegistry>();
 
 const loadIcons = () => {
 	// Prefer the typed Symbol key; fall back to the legacy string key for one
@@ -102,7 +107,10 @@ const cacheKeyFor = (value: string) => cacheKey(value, isSvgPayload(value));
  * Seeded from the module cache: an icon this page has already resolved renders
  * complete in the FIRST render pass, with no loader promise and no regex.
  */
-const parsed = ref<ParsedIcon | null>(
+// Shallow on purpose: a parsed icon is immutable, and the placeholder is
+// recognised by IDENTITY (`=== MISSING_ICON`) — a deep ref would hand back a
+// reactive proxy of it and the comparison would never hold.
+const parsed = shallowRef<ParsedIcon | null>(
 	parsedIcons.get(cacheKeyFor(props.icon)) ?? null
 );
 
@@ -136,13 +144,13 @@ const getIcon = async () => {
 		logger.throw('Icons have not been loaded');
 	}
 
-	const iconLoader = icons.value![key];
-	if (!iconLoader) {
-		logger.throw(`Icon "${key}" does not exist.`);
-	}
-
-	const source = await iconLoader();
-	parsed.value = parsedIcons.set(key, parseIcon(source)).get(key)!;
+	// Never throws: a name that does not resolve yields the built-in
+	// placeholder (and one console.error per name per page), so the component
+	// tree around the icon stays mounted and the gap is visible where the icon
+	// should be — in dev exactly as in production.
+	const resolved = await resolveRegistryIcon(key, icons.value!);
+	// The prop may have moved on while the loader was in flight.
+	if (cacheKeyFor(props.icon) === key) parsed.value = resolved;
 };
 
 onServerPrefetch(async () => {
@@ -217,6 +225,11 @@ const iconAttributes = computed(() => {
 	// Icons should never be focusable or keyboard navigable since they're not interactive
 	base['focusable'] = 'false';
 
+	// The placeholder stands in for a name that did not resolve: sized and
+	// coloured exactly like the icon it replaces, and findable in the DOM (and
+	// in tests) by the name that was asked for.
+	if (parsed.value === MISSING_ICON) base['data-bb-icon-missing'] = props.icon;
+
 	return base;
 });
 </script>