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

package/dist/ai/source/BbBaseTextInput.md

@@ -21,6 +21,7 @@
 		:prepend:icon="props['prepend:icon']"
 		:readonly="props.readonly"
 		:reserve-append-space="props.clearable"
+		:variant="props.variant"
 		@click:clear="$emit('update:modelValue', null)"
 	>
 		<template #prepend-outer><slot name="prepend-outer"></slot></template>
@@ -258,6 +259,7 @@ defineExpose({
 ## Types
 
 ```ts
+import type { InputVariantType } from '@/types/InputVariant';
 import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import type { IconType } from '@/types/Icon';
 import type { MaskInputOptions } from 'maska';
@@ -296,6 +298,11 @@ export type BaseTextInputProps = {
 	 */
 	compact?: boolean;
 
+	/**
+	 * Visual variant of the field box, forwarded to `CommonInputWrapper`.
+	 */
+	variant?: InputVariantType;
+
 	/**
 	 * Disable all interactions with the input.
 	 */

package/dist/ai/source/BbBaseTextarea.md

@@ -24,6 +24,7 @@
 		:prepend:icon="props['prepend:icon']"
 		:readonly="props.readonly"
 		:reserve-append-space="clearable"
+		:variant="props.variant"
 		@click:clear="$emit('update:modelValue', null)"
 	>
 		<template #prepend-outer><slot name="prepend-outer"></slot></template>
@@ -204,6 +205,7 @@ function resetTextareaHeight() {
 ## Types
 
 ```ts
+import type { InputVariantType } from '@/types/InputVariant';
 import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import type { IconType } from '@/types/Icon';
 
@@ -247,6 +249,11 @@ export type BaseTextareaProps = {
 	 */
 	compact?: boolean;
 
+	/**
+	 * Visual variant of the field box, forwarded to `CommonInputWrapper`.
+	 */
+	variant?: InputVariantType;
+
 	/**
 	 * Disable all interactions with the textarea.
 	 */

package/dist/ai/source/BbBaseTimePickerInput.md

@@ -25,6 +25,7 @@
 		:loading="props.loading"
 		:prepend:icon="props['prepend:icon']"
 		:readonly="props.readonly"
+		:variant="props.variant"
 		@click:clear="onClickClear"
 		@focusin="onFocusIn"
 	>
@@ -129,7 +130,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>
@@ -822,6 +823,7 @@ onBeforeUnmount(() => {
 ## Types
 
 ```ts
+import type { InputVariantType } from '@/types/InputVariant';
 import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import type { IconType } from '@/types/Icon';
 import type { BbOffCanvasProps } from '../BbOffCanvas/types';
@@ -877,6 +879,11 @@ export type BaseTimePickerInputProps = {
 	/** Applies the compact density styles to the control. */
 	compact?: boolean;
 
+	/**
+	 * Visual variant of the field box, forwarded to `CommonInputWrapper`.
+	 */
+	variant?: InputVariantType;
+
 	/** Disables the input, clock trigger, and popover. */
 	disabled?: boolean;
 

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/BbColorInput.md

@@ -51,6 +51,7 @@
 				:readonly="readonly"
 				:required="required"
 				:swatches="swatches"
+				:variant="variant"
 				v-bind="eventListeners"
 			>
 				<template #append-outer><slot name="append-outer" /></template>
@@ -139,6 +140,7 @@ const eventListeners = {
 ## Types
 
 ```ts
+import type { InputVariantType } from '@/types/InputVariant';
 import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import type { InputDirection } from '@/types/InputDirection';
 import type { IconType } from '@/types/Icon';
@@ -182,6 +184,18 @@ export type BbColorInputProps = {
 	 * Displays the component in a compact version.
 	 */
 	compact?: boolean;
+
+	/**
+	 * Visual variant of the field box — the same names and tokens as the
+	 * `BbButton` variants. Colours only: height, padding and border width are
+	 * identical across variants, so a form never reflows when one changes.
+	 * `'ghost'` has no border in any state (errors and warnings show through
+	 * the icon and the messages); every variant keeps the focus ring.
+	 * Register extra names with the plugin's `inputVariants` option.
+	 *
+	 * @defaultValue `'outline'`
+	 */
+	variant?: InputVariantType;
 	/**
 	 * Descriptive text displayed below the label and above the input. Unlike the hint it is always
 	 * visible, and it is linked to the input via `aria-describedby` (after any

package/dist/ai/source/BbDatePickerInput.md

@@ -64,6 +64,7 @@
 				:transition-duration="transitionDuration"
 				:type="type"
 				:utc="utc"
+				:variant="variant"
 				v-bind="eventListeners"
 			>
 				<template #prepend-outer><slot name="prepend-outer"></slot></template>
@@ -158,6 +159,7 @@ const eventListeners = {
 ## Types
 
 ```ts
+import type { InputVariantType } from '@/types/InputVariant';
 import type { DatePickerType } from '@/types/DatePickerType';
 import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import type { InputDirection } from '@/types/InputDirection';
@@ -227,6 +229,18 @@ export type BbDatePickerInputProps = {
 	 */
 	compact?: boolean;
 
+	/**
+	 * Visual variant of the field box — the same names and tokens as the
+	 * `BbButton` variants. Colours only: height, padding and border width are
+	 * identical across variants, so a form never reflows when one changes.
+	 * `'ghost'` has no border in any state (errors and warnings show through
+	 * the icon and the messages); every variant keeps the focus ring.
+	 * Register extra names with the plugin's `inputVariants` option.
+	 *
+	 * @defaultValue `'outline'`
+	 */
+	variant?: InputVariantType;
+
 	/**
 	 * Direction of the layout of the component. Can either be a predefined value or a pattern separated by a space like `xx xxxxx`.
 	 */

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>

package/dist/ai/source/BbNumberInput.md

@@ -55,6 +55,7 @@
 				:readonly="readonly"
 				:required="required"
 				:step="step"
+				:variant="variant"
 				v-bind="eventListeners"
 			>
 				<template #append-outer="data"
@@ -146,6 +147,7 @@ const eventListeners = {
 ## Types
 
 ```ts
+import type { InputVariantType } from '@/types/InputVariant';
 import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import type { InputDirection } from '@/types/InputDirection';
 import type { IconType } from '@/types/Icon';
@@ -180,6 +182,18 @@ export type BbNumberInputProps = {
 	 */
 	compact?: boolean;
 
+	/**
+	 * Visual variant of the field box — the same names and tokens as the
+	 * `BbButton` variants. Colours only: height, padding and border width are
+	 * identical across variants, so a form never reflows when one changes.
+	 * `'ghost'` has no border in any state (errors and warnings show through
+	 * the icon and the messages); every variant keeps the focus ring.
+	 * Register extra names with the plugin's `inputVariants` option.
+	 *
+	 * @defaultValue `'outline'`
+	 */
+	variant?: InputVariantType;
+
 	/**
 	 * Descriptive text displayed below the label and above the input. Unlike the hint it is always
 	 * visible, and it is linked to the input via `aria-describedby` (after any

package/dist/ai/source/BbOffCanvas.md

@@ -28,6 +28,7 @@
 					'bb-offcanvas--swipe-exit': swipeExiting,
 					'bb-offcanvas--instant-stack': instantStack,
 					'bb-offcanvas--covered': isCovered,
+					'bb-offcanvas--stacked': isStackedAbove,
 					'bb-offcanvas--has-handle': draggable,
 					'bb-offcanvas--no-header': !renderHeader(),
 					[`bb-offcanvas--${props.side}`]: true,
@@ -333,13 +334,21 @@ const toggleDialog = async (value: boolean) => {
 		emit('shown');
 	} else {
 		emit('hide');
+		// Leave the stack NOW, not after the slide-out. The parents' push offsets
+		// derive from the stack registry, so releasing it here lets them slide
+		// back in lockstep with this panel leaving — instead of staying pushed
+		// for the whole transition and only then starting their own (2026-09-10).
+		// Safe to do early: Escape ownership lives in the overlay escape stack,
+		// not in `openOrder`, and stays with this panel until the listener is
+		// removed below; while still natively open, the modal algorithm keeps
+		// everything outside it inert regardless of our classes.
+		leaveStack();
 		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-entered the stack (on top); the top-layer host was never released.
 		if (currentOpenedTimes !== openedTimes.value) return;
 		removeEscapeListener();
-		leaveStack();
 		dialog.value?.close();
 		// Release the top-layer host only after close(): releasing at close-start
 		// would re-home body toasts under a still-modal panel, freezing them for
@@ -522,20 +531,25 @@ const leaveStack = () => {
 };
 
 /**
- * The top *two* open offcanvases keep their blurred/dimmed backdrop; every panel
- * beneath them is `covered` (transparent backdrop). Two rather than one so that
- * when the front panel closes, the panel behind it is already blurred — there is
- * no frame where the reinstating blur leaves an unblurred surface showing.
+ * `covered`: another open offcanvas sits on top of this one. A covered panel
+ * is inert, yields Escape to the front-most panel and drops its `will-change`
+ * layer (it cannot be dragged). Backdrops are NOT keyed off this — see
+ * `isStackedAbove`.
  */
-const BLURRED_LAYERS = 2;
 const isCovered = computed(() => {
 	const index = openOrder.value.indexOf(stackId);
-	return (
-		isVisible.value &&
-		index !== -1 &&
-		index < openOrder.value.length - BLURRED_LAYERS
-	);
+	return isVisible.value && index !== -1 && index < openOrder.value.length - 1;
 });
+/**
+ * One backdrop per pile of open offcanvases, owned by the BOTTOM-most: every
+ * panel above it renders a transparent, unfiltered backdrop (`--stacked`). The
+ * owner never loses or regains its blur/dim while panels open and close above
+ * it, so a closing child's backdrop fade changes nothing on screen — no
+ * double-dim brightening to single-dim, and no blur snapping in on a deeper
+ * member as the pile shrinks. It also costs one blur pass however deep it goes.
+ * Mirrors `bb-dialog--stacked`.
+ */
+const isStackedAbove = computed(() => openOrder.value.indexOf(stackId) > 0);
 
 // Re-register if the `stack` name, `direction` or `stackGap` changes while open,
 // so the registry's bookkeeping (order, direction, size, gap) stays in sync.
@@ -1140,20 +1154,12 @@ export type BbOffCanvasSlots = {
 		--stack-transition-duration: 0s;
 	}
 
-	/* Only the top-most open panel blurs + dims its backdrop. Every panel beneath
-	   it is `covered`: its backdrop goes transparent so N stacked panels cost one
-	   blur pass instead of N (stacked `backdrop-filter`s each reblur the whole
-	   scene and choke the GPU past a handful). It also drops its `will-change`
-	   layer, since a covered panel can't be dragged. Must follow `--visible` to
-	   win the equal-specificity `will-change`. */
+	/* A `covered` panel (another open panel sits on top) drops its `will-change`
+	   layer, since it can't be dragged. Must follow `--visible` to win the
+	   equal-specificity `will-change`. Its backdrop is untouched: which panel
+	   paints the backdrop is decided by `--stacked` below. */
 	&.bb-offcanvas--covered {
 		will-change: auto;
-
-		&::backdrop {
-			-webkit-backdrop-filter: none;
-			backdrop-filter: none;
-			background-color: transparent;
-		}
 	}
 
 	/* Stack pad: fills from the panel's anchored edge out to the screen edge, so a
@@ -1294,6 +1300,21 @@ export type BbOffCanvasSlots = {
 			}
 		}
 	}
+
+	/* One backdrop per pile of open panels, painted by the BOTTOM-most. Every
+	   panel above it is `--stacked`: no blur, no dim, so a child's backdrop
+	   fading out on close changes nothing on screen (two half-dims composite
+	   lighter than one; before this the pile brightened during the handoff),
+	   and N stacked panels cost one blur pass instead of N (stacked
+	   `backdrop-filter`s each reblur the whole scene and choke the GPU past a
+	   handful). Must follow `--open`, which sets opacity 1 at equal
+	   specificity. Mirrors `bb-dialog--stacked`. */
+	&.bb-offcanvas--stacked::backdrop {
+		-webkit-backdrop-filter: none;
+		backdrop-filter: none;
+		opacity: 0;
+	}
+
 	&.bb-offcanvas--deny-close {
 		animation-duration: 220ms;
 		animation-fill-mode: both;
@@ -1319,9 +1340,10 @@ export type BbOffCanvasSlots = {
 		backdrop-filter: blur(var(--bb-overlay-blur, 2px));
 		background-color: var(--bb-overlay);
 		opacity: 0;
-		/* Also transition the dim: when a panel becomes `covered` its dim fades out
-		   in step with the next backdrop's dim fading in, so the total stays
-		   constant during open/close instead of flicking lighter/darker. */
+		/* Also transition the dim: when the backdrop owner closes under a panel
+		   that stays open, the new owner's dim fades in in step with the old one
+		   fading out, so the total stays roughly constant instead of flicking
+		   lighter/darker. */
 		transition:
 			opacity var(--transition-duration) var(--bb-ease),
 			background-color var(--transition-duration) var(--bb-ease);

package/dist/ai/source/BbPagination.md

@@ -19,7 +19,7 @@
 				<li>
 					<BbBaseButton v-bind="previousAttributes">
 						<slot name="previous">
-							<span class="bb-pagination__page-label sr-only">{{
+							<span class="bb-pagination__page-label bb-sr-only">{{
 								t('pagination.previous').value
 							}}</span>
 							<svg
@@ -65,7 +65,7 @@
 				<li>
 					<BbBaseButton v-bind="nextAttributes">
 						<slot name="next">
-							<span class="bb-pagination__page-label sr-only">{{
+							<span class="bb-pagination__page-label bb-sr-only">{{
 								t('pagination.next').value
 							}}</span>
 							<svg

package/dist/ai/source/BbPopover.md

@@ -389,7 +389,18 @@ useIntersectionObserver(
 	([{ intersectionRatio }]) => {
 		// A modal sheet is detached from the activator's position, so it must not
 		// close just because the activator scrolls out of view.
-		if (intersectionRatio !== 1 && isOpen.value && !useOffcanvas.value) close();
+		//
+		// "Fully visible" is a tolerance, never `=== 1`. The ratio is
+		// intersection area over target area, and for an activator with a
+		// sub-pixel box (a bare <button> whose width is its text, 29.3px under
+		// the shipped reset) Chromium reports 0.9999… for an element that is
+		// entirely on screen. A strict `!== 1` then closed the popover in the
+		// same millisecond it opened — the observer's very first entry, delivered
+		// right after `showModal()` — for any consumer whose activator happened
+		// to measure fractionally (2026-09-09). 1% is 0.18px on an 18px button:
+		// rounding noise, never a real clip.
+		const fullyVisible = intersectionRatio >= 0.99;
+		if (!fullyVisible && isOpen.value && !useOffcanvas.value) close();
 	},
 	{ threshold: [0, 1] }
 );

package/dist/ai/source/BbSelect.md

@@ -78,6 +78,7 @@
 				:selected-labels-fn="selectedLabelsFn"
 				:stash="stash"
 				:transition-duration="transitionDuration"
+				:variant="variant"
 				v-bind="eventListeners"
 			>
 				<template v-if="$slots.header" #header="data">
@@ -218,6 +219,7 @@ const eventListeners = {
 ## Types
 
 ```ts
+import type { InputVariantType } from '@/types/InputVariant';
 import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import type { InputDirection } from '@/types/InputDirection';
 import type { ItemAccessor } from '@/types/ItemAccessor';
@@ -287,6 +289,18 @@ export type BbSelectProps<T> = {
 	 */
 	compact?: boolean;
 
+	/**
+	 * Visual variant of the field box — the same names and tokens as the
+	 * `BbButton` variants. Colours only: height, padding and border width are
+	 * identical across variants, so a form never reflows when one changes.
+	 * `'ghost'` has no border in any state (errors and warnings show through
+	 * the icon and the messages); every variant keeps the focus ring.
+	 * Register extra names with the plugin's `inputVariants` option.
+	 *
+	 * @defaultValue `'outline'`
+	 */
+	variant?: InputVariantType;
+
 	/**
 	 * Defines an array of dependencies that will trigger actions in the component upon change.
 	 */