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

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/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/BbConfirm.md

@@ -354,7 +354,7 @@ export type BbConfirmPortalSlotProps<P = any> = {
 			display: flex;
 			justify-content: flex-end;
 			> :not(:last-child) {
-				margin-right: 12px;
+				margin-inline-end: 12px;
 			}
 		}
 	}

package/dist/ai/source/BbConfirmPortal.md

@@ -166,7 +166,7 @@ export type BbConfirmPortalSlotProps<P = any> = {
 			display: flex;
 			justify-content: flex-end;
 			> :not(:last-child) {
-				margin-right: 12px;
+				margin-inline-end: 12px;
 			}
 		}
 	}

package/dist/ai/source/BbDatePicker.md

@@ -938,7 +938,7 @@ export type BbDatePickerSlots = {
 	.bb-calendar--datetime {
 		display: flex;
 		flex-direction: column;
-		padding-right: 0;
+		padding-inline-end: 0;
 	}
 
 	/* The time rail in the sheet: one touch scale for the whole panel. The
@@ -955,7 +955,7 @@ export type BbDatePickerSlots = {
 		--time-row-h: var(--sheet-cell, 40px);
 		--time-col-w: var(--sheet-cell, 40px);
 
-		border-left: 0;
+		border-inline-start: 0;
 		border-top: var(--bb-border-w) solid var(--bb-border);
 		height: 252px;
 		margin: 12px 0 0;

package/dist/ai/source/BbDatePickerInput.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"
@@ -179,7 +179,7 @@
 						:off-canvas-props="offCanvasProps"
 						:pt="passthrough.forward(PICKER_PARTS, BB_DATE_PICKER_PT.states)"
 						:range="range"
-						:readonly="readonly"
+						:readonly="fieldReadonly"
 						:seconds="seconds"
 						:selectable="selectable"
 						:step="step"
@@ -198,7 +198,7 @@
 							<!-- eslint-disable vue/attributes-order -- the picker's activator props first, `pt:activator` LAST (PASSTHROUGH.md T17) -->
 							<button
 								class="bb-segmented-field__activator"
-								:disabled="disabled || readonly"
+								:disabled="disabled || fieldReadonly"
 								type="button"
 								v-bind="mergeProps(activatorProps, passthrough.activator)"
 							>
@@ -290,7 +290,11 @@ import { isNotEmpty } from '@/utilities/functions/isNotEmpty';
 import { normalizeDateBound } from '@/utilities/functions/normalizeDateBound';
 import { warnRemovedAttrs } from '@/utilities/functions/warnRemovedAttrs';
 import calendarIcon from '@/assets/svgs/calendar.svg?raw';
-import { useDayjsLocale } from '../BbCalendar/useDayjsLocale';
+import {
+	formatDateOf,
+	timeFieldsOf,
+	useDayjsLocale,
+} from '../BbCalendar/useDayjsLocale';
 import BbDatePicker from '../BbDatePicker/BbDatePicker.vue';
 import {
 	BB_DATE_PICKER_PT,
@@ -336,6 +340,7 @@ const {
 	required: fieldRequired,
 	ariaRequired: fieldAriaRequired,
 	model: fieldModel,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbDatePickerInput',
 	identifierFallback: () => declaredProps.label,
@@ -510,6 +515,13 @@ const onFieldTap = (event: MouseEvent) => {
 		return;
 	openPicker();
 };
+/** 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
@@ -519,6 +531,12 @@ const onSegmentKeydown = (
 		openPicker();
 		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);
 };
 
@@ -849,17 +867,29 @@ const onTimeSelect = ({ unit, value }: { unit: TimeUnit; value: string }) => {
 	combineFieldsToModelValue({ finalize: false });
 };
 
-/** Spoken value format for the calendar button: date, plus time with `type="datetime"`. */
-const spokenValueFormat = computed(() => {
-	// Announce what was actually picked: a month has no day to read out.
-	if (props.type === 'year') return 'YYYY';
-	if (props.type === 'month') return 'MMMM YYYY';
-	if (!isDateTime.value) return 'D MMMM YYYY';
-	if (props.ampm)
-		return props.seconds ? 'D MMMM YYYY h:mm:ss A' : 'D MMMM YYYY h:mm A';
-	return props.seconds ? 'D MMMM YYYY HH:mm:ss' : 'D MMMM YYYY HH:mm';
+/**
+ * How the calendar button speaks a value: date, plus time with
+ * `type="datetime"`, in the locale's own long form (Intl / CLDR, see
+ * `formatDateOf`) — "7. října 2026", "2026年10月7日", "7 de octubre de 2026".
+ * A month has no day to read out, a year neither.
+ */
+const spokenDateOptions = computed((): Intl.DateTimeFormatOptions => {
+	if (props.type === 'year') return { year: 'numeric' };
+	if (props.type === 'month') return { year: 'numeric', month: 'long' };
+	return { year: 'numeric', month: 'long', day: 'numeric' };
 });
 
+const spokenValue = (value: Dayjs) => {
+	const date = formatDateOf(value, config.locale, spokenDateOptions.value);
+	if (!isDateTime.value) return date;
+	const time = formatDateOf(
+		value,
+		config.locale,
+		timeFieldsOf(!!props.ampm, !!props.seconds)
+	);
+	return `${date} ${time}`;
+};
+
 /**
  * Q56.10 (owner, 2026-09-28): the trigger's name reads exactly what the field
  * displays — the segments, time included — not `modelValue`, which under
@@ -890,16 +920,13 @@ const accessibleButtonLabel = computed(() => {
 		if (!start || !end) return t('datePickerInput.emptyRange').value;
 		return t(
 			'datePickerInput.changeSelectionRange',
-			start.format(spokenValueFormat.value),
-			end.format(spokenValueFormat.value)
+			spokenValue(start),
+			spokenValue(end)
 		).value;
 	}
 	const shown = displayedValue('start');
 	if (!shown) return t('datePickerInput.emptySelection').value;
-	return t(
-		'datePickerInput.changeSelection',
-		shown.format(spokenValueFormat.value)
-	).value;
+	return t('datePickerInput.changeSelection', spokenValue(shown)).value;
 });
 
 const isDateDisabled = (date: Dayjs) => {

package/dist/ai/source/BbDialog.md

@@ -1205,7 +1205,7 @@ export type { BbDialogSlots as BaseDialogSlots };
 			 * the space here instead — only when there is actually a control to
 			 * clear, so `hideClose` keeps the full width. */
 			&:has(~ .bb-close-button) {
-				padding-right: calc(var(--close-size) + 4px);
+				padding-inline-end: calc(var(--close-size) + 4px);
 			}
 		}
 
@@ -1217,8 +1217,8 @@ export type { BbDialogSlots as BaseDialogSlots };
 		> .bb-close-button {
 			--size: var(--close-size);
 			--p: 7px;
+			inset-inline-end: calc(var(--px) - var(--p));
 			position: absolute;
-			right: calc(var(--px) - var(--p));
 			top: calc(var(--py) - var(--p));
 		}
 
@@ -1241,7 +1241,7 @@ export type { BbDialogSlots as BaseDialogSlots };
 			   does. The × sits at the top-right, and a one-line title is short
 			   enough that the description's first line can still run under it. */
 			&:has(~ .bb-close-button) {
-				padding-right: calc(var(--close-size) + 4px);
+				padding-inline-end: calc(var(--close-size) + 4px);
 			}
 		}
 	}
@@ -1268,8 +1268,8 @@ export type { BbDialogSlots as BaseDialogSlots };
 				> .bb-close-button {
 					--size: 28px;
 					--p: 7px;
+					inset-inline-end: calc(var(--px) - var(--p));
 					position: absolute;
-					right: calc(var(--px) - var(--p));
 					top: calc(var(--py) - var(--p));
 				}
 			}
@@ -1345,6 +1345,6 @@ export type { BbDialogSlots as BaseDialogSlots };
 
 body:has(.bb-dialog--visible) {
 	overflow: hidden;
-	padding-right: var(--scrollbar-width);
+	padding-inline-end: var(--scrollbar-width);
 }
 ```