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

package/dist/ai/source/BbTabsRoot.md

@@ -177,9 +177,13 @@ export type BbTabsItem<K extends string = string> = BbTabsInertiaOptions & {
 	 */
 	href?: string;
 	/**
-	 * String that identifies the tab.
+	 * Identifies the tab: what `v-model` holds while it is the active one, the
+	 * name of its slots (`#<value>` for its panel, `#<value>:label` for its
+	 * trigger, through `slotKey`) and, with `navigation`, the URL slug.
 	 */
-	key: K;
+	value: K;
+	/** Tabs have no `key` (that is `value`). Guards against the old shape. */
+	key?: never;
 	/**
 	 * Label to use as the tab text.
 	 */
@@ -196,7 +200,7 @@ export type BbTabsItem<K extends string = string> = BbTabsInertiaOptions & {
  * Passthrough parts of `BbTabs` (plans/passthrough/BbTabs.md). Tabs do not
  * "open", so there is no `open` state.
  *
- * Per-item functions: on the instance, `item` also accepts `({ item, active, … }) => PtValue | false | null | undefined` — `item` is the tab's descriptor (the element of `items`: its `key`, `label`, anything else you put on it), and every state a boolean beside it, on for it (`active`, `disabled`, …) — in the `pt` object or the `:pt:item` attribute, never on a `item:<state>` key and never in the global map or a scope (they ship as JSON). Its result is merged last, after every state entry, through the same deduper; a falsy result leaves the trigger as it was. No other part takes a function. See the passthrough guide, _Per-item functions_.
+ * Per-item functions: on the instance, `item` also accepts `({ item, active, … }) => PtValue | false | null | undefined` — `item` is the tab's descriptor (the element of `items`: its `value`, `label`, anything else you put on it), and every state a boolean beside it, on for it (`active`, `disabled`, …) — in the `pt` object or the `:pt:item` attribute, never on a `item:<state>` key and never in the global map or a scope (they ship as JSON). Its result is merged last, after every state entry, through the same deduper; a falsy result leaves the trigger as it was. No other part takes a function. See the passthrough guide, _Per-item functions_.
  *
  * @part root - The tabs' outer element, around the strip and the panels.
  * @part wrapper - The strip's outer element: the `wrapper:prepend` slot, the
@@ -397,9 +401,9 @@ export type BbTabsRootProps<K extends string = string> =
 		 */
 		manualActivation?: boolean;
 		/**
-		 * The current tab key. Used by v-model.
+		 * The active tab's `value`. Used by v-model.
 		 */
-		modelValue?: null | BbTabsItem<K>['key'];
+		modelValue?: null | BbTabsItem<K>['value'];
 		/**
 		 * Synchronizes the current tab with the URL query parameter.
 		 *
@@ -500,8 +504,8 @@ export type BbTabsRootEvents<K extends string = string> = BbTabsEvents<K>;
 
 /** Props exposed by the per-tab label slots and the generic `label` fallback slot. */
 export type BbTabsSlotProps<K extends string = string> = {
-	/** The key of the currently active tab. */
-	current: BbTabsItem<K>['key'] | null;
+	/** The `value` of the currently active tab. */
+	current: BbTabsItem<K>['value'] | null;
 	/** Zero-based index of the currently active tab. */
 	currentIndex: number;
 	/** Whether this tab is disabled. */
@@ -512,10 +516,10 @@ export type BbTabsSlotProps<K extends string = string> = {
 	isLast: boolean;
 	/** Whether this specific tab is currently active. */
 	selected: boolean;
-	/** The `label` value of this tab item. */
-	text: BbTabsItem<K>['label'];
-	/** The `key` value of this tab item. */
-	value: BbTabsItem<K>['key'];
+	/** This tab's `label`. */
+	label: BbTabsItem<K>['label'];
+	/** This tab's `value`. */
+	value: BbTabsItem<K>['value'];
 	/** Navigate to `'first'`, `'previous'`, `'next'`, or `'last'` tab. */
 	goTo: (target: 'first' | 'previous' | 'next' | 'last') => void;
 };
@@ -538,7 +542,7 @@ export type BbTabsScrollSlotProps = {
 /**
  * Slots rendered by the tab list (the strip of triggers).
  *
- * @dynamicSlot `<key>:label` {BbTabsSlotProps<K>} - One tab trigger's label, by the tab `key` through `slotKey`; beats `label`, which beats the item's `label` text.
+ * @dynamicSlot `<value>:label` {BbTabsSlotProps<K>} - One tab trigger's label, by the tab's `value` through `slotKey`; beats `label`, which beats the item's `label` text.
  */
 export type BbTabsListSlots<K extends string = string> = {
 	/**
@@ -550,16 +554,16 @@ export type BbTabsListSlots<K extends string = string> = {
 	 */
 	'wrapper:append'?: (props: BbTabsScrollSlotProps) => any;
 	/**
-	 * Fallback slot used for all tab labels when no per-tab `<key>:label` slot is provided.
+	 * Fallback slot used for all tab labels when no per-tab `<value>:label` slot is provided.
 	 */
 	label?: (props: BbTabsSlotProps<K>) => any;
 } & Record<string, ((props: BbTabsSlotProps<K>) => any) | undefined>;
 
 /**
  * Slots rendered by the tab panels — one per tab, keyed by the normalized
- * `slotKey(key)`.
+ * `slotKey(value)`.
  *
- * @dynamicSlot `<key>` {BbTabsSlotProps<K>} - One tab's content panel, by the tab `key` through `slotKey`; no fallback (an empty panel).
+ * @dynamicSlot `<value>` {BbTabsSlotProps<K>} - One tab's content panel, by the tab's `value` through `slotKey`; no fallback (an empty panel).
  */
 export type BbTabsPanelsSlots<K extends string = string> = Record<
 	string,
@@ -567,16 +571,16 @@ export type BbTabsPanelsSlots<K extends string = string> = Record<
 >;
 
 /**
- * @dynamicSlot `<key>` {BbTabsSlotProps<K>} - One tab's content panel, by the tab `key` through `slotKey`; no fallback (an empty panel).
- * @dynamicSlot `<key>:label` {BbTabsSlotProps<K>} - One tab trigger's label, by the tab `key` through `slotKey`; beats `label`, which beats the item's `label` text.
+ * @dynamicSlot `<value>` {BbTabsSlotProps<K>} - One tab's content panel, by the tab's `value` through `slotKey`; no fallback (an empty panel).
+ * @dynamicSlot `<value>:label` {BbTabsSlotProps<K>} - One tab trigger's label, by the tab's `value` through `slotKey`; beats `label`, which beats the item's `label` text.
  */
 export type BbTabsSlots<K extends string = string> = BbTabsListSlots<K> &
 	BbTabsPanelsSlots<K>;
 
 /** Props exposed by the `BbTabsRoot` default slot. */
 export type BbTabsRootSlotProps<K extends string = string> = {
-	/** The key of the currently active tab. */
-	current: BbTabsItem<K>['key'] | null;
+	/** The `value` of the currently active tab. */
+	current: BbTabsItem<K>['value'] | null;
 	/** Zero-based index of the currently active tab. */
 	currentIndex: number;
 	/** Whether the active tab is the first tab. */
@@ -585,8 +589,8 @@ export type BbTabsRootSlotProps<K extends string = string> = {
 	isLast: boolean;
 	/** Navigate to `'first'`, `'previous'`, `'next'`, or `'last'` tab. */
 	goTo: (target: 'first' | 'previous' | 'next' | 'last') => void;
-	/** Select a tab by key. */
-	select: (key: BbTabsItem<K>['key']) => void;
+	/** Select a tab by its `value`. */
+	select: (value: BbTabsItem<K>['value']) => void;
 };
 
 export type BbTabsRootSlots<K extends string = string> = {

package/dist/ai/source/BbTag.md

@@ -28,7 +28,7 @@
 		:loading="loading"
 		:name="name"
 		:passthrough="passthrough"
-		:readonly="readonly"
+		:readonly="fieldReadonly"
 		:reverse="reverse"
 		:show-asterisk="showAsterisk"
 		:show-hint="showHint"
@@ -66,7 +66,7 @@
 				:loading="loading"
 				:passthrough="passthrough"
 				:prepend:icon="props['prepend:icon']"
-				:readonly="readonly"
+				:readonly="fieldReadonly"
 				:variant="variant"
 				@click="onWrapperClick"
 				@click:clear="onClear"
@@ -88,7 +88,7 @@
 						<template v-else>
 							<ChipsBox
 								ref="chipsBox"
-								:disabled="disabled || readonly"
+								:disabled="disabled || fieldReadonly"
 								:options="selectedOptions"
 								:passthrough="passthrough"
 								size="lg"
@@ -105,14 +105,14 @@
 							:aria-disabled="disabled || undefined"
 							:aria-invalid="fieldHasErrors || undefined"
 							:aria-labelledby="ariaLabelledby"
-							:aria-readonly="readonly || undefined"
+							:aria-readonly="fieldReadonly || undefined"
 							:autocomplete="autocomplete"
 							:autofocus="autofocus"
 							class="bb-tag__input"
 							:disabled="disabled"
 							enterkeyhint="done"
 							:placeholder="placeholder"
-							:readonly="readonly"
+							:readonly="fieldReadonly"
 							:required="fieldRequired && !fieldModel.length"
 							:aria-required="inputAriaRequired"
 							size="1"
@@ -189,6 +189,7 @@ const {
 	required: fieldRequired,
 	ariaRequired: fieldAriaRequired,
 	model: fieldModel,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbTag',
 	identifierFallback: () => declaredProps.label,
@@ -1111,19 +1112,19 @@ export type BbTagSlots = {
 
 		.bb-smooth-height {
 			align-self: center;
-			text-align: left;
+			text-align: start;
 			width: 100%;
 		}
 
 		/* If there is no prepend icon, reduce left inset without clipping chip content. Also allow for the ring size to be displayed. */
 		&:not(:has(.bb-field-input__prepend-icon)) {
 			.bb-smooth-height:has(.bb-tag__badge) {
-				margin-left: calc(
+				margin-inline-start: calc(
 					var(--bb-input-px) * var(--compensation-multiplier) * -1 -
 						var(--bb-ring-size)
 				);
 				.bb-tag__input-container {
-					padding-left: var(--bb-ring-size);
+					padding-inline-start: var(--bb-ring-size);
 				}
 			}
 		}
@@ -1141,7 +1142,7 @@ export type BbTagSlots = {
 		width: 100%;
 
 		.bb-tag__badge:not(:last-child) {
-			margin-right: 0.25rem;
+			margin-inline-end: 0.25rem;
 		}
 
 		.bb-tag__input {

package/dist/ai/source/BbTextInput.md

@@ -30,7 +30,7 @@
 		:mobile="isMobile"
 		:name="name"
 		:passthrough="passthrough"
-		:readonly="readonly"
+		:readonly="fieldReadonly"
 		:reverse="reverse"
 		:show-asterisk="showAsterisk"
 		:show-hint="showHint"
@@ -61,7 +61,7 @@
 				:loading="loading"
 				:passthrough="passthrough"
 				:prepend:icon="declaredProps['prepend:icon']"
-				:readonly="readonly"
+				:readonly="fieldReadonly"
 				:reserve-append-space="clearable"
 				:variant="variant"
 				@click:clear="emit('update:modelValue', emptyValue())"
@@ -77,7 +77,7 @@
 					:aria-disabled="disabled || undefined"
 					:aria-invalid="fieldHasErrors || undefined"
 					:aria-labelledby="ariaLabelledby"
-					:aria-readonly="readonly || undefined"
+					:aria-readonly="fieldReadonly || undefined"
 					:autocomplete="autocomplete"
 					:autofocus="autofocus"
 					class="bb-text-input__input"
@@ -85,7 +85,7 @@
 					:inputmode="inputMode"
 					:name="name"
 					:placeholder="placeholder"
-					:readonly="readonly"
+					:readonly="fieldReadonly"
 					:required="fieldRequired"
 					:aria-required="fieldAriaRequired"
 					size="1"
@@ -161,6 +161,7 @@ const {
 	errors: fieldErrors,
 	required: fieldRequired,
 	ariaRequired: fieldAriaRequired,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbTextInput',
 	identifierFallback: () => declaredProps.label,

package/dist/ai/source/BbTextarea.md

@@ -29,7 +29,7 @@
 		:loading="loading"
 		:name="name"
 		:passthrough="passthrough"
-		:readonly="readonly"
+		:readonly="fieldReadonly"
 		:reverse="reverse"
 		:show-asterisk="showAsterisk"
 		:show-hint="showHint"
@@ -64,7 +64,7 @@
 				:loading="loading"
 				:passthrough="passthrough"
 				:prepend:icon="declaredProps['prepend:icon']"
-				:readonly="readonly"
+				:readonly="fieldReadonly"
 				:reserve-append-space="clearable"
 				:variant="variant"
 				@click:clear="emit('update:modelValue', emptyValue())"
@@ -81,14 +81,14 @@
 						:aria-disabled="disabled || undefined"
 						:aria-invalid="fieldHasErrors || undefined"
 						:aria-labelledby="ariaLabelledby"
-						:aria-readonly="readonly || undefined"
+						:aria-readonly="fieldReadonly || undefined"
 						:autocomplete="autocomplete"
 						:autofocus="autofocus"
 						class="bb-textarea__input scrollbar-border"
 						:disabled="disabled"
 						:name="name"
 						:placeholder="placeholder"
-						:readonly="readonly"
+						:readonly="fieldReadonly"
 						:required="fieldRequired"
 						:aria-required="fieldAriaRequired"
 						:rows="renderedRows"
@@ -161,6 +161,7 @@ const {
 	errors: fieldErrors,
 	required: fieldRequired,
 	ariaRequired: fieldAriaRequired,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbTextarea',
 	identifierFallback: () => declaredProps.label,
@@ -824,7 +825,7 @@ export type BbTextareaSlots = {
 		.bb-smooth-height {
 			align-self: center;
 			flex: 1 1 auto;
-			text-align: left;
+			text-align: start;
 		}
 
 		.bb-field-input__box {

package/dist/ai/source/BbTimePicker.md

@@ -844,7 +844,7 @@ export type BbTimePickerSlots = {
 	   rail sizing (and the mobile-sheet centring/touch scale) is shared with the
 	   time input's panel in CommonTimeSelector/index.css. */
 	.bb-time-selector {
-		margin-left: 0;
+		margin-inline-start: 0;
 	}
 }
 

package/dist/ai/source/BbTimePickerInput.md

@@ -28,7 +28,7 @@
 		:loading="loading"
 		:name="name"
 		:passthrough="passthrough"
-		:readonly="readonly"
+		:readonly="fieldReadonly"
 		:reverse="reverse"
 		:show-asterisk="showAsterisk"
 		:show-hint="showHint"
@@ -64,7 +64,7 @@
 				:loading="loading"
 				:passthrough="passthrough"
 				:prepend:icon="props['prepend:icon']"
-				:readonly="readonly"
+				:readonly="fieldReadonly"
 				:variant="variant"
 				@click="onFieldTap"
 				@click:clear="onClickClear"
@@ -169,7 +169,7 @@
 						:class="{
 							'bb-segmented-field__activator--active': shown,
 						}"
-						:disabled="disabled || readonly"
+						:disabled="disabled || fieldReadonly"
 						type="button"
 						@click.stop="open"
 						v-bind="passthrough.activator"
@@ -203,7 +203,7 @@
 				<DefinePanel>
 					<CommonTimeSelector
 						:ampm="ampm"
-						:disabled="disabled || readonly"
+						:disabled="disabled || fieldReadonly"
 						:hour="panelHour"
 						:max="max"
 						:meridiem="fields[timeTargetSegment].meridiem"
@@ -309,6 +309,7 @@ import CommonPopover from '../CommonPopover/CommonPopover.vue';
 import CommonTimeSelector from '../CommonTimeSelector/CommonTimeSelector.vue';
 import type { TimeUnit } from '../CommonTimeSelector/types';
 import { useMeridiem } from '../CommonTimeSelector/useMeridiem';
+import { formatDateOf, timeFieldsOf } from '../BbCalendar/useDayjsLocale';
 import {
 	BB_TIME_PICKER_INPUT_PT,
 	type BbTimePickerInputEvents,
@@ -339,6 +340,7 @@ const {
 	required: fieldRequired,
 	ariaRequired: fieldAriaRequired,
 	model: fieldModel,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbTimePickerInput',
 	identifierFallback: () => declaredProps.label,
@@ -1028,6 +1030,13 @@ const onFieldTap = (event: MouseEvent) => {
 		return;
 	open();
 };
+/** A key that would change a segment's value (step, clear, type). */
+const changesSegment = (event: KeyboardEvent) =>
+	event.key === 'ArrowUp' ||
+	event.key === 'ArrowDown' ||
+	event.key === 'Backspace' ||
+	event.key === 'Delete' ||
+	(event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey);
 const onSegmentKeydown = (
 	descriptor: FieldDescriptor,
 	event: KeyboardEvent
@@ -1037,6 +1046,12 @@ const onSegmentKeydown = (
 		if (!shown.value) open();
 		return;
 	}
+	// Q60.17: a read-only field (its `readonly`, or its form saving) refuses
+	// the keys that change a segment; moving between segments still works.
+	if (props.readonly && changesSegment(event)) {
+		event.preventDefault();
+		return;
+	}
 	onFieldKeydown(descriptor, event);
 };
 
@@ -1098,15 +1113,37 @@ const onTimeSelect = ({ unit, value }: { unit: TimeUnit; value: string }) => {
 
 // ── Accessible button label ─────────────────────────────────────────────────
 
+/**
+ * A `HH:mm(:ss)` model value as the locale says a time (Intl, CLDR): 12-hour
+ * with the locale's day period when the field shows `ampm` ("3:05 PM",
+ * "午後3:05"), else 24-hour ("15:05", fi "15.05"). A value that doesn't parse
+ * is read as written.
+ */
+const spokenTime = (value: string) => {
+	const match = /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/.exec(value);
+	if (!match) return value;
+	const [, h, m, s] = match;
+	return formatDateOf(
+		new Date(2000, 0, 1, +h, +m, +(s ?? 0)),
+		config.locale,
+		timeFieldsOf(!!props.ampm, !!props.seconds)
+	);
+};
+
 const accessibleButtonLabel = computed(() => {
 	if (props.range) {
 		const values = Array.isArray(props.modelValue) ? props.modelValue : [];
 		const [start, end] = values;
 		if (!start || !end) return t('timePickerInput.emptyRange').value;
-		return t('timePickerInput.changeSelectionRange', start, end).value;
+		return t(
+			'timePickerInput.changeSelectionRange',
+			spokenTime(start),
+			spokenTime(end)
+		).value;
 	}
 	if (typeof props.modelValue === 'string' && props.modelValue) {
-		return t('timePickerInput.changeSelection', props.modelValue).value;
+		return t('timePickerInput.changeSelection', spokenTime(props.modelValue))
+			.value;
 	}
 	return t('timePickerInput.emptySelection').value;
 });
@@ -1563,9 +1600,9 @@ export type BbTimePickerInputSlots = {
 .bb-time-picker-input__panel {
 	/* The panel hosts only the time columns — no calendar to align with. */
 	.bb-time-selector {
-		border-left: 0;
-		margin-left: 0;
-		padding-left: 0;
+		border-inline-start: 0;
+		margin-inline-start: 0;
+		padding-inline-start: 0;
 	}
 }
 

package/dist/ai/source/BbToast.md

@@ -383,14 +383,17 @@ export type BbToastProps = {
 }
 .bb-toast--top-left,
 .bb-toast--bottom-left {
+	/* stylelint-disable-next-line property-disallowed-list -- geometry: the `position` prop names a physical corner */
 	left: calc(var(--offset) + var(--safe-h, 0px));
 }
 .bb-toast--top-right,
 .bb-toast--bottom-right {
+	/* stylelint-disable-next-line property-disallowed-list -- geometry: the `position` prop names a physical corner */
 	right: calc(var(--offset) + var(--safe-h, 0px));
 }
 .bb-toast--top-center,
 .bb-toast--bottom-center {
+	/* stylelint-disable-next-line property-disallowed-list -- geometry: centred with a physical translate */
 	left: 50%;
 	transform: translateX(-50%);
 }
@@ -440,11 +443,11 @@ export type BbToastProps = {
 	box-sizing: border-box;
 	color: var(--fg);
 	height: var(--toast-height);
-	left: 0;
+	inset-inline-end: 0;
+	inset-inline-start: 0;
 	overflow: hidden;
 	pointer-events: auto;
 	position: absolute;
-	right: 0;
 	touch-action: none;
 
 	transform: translate3d(
@@ -587,7 +590,7 @@ export type BbToastProps = {
 /* Portal content fills the row (no icon column) and leaves room for the close
  * button when one is shown. */
 .bb-toast__content--portal {
-	padding-right: 4px;
+	padding-inline-end: 4px;
 }
 
 .bb-toast__close {
@@ -599,11 +602,11 @@ export type BbToastProps = {
 	cursor: pointer;
 	display: flex;
 	height: 22px;
+	inset-inline-end: 8px;
 	justify-content: center;
 	opacity: 0;
 	padding: 0;
 	position: absolute;
-	right: 8px;
 	top: 8px;
 	transition:
 		opacity 0.15s var(--bb-ease),
@@ -657,8 +660,8 @@ export type BbToastProps = {
 @media (max-width: 600px) {
 	.bb-toast {
 		--offset: 14px;
-		left: var(--offset);
-		right: var(--offset);
+		inset-inline-end: var(--offset);
+		inset-inline-start: var(--offset);
 		width: auto;
 	}
 	.bb-toast--top-center,
@@ -696,8 +699,8 @@ export type BbToastProps = {
 			--hit: 44px;
 			content: '';
 			height: calc(var(--hit) - 2px);
+			inset-inline-end: -8px; /* the button's inset from the card corner */
 			position: absolute;
-			right: -8px; /* the button's inset from the card corner */
 			top: -8px;
 			width: var(--hit);
 		}

package/dist/ai/source/BbToastPortal.md

@@ -308,14 +308,17 @@ export type BbToastProps = {
 }
 .bb-toast--top-left,
 .bb-toast--bottom-left {
+	/* stylelint-disable-next-line property-disallowed-list -- geometry: the `position` prop names a physical corner */
 	left: calc(var(--offset) + var(--safe-h, 0px));
 }
 .bb-toast--top-right,
 .bb-toast--bottom-right {
+	/* stylelint-disable-next-line property-disallowed-list -- geometry: the `position` prop names a physical corner */
 	right: calc(var(--offset) + var(--safe-h, 0px));
 }
 .bb-toast--top-center,
 .bb-toast--bottom-center {
+	/* stylelint-disable-next-line property-disallowed-list -- geometry: centred with a physical translate */
 	left: 50%;
 	transform: translateX(-50%);
 }
@@ -365,11 +368,11 @@ export type BbToastProps = {
 	box-sizing: border-box;
 	color: var(--fg);
 	height: var(--toast-height);
-	left: 0;
+	inset-inline-end: 0;
+	inset-inline-start: 0;
 	overflow: hidden;
 	pointer-events: auto;
 	position: absolute;
-	right: 0;
 	touch-action: none;
 
 	transform: translate3d(
@@ -512,7 +515,7 @@ export type BbToastProps = {
 /* Portal content fills the row (no icon column) and leaves room for the close
  * button when one is shown. */
 .bb-toast__content--portal {
-	padding-right: 4px;
+	padding-inline-end: 4px;
 }
 
 .bb-toast__close {
@@ -524,11 +527,11 @@ export type BbToastProps = {
 	cursor: pointer;
 	display: flex;
 	height: 22px;
+	inset-inline-end: 8px;
 	justify-content: center;
 	opacity: 0;
 	padding: 0;
 	position: absolute;
-	right: 8px;
 	top: 8px;
 	transition:
 		opacity 0.15s var(--bb-ease),
@@ -582,8 +585,8 @@ export type BbToastProps = {
 @media (max-width: 600px) {
 	.bb-toast {
 		--offset: 14px;
-		left: var(--offset);
-		right: var(--offset);
+		inset-inline-end: var(--offset);
+		inset-inline-start: var(--offset);
 		width: auto;
 	}
 	.bb-toast--top-center,
@@ -621,8 +624,8 @@ export type BbToastProps = {
 			--hit: 44px;
 			content: '';
 			height: calc(var(--hit) - 2px);
+			inset-inline-end: -8px; /* the button's inset from the card corner */
 			position: absolute;
-			right: -8px; /* the button's inset from the card corner */
 			top: -8px;
 			width: var(--hit);
 		}