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

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

@@ -51,6 +51,7 @@
 				:prepend:icon="props['prepend:icon']"
 				:readonly="readonly"
 				:required="required"
+				:variant="variant"
 				v-bind="eventListeners"
 			>
 				<template #prepend-outer="data"
@@ -144,6 +145,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';
@@ -193,6 +195,18 @@ export type BbTagProps = {
 	 */
 	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/BbTextInput.md

@@ -57,6 +57,7 @@
 				:readonly="readonly"
 				:required="required"
 				:type="type"
+				:variant="variant"
 				v-bind="eventListeners"
 			>
 				<template #append-outer><slot name="append-outer" /></template>
@@ -136,6 +137,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 { MaskInputOptions } from 'maska';
@@ -171,6 +173,18 @@ export type BbTextInputProps = {
 	 */
 	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/BbTextarea.md

@@ -53,6 +53,7 @@
 				:readonly="readonly"
 				:required="required"
 				:rows="rows"
+				:variant="variant"
 				v-bind="eventListeners"
 			>
 				<template #append-outer><slot name="append-outer" /></template>
@@ -132,6 +133,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';
@@ -172,6 +174,18 @@ export type BbTextareaProps = {
 	 */
 	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/BbTimePickerInput.md

@@ -57,6 +57,7 @@
 				:seconds="seconds"
 				:step="step"
 				:transition-duration="transitionDuration"
+				:variant="variant"
 				v-bind="eventListeners"
 			>
 				<template #prepend-outer><slot name="prepend-outer"></slot></template>
@@ -136,6 +137,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';
@@ -184,6 +186,18 @@ export type BbTimePickerInputProps = {
 	/** Sets the component in a compact state. */
 	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. Always
 	 * visible and linked to the input via `aria-describedby` (after any

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">