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

package/dist/ai/source/BbPopover.md

@@ -17,12 +17,21 @@
 		}"
 	/>
 
+	<!--
+		`$attrs` is spread here as well as on the CommonPopover branch below
+		(Q18.15). `inheritAttrs: false` means nothing reaches either surface
+		unless it is spread explicitly, and this branch used to bind only its own
+		options — so a consumer `class` on `<BbPopover>` silently vanished below
+		768px, at exactly the breakpoint where the guide promises the slots carry
+		over unchanged. Vue merges the static class above with `$attrs.class`,
+		and the explicit bindings after it still win.
+	-->
 	<BbOffCanvas
 		v-if="useOffcanvas"
 		:id="popoverId"
 		v-model="isOpen"
 		class="bb-popover-offcanvas"
-		v-bind="offcanvasBindings"
+		v-bind="{ ...$attrs, ...offcanvasBindings }"
 		@hidden="onOffcanvasHidden"
 		@hide="emit('hide')"
 		@show="emit('show')"
@@ -74,7 +83,7 @@
 		v-bind="$attrs"
 	>
 		<template #default="{ availableHeight }">
-			<span
+			<div
 				class="bb-popover__panel"
 				:class="{ 'bb-popover__panel--scrollable': scrollable }"
 				:inert="panelInert"
@@ -85,7 +94,7 @@
 							: undefined,
 				}"
 			>
-				<span v-if="$slots.header" class="bb-popover__header">
+				<div v-if="$slots.header" class="bb-popover__header">
 					<slot
 						:close="close"
 						:disabled="!!disabled"
@@ -93,16 +102,16 @@
 						:open="isOpen"
 						:placement="placement"
 					/>
-				</span>
-				<span class="bb-popover__content scrollbar-border">
+				</div>
+				<div class="bb-popover__content scrollbar-border">
 					<slot
 						:close="close"
 						:disabled="!!disabled"
 						:open="isOpen"
 						:placement="placement"
 					/>
-				</span>
-				<span v-if="$slots.footer" class="bb-popover__footer">
+				</div>
+				<div v-if="$slots.footer" class="bb-popover__footer">
 					<slot
 						:close="close"
 						:disabled="!!disabled"
@@ -110,8 +119,8 @@
 						:open="isOpen"
 						:placement="placement"
 					/>
-				</span>
-			</span>
+				</div>
+			</div>
 		</template>
 	</CommonPopover>
 </template>
@@ -136,7 +145,7 @@ import { useElementSize, useIntersectionObserver } from '@vueuse/core';
 import { useUntil } from '@/composables/useUntil';
 import { useClosingInert } from '@/composables/useClosingInert';
 import { useMobile } from '@/composables/useMobile';
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
 import CommonPopover from '../CommonPopover/CommonPopover.vue';
 import BbOffCanvas from '../BbOffCanvas/BbOffCanvas.vue';
 import { extractDomContainer } from '@/utilities/functions/extractDomContainer';
@@ -150,10 +159,8 @@ import type {
 	PopoverTrigger,
 } from './types';
 import { transitions } from '@/utilities/misc/transitions';
-export type { BbPopoverProps, BbPopoverEvents, BbPopoverSlots, PopoverTrigger };
 
 defineOptions({ inheritAttrs: false });
-
 /**
  * Used by v-model to open / close the popover. A popover with no `v-model`
  * starts closed and is driven by its `trigger`.
@@ -161,7 +168,6 @@ defineOptions({ inheritAttrs: false });
  * @defaultValue `false`
  */
 const isOpen = defineModel<boolean>({ default: false });
-
 const props = withDefaults(defineProps<BbPopoverProps>(), {
 	// Declared as `undefined` (not omitted) on purpose: it keeps `adaptive`
 	// three-state. Vue would otherwise cast an *absent* Boolean prop to `false`,
@@ -176,10 +182,10 @@ const props = withDefaults(defineProps<BbPopoverProps>(), {
 	transitionDuration: transitions.medium,
 	trigger: 'click',
 });
-
 const emit = defineEmits<BbPopoverEvents>();
-
 defineSlots<BbPopoverSlots>();
+const config = useConfig();
+export type { BbPopoverProps, BbPopoverEvents, BbPopoverSlots, PopoverTrigger };
 
 if (process.env.NODE_ENV !== 'production')
 	warnRemovedAttrs('BbPopover', removedPropsFor('BbPopover'));
@@ -691,7 +697,7 @@ export type BbPopoverProps = {
 	/**
 	 * Overrides forwarded to the underlying `BbOffCanvas` when `adaptive` renders
 	 * the sheet on mobile. Merged over the adaptive defaults
-	 * (`direction: 'bottom'`, `size: 'auto'`, `draggable: true`). Ignored when
+	 * (`side: 'bottom'`, `size: 'auto'`, `draggable: true`). Ignored when
 	 * `adaptive` is `false`.
 	 */
 	offCanvasProps?: Partial<BbOffCanvasProps>;
@@ -703,7 +709,8 @@ export type BbPopoverProps = {
 	padding?: number;
 	/**
 	 * Position of the popover relative to the activator.
-	 * Use `'cursor'` to anchor at the mouse/touch coordinates (hides arrow).
+	 * Use `'cursor'` to anchor at the mouse/touch coordinates.
+	 * (BbPopover never draws an arrow — arrows are tooltip-only in v3.)
 	 *
 	 * @defaultValue `'bottom'`
 	 */

package/dist/ai/source/BbProgress.md

@@ -126,8 +126,8 @@ export type BbProgressProps = {
  *   --track — track height (default 4px)
  *   --fill  — bar color (default var(--bb-primary))
  * Declared on the root (not read with a fallback) so a consumer override wins
- * and an inherited --fill from an ancestor — BbTable publishes its own --fill
- * on .bb-table — is shadowed for this subtree instead of leaking into the bar.
+ * and an inherited --fill from an ancestor (any same-named local a consumer
+ * sets up-tree) is shadowed for this subtree instead of leaking into the bar.
  */
 .bb-progress {
 	--track: 4px;

package/dist/ai/source/BbRadio.md

@@ -306,9 +306,23 @@ export type BbRadioSlots = {
 		.bb-base-input-container__layout--horizontal {
 			align-items: flex-start;
 
+			/*
+			 * `align-items` + `min-height` are what pin the control to the
+			 * LABEL'S FIRST LINE instead of the block centre — measured: with a
+			 * 4-line label the control's mid sits exactly on the first line's
+			 * mid, and 28px above the block centre.
+			 *
+			 * There used to be a `display: inline-flex` here too, and it was
+			 * doing none of that vertical work — but it silently killed
+			 * `input-position`, whose only lever is `justify-items` (a grid
+			 * property, inert on a flex container). So a described row with
+			 * `input-position="right"` painted its control at the START of the
+			 * column: 182px out on a 198px column (Q20.2). Removing the one
+			 * declaration restores left/center/right and leaves the vertical
+			 * geometry byte-identical.
+			 */
 			.bb-base-input-container__control {
 				align-items: center;
-				display: inline-flex;
 				min-height: var(--bb-label-lh);
 			}
 		}

package/dist/ai/source/BbRadioGroup.md

@@ -241,7 +241,9 @@ export type BbRadioGroupProps<T> = {
 	hasWarning?: boolean;
 
 	/**
-	 * Visually hides the label of the input while maintaining accessibility.
+	 * Visually hides each option's label text (the text rendered next to every
+	 * input) while keeping it accessible to screen readers.
+	 * Does not affect the fieldset legend — use `hideLegend` for that.
 	 */
 	hideLabel?: boolean;
 

package/dist/ai/source/BbSelect.md

@@ -67,7 +67,7 @@
 				:multiple="multiple"
 				:name="name"
 				:no-data-text="noDataText"
-				:off-canvas-props="offCanvasProps"
+				:off-canvas-props="resolvedOffCanvasProps"
 				:placeholder="placeholder"
 				:prefill="prefill"
 				:prepend:icon="props['prepend:icon']"
@@ -116,6 +116,9 @@
 				<template #group="data">
 					<slot name="group" v-bind="data" />
 				</template>
+				<template #chip="data">
+					<slot name="chip" v-bind="data" />
+				</template>
 			</BaseSelect>
 		</template>
 	</BaseInputContainer>
@@ -126,7 +129,7 @@ import { computed, ref } from 'vue';
 import BaseInputContainer from '../BbBaseInputContainer/BbBaseInputContainer.vue';
 import BaseSelect from '../BbBaseSelect/BbBaseSelect.vue';
 import { useMobile } from '@/composables/useMobile';
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
 import { removedPropsFor } from '@/deprecation/removedProps';
 import { warnRemovedAttrs } from '@/utilities/functions/warnRemovedAttrs';
 import { isNotEmpty } from '@/utilities/functions/isNotEmpty';
@@ -153,6 +156,8 @@ const emit = defineEmits<BbSelectEvents>();
 
 defineSlots<BbSelectSlots<T>>();
 
+const config = useConfig();
+
 if (process.env.NODE_ENV !== 'production')
 	warnRemovedAttrs('BbSelect', removedPropsFor('BbSelect'));
 
@@ -167,6 +172,16 @@ const resolvedLabelMode = computed(
 	() => props.labelMode ?? config.defaultInputLabelMode
 );
 
+/**
+ * Sheet chrome: default the adaptive off-canvas title to the field label.
+ * Consumer `offCanvasProps` spread last so an explicit `title` (or any other
+ * sheet prop) still wins — same shape as BbSelectPopover's `offcanvasBindings`.
+ */
+const resolvedOffCanvasProps = computed(() => ({
+	title: props.label,
+	...props.offCanvasProps,
+}));
+
 /**
  * These events are just propagated
  */
@@ -279,6 +294,8 @@ export type BbSelectProps<T> = {
 
 	/**
 	 * Timeout used to debounce response to changes to dependencies.
+	 *
+	 * @defaultValue `0`
 	 */
 	depsDebounceTime?: number;
 
@@ -437,6 +454,8 @@ export type BbSelectProps<T> = {
 
 	/**
 	 * Timeout used to debounce response to changes to modelValue.
+	 *
+	 * @defaultValue `0`
 	 */
 	modelValueDebounceTime?: number;
 
@@ -494,6 +513,8 @@ export type BbSelectProps<T> = {
 
 	/**
 	 * Time to wait when the user stops writing in the input before querying data.
+	 *
+	 * @defaultValue `500`
 	 */
 	queryDebounceTime?: number;
 
@@ -530,6 +551,8 @@ export type BbSelectProps<T> = {
 
 	/**
 	 * How long the transition has to last in milliseconds.
+	 *
+	 * @defaultValue `250`
 	 */
 	transitionDuration?: number;
 };
@@ -583,6 +606,26 @@ export type BbSelectGroupSlotProps<T> = {
 	disabled: boolean;
 };
 
+/**
+ * Props exposed by the `chip` slot — called once per selected value in
+ * `multiple` mode, in place of the default badge.
+ */
+export type BbSelectChipSlotProps<T> = {
+	/** The selected item, exactly as it was supplied in `items`. */
+	item: T;
+	/** The item's resolved display text (what the default badge prints). */
+	text: string;
+	/** The item's resolved value — what sits in the v-model. */
+	value: any;
+	/**
+	 * `true` while the select is disabled or readonly: the chip must not offer a
+	 * way to remove itself, and `deselect` is a no-op.
+	 */
+	disabled: boolean;
+	/** Drops this value from the selection. No-op while `disabled`. */
+	deselect: () => void;
+};
+
 /**
  * Props exposed by the `header` / `footer` panel slots — identical whether the
  * select renders as a desktop popover or an adaptive bottom sheet.
@@ -646,6 +689,11 @@ export type BbSelectSlots<T> = {
 	 * Replaces the default group header rendered above grouped options.
 	 */
 	group?: (props: BbSelectGroupSlotProps<T>) => any;
+	/**
+	 * Replaces the default badge rendered for each selection in `multiple` mode.
+	 * Not called in `comma` mode, nor for the collapsed "+N" summary.
+	 */
+	chip?: (props: BbSelectChipSlotProps<T>) => any;
 	/**
 	 * Content rendered as an inline prefix inside the input field.
 	 */

package/dist/ai/source/BbSelectPopover.md

@@ -48,6 +48,7 @@
 				:autocomplete="autocomplete"
 				class="bb-select-popover__search-input"
 				:inputmode="inputmode"
+				:placeholder="searchInputAriaLabel"
 				role="searchbox"
 				:tabindex="shown ? 0 : -1"
 				type="text"
@@ -150,8 +151,8 @@
 	</DefineOptions>
 
 	<!-- Mobile adaptive surface: a bottom sheet that reuses the search + options
-	verbatim and adds a dedicated representation of the current selection (chips for
-	multiple, the selected label for single) between them. -->
+	verbatim. In `multiple` mode it also surfaces the current selection as
+	removable chips above the search. -->
 	<BbOffCanvas
 		v-if="useOffcanvas"
 		v-model="shown"
@@ -162,6 +163,10 @@
 		<template v-if="$slots.header" #header>
 			<slot name="header" v-bind="panelSlotProps" />
 		</template>
+		<!-- `tabindex="-1"`: the sheet's own opening focus target. Not focusable
+		by Tab — only programmatically, by BbOffCanvas's `focusTarget`. See the
+		`focusTarget` note in `offcanvasBindings` for why the sheet focuses its
+		container rather than the search field or an option. -->
 		<div
 			class="bb-select-popover bb-select-popover--sheet"
 			:class="{
@@ -171,11 +176,13 @@
 				'bb-select-popover--reloading': isReloading,
 				'bb-select-popover--clearable-active': hasClearableValue,
 			}"
+			tabindex="-1"
 		>
-			<!-- Current selection sits above the search: chips for multiple (as in the
-			control), a plain label for single. Hidden entirely when nothing is picked. -->
+			<!-- Current selection as removable chips — multiple only. Single relies
+			on the listbox checkmark; a chip above the search read as unexpected
+			chrome on a one-pick sheet (and single closes on pick anyway). -->
 			<div
-				v-if="selectedOptions.length"
+				v-if="multiple && selectedOptions.length"
 				class="bb-select-popover__sheet-selection"
 			>
 				<div class="bb-select-popover__sheet-chips">
@@ -294,7 +301,7 @@ import { useLocale } from '@/composables/useLocale';
 import { useMobile } from '@/composables/useMobile';
 import { provideSheetSurface } from '@/composables/useSheetSurface';
 import { usePrefill } from '@/composables/usePrefill';
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
 import { useUntil } from '@/composables/useUntil';
 import { useClosingInert } from '@/composables/useClosingInert';
 import { wait } from '@/utilities/functions/wait';
@@ -351,6 +358,8 @@ const emit = defineEmits<BbSelectPopoverEvents>();
 
 defineSlots<BbSelectPopoverSlots<Item>>();
 
+const config = useConfig();
+
 if (process.env.NODE_ENV !== 'production')
 	warnRemovedAttrs('BbSelectPopover', removedPropsFor('BbSelectPopover'));
 
@@ -778,6 +787,8 @@ const hasInteracted = ref(false);
 const {
 	getter,
 	debouncedGetter,
+	clientReproducible,
+	hydratedFromSsr,
 	items: internalItems,
 	loading,
 } = useItemsGetter({
@@ -830,6 +841,8 @@ const {
 	prefill: prefillItems,
 	markPrefilled,
 } = usePrefill({
+	alreadyLoaded: hydratedFromSsr,
+	clientReproducible,
 	trigger: computed(
 		() =>
 			// Array `items` are never lazy: there is no request to defer, so waiting
@@ -1132,11 +1145,43 @@ const offcanvasBindings = computed(() => ({
 	side: 'bottom' as const,
 	size: 'auto' as const,
 	draggable: true,
-	// In sheet mode skip selected chips: focus the search field when writable,
-	// otherwise land on the first interactive option for immediate keyboard nav.
-	focusTarget: computedAllowWriting.value
-		? '.bb-select-popover__search-input'
-		: '.bb-listbox__option[role="option"]:not(.bb-listbox__option--disabled), .bb-select-popover__focus-proxy',
+	/*
+	 * The sheet focuses ITSELF — not the search field, not an option.
+	 *
+	 * This surface only exists on mobile, and both of the obvious targets are
+	 * wrong there:
+	 *
+	 * - The search field raises the virtual keyboard the instant the sheet
+	 *   starts animating in. The viewport resizes under a sheet that is still
+	 *   moving, and the whole panel jumps. (The chip handlers a few lines up
+	 *   already fight the same keyboard flicker from the other direction.)
+	 * - The first option paints a focus ring on a row the user has not chosen,
+	 *   which on a touch surface reads as "already selected".
+	 *
+	 * So focus goes to the sheet container, the WAI-APG fallback when a dialog
+	 * has no natural first control: focus is inside the dialog, so the modal is
+	 * announced, Escape works, the trap holds, and closing returns focus to the
+	 * activator — with no keyboard and nothing pre-highlighted. Typing is one
+	 * tap away, which is how a touch user reaches a search field anyway.
+	 *
+	 * Known trade-off: arrow-key navigation is wired to the search input and
+	 * the focus proxy, so a hardware keyboard on a tablet must Tab into the
+	 * field first. The desktop popover — where a keyboard is the normal input —
+	 * is untouched and still focuses the field or the first option.
+	 */
+	focusTarget: '.bb-select-popover--sheet',
+	/*
+	 * No ✕ on this sheet (owner's call). A bottom sheet already offers three
+	 * ways out that a touch user reaches first — drag it down, tap the
+	 * backdrop, or press Back/Escape — and the picker's own job (tap an option)
+	 * dismisses it too. The close control only added chrome above the search
+	 * field, in the one surface with the least room for it.
+	 *
+	 * Before the spread below, so `offCanvasProps: { hideClose: false }` still
+	 * brings it back.
+	 */
+	hideClose: true,
+
 	disabled: props.disabled,
 	transitionDuration: props.transitionDuration,
 	// Name the modal sheet after its activator: with no `title` the dialog root
@@ -2004,7 +2049,9 @@ export type BbSelectPopoverSlots<Item> = {
 ## Styles
 
 ```css
-/* @inherit --transition-duration --option-height --option-font-size — set inline by the component */
+/* @inherit --transition-duration --option-height --option-font-size — set inline by the component;
+   @inherit --py --close-size — the adaptive sheet's rules target BbOffCanvas
+   elements, which declare both on the panel */
 .bb-select-popover {
 	overflow: visible;
 	text-align: left;
@@ -2087,6 +2134,13 @@ export type BbSelectPopoverSlots<Item> = {
 		padding: 0;
 		padding-right: calc(var(--bb-input-icon) + 0.5rem);
 		width: 100%;
+
+		/* Same cue BbDropdown's group search uses — empty field still reads as
+		   a search box when the lens alone is not enough. */
+		&::placeholder {
+			color: var(--bb-text-muted);
+			opacity: 0.8;
+		}
 	}
 
 	.bb-select-popover__search-icon {
@@ -2275,9 +2329,11 @@ export type BbSelectPopoverSlots<Item> = {
 					/* GroupedListBox virtualizes whole groups, so its options flow
 					   inside the group box instead of being placed by the row
 					   virtualizer. Must stay AFTER — or at least out-specify — the
-					   `position: absolute` below. */
+					   `position: absolute` below. `relative`, not `static`: still in
+					   flow, but the row stays the containing block for its absolute
+					   selection check (see `-check` below). */
 					.bb-listbox__group > .bb-listbox__option {
-						position: static;
+						position: relative;
 					}
 
 					/* One block: the virtualizer's absolute positioning and the row's
@@ -2330,10 +2386,22 @@ export type BbSelectPopoverSlots<Item> = {
 							white-space: nowrap;
 						}
 
+						/*
+						 * Selection check is out of flow. Every row mounts the glyph
+						 * (its stroke animates in when selected), so leaving it in the
+						 * flex row would reserve the icon + gap on EVERY row and make
+						 * unselected labels ellipsize as if something followed them.
+						 * Absolute + pad-only-when-selected lets an unselected label
+						 * use the full row — same treatment as BbDropdown's item check.
+						 */
 						&-check {
 							color: var(--bb-text);
-							flex-shrink: 0;
 							height: var(--option-font-size, var(--bb-fs));
+							inset-inline-end: 0.5rem;
+							pointer-events: none;
+							position: absolute;
+							top: 50%;
+							transform: translateY(-50%);
 							width: var(--option-font-size, var(--bb-fs));
 
 							path {
@@ -2345,6 +2413,12 @@ export type BbSelectPopoverSlots<Item> = {
 						}
 
 						&--selected {
+							/* Keep the label clear of the absolute check: row padding +
+							   the glyph + the gap the flex row used to supply. */
+							padding-inline-end: calc(
+								0.5rem + var(--option-font-size, var(--bb-fs)) + 0.5rem
+							);
+
 							.bb-listbox__option-check {
 								path {
 									stroke-dashoffset: 0;
@@ -2399,6 +2473,42 @@ export type BbSelectPopoverSlots<Item> = {
 /* sits above the search. Declared after the base block so equal-specificity  */
 /* overrides (width, listbox max-height) win on source order.                 */
 /* ------------------------------------------------------------------------- */
+
+/* Picker chrome: centre the sheet title (BbSelect passes `label`) the same way
+   BbDropdown centres its adaptive drill-in nav. Scoped to this off-canvas only —
+   general OffCanvas / dialog titles stay start-aligned. `flex: 1` so
+   `text-align: center` spans the header; when a consumer restores the ×,
+   mirror its reserved right gutter on the left so the label stays visually
+   centred. */
+.bb-select-popover-offcanvas .bb-offcanvas__title {
+	flex: 1 1 auto;
+	text-align: center;
+
+	&:has(~ .bb-close-button) {
+		padding-left: calc(var(--close-size) + 4px);
+	}
+}
+
+/* Hairline under the title separates picker chrome from the body (search +
+   options). The search field no longer carries that role — see the sheet
+   search restyle below. */
+.bb-select-popover-offcanvas .bb-offcanvas__header {
+	/* Default OffCanvas bottoms the header at half `--py`; full `--py` opened
+	   too much air above the rule. Nudge two pixels under full for a tighter
+	   title→divider read without collapsing back to the jammed half. */
+	padding-bottom: calc(var(--py) - 6px);
+}
+
+/* Body used to start flush under the header (`padding-top: 0`). Give the
+   search / chips a clear step down from the title rule. Specificity must beat
+   BbOffCanvas's nested `.bb-offcanvas .bb-offcanvas__body .bb-offcanvas__body-content`
+   shorthand (`padding: 0 …`). */
+.bb-offcanvas.bb-select-popover-offcanvas
+	.bb-offcanvas__body
+	.bb-offcanvas__body-content {
+	padding-top: 0.5rem;
+}
+
 .bb-select-popover.bb-select-popover--sheet {
 	display: flex;
 	flex-direction: column;
@@ -2408,11 +2518,15 @@ export type BbSelectPopoverSlots<Item> = {
 }
 
 .bb-select-popover--sheet {
+	outline: none;
 	/* Selection sits above the search; search + listbox keep the popover styling
 	   (they are the same `.bb-select-popover` descendants). */
 	.bb-select-popover__sheet-selection {
 		flex-shrink: 0;
-		padding: 0 0.25rem 0.625rem;
+		/* Tight to the search below so chips + field read as one cluster under
+		   the title, not three stacked bands. Inline inset is the OffCanvas
+		   body's `--px`. */
+		padding: 0 0 0.5rem;
 		text-align: left;
 	}
 
@@ -2433,13 +2547,28 @@ export type BbSelectPopoverSlots<Item> = {
 		--clear-size: 1.25rem;
 	}
 
-	.bb-select-popover__sheet-single {
-		color: var(--bb-text);
-		font-size: var(--bb-input-fs);
-		line-height: var(--bb-leading);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+	/* Soft filled field instead of the popover's underline rule: still reads as
+	   a tap target, but stops competing with the title divider for hierarchy.
+	   `--bb-muted` is the library's 6% text wash — faint on both themes.
+	   Inline inset is the OffCanvas body's `--px`. */
+	.bb-select-popover__search-container {
+		background-color: var(--bb-muted);
+		border-bottom: 0;
+		border-radius: var(--bb-radius);
+		margin-bottom: 0.25rem;
+		padding: 0.625rem 0.75rem;
+		transition: background-color var(--bb-transition-fast) ease;
+
+		/* One emphasis stop above the resting --bb-muted (6%) fill. */
+		&:focus-within {
+			background-color: color-mix(in oklab, var(--bb-text) 8%, var(--bb-panel));
+		}
+	}
+
+	/* Busy strip sits on the field's bottom edge (no border to overlay). */
+	.bb-select-popover__search-strip {
+		border-radius: 0 0 var(--bb-radius) var(--bb-radius);
+		bottom: 0;
 	}
 
 	/* Options list breathes a little more on a sheet and scrolls internally. */
@@ -2453,6 +2582,25 @@ export type BbSelectPopoverSlots<Item> = {
 			calc(var(--option-h) * 9 + 0.5rem),
 			calc(round(down, 55dvh, var(--option-h)) - 1px)
 		);
+		/* Popover listbox pads 0.25rem so options sit inside the bubble; the
+		   sheet body already pads `--px`. Keep the block pad for the first/last
+		   row, drop the inline pad that was lining the fill up with the field. */
+		padding-inline: 0;
+
+		/* Popover options are `padding-left: 0.5rem`. +4px so the label shares
+		   the search field's text edge (`padding-inline: 0.75rem` on the fill).
+		   `padding-left` (not `-inline-start`): the popover longhand would
+		   otherwise win and swallow the extra 4px. */
+		span[role='listbox'] .bb-listbox__option,
+		.bb-listbox__group > .bb-listbox__option {
+			padding-left: calc(0.5rem + 4px);
+		}
+
+		.bb-listbox__group-header,
+		.bb-listbox__loading,
+		.bb-listbox__no-data {
+			padding-left: calc(0.5rem + 4px);
+		}
 	}
 }
 

package/dist/ai/source/BbSlider.md

@@ -70,18 +70,17 @@
 import BaseInputContainer from '../BbBaseInputContainer/BbBaseInputContainer.vue';
 import BaseSlider from '../BbBaseSlider/BbBaseSlider.vue';
 import { ref, computed } from 'vue';
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
 import { removedPropsFor } from '@/deprecation/removedProps';
 import { warnRemovedAttrs } from '@/utilities/functions/warnRemovedAttrs';
 import { resolveEnumProp } from '@/utilities/functions/resolveEnumProp';
 import type { BbSliderProps, BbSliderEvents, BbSliderSlots } from './types';
-export type { BbSliderProps, BbSliderEvents, BbSliderSlots };
 
 const props = withDefaults(defineProps<BbSliderProps>(), {});
-
 const emit = defineEmits<BbSliderEvents>();
-
 defineSlots<BbSliderSlots>();
+const config = useConfig();
+export type { BbSliderProps, BbSliderEvents, BbSliderSlots };
 
 if (process.env.NODE_ENV !== 'production')
 	warnRemovedAttrs('BbSlider', removedPropsFor('BbSlider'));

package/dist/ai/source/BbSwitch.md

@@ -164,9 +164,23 @@ export type BbSwitchSlots = {
 		.bb-base-input-container__layout--horizontal {
 			align-items: flex-start;
 
+			/*
+			 * `align-items` + `min-height` are what pin the control to the
+			 * LABEL'S FIRST LINE instead of the block centre — measured: with a
+			 * 4-line label the control's mid sits exactly on the first line's
+			 * mid, and 28px above the block centre.
+			 *
+			 * There used to be a `display: inline-flex` here too, and it was
+			 * doing none of that vertical work — but it silently killed
+			 * `input-position`, whose only lever is `justify-items` (a grid
+			 * property, inert on a flex container). So a described row with
+			 * `input-position="right"` painted its control at the START of the
+			 * column: 166px out on a 198px column (Q20.2). Removing the one
+			 * declaration restores left/center/right and leaves the vertical
+			 * geometry byte-identical.
+			 */
 			.bb-base-input-container__control {
 				align-items: center;
-				display: inline-flex;
 				min-height: var(--bb-label-lh);
 			}
 		}