@base-ui/react 1.1.0 → 1.2.0

package/esm/navigation-menu/root/NavigationMenuRoot.d.ts

@@ -23,11 +23,11 @@ export interface NavigationMenuRootProps extends BaseUIComponentProps<'nav', Nav
   /**
    * A ref to imperative actions.
    */
-  actionsRef?: React.RefObject<NavigationMenuRoot.Actions | null>;
+  actionsRef?: React.RefObject<NavigationMenuRoot.Actions | null> | undefined;
   /**
    * Event handler called after any animations complete when the navigation menu is closed.
    */
-  onOpenChangeComplete?: (open: boolean) => void;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   /**
    * The controlled value of the navigation menu item that should be currently open.
    * When non-nullish, the menu will be open. When nullish, the menu will be closed.
@@ -46,22 +46,22 @@ export interface NavigationMenuRootProps extends BaseUIComponentProps<'nav', Nav
   /**
    * Callback fired when the value changes.
    */
-  onValueChange?: (value: any, eventDetails: NavigationMenuRoot.ChangeEventDetails) => void;
+  onValueChange?: ((value: any, eventDetails: NavigationMenuRoot.ChangeEventDetails) => void) | undefined;
   /**
    * How long to wait before opening the navigation menu. Specified in milliseconds.
    * @default 50
    */
-  delay?: number;
+  delay?: number | undefined;
   /**
    * How long to wait before closing the navigation menu. Specified in milliseconds.
    * @default 50
    */
-  closeDelay?: number;
+  closeDelay?: number | undefined;
   /**
    * The orientation of the navigation menu.
    * @default 'horizontal'
    */
-  orientation?: 'horizontal' | 'vertical';
+  orientation?: ('horizontal' | 'vertical') | undefined;
 }
 export interface NavigationMenuRootActions {
   unmount: () => void;

package/esm/navigation-menu/root/NavigationMenuRoot.js

@@ -196,10 +196,10 @@ function TreeContext(props) {
   const {
     open
   } = useNavigationMenuRootContext();
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     nested
-  }), [open, nested]);
+  };
   const element = useRenderElement(nested ? 'div' : 'nav', props.componentProps, {
     state,
     ref: [props.forwardedRef, rootRef],

package/esm/navigation-menu/root/NavigationMenuRootContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const NavigationMenuRootContext = /*#__PURE__*/React.createContext(undefined);

package/esm/navigation-menu/trigger/NavigationMenuTrigger.js

@@ -3,11 +3,9 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { isTabbable } from 'tabbable';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
-import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { safePolygon, useClick, useFloatingRootContext, useFloatingTree, useHover, useInteractions } from "../../floating-ui-react/index.js";
 import { contains, getNextTabbable, getPreviousTabbable, isOutsideEvent, stopEvent } from "../../floating-ui-react/utils.js";
 import { useNavigationMenuItemContext } from "../item/NavigationMenuItemContext.js";
@@ -18,19 +16,10 @@ import { EMPTY_ARRAY, ownerVisuallyHidden, PATIENT_CLICK_THRESHOLD } from "../..
 import { FocusGuard } from "../../utils/FocusGuard.js";
 import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
 import { isOutsideMenuEvent } from "../utils/isOutsideMenuEvent.js";
-import { useAnimationsFinished } from "../../utils/useAnimationsFinished.js";
-import { NavigationMenuPopupCssVars } from "../popup/NavigationMenuPopupCssVars.js";
-import { NavigationMenuPositionerCssVars } from "../positioner/NavigationMenuPositionerCssVars.js";
 import { CompositeItem } from "../../composite/item/CompositeItem.js";
 import { useButton } from "../../use-button/index.js";
-import { getCssDimensions } from "../../utils/getCssDimensions.js";
 import { NAVIGATION_MENU_TRIGGER_IDENTIFIER } from "../utils/constants.js";
 import { useNavigationMenuDismissContext } from "../list/NavigationMenuDismissContext.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_SIZE = {
-  width: 0,
-  height: 0
-};
 
 /**
  * Opens the navigation menu popup when hovered or clicked, revealing the
@@ -39,6 +28,7 @@ const DEFAULT_SIZE = {
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function NavigationMenuTrigger(componentProps, forwardedRef) {
   const {
     className,
@@ -77,104 +67,17 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
   const dismissProps = useNavigationMenuDismissContext();
   const stickIfOpenTimeout = useTimeout();
   const focusFrame = useAnimationFrame();
-  const sizeFrame1 = useAnimationFrame();
-  const sizeFrame2 = useAnimationFrame();
   const [triggerElement, setTriggerElement] = React.useState(null);
   const [stickIfOpen, setStickIfOpen] = React.useState(true);
   const [pointerType, setPointerType] = React.useState('');
   const allowFocusRef = React.useRef(false);
-  const prevSizeRef = React.useRef(DEFAULT_SIZE);
-  const animationAbortControllerRef = React.useRef(null);
   const isActiveItem = open && value === itemValue;
-  const isActiveItemRef = useValueAsRef(isActiveItem);
   const interactionsEnabled = positionerElement ? true : !value;
-  const runOnceAnimationsFinish = useAnimationsFinished(popupElement);
-  React.useEffect(() => {
-    animationAbortControllerRef.current?.abort();
-  }, [isActiveItem]);
-  function setAutoSizes() {
-    if (!popupElement) {
-      return;
-    }
-    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, 'auto');
-    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, 'auto');
-  }
-  const handleValueChange = useStableCallback((currentWidth, currentHeight) => {
-    if (!popupElement || !positionerElement) {
-      return;
-    }
-    popupElement.style.removeProperty(NavigationMenuPopupCssVars.popupWidth);
-    popupElement.style.removeProperty(NavigationMenuPopupCssVars.popupHeight);
-    positionerElement.style.removeProperty(NavigationMenuPositionerCssVars.positionerWidth);
-    positionerElement.style.removeProperty(NavigationMenuPositionerCssVars.positionerHeight);
-    const {
-      width,
-      height
-    } = getCssDimensions(popupElement);
-    const measuredWidth = width || prevSizeRef.current.width;
-    const measuredHeight = height || prevSizeRef.current.height;
-    if (currentHeight === 0 || currentWidth === 0) {
-      currentWidth = measuredWidth;
-      currentHeight = measuredHeight;
-    }
-    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${currentWidth}px`);
-    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, `${currentHeight}px`);
-    positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerWidth, `${measuredWidth}px`);
-    positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerHeight, `${measuredHeight}px`);
-    sizeFrame1.request(() => {
-      popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${measuredWidth}px`);
-      popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, `${measuredHeight}px`);
-      sizeFrame2.request(() => {
-        animationAbortControllerRef.current = new AbortController();
-        runOnceAnimationsFinish(setAutoSizes, animationAbortControllerRef.current.signal);
-      });
-    });
-  });
   React.useEffect(() => {
     if (!open) {
       stickIfOpenTimeout.clear();
-      sizeFrame1.cancel();
-      sizeFrame2.cancel();
     }
-  }, [stickIfOpenTimeout, open, sizeFrame1, sizeFrame2]);
-  React.useEffect(() => {
-    if (!mounted) {
-      prevSizeRef.current = DEFAULT_SIZE;
-    }
-  }, [mounted]);
-  React.useEffect(() => {
-    if (!popupElement || typeof ResizeObserver !== 'function') {
-      return undefined;
-    }
-    const resizeObserver = new ResizeObserver(() => {
-      // Using `getCssDimensions` here causes issues due to fractional values.
-      prevSizeRef.current = {
-        width: popupElement.offsetWidth,
-        height: popupElement.offsetHeight
-      };
-    });
-    resizeObserver.observe(popupElement);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [popupElement]);
-  React.useEffect(() => {
-    if (!popupElement || !isActiveItem || typeof MutationObserver !== 'function') {
-      return undefined;
-    }
-    const mutationObserver = new MutationObserver(() => {
-      animationAbortControllerRef.current?.abort();
-      handleValueChange(prevSizeRef.current.width, prevSizeRef.current.height);
-    });
-    mutationObserver.observe(popupElement, {
-      childList: true,
-      subtree: true,
-      characterData: true
-    });
-    return () => {
-      mutationObserver.disconnect();
-    };
-  }, [popupElement, positionerElement, isActiveItem, handleValueChange]);
+  }, [stickIfOpenTimeout, open]);
   React.useEffect(() => {
     if (isActiveItem && open && popupElement && allowFocusRef.current) {
       allowFocusRef.current = false;
@@ -185,12 +88,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     return () => {
       focusFrame.cancel();
     };
-  }, [beforeOutsideRef, focusFrame, handleValueChange, isActiveItem, open, popupElement]);
-  useIsoLayoutEffect(() => {
-    if (isActiveItemRef.current && open && popupElement) {
-      handleValueChange(0, 0);
-    }
-  }, [isActiveItemRef, open, popupElement, handleValueChange]);
+  }, [beforeOutsideRef, focusFrame, isActiveItem, open, popupElement]);
   function handleOpenChange(nextOpen, eventDetails) {
     const isHover = eventDetails.reason === REASONS.triggerHover;
     if (!interactionsEnabled) {
@@ -285,30 +183,16 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
       }
     });
   }
-  const handleOpenEvent = useStableCallback(event => {
-    // For nested scenarios without positioner/popup, we can still open the menu
-    // but we can't do size calculations
-    if (!popupElement || !positionerElement) {
-      handleActivation(event);
-      return;
-    }
-    const {
-      width,
-      height
-    } = getCssDimensions(popupElement);
-    handleActivation(event);
-    handleValueChange(width, height);
-  });
-  const state = React.useMemo(() => ({
+  const state = {
     open: isActiveItem
-  }), [isActiveItem]);
+  };
   function handleSetPointerType(event) {
     setPointerType(event.pointerType);
   }
   const defaultProps = {
     tabIndex: 0,
-    onMouseEnter: handleOpenEvent,
-    onClick: handleOpenEvent,
+    onMouseEnter: handleActivation,
+    onClick: handleActivation,
     onPointerEnter: handleSetPointerType,
     onPointerDown: handleSetPointerType,
     'aria-expanded': isActiveItem,
@@ -336,7 +220,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
       const openVertical = orientation === 'vertical' && event.key === 'ArrowRight';
       if (openHorizontal || openVertical) {
         setValue(itemValue, createChangeEventDetails(REASONS.listNavigation, event.nativeEvent));
-        handleOpenEvent(event);
+        handleActivation(event);
         stopEvent(event);
       }
     },

package/esm/navigation-menu/utils/isOutsideMenuEvent.d.ts

@@ -5,7 +5,7 @@ interface Targets {
 }
 interface Params {
   popupElement: HTMLElement | null;
-  viewportElement?: HTMLElement | null;
+  viewportElement?: (HTMLElement | null) | undefined;
   rootRef: React.RefObject<HTMLDivElement | null>;
   tree: FloatingTreeType | null;
   nodeId: string | undefined;

package/esm/navigation-menu/viewport/NavigationMenuViewport.js

@@ -4,12 +4,15 @@ import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useId } from '@base-ui/utils/useId';
 import { inertValue } from '@base-ui/utils/inertValue';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.js";
 import { FocusGuard } from "../../utils/FocusGuard.js";
+import { usePopupAutoResize } from "../../utils/usePopupAutoResize.js";
 import { getNextTabbable, getPreviousTabbable, isOutsideEvent, contains } from "../../floating-ui-react/utils.js";
 import { getEmptyRootContext } from "../../floating-ui-react/utils/getEmptyRootContext.js";
 import { useNavigationMenuPositionerContext } from "../positioner/NavigationMenuPositionerContext.js";
+import { useDirection } from "../../direction-provider/DirectionContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const EMPTY_ROOT_CONTEXT = getEmptyRootContext();
 function Guards({
@@ -69,6 +72,11 @@ export const NavigationMenuViewport = /*#__PURE__*/React.forwardRef(function Nav
   } = componentProps;
   const id = useId(idProp);
   const {
+    open,
+    mounted,
+    value,
+    popupElement,
+    positionerElement,
     setViewportElement,
     setViewportTargetElement,
     floatingRootContext,
@@ -76,7 +84,19 @@ export const NavigationMenuViewport = /*#__PURE__*/React.forwardRef(function Nav
     viewportInert,
     setViewportInert
   } = useNavigationMenuRootContext();
-  const hasPositioner = Boolean(useNavigationMenuPositionerContext(true));
+  const positioning = useNavigationMenuPositionerContext(true);
+  const hasPositioner = Boolean(positioning);
+  const direction = useDirection();
+  const enableAutoResize = useStableCallback(() => open);
+  usePopupAutoResize({
+    popupElement,
+    positionerElement,
+    mounted,
+    content: value,
+    enabled: enableAutoResize,
+    side: positioning?.side ?? 'bottom',
+    direction
+  });
   const domReference = (floatingRootContext || EMPTY_ROOT_CONTEXT).useState('domReferenceElement');
   useIsoLayoutEffect(() => {
     if (domReference) {

package/esm/number-field/input/NumberFieldInput.js

@@ -194,8 +194,8 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
         return;
       }
 
-      // For trusted user typing, update the input text immediately and only fire onValueChange
-      // if the typed value is currently parseable into a number. This preserves good UX for IME
+      // Update the input text immediately and only fire onValueChange if the typed value is
+      // 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 => {
@@ -210,17 +210,9 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
       if (!isValidCharacterString) {
         return;
       }
-      if (event.isTrusted) {
-        setInputValue(targetValue);
-        const parsedValue = parseNumber(targetValue, locale, formatOptionsRef.current);
-        if (parsedValue !== null) {
-          setValue(parsedValue, createChangeEventDetails(REASONS.inputChange, event.nativeEvent));
-        }
-        return;
-      }
       const parsedValue = parseNumber(targetValue, locale, formatOptionsRef.current);
+      setInputValue(targetValue);
       if (parsedValue !== null) {
-        setInputValue(targetValue);
         setValue(parsedValue, createChangeEventDetails(REASONS.inputChange, event.nativeEvent));
       }
     },

package/esm/number-field/root/NumberFieldRoot.d.ts

@@ -15,92 +15,99 @@ export interface NumberFieldRootProps extends Omit<BaseUIComponentProps<'div', N
   /**
    * The id of the input element.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * The minimum value of the input element.
    */
-  min?: number;
+  min?: number | undefined;
   /**
    * The maximum value of the input element.
    */
-  max?: number;
+  max?: number | undefined;
+  /**
+   * When true, direct text entry may be outside the `min`/`max` range without clamping,
+   * so native range underflow/overflow validation can occur.
+   * Step-based interactions (keyboard arrows, buttons, wheel, scrub) still clamp.
+   * @default false
+   */
+  allowOutOfRange?: boolean | undefined;
   /**
    * The small step value of the input element when incrementing while the meta key is held. Snaps
    * to multiples of this value.
    * @default 0.1
    */
-  smallStep?: number;
+  smallStep?: number | undefined;
   /**
    * Amount to increment and decrement with the buttons and arrow keys, or to scrub with pointer movement in the scrub area.
    * To always enable step validation on form submission, specify the `min` prop explicitly in conjunction with this prop.
    * Specify `step="any"` to always disable step validation.
    * @default 1
    */
-  step?: number | 'any';
+  step?: (number | 'any') | undefined;
   /**
    * The large step value of the input element when incrementing while the shift key is held. Snaps
    * to multiples of this value.
    * @default 10
    */
-  largeStep?: number;
+  largeStep?: number | undefined;
   /**
    * Whether the user must enter a value before submitting a form.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether the user should be unable to change the field value.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * The raw numeric value of the field.
    */
-  value?: number | null;
+  value?: (number | null) | undefined;
   /**
    * The uncontrolled value of the field when it’s initially rendered.
    *
    * To render a controlled number field, use the `value` prop instead.
    */
-  defaultValue?: number;
+  defaultValue?: number | undefined;
   /**
    * Whether to allow the user to scrub the input value with the mouse wheel while focused and
    * hovering over the input.
    * @default false
    */
-  allowWheelScrub?: boolean;
+  allowWheelScrub?: boolean | undefined;
   /**
    * Whether the value should snap to the nearest step when incrementing or decrementing.
    * @default false
    */
-  snapOnStep?: boolean;
+  snapOnStep?: boolean | undefined;
   /**
    * Options to format the input value.
    */
-  format?: Intl.NumberFormatOptions;
+  format?: Intl.NumberFormatOptions | undefined;
   /**
    * Callback fired when the number value changes.
    *
    * The `eventDetails.reason` indicates what triggered the change:
    * - `'input-change'` for parseable typing or programmatic text updates
    * - `'input-clear'` when the field becomes empty
-   * - `'input-blur'` when formatting or clamping occurs on blur
+   * - `'input-blur'` when formatting (and clamping, if enabled) occurs on blur
    * - `'input-paste'` for paste interactions
    * - `'keyboard'` for keyboard input
    * - `'increment-press'` / `'decrement-press'` for button presses on the increment and decrement controls
    * - `'wheel'` for wheel-based scrubbing
    * - `'scrub'` for scrub area drags
    */
-  onValueChange?: (value: number | null, eventDetails: NumberFieldRoot.ChangeEventDetails) => void;
+  onValueChange?: ((value: number | null, eventDetails: NumberFieldRoot.ChangeEventDetails) => void) | undefined;
   /**
    * Callback function that is fired when the value is committed.
    * It runs later than `onValueChange`, when:
@@ -111,16 +118,16 @@ export interface NumberFieldRootProps extends Omit<BaseUIComponentProps<'div', N
    *
    * **Warning**: This is a generic event not a change event.
    */
-  onValueCommitted?: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;
+  onValueCommitted?: ((value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void) | undefined;
   /**
    * The locale of the input element.
    * Defaults to the user's runtime locale.
    */
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   /**
    * A ref to access the hidden input element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
 }
 export interface NumberFieldRootState extends FieldRoot.State {
   /**

package/esm/number-field/root/NumberFieldRoot.js

@@ -49,6 +49,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     onValueCommitted: onValueCommittedProp,
     allowWheelScrub = false,
     snapOnStep = false,
+    allowOutOfRange = false,
     format,
     locale,
     render,
@@ -175,6 +176,10 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
   const setValue = 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 === REASONS.inputChange || reason === REASONS.inputBlur || reason === REASONS.inputPaste || reason === REASONS.inputClear || reason === REASONS.none);
     const validatedValue = toValidatedNumber(unvalidatedValue, {
       step: dir ? getStepAmount(eventWithOptionalKeyState) * dir : undefined,
       format: formatOptionsRef.current,
@@ -182,18 +187,20 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
       maxWithDefault,
       minWithZeroDefault,
       snapOnStep,
-      small: eventWithOptionalKeyState?.altKey ?? false
+      small: eventWithOptionalKeyState?.altKey ?? false,
+      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 shouldFireChange = validatedValue !== value || unvalidatedValue !== value || allowInputSyncRef.current === false;
+    const isInputReason = details.reason === REASONS.inputChange || details.reason === REASONS.inputClear || details.reason === REASONS.inputBlur || details.reason === REASONS.inputPaste || details.reason === REASONS.none;
+    const shouldFireChange = validatedValue !== value || isInputReason && (unvalidatedValue !== value || allowInputSyncRef.current === false);
     if (shouldFireChange) {
       lastChangedValueRef.current = validatedValue;
       onValueChangeProp?.(validatedValue, details);
       if (details.isCanceled) {
-        return;
+        return shouldFireChange;
       }
       setValueUnwrapped(validatedValue);
       setDirty(validatedValue !== validityData.initialValue);
@@ -210,6 +217,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
 
     // Formatting can change even if the numeric value hasn't, so ensure a re-render when needed.
     forceRender();
+    return shouldFireChange;
   });
   const incrementValue = useStableCallback((amount, {
     direction,
@@ -220,7 +228,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     const prevValue = currentValue == null ? valueRef.current : currentValue;
     const nextValue = typeof prevValue === 'number' ? prevValue + amount * direction : Math.max(0, min ?? 0);
     const nativeEvent = event;
-    setValue(nextValue, createChangeEventDetails(reason, nativeEvent, undefined, {
+    return setValue(nextValue, createChangeEventDetails(reason, nativeEvent, undefined, {
       direction
     }));
   });
@@ -258,15 +266,22 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     });
     function tick() {
       const amount = getStepAmount(triggerEvent) ?? DEFAULT_STEP;
-      incrementValue(amount, {
+      return incrementValue(amount, {
         direction: isIncrement ? 1 : -1,
         event: triggerEvent,
         reason: isIncrement ? 'increment-press' : 'decrement-press'
       });
     }
-    tick();
+    if (!tick()) {
+      stopAutoChange();
+      return;
+    }
     startTickTimeout.start(START_AUTO_CHANGE_DELAY, () => {
-      tickInterval.start(CHANGE_VALUE_TICK_DELAY, tick);
+      tickInterval.start(CHANGE_VALUE_TICK_DELAY, () => {
+        if (!tick()) {
+          stopAutoChange();
+        }
+      });
     });
   });
 

package/esm/number-field/root/NumberFieldRootContext.d.ts

@@ -14,9 +14,9 @@ export interface NumberFieldRootContext {
   disabled: boolean;
   readOnly: boolean;
   id: string | undefined;
-  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => void;
+  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
   getStepAmount: (event?: EventWithOptionalKeyState) => number | undefined;
-  incrementValue: (amount: number, params: IncrementValueParameters) => void;
+  incrementValue: (amount: number, params: IncrementValueParameters) => boolean;
   inputRef: React.RefObject<HTMLInputElement | null>;
   allowInputSyncRef: React.RefObject<boolean | null>;
   formatOptionsRef: React.RefObject<Intl.NumberFormatOptions | undefined>;

package/esm/number-field/root/useNumberFieldButton.d.ts

@@ -10,16 +10,16 @@ export interface UseNumberFieldButtonParameters {
   formatOptionsRef: React.RefObject<Intl.NumberFormatOptions | undefined>;
   getStepAmount: (event?: EventWithOptionalKeyState) => number | undefined;
   id: string | undefined;
-  incrementValue: (amount: number, params: IncrementValueParameters) => void;
+  incrementValue: (amount: number, params: IncrementValueParameters) => boolean;
   inputRef: React.RefObject<HTMLInputElement | null>;
   inputValue: string;
   intentionalTouchCheckTimeout: Timeout;
   isIncrement: boolean;
   isPressedRef: React.RefObject<boolean | null>;
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   movesAfterTouchRef: React.RefObject<number | null>;
   readOnly: boolean;
-  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => void;
+  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
   startAutoChange: (isIncrement: boolean, event?: React.MouseEvent | Event) => void;
   stopAutoChange: () => void;
   valueRef: React.RefObject<number | null>;

package/esm/number-field/root/useNumberFieldButton.js

@@ -4,6 +4,12 @@ import * as React from 'react';
 import { DEFAULT_STEP, MAX_POINTER_MOVES_AFTER_TOUCH, SCROLLING_POINTER_MOVE_DISTANCE, TOUCH_TIMEOUT } from "../utils/constants.js";
 import { parseNumber } from "../utils/parse.js";
 import { createChangeEventDetails, createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
+// 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';
+}
 export function useNumberFieldButton(params) {
   const {
     allowInputSyncRef,
@@ -72,7 +78,7 @@ export function useNumberFieldButton(params) {
       const isDisabled = disabled || readOnly;
       if (event.defaultPrevented || isDisabled || (
       // If it's not a keyboard/virtual click, ignore.
-      pointerTypeRef.current === 'touch' ? ignoreClickRef.current : event.detail !== 0)) {
+      isTouchLikePointerType(pointerTypeRef.current) ? ignoreClickRef.current : event.detail !== 0)) {
         return;
       }
       commitValue(event.nativeEvent);
@@ -101,9 +107,8 @@ export function useNumberFieldButton(params) {
         y: event.clientY
       };
       commitValue(event.nativeEvent);
-
-      // Note: "pen" is sometimes returned for mouse usage on Linux Chrome.
-      if (event.pointerType !== 'touch') {
+      const isTouchPointer = isTouchLikePointerType(event.pointerType);
+      if (!isTouchPointer) {
         event.preventDefault();
         inputRef.current?.focus();
         startAutoChange(isIncrement, event);
@@ -131,13 +136,13 @@ export 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.
-      if (event.pointerType === 'touch') {
+      if (isTouchLikePointerType(event.pointerType)) {
         isPressedRef.current = false;
       }
     },
     onPointerMove(event) {
       const isDisabled = disabled || readOnly;
-      if (isDisabled || event.pointerType !== 'touch' || !isPressedRef.current) {
+      if (isDisabled || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
         return;
       }
       if (movesAfterTouchRef.current != null) {
@@ -158,7 +163,7 @@ export function useNumberFieldButton(params) {
     },
     onMouseEnter(event) {
       const isDisabled = disabled || readOnly;
-      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || pointerTypeRef.current === 'touch') {
+      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
         return;
       }
       startAutoChange(isIncrement, event);