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

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

@@ -109,7 +109,7 @@
 			aria-expanded="true"
 			:aria-invalid="computedAriaInvalid"
 			:aria-label="searchInputAriaLabel"
-			class="bb-select-popover__focus-proxy sr-only"
+			class="bb-select-popover__focus-proxy bb-sr-only"
 			role="combobox"
 			tabindex="-1"
 			type="button"
@@ -642,6 +642,22 @@ const onOutsideInteraction = async (event: Event) => {
 	const insideActivator = positionAnchorEl.value?.contains(target);
 	const insidePopover = !!target.closest('.bb-common-popover');
 	if (insideActivator || insidePopover) return;
+	// Focus landing on an ANCESTOR of the activator is a focus fallback, not
+	// the user going elsewhere. A mousedown on a non-focusable node inside a
+	// modal `<dialog>` — the field's own `<label>` — parks focus on the dialog
+	// element itself, which arrived here as an outside `focusin` and closed
+	// the panel one tick before the label's click reached the activator and
+	// reopened it: a close/open flash that a label outside any dialog never
+	// showed (focus falls to `body` there, which fires no `focusin`). Scoped
+	// to `focusin` on purpose: a CLICK whose target is that ancestor (the
+	// dialog's own padding) is a real outside click and must still close.
+	if (
+		event.type === 'focusin' &&
+		positionAnchorEl.value &&
+		target.contains(positionAnchorEl.value)
+	) {
+		return;
+	}
 	const label =
 		target instanceof HTMLLabelElement ? target : target.closest('label');
 	if (label?.control && positionAnchorEl.value?.contains(label.control)) return;
@@ -1231,8 +1247,22 @@ const open = async ({
 	// Join the shared Escape stack only in flyout mode — the sheet returned
 	// above and BbOffCanvas registers itself instead.
 	pushEscapeEntry(escapeKey);
-	document.addEventListener('click', onOutsideInteraction);
-	document.addEventListener('focusin', onOutsideInteraction);
+	// CAPTURE, not bubble. Every overlay root — a `<dialog>`, an off-canvas,
+	// another popover — binds `overlaySurfaceIsolation`, which stops `click`
+	// from bubbling past the surface so handlers BEHIND it never hear a click
+	// aimed at it. A select declared INSIDE such a surface is behind nothing,
+	// but its document listener sits above the boundary all the same: a click
+	// on the dialog's own chrome was swallowed at the dialog and never
+	// reached a bubble-phase watcher here, so it could not close the panel.
+	// (It used to close by accident: mousedown parked focus on the dialog and
+	// the `focusin` path treated that as leaving — see the ancestor guard.)
+	// Capture runs before the boundary and before any consumer `.stop`, and
+	// the inside/label guards in `onOutsideInteraction` already carry the
+	// meaning, so nothing inside the select's own chrome is affected.
+	document.addEventListener('click', onOutsideInteraction, { capture: true });
+	document.addEventListener('focusin', onOutsideInteraction, {
+		capture: true,
+	});
 	document.addEventListener('keydown', onEsc, { capture: true });
 
 	if (!focusPopoverContent) return;
@@ -1259,8 +1289,12 @@ const close = async () => {
 
 	pause();
 	removeEscapeEntry(escapeKey);
-	document.removeEventListener('click', onOutsideInteraction);
-	document.removeEventListener('focusin', onOutsideInteraction);
+	document.removeEventListener('click', onOutsideInteraction, {
+		capture: true,
+	});
+	document.removeEventListener('focusin', onOutsideInteraction, {
+		capture: true,
+	});
 	document.removeEventListener('keydown', onEsc, { capture: true });
 };
 
@@ -1575,8 +1609,12 @@ onBeforeUnmount(() => {
 	// `shown` is a plain local ref that unmounting never resets, so the orphaned
 	// capture-phase handler keeps passing its own guard and swallowing the key.
 	removeEscapeEntry(escapeKey);
-	document.removeEventListener('click', onOutsideInteraction);
-	document.removeEventListener('focusin', onOutsideInteraction);
+	document.removeEventListener('click', onOutsideInteraction, {
+		capture: true,
+	});
+	document.removeEventListener('focusin', onOutsideInteraction, {
+		capture: true,
+	});
 	document.removeEventListener('keydown', onEsc, { capture: true });
 });
 /**

package/dist/ai/source/BbSpinner.md

@@ -8,7 +8,7 @@
 <template>
 	<span v-if="label" role="status">
 		<BbIcon class="bb-spinner" :icon="spinnerSvg" :size="size" />
-		<span class="sr-only">{{ label }}</span>
+		<span class="bb-sr-only">{{ label }}</span>
 	</span>
 	<BbIcon v-else class="bb-spinner" :icon="spinnerSvg" :size="size" />
 </template>
@@ -47,7 +47,7 @@ export type Size = IconSize;
 export type BbSpinnerProps = Pick<BbIconProps, 'size'> & {
 	/**
 	 * Accessible loading announcement. When set, the spinner is wrapped in a
-	 * `role="status"` element containing this text rendered `sr-only`, so
+	 * `role="status"` element containing this text rendered `bb-sr-only`, so
 	 * screen readers announce the loading state. When omitted the markup is
 	 * unchanged and the spinner is purely decorative.
 	 */

package/dist/ai/source/BbTable.md

@@ -16,7 +16,7 @@
 		:inert="disabled"
 		:style="containerStyle"
 	>
-		<legend v-if="selectable" class="sr-only">{{ legendText }}</legend>
+		<legend v-if="selectable" class="bb-sr-only">{{ legendText }}</legend>
 		<!-- The caption lives OUTSIDE the table role (a `caption` role is invalid
 		there for a div table) and names the table through `aria-labelledby`. -->
 		<div
@@ -24,7 +24,7 @@
 			:id="captionId"
 			class="bb-table-caption"
 			:class="{
-				'sr-only': !displayCaption,
+				'bb-sr-only': !displayCaption,
 			}"
 		>
 			{{ caption }}
@@ -40,7 +40,7 @@
 		<div
 			v-if="reorderable || resizable"
 			:id="headerInstructionsId"
-			class="sr-only"
+			class="bb-sr-only"
 		>
 			<template v-if="reorderable"
 				>{{ t('table.reorderInstructions').value }}
@@ -63,14 +63,14 @@
 		from outside `role="menu"`. -->
 		<span
 			aria-live="polite"
-			class="bb-table-loading__text sr-only"
+			class="bb-table-loading__text bb-sr-only"
 			role="status"
 			>{{ loading ? loadingText || t('common.loadingText').value : '' }}</span
 		>
 		<template v-if="reorderable">
 			<span
 				aria-live="polite"
-				class="bb-table__reorder-status sr-only"
+				class="bb-table__reorder-status bb-sr-only"
 				role="status"
 				>{{ columnOrderStatus }}</span
 			>
@@ -175,13 +175,13 @@
 											:name="`select_all_${name || ''}`"
 											:readonly="readonly"
 										/>
-										<span class="bb-table-check__label-text sr-only"
+										<span class="bb-table-check__label-text bb-sr-only"
 											>{{ selectAllLabel || t('table.selectAllLabel').value }}
 										</span>
 									</label>
 									<span
 										v-else-if="!multiple"
-										class="bb-table-radio__label-text sr-only"
+										class="bb-table-radio__label-text bb-sr-only"
 										>{{ selectText || t('table.selectText').value }}</span
 									>
 								</span>
@@ -306,7 +306,7 @@
 								name="header:actions"
 								:text="actionsText || t('table.actionsText').value"
 							>
-								<span class="bb-table-header__content sr-only">
+								<span class="bb-table-header__content bb-sr-only">
 									{{ actionsText || t('table.actionsText').value }}
 								</span>
 							</slot>
@@ -821,7 +821,7 @@ const {
 /** Id of the caption element the grid root is labelled by. */
 const captionId = computed(() => `${tableId.value}__caption`);
 
-/** Id of the sr-only keyboard instructions every data header is described by. */
+/** Id of the bb-sr-only keyboard instructions every data header is described by. */
 const headerInstructionsId = computed(
 	() => `${tableId.value}__header_instructions`
 );
@@ -6537,7 +6537,7 @@ export type BbTableSlots<Item = any> = {
 
 	/* The label is an inline-block so the affixes keep their inline flow, and
 	   it ellipsizes within the cell; the select/actions headers keep their
-	   sr-only / control content untouched. */
+	   bb-sr-only / control content untouched. */
 	&-header:not(.bb-table-header--select):not(.bb-table-header--actions)
 		> .bb-table-header__content {
 		display: inline-block;
@@ -7115,7 +7115,7 @@ export type BbTableSlots<Item = any> = {
    dependency change (a filter, a poll, an autosave round-trip). Keep the rows
    on screen, mark them stale, and run an indeterminate bar along the header/body
    boundary. `aria-busy` on the root already carries the semantics and the
-   sr-only row in the body still announces, so the bar is decorative — hence a
+   bb-sr-only row in the body still announces, so the bar is decorative — hence a
    pseudo-element rather than a node. `.bb-table--empty` is "nothing to keep". */
 .bb-table--loading:not(.bb-table--empty) {
 	& .bb-table__body {

package/dist/ai/source/BbTooltip.md

@@ -6,7 +6,7 @@
 
 ```vue
 <template>
-	<span v-if="resolvedDescription" :id="descId" class="sr-only">{{
+	<span v-if="resolvedDescription" :id="descId" class="bb-sr-only">{{
 		resolvedDescription
 	}}</span>
 
@@ -48,7 +48,7 @@
 			:id="id"
 			class="bb-tooltip__content"
 			role="tooltip"
-			:style="{ width: parsedWidth }"
+			:style="{ '--max-w': parsedWidth }"
 		>
 			<slot>{{ text }}</slot>
 		</span>
@@ -73,7 +73,6 @@ import { warnRemovedAttrs } from '@/utilities/functions/warnRemovedAttrs';
 import CommonPopover from '../CommonPopover/CommonPopover.vue';
 import { useElementSize } from '@vueuse/core';
 import { extractDomContainer } from '@/utilities/functions/extractDomContainer';
-import { parseWidthString } from '@/utilities/functions/parseWidthString';
 import type { BbTooltipProps, BbTooltipSlots } from './types';
 import { transitions } from '@/utilities/misc/transitions';
 export type { BbTooltipProps, BbTooltipSlots };
@@ -338,10 +337,14 @@ onBeforeUnmount(() => {
 	document.removeEventListener('keydown', onEsc);
 });
 
+/** A bare number, or a number written as a string — both mean pixels. */
+const bareNumberPattern = /^-?\d*\.?\d+$/;
+const percentPattern = /^(-?\d*\.?\d+)%$/;
+
 const percentWidth = computed(() => {
-	if (!props.width) return undefined;
-	const { value, unit } = parseWidthString(props.width);
-	return unit === '%' ? value : undefined;
+	if (typeof props.width !== 'string') return undefined;
+	const match = props.width.trim().match(percentPattern);
+	return match ? parseFloat(match[1]) : undefined;
 });
 
 // Only `%` widths need the activator measured — skip the ResizeObserver for
@@ -353,13 +356,29 @@ const { width: activatorWidth } = useElementSize(
 		box: 'border-box',
 	}
 );
+
+/**
+ * `width` resolved to the `--max-w` cap. `undefined` leaves the stylesheet's
+ * default measure in place, which is also what an unmeasured percentage falls
+ * back to — a `0px` cap would collapse the bubble on the first frame.
+ *
+ * A percentage is resolved here against the activator, because CSS would
+ * resolve it against the bubble's own containing block (the viewport) instead.
+ * Every other value is handed to CSS verbatim, so `calc()`, `min()` and the
+ * width keywords work and a typo styles nothing rather than throwing during
+ * render.
+ */
 const parsedWidth = computed(() => {
-	if (!props.width) return undefined;
+	if (props.width == null || props.width === '') return undefined;
 	if (percentWidth.value != null) {
-		if (!activatorEl.value) return '0px';
+		if (!activatorWidth.value) return undefined;
 		return `${activatorWidth.value * (percentWidth.value / 100)}px`;
 	}
-	return `${parseWidthString(props.width).value}px`;
+	if (typeof props.width === 'number') {
+		return Number.isFinite(props.width) ? `${props.width}px` : undefined;
+	}
+	const raw = props.width.trim();
+	return bareNumberPattern.test(raw) ? `${raw}px` : raw;
 });
 </script>
 
@@ -466,7 +485,14 @@ export type BbTooltipProps = {
 	 */
 	delay?: number;
 	/**
-	 * Width of the tooltip bubble in pixels, or as a percentage of the activator.
+	 * Caps the width of the tooltip bubble: it wraps at this measure but still
+	 * shrinks to its text, so a short hint never sits in an oversized bubble.
+	 * A bare number is read as pixels, a percentage is measured against the
+	 * activator, and any other CSS length (`'20rem'`, `'min(320px, 90vw)'`)
+	 * is passed through.
+	 *
+	 * Replaces the default cap of `40ch`, which is also reachable in CSS as
+	 * `--max-w` on the tooltip root.
 	 */
 	width?: number | string;
 };
@@ -524,6 +550,16 @@ export type BbTooltipSlots = {
 	--fg: var(--bb-primary-fg);
 	--border-color: var(--bb-primary);
 	--fs: calc(var(--bb-fs) - 2px);
+	/*
+	 * Default measure. CommonPopover caps the bubble at the viewport minus its
+	 * `padding`, which on a wide screen is a single line running the width of
+	 * the page — unreadable, and the reason a hint needs a cap of its own.
+	 * `ch` (not px) so the column tracks the font: the same 40ch measure the
+	 * dropdown item description uses. The `width` prop overrides it by writing
+	 * `--max-w` inline on the content; a consumer can override it in CSS on
+	 * this root.
+	 */
+	--max-w: 40ch;
 	--px: 12px;
 	--py: 6px;
 
@@ -553,6 +589,17 @@ export type BbTooltipSlots = {
 		display: inline-flex;
 		font-size: var(--fs);
 		line-height: 1.4;
+		max-width: var(--max-w);
+		/* A capped bubble has to break what it cannot wrap: the hint a tooltip
+		   most often carries is a file path or a URL, and a token longer than
+		   the cap would otherwise run straight out of the painted bubble.
+		   `anywhere`, not `break-word`: the text sits in an anonymous flex item
+		   whose automatic minimum size is its min-content width, and only
+		   `anywhere` lets a break point count toward min-content — under
+		   `break-word` the item stays as wide as the longest token and
+		   overflows the cap anyway. Max-content is untouched either way, so
+		   ordinary prose still shrink-wraps to its natural width. */
+		overflow-wrap: anywhere;
 		padding: var(--py) var(--px);
 	}
 }

package/dist/ai/source/ChipsBox.md

@@ -34,7 +34,7 @@
 	widget role the input owns or controls, and the only fitting one,
 	`role="option"`, has children-presentational semantics — it would erase each
 	chip's ✕ button, a real tab stop, from the accessibility tree. -->
-	<span class="sr-only" role="status">{{ highlightAnnouncement }}</span>
+	<span class="bb-sr-only" role="status">{{ highlightAnnouncement }}</span>
 </template>
 
 <script setup lang="ts">

package/dist/ai/source/CommaBox.md

@@ -22,7 +22,7 @@
 	the only signal a highlight moved. This polite status node — mounted empty,
 	because a live region added together with its content does not announce —
 	says which item the cursor is on. -->
-	<span class="sr-only" role="status">{{ highlightAnnouncement }}</span>
+	<span class="bb-sr-only" role="status">{{ highlightAnnouncement }}</span>
 </template>
 
 <script setup lang="ts">

package/dist/ai/source/GuidesComponent.md

@@ -250,6 +250,13 @@ watch(selectedExamplePath, (examplePath) => {
 </script>
 
 <style scoped lang="postcss">
+/*
+ * Tailwind v4: an SFC \3c style> block is its own PostCSS pass, so `@apply`
+ * cannot see the theme or the class-based `dark` variant without this.
+ * Emits nothing itself — it only makes the utilities resolvable.
+ */
+@reference '../../assets/css/index.css';
+
 .guides-component {
 	@apply overflow-hidden border text-[color:var(--bb-text)];
 	background: var(--bb-panel);
@@ -278,7 +285,7 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__code {
-	@apply rounded px-1 py-0.5 font-mono text-[13px];
+	@apply rounded-sm px-1 py-0.5 font-mono text-[13px];
 	background: var(--bb-muted);
 	color: var(--bb-text);
 }
@@ -288,12 +295,12 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__select-label {
-	@apply text-[11px] font-semibold uppercase tracking-[0.06em];
+	@apply text-[11px] font-semibold tracking-[0.06em] uppercase;
 	color: var(--bb-text-muted);
 }
 
 .guides-component__select {
-	@apply w-full px-3 py-2 text-sm outline-none;
+	@apply w-full px-3 py-2 text-sm outline-hidden;
 	background: var(--bb-panel);
 	border: var(--bb-border-w) solid var(--bb-border);
 	border-radius: var(--bb-radius);
@@ -311,7 +318,7 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__tab {
-	@apply whitespace-nowrap px-2.5 py-1.5 text-[13px] transition-colors;
+	@apply px-2.5 py-1.5 text-[13px] whitespace-nowrap transition-colors;
 	border-radius: var(--bb-radius);
 	color: var(--bb-text-muted);
 }
@@ -343,7 +350,7 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__preview-card {
-	@apply border-b lg:border-b-0 lg:border-r;
+	@apply border-b lg:border-r lg:border-b-0;
 	border-color: var(--bb-border);
 }
 
@@ -352,7 +359,7 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__preview-title {
-	@apply text-[11px] font-semibold uppercase tracking-[0.06em];
+	@apply text-[11px] font-semibold tracking-[0.06em] uppercase;
 	color: var(--bb-text-muted);
 }
 
@@ -369,7 +376,7 @@ watch(selectedExamplePath, (examplePath) => {
 }
 
 .guides-component__source {
-	@apply m-0 max-h-[28rem] overflow-auto p-3 font-mono text-[13px] leading-relaxed;
+	@apply m-0 max-h-112 overflow-auto p-3 font-mono text-[13px] leading-relaxed;
 	background: color-mix(in oklab, var(--bb-text) 90%, transparent);
 	border-radius: var(--bb-radius);
 	color: color-mix(in oklab, var(--bb-panel) 90%, white);

package/dist/ai/source/OptionsContainer.md

@@ -50,7 +50,7 @@
 					<span
 						:class="{
 							[`${classPrefix}-option__text`]: true,
-							'sr-only': hideLabel,
+							'bb-sr-only': hideLabel,
 						}"
 						><slot
 							:checked="!!option.selected"

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

@@ -4,7 +4,7 @@ import n from "../BbSpinner/BbSpinner.vue.js";
 import { useBadgeHost as r } from "./badgeButtonContext.js";
 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 p = { class: "bb-badge__content sr-only" }, m = { class: "bb-badge__content" }, h = /*@__PURE__*/ l({
+var p = { class: "bb-badge__content bb-sr-only" }, m = { class: "bb-badge__content" }, h = /*@__PURE__*/ l({
 	__name: "BadgeBodyContent",
 	setup(l) {
 		let h = r() ?? e().throw("[BbBadge] internal body renderer mounted outside a badge — this is a bug.");

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

@@ -20,7 +20,7 @@ var O = ["id"], k = {
 	"aria-labelledby"
 ], j = {
 	key: 3,
-	class: "sr-only"
+	class: "bb-sr-only"
 }, M = /*@__PURE__*/ v({
 	__name: "BbBadge",
 	props: {

package/dist/components/BbBaseCheckbox/BbBaseCheckbox.vue_vue_type_script_setup_true_lang.js

@@ -78,7 +78,7 @@ var g = /*@__PURE__*/ s({
 				autofocus: _.autofocus,
 				"aria-readonly": _.readonly ? !0 : void 0,
 				checked: S.value,
-				class: "sr-only",
+				class: "bb-sr-only",
 				disabled: _.disabled,
 				id: _.id,
 				indeterminate: _.indeterminate,

package/dist/components/BbBaseDatePicker/BbBaseDatePicker.vue_vue_type_script_setup_true_lang.js

@@ -27,14 +27,14 @@ import Te from "dayjs/plugin/weekOfYear";
 //#region src/components/BbBaseDatePicker/BbBaseDatePicker.vue?vue&type=script&setup=true&lang.ts
 var Ee = {
 	"aria-live": "polite",
-	class: "sr-only"
+	class: "bb-sr-only"
 }, De = {
 	"aria-live": "polite",
-	class: "sr-only"
+	class: "bb-sr-only"
 }, Oe = { class: "bb-base-date-picker__body" }, ke = {
 	key: 0,
 	class: "bb-base-date-picker__controls"
-}, Ae = { class: "sr-only" }, je = { class: "bb-base-date-picker__nav-center" }, Me = { class: "sr-only" }, Ne = { class: "bb-base-date-picker__content" }, Pe = ["id"], w = /*@__PURE__*/ ge({
+}, Ae = { class: "bb-sr-only" }, je = { class: "bb-base-date-picker__nav-center" }, Me = { class: "bb-sr-only" }, Ne = { class: "bb-base-date-picker__content" }, Pe = ["id"], w = /*@__PURE__*/ ge({
 	__name: "BbBaseDatePicker",
 	props: {
 		disabled: { type: Boolean },
@@ -397,7 +397,7 @@ var Ee = {
 				id: `${b(Le)}-status`,
 				"aria-atomic": "true",
 				"aria-live": "polite",
-				class: "sr-only",
+				class: "bb-sr-only",
 				role: "status"
 			}, y(We.value), 9, Pe)
 		], 6));