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

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);
 		}
 	}
 }

package/dist/ai/source/BbSlider.md

@@ -25,7 +25,7 @@
 		:layout="layout"
 		:name="name"
 		:passthrough="passthrough"
-		:readonly="readonly"
+		:readonly="fieldReadonly"
 		:reverse="reverse"
 		:show-asterisk="showAsterisk"
 		:show-hint="showHint"
@@ -52,7 +52,7 @@
 					'bb-slider__body--errors': fieldHasErrors,
 					'bb-slider__body--warnings':
 						Boolean(fieldHasWarnings) && !fieldHasErrors,
-					'bb-slider__body--readonly': readonly,
+					'bb-slider__body--readonly': fieldReadonly,
 				}"
 			>
 				<slot :decrease="decrease" :increase="increase" name="prepend"></slot>
@@ -128,7 +128,7 @@
 						:aria-disabled="disabled ? 'true' : undefined"
 						:aria-labelledby="thumbLabelledby(fieldId, 'lower')"
 						aria-orientation="horizontal"
-						:aria-readonly="readonly ? 'true' : undefined"
+						:aria-readonly="fieldReadonly ? 'true' : undefined"
 						:aria-valuemax="max"
 						:aria-valuemin="min"
 						:aria-valuenow="valueNowLower"
@@ -170,7 +170,7 @@
 						:aria-disabled="disabled ? 'true' : undefined"
 						:aria-labelledby="thumbLabelledby(fieldId, 'higher')"
 						aria-orientation="horizontal"
-						:aria-readonly="readonly ? 'true' : undefined"
+						:aria-readonly="fieldReadonly ? 'true' : undefined"
 						:aria-valuemax="max"
 						:aria-valuemin="min"
 						:aria-valuenow="valueNowHigher"
@@ -279,6 +279,7 @@ const {
 	emit,
 	showAsterisk,
 	errors: fieldErrors,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbSlider',
 	identifierFallback: () => declaredProps.label,
@@ -1494,9 +1495,9 @@ export type BbSliderSlots = {
 	flex-grow: 1;
 	min-height: calc(var(--control-h) + var(--inside-label-clearance));
 	min-width: 100px;
+	padding-inline-end: var(--px);
+	padding-inline-start: var(--px);
 	padding-bottom: var(--py);
-	padding-left: var(--px);
-	padding-right: var(--px);
 	padding-top: var(--py);
 	position: relative;
 	-webkit-touch-callout: none;
@@ -1524,8 +1525,10 @@ export type BbSliderSlots = {
 	cursor: pointer;
 	display: block;
 	height: var(--track);
+	/* stylelint-disable-next-line property-disallowed-list -- geometry: the thumb and fill are placed by physical percentages set in JS */
 	left: var(--track-inset);
 	position: absolute;
+	/* stylelint-disable-next-line property-disallowed-list -- geometry: the thumb and fill are placed by physical percentages set in JS */
 	right: var(--track-inset);
 	top: var(--centre);
 	transform: translateY(-50%);
@@ -1534,11 +1537,14 @@ export type BbSliderSlots = {
 /* The bar: the selected span, positioned and sized from JS. */
 .bb-slider__bar {
 	background-color: var(--accent);
+	/* stylelint-disable-next-line property-disallowed-list -- geometry: the thumb and fill are placed by physical percentages set in JS */
 	border-bottom-left-radius: var(--r);
+	/* stylelint-disable-next-line property-disallowed-list -- geometry: the thumb and fill are placed by physical percentages set in JS */
 	border-top-left-radius: var(--r);
 	cursor: pointer;
 	display: block;
 	height: 100%;
+	/* stylelint-disable-next-line property-disallowed-list -- geometry: the thumb and fill are placed by physical percentages set in JS */
 	left: 0;
 	position: absolute;
 	top: 0;

package/dist/ai/source/BbSwitch.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: 'BbSwitch',
 	identifierFallback: () => declaredProps.label,

package/dist/ai/source/BbSwitchGroup.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 -->
@@ -197,6 +197,7 @@ const {
 	emit,
 	showAsterisk,
 	errors: fieldErrors,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbSwitchGroup',
 	identifierFallback: () => declaredProps.legend,
@@ -301,6 +302,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'),
@@ -639,6 +641,7 @@ export type BbSwitchGroupSlots<T> = {
 .bb-switch-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;
 		}
 	}