bitboss-ui 3.0.0-beta.47 → 3.0.0-beta.49

package/dist/ai/source/BbButton.md

@@ -69,7 +69,8 @@
 <script setup lang="ts">
 import { BbBaseButton, BbSpinner } from '@/index';
 import BbIcon from '../BbIcon/BbIcon.vue';
-import { computed, mergeProps, ref, useAttrs, watchEffect } from 'vue';
+import { computed, inject, mergeProps, ref, useAttrs, watchEffect } from 'vue';
+import { BB_FORM_SUBMIT_LOCK } from '@/composables/formSubmitLock';
 import { pickBy } from '@/utilities/functions/pickBy';
 import { noop } from '@/utilities/functions/noop';
 import { useLocale } from '@/composables/useLocale';
@@ -81,6 +82,7 @@ import { extractDomContainer } from '@/utilities/functions/extractDomContainer';
 import { isEqual } from '@/utilities/functions/isEqual';
 import { usePassthrough } from '@/composables/usePassthrough';
 import { BB_BUTTON_PT, type BbButtonProps, type BbButtonSlots } from './types';
+import { useToggleRoving } from './toggleRoving';
 import type { Sizes as SizeMap } from '@/types/SizeScale';
 type Sizes = keyof SizeMap;
 
@@ -125,7 +127,7 @@ if (process.env.NODE_ENV !== 'production') {
 		logger.warn(
 			'BbButton: `aria-pressed` is managed by the component and your binding is ignored. ' +
 				'Bind `v-model` (with `true-value`/`false-value` when the state is not boolean) — ' +
-				'that sets `aria-pressed`, applies `bb-button--active`, and flips the value on click.'
+				'that sets `aria-pressed`, applies `bb-button--pressed`, and flips the value on click.'
 		);
 	});
 }
@@ -143,8 +145,16 @@ const forwardedAttrs = computed(() => {
 
 const internalLoading = ref(0);
 
+// Q60.17: a `type="submit"` button inside a BbForm spins while the form's
+// save runs (unless the form sets `disable-submit-lock`). Other buttons in
+// the form (Cancel, a row action) are untouched.
+const formLock = inject(BB_FORM_SUBMIT_LOCK, null);
+
 const loading = computed(
-	() => props.loading || (!!internalLoading.value && !props.disableAutoLoading)
+	() =>
+		props.loading ||
+		(!!internalLoading.value && !props.disableAutoLoading) ||
+		(props.type === 'submit' && !!formLock?.locked())
 );
 
 /** Latches on the first load; gates the spinner's <Transition> — see the template. */
@@ -166,6 +176,7 @@ const passthrough = usePassthrough({
 	active: {
 		loading: () => loading.value,
 		disabled: () => !!props.disabled,
+		pressed: () => isToggle.value && isPressed.value,
 	},
 });
 
@@ -288,11 +299,35 @@ const softDisabled = computed(
 	() => loading.value && !props.interactiveWhileLoading
 );
 
+/**
+ * Adjacent `group` toggles are one Tab stop with arrow keys inside
+ * (Q44.25-001, see `toggleRoving.ts`). A consumer `tabindex` opts a button out.
+ */
+const roving = useToggleRoving(
+	buttonDom,
+	computed(() => !!props.group && isToggle.value && !('tabindex' in attrs)),
+	() => [isPressed.value, props.disabled, softDisabled.value]
+);
+
+/**
+ * The `tabindex` / `aria-disabled` we mean, or nothing. Written as `undefined`
+ * they used to reach `mergeProps` after the forwarded attrs and erase a
+ * consumer's own `tabindex` / `aria-disabled`: an explicit attr wins unless we
+ * mean one (loading takes the button out of the tab order either way).
+ */
+const managedFocus = computed(() => {
+	const tabindex = softDisabled.value ? -1 : roving.tabindex.value;
+	return {
+		...(softDisabled.value ? { 'aria-disabled': true } : {}),
+		...(tabindex === undefined ? {} : { tabindex }),
+	};
+});
+
 const rootBindings = computed(() =>
 	mergeProps(
 		propsToPass.value,
 		{
-			'aria-disabled': softDisabled.value ? true : undefined,
+			...managedFocus.value,
 			'aria-pressed': isToggle.value ? isPressed.value : undefined,
 			class: [
 				'bb-button',
@@ -302,13 +337,14 @@ const rootBindings = computed(() =>
 					'bb-button--soft-disabled': softDisabled.value,
 					'bb-button--group': props.group,
 					'bb-button--icon': !!props.icon,
-					'bb-button--active': isToggle.value && isPressed.value,
+					'bb-button--pressed': isToggle.value && isPressed.value,
 					[`bb-button--${props.variant}`]: props.variant !== 'none',
 				},
 			],
 			disabled: props.disabled,
-			tabindex: softDisabled.value ? -1 : undefined,
 			onClick,
+			onFocusin: roving.onFocusin,
+			onKeydown: roving.onKeydown,
 		},
 		passthrough.root
 	)
@@ -358,17 +394,24 @@ type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
  */
 export type BbButtonPtPart = 'root' | 'icon' | 'spinner' | 'text';
 /**
- * Passthrough states of `BbButton`: true while `--loading` / `--disabled`.
+ * Passthrough states of `BbButton`: true while `--loading` / `--disabled` /
+ * `--pressed`. There is no `active` state (the pointer press is Tailwind's
+ * `active:` variant) and no `current` state (a link to the current route is
+ * `activeClass` / `exactActiveClass`).
  *
  * @state disabled - Component-wide: the button is `disabled`.
  * @state loading - Component-wide: `loading` is on — the spinner shows and
  *   the button ignores the pointer.
+ * @state pressed - Component-wide: a toggle button (`v-model`) is on —
+ *   `aria-pressed="true"`, `--pressed` on the root.
  */
-export type BbButtonPtState = 'loading' | 'disabled';
+export type BbButtonPtState = 'loading' | 'disabled' | 'pressed';
 /** The runtime lists the resolver is wired with — kept next to the types so the two cannot drift. */
 export const BB_BUTTON_PT = {
 	parts: ['root', 'icon', 'spinner', 'text'],
-	states: ['disabled', 'loading'],
+	// Order = precedence, last wins: a pressed toggle that is also disabled or
+	// loading shows the disabled / loading styling.
+	states: ['pressed', 'disabled', 'loading'],
 } as const satisfies {
 	parts: readonly BbButtonPtPart[];
 	states: readonly BbButtonPtState[];
@@ -455,7 +498,10 @@ export type BbButtonProps = {
 	exactActiveClass?: string;
 
 	/**
-	 * Identifies the button as part of a button group.
+	 * Identifies the button as part of a button group: adjacent `group`
+	 * buttons fuse into one segment (shared borders and radius). Adjacent
+	 * `group` toggles (each with a `v-model`) are also one Tab stop, with
+	 * ArrowLeft / ArrowRight / Home / End moving between them.
 	 */
 	group?: boolean;
 
@@ -877,15 +923,6 @@ export type BbButtonSlots = {
 	border-radius: var(--r);
 	border-style: solid;
 	border-width: var(--bw);
-	/* Resting lift, but only on a PLATE — primary, secondary, outline and
-	   destructive opt in below. Ghost, link and `none` stay flat whatever the
-	   theme asks for, because a lift on a transparent box reads as a bug.
-
-	   The plates read `--elev-tier`, not `--bb-elev` directly, so the size
-	   blocks can drop xs and sm to the small tier without handing a shadow to
-	   the flat variants. */
-	--elev-tier: var(--bb-elev); /* the shadow a plate variant may take */
-	--elev: 0 0 0 0 transparent; /* the shadow painted; flat variants keep this */
 	box-shadow:
 		var(--elev),
 		0px 0px 0px 0px var(--ring-color);
@@ -897,14 +934,23 @@ export type BbButtonSlots = {
 	justify-content: center;
 	line-height: var(--fs);
 	min-height: var(--h);
-	padding-left: var(--px);
-	padding-right: var(--px);
+	padding-inline-end: var(--px);
+	padding-inline-start: var(--px);
 	transition-duration: var(--bb-transition-fast);
 	transition-property:
 		box-shadow, color, background-color, border-color, min-height, font-size,
 		padding-left;
 	transition-timing-function: var(--bb-ease);
 	vertical-align: top;
+	/* Resting lift, but only on a PLATE — primary, secondary, outline and
+	   destructive opt in below. Ghost, link and `none` stay flat whatever the
+	   theme asks for, because a lift on a transparent box reads as a bug.
+
+	   The plates read `--elev-tier`, not `--bb-elev` directly, so the size
+	   blocks can drop xs and sm to the small tier without handing a shadow to
+	   the flat variants. */
+	--elev-tier: var(--bb-elev); /* the shadow a plate variant may take */
+	--elev: 0 0 0 0 transparent; /* the shadow painted; flat variants keep this */
 
 	&:hover:not(.bb-base-button--disabled) {
 		background-color: var(--bg-hover);
@@ -1004,7 +1050,7 @@ export type BbButtonSlots = {
 		   rules above, which paint `border-color` on the button and would
 		   otherwise take the left edge with them. */
 		& + .bb-button.bb-button--group {
-			border-left-color: color-mix(
+			border-inline-start-color: color-mix(
 				in oklab,
 				var(--bb-primary) 60%,
 				var(--bb-border)
@@ -1022,7 +1068,7 @@ export type BbButtonSlots = {
 		--elev: var(--elev-tier);
 
 		& + .bb-button.bb-button--group {
-			border-left-color: var(--bb-secondary-pressed);
+			border-inline-start-color: var(--bb-secondary-pressed);
 		}
 	}
 
@@ -1092,19 +1138,19 @@ export type BbButtonSlots = {
 
 	&.bb-button--icon {
 		min-width: var(--h);
-		padding-left: 0;
-		padding-right: 0;
+		padding-inline-end: 0;
+		padding-inline-start: 0;
 	}
 
 	&:has(.bb-button__prepend-icon),
 	&.bb-button--loading:not(.bb-button--icon):not(
 			:has(.bb-button__append-icon)
 		) {
-		padding-left: calc(var(--px) * 0.65);
+		padding-inline-start: calc(var(--px) * 0.65);
 	}
 
 	&:has(.bb-button__append-icon) {
-		padding-right: calc(var(--px) * 0.65);
+		padding-inline-end: calc(var(--px) * 0.65);
 	}
 
 	&.bb-button--soft-disabled {
@@ -1125,7 +1171,7 @@ export type BbButtonSlots = {
 
 			/* No icon to hide behind: carve the spinner's slot out of the label. */
 			+ .bb-button__text {
-				margin-left: calc(var(--gap) + var(--icon-size));
+				margin-inline-start: calc(var(--gap) + var(--icon-size));
 			}
 		}
 
@@ -1137,21 +1183,21 @@ export type BbButtonSlots = {
 			}
 
 			.bb-spinner + .bb-button__text {
-				margin-left: 0;
+				margin-inline-start: 0;
 			}
 		}
 	}
 
 	&.bb-button--group {
 		&:has(+ .bb-button--group) {
-			border-bottom-right-radius: 0;
-			border-right-width: 0;
-			border-top-right-radius: 0;
+			border-end-end-radius: 0;
+			border-inline-end-width: 0;
+			border-start-end-radius: 0;
 		}
 
 		& + .bb-button--group {
-			border-bottom-left-radius: 0;
-			border-top-left-radius: 0;
+			border-end-start-radius: 0;
+			border-start-start-radius: 0;
 		}
 	}
 
@@ -1221,7 +1267,7 @@ export type BbButtonSlots = {
 		--elev-tier: var(--bb-elev);
 	}
 	.bb-button__text {
-		margin-left: 0;
+		margin-inline-start: 0;
 		transition: margin-left var(--bb-transition-medium) var(--bb-ease);
 
 		/* Optical centering, as on BbBadge's label. Flex centers the LINE BOX,
@@ -1265,7 +1311,7 @@ export type BbButtonSlots = {
 	   by an equal negative margin, so it lands exactly on top of the neighbour
 	   it stands in for. The fade itself is the Vue <Transition> below. */
 	.bb-spinner {
-		margin-right: calc((var(--gap) + var(--icon-size)) * -1);
+		margin-inline-end: calc((var(--gap) + var(--icon-size)) * -1);
 	}
 
 	/* <Transition name="bb-button-spinner"> endpoints; the duration comes from
@@ -1280,8 +1326,8 @@ export type BbButtonSlots = {
 	   it overlays the append icon by the same zero-cost trick. */
 	&:has(.bb-button__append-icon):not(:has(.bb-button__prepend-icon)) {
 		.bb-spinner {
-			margin-left: calc((var(--gap) + var(--icon-size)) * -1);
-			margin-right: 0;
+			margin-inline-end: 0;
+			margin-inline-start: calc((var(--gap) + var(--icon-size)) * -1);
 			order: 1;
 		}
 	}

package/dist/ai/source/BbCalendar.md

@@ -1159,7 +1159,7 @@ export type BbCalendarSlots = {
 	   set inline from the column count), so it is always exactly as tall as the
 	   grid. */
 	&--datetime {
-		padding-right: var(--rail-w, 252px);
+		padding-inline-end: var(--rail-w, 252px);
 		position: relative;
 	}
 
@@ -1175,7 +1175,7 @@ export type BbCalendarSlots = {
 		contain-intrinsic-inline-size: var(--natural-w);
 
 		container: bb-calendar / inline-size;
-		padding-right: 0;
+		padding-inline-end: 0;
 		width: min(100%, var(--natural-w));
 	}
 
@@ -1360,7 +1360,7 @@ export type BbCalendarSlots = {
 		/* Out of flow only while it leaves, so the box's height is the
 		   incoming month (slots included) and can ease to it. */
 		&[class*='leave-active'] {
-			left: 0;
+			inset-inline-start: 0;
 			position: absolute;
 			top: 0;
 		}
@@ -1431,10 +1431,10 @@ export type BbCalendarSlots = {
 			border-radius: 0;
 			content: '';
 			height: calc(var(--cell) - 4px);
-			left: 0;
+			inset-inline-end: 0;
+			inset-inline-start: 0;
 			pointer-events: none;
 			position: absolute;
-			right: 0;
 			top: 2px;
 			transition: background-color var(--bb-transition-fast);
 			z-index: 0;
@@ -1448,12 +1448,12 @@ export type BbCalendarSlots = {
 		/* Endpoints extend the wash on their inner side only, under the solid cap */
 		&--first:not([class*='--last'])::before {
 			background-color: color-mix(in oklab, var(--bb-primary) 15%, transparent);
-			left: 50%;
+			inset-inline-start: 50%;
 		}
 
 		&--last:not([class*='--first'])::before {
 			background-color: color-mix(in oklab, var(--bb-primary) 15%, transparent);
-			right: 50%;
+			inset-inline-end: 50%;
 		}
 
 		/* Round the band where it terminates at a row wrap */
@@ -1473,12 +1473,12 @@ export type BbCalendarSlots = {
 
 		&--preview-end::before {
 			border-radius: 0 var(--bb-radius-sm) var(--bb-radius-sm) 0;
-			right: 2px;
+			inset-inline-end: 2px;
 		}
 
 		&--preview-start::before {
 			border-radius: var(--bb-radius-sm) 0 0 var(--bb-radius-sm);
-			left: 2px;
+			inset-inline-start: 2px;
 		}
 
 		/* Days of the previous / next month are live controls: muted, never
@@ -1501,6 +1501,7 @@ export type BbCalendarSlots = {
 				bottom: 2px;
 				content: '';
 				height: 2px;
+				/* stylelint-disable-next-line property-disallowed-list -- geometry: centred with a physical translate */
 				left: 50%;
 				position: absolute;
 				transform: translateX(-50%);
@@ -1590,7 +1591,7 @@ export type BbCalendarSlots = {
 	&__button-menu {
 		background-color: var(--bg);
 		height: 100%;
-		left: 0;
+		inset-inline-start: 0;
 		position: absolute;
 		top: 0;
 		width: 100%;
@@ -1689,7 +1690,7 @@ export type BbCalendarSlots = {
 					var(--bb-primary) 15%,
 					transparent
 				);
-				left: 50%;
+				inset-inline-start: 50%;
 			}
 
 			&--last:not([class*='--first'])::before {
@@ -1698,7 +1699,7 @@ export type BbCalendarSlots = {
 					var(--bb-primary) 15%,
 					transparent
 				);
-				right: 50%;
+				inset-inline-end: 50%;
 			}
 
 			/* Row wraps: cap the band where the grid breaks. */
@@ -1819,7 +1820,7 @@ export type BbCalendarSlots = {
  */
 @container bb-calendar (width < 335px) {
 	.bb-time-selector {
-		border-left: 0;
+		border-inline-start: 0;
 		border-top: var(--bb-border-w) solid var(--bb-border);
 		margin-top: 8px;
 		padding: 8px 0 0;
@@ -1835,7 +1836,7 @@ export type BbCalendarSlots = {
 
 @container bb-calendar (335px <= width < 385px) {
 	:is(.bb-calendar--seconds, .bb-calendar--ampm) .bb-time-selector {
-		border-left: 0;
+		border-inline-start: 0;
 		border-top: var(--bb-border-w) solid var(--bb-border);
 		margin-top: 8px;
 		padding: 8px 0 0;
@@ -1851,7 +1852,7 @@ export type BbCalendarSlots = {
 
 @container bb-calendar (385px <= width < 389px) {
 	.bb-calendar--ampm .bb-time-selector {
-		border-left: 0;
+		border-inline-start: 0;
 		border-top: var(--bb-border-w) solid var(--bb-border);
 		margin-top: 8px;
 		padding: 8px 0 0;
@@ -1867,7 +1868,7 @@ export type BbCalendarSlots = {
 
 @container bb-calendar (389px <= width < 439px) {
 	.bb-calendar--seconds.bb-calendar--ampm .bb-time-selector {
-		border-left: 0;
+		border-inline-start: 0;
 		border-top: var(--bb-border-w) solid var(--bb-border);
 		margin-top: 8px;
 		padding: 8px 0 0;

package/dist/ai/source/BbCheckbox.md

@@ -26,7 +26,7 @@
 		:layout="layout"
 		:name="name"
 		:passthrough="passthrough"
-		:readonly="readonly"
+		:readonly="fieldReadonly"
 		:reverse="reverse"
 		:show-asterisk="showAsterisk"
 		:show-hint="showHint"
@@ -71,7 +71,7 @@
 					:has-errors="!!fieldHasErrors"
 					:has-warnings="!!fieldHasWarnings && !fieldHasErrors"
 					:indeterminate="!!indeterminate"
-					:readonly="!!readonly"
+					:readonly="!!fieldReadonly"
 					v-bind="passthrough.icon"
 				/>
 				<!-- eslint-enable vue/attributes-order -->
@@ -137,6 +137,7 @@ const {
 	showAsterisk,
 	errors: fieldErrors,
 	ariaRequired: fieldAriaRequired,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbCheckbox',
 	identifierFallback: () => declaredProps.label,

package/dist/ai/source/BbCheckboxGroup.md

@@ -29,7 +29,7 @@
 		:loading="loading"
 		:name="name"
 		:passthrough="containerPassthrough"
-		:readonly="readonly"
+		:readonly="fieldReadonly"
 		:reverse="reverse"
 		:show-asterisk="showAsterisk"
 		:show-hint="showHint"
@@ -112,7 +112,7 @@
 							:has-errors="!!fieldHasErrors"
 							:has-warnings="!!fieldHasWarnings && !fieldHasErrors"
 							:indeterminate="false"
-							:readonly="!!readonly"
+							:readonly="!!fieldReadonly"
 							v-bind="passthrough.part('icon', rowStates, option.item)"
 						/>
 						<!-- eslint-enable vue/attributes-order -->
@@ -194,6 +194,7 @@ const {
 	emit,
 	showAsterisk,
 	errors: fieldErrors,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbCheckboxGroup',
 	identifierFallback: () => declaredProps.legend,
@@ -298,6 +299,7 @@ const { options } = useBaseOptions({
 	itemText: props.itemText as any,
 	itemProps: toRef(props, 'itemProps'),
 	itemValue: props.itemValue as any,
+	optionDefaults: true,
 	// A ref, not the setup-time number: a runtime `:max` change must re-gate rows.
 	max: toRef(props, 'max'),
 	selectable: toRef(props, 'selectable'),
@@ -754,14 +756,18 @@ export type BbCheckboxGroupProps<T> = {
 	/**
 	 * Defines a path that returns a property of the object to use as text or a function that returns a string.
 	 *
-	 * @defaultValue `JSON.stringify(item)`
+	 * Unset: own `label`, else `text` (`{ label, value }` needs no accessor).
+	 *
+	 * @defaultValue own `label`, else `text`, else `JSON.stringify(item)`
 	 */
 	itemText?: ItemAccessor<T, string>;
 
 	/**
 	 * Defines a path that returns a property of the object to use as value or a function that returns any value.
 	 *
-	 * @defaultValue the whole item
+	 * Unset: own `value`, even `null`.
+	 *
+	 * @defaultValue own `value`, else the whole item
 	 */
 	itemValue?: ItemAccessor<T>;
 
@@ -1072,6 +1078,7 @@ export type BbCheckboxGroupSlots<T> = {
 .bb-checkbox-group {
 	.bb-field__layout--horizontal {
 		.bb-field__label {
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- support: `float: inline-start` needs Chrome 118, above the 114 floor */
 			float: left;
 		}
 	}

package/dist/ai/source/BbCollapsible.md

@@ -130,7 +130,8 @@ export type BbCollapsibleProps = {
 	 */
 	tag?: LayoutTag;
 	/**
-	 * Prevents rendering content before it's made visible.
+	 * Renders the content at mount, while closed, instead of on the first
+	 * open. Closed content is `inert` and `aria-hidden` either way.
 	 */
 	eager?: boolean;
 	/**

package/dist/ai/source/BbColorInput.md

@@ -28,7 +28,7 @@
 		:loading="loading"
 		:name="name"
 		:passthrough="passthrough"
-		:readonly="readonly"
+		:readonly="fieldReadonly"
 		:reverse="reverse"
 		:show-asterisk="showAsterisk"
 		:show-hint="showHint"
@@ -52,7 +52,7 @@
 				ref="wrapperRef"
 				:append:icon="props['append:icon']"
 				class="bb-color-input__field"
-				:clearable="clearable && hasValue && !readonly && !disabled"
+				:clearable="clearable && hasValue && !fieldReadonly && !disabled"
 				:compact="compact"
 				:disabled="disabled"
 				:has-errors="fieldHasErrors"
@@ -61,7 +61,7 @@
 				:loading="loading"
 				:passthrough="passthrough"
 				:prepend:icon="props['prepend:icon']"
-				:readonly="readonly"
+				:readonly="fieldReadonly"
 				:variant="variant"
 				@click:clear="emit('update:modelValue', null)"
 			>
@@ -76,7 +76,7 @@
 					:aria-disabled="disabled || undefined"
 					:aria-invalid="fieldHasErrors ? true : undefined"
 					:aria-labelledby="ariaLabelledby"
-					:aria-readonly="readonly || undefined"
+					:aria-readonly="fieldReadonly || undefined"
 					:aria-required="fieldAriaRequired"
 					:autocomplete="autocomplete"
 					:autofocus="autofocus"
@@ -84,7 +84,7 @@
 					:disabled="disabled"
 					:name="name"
 					:placeholder="placeholder"
-					:readonly="readonly"
+					:readonly="fieldReadonly"
 					:required="fieldRequired"
 					size="1"
 					type="text"
@@ -99,7 +99,7 @@
 						:adaptive="adaptive"
 						:alpha="alpha"
 						:anchor="wrapperRef"
-						:disabled="disabled || readonly"
+						:disabled="disabled || fieldReadonly"
 						:eye-dropper="eyeDropper"
 						:label="indicatorLabel"
 						:model-value="fieldModel"
@@ -126,7 +126,7 @@
 							<button
 								v-bind="indicatorBindings(dotProps)"
 								class="bb-color-input__indicator"
-								:disabled="disabled || readonly"
+								:disabled="disabled || fieldReadonly"
 								:style="{ backgroundColor: fieldModel ?? undefined }"
 								type="button"
 							/>
@@ -197,6 +197,7 @@ const {
 	required: fieldRequired,
 	ariaRequired: fieldAriaRequired,
 	model: fieldModel,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbColorInput',
 	identifierFallback: () => declaredProps.label,
@@ -900,11 +901,11 @@ export type BbColorInputSlots = {
 		&::after {
 			content: '';
 			height: calc(var(--bb-input-h) - 2 * var(--bb-border-w));
-			position: absolute;
-			right: max(
+			inset-inline-end: max(
 				calc((var(--bb-input-icon) - var(--bb-input-h)) / 2),
 				calc(var(--bb-input-px) * -1)
 			);
+			position: absolute;
 			top: 50%;
 			transform: translateY(-50%);
 			width: var(--bb-input-h);

package/dist/ai/source/BbColorPalette.md

@@ -1290,7 +1290,8 @@ export type BbColorPaletteProps = {
 	 */
 	disableFlip?: boolean;
 	/**
-	 * Prevents rendering content before it's made visible.
+	 * Renders the palette panel at mount instead of on the first open (the
+	 * phone sheet's too).
 	 */
 	eager?: boolean;
 	/**

package/dist/ai/source/BbConfirm.md

@@ -313,6 +313,23 @@ export type BbConfirmProps = {
 	 */
 	size?: keyof DialogSizes;
 };
+
+/**
+ * The default slot scope of `<BbConfirmPortal>`: the ONE place this family's
+ * portal slot is typed (Q63.8), so tooling that infers `props` from the call
+ * sites hooks a single type: `P`, the type of `props`, is the seam it will
+ * feed (through a type-only prop on the portal component). Until then `P` is
+ * `any`, so `props.person.name` type-checks with no cast.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- the default is the point (Q63.8)
+export type BbConfirmPortalSlotProps<P = any> = {
+	/** The `portalProps` the `confirm()` passed. */
+	props: P;
+	/** Resolves the confirm with `true`. */
+	yes: () => void;
+	/** Resolves the confirm with `false`. */
+	no: () => void;
+};
 ```
 
 ## Styles
@@ -337,7 +354,7 @@ export type BbConfirmProps = {
 			display: flex;
 			justify-content: flex-end;
 			> :not(:last-child) {
-				margin-right: 12px;
+				margin-inline-end: 12px;
 			}
 		}
 	}