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

package/dist/ai/source/BbProgress.md

@@ -10,15 +10,16 @@
 		:aria-label="label || undefined"
 		:aria-valuemax="max"
 		:aria-valuemin="min"
-		:aria-valuenow="ariaValueNow"
+		:aria-valuenow="indeterminate ? undefined : ariaValueNow"
 		class="bb-progress"
+		:class="{ 'bb-progress--indeterminate': indeterminate }"
 		role="progressbar"
 		:style="containerStyle"
-		v-bind="passthrough.rootAttrs"
+		v-bind="rootAttrs"
 	>
 		<div
 			class="bb-progress__bar"
-			:style="barStyle"
+			:style="indeterminate ? undefined : barStyle"
 			v-bind="passthrough.bar"
 		></div>
 	</div>
@@ -44,7 +45,7 @@ const props = withDefaults(defineProps<BbProgressProps>(), {
 });
 
 /**
- * Passthrough (plans/passthrough/BbProgress.md). `root` (the track) and `bar` (the fill); no states — everything it paints is configuration.
+ * Passthrough (plans/passthrough/BbProgress.md). `root` (the track) and `bar` (the fill); one state, `indeterminate`.
  */
 const passthrough = usePassthrough({
 	component: 'BbProgress',
@@ -52,14 +53,25 @@ const passthrough = usePassthrough({
 	props,
 	parts: BB_PROGRESS_PT.parts,
 	states: BB_PROGRESS_PT.states,
-	active: {},
+	active: { indeterminate: () => !!props.indeterminate },
+});
+
+/*
+ * Q60.29: an indeterminate bar reports no value, so a consumer's
+ * `aria-valuetext` (the guide suggests one for units) is held back while it is
+ * on and returns with the value.
+ */
+const rootAttrs = computed(() => {
+	const attrs = passthrough.rootAttrs as Record<string, unknown>;
+	if (!props.indeterminate || !('aria-valuetext' in attrs)) return attrs;
+	const { 'aria-valuetext': _valuetext, ...rest } = attrs;
+	return rest;
 });
 
 // aria-valuenow must sit within [valuemin, valuemax], so it mirrors the
-// clamped visual fill. There is no indeterminate mode (BbSpinner is the
-// indeterminate affordance): a `null` value reports `min`, matching the
-// empty bar it renders — never omit the attribute, as omission would signal
-// "indeterminate" to assistive tech.
+// clamped visual fill. Only `indeterminate` omits it (Q60.29: omission is how
+// a progressbar says "indeterminate" to assistive tech): a `null` value
+// reports `min`, matching the empty bar it renders.
 // NaN (a calc glitch upstream) degrades like `null`: `clamp` would pass it
 // through to aria-valuenow="NaN" and a dropped transform (a full bar).
 // ±Infinity already clamps to an end.
@@ -110,8 +122,7 @@ import type { PtMap, PtValue } from '@/types/passthrough';
  * Props for BbProgress.
  */
 /**
- * Passthrough parts of `BbProgress` (plans/passthrough/BbProgress.md). Nothing
- * it paints is a state.
+ * Passthrough parts of `BbProgress` (plans/passthrough/BbProgress.md).
  *
  * @part root - The track (the `progressbar` element); the bar follows it
  *   through its locals (`--track`, `--track-color`, `--accent`, `--r`, the
@@ -121,27 +132,45 @@ import type { PtMap, PtValue } from '@/types/passthrough';
  *   never its position.
  */
 export type BbProgressPtPart = 'root' | 'bar';
-/** The runtime lists the resolver is wired with — no states: nothing this component paints is a state. */
+/**
+ * Passthrough states of `BbProgress`.
+ *
+ * @state indeterminate - Component-wide: `indeterminate` is on; the bar
+ *   slides (pulses under reduced motion) instead of showing a value.
+ */
+export type BbProgressPtState = 'indeterminate';
+/** The runtime lists the resolver is wired with. */
 export const BB_PROGRESS_PT = {
 	parts: ['root', 'bar'],
-	states: [],
+	states: ['indeterminate'],
 } as const satisfies {
 	parts: readonly BbProgressPtPart[];
-	states: readonly never[];
+	states: readonly BbProgressPtState[];
 };
 
 // Spelled INLINE with this component's own union (Vue's SFC type resolver
 // does not substitute a generic alias's type parameters — PASSTHROUGH.md T20).
-// No state axis: a `never` state does not resolve to finite keys.
 // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
 export type BbProgressProps = {
-	[K in `pt:${BbProgressPtPart}`]?: PtValue;
+	[K in
+		| `pt:${BbProgressPtPart}`
+		| `pt:${BbProgressPtPart}:${BbProgressPtState}`]?: PtValue;
 } & {
 	/**
 	 * Passthrough, object form: the same keys as the `pt:*` attributes
-	 * without the prefix. See the `pt:<part>` row.
+	 * without the prefix. Parts: `root`, `bar`; state: `indeterminate`.
+	 */
+	pt?: PtMap<BbProgressPtPart, BbProgressPtState>;
+	/**
+	 * A wait you cannot measure yet: the bar slides back and forth (a calm
+	 * pulse under `prefers-reduced-motion`) and the progressbar reports no
+	 * value (`aria-valuenow` is omitted, as the ARIA pattern asks). The
+	 * `modelValue` is kept and shows again when this turns off. A `null`
+	 * `modelValue` alone is still an empty bar, not this.
+	 *
+	 * @defaultValue `false`
 	 */
-	pt?: PtMap<BbProgressPtPart, never>;
+	indeterminate?: boolean;
 	/**
 	 * The current progress value — a number between `min` and `max`. This is a
 	 * one-way input prop (BbProgress is a display component and never emits
@@ -215,4 +244,39 @@ export type BbProgressProps = {
 	transition: transform var(--transition-duration);
 	width: 100%;
 }
+
+/*
+ * Q60.29 — `indeterminate`: a wait with no measurable end. A short bar slides
+ * across the track (transform only: composited). Under reduced motion the
+ * full bar breathes instead, slowly, without moving.
+ */
+.bb-progress--indeterminate > .bb-progress__bar {
+	animation: bb-progress-slide 1.6s var(--bb-ease) infinite;
+	transition: none;
+	width: 40%;
+
+	@media (prefers-reduced-motion: reduce) {
+		animation: bb-progress-pulse 2.4s ease-in-out infinite;
+		width: 100%;
+	}
+}
+
+@keyframes bb-progress-slide {
+	from {
+		transform: translateX(-100%);
+	}
+	to {
+		transform: translateX(250%);
+	}
+}
+
+@keyframes bb-progress-pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.4;
+	}
+}
 ```

package/dist/ai/source/BbRadioGroup.md

@@ -29,7 +29,7 @@
 		:loading="loading"
 		:name="resolvedName"
 		:passthrough="containerPassthrough"
-		:readonly="readonly"
+		:readonly="fieldReadonly"
 		:reverse="reverse"
 		:show-asterisk="showAsterisk"
 		:show-hint="showHint"
@@ -53,7 +53,7 @@
 			<OptionsContainer
 				:ref="setOptionsElement"
 				:aria-labelledby="hasLegend() ? `${fieldId}__label` : undefined"
-				:aria-readonly="hasLegend() && readonly ? true : undefined"
+				:aria-readonly="hasLegend() && fieldReadonly ? true : undefined"
 				:aria-required="hasLegend() ? fieldAriaRequired : undefined"
 				block="bb-radio-group"
 				:empty-text="emptyText"
@@ -115,7 +115,7 @@
 							:focused="rowFocus.focused(option.valueHash)"
 							:has-errors="!!fieldHasErrors"
 							:has-warnings="!!fieldHasWarnings && !fieldHasErrors"
-							:readonly="!!readonly"
+							:readonly="!!fieldReadonly"
 							v-bind="passthrough.part('icon', rowStates, option.item)"
 						/>
 						<!-- eslint-enable vue/attributes-order -->
@@ -196,6 +196,7 @@ const {
 	showAsterisk,
 	errors: fieldErrors,
 	ariaRequired: fieldAriaRequired,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbRadioGroup',
 	identifierFallback: () => declaredProps.legend,
@@ -321,6 +322,7 @@ const { options } = useBaseOptions({
 	itemText: props.itemText as any,
 	itemProps: toRef(props, 'itemProps'),
 	itemValue: props.itemValue as any,
+	optionDefaults: true,
 	max: Infinity,
 	selectable: toRef(props, 'selectable'),
 	selectedIndexedByHash: modelValueIndexedByHash,
@@ -740,14 +742,18 @@ export type BbRadioGroupProps<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>;
 
@@ -1054,6 +1060,7 @@ export type BbRadioGroupSlots<T> = {
 .bb-radio-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/BbRating.md

@@ -27,7 +27,7 @@
 		:layout="layout"
 		:name="resolvedName"
 		:passthrough="passthrough"
-		:readonly="readonly"
+		:readonly="fieldReadonly"
 		:reverse="reverse"
 		:show-asterisk="showAsterisk"
 		:show-hint="showHint"
@@ -59,7 +59,7 @@
 					'bb-rating__stars--errors': fieldHasErrors,
 					'bb-rating__stars--warnings':
 						Boolean(fieldHasWarnings) && !fieldHasErrors,
-					'bb-rating__stars--readonly': readonly,
+					'bb-rating__stars--readonly': fieldReadonly,
 					'bb-rating__stars--forced-clear': suppressHoverPreview,
 				}"
 				data-bb-no-drag
@@ -68,7 +68,7 @@
 			>
 				<span
 					:aria-labelledby="hasLegend() ? `${fieldId}__label` : undefined"
-					:aria-readonly="groupRole() && readonly ? true : undefined"
+					:aria-readonly="groupRole() && fieldReadonly ? true : undefined"
 					:aria-required="groupRole() ? fieldAriaRequired : undefined"
 					class="bb-rating__options"
 					:role="groupRole()"
@@ -85,7 +85,7 @@
 							'bb-rating__item--filled': option.filled,
 							'bb-rating__item--empty': !option.filled,
 							'bb-rating__item--disabled': option.disabled,
-							'bb-rating__item--readonly': readonly,
+							'bb-rating__item--readonly': fieldReadonly,
 						}"
 						v-bind="
 							passthrough.part('item', {
@@ -107,7 +107,7 @@
 							class="bb-sr-only"
 							:disabled="option.disabled"
 							:name="option.name"
-							:required="readonly ? undefined : fieldRequired || undefined"
+							:required="fieldReadonly ? undefined : fieldRequired || undefined"
 							type="radio"
 							:value="option.value"
 							v-bind="eventListeners"
@@ -181,6 +181,7 @@ const {
 	required: fieldRequired,
 	ariaRequired: fieldAriaRequired,
 	model: fieldModel,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbRating',
 	identifierFallback: () => declaredProps.legend,
@@ -913,8 +914,8 @@ export type BbRatingSlots = {
 	cursor: pointer;
 	display: flex;
 	justify-content: center;
-	padding-left: 2px;
-	padding-right: 2px;
+	padding-inline-end: 2px;
+	padding-inline-start: 2px;
 
 	&:has(:focus-visible) {
 		box-shadow: 0px 0px 0px var(--bb-ring-size) var(--ring-color);
@@ -959,8 +960,8 @@ export type BbRatingSlots = {
 			background-color: var(--bg);
 			border: var(--bb-border-w) solid var(--bb-field-border);
 			border-radius: var(--bb-radius);
-			padding-left: var(--bb-input-px);
-			padding-right: var(--bb-input-px);
+			padding-inline-end: var(--bb-input-px);
+			padding-inline-start: var(--bb-input-px);
 			padding-top: calc(var(--bb-label-lh-sm) + var(--bb-input-py));
 			position: relative;
 			transition:
@@ -1016,6 +1017,7 @@ export type BbRatingSlots = {
 
 	.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/BbSelect.md

@@ -29,7 +29,7 @@
 		:mobile="isMobile"
 		:name="name"
 		:passthrough="passthrough"
-		:readonly="readonly"
+		:readonly="fieldReadonly"
 		:reverse="reverse"
 		:show-asterisk="showAsterisk"
 		:show-hint="showHint"
@@ -81,7 +81,7 @@
 				:prefill="computedPrefill"
 				:pt="popoverPt()"
 				:query-debounce-time="queryDebounceTime"
-				:readonly="readonly"
+				:readonly="fieldReadonly"
 				:selectable="selectable"
 				:stash="stash"
 				:transition-duration="transitionDuration"
@@ -110,7 +110,7 @@
 						:class="{
 							'bb-select__field--shown': shown,
 							'bb-select__field--disabled': disabled,
-							'bb-select__field--readonly': readonly,
+							'bb-select__field--readonly': fieldReadonly,
 						}"
 						:clearable="clearable"
 						:compact="compact"
@@ -121,7 +121,7 @@
 						:loading="activatorLoading"
 						:passthrough="boxRowPassthrough(activatorLoading)"
 						:prepend:icon="declaredProps['prepend:icon']"
-						:readonly="readonly"
+						:readonly="fieldReadonly"
 						:variant="variant"
 						@click:clear="
 							() => {
@@ -145,6 +145,7 @@
 							<input
 								:id="fieldId"
 								:aria-labelledby="`${fieldId}__label ${fieldId}__selection`"
+								:aria-readonly="fieldReadonly || undefined"
 								:aria-required="activatorAriaRequired"
 								:autofocus="autofocus"
 								class="bb-select__activator"
@@ -388,6 +389,7 @@ const {
 	ariaRequired: fieldAriaRequired,
 	required: fieldRequired,
 	model: fieldModel,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbSelect',
 	identifierFallback: () => declaredProps.label,
@@ -1205,7 +1207,9 @@ export type BbSelectProps<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>;
 
@@ -1235,7 +1239,9 @@ export type BbSelectProps<T> = {
 	 * 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>;
 
@@ -1651,7 +1657,7 @@ export type BbSelectSlots<T> = {
 		   it smoothly couples with the border */
 		&:not(:has(.bb-field-input__prepend-icon)) {
 			.bb-select__chips-row--chips {
-				margin-left: calc(
+				margin-inline-start: calc(
 					var(--bb-input-px) * var(--compensation-multiplier) * -1
 				);
 			}
@@ -1681,7 +1687,7 @@ export type BbSelectSlots<T> = {
 		min-width: 0;
 		pointer-events: none;
 		position: relative;
-		text-align: left;
+		text-align: start;
 
 		& input[type='button'] {
 			pointer-events: auto;
@@ -1694,7 +1700,8 @@ export type BbSelectSlots<T> = {
 		display: flex;
 		flex: 1 1 auto;
 		flex-wrap: nowrap;
-		left: 0;
+		inset-inline-end: 0;
+		inset-inline-start: 0;
 		min-width: 0;
 		overflow: hidden;
 		/* Sits above the absolute activator overlay (later in DOM), so re-enable
@@ -1703,7 +1710,6 @@ export type BbSelectSlots<T> = {
 		The activator stays behind purely as the keyboard/focus target. */
 		pointer-events: auto;
 		position: absolute;
-		right: 0;
 		top: 0;
 
 		&--hidden {

package/dist/ai/source/BbSelectPopover.md

@@ -1166,13 +1166,14 @@ const { options } = useBaseOptions({
 	itemText: props.itemText,
 	itemProps: toRef(props, 'itemProps'),
 	itemValue: props.itemValue,
+	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'),
 	selectedIndexedByHash: modelValueIndexedByHash,
 });
 
-const { getItemValue } = useItemValue();
+const { getOptionValue } = useItemValue();
 
 // `stash` holds SELECTED items only, so it follows the model: a list unselect,
 // a field-chip ✕ and a parent write (a form reset) all end here. Without it a
@@ -1181,7 +1182,8 @@ const { getItemValue } = useItemValue();
 watch(modelValueIndexedByHash, (selected) => {
 	if (!props.stash || !innerStash.value.length) return;
 	removeFromStash(
-		(item) => selected[hash(getItemValue(item, props.itemValue))] !== undefined
+		(item) =>
+			selected[hash(getOptionValue(item, props.itemValue))] !== undefined
 	);
 });
 
@@ -1216,7 +1218,7 @@ const fetchedValueHashes = computed(
 	() =>
 		new Set(
 			internalItems.value.map((item) =>
-				hash(getItemValue(item, props.itemValue))
+				hash(getOptionValue(item, props.itemValue))
 			)
 		)
 );
@@ -2477,7 +2479,9 @@ export type BbSelectPopoverProps<Item> = {
 	/**
 	 * Path to item property for display text or function to extract it.
 	 *
-	 * @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<Item, string>;
 	/**
@@ -2504,7 +2508,9 @@ export type BbSelectPopoverProps<Item> = {
 	/**
 	 * Path to item property for value or function to extract it.
 	 *
-	 * @defaultValue the whole item
+	 * Unset: own `value`, even `null`.
+	 *
+	 * @defaultValue own `value`, else the whole item
 	 */
 	itemValue?: ItemAccessor<Item>;
 	/**
@@ -2820,7 +2826,7 @@ export type BbSelectPopoverSlots<Item> = {
    elements, which declare both on the panel */
 .bb-select-popover {
 	overflow: visible;
-	text-align: left;
+	text-align: start;
 	width: var(--w, 320px);
 
 	.bb-common-popover__bubble {
@@ -2855,10 +2861,10 @@ export type BbSelectPopoverSlots<Item> = {
 	.bb-select-popover__clear {
 		color: var(--bb-text-muted);
 		flex-shrink: 0;
+		inset-inline-end: 0.75rem;
 		opacity: 0;
 		pointer-events: none;
 		position: absolute;
-		right: 0.75rem;
 		top: 50%;
 		transform: translateY(-50%);
 		transition:
@@ -2882,7 +2888,7 @@ export type BbSelectPopoverSlots<Item> = {
 	}
 
 	.bb-select-popover__clear {
-		right: calc(0.75rem - 3px);
+		inset-inline-end: calc(0.75rem - 3px);
 	}
 
 	.bb-select-popover__clear:hover {
@@ -2898,7 +2904,7 @@ export type BbSelectPopoverSlots<Item> = {
 		line-height: var(--bb-leading);
 		outline: none;
 		padding: 0;
-		padding-right: calc(var(--bb-input-icon) + 0.5rem);
+		padding-inline-end: calc(var(--bb-input-icon) + 0.5rem);
 		width: 100%;
 
 		/* Same cue BbDropdown's group search uses — empty field still reads as
@@ -3028,7 +3034,7 @@ export type BbSelectPopoverSlots<Item> = {
 			min-height: var(--option-h);
 			opacity: 0;
 			padding: 0.125rem 0.5rem;
-			text-align: left;
+			text-align: start;
 			transition: opacity calc(var(--transition-duration) * 2);
 		}
 
@@ -3063,7 +3069,7 @@ export type BbSelectPopoverSlots<Item> = {
 				.bb-listbox__inner-container {
 					.bb-listbox__loading {
 						display: block;
-						text-align: left;
+						text-align: start;
 					}
 				}
 			}
@@ -3096,7 +3102,7 @@ export type BbSelectPopoverSlots<Item> = {
 				overflow: auto;
 				overflow-x: clip;
 				padding: 0.25rem;
-				text-align: left;
+				text-align: start;
 
 				.bb-listbox__loading,
 				.bb-listbox__empty {
@@ -3114,7 +3120,7 @@ export type BbSelectPopoverSlots<Item> = {
 
 					.bb-listbox__group {
 						display: block;
-						left: 0;
+						inset-inline-start: 0;
 						position: absolute;
 						top: 0;
 						width: 100%;
@@ -3136,7 +3142,7 @@ export type BbSelectPopoverSlots<Item> = {
 							font-size: calc(var(--option-font-size, var(--bb-fs)) - 0.125rem);
 							font-weight: 500;
 							overflow: hidden;
-							text-align: left;
+							text-align: start;
 							text-overflow: ellipsis;
 							white-space: nowrap;
 						}
@@ -3166,9 +3172,9 @@ export type BbSelectPopoverSlots<Item> = {
 						display: flex;
 						gap: 0.5rem;
 						height: var(--option-h);
-						left: 0;
-						padding-left: 0.5rem;
-						padding-right: 0.5rem;
+						inset-inline-start: 0;
+						padding-inline-end: 0.5rem;
+						padding-inline-start: 0.5rem;
 						position: absolute;
 						top: 0;
 						transition: background-color var(--bb-transition-fast)
@@ -3262,7 +3268,7 @@ export type BbSelectPopoverSlots<Item> = {
 						font-size: var(--option-font-size, var(--bb-fs));
 						min-width: 0;
 						overflow: hidden;
-						text-align: left;
+						text-align: start;
 						text-overflow: ellipsis;
 						white-space: nowrap;
 					}
@@ -3272,7 +3278,7 @@ export type BbSelectPopoverSlots<Item> = {
 						font-size: calc(var(--option-font-size, var(--bb-fs)) - 2px);
 						line-height: 1.3;
 						overflow: hidden;
-						text-align: left;
+						text-align: start;
 						text-overflow: ellipsis;
 						white-space: nowrap;
 					}
@@ -3335,7 +3341,7 @@ export type BbSelectPopoverSlots<Item> = {
 	text-align: center;
 
 	&:has(~ .bb-close-button) {
-		padding-left: calc(var(--close-size) + 4px);
+		padding-inline-start: calc(var(--close-size) + 4px);
 	}
 }
 
@@ -3377,7 +3383,7 @@ export type BbSelectPopoverSlots<Item> = {
 		   the title, not three stacked bands. Inline inset is the OffCanvas
 		   body's `--px`. */
 		padding: 0 0 0.5rem;
-		text-align: left;
+		text-align: start;
 	}
 
 	.bb-select-popover__sheet-chips {
@@ -3443,13 +3449,13 @@ export type BbSelectPopoverSlots<Item> = {
 		   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);
+			padding-inline-start: calc(0.5rem + 4px);
 		}
 
 		.bb-listbox__group-header,
 		.bb-listbox__loading,
 		.bb-listbox__empty {
-			padding-left: calc(0.5rem + 4px);
+			padding-inline-start: calc(0.5rem + 4px);
 		}
 	}
 }