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

package/dist/ai/source/BbConfirmPortal.md

@@ -8,6 +8,7 @@
 <template></template>
 <script setup lang="ts">
 import { useSlots, watchEffect } from 'vue';
+import type { BbConfirmPortalSlotProps } from './types';
 import {
 	confirmState,
 	registerNamedPortal,
@@ -19,11 +20,7 @@ const props = defineProps<{
 	name: string;
 }>();
 defineSlots<{
-	default?: (props: {
-		yes: () => void;
-		no: () => void;
-		props: Record<string, unknown>;
-	}) => any;
+	default?: (props: BbConfirmPortalSlotProps) => any;
 }>();
 
 const slots = useSlots();
@@ -128,6 +125,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
@@ -152,7 +166,7 @@ export type BbConfirmProps = {
 			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);
 }
 ```