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

package/dist/ai/source/BbNumberInput.md

@@ -28,7 +28,7 @@
 		:loading="loading"
 		:name="name"
 		:passthrough="passthrough"
-		:readonly="readonly"
+		:readonly="fieldReadonly"
 		:reverse="reverse"
 		:show-asterisk="showAsterisk"
 		:show-hint="showHint"
@@ -59,7 +59,7 @@
 				:loading="loading"
 				:passthrough="passthrough"
 				:prepend:icon="props['prepend:icon']"
-				:readonly="readonly"
+				:readonly="fieldReadonly"
 				:reserve-append-space="clearable"
 				:variant="variant"
 				@click:clear="emit('update:modelValue', null)"
@@ -85,18 +85,19 @@
 					:aria-disabled="disabled || undefined"
 					:aria-invalid="fieldHasErrors || undefined"
 					:aria-labelledby="ariaLabelledby"
-					:aria-readonly="readonly || undefined"
+					:aria-readonly="fieldReadonly || undefined"
 					:aria-valuemax="max !== Number.MAX_SAFE_INTEGER ? max : undefined"
 					:aria-valuemin="min !== Number.MIN_SAFE_INTEGER ? min : undefined"
 					:aria-valuenow="isNotNil(fieldModel) ? fieldModel : undefined"
+					:aria-valuetext="ariaValuetext"
 					:autocomplete="autocomplete"
 					:autofocus="autofocus"
 					class="bb-number-input__input"
 					:disabled="disabled"
 					inputmode="decimal"
-					:name="name"
+					:name="disableFormatting ? name : undefined"
 					:placeholder="placeholder"
-					:readonly="readonly"
+					:readonly="fieldReadonly"
 					:required="fieldRequired"
 					:aria-required="fieldAriaRequired"
 					role="spinbutton"
@@ -121,6 +122,18 @@
 					></slot
 				></template>
 			</CommonFieldInput>
+			<!-- Formatted mode posts the raw period string from here: the visible
+			text is the locale's (`10.005,6`). `form` routes from the consumer's
+			attributes, like BbSelect's value channel. -->
+			<input
+				v-if="!disableFormatting && name"
+				ref="posted"
+				:disabled="disabled"
+				:form="(passthrough.controlAttrs as { form?: string }).form"
+				:name="name"
+				type="hidden"
+				:value="submitValue"
+			/>
 		</template>
 	</CommonField>
 </template>
@@ -143,7 +156,15 @@ import { warnRemovedAttrs } from '@/utilities/functions/warnRemovedAttrs';
  * - Supports keyboard stepping with ArrowUp/ArrowDown.
  * - Hands `increase()` / `decrease()` to every slot for step controls.
  */
-import { computed, mergeProps, onMounted, ref, useAttrs, watch } from 'vue';
+import {
+	computed,
+	mergeProps,
+	onBeforeUnmount,
+	onMounted,
+	ref,
+	useAttrs,
+	watch,
+} from 'vue';
 import CommonField from '../CommonField/CommonField.vue';
 import CommonFieldInput from '../CommonFieldInput/CommonFieldInput.vue';
 import { useConfig } from '@/composables/useConfig';
@@ -158,6 +179,30 @@ import { clampPrecision } from '@/utilities/functions/clampPrecision';
 import { isNil } from '@/utilities/functions/isNil';
 import { isNotNil } from '@/utilities/functions/isNotNil';
 import { vSsrValue } from '@/utilities/misc/ssrValue';
+import { intlLocaleOf } from '../BbCalendar/useDayjsLocale';
+import {
+	affixOf,
+	applyEdit,
+	currencyDigitsOf,
+	displayIndexOf,
+	formatAffixed,
+	isShellOnly,
+	numberSymbolsOf,
+	PLAIN_SYMBOLS,
+	rawAtRest,
+	rawIndexOf,
+	rawOfNumber,
+	readText,
+	snapOffset,
+	spokenAffixed,
+	stripAffix,
+	valueOfRaw,
+	withPaddedMark,
+	writeStrategy,
+	type Display,
+	type Edit,
+	type EditState,
+} from './numberDisplay';
 import {
 	BB_NUMBER_INPUT_PT,
 	type BbNumberInputProps,
@@ -166,13 +211,13 @@ import {
 } from './types';
 
 defineOptions({ inheritAttrs: false });
-// `min` / `max` / `step` / `maxPrecision` drive the clamp and step math and
-// `aria-valuemin` / `aria-valuemax` (the SAFE_INTEGER sentinels stay silent),
-// so they are defaulted here, before anything reads them.
+// `min` / `max` / `step` drive the clamp and step math and `aria-valuemin` /
+// `aria-valuemax` (the SAFE_INTEGER sentinels stay silent), so they are
+// defaulted here, before anything reads them. `maxPrecision` / `minPrecision`
+// default below: with `currency` they follow the currency's digits.
 const declaredProps = withDefaults(defineProps<BbNumberInputProps>(), {
 	autocomplete: 'off',
 	max: Number.MAX_SAFE_INTEGER,
-	maxPrecision: 8,
 	min: Number.MIN_SAFE_INTEGER,
 	step: 1,
 });
@@ -188,6 +233,7 @@ const {
 	required: fieldRequired,
 	ariaRequired: fieldAriaRequired,
 	model: fieldModel,
+	readonly: fieldReadonly,
 } = useFormBinding(declaredProps, declaredEmit, {
 	componentName: 'BbNumberInput',
 	identifierFallback: () => declaredProps.label,
@@ -228,6 +274,612 @@ const passthrough = usePassthrough({
 
 const input = ref<HTMLInputElement | null>(null);
 
+// --- Q60.25: the locale display (owner 2026-10-07) -------------------------
+//
+// The field shows its number the locale's way while the user types
+// (`10.005,6` in it). The edited value lives in `edit.raw` (period decimal, no
+// grouping); every keystroke is cancelled in `beforeinput`, applied to raw by
+// the engine (`numberDisplay.ts`) and written back through
+// `execCommand('insertText')`, which keeps the browser's own undo. Anything
+// the browser applies itself (IME, a non-cancelable Android keystroke, undo,
+// autofill, a restore) is re-read from the text. `disableFormatting` without a
+// `minPrecision` is today's code path, unchanged (`legacy`).
+
+/**
+ * Q60.25b: the currency or unit painted inside the text, as a shell around
+ * the number (`numberDisplay.ts`). `disableFormatting` ignores both; a code
+ * `Intl` refuses gives a plain number.
+ */
+const affix = computed(() =>
+	props.disableFormatting
+		? null
+		: affixOf(intlLocaleOf(config.locale), props.currency, props.unit)
+);
+/** The currency's own fraction digits (2 for EUR, 0 for JPY); `null` without one. */
+const currencyDigits = computed(() =>
+	affix.value?.kind === 'currency'
+		? currencyDigitsOf(affix.value.code, affix.value.tag)
+		: null
+);
+/** An explicit prop wins; else the currency's digits; else 8 (and at least `minPrecision`). */
+const maxPrecision = computed(
+	() =>
+		props.maxPrecision ??
+		(currencyDigits.value
+			? Math.max(currencyDigits.value.max, props.minPrecision ?? 0)
+			: 8)
+);
+const minPrecision = computed(
+	() => props.minPrecision ?? currencyDigits.value?.min ?? 0
+);
+
+/** Today's path: period display, Q51.2 on the whole text, `name` on the input. */
+const legacy = computed(
+	() => !!props.disableFormatting && !(minPrecision.value > 0)
+);
+/** The locale's marks; period and no grouping when formatting is off. */
+const symbols = computed(() =>
+	props.disableFormatting
+		? PLAIN_SYMBOLS
+		: numberSymbolsOf(
+				intlLocaleOf(config.locale),
+				affix.value?.kind === 'currency' ? affix.value.code : undefined
+			)
+);
+/** `maxPrecision` wins over a larger `minPrecision` (documented, no warning). */
+const shownMinPrecision = computed(() =>
+	Math.max(0, Math.min(minPrecision.value, maxPrecision.value))
+);
+const editOptions = () => ({
+	maxPrecision: maxPrecision.value,
+	minPrecision: minPrecision.value,
+	max: props.max,
+	localeKey: symbols.value.decimal === ',' ? ',' : '.',
+});
+/** `raw` as the field shows it: the locale's number, in the affix's shell. */
+const displayOf = (raw: string) =>
+	formatAffixed(
+		raw,
+		symbols.value,
+		{ minPrecision: shownMinPrecision.value },
+		affix.value
+	);
+/** Text read back (paste, undo, restore) as raw: the shell stripped first. */
+const readBack = (text: string) =>
+	readText(stripAffix(text, affix.value), symbols.value);
+
+let edit: EditState = { raw: '', decChar: '', groupChar: '' };
+let display: Display = { text: '', positions: [] };
+/** The text this field last wrote; anything else in the input came from outside. */
+let lastWritten = '';
+/** Inside our own `execCommand` write: its nested events are ours. */
+let busy = false;
+/** The nested `input` of a write was emitted as the edit's `input`. */
+let emittedInput = false;
+let composing = false;
+
+/** A model value as a number: a numeric string (an untyped app) counts too. */
+const asNumber = (value: unknown): number | null => {
+	if (value === null || value === undefined || value === '') return null;
+	const number = Number(value);
+	return Number.isFinite(number) ? number : null;
+};
+
+/**
+ * The last valid value: what the model holds while the text is half-typed
+ * (`-`), what blur restores, and what the hidden input posts.
+ */
+const committed = ref<number | null>(asNumber(props.modelValue));
+const submitValue = computed(() =>
+	rawAtRest(committed.value, maxPrecision.value)
+);
+
+/** The display of a value at rest: rebuilt from the number, useless digits gone. */
+const restText = (value: number | null | undefined) =>
+	displayOf(rawAtRest(value, maxPrecision.value)).text;
+
+/** Set once mounted: the server never prints `Intl` text (CURRENCY-SPEC § 2.11). */
+const mounted = ref(false);
+
+/**
+ * Read only while not focused: a value text that changes per keystroke
+ * double-speaks. With a currency or unit, the spoken form (`1,234.50 euros`,
+ * `20 kilograms`), not the glyph. Only after mount, on every field: computed
+ * on the server, ICU drift between Node and the browser would be an attribute
+ * hydration mismatch.
+ */
+const ariaValuetext = computed(() => {
+	if (!mounted.value) return undefined;
+	if (props.disableFormatting || active.value || isNil(props.modelValue))
+		return undefined;
+	const value = asNumber(props.modelValue);
+	return affix.value && value !== null
+		? spokenAffixed(
+				rawAtRest(value, maxPrecision.value),
+				shownMinPrecision.value,
+				affix.value
+			)
+		: restText(value);
+});
+
+/** A raw value from outside: the decimal counts as the locale's key (owner Q6). */
+const setRaw = (raw: string) => {
+	edit = {
+		raw: withPaddedMark(raw, shownMinPrecision.value),
+		decChar: '',
+		groupChar: '',
+	};
+};
+
+const isFocused = () =>
+	!!input.value && input.value.ownerDocument.activeElement === input.value;
+
+/**
+ * Writes `displayOf(edit.raw)` into the input. A user edit goes through
+ * `execCommand('insertText')` over the changed span (a native undo step):
+ * the digits only while the shell stays (the symbol stays out of the undo
+ * step and the screen-reader echo), the whole value when the shell changes
+ * (first digit, sign, plural); anything else, or a failed command, sets
+ * `value`.
+ */
+const paint = (caretRaw?: number, asEdit = false) => {
+	const el = input.value;
+	if (!el) return;
+	const shell = display.shell;
+	display = displayOf(edit.raw);
+	const next = display.text;
+	if (el.value !== next) {
+		if (asEdit && isFocused()) writeAsEdit(el, next, shell !== display.shell);
+		if (el.value !== next) el.value = next;
+	}
+	lastWritten = next;
+	if (caretRaw !== undefined && isFocused()) {
+		const at = displayIndexOf(display, caretRaw);
+		el.setSelectionRange(at, at);
+	}
+};
+
+const writeAsEdit = (el: HTMLInputElement, next: string, whole: boolean) => {
+	const current = el.value;
+	let head = 0;
+	while (
+		!whole &&
+		head < current.length &&
+		head < next.length &&
+		current[head] === next[head]
+	)
+		head++;
+	let tail = 0;
+	if (writeStrategy.span === 'minimal' && !whole) {
+		while (
+			tail < current.length - head &&
+			tail < next.length - head &&
+			current[current.length - 1 - tail] === next[next.length - 1 - tail]
+		)
+			tail++;
+	}
+	const text = next.slice(head, next.length - tail);
+	busy = true;
+	try {
+		el.setSelectionRange(head, current.length - tail);
+		// A WebKit `execCommand` inside an input listener can re-enter it: the
+		// `busy` guard drops the nested events (WebKit hung without one).
+		if (text) document.execCommand('insertText', false, text);
+		else document.execCommand('delete');
+	} catch {
+		// Falls through to the `value` write in `paint`.
+	} finally {
+		busy = false;
+	}
+};
+
+/** Emits the typed value; a half-typed text (`-`) leaves the last valid one standing. */
+const commitTyped = () => {
+	const value = valueOfRaw(edit.raw);
+	if (value === undefined) return;
+	committed.value = value;
+	emit('update:modelValue', value);
+};
+
+/** Applies one edit to raw and writes the result. */
+const runEdit = (op: Edit, event: Event, asEdit: boolean) => {
+	const result = applyEdit(edit, op, editOptions());
+	if (result.rejected) {
+		// A refused key leaves the caret where it was when that is the same
+		// raw spot (Delete at `12,00|`: not pulled back before the placeholders).
+		const el = input.value;
+		const stays =
+			!!el &&
+			el.value === display.text &&
+			el.selectionStart === el.selectionEnd &&
+			rawIndexOf(display, el.selectionStart ?? 0) === result.caret;
+		edit = result;
+		paint(stays ? undefined : result.caret);
+		return;
+	}
+	edit = result;
+	emittedInput = false;
+	paint(result.caret, asEdit);
+	if (!emittedInput) emit('input', event);
+	commitTyped();
+};
+
+/** The raw range of the input's selection. */
+const rawSelection = (el: HTMLInputElement): [number, number] => [
+	rawIndexOf(display, el.selectionStart ?? el.value.length),
+	rawIndexOf(display, el.selectionEnd ?? el.value.length),
+];
+
+const DELETES: Record<string, Edit['type']> = {
+	deleteContentBackward: 'deleteBackward',
+	deleteContent: 'deleteBackward',
+	deleteByCut: 'deleteBackward',
+	deleteByDrag: 'deleteBackward',
+	deleteContentForward: 'deleteForward',
+	deleteWordBackward: 'deleteToStart',
+	deleteSoftLineBackward: 'deleteToStart',
+	deleteHardLineBackward: 'deleteToStart',
+	deleteWordForward: 'deleteToEnd',
+	deleteSoftLineForward: 'deleteToEnd',
+	deleteHardLineForward: 'deleteToEnd',
+};
+
+/**
+ * The text of an `insertReplacementText` (desktop spellcheck, a keyboard
+ * suggestion): `data`, or `dataTransfer` where Chrome and Firefox put it;
+ * `null` when the event carries neither.
+ */
+const replacementText = (event: InputEvent): string | null =>
+	event.data ??
+	(event.dataTransfer ? event.dataTransfer.getData('text/plain') : null);
+
+/**
+ * A replacement over raw `[start, end)`: a word is text, read back like a
+ * paste (`$56,789.00` is 56789, not the keys `5` `6` `,` …); one character is
+ * a keystroke (`-` still toggles the sign); nothing deletes the range.
+ */
+const replacementEdit = (text: string, start: number, end: number): Edit =>
+	[...text].length > 1
+		? { type: 'paste', start, end, raw: readBack(text) }
+		: text
+			? { type: 'insert', start, end, text }
+			: { type: 'deleteBackward', start, end };
+
+/**
+ * Every edit the browser announces and lets us cancel: applied to raw. Undo
+ * and redo run natively (the steps are our own writes) and are re-read on
+ * `input`; IME composition and non-cancelable events take the fallback there.
+ */
+const onBeforeinput = (event: InputEvent) => {
+	const el = input.value;
+	if (legacy.value || busy || !el) return;
+	if (composing || event.isComposing || !event.cancelable) return;
+	// A keyboard that announces no text (Android, empty `data`): the browser
+	// applies it and the fallback reads it on `input` (GROK-INGEST 3).
+	if (event.inputType === 'insertText' && !event.data) return;
+	const type = event.inputType;
+	const [start, end] = rawSelection(el);
+	let op: Edit | undefined;
+	if (type === 'insertText') {
+		op = { type: 'insert', start, end, text: event.data ?? '' };
+	} else if (type === 'insertReplacementText') {
+		const text = replacementText(event);
+		// Nothing to read, or nothing over a caret: the browser applies it and
+		// the fallback reads it on `input`.
+		if (text === null || (!text && start === end)) return;
+		op = replacementEdit(text, start, end);
+	} else if (type === 'insertFromPaste' || type === 'insertFromDrop') {
+		const text = event.dataTransfer?.getData('text/plain') ?? event.data ?? '';
+		op = { type: 'paste', start, end, raw: readBack(text) };
+	} else if (DELETES[type]) {
+		const from = el.selectionStart ?? 0;
+		const to = el.selectionEnd ?? 0;
+		if (isShellOnly(display, from, to)) {
+			// `€` selected in `12,00 €`, then Backspace: nothing to delete. The
+			// caret collapses to the nearer edge of the number.
+			event.preventDefault();
+			const edge = snapOffset(
+				display,
+				to <= display.hole![0] ? display.hole![0] : display.hole![1]
+			);
+			el.setSelectionRange(edge, edge);
+			return;
+		}
+		op = { type: DELETES[type], start, end } as Edit;
+	}
+	if (!op) return;
+	event.preventDefault();
+	runEdit(op, event, true);
+};
+
+/** A paste reads the clipboard: a legal number in this locale strictly, else Q51.2. */
+const onPasteFormatted = (event: ClipboardEvent) => {
+	const el = input.value;
+	if (legacy.value || !el || !event.clipboardData) return;
+	// Not cancelled: the browser's own paste into a readonly field does nothing.
+	if (fieldReadonly.value || props.disabled) return;
+	const [start, end] = rawSelection(el);
+	const text = event.clipboardData.getData('text/plain');
+	event.preventDefault();
+	runEdit({ type: 'paste', start, end, raw: readBack(text) }, event, true);
+};
+
+/** A drag that started in this field: the browser's own move (`deleteByDrag` + `insertFromDrop`). */
+let dragFromSelf = false;
+
+/** The display offset under a drop point; the end when the engine cannot say. */
+const dropOffsetOf = (el: HTMLInputElement, event: DragEvent) => {
+	const doc = el.ownerDocument as Document & {
+		caretPositionFromPoint?: (
+			x: number,
+			y: number
+		) => { offsetNode: Node; offset: number } | null;
+	};
+	const position = doc.caretPositionFromPoint?.(event.clientX, event.clientY);
+	return position?.offsetNode === el ? position.offset : el.value.length;
+};
+
+/**
+ * A drop from outside is a paste at the drop point (PANEL § 2.6): cancelled
+ * and read here, never left to the default action (a synthetic drop has none,
+ * and its `insertFromDrop` would never come).
+ */
+const onDropFormatted = (event: DragEvent) => {
+	const el = input.value;
+	if (legacy.value || !el || !event.dataTransfer || dragFromSelf) return;
+	if (fieldReadonly.value || props.disabled) return;
+	const text = event.dataTransfer.getData('text/plain');
+	event.preventDefault();
+	const at = rawIndexOf(display, dropOffsetOf(el, event));
+	el.focus();
+	runEdit(
+		{ type: 'paste', start: at, end: at, raw: readBack(text) },
+		event,
+		true
+	);
+};
+
+/**
+ * Re-reads text the browser put in the field — undo / redo, autofill, a
+ * restore, an outside `el.value` write — as a number in this locale.
+ */
+const rereadAll = () => {
+	const el = input.value;
+	if (!el) return;
+	const parsed = readBack(el.value);
+	const result = applyEdit(
+		{ raw: '', decChar: '', groupChar: '' },
+		{ type: 'paste', start: 0, end: 0, raw: parsed },
+		editOptions()
+	);
+	// Past the 20-character cap (owner round 7): refused, the field keeps
+	// its number and our text comes back.
+	if (result.rejected) {
+		paint(isFocused() ? edit.raw.length : undefined);
+		return;
+	}
+	setRaw(result.raw);
+	display = displayOf(edit.raw);
+	if (display.text === el.value) {
+		lastWritten = el.value;
+		return;
+	}
+	paint(isFocused() ? edit.raw.length : undefined);
+};
+
+/**
+ * The fallback for edits the browser applied itself (an Android keyboard's
+ * non-cancelable keystroke, a finished IME composition): the change between
+ * the text we last wrote and the text now there — its common prefix capped at
+ * the caret, so a deletion inside a run of equal digits lands where the user
+ * was — is mapped to raw and re-applied as a keystroke. Undo is lost on this
+ * path only.
+ */
+const applyBrowserEdit = (event: Event) => {
+	const el = input.value;
+	if (!el) return;
+	const before = lastWritten;
+	const after = el.value;
+	if (before === after) return;
+	if ((event as InputEvent).inputType === 'insertReplacementText') {
+		applyReplacement(event as InputEvent, before, after);
+		return;
+	}
+	const caret = el.selectionStart ?? after.length;
+	// The change ends at the caret too: an insert inside a run of equal digits
+	// (`1.1|11` + `1`) is at the caret, not past it.
+	let tail = 0;
+	while (
+		tail < before.length &&
+		tail < after.length - caret &&
+		before[before.length - 1 - tail] === after[after.length - 1 - tail]
+	)
+		tail++;
+	let head = 0;
+	while (
+		head < before.length - tail &&
+		head < after.length - tail &&
+		head < caret &&
+		before[head] === after[head]
+	)
+		head++;
+	const inserted = after.slice(head, after.length - tail);
+	const start = rawIndexOf(display, head);
+	const end = rawIndexOf(display, before.length - tail);
+	// A shell character removed by the browser (an Android Backspace on `€`)
+	// heals: nothing to apply, the text is painted back.
+	if (!inserted && isShellOnly(display, head, before.length - tail)) {
+		const caret = rawIndexOf(display, head);
+		paint(caret);
+		return;
+	}
+	// A deletion of a group mark alone (`start === end`) is a Backspace (or a
+	// Delete) next to it: the digit beyond goes.
+	const forward = /Forward$/.test((event as InputEvent).inputType ?? '');
+	const op: Edit = inserted
+		? { type: 'insert', start, end, text: inserted }
+		: { type: forward ? 'deleteForward' : 'deleteBackward', start, end };
+	runEdit(op, event, false);
+};
+
+/**
+ * Where a replacement of `text` went: the `[from, to)` of `before` that
+ * `after` has `text` in place of, the one nearest the caret when the text
+ * could sit in several places (runs of equal digits). `null` when `after` is
+ * not `before` with one span swapped for `text`.
+ */
+const replacedSpan = (
+	before: string,
+	after: string,
+	text: string,
+	caret: number
+): [number, number] | null => {
+	const removed = before.length - (after.length - text.length);
+	if (removed < 0) return null;
+	let best: number | null = null;
+	for (let at = 0; at + text.length <= after.length; at++) {
+		if (before.slice(0, at) !== after.slice(0, at)) break;
+		if (
+			after.slice(at, at + text.length) !== text ||
+			before.slice(at + removed) !== after.slice(at + text.length)
+		)
+			continue;
+		const distance = Math.abs(at + text.length - caret);
+		if (best === null || distance < Math.abs(best + text.length - caret))
+			best = at;
+	}
+	return best === null ? null : [best, best + removed];
+};
+
+/**
+ * A replacement the browser applied itself (non-cancelable: an Android
+ * suggestion or autocorrect). The text it carries is read back over the span
+ * it replaced, the same edit the cancelable path makes; never the diff
+ * fragment (`1.234` → `1.234.567` shares `1.234`, and `.567` alone is not
+ * the number). A replacement that says nothing of its text swaps the word,
+ * and a number field holds one: the whole new text is read back.
+ */
+const applyReplacement = (event: InputEvent, before: string, after: string) => {
+	const el = input.value!;
+	const text = replacementText(event);
+	const span =
+		text === null
+			? null
+			: replacedSpan(before, after, text, el.selectionStart ?? after.length);
+	const op: Edit =
+		text !== null && span
+			? replacementEdit(
+					text,
+					rawIndexOf(display, span[0]),
+					rawIndexOf(display, span[1])
+				)
+			: { type: 'paste', start: 0, end: edit.raw.length, raw: readBack(after) };
+	runEdit(op, event, false);
+};
+
+const REREAD_TYPES = new Set(['historyUndo', 'historyRedo', '']);
+
+const onFormattedInput = (event: Event) => {
+	if (busy) {
+		// The nested `input` of our own write: the edit's one `input` event.
+		emittedInput = true;
+		emit('input', event);
+		return;
+	}
+	if (composing) return;
+	const type = (event as InputEvent).inputType ?? '';
+	if (REREAD_TYPES.has(type) || !(event instanceof InputEvent)) {
+		rereadAll();
+		emit('input', event);
+		commitTyped();
+		return;
+	}
+	applyBrowserEdit(event);
+};
+
+const onCompositionstart = () => {
+	if (!legacy.value) composing = true;
+};
+
+const onCompositionend = (event: CompositionEvent) => {
+	if (legacy.value || !composing) return;
+	composing = false;
+	applyBrowserEdit(event);
+};
+
+/** The hidden input a native POST reads (formatted mode with a `name`). */
+const posted = ref<HTMLInputElement | null>(null);
+
+/** The text differs from what we wrote (a restore, autofill): read it again. */
+const reconcile = () => {
+	if (legacy.value || !input.value) return;
+	if (input.value.value !== lastWritten) {
+		rereadAll();
+		commitTyped();
+		// A submit reads the hidden input before Vue re-renders it.
+		if (posted.value) posted.value.value = submitValue.value;
+	}
+};
+
+/** Blur shows the value at rest: rebuilt from the last valid value. */
+const settle = (caretAtEnd = false) => {
+	if (legacy.value) return;
+	setRaw(rawAtRest(committed.value, maxPrecision.value));
+	paint(caretAtEnd ? edit.raw.length : undefined);
+};
+
+const onPageshow = (event: PageTransitionEvent) => {
+	if (event.persisted) reconcile();
+};
+
+/**
+ * A silent autofill (no event) is read before the form submits: capture runs
+ * ahead of the consumer's own `submit` listener and of the form data. Heard
+ * on the document and matched against the form that owns the field at
+ * submit time, so a `form=` that changes after mount is followed.
+ */
+let submitDocument: Document | null = null;
+const onSubmitCapture = (event: Event) => {
+	const owner = (posted.value ?? input.value)?.form;
+	if (owner && event.target === owner) reconcile();
+};
+
+/** Between pointerdown and pointerup on the input: no clamp (a drag from the prefix). */
+let pointerHeld = false;
+
+/**
+ * Q60.25b (CURRENCY-SPEC § 2.3): a collapsed caret never rests on a currency /
+ * unit shell. A click, an arrow, Home / End landing on it moves to the nearest
+ * edge of the number (never before a negative value's minus). Ranges are never
+ * touched: select-all and a double-click on `€` stay as they are (a copy keeps
+ * the symbol), and a delete over the shell alone does nothing (`onBeforeinput`).
+ * The clamp is cosmetic: an edit with the caret on the shell still edits the
+ * number's edge.
+ */
+const snapSelection = () => {
+	const el = input.value;
+	if (!el || !display.hole || busy || composing || pointerHeld) return;
+	if (!isFocused() || el.value !== display.text) return;
+	const at = el.selectionStart ?? 0;
+	if (at !== el.selectionEnd) return;
+	const snapped = snapOffset(display, at);
+	if (snapped !== at) el.setSelectionRange(snapped, snapped);
+};
+
+const releasePointer = () => {
+	pointerHeld = false;
+	window.removeEventListener('pointerup', releasePointer);
+	window.removeEventListener('pointercancel', releasePointer);
+	snapSelection();
+};
+
+const holdPointer = () => {
+	if (!display.hole) return;
+	pointerHeld = true;
+	window.addEventListener('pointerup', releasePointer);
+	window.addEventListener('pointercancel', releasePointer);
+};
+
 /**
  * Applies precision and range guards to finalized numeric values. While the
  * user types, only `max` applies (`withMin: false`): the digits of 15 pass
@@ -236,7 +888,7 @@ const input = ref<HTMLInputElement | null>(null);
  */
 const normalizeNumericValue = (value: number, withMin = true): number => {
 	const precisionAligned = Number(
-		clampPrecision(value.toString(), props.maxPrecision)
+		clampPrecision(value.toString(), maxPrecision.value)
 	);
 	return clamp(precisionAligned, withMin ? props.min : -Infinity, props.max);
 };
@@ -247,6 +899,17 @@ const normalizeNumericValue = (value: number, withMin = true): number => {
  * "15" with min 10 could not be typed through its "1".
  */
 const applyMin = () => {
+	if (!legacy.value) {
+		// Enter re-reads an outside text first, as blur does (PANEL § 2.7).
+		reconcile();
+		const typed = valueOfRaw(edit.raw);
+		if (typeof typed !== 'number' || typed >= props.min) return;
+		setRaw(rawOfNumber(props.min, maxPrecision.value));
+		committed.value = props.min;
+		paint(isFocused() ? edit.raw.length : undefined);
+		emit('update:modelValue', props.min);
+		return;
+	}
 	if (!input.value?.value) return;
 	const typed = Number(makeValidNumberString(input.value.value));
 	if (!Number.isFinite(typed) || typed >= props.min) return;
@@ -295,6 +958,7 @@ const increase = () => {
  * 7) Sync visible input and preserve caret position when transformed.
  */
 const onInput = (event: Event) => {
+	if (!legacy.value) return onFormattedInput(event);
 	if (!input.value) return;
 	if (event.target instanceof HTMLInputElement) {
 		const value = event.target.value;
@@ -319,7 +983,7 @@ const onInput = (event: Event) => {
 			}
 		}
 		emit('update:modelValue', valueToEmit);
-		const clamped = clampPrecision(nextInputValue, props.maxPrecision);
+		const clamped = clampPrecision(nextInputValue, maxPrecision.value);
 		if (input.value.value !== clamped) {
 			input.value.value = clamped;
 			if (selectionStart !== null && selectionEnd !== null) {
@@ -346,6 +1010,9 @@ const onKeydown = (event: KeyboardEvent) => {
 		// Q56.14: before the browser's implicit submission (it follows keydown),
 		// so a surrounding form submits the corrected value, not the typed one.
 		applyMin();
+		// Owner 2026-10-07: Enter shows the value at rest as blur does (`1,50`
+		// → `1,5`), the caret after the number; not while an IME commits.
+		if (!event.isComposing && !composing) settle(true);
 	}
 };
 
@@ -441,7 +1108,7 @@ const makeValidNumberString = (value: string): string => {
 	let [first, second] = value.split('.');
 	first = first || '0';
 	if (!second) return first;
-	second = second?.slice(0, props.maxPrecision) || '0';
+	second = second?.slice(0, maxPrecision.value) || '0';
 	const unified = `${first}.${second}`;
 	return unified;
 };
@@ -452,18 +1119,27 @@ const makeValidNumberString = (value: string): string => {
  * bound separately (`@input.stop`).
  */
 const eventListeners = {
+	onBeforeinput: (event: InputEvent) => onBeforeinput(event),
 	onBlur: (event: FocusEvent) => {
 		active.value = false;
+		reconcile();
 		applyMin();
+		settle();
 		emit('blur', event);
 	},
 	onChange: (event: Event) => emit('change', event),
 	onClick: (event: MouseEvent) => emit('click', event),
-	onCompositionend: (event: CompositionEvent) => emit('compositionend', event),
-	onCompositionstart: (event: CompositionEvent) =>
-		emit('compositionstart', event),
+	onCompositionend: (event: CompositionEvent) => {
+		onCompositionend(event);
+		emit('compositionend', event);
+	},
+	onCompositionstart: (event: CompositionEvent) => {
+		onCompositionstart();
+		emit('compositionstart', event);
+	},
 	onFocus: (event: FocusEvent) => {
 		active.value = true;
+		reconcile();
 		emit('focus', event);
 	},
 	onKeydown: (event: KeyboardEvent) => {
@@ -473,7 +1149,16 @@ const eventListeners = {
 	onKeyup: (event: KeyboardEvent) => emit('keyup', event),
 	onMousedown: (event: MouseEvent) => emit('mousedown', event),
 	onMouseup: (event: MouseEvent) => emit('mouseup', event),
-	onPaste: (event: ClipboardEvent) => emit('paste', event),
+	onPointerdown: () => holdPointer(),
+	onPaste: (event: ClipboardEvent) => {
+		onPasteFormatted(event);
+		emit('paste', event);
+	},
+	onDragstart: () => (dragFromSelf = true),
+	onDragend: () => (dragFromSelf = false),
+	onDrop: (event: DragEvent) => onDropFormatted(event),
+	// Fires on the control for click, keyboard, touch and script moves.
+	onSelectionchange: () => snapSelection(),
 };
 
 /**
@@ -496,6 +1181,15 @@ const inputBindings = computed(() =>
  */
 const alignInputValue = (value: string | number | null) => {
 	if (isNil(input.value)) return;
+	if (!legacy.value) {
+		committed.value = asNumber(value);
+		// The echo of what the text emits, while the user types: the text stays
+		// as typed (`10,` holds 10). Anything else replaces it (Q57.4).
+		if (isFocused() && valueOfRaw(edit.raw) === committed.value) return;
+		setRaw(rawAtRest(committed.value, maxPrecision.value));
+		paint(isFocused() ? edit.raw.length : undefined);
+		return;
+	}
 
 	const currentValue = input.value.value;
 	// This is triggered while the user is writing numbers like -0.75. Only while
@@ -536,13 +1230,51 @@ watch(
  * the `value` attribute (`v-ssr-value`, server-only) — the same string the
  * mount-time `alignInputValue` writes, so nothing changes at hydration.
  */
-const ssrDisplayValue = () => props.modelValue?.toString() || '';
+const ssrDisplayValue = () =>
+	legacy.value
+		? props.modelValue?.toString() || ''
+		: rawAtRest(asNumber(props.modelValue), maxPrecision.value);
 
 /**
  * Ensures initial value is painted once the native input ref exists.
  */
 onMounted(() => {
+	// Focused before hydration (PANEL § 2.11): the server text is raw, so its
+	// caret is a raw index; the formatted paint keeps it on the same digit.
+	const el = input.value;
+	// No `focus` event will come for a focus that predates mount.
+	if (isFocused()) active.value = true;
+	const caretRaw =
+		el && !legacy.value && isFocused() && el.value === ssrDisplayValue()
+			? el.selectionStart
+			: null;
 	alignInputValue(props.modelValue);
+	if (el && caretRaw !== null && isFocused()) {
+		const at = displayIndexOf(display, Math.min(caretRaw, edit.raw.length));
+		el.setSelectionRange(at, at);
+	}
+	window.addEventListener('pageshow', onPageshow);
+	submitDocument = el?.ownerDocument ?? null;
+	submitDocument?.addEventListener('submit', onSubmitCapture, true);
+	mounted.value = true;
+});
+
+onBeforeUnmount(() => {
+	window.removeEventListener('pageshow', onPageshow);
+	submitDocument?.removeEventListener('submit', onSubmitCapture, true);
+	window.removeEventListener('pointerup', releasePointer);
+	window.removeEventListener('pointercancel', releasePointer);
+});
+
+// A new locale or precision repaints the same raw value.
+watch([symbols, shownMinPrecision, maxPrecision, legacy, affix], () => {
+	if (!input.value) return;
+	if (legacy.value) {
+		input.value.value = props.modelValue?.toString() || '';
+		return;
+	}
+	if (!isFocused()) setRaw(rawAtRest(committed.value, maxPrecision.value));
+	paint(isFocused() ? edit.raw.length : undefined);
 });
 </script>
 
@@ -589,6 +1321,66 @@ export const BB_NUMBER_INPUT_PT = {
 	states: readonly BbNumberInputPtState[];
 };
 
+/**
+ * The 45 simple units `Intl.NumberFormat` sanctions (ECMA-402;
+ * `Intl.supportedValuesOf('unit')`).
+ */
+export type BbNumberSimpleUnit =
+	| 'acre'
+	| 'bit'
+	| 'byte'
+	| 'celsius'
+	| 'centimeter'
+	| 'day'
+	| 'degree'
+	| 'fahrenheit'
+	| 'fluid-ounce'
+	| 'foot'
+	| 'gallon'
+	| 'gigabit'
+	| 'gigabyte'
+	| 'gram'
+	| 'hectare'
+	| 'hour'
+	| 'inch'
+	| 'kilobit'
+	| 'kilobyte'
+	| 'kilogram'
+	| 'kilometer'
+	| 'liter'
+	| 'megabit'
+	| 'megabyte'
+	| 'meter'
+	| 'microsecond'
+	| 'mile'
+	| 'mile-scandinavian'
+	| 'milliliter'
+	| 'millimeter'
+	| 'millisecond'
+	| 'minute'
+	| 'month'
+	| 'nanosecond'
+	| 'ounce'
+	| 'percent'
+	| 'petabyte'
+	| 'pound'
+	| 'second'
+	| 'stone'
+	| 'terabit'
+	| 'terabyte'
+	| 'week'
+	| 'yard'
+	| 'year';
+
+/**
+ * A unit for `BbNumberInput`'s `unit`: a sanctioned simple unit, or two joined
+ * by `-per-` (`kilometer-per-hour`; the halves are not checked, so the
+ * manifest stays small). `square-meter` and `kilowatt` are not
+ * `Intl` units, so they are type errors. `percent` holds the number you see:
+ * 15 shows `15%`.
+ */
+export type BbNumberUnit = BbNumberSimpleUnit | `${string}-per-${string}`;
+
 // The passthrough props are a mapped type written INLINE with this
 // component's own unions (Vue's SFC type resolver does not substitute a
 // generic alias's type parameters — plans/PASSTHROUGH.md T20); the test
@@ -635,6 +1427,16 @@ export type BbNumberInputProps = {
 	 */
 	compact?: boolean;
 
+	/**
+	 * An ISO 4217 code (`'EUR'`, `'USD'`, `'JPY'`): the field shows the amount
+	 * the locale's way, symbol included (`1.234,56 €` in Italian, `$1,234.56`
+	 * in English), inside the text, so `#prefix` / `#suffix` stay free. The
+	 * model is the number (`1234.56`). The decimals default to the currency's
+	 * own; `minPrecision` / `maxPrecision` win when set. One or the other with
+	 * `unit`.
+	 */
+	currency?: string;
+
 	/**
 	 * Visual variant of the field box — the same names and tokens as the
 	 * `BbButton` variants. Colours only: height, padding and border width are
@@ -761,12 +1563,37 @@ export type BbNumberInputProps = {
 	max?: number;
 
 	/**
-	 * Maximum precision of the number.
+	 * Maximum precision of the number: fraction digits past it are refused as
+	 * typed (never rounded). With `currency`, the currency's own digits (`2`
+	 * for EUR, `0` for JPY, `3` for KWD), or `minPrecision` when that is larger.
 	 *
 	 * @defaultValue `8`
 	 */
 	maxPrecision?: number;
 
+	/**
+	 * Fraction digits always shown (`2`: `1` shows `1,00`, `1,5` shows `1,50`),
+	 * also while typing, where the padding zeros are placeholders the user types
+	 * over. The model stays the number (`1.5`). A `minPrecision` above
+	 * `maxPrecision` gives way to it. Applies with `disableFormatting` too
+	 * (the padding only, period decimal). With `currency`, the currency's own
+	 * digits (`2` for EUR, `0` for JPY).
+	 *
+	 * @defaultValue `0`
+	 */
+	minPrecision?: number;
+
+	/**
+	 * Shows the number as typed, with a period decimal and no grouping — the
+	 * field before Q60.25: no locale display, `name` on the visible input.
+	 * Without it the field shows the number the locale's way while the user
+	 * types (`10.005,6` in Italian), groups it for them, and posts the raw value
+	 * (`10005.6`) through a hidden input carrying `name`.
+	 *
+	 * @defaultValue `false`
+	 */
+	disableFormatting?: boolean;
+
 	/**
 	 * Minimum value cap. Applied on blur and on Enter (before a surrounding
 	 * form submits), not while typing, so a value above a `min` greater than 1
@@ -826,6 +1653,15 @@ export type BbNumberInputProps = {
 	 * @defaultValue `1`
 	 */
 	step?: number;
+
+	/**
+	 * A unit `Intl.NumberFormat` knows (`'kilogram'`, `'kilometer-per-hour'`,
+	 * `'celsius'`, `'percent'`; a typo is a type error): the field shows it
+	 * the locale's way inside the text (`20 kg`, `15 %`). The model is the number you see: `unit="percent"`
+	 * showing `15 %` holds `15`, not `0.15`. One or the other with `currency`
+	 * (set both and `currency` wins).
+	 */
+	unit?: BbNumberUnit;
 } & FormFieldProps<number | string | null>;
 
 export type BbNumberInputEvents = {