@jobber/components 8.23.0 → 8.23.1

package/dist/NumberFieldInput-cjs.js

@@ -4,9 +4,10 @@ var React = require('react');
 var useButton = require('./useButton-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
 var useLabelableId = require('./useLabelableId-cjs.js');
-var clamp = require('./clamp-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
+var useLabel = require('./useLabel-cjs.js');
+var clamp = require('./clamp-cjs.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -40,7 +41,7 @@ function useForcedRerendering() {
 const cache = new Map();
 function getFormatter(locale, options) {
   const optionsString = JSON.stringify({
-    locale,
+    locale: useLabel.stringifyLocale(locale),
     options
   });
   const cachedFormatter = cache.get(optionsString);
@@ -57,44 +58,6 @@ function formatNumber(value, locale, options) {
   }
   return getFormatter(locale, options).format(value);
 }
-function formatNumberMaxPrecision(value, locale, options) {
-  return formatNumber(value, locale, {
-    ...options,
-    maximumFractionDigits: 20
-  });
-}
-
-const EMPTY = 0;
-class Interval extends useButton.Timeout {
-  static create() {
-    return new Interval();
-  }
-
-  /**
-   * Executes `fn` at `delay` interval, clearing any previously scheduled call.
-   */
-  start(delay, fn) {
-    this.clear();
-    this.currentId = setInterval(() => {
-      fn();
-    }, delay);
-  }
-  clear = () => {
-    if (this.currentId !== EMPTY) {
-      clearInterval(this.currentId);
-      this.currentId = EMPTY;
-    }
-  };
-}
-
-/**
- * A `setInterval` with automatic cleanup and guard.
- */
-function useInterval() {
-  const timeout = useRenderElement.useRefWithInit(Interval.create).current;
-  useButton.useOnMount(timeout.disposeEffect);
-  return timeout;
-}
 
 const NumberFieldRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
 if (process.env.NODE_ENV !== "production") NumberFieldRootContext.displayName = "NumberFieldRootContext";
@@ -106,7 +69,7 @@ function useNumberFieldRootContext() {
   return context;
 }
 
-const stateAttributesMapping$1 = {
+const stateAttributesMapping = {
   inputValue: () => null,
   value: () => null,
   ...useLabelableId.fieldValidityMapping
@@ -145,12 +108,20 @@ const FULLWIDTH_RE = new RegExp(`[${FULLWIDTH_NUMERALS.join('')}]`, 'g');
 const HAN_RE = new RegExp(`[${HAN_NUMERALS.join('')}]`, 'g');
 const PERCENT_RE = new RegExp(`[${PERCENTAGES.join('')}]`);
 const PERMILLE_RE = new RegExp(`[${PERMILLE.join('')}]`);
+const PERCENT_GLOBAL_RE = new RegExp(PERCENT_RE.source, 'g');
+const PERMILLE_GLOBAL_RE = new RegExp(PERMILLE_RE.source, 'g');
 
-// Detection regexes (non-global to avoid lastIndex side effects)
-const ARABIC_DETECT_RE = /[٠١٢٣٤٥٦٧٨٩]/;
-const PERSIAN_DETECT_RE = /[۰۱۲۳۴۵۶۷۸۹]/;
-const HAN_DETECT_RE = /[零〇一二三四五六七八九]/;
+// Detection regexes (non-global to avoid lastIndex side effects), derived from the numeral arrays
+// so they can't drift out of sync.
+const ARABIC_DETECT_RE = new RegExp(`[${ARABIC_NUMERALS.join('')}]`);
+const PERSIAN_DETECT_RE = new RegExp(`[${PERSIAN_NUMERALS.join('')}]`);
+const HAN_DETECT_RE = new RegExp(`[${HAN_NUMERALS.join('')}]`);
 const FULLWIDTH_DETECT_RE = new RegExp(`[${FULLWIDTH_NUMERALS.join('')}]`);
+
+// Whether the character is a digit in any numeral system the field accepts.
+function isNumeralChar(char) {
+  return char >= '0' && char <= '9' || ARABIC_DETECT_RE.test(char) || PERSIAN_DETECT_RE.test(char) || HAN_DETECT_RE.test(char) || FULLWIDTH_DETECT_RE.test(char);
+}
 const BASE_NON_NUMERIC_SYMBOLS = ['.', ',', FULLWIDTH_DECIMAL, FULLWIDTH_GROUP, '٫', '٬'];
 const SPACE_SEPARATOR_RE = /\p{Zs}/u;
 const PLUS_SIGNS_WITH_ASCII = ['+', ...UNICODE_PLUS_SIGNS];
@@ -158,6 +129,10 @@ const MINUS_SIGNS_WITH_ASCII = ['-', ...UNICODE_MINUS_SIGNS];
 const escapeRegExp = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 const escapeClassChar = s => s.replace(/[-\\\]^]/g, m => `\\${m}`); // escape for use inside [...]
 
+function shiftDecimal(value, exponentDelta) {
+  const [coefficient, exponent = '0'] = String(value).split('e');
+  return Number(`${coefficient}e${Number(exponent) + exponentDelta}`);
+}
 const charClassFrom = chars => `[${chars.map(escapeClassChar).join('')}]`;
 const ANY_MINUS_CLASS = charClassFrom(['-'].concat(UNICODE_MINUS_SIGNS));
 const ANY_PLUS_CLASS = charClassFrom(['+'].concat(UNICODE_PLUS_SIGNS));
@@ -172,7 +147,9 @@ function getNumberLocaleDetails(locale, options) {
     result[part.type] = part.value;
   });
 
-  // The formatting options may result in not returning a decimal.
+  // The formatting options may omit the decimal separator (e.g. integer formats), so resolve it
+  // from the plain locale formatter. This overrides any options-derived decimal too, which is
+  // safe because the separator is locale-determined and identical across format styles.
   getFormatter(locale).formatToParts(0.1).forEach(part => {
     if (part.type === 'decimal') {
       result[part.type] = part.value;
@@ -221,7 +198,8 @@ function parseNumber(formattedNumber, locale, options) {
   const {
     group,
     decimal,
-    currency
+    currency,
+    exponentSeparator
   } = getNumberLocaleDetails(computedLocale, options);
 
   // Build robust unit regex from all unit parts (such as "km/h")
@@ -244,7 +222,7 @@ function parseNumber(formattedNumber, locale, options) {
     }
   }
   const replacements = [{
-    regex: group ? groupRegex : null,
+    regex: groupRegex,
     replacement: ''
   }, {
     regex: decimal ? new RegExp(escapeRegExp(decimal), 'g') : null,
@@ -279,6 +257,15 @@ function parseNumber(formattedNumber, locale, options) {
   }, {
     regex: unitRegex,
     replacement: ''
+  }, {
+    regex: PERCENT_GLOBAL_RE,
+    replacement: ''
+  }, {
+    regex: PERMILLE_GLOBAL_RE,
+    replacement: ''
+  }, {
+    regex: exponentSeparator ? new RegExp(escapeRegExp(exponentSeparator), 'g') : null,
+    replacement: 'e'
   },
   // Numeral systems to ASCII digits
   {
@@ -308,7 +295,7 @@ function parseNumber(formattedNumber, locale, options) {
   }
 
   // Guard against Infinity inputs (ASCII and symbol)
-  if (/^[-+]?Infinity$/i.test(input) || /[∞]/.test(input)) {
+  if (/^[-+]?Infinity$/i.test(input) || input.includes('∞')) {
     return null;
   }
   const parseTarget = (isNegative ? '-' : '') + unformatted;
@@ -318,65 +305,73 @@ function parseNumber(formattedNumber, locale, options) {
   const hasPercentSymbol = PERCENT_RE.test(formattedNumber) || style === 'percent';
   const hasPermilleSymbol = PERMILLE_RE.test(formattedNumber);
   if (hasPermilleSymbol) {
-    num /= 1000;
+    num = shiftDecimal(num, -3);
   } else if (!isUnitPercent && hasPercentSymbol) {
-    num /= 100;
+    num = shiftDecimal(num, -2);
   }
-  if (Number.isNaN(num)) {
+  if (!Number.isFinite(num)) {
     return null;
   }
   return num;
 }
 
-const CHANGE_VALUE_TICK_DELAY = 60;
-const START_AUTO_CHANGE_DELAY = 400;
-const TOUCH_TIMEOUT = 50;
-const MAX_POINTER_MOVES_AFTER_TOUCH = 3;
-const SCROLLING_POINTER_MOVE_DISTANCE = 8;
-const DEFAULT_STEP = 1;
-
+// A relative factor scaled by the step size when snapping (`stepSize * STEP_EPSILON_FACTOR`).
 const STEP_EPSILON_FACTOR = 1e-10;
-function getFractionDigits(format) {
-  const defaultOptions = getFormatter('en-US').resolvedOptions();
-  const minimumFractionDigits = format?.minimumFractionDigits ?? defaultOptions.minimumFractionDigits ?? 0;
-  const maximumFractionDigits = Math.max(format?.maximumFractionDigits ?? defaultOptions.maximumFractionDigits ?? 20, minimumFractionDigits);
-  return {
-    maximumFractionDigits,
-    minimumFractionDigits
-  };
+// An absolute cap (in the value's own units) on how far floating-point cleanup may move a value.
+// Equal to `STEP_EPSILON_FACTOR` only by coincidence — the two are independent and may diverge.
+const MAX_FLOATING_POINT_CLEANUP_DELTA = 1e-10;
+
+// The repo compiles against es2022 Intl types, so model NumberFormat v3 options locally.
+// Delete this once tsconfig.base.json includes es2023.
+
+function hasNumberFormatRoundingOptions(format) {
+  return format?.maximumFractionDigits != null || format?.minimumFractionDigits != null || format?.maximumSignificantDigits != null || format?.minimumSignificantDigits != null || format?.roundingIncrement != null || format?.roundingMode != null || format?.roundingPriority != null;
 }
-function roundToFractionDigits(value, maximumFractionDigits) {
+function removeFloatingPointErrors(value, format) {
   if (!Number.isFinite(value)) {
     return value;
   }
-  const digits = Math.min(Math.max(maximumFractionDigits, 0), 20);
-  return Number(value.toFixed(digits));
-}
-function removeFloatingPointErrors(value, format) {
-  const {
-    maximumFractionDigits
-  } = getFractionDigits(format);
-  return roundToFractionDigits(value, maximumFractionDigits);
-}
-function snapToStep(clampedValue, base, step, mode = 'directional') {
-  if (step === 0) {
-    return clampedValue;
+  if (!hasNumberFormatRoundingOptions(format)) {
+    // Clean binary floating-point noise (e.g. `0.1 + 0.2`) without discarding legitimate
+    // precision. The cleanup is delta-bounded, so it cannot tell noise apart from real digits
+    // that fall within the same epsilon: arithmetic that produces sub-epsilon precision (e.g.
+    // accumulating a high-significance `step` past the first tick) is normalized to ~15
+    // significant digits.
+    const roundedValue = parseFloat(value.toPrecision(15));
+    const cleanupDelta = Math.abs(roundedValue - value);
+    // Cap the cleanup delta so `toPrecision(15)` cannot erase meaningful fractional values
+    // at large magnitudes, where the relative epsilon alone is too permissive. The trade-off is
+    // that from the `2^19` binade (~5.2e5) up, a single ULP exceeds the absolute cap, so genuine
+    // stepping noise is left uncleaned there (e.g. `1000000.1 + 0.2` stays `1000000.2999999999`)
+    // rather than risk corrupting real precision.
+    const cleanupTolerance = Math.min(Number.EPSILON * Math.max(1, Math.abs(value)), MAX_FLOATING_POINT_CLEANUP_DELTA);
+    return cleanupDelta <= cleanupTolerance ? roundedValue : value;
+  }
+  const formatter = getFormatter('en-US', {
+    ...format,
+    // These options alter only display decoration, not numeric rounding.
+    signDisplay: 'auto',
+    currencySign: 'standard',
+    notation: format.notation === 'compact' ? 'standard' : format.notation,
+    useGrouping: false
+  });
+  const roundedText = formatter.format(value);
+  const roundedValue = parseNumber(roundedText, 'en-US', format);
+  if (roundedValue === null) {
+    return value;
   }
+  return formatter.format(roundedValue) === roundedText ? roundedValue : value;
+}
+function snapToStep(value, base, step, mode = 'directional') {
   const stepSize = Math.abs(step);
   const direction = Math.sign(step);
   const tolerance = stepSize * STEP_EPSILON_FACTOR * direction;
-  const divisor = mode === 'nearest' ? step : stepSize;
-  const rawSteps = (clampedValue - base + tolerance) / divisor;
-  let snappedSteps;
+  const rawSteps = value - base + tolerance;
   if (mode === 'nearest') {
-    snappedSteps = Math.round(rawSteps);
-  } else if (direction > 0) {
-    snappedSteps = Math.floor(rawSteps);
-  } else {
-    snappedSteps = Math.ceil(rawSteps);
+    return base + Math.round(rawSteps / step) * step;
   }
-  const stepForResult = mode === 'nearest' ? step : stepSize;
-  return base + snappedSteps * stepForResult;
+  const snappedSteps = direction > 0 ? Math.floor(rawSteps / stepSize) : Math.ceil(rawSteps / stepSize);
+  return base + snappedSteps * stepSize;
 }
 function toValidatedNumber(value, {
   step,
@@ -391,21 +386,31 @@ function toValidatedNumber(value, {
   if (value === null) {
     return value;
   }
-  const clampedValue = shouldClamp ? clamp.clamp(value, minWithDefault, maxWithDefault) : value;
-  if (step != null && snapOnStep) {
-    if (step === 0) {
-      return removeFloatingPointErrors(clampedValue, format);
-    }
+  let nextValue = value;
+  if (step != null && snapOnStep && step !== 0) {
+    const base = small || minWithDefault === Number.MIN_SAFE_INTEGER ? minWithZeroDefault : minWithDefault;
 
-    // If a real minimum is provided, use it
-    let base = minWithZeroDefault;
-    if (!small && minWithDefault !== Number.MIN_SAFE_INTEGER) {
-      base = minWithDefault;
-    }
-    const snappedValue = snapToStep(clampedValue, base, step, small ? 'nearest' : 'directional');
-    return removeFloatingPointErrors(snappedValue, format);
+    // Snap before clamping so non-step-aligned boundaries stay reachable.
+    nextValue = snapToStep(nextValue, base, step, small ? 'nearest' : 'directional');
+  }
+
+  // Clamp before rounding so a value just outside a fractional boundary (e.g. `0.4` with
+  // `min: 0.6`) is pulled in range first, then clamp again after rounding in case rounding
+  // nudges it back out. Both passes are needed for non-integer bounds.
+  if (shouldClamp) {
+    nextValue = clamp.clamp(nextValue, minWithDefault, maxWithDefault);
+  }
+
+  // Non-stepping values — parsed input (typing, paste, blur) and externally-supplied controlled
+  // values — involve no arithmetic here, so they carry no binary noise to clean and are returned
+  // verbatim to keep every digit, including values with more than 15 significant digits. Only
+  // stepping/snapping arithmetic can introduce noise (e.g. 0.7 + 0.1), which
+  // `removeFloatingPointErrors` cleans.
+  if (step == null && !hasNumberFormatRoundingOptions(format)) {
+    return nextValue;
   }
-  return removeFloatingPointErrors(clampedValue, format);
+  const roundedValue = removeFloatingPointErrors(nextValue, format);
+  return shouldClamp ? clamp.clamp(roundedValue, minWithDefault, maxWithDefault) : roundedValue;
 }
 
 const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function NumberFieldRoot(componentProps, forwardedRef) {
@@ -419,6 +424,7 @@ const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function Number
     required = false,
     disabled: disabledProp = false,
     readOnly = false,
+    form,
     name: nameProp,
     defaultValue,
     value: valueProp,
@@ -432,6 +438,7 @@ const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function Number
     render,
     className,
     inputRef: inputRefProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -442,9 +449,11 @@ const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function Number
     invalid,
     name: fieldName,
     state: fieldState,
-    validation,
-    shouldValidateOnChange
+    validation
   } = useLabelableId.useFieldRootContext();
+  const {
+    clearErrors
+  } = useLabelableId.useFormContext();
   const disabled = fieldDisabled || disabledProp;
   const name = fieldName ?? nameProp;
   const step = stepProp === 'any' ? 1 : stepProp;
@@ -476,25 +485,14 @@ const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function Number
     hasPendingCommitRef.current = false;
     onValueCommittedProp?.(nextValue, eventDetails);
   });
-  const startTickTimeout = useButton.useTimeout();
-  const tickInterval = useInterval();
-  const intentionalTouchCheckTimeout = useButton.useTimeout();
-  const isPressedRef = React__namespace.useRef(false);
-  const movesAfterTouchRef = React__namespace.useRef(0);
   const allowInputSyncRef = React__namespace.useRef(true);
   const lastChangedValueRef = React__namespace.useRef(null);
-  const unsubscribeFromGlobalContextMenuRef = React__namespace.useRef(() => {});
 
   // During SSR, the value is formatted on the server, whose locale may differ from the client's
   // locale. This causes a hydration mismatch, which we manually suppress. This is preferable to
   // rendering an empty input field and then updating it with the formatted value, as the user
   // can still see the value prior to hydration, even if it's not formatted correctly.
-  const [inputValue, setInputValue] = React__namespace.useState(() => {
-    if (valueProp !== undefined) {
-      return getControlledInputValue(value, locale, format);
-    }
-    return formatNumber(value, locale, format);
-  });
+  const [inputValue, setInputValue] = React__namespace.useState(() => formatNumber(value, locale, format));
   const [inputMode, setInputMode] = React__namespace.useState('numeric');
   const getAllowedNonNumericKeys = useButton.useStableCallback(() => {
     const {
@@ -534,9 +532,10 @@ const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function Number
       }
     }
 
-    // Allow plus sign in all cases; minus sign only when negatives are valid
+    // Allow plus sign in all cases; minus sign when negatives are valid, or when out-of-range
+    // entry is allowed so native underflow validation can be triggered from the keyboard.
     PLUS_SIGNS_WITH_ASCII.forEach(key => keys.add(key));
-    if (minWithDefault < 0) {
+    if (minWithDefault < 0 || allowOutOfRange) {
       MINUS_SIGNS_WITH_ASCII.forEach(key => keys.add(key));
     }
     return keys;
@@ -553,10 +552,13 @@ const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function Number
   const setValue = useButton.useStableCallback((unvalidatedValue, details) => {
     const eventWithOptionalKeyState = details.event;
     const dir = details.direction;
-    const reason = details.reason;
-    // Only allow out-of-range values for direct text entry (native-like behavior).
-    // Step-based interactions (keyboard arrows, buttons, wheel, scrub) still clamp to min/max.
-    const shouldClampValue = !allowOutOfRange || !(reason === useButton.inputChange || reason === useButton.inputBlur || reason === useButton.inputPaste || reason === useButton.inputClear || reason === useButton.none);
+
+    // Direct text entry (typing, pasting, clearing, autofill) behaves natively; step-based
+    // interactions (keyboard arrows, buttons, wheel, scrub) do not.
+    const isInputReason = details.reason === useButton.inputChange || details.reason === useButton.inputClear || details.reason === useButton.inputBlur || details.reason === useButton.inputPaste || details.reason === useButton.none;
+
+    // Only allow out-of-range values for direct text entry. Step-based interactions still clamp.
+    const shouldClampValue = !allowOutOfRange || !isInputReason;
     const validatedValue = toValidatedNumber(unvalidatedValue, {
       step: dir ? getStepAmount(eventWithOptionalKeyState) * dir : undefined,
       format: formatOptionsRef.current,
@@ -568,21 +570,21 @@ const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function Number
       clamp: shouldClampValue
     });
 
-    // Determine whether we should notify about a change even if the numeric value is unchanged.
-    // This is needed when the user input is clamped/snapped to the same current value, or when
-    // the source value differs but validation normalizes to the existing value.
-    const isInputReason = details.reason === useButton.inputChange || details.reason === useButton.inputClear || details.reason === useButton.inputBlur || details.reason === useButton.inputPaste || details.reason === useButton.none;
+    // Notify about a change even when the numeric value is unchanged for input reasons: the
+    // typed text may clamp/snap to the current value, or differ while validation normalizes
+    // it back to the existing value.
     const shouldFireChange = validatedValue !== value || isInputReason && (unvalidatedValue !== value || allowInputSyncRef.current === false);
     if (shouldFireChange) {
-      lastChangedValueRef.current = validatedValue;
       onValueChangeProp?.(validatedValue, details);
       if (details.isCanceled) {
-        return shouldFireChange;
+        // Report a vetoed change as not applied, so callers don't commit a value never stored.
+        return false;
       }
       setValueUnwrapped(validatedValue);
       setDirty(validatedValue !== validityData.initialValue);
       hasPendingCommitRef.current = true;
     }
+    lastChangedValueRef.current = validatedValue;
 
     // Keep the visible input in sync immediately when programmatic changes occur
     // (increment/decrement, wheel, etc). During direct typing we don't want
@@ -603,68 +605,21 @@ const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function Number
     reason
   }) => {
     const prevValue = currentValue == null ? valueRef.current : currentValue;
-    const nextValue = typeof prevValue === 'number' ? prevValue + amount * direction : Math.max(0, min ?? 0);
     const nativeEvent = event;
-    return setValue(nextValue, useButton.createChangeEventDetails(reason, nativeEvent, undefined, {
+    if (typeof prevValue !== 'number') {
+      // Seed an empty field with 0; `setValue` clamps it to the in-range value nearest 0
+      // (e.g. `max` for a negative range). No `direction`: the seed isn't a step, so it must
+      // not be directionally snapped.
+      return setValue(0, useButton.createChangeEventDetails(reason, nativeEvent));
+    }
+    return setValue(prevValue + amount * direction, useButton.createChangeEventDetails(reason, nativeEvent, undefined, {
       direction
     }));
   });
-  const stopAutoChange = useButton.useStableCallback(() => {
-    intentionalTouchCheckTimeout.clear();
-    startTickTimeout.clear();
-    tickInterval.clear();
-    unsubscribeFromGlobalContextMenuRef.current();
-    movesAfterTouchRef.current = 0;
-  });
-  const startAutoChange = useButton.useStableCallback((isIncrement, triggerEvent) => {
-    stopAutoChange();
-    if (!inputRef.current) {
-      return;
-    }
-    const win = floatingUi_utils_dom.getWindow(inputRef.current);
-    function handleContextMenu(event) {
-      event.preventDefault();
-    }
-
-    // A global context menu is necessary to prevent the context menu from appearing when the touch
-    // is slightly outside of the element's hit area.
-    win.addEventListener('contextmenu', handleContextMenu);
-    unsubscribeFromGlobalContextMenuRef.current = () => {
-      win.removeEventListener('contextmenu', handleContextMenu);
-    };
-    win.addEventListener('pointerup', event => {
-      isPressedRef.current = false;
-      stopAutoChange();
-      const committed = lastChangedValueRef.current ?? valueRef.current;
-      const commitReason = isIncrement ? useButton.incrementPress : useButton.decrementPress;
-      onValueCommitted(committed, useButton.createGenericEventDetails(commitReason, event));
-    }, {
-      once: true
-    });
-    function tick() {
-      const amount = getStepAmount(triggerEvent) ?? DEFAULT_STEP;
-      return incrementValue(amount, {
-        direction: isIncrement ? 1 : -1,
-        event: triggerEvent,
-        reason: isIncrement ? 'increment-press' : 'decrement-press'
-      });
-    }
-    if (!tick()) {
-      stopAutoChange();
-      return;
-    }
-    startTickTimeout.start(START_AUTO_CHANGE_DELAY, () => {
-      tickInterval.start(CHANGE_VALUE_TICK_DELAY, () => {
-        if (!tick()) {
-          stopAutoChange();
-        }
-      });
-    });
-  });
 
   // We need to update the input value when the external `value` prop changes. This ends up acting
   // as a single source of truth to update the input value, bypassing the need to manually set it in
-  // each event handler internally in this hook.
+  // each event handler.
   // This is done inside a layout effect as an alternative to the technique to set state during
   // render as we're accessing a ref, which must be inside an effect.
   // https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
@@ -678,13 +633,13 @@ const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function Number
     if (!allowInputSyncRef.current) {
       return;
     }
-    const nextInputValue = valueProp !== undefined ? getControlledInputValue(value, locale, format) : formatNumber(value, locale, format);
+    const nextInputValue = formatNumber(value, locale, format);
     if (nextInputValue !== inputValue) {
       setInputValue(nextInputValue);
     }
   });
   useButton.useIsoLayoutEffect(function setDynamicInputModeForIOS() {
-    if (!useButton.isIOS) {
+    if (!useButton.ios) {
       return;
     }
 
@@ -697,12 +652,10 @@ const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function Number
       computedInputMode = 'decimal';
     }
     setInputMode(computedInputMode);
-  }, [minWithDefault, formatStyle]);
-  React__namespace.useEffect(() => {
-    return () => stopAutoChange();
-  }, [stopAutoChange]);
+  }, [minWithDefault]);
 
-  // The `onWheel` prop can't be prevented, so we need to use a global event listener.
+  // React attaches `onWheel` as a passive listener, so calling `preventDefault` there is ignored.
+  // Attach a native (non-passive) `wheel` listener to the input instead to prevent page scrolling.
   React__namespace.useEffect(function registerElementWheelListener() {
     const element = inputRef.current;
     if (disabled || readOnly || !allowWheelScrub || !element) {
@@ -711,24 +664,28 @@ const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function Number
     function handleWheel(event) {
       if (
       // Allow pinch-zooming.
-      event.ctrlKey || useButton.ownerDocument(inputRef.current).activeElement !== inputRef.current) {
+      event.ctrlKey || useButton.activeElement(useButton.ownerDocument(inputRef.current)) !== inputRef.current) {
         return;
       }
 
       // Prevent the default behavior to avoid scrolling the page.
       event.preventDefault();
-      const amount = getStepAmount(event) ?? DEFAULT_STEP;
-      incrementValue(amount, {
+      allowInputSyncRef.current = true;
+      const amount = getStepAmount(event);
+
+      // Each wheel turn is a discrete, final change, so commit it immediately like keyboard
+      // steps (gated on an actual change so boundary no-ops don't commit).
+      const changed = incrementValue(amount, {
         direction: event.deltaY > 0 ? -1 : 1,
         event,
         reason: 'wheel'
       });
+      if (changed) {
+        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, useButton.createGenericEventDetails(useButton.wheel, event));
+      }
     }
-    element.addEventListener('wheel', handleWheel);
-    return () => {
-      element.removeEventListener('wheel', handleWheel);
-    };
-  }, [allowWheelScrub, incrementValue, disabled, readOnly, largeStep, step, getStepAmount]);
+    return useButton.addEventListener(element, 'wheel', handleWheel);
+  }, [allowWheelScrub, incrementValue, disabled, readOnly, getStepAmount, onValueCommitted, lastChangedValueRef, valueRef]);
   const state = React__namespace.useMemo(() => ({
     ...fieldState,
     disabled,
@@ -742,8 +699,6 @@ const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function Number
     inputRef,
     inputValue,
     value,
-    startAutoChange,
-    stopAutoChange,
     minWithDefault,
     maxWithDefault,
     disabled,
@@ -757,10 +712,8 @@ const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function Number
     valueRef,
     lastChangedValueRef,
     hasPendingCommitRef,
-    isPressedRef,
-    intentionalTouchCheckTimeout,
-    movesAfterTouchRef,
     name,
+    nameProp,
     required,
     invalid,
     inputMode,
@@ -773,23 +726,23 @@ const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function Number
     setIsScrubbing,
     state,
     onValueCommitted
-  }), [inputRef, inputValue, value, startAutoChange, stopAutoChange, minWithDefault, maxWithDefault, disabled, readOnly, id, setValue, incrementValue, getStepAmount, formatOptionsRef, valueRef, intentionalTouchCheckTimeout, name, required, invalid, inputMode, getAllowedNonNumericKeys, min, max, setInputValue, locale, isScrubbing, state, onValueCommitted]);
+  }), [inputRef, inputValue, value, minWithDefault, maxWithDefault, disabled, readOnly, id, setValue, incrementValue, getStepAmount, formatOptionsRef, valueRef, name, nameProp, required, invalid, inputMode, getAllowedNonNumericKeys, min, max, setInputValue, locale, isScrubbing, state, onValueCommitted]);
   const element = useRenderElement.useRenderElement('div', componentProps, {
     ref: forwardedRef,
     state,
     props: elementProps,
-    stateAttributesMapping: stateAttributesMapping$1
+    stateAttributesMapping
   });
   return /*#__PURE__*/jsxRuntime.jsxs(NumberFieldRootContext.Provider, {
     value: contextValue,
     children: [element, /*#__PURE__*/jsxRuntime.jsx("input", {
-      ...validation.getInputValidationProps({
+      ...validation.getValidationProps(disabled, {
         onFocus() {
           inputRef.current?.focus();
         },
         onChange(event) {
           // Workaround for https://github.com/facebook/react/issues/9023
-          if (event.nativeEvent.defaultPrevented) {
+          if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
             return;
           }
 
@@ -797,15 +750,17 @@ const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function Number
           const nextValue = event.currentTarget.valueAsNumber;
           const parsedValue = Number.isNaN(nextValue) ? null : nextValue;
           const details = useButton.createChangeEventDetails(useButton.none, event.nativeEvent);
-          setDirty(parsedValue !== validityData.initialValue);
+
+          // `setValue` updates the dirty flag from the stored (clamped) value, so validate with
+          // that same value rather than the raw autofilled one.
           setValue(parsedValue, details);
-          if (shouldValidateOnChange()) {
-            validation.commit(parsedValue);
-          }
+          clearErrors(name);
+          validation.change(lastChangedValueRef.current ?? parsedValue);
         }
       }),
       ref: hiddenInputRef,
       type: "number",
+      form: form,
       name: name,
       value: value ?? '',
       min: min,
@@ -815,18 +770,17 @@ const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function Number
       ,
       step: stepProp,
       disabled: disabled,
+      readOnly: readOnly,
       required: required,
       "aria-hidden": true,
       tabIndex: -1,
-      style: name ? useButton.visuallyHiddenInput : useButton.visuallyHidden
+      style: name ? useButton.visuallyHiddenInput : useButton.visuallyHidden,
+      suppressHydrationWarning: true
     })]
   });
 });
-if (process.env.NODE_ENV !== "production") NumberFieldRoot.displayName = "NumberFieldRoot";
-function getControlledInputValue(value, locale, format) {
-  const explicitPrecision = format?.maximumFractionDigits != null || format?.minimumFractionDigits != null;
-  return explicitPrecision ? formatNumber(value, locale, format) : formatNumberMaxPrecision(value, locale, format);
-}
+if (process.env.NODE_ENV !== "production") NumberFieldRoot.displayName = "NumberFieldRoot"; // `none` is kept for consistency with other components even though the number field never
+// commits with it.
 
 /**
  * Groups the input with the increment and decrement buttons.
@@ -838,6 +792,7 @@ const NumberFieldGroup = /*#__PURE__*/React__namespace.forwardRef(function Numbe
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -849,135 +804,175 @@ const NumberFieldGroup = /*#__PURE__*/React__namespace.forwardRef(function Numbe
     props: [{
       role: 'group'
     }, elementProps],
-    stateAttributesMapping: stateAttributesMapping$1
+    stateAttributesMapping
   });
   return element;
 });
 if (process.env.NODE_ENV !== "production") NumberFieldGroup.displayName = "NumberFieldGroup";
 
+const EMPTY = 0;
+class Interval extends useButton.Timeout {
+  static create() {
+    return new Interval();
+  }
+
+  /**
+   * Executes `fn` at `delay` interval, clearing any previously scheduled call.
+   */
+  start(delay, fn) {
+    this.clear();
+    this.currentId = setInterval(() => {
+      fn();
+    }, delay);
+  }
+  clear = () => {
+    if (this.currentId !== EMPTY) {
+      clearInterval(this.currentId);
+      this.currentId = EMPTY;
+    }
+  };
+}
+
+/**
+ * A `setInterval` with automatic cleanup and guard.
+ */
+function useInterval() {
+  const timeout = useRenderElement.useRefWithInit(Interval.create).current;
+  useButton.useOnMount(timeout.disposeEffect);
+  return timeout;
+}
+
+const DEFAULT_TICK_DELAY = 60;
+const DEFAULT_START_DELAY = 400;
+const DEFAULT_SCROLL_DISTANCE = 8;
+const TOUCH_TIMEOUT = 50;
+const MAX_POINTER_MOVES_AFTER_TOUCH = 3;
+
 // Treat pen as touch-like to avoid forcing the software keyboard on stylus taps.
 // Linux Chrome may emit "pen" historically for mouse usage due to a bug, but the touch path
 // still works with minor behavioral differences.
 function isTouchLikePointerType(pointerType) {
   return pointerType === 'touch' || pointerType === 'pen';
 }
-function useNumberFieldButton(params) {
+/**
+ * Adds press-and-hold behavior to a button element.
+ * On pointer down, performs one action immediately, then after a delay starts
+ * continuous repeated actions at a fixed interval. Handles mouse, touch, and pen
+ * inputs correctly, including Android-specific quirks.
+ */
+function usePressAndHold(params) {
   const {
-    allowInputSyncRef,
     disabled,
-    formatOptionsRef,
-    getStepAmount,
-    id,
-    incrementValue,
-    inputRef,
-    inputValue,
-    intentionalTouchCheckTimeout,
-    isIncrement,
-    isPressedRef,
-    locale,
-    movesAfterTouchRef,
-    readOnly,
-    setValue,
-    startAutoChange,
-    stopAutoChange,
-    valueRef,
-    lastChangedValueRef,
-    onValueCommitted
+    readOnly = false,
+    tick,
+    onStop,
+    tickDelay = DEFAULT_TICK_DELAY,
+    startDelay = DEFAULT_START_DELAY,
+    scrollDistance = DEFAULT_SCROLL_DISTANCE,
+    elementRef
   } = params;
-  const incrementDownCoordsRef = React__namespace.useRef({
+  const startTickTimeout = useButton.useTimeout();
+  const tickInterval = useInterval();
+  const intentionalTouchCheckTimeout = useButton.useTimeout();
+  const isPressedRef = React__namespace.useRef(false);
+  const movesAfterTouchRef = React__namespace.useRef(0);
+  const downCoordsRef = React__namespace.useRef({
     x: 0,
     y: 0
   });
   const isTouchingButtonRef = React__namespace.useRef(false);
   const ignoreClickRef = React__namespace.useRef(false);
   const pointerTypeRef = React__namespace.useRef('');
-  const pressReason = isIncrement ? 'increment-press' : 'decrement-press';
-  function commitValue(nativeEvent) {
-    allowInputSyncRef.current = true;
+  const unsubscribeFromGlobalContextMenuRef = React__namespace.useRef(useRenderElement.NOOP);
+  const unsubscribeFromGlobalPointerUpRef = React__namespace.useRef(useRenderElement.NOOP);
+  const stopAutoChange = useButton.useStableCallback(() => {
+    intentionalTouchCheckTimeout.clear();
+    startTickTimeout.clear();
+    tickInterval.clear();
+    unsubscribeFromGlobalContextMenuRef.current();
+    movesAfterTouchRef.current = 0;
+  });
+  function startAutoChange(triggerNativeEvent) {
+    stopAutoChange();
+    const element = elementRef.current;
+    if (!element) {
+      return;
+    }
+    const win = floatingUi_utils_dom.getWindow(element);
+    function handleContextMenu(event) {
+      event.preventDefault();
+    }
 
-    // The input may be dirty but not yet blurred, so the value won't have been committed.
-    const parsedValue = parseNumber(inputValue, locale, formatOptionsRef.current);
-    if (parsedValue !== null) {
-      // The increment value function needs to know the current input value to increment it
-      // correctly.
-      valueRef.current = parsedValue;
-      setValue(parsedValue, useButton.createChangeEventDetails(pressReason, nativeEvent, undefined, {
-        direction: isIncrement ? 1 : -1
-      }));
+    // A global context menu listener is necessary to prevent the context menu from
+    // appearing when the touch is slightly outside of the element's hit area.
+    unsubscribeFromGlobalContextMenuRef.current = useButton.addEventListener(win, 'contextmenu', handleContextMenu);
+
+    // The release listener stays registered through `stopAutoChange` so a hold that auto-stops at
+    // a boundary (a repeat tick returning `false`) still fires `onStop` on release. Replace any
+    // existing one first so a mouseleave/mouseenter cycle during a hold doesn't stack listeners
+    // (which would otherwise fire `onStop` more than once on release).
+    unsubscribeFromGlobalPointerUpRef.current();
+    unsubscribeFromGlobalPointerUpRef.current = useButton.addEventListener(win, 'pointerup', event => {
+      isPressedRef.current = false;
+      stopAutoChange();
+      onStop?.(event);
+    }, {
+      once: true
+    });
+    if (!tick(triggerNativeEvent)) {
+      stopAutoChange();
+      return;
     }
+    startTickTimeout.start(startDelay, () => {
+      tickInterval.start(tickDelay, () => {
+        if (!tick(triggerNativeEvent)) {
+          stopAutoChange();
+        }
+      });
+    });
   }
-  const props = {
-    disabled,
-    'aria-readonly': readOnly || undefined,
-    'aria-label': isIncrement ? 'Increase' : 'Decrease',
-    'aria-controls': id,
-    // Keyboard users shouldn't have access to the buttons, since they can use the input element
-    // to change the value. On the other hand, `aria-hidden` is not applied because touch screen
-    // readers should be able to use the buttons.
-    tabIndex: -1,
-    style: {
-      WebkitUserSelect: 'none',
-      userSelect: 'none'
-    },
+  React__namespace.useEffect(() => () => {
+    stopAutoChange();
+    unsubscribeFromGlobalPointerUpRef.current();
+  }, [stopAutoChange]);
+  const pointerHandlers = {
     onTouchStart() {
       isTouchingButtonRef.current = true;
     },
     onTouchEnd() {
       isTouchingButtonRef.current = false;
     },
-    onClick(event) {
-      const isDisabled = disabled || readOnly;
-      if (event.defaultPrevented || isDisabled || (
-      // If it's not a keyboard/virtual click, ignore.
-      isTouchLikePointerType(pointerTypeRef.current) ? ignoreClickRef.current : event.detail !== 0)) {
-        return;
-      }
-      commitValue(event.nativeEvent);
-      const amount = getStepAmount(event) ?? DEFAULT_STEP;
-      const prev = valueRef.current;
-      incrementValue(amount, {
-        direction: isIncrement ? 1 : -1,
-        event: event.nativeEvent,
-        reason: pressReason
-      });
-      const committed = lastChangedValueRef.current ?? valueRef.current;
-      if (committed !== prev) {
-        onValueCommitted(committed, useButton.createGenericEventDetails(pressReason, event.nativeEvent));
-      }
-    },
     onPointerDown(event) {
       const isMainButton = !event.button || event.button === 0;
-      if (event.defaultPrevented || readOnly || !isMainButton || disabled) {
+      if (event.defaultPrevented || !isMainButton || disabled || readOnly) {
         return;
       }
       pointerTypeRef.current = event.pointerType;
       ignoreClickRef.current = false;
       isPressedRef.current = true;
-      incrementDownCoordsRef.current = {
+      downCoordsRef.current = {
         x: event.clientX,
         y: event.clientY
       };
-      commitValue(event.nativeEvent);
       const isTouchPointer = isTouchLikePointerType(event.pointerType);
       if (!isTouchPointer) {
         event.preventDefault();
-        inputRef.current?.focus();
-        startAutoChange(isIncrement, event);
+        startAutoChange(event.nativeEvent);
       } else {
-        // We need to check if the pointerdown was intentional, and not the result of a scroll
-        // or pinch-zoom. In that case, we don't want to change the value.
+        // Check if the pointerdown was intentional and not the result of a scroll or
+        // pinch-zoom. In that case, we don't want to start the auto-change sequence.
         intentionalTouchCheckTimeout.start(TOUCH_TIMEOUT, () => {
           const moves = movesAfterTouchRef.current;
           movesAfterTouchRef.current = 0;
           // Only start auto-change if the touch is still pressed (prevents races
           // with pointerup occurring before the timeout fires on quick taps).
           const stillPressed = isPressedRef.current;
-          if (stillPressed && moves != null && moves < MAX_POINTER_MOVES_AFTER_TOUCH) {
-            startAutoChange(isIncrement, event);
-            ignoreClickRef.current = true; // synthesized click should be ignored
+          if (stillPressed && moves < MAX_POINTER_MOVES_AFTER_TOUCH) {
+            startAutoChange(event.nativeEvent);
+            ignoreClickRef.current = true; // synthesized click after hold should be ignored
           } else {
             // No auto-change (simple tap or scroll gesture), allow the click handler
-            // to perform a single increment and commit.
+            // to perform a single action.
             ignoreClickRef.current = false;
             stopAutoChange();
           }
@@ -985,15 +980,14 @@ function useNumberFieldButton(params) {
       }
     },
     onPointerUp(event) {
-      // Ensure we mark the press as released for touch flows even if auto-change never started,
-      // so the delayed auto-change check won’t start after a quick tap.
+      // Ensure we mark the press as released for touch flows even if auto-change never
+      // started, so the delayed auto-change check won't start after a quick tap.
       if (isTouchLikePointerType(event.pointerType)) {
         isPressedRef.current = false;
       }
     },
     onPointerMove(event) {
-      const isDisabled = disabled || readOnly;
-      if (isDisabled || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
+      if (disabled || readOnly || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
         return;
       }
       if (movesAfterTouchRef.current != null) {
@@ -1002,22 +996,18 @@ function useNumberFieldButton(params) {
       const {
         x,
         y
-      } = incrementDownCoordsRef.current;
+      } = downCoordsRef.current;
       const dx = x - event.clientX;
       const dy = y - event.clientY;
-
-      // An alternative to this technique is to detect when the NumberField's parent container
-      // has been scrolled
-      if (dx ** 2 + dy ** 2 > SCROLLING_POINTER_MOVE_DISTANCE ** 2) {
+      if (dx ** 2 + dy ** 2 > scrollDistance ** 2) {
         stopAutoChange();
       }
     },
     onMouseEnter(event) {
-      const isDisabled = disabled || readOnly;
-      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
+      if (event.defaultPrevented || disabled || readOnly || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
         return;
       }
-      startAutoChange(isIncrement, event);
+      startAutoChange(event.nativeEvent);
     },
     onMouseLeave() {
       if (isTouchingButtonRef.current) {
@@ -1032,105 +1022,160 @@ function useNumberFieldButton(params) {
       stopAutoChange();
     }
   };
-  return props;
+  const shouldSkipClick = useButton.useStableCallback(event => {
+    if (event.defaultPrevented) {
+      return true;
+    }
+    if (isTouchLikePointerType(pointerTypeRef.current)) {
+      return ignoreClickRef.current;
+    }
+    return event.detail !== 0;
+  });
+  return {
+    pointerHandlers,
+    shouldSkipClick
+  };
 }
 
-/**
- * A stepper button that increases the field value when clicked.
- * Renders an `<button>` element.
- *
- * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
- */
-const NumberFieldIncrement = /*#__PURE__*/React__namespace.forwardRef(function NumberFieldIncrement(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled: disabledProp = false,
-    nativeButton = true,
-    ...elementProps
-  } = componentProps;
+const CHANGE_VALUE_TICK_DELAY = 60;
+const START_AUTO_CHANGE_DELAY = 400;
+const SCROLLING_POINTER_MOVE_DISTANCE = 8;
+
+const SELECT_NONE_STYLE = {
+  WebkitUserSelect: 'none',
+  userSelect: 'none'
+};
+function useNumberFieldButton(params) {
   const {
     allowInputSyncRef,
-    disabled: contextDisabled,
+    disabled,
     formatOptionsRef,
     getStepAmount,
     id,
     incrementValue,
     inputRef,
     inputValue,
-    intentionalTouchCheckTimeout,
-    isPressedRef,
+    isIncrement,
     locale,
-    maxWithDefault,
-    movesAfterTouchRef,
     readOnly,
     setValue,
-    startAutoChange,
-    state,
-    stopAutoChange,
-    value,
     valueRef,
     lastChangedValueRef,
     onValueCommitted
-  } = useNumberFieldRootContext();
-  const isMax = value != null && value >= maxWithDefault;
-  const disabled = disabledProp || contextDisabled || isMax;
-  const props = useNumberFieldButton({
-    isIncrement: true,
-    inputRef,
-    startAutoChange,
-    stopAutoChange,
-    inputValue,
-    disabled,
-    readOnly,
-    id,
-    setValue,
-    getStepAmount,
-    incrementValue,
-    allowInputSyncRef,
-    formatOptionsRef,
-    valueRef,
-    isPressedRef,
-    intentionalTouchCheckTimeout,
-    movesAfterTouchRef,
-    locale,
-    lastChangedValueRef,
-    onValueCommitted
-  });
+  } = params;
+  const pressReason = isIncrement ? useButton.incrementPress : useButton.decrementPress;
+  function commitValue(nativeEvent) {
+    const shouldCommitInputValue = !allowInputSyncRef.current;
+    allowInputSyncRef.current = true;
+    if (!shouldCommitInputValue) {
+      // The input is already synced, so step from the authoritative numeric value rather than
+      // re-parsing the rounded display text. Refresh the commit ref to the current value so a
+      // subsequent canceled step can't commit a stale `lastChangedValueRef` left over from an
+      // earlier change (the `setValue` that used to refresh it is now skipped on this path).
+      lastChangedValueRef.current = valueRef.current;
+      return;
+    }
+
+    // The input is dirty but not yet blurred, so the value won't have been committed.
+    const parsedValue = parseNumber(inputValue, locale, formatOptionsRef.current);
+    if (parsedValue !== null) {
+      // Sync the dirty typed value with no direction so it isn't directionally snapped
+      // (`snapOnStep`) before the real increment/decrement runs, which would otherwise emit a
+      // spurious intermediate value.
+      const details = useButton.createChangeEventDetails(pressReason, nativeEvent);
+      setValue(parsedValue, details);
+
+      // Only sync the ref base when the commit wasn't canceled, so a subsequent increment in the
+      // same interaction steps from the value actually applied.
+      if (!details.isCanceled) {
+        valueRef.current = parsedValue;
+      }
+    }
+  }
   const {
-    getButtonProps,
-    buttonRef
-  } = useButton.useButton({
-    disabled,
-    native: nativeButton,
-    focusableWhenDisabled: true
-  });
-  const buttonState = React__namespace.useMemo(() => ({
-    ...state,
-    disabled
-  }), [state, disabled]);
-  const element = useRenderElement.useRenderElement('button', componentProps, {
-    ref: [forwardedRef, buttonRef],
-    state: buttonState,
-    props: [props, elementProps, getButtonProps],
-    stateAttributesMapping: stateAttributesMapping$1
+    pointerHandlers,
+    shouldSkipClick
+  } = usePressAndHold({
+    disabled: disabled || readOnly,
+    elementRef: inputRef,
+    tickDelay: CHANGE_VALUE_TICK_DELAY,
+    startDelay: START_AUTO_CHANGE_DELAY,
+    scrollDistance: SCROLLING_POINTER_MOVE_DISTANCE,
+    tick(triggerEvent) {
+      const amount = getStepAmount(triggerEvent);
+      return incrementValue(amount, {
+        direction: isIncrement ? 1 : -1,
+        event: triggerEvent,
+        reason: pressReason
+      });
+    },
+    onStop(nativeEvent) {
+      // `onStop` fires on every release; fall back to the current value when no tick changed it.
+      // Step interactions never commit `null`, so the `??` can't mask a legitimate null commit.
+      const committed = lastChangedValueRef.current ?? valueRef.current;
+      onValueCommitted(committed, useButton.createGenericEventDetails(pressReason, nativeEvent));
+    }
   });
-  return element;
-});
-if (process.env.NODE_ENV !== "production") NumberFieldIncrement.displayName = "NumberFieldIncrement";
+  const props = {
+    disabled,
+    'aria-label': isIncrement ? 'Increase' : 'Decrease',
+    'aria-controls': id,
+    // Keyboard users shouldn't have access to the buttons, since they can use the input element
+    // to change the value. On the other hand, `aria-hidden` is not applied because touch screen
+    // readers should be able to use the buttons.
+    tabIndex: -1,
+    style: SELECT_NONE_STYLE,
+    ...pointerHandlers,
+    onClick(event) {
+      const isDisabled = disabled || readOnly;
+      if (event.defaultPrevented || isDisabled || shouldSkipClick(event)) {
+        return;
+      }
+      commitValue(event.nativeEvent);
+      const amount = getStepAmount(event);
+      const prev = valueRef.current;
+      incrementValue(amount, {
+        direction: isIncrement ? 1 : -1,
+        event: event.nativeEvent,
+        reason: pressReason
+      });
+      const committed = lastChangedValueRef.current ?? valueRef.current;
+      if (committed !== prev) {
+        onValueCommitted(committed, useButton.createGenericEventDetails(pressReason, event.nativeEvent));
+      }
+    },
+    onPointerDown(event) {
+      const isMainButton = !event.button || event.button === 0;
+      if (event.defaultPrevented || readOnly || !isMainButton || disabled) {
+        return;
+      }
+
+      // Sync dirty input value before starting the hold sequence.
+      commitValue(event.nativeEvent);
+      // Treat `lastChangedValueRef` as a per-hold result slot. If the first tick is a no-op or is
+      // canceled, `onStop` should fall back to the current value, not a previous interaction.
+      lastChangedValueRef.current = null;
+      if (!isTouchLikePointerType(event.pointerType)) {
+        // Focus the input so the user can continue with keyboard interactions.
+        inputRef.current?.focus();
+      }
+      pointerHandlers.onPointerDown(event);
+    }
+  };
+  return props;
+}
 
 /**
- * A stepper button that decreases the field value when clicked.
- * Renders an `<button>` element.
- *
- * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
+ * Shared implementation for the increment and decrement stepper buttons. They differ only in the
+ * direction they step and the boundary (`max` vs `min`) at which they become disabled.
  */
-const NumberFieldDecrement = /*#__PURE__*/React__namespace.forwardRef(function NumberFieldDecrement(componentProps, forwardedRef) {
+function useNumberFieldStepperButton(componentProps, forwardedRef, isIncrement) {
   const {
     render,
     className,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -1142,28 +1187,22 @@ const NumberFieldDecrement = /*#__PURE__*/React__namespace.forwardRef(function N
     incrementValue,
     inputRef,
     inputValue,
-    intentionalTouchCheckTimeout,
-    isPressedRef,
+    maxWithDefault,
     minWithDefault,
-    movesAfterTouchRef,
     readOnly,
     setValue,
-    startAutoChange,
     state,
-    stopAutoChange,
     value,
     valueRef,
     locale,
     lastChangedValueRef,
     onValueCommitted
   } = useNumberFieldRootContext();
-  const isMin = value != null && value <= minWithDefault;
-  const disabled = disabledProp || contextDisabled || isMin;
+  const isAtBoundary = value != null && (isIncrement ? value >= maxWithDefault : value <= minWithDefault);
+  const disabled = disabledProp || contextDisabled || isAtBoundary;
   const props = useNumberFieldButton({
-    isIncrement: false,
+    isIncrement,
     inputRef,
-    startAutoChange,
-    stopAutoChange,
     inputValue,
     disabled,
     readOnly,
@@ -1174,9 +1213,6 @@ const NumberFieldDecrement = /*#__PURE__*/React__namespace.forwardRef(function N
     allowInputSyncRef,
     formatOptionsRef,
     valueRef,
-    isPressedRef,
-    intentionalTouchCheckTimeout,
-    movesAfterTouchRef,
     locale,
     lastChangedValueRef,
     onValueCommitted
@@ -1185,28 +1221,47 @@ const NumberFieldDecrement = /*#__PURE__*/React__namespace.forwardRef(function N
     getButtonProps,
     buttonRef
   } = useButton.useButton({
-    disabled,
+    // Read-only steppers are exposed as unavailable through button disabled semantics, while
+    // `data-readonly` (from `state`) is preserved for styling. `aria-readonly` isn't valid on the
+    // `button` role, so it's intentionally not set.
+    disabled: disabled || readOnly,
     native: nativeButton,
     focusableWhenDisabled: true
   });
-  const buttonState = React__namespace.useMemo(() => ({
+  const buttonState = {
     ...state,
     disabled
-  }), [state, disabled]);
-  const element = useRenderElement.useRenderElement('button', componentProps, {
+  };
+  return useRenderElement.useRenderElement('button', componentProps, {
     ref: [forwardedRef, buttonRef],
     state: buttonState,
     props: [props, elementProps, getButtonProps],
-    stateAttributesMapping: stateAttributesMapping$1
+    stateAttributesMapping
   });
-  return element;
+}
+
+/**
+ * A stepper button that increases the field value when clicked.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
+ */
+const NumberFieldIncrement = /*#__PURE__*/React__namespace.forwardRef(function NumberFieldIncrement(componentProps, forwardedRef) {
+  return useNumberFieldStepperButton(componentProps, forwardedRef, true);
+});
+if (process.env.NODE_ENV !== "production") NumberFieldIncrement.displayName = "NumberFieldIncrement";
+
+/**
+ * A stepper button that decreases the field value when clicked.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
+ */
+const NumberFieldDecrement = /*#__PURE__*/React__namespace.forwardRef(function NumberFieldDecrement(componentProps, forwardedRef) {
+  return useNumberFieldStepperButton(componentProps, forwardedRef, false);
 });
 if (process.env.NODE_ENV !== "production") NumberFieldDecrement.displayName = "NumberFieldDecrement";
 
-const stateAttributesMapping = {
-  ...useLabelableId.fieldValidityMapping,
-  ...stateAttributesMapping$1
-};
 const NAVIGATE_KEYS = new Set(['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Escape']);
 
 /**
@@ -1219,6 +1274,7 @@ const NumberFieldInput = /*#__PURE__*/React__namespace.forwardRef(function Numbe
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -1234,6 +1290,7 @@ const NumberFieldInput = /*#__PURE__*/React__namespace.forwardRef(function Numbe
     max,
     min,
     name,
+    nameProp,
     readOnly,
     required,
     setValue,
@@ -1263,28 +1320,25 @@ const NumberFieldInput = /*#__PURE__*/React__namespace.forwardRef(function Numbe
   } = useLabelableId.useLabelableContext();
   const hasTouchedInputRef = React__namespace.useRef(false);
   const blockRevalidationRef = React__namespace.useRef(false);
-  useLabelableId.useField({
-    id,
-    commit: validation.commit,
-    value,
-    controlRef: inputRef,
-    name,
-    getValue: () => value ?? null
+  const pendingCaretRef = React__namespace.useRef(null);
+  useLabelableId.useRegisterFieldControl(inputRef, id, value, undefined, !disabled, nameProp);
+
+  // After a paste splices text into the controlled value, the browser would otherwise drop the
+  // caret at the end of the new value. Restore it just after the inserted text.
+  useButton.useIsoLayoutEffect(() => {
+    if (pendingCaretRef.current != null) {
+      const caret = pendingCaretRef.current;
+      pendingCaretRef.current = null;
+      inputRef.current?.setSelectionRange(caret, caret);
+    }
   });
-  useButton.useValueChanged(value, previousValue => {
-    const validateOnChange = shouldValidateOnChange();
+  useButton.useValueChanged(value, () => {
     clearErrors(name);
-    if (validateOnChange) {
-      validation.commit(value);
-    }
-    if (previousValue === value || validateOnChange) {
-      return;
-    }
-    if (blockRevalidationRef.current) {
+    if (blockRevalidationRef.current && !shouldValidateOnChange()) {
       blockRevalidationRef.current = false;
       return;
     }
-    validation.commit(value, true);
+    validation.change(value);
   });
   const inputProps = {
     id,
@@ -1298,13 +1352,14 @@ const NumberFieldInput = /*#__PURE__*/React__namespace.forwardRef(function Numbe
     autoCorrect: 'off',
     spellCheck: 'false',
     'aria-roledescription': 'Number field',
-    'aria-invalid': invalid || undefined,
+    'aria-invalid': !disabled && invalid ? true : undefined,
     'aria-labelledby': labelId,
     // If the server's locale does not match the client's locale, the formatting may not match,
     // causing a hydration mismatch.
     suppressHydrationWarning: true,
     onFocus(event) {
-      if (event.defaultPrevented || readOnly || disabled) {
+      // Read-only inputs are still focusable; only the value-changing handlers stay gated on it.
+      if (event.defaultPrevented || disabled) {
         return;
       }
       setFocused(true);
@@ -1320,20 +1375,32 @@ const NumberFieldInput = /*#__PURE__*/React__namespace.forwardRef(function Numbe
       target.setSelectionRange(length, length);
     },
     onBlur(event) {
-      if (event.defaultPrevented || readOnly || disabled) {
+      if (event.defaultPrevented || disabled) {
         return;
       }
       setTouched(true);
       setFocused(false);
+      if (readOnly) {
+        return;
+      }
       const hadManualInput = !allowInputSyncRef.current;
       const hadPendingProgrammaticChange = hasPendingCommitRef.current;
       allowInputSyncRef.current = true;
       if (inputValue.trim() === '') {
-        setValue(null, useButton.createChangeEventDetails(useButton.inputClear, event.nativeEvent));
+        const clearDetails = useButton.createChangeEventDetails(useButton.inputClear, event.nativeEvent);
+        setValue(null, clearDetails);
+        // Respect a canceled clear, mirroring the non-empty blur path below.
+        if (clearDetails.isCanceled) {
+          return;
+        }
         if (validationMode === 'onBlur') {
           validation.commit(null);
         }
-        onValueCommitted(null, useButton.createGenericEventDetails(useButton.inputClear, event.nativeEvent));
+        // Don't report a commit when blurring an already-empty field that the user never
+        // interacted with: nothing was cleared and no programmatic change is pending.
+        if (hadManualInput || hadPendingProgrammaticChange || value !== null) {
+          onValueCommitted(null, useButton.createGenericEventDetails(useButton.inputClear, event.nativeEvent));
+        }
         return;
       }
       const formatOptions = formatOptionsRef.current;
@@ -1342,29 +1409,52 @@ const NumberFieldInput = /*#__PURE__*/React__namespace.forwardRef(function Numbe
         return;
       }
 
-      // If an explicit precision is requested, round the committed numeric value.
-      const hasExplicitPrecision = formatOptions?.maximumFractionDigits != null || formatOptions?.minimumFractionDigits != null;
-      const maxFrac = formatOptions?.maximumFractionDigits;
-      const committed = hasExplicitPrecision && typeof maxFrac === 'number' ? Number(parsedValue.toFixed(maxFrac)) : parsedValue;
+      // Avoid applying Intl's default precision unless the format opts into rounding.
+      const hasRoundingOptions = hasNumberFormatRoundingOptions(formatOptions);
+      let committed;
+      if (!hadManualInput && !hasRoundingOptions) {
+        // No rounding options and no manual edit: the visible text is purely formatted
+        // display, so keep the authoritative numeric value as-is rather than re-parsing the
+        // rounded text and discarding precision (e.g. focus/blur with no edits, or blur after
+        // a programmatic change).
+        committed = value;
+      } else if (hasRoundingOptions) {
+        // Explicit rounding options apply to the committed value, whether typed or external.
+        committed = removeFloatingPointErrors(parsedValue, formatOptions);
+      } else {
+        committed = parsedValue;
+      }
       const nextEventDetails = useButton.createGenericEventDetails(useButton.inputBlur, event.nativeEvent);
       const shouldUpdateValue = value !== committed;
       const shouldCommit = hadManualInput || shouldUpdateValue || hadPendingProgrammaticChange;
-      if (validationMode === 'onBlur') {
-        validation.commit(committed);
-      }
+
+      // Use the stored value after `setValue` clamps it.
+      let committedValue = committed;
       if (shouldUpdateValue) {
+        const changeDetails = useButton.createChangeEventDetails(useButton.inputBlur, event.nativeEvent);
         blockRevalidationRef.current = true;
-        setValue(committed, useButton.createChangeEventDetails(useButton.inputBlur, event.nativeEvent));
+        setValue(committed, changeDetails);
+        if (changeDetails.isCanceled) {
+          blockRevalidationRef.current = false;
+          return;
+        }
+        committedValue = lastChangedValueRef.current ?? committed;
+        // If validation normalized back to the current value, `useValueChanged` won't fire to
+        // reset the flag, so reset it here or the next external change won't revalidate.
+        if (committedValue === value) {
+          blockRevalidationRef.current = false;
+        }
+      }
+      if (validationMode === 'onBlur') {
+        validation.commit(committedValue);
       }
       if (shouldCommit) {
-        onValueCommitted(committed, nextEventDetails);
+        onValueCommitted(committedValue, nextEventDetails);
       }
 
       // Normalize only the displayed text
-      const canonicalText = formatNumber(committed, locale, formatOptions);
-      const maxPrecisionText = formatNumberMaxPrecision(parsedValue, locale, formatOptions);
-      const shouldPreserveFullPrecision = !hasExplicitPrecision && parsedValue === value && inputValue === maxPrecisionText;
-      if (!shouldPreserveFullPrecision && inputValue !== canonicalText) {
+      const canonicalText = formatNumber(committedValue, locale, formatOptions);
+      if (inputValue !== canonicalText) {
         setInputValue(canonicalText);
       }
     },
@@ -1374,7 +1464,7 @@ const NumberFieldInput = /*#__PURE__*/React__namespace.forwardRef(function Numbe
         return;
       }
       allowInputSyncRef.current = false;
-      const targetValue = event.target.value;
+      const targetValue = event.currentTarget.value;
       if (targetValue.trim() === '') {
         setInputValue(targetValue);
         setValue(null, useButton.createChangeEventDetails(useButton.inputClear, event.nativeEvent));
@@ -1385,15 +1475,7 @@ const NumberFieldInput = /*#__PURE__*/React__namespace.forwardRef(function Numbe
       // currently parseable into a number. This preserves good UX for IME
       // composition/partial input while still providing live numeric updates when possible.
       const allowedNonNumericKeys = getAllowedNonNumericKeys();
-      const isValidCharacterString = Array.from(targetValue).every(ch => {
-        const isAsciiDigit = ch >= '0' && ch <= '9';
-        const isArabicNumeral = ARABIC_DETECT_RE.test(ch);
-        const isHanNumeral = HAN_DETECT_RE.test(ch);
-        const isPersianNumeral = PERSIAN_DETECT_RE.test(ch);
-        const isFullwidthNumeral = FULLWIDTH_DETECT_RE.test(ch);
-        const isMinus = ANY_MINUS_DETECT_RE.test(ch);
-        return isAsciiDigit || isArabicNumeral || isHanNumeral || isPersianNumeral || isFullwidthNumeral || isMinus || allowedNonNumericKeys.has(ch);
-      });
+      const isValidCharacterString = Array.from(targetValue).every(ch => isNumeralChar(ch) || ANY_MINUS_DETECT_RE.test(ch) || allowedNonNumericKeys.has(ch));
       if (!isValidCharacterString) {
         return;
       }
@@ -1408,7 +1490,12 @@ const NumberFieldInput = /*#__PURE__*/React__namespace.forwardRef(function Numbe
         return;
       }
       const nativeEvent = event.nativeEvent;
-      allowInputSyncRef.current = true;
+
+      // Snapshot the dirty state without clearing it: navigation/allowed keys (ArrowLeft, Tab,
+      // Enter, Escape, …) return early without changing the value, so marking the input synced
+      // here would wrongly discard dirty-input authority. Only the value-changing branches below
+      // mark it synced.
+      const hadManualInput = !allowInputSyncRef.current;
       const allowedNonNumericKeys = getAllowedNonNumericKeys();
       let isAllowedNonNumericKey = allowedNonNumericKeys.has(event.key);
       const {
@@ -1419,20 +1506,19 @@ const NumberFieldInput = /*#__PURE__*/React__namespace.forwardRef(function Numbe
       const selectionStart = event.currentTarget.selectionStart;
       const selectionEnd = event.currentTarget.selectionEnd;
       const isAllSelected = selectionStart === 0 && selectionEnd === inputValue.length;
-
-      // Normalize handling of plus/minus signs via precomputed regexes
       const selectionContainsIndex = index => selectionStart != null && selectionEnd != null && index >= selectionStart && index < selectionEnd;
-      if (ANY_MINUS_DETECT_RE.test(event.key) && Array.from(allowedNonNumericKeys).some(k => ANY_MINUS_DETECT_RE.test(k || ''))) {
-        // Only allow one sign unless replacing the existing one or all text is selected
-        const existingIndex = inputValue.search(ANY_MINUS_RE);
-        const isReplacingExisting = existingIndex != null && existingIndex !== -1 && selectionContainsIndex(existingIndex);
-        isAllowedNonNumericKey = !(ANY_MINUS_DETECT_RE.test(inputValue) || ANY_PLUS_DETECT_RE.test(inputValue)) || isAllSelected || isReplacingExisting;
-      }
-      if (ANY_PLUS_DETECT_RE.test(event.key) && Array.from(allowedNonNumericKeys).some(k => ANY_PLUS_DETECT_RE.test(k || ''))) {
-        const existingIndex = inputValue.search(ANY_PLUS_RE);
-        const isReplacingExisting = existingIndex != null && existingIndex !== -1 && selectionContainsIndex(existingIndex);
-        isAllowedNonNumericKey = !(ANY_MINUS_DETECT_RE.test(inputValue) || ANY_PLUS_DETECT_RE.test(inputValue)) || isAllSelected || isReplacingExisting;
-      }
+
+      // Only allow a single sign character: permit it when there is no existing sign of either
+      // kind, when all text is selected, or when the selection covers the existing sign so it's
+      // being replaced.
+      const signGroups = [[ANY_MINUS_DETECT_RE, ANY_MINUS_RE], [ANY_PLUS_DETECT_RE, ANY_PLUS_RE]];
+      signGroups.forEach(([detectRe, globalRe]) => {
+        if (detectRe.test(event.key) && Array.from(allowedNonNumericKeys).some(k => detectRe.test(k))) {
+          const existingIndex = inputValue.search(globalRe);
+          const isReplacingExisting = existingIndex !== -1 && selectionContainsIndex(existingIndex);
+          isAllowedNonNumericKey = !(ANY_MINUS_DETECT_RE.test(inputValue) || ANY_PLUS_DETECT_RE.test(inputValue)) || isAllSelected || isReplacingExisting;
+        }
+      });
 
       // Only allow one of each symbol.
       [decimal, currency, percentSign].forEach(symbol => {
@@ -1442,47 +1528,59 @@ const NumberFieldInput = /*#__PURE__*/React__namespace.forwardRef(function Numbe
           isAllowedNonNumericKey = !inputValue.includes(symbol) || isAllSelected || isSymbolHighlighted;
         }
       });
-      const isAsciiDigit = event.key >= '0' && event.key <= '9';
-      const isArabicNumeral = ARABIC_DETECT_RE.test(event.key);
-      const isHanNumeral = HAN_DETECT_RE.test(event.key);
-      const isFullwidthNumeral = FULLWIDTH_DETECT_RE.test(event.key);
       const isNavigateKey = NAVIGATE_KEYS.has(event.key);
+      // Alt+ArrowUp/ArrowDown selects smallStep, so don't treat it as a bypass modifier.
+      const isStepKey = event.key === 'ArrowUp' || event.key === 'ArrowDown';
       if (
       // Allow composition events (e.g., pinyin)
       // event.nativeEvent.isComposing does not work in Safari:
       // https://bugs.webkit.org/show_bug.cgi?id=165004
-      event.which === 229 || event.altKey || event.ctrlKey || event.metaKey || isAllowedNonNumericKey || isAsciiDigit || isArabicNumeral || isFullwidthNumeral || isHanNumeral || isNavigateKey) {
+      event.which === 229 || event.altKey && !isStepKey || event.ctrlKey || event.metaKey || isAllowedNonNumericKey || isNumeralChar(event.key) || isNavigateKey) {
+        return;
+      }
+      const willSetHome = event.key === 'Home' && min != null;
+      const willSetEnd = event.key === 'End' && max != null;
+
+      // Let the browser handle multi-character keys we don't act on (PageUp, Insert, F-keys,
+      // Home/End without min/max); invalid single characters are still blocked below.
+      if (event.key.length > 1 && !isStepKey && !willSetHome && !willSetEnd) {
         return;
       }
 
-      // We need to commit the number at this point if the input hasn't been blurred.
-      const parsedValue = parseNumber(inputValue, locale, formatOptionsRef.current);
-      const amount = getStepAmount(event) ?? DEFAULT_STEP;
+      // Step from the authoritative numeric value unless the input has unsaved manual edits.
+      // When the text is already synced, parsing the rounded display would collapse precision,
+      // so pass no `currentValue` and let `incrementValue` fall back to the numeric state
+      // (mirrors the button path).
+      const currentValue = hadManualInput ? parseNumber(inputValue, locale, formatOptionsRef.current) : null;
+      const amount = getStepAmount(event);
 
       // Prevent insertion of text or caret from moving.
       useButton.stopEvent(event);
       const commitDetails = useButton.createGenericEventDetails(useButton.keyboard, nativeEvent);
-      if (event.key === 'ArrowUp') {
-        incrementValue(amount, {
-          direction: 1,
-          currentValue: parsedValue,
-          event: nativeEvent,
-          reason: useButton.keyboard
-        });
-        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
-      } else if (event.key === 'ArrowDown') {
-        incrementValue(amount, {
-          direction: -1,
-          currentValue: parsedValue,
+      let changed = false;
+      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        allowInputSyncRef.current = true;
+
+        // When stepping from the synced numeric state, refresh the commit ref to the current
+        // value so a canceled step can't commit a stale `lastChangedValueRef` left over from an
+        // earlier change (mirrors the button path).
+        if (!hadManualInput) {
+          lastChangedValueRef.current = valueRef.current;
+        }
+        changed = incrementValue(amount, {
+          direction: event.key === 'ArrowUp' ? 1 : -1,
+          currentValue,
           event: nativeEvent,
           reason: useButton.keyboard
         });
-        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
-      } else if (event.key === 'Home' && min != null) {
-        setValue(min, useButton.createChangeEventDetails(useButton.keyboard, nativeEvent));
-        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
-      } else if (event.key === 'End' && max != null) {
-        setValue(max, useButton.createChangeEventDetails(useButton.keyboard, nativeEvent));
+      } else if (willSetHome) {
+        allowInputSyncRef.current = true;
+        changed = setValue(min, useButton.createChangeEventDetails(useButton.keyboard, nativeEvent));
+      } else if (willSetEnd) {
+        allowInputSyncRef.current = true;
+        changed = setValue(max, useButton.createChangeEventDetails(useButton.keyboard, nativeEvent));
+      }
+      if (changed) {
         onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
       }
     },
@@ -1490,34 +1588,49 @@ const NumberFieldInput = /*#__PURE__*/React__namespace.forwardRef(function Numbe
       if (event.defaultPrevented || readOnly || disabled) {
         return;
       }
+      let pastedData = '';
+      try {
+        pastedData = event.clipboardData?.getData('text/plain') ?? '';
+      } catch {
+        if (process.env.NODE_ENV !== 'production') {
+          const ownerStackMessage = useButton.SafeReact.captureOwnerStack?.() || '';
+          useRenderElement.warn('<NumberField.Input> could not read clipboard text during paste handling.', ownerStackMessage);
+        }
+        return;
+      }
 
       // Prevent `onChange` from being called.
       event.preventDefault();
-      const clipboardData = event.clipboardData || window.Clipboard;
-      const pastedData = clipboardData.getData('text/plain');
-      const parsedValue = parseNumber(pastedData, locale, formatOptionsRef.current);
+
+      // Insert the pasted text at the caret/selection instead of replacing the entire value,
+      // matching native input behavior (e.g. pasting "5" into "123|" yields "1235").
+      const input = event.currentTarget;
+      const selectionStart = input.selectionStart ?? inputValue.length;
+      const selectionEnd = input.selectionEnd ?? inputValue.length;
+      const nextText = inputValue.slice(0, selectionStart) + pastedData + inputValue.slice(selectionEnd);
+      const parsedValue = parseNumber(nextText, locale, formatOptionsRef.current);
       if (parsedValue !== null) {
         allowInputSyncRef.current = false;
+        pendingCaretRef.current = selectionStart + pastedData.length;
         setValue(parsedValue, useButton.createChangeEventDetails(useButton.inputPaste, event.nativeEvent));
-        setInputValue(pastedData);
+        setInputValue(nextText);
       }
     }
   };
   const element = useRenderElement.useRenderElement('input', componentProps, {
     ref: [forwardedRef, inputRef],
     state,
-    props: [inputProps, validation.getValidationProps(), elementProps],
+    props: [inputProps, elementProps, props => validation.getValidationProps(disabled, props)],
     stateAttributesMapping
   });
   return element;
 });
 if (process.env.NODE_ENV !== "production") NumberFieldInput.displayName = "NumberFieldInput";
 
-exports.DEFAULT_STEP = DEFAULT_STEP;
 exports.NumberFieldDecrement = NumberFieldDecrement;
 exports.NumberFieldGroup = NumberFieldGroup;
 exports.NumberFieldIncrement = NumberFieldIncrement;
 exports.NumberFieldInput = NumberFieldInput;
 exports.NumberFieldRoot = NumberFieldRoot;
-exports.stateAttributesMapping = stateAttributesMapping$1;
+exports.stateAttributesMapping = stateAttributesMapping;
 exports.useNumberFieldRootContext = useNumberFieldRootContext;