@base-ui/react 1.3.0 → 1.4.1

package/esm/slider/control/SliderControl.js

@@ -2,16 +2,17 @@
 
 import * as React from 'react';
 import { isElement } from '@floating-ui/utils/dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
-import { activeElement, contains } from "../../floating-ui-react/utils.js";
-import { clamp } from "../../utils/clamp.js";
-import { createChangeEventDetails, createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useDirection } from "../../direction-provider/DirectionContext.js";
+import { activeElement, contains, getTarget } from "../../floating-ui-react/utils.js";
+import { clamp } from "../../internals/clamp.js";
+import { createChangeEventDetails, createGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useDirection } from "../../internals/direction-context/DirectionContext.js";
 import { useSliderRootContext } from "../root/SliderRootContext.js";
 import { sliderStateAttributesMapping } from "../root/stateAttributesMapping.js";
 import { getMidpoint } from "../utils/getMidpoint.js";
@@ -70,6 +71,7 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
   const {
     render: renderProp,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -228,8 +230,15 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
     }
   });
   const focusThumb = useStableCallback(thumbIndex => {
-    thumbRefs.current?.[thumbIndex]?.querySelector('input[type="range"]')?.focus({
-      preventScroll: true
+    const input = thumbRefs.current?.[thumbIndex]?.querySelector('input[type="range"]');
+    if (!input) {
+      return;
+    }
+    input.focus({
+      preventScroll: true,
+      // Prevent pointer-driven focus rings in browsers that support this option.
+      // Supported in Chrome from 144+.
+      focusVisible: false
     });
   });
   const handleTouchMove = useStableCallback(nativeEvent => {
@@ -328,11 +337,11 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
     if (!control) {
       return () => stopListening();
     }
-    control.addEventListener('touchstart', handleTouchStart, {
+    const unsubscribeTouchStart = addEventListener(control, 'touchstart', handleTouchStart, {
       passive: true
     });
     return () => {
-      control.removeEventListener('touchstart', handleTouchStart);
+      unsubscribeTouchStart();
       focusFrame.cancel();
       stopListening();
     };
@@ -349,7 +358,8 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
       ['data-base-ui-slider-control']: renderBeforeHydration ? '' : undefined,
       onPointerDown(event) {
         const control = controlRef.current;
-        if (!control || disabled || event.defaultPrevented || !isElement(event.target) ||
+        const target = getTarget(event.nativeEvent);
+        if (!control || disabled || event.defaultPrevented || !isElement(target) ||
         // Only handle left clicks
         event.button !== 0) {
           return;
@@ -392,8 +402,7 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
         doc.addEventListener('pointerup', handleTouchEnd, {
           once: true
         });
-      },
-      tabIndex: -1
+      }
     }, elementProps],
     stateAttributesMapping: sliderStateAttributesMapping
   });

package/esm/slider/control/SliderControlDataAttributes.d.ts

@@ -13,11 +13,11 @@ export declare enum SliderControlDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the slider is in valid state (when wrapped in Field.Root).
+   * Present when the slider is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the slider is in invalid state (when wrapped in Field.Root).
+   * Present when the slider is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/esm/slider/control/SliderControlDataAttributes.js

@@ -13,11 +13,11 @@ export let SliderControlDataAttributes = /*#__PURE__*/function (SliderControlDat
    */
   SliderControlDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the slider is in valid state (when wrapped in Field.Root).
+   * Present when the slider is in a valid state (when wrapped in Field.Root).
    */
   SliderControlDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the slider is in invalid state (when wrapped in Field.Root).
+   * Present when the slider is in an invalid state (when wrapped in Field.Root).
    */
   SliderControlDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/slider/indicator/SliderIndicator.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * Visualizes the current value of the slider.

package/esm/slider/indicator/SliderIndicator.js

@@ -1,18 +1,18 @@
 'use client';
 
 import * as React from 'react';
-import { useOnMount } from '@base-ui/utils/useOnMount';
 import { valueToPercent } from "../../utils/valueToPercent.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useIsHydrating } from "../../utils/useIsHydrating.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useSliderRootContext } from "../root/SliderRootContext.js";
 import { sliderStateAttributesMapping } from "../root/stateAttributesMapping.js";
-function getInsetStyles(vertical, range, start, end, renderBeforeHydration, mounted) {
+function getInsetStyles(vertical, range, start, end, renderBeforeHydration, hydrating) {
   const visibility = start === undefined || range && end === undefined ? 'hidden' : undefined;
   const startEdge = vertical ? 'bottom' : 'insetInlineStart';
   const mainSide = vertical ? 'height' : 'width';
   const crossSide = vertical ? 'width' : 'height';
   const styles = {
-    visibility: renderBeforeHydration && !mounted ? 'hidden' : visibility,
+    visibility: renderBeforeHydration && hydrating ? 'hidden' : visibility,
     position: vertical ? 'absolute' : 'relative',
     [crossSide]: 'inherit'
   };
@@ -56,6 +56,7 @@ export const SliderIndicator = /*#__PURE__*/React.forwardRef(function SliderIndi
   const {
     render,
     className,
+    style: styleProp,
     ...elementProps
   } = componentProps;
   const {
@@ -68,11 +69,10 @@ export const SliderIndicator = /*#__PURE__*/React.forwardRef(function SliderIndi
     state,
     values
   } = useSliderRootContext();
-  const [isMounted, setIsMounted] = React.useState(false);
-  useOnMount(() => setIsMounted(true));
+  const isHydrating = useIsHydrating();
   const vertical = orientation === 'vertical';
   const range = values.length > 1;
-  const style = inset ? getInsetStyles(vertical, range, indicatorPosition[0], indicatorPosition[1], renderBeforeHydration, isMounted) : getCenteredStyles(vertical, range, valueToPercent(values[0], min, max), valueToPercent(values[values.length - 1], min, max));
+  const style = inset ? getInsetStyles(vertical, range, indicatorPosition[0], indicatorPosition[1], renderBeforeHydration, isHydrating) : getCenteredStyles(vertical, range, valueToPercent(values[0], min, max), valueToPercent(values[values.length - 1], min, max));
   const element = useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,

package/esm/slider/indicator/SliderIndicatorDataAttributes.d.ts

@@ -13,11 +13,11 @@ export declare enum SliderIndicatorDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the slider is in valid state (when wrapped in Field.Root).
+   * Present when the slider is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the slider is in invalid state (when wrapped in Field.Root).
+   * Present when the slider is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/esm/slider/indicator/SliderIndicatorDataAttributes.js

@@ -13,11 +13,11 @@ export let SliderIndicatorDataAttributes = /*#__PURE__*/function (SliderIndicato
    */
   SliderIndicatorDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the slider is in valid state (when wrapped in Field.Root).
+   * Present when the slider is in a valid state (when wrapped in Field.Root).
    */
   SliderIndicatorDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the slider is in invalid state (when wrapped in Field.Root).
+   * Present when the slider is in an invalid state (when wrapped in Field.Root).
    */
   SliderIndicatorDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/slider/label/SliderLabel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { SliderRoot } from "../root/SliderRoot.js";
 /**
  * An accessible label that is automatically associated with the slider thumbs.

package/esm/slider/label/SliderLabel.js

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import { isHTMLElement } from '@floating-ui/utils/dom';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { focusElementWithVisible, useLabel } from "../../labelable-provider/useLabel.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { focusElementWithVisible, useLabel } from "../../internals/labelable-provider/useLabel.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useSliderRootContext } from "../root/SliderRootContext.js";
 import { sliderStateAttributesMapping } from "../root/stateAttributesMapping.js";
 
@@ -18,6 +18,7 @@ export const SliderLabel = /*#__PURE__*/React.forwardRef(function SliderLabel(co
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.

package/esm/slider/root/SliderRoot.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, Orientation } from "../../utils/types.js";
-import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import type { BaseUIComponentProps, Orientation } from "../../internals/types.js";
+import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import type { FieldRootState } from "../../field/root/FieldRoot.js";
-import { REASONS } from "../../utils/reasons.js";
+import { REASONS } from "../../internals/reasons.js";
 /**
  * Groups all parts of the slider.
  * Renders a `<div>` element.
@@ -57,7 +57,7 @@ export interface SliderRootState extends FieldRootState {
 }
 export interface SliderRootProps<Value extends number | readonly number[] = number | readonly number[]> extends BaseUIComponentProps<'div', SliderRootState> {
   /**
-   * The uncontrolled value of the slider when it’s initially rendered.
+   * The uncontrolled value of the slider when it's initially rendered.
    *
    * To render a controlled slider, use the `value` prop instead.
    */
@@ -97,6 +97,11 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
    * Identifies the field when a form is submitted.
    */
   name?: string | undefined;
+  /**
+   * Identifies the form that owns the slider inputs.
+   * Useful when the slider is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * The component orientation.
    * @default 'horizontal'

package/esm/slider/root/SliderRoot.js

@@ -7,25 +7,25 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { warn } from '@base-ui/utils/warn';
-import { createChangeEventDetails, createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { useValueChanged } from "../../utils/useValueChanged.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { clamp } from "../../utils/clamp.js";
-import { areArraysEqual } from "../../utils/areArraysEqual.js";
-import { activeElement } from "../../floating-ui-react/utils.js";
-import { CompositeList } from "../../composite/list/CompositeList.js";
-import { useField } from "../../field/useField.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { useFormContext } from "../../form/FormContext.js";
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
+import { createChangeEventDetails, createGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { useValueChanged } from "../../internals/useValueChanged.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { clamp } from "../../internals/clamp.js";
+import { areArraysEqual } from "../../internals/areArraysEqual.js";
+import { activeElement, contains } from "../../floating-ui-react/utils.js";
+import { CompositeList } from "../../internals/composite/list/CompositeList.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { useRegisterFieldControl } from "../../internals/field-register-control/useRegisterFieldControl.js";
+import { useFormContext } from "../../internals/form-context/FormContext.js";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
 import { resolveAriaLabelledBy, getDefaultLabelId } from "../../utils/resolveAriaLabelledBy.js";
 import { asc } from "../utils/asc.js";
 import { getSliderValue } from "../utils/getSliderValue.js";
 import { validateMinimumDistance } from "../utils/validateMinimumDistance.js";
 import { sliderStateAttributesMapping } from "./stateAttributesMapping.js";
 import { SliderRootContext } from "./SliderRootContext.js";
-import { REASONS } from "../../utils/reasons.js";
+import { REASONS } from "../../internals/reasons.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function getSliderChangeEventReason(event) {
   return 'key' in event ? REASONS.keyboard : REASONS.inputChange;
@@ -60,6 +60,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
     max = 100,
     min = 0,
     minStepsBetweenValues = 0,
+    form,
     name: nameProp,
     onValueChange: onValueChangeProp,
     onValueCommitted: onValueCommittedProp,
@@ -68,6 +69,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
     thumbCollisionBehavior = 'push',
     thumbAlignment = 'center',
     value: valueProp,
+    style,
     ...elementProps
   } = componentProps;
   const id = useBaseUiId(idProp);
@@ -133,13 +135,9 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
       setLastUsedThumbIndex(value);
     }
   });
-  useField({
+  useRegisterFieldControl(controlRef, {
     id,
-    commit: validation.commit,
-    value: valueUnwrapped,
-    controlRef,
-    name,
-    getValue: () => valueUnwrapped
+    value: valueUnwrapped
   });
   useValueChanged(valueUnwrapped, () => {
     clearErrors(name);
@@ -219,7 +217,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
   }
   useIsoLayoutEffect(() => {
     const activeEl = activeElement(ownerDocument(sliderRef.current));
-    if (disabled && activeEl && sliderRef.current?.contains(activeEl)) {
+    if (disabled && contains(sliderRef.current, activeEl)) {
       // This is necessary because Firefox and Safari will keep focus
       // on a disabled element:
       // https://codesandbox.io/p/sandbox/mui-pr-22247-forked-h151h?file=/src/App.js
@@ -257,6 +255,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
     lastUsedThumbIndex,
     lastChangedValueRef,
     lastChangeReasonRef,
+    form,
     locale,
     max,
     min,
@@ -281,7 +280,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
     thumbMap,
     thumbRefs,
     values
-  }), [active, controlRef, ariaLabelledby, defaultLabelId, disabled, dragging, validation, formatOptionsRef, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, lastChangedValueRef, lastChangeReasonRef, locale, max, min, minStepsBetweenValues, name, onValueCommitted, orientation, pressedInputRef, pressedThumbCenterOffsetRef, pressedThumbIndexRef, pressedValuesRef, registerFieldControlRef, setActive, setDragging, setIndicatorPosition, setLabelId, setValue, state, step, thumbCollisionBehavior, thumbAlignment, thumbMap, thumbRefs, values]);
+  }), [active, controlRef, ariaLabelledby, defaultLabelId, disabled, dragging, validation, formatOptionsRef, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, lastChangedValueRef, lastChangeReasonRef, form, locale, max, min, minStepsBetweenValues, name, onValueCommitted, orientation, pressedInputRef, pressedThumbCenterOffsetRef, pressedThumbIndexRef, pressedValuesRef, registerFieldControlRef, setActive, setDragging, setIndicatorPosition, setLabelId, setValue, state, step, thumbCollisionBehavior, thumbAlignment, thumbMap, thumbRefs, values]);
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, sliderRef],

package/esm/slider/root/SliderRootContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { Orientation } from "../../utils/types.js";
-import type { CompositeMetadata } from "../../composite/list/CompositeList.js";
+import type { Orientation } from "../../internals/types.js";
+import type { CompositeMetadata } from "../../internals/composite/list/CompositeList.js";
 import type { UseFieldValidationReturnValue } from "../../field/root/useFieldValidation.js";
 import type { ThumbMetadata } from "../thumb/SliderThumb.js";
 import type { SliderRoot, SliderRootState } from "./SliderRoot.js";
@@ -48,6 +48,7 @@ export interface SliderRootContext {
    * The minimum steps between values in a range slider.
    */
   minStepsBetweenValues: number;
+  form: string | undefined;
   name: string | undefined;
   /**
    * Function to be called when drag ends and the pointer is released.

package/esm/slider/root/SliderRootDataAttributes.d.ts

@@ -13,11 +13,11 @@ export declare enum SliderRootDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the slider is in valid state (when wrapped in Field.Root).
+   * Present when the slider is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the slider is in invalid state (when wrapped in Field.Root).
+   * Present when the slider is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/esm/slider/root/SliderRootDataAttributes.js

@@ -13,11 +13,11 @@ export let SliderRootDataAttributes = /*#__PURE__*/function (SliderRootDataAttri
    */
   SliderRootDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the slider is in valid state (when wrapped in Field.Root).
+   * Present when the slider is in a valid state (when wrapped in Field.Root).
    */
   SliderRootDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the slider is in invalid state (when wrapped in Field.Root).
+   * Present when the slider is in an invalid state (when wrapped in Field.Root).
    */
   SliderRootDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/slider/root/stateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
-import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
+import type { StateAttributesMapping } from "../../internals/getStateAttributesProps.js";
 import type { SliderRootState } from "./SliderRoot.js";
 export declare const sliderStateAttributesMapping: StateAttributesMapping<SliderRootState>;

package/esm/slider/root/stateAttributesMapping.js

@@ -1,4 +1,4 @@
-import { fieldValidityMapping } from "../../field/utils/constants.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
 export const sliderStateAttributesMapping = {
   activeThumbIndex: () => null,
   max: () => null,

package/esm/slider/thumb/SliderThumb.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
-import { type LabelableContext } from "../../labelable-provider/LabelableContext.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
+import { type LabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
 import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * The draggable part of the slider at the tip of the indicator.

package/esm/slider/thumb/SliderThumb.js

@@ -3,30 +3,30 @@
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useOnMount } from '@base-ui/utils/useOnMount';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
+import { clamp } from "../../internals/clamp.js";
 import { formatNumber } from "../../utils/formatNumber.js";
 import { mergeProps } from "../../merge-props/index.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
+import { useIsHydrating } from "../../utils/useIsHydrating.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { valueToPercent } from "../../utils/valueToPercent.js";
-import { ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT, HOME, END, COMPOSITE_KEYS } from "../../composite/composite.js";
-import { useCompositeListItem } from "../../composite/list/useCompositeListItem.js";
-import { useDirection } from "../../direction-provider/DirectionContext.js";
+import { ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT, HOME, END, COMPOSITE_KEYS, PAGE_UP, PAGE_DOWN } from "../../internals/composite/composite.js";
+import { useCompositeListItem } from "../../internals/composite/list/useCompositeListItem.js";
+import { useDirection } from "../../internals/direction-context/DirectionContext.js";
 import { useCSPContext } from "../../csp-provider/CSPContext.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { matchesFocusVisible } from "../../floating-ui-react/utils/element.js";
+import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.js";
 import { getMidpoint } from "../utils/getMidpoint.js";
 import { getSliderValue } from "../utils/getSliderValue.js";
-import { roundValueToStep } from "../utils/roundValueToStep.js";
+import { getDecimalPrecision, roundValueToStep } from "../utils/roundValueToStep.js";
 import { useSliderRootContext } from "../root/SliderRootContext.js";
 import { sliderStateAttributesMapping } from "../root/stateAttributesMapping.js";
 import { SliderThumbDataAttributes } from "./SliderThumbDataAttributes.js";
 import { script as prehydrationScript } from "./prehydrationScript.min.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const PAGE_UP = 'PageUp';
-const PAGE_DOWN = 'PageDown';
 const ALL_KEYS = new Set([ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, HOME, END, PAGE_UP, PAGE_DOWN]);
 function getDefaultAriaValueText(values, index, format, locale) {
   if (index < 0) {
@@ -40,8 +40,10 @@ function getDefaultAriaValueText(values, index, format, locale) {
   }
   return format ? formatNumber(values[index], locale, format) : undefined;
 }
-function getNewValue(thumbValue, step, direction, min, max) {
-  return direction === 1 ? Math.min(thumbValue + step, max) : Math.max(thumbValue - step, min);
+function getNewValue(thumbValue, increment, direction, min, max) {
+  const value = direction === 1 ? thumbValue + increment : thumbValue - increment;
+  const roundedValue = Number(value.toFixed(Math.max(getDecimalPrecision(thumbValue), getDecimalPrecision(increment), getDecimalPrecision(min))));
+  return clamp(roundedValue, min, max);
 }
 
 /**
@@ -68,6 +70,7 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
     onFocus: onFocusProp,
     onKeyDown: onKeyDownProp,
     tabIndex: tabIndexProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -89,6 +92,7 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
     max,
     min,
     minStepsBetweenValues,
+    form,
     name,
     orientation,
     pressedInputRef,
@@ -113,6 +117,7 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
   } = useFieldRootContext();
   const thumbRef = React.useRef(null);
   const inputRef = React.useRef(null);
+  const restoringFocusVisibleRef = React.useRef(false);
   const defaultInputId = useBaseUiId();
   const labelableId = useLabelableId();
   const inputId = range ? defaultInputId : labelableId;
@@ -129,9 +134,8 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
   const last = index === sliderValues.length - 1;
   const thumbValue = sliderValues[index];
   const thumbValuePercent = valueToPercent(thumbValue, min, max);
-  const [isMounted, setIsMounted] = React.useState(false);
   const [positionPercent, setPositionPercent] = React.useState();
-  useOnMount(() => setIsMounted(true));
+  const isHydrating = useIsHydrating();
   const safeLastUsedThumbIndex = lastUsedThumbIndex >= 0 && lastUsedThumbIndex < sliderValues.length ? lastUsedThumbIndex : -1;
   const getInsetPosition = useStableCallback(() => {
     const control = controlRef.current;
@@ -147,11 +151,12 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
     // px distance from the starting edge (inline-start or bottom) to the thumb center
     const thumbOffsetFromControlEdge = thumbRect[side] / 2 + controlSize * thumbValuePercent / 100;
     const nextPositionPercent = thumbOffsetFromControlEdge / controlRect[side] * 100;
-    setPositionPercent(nextPositionPercent);
+    const nextInsetPosition = Number.isFinite(nextPositionPercent) ? nextPositionPercent : undefined;
+    setPositionPercent(nextInsetPosition);
     if (index === 0) {
-      setIndicatorPosition(prevPosition => [nextPositionPercent, prevPosition[1]]);
+      setIndicatorPosition(prevPosition => [nextInsetPosition, prevPosition[1]]);
     } else if (last) {
-      setIndicatorPosition(prevPosition => [prevPosition[0], nextPositionPercent]);
+      setIndicatorPosition(prevPosition => [prevPosition[0], nextInsetPosition]);
     }
   });
   useIsoLayoutEffect(() => {
@@ -164,6 +169,22 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
       getInsetPosition();
     }
   }, [getInsetPosition, inset, thumbValuePercent]);
+  useIsoLayoutEffect(() => {
+    if (!inset || typeof ResizeObserver !== 'function') {
+      return undefined;
+    }
+    const control = controlRef.current;
+    const thumb = thumbRef.current;
+    if (!control || !thumb) {
+      return undefined;
+    }
+    const resizeObserver = new ResizeObserver(getInsetPosition);
+    resizeObserver.observe(control);
+    resizeObserver.observe(thumb);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [controlRef, getInsetPosition, inset]);
   const getThumbStyle = React.useCallback(() => {
     const startEdge = vertical ? 'bottom' : 'insetInlineStart';
     const crossOffsetProperty = vertical ? 'left' : 'top';
@@ -190,15 +211,15 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
       };
     }
     return {
-      ['--position']: `${positionPercent}%`,
-      visibility: renderBeforeHydration && !isMounted || positionPercent === undefined ? 'hidden' : undefined,
+      ['--position']: `${positionPercent ?? 0}%`,
+      visibility: renderBeforeHydration && isHydrating || positionPercent === undefined ? 'hidden' : undefined,
       position: 'absolute',
       [startEdge]: 'var(--position)',
       [crossOffsetProperty]: '50%',
       translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
       zIndex
     };
-  }, [activeIndex, index, inset, isMounted, positionPercent, range, renderBeforeHydration, rtl, safeLastUsedThumbIndex, thumbValuePercent, vertical]);
+  }, [activeIndex, index, inset, isHydrating, positionPercent, range, renderBeforeHydration, rtl, safeLastUsedThumbIndex, thumbValuePercent, vertical]);
   let cssWritingMode;
   if (orientation === 'vertical') {
     cssWritingMode = rtl ? 'vertical-rl' : 'vertical-lr';
@@ -212,18 +233,28 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
     'aria-valuenow': thumbValue,
     'aria-valuetext': typeof getAriaValueTextProp === 'function' ? getAriaValueTextProp(formatNumber(thumbValue, locale, formatOptionsRef.current ?? undefined), thumbValue, index) : getDefaultAriaValueText(sliderValues, index, formatOptionsRef.current ?? undefined, locale),
     disabled,
+    form,
     id: inputId,
     max,
     min,
     name,
     onChange(event) {
-      handleInputChange(event.target.valueAsNumber, index, event);
+      handleInputChange(event.currentTarget.valueAsNumber, index, event);
     },
-    onFocus() {
+    onFocus(event) {
+      const isRestoringFocusVisible = restoringFocusVisibleRef.current;
+      restoringFocusVisibleRef.current = false;
       setActive(index);
       setFocused(true);
+      if (isRestoringFocusVisible) {
+        event.stopPropagation();
+      }
     },
-    onBlur() {
+    onBlur(event) {
+      if (restoringFocusVisibleRef.current) {
+        event.stopPropagation();
+        return;
+      }
       if (!thumbRef.current) {
         return;
       }
@@ -278,6 +309,17 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
           break;
       }
       if (newValue !== null) {
+        const input = event.currentTarget;
+        if (!matchesFocusVisible(input)) {
+          restoringFocusVisibleRef.current = true;
+          input.blur();
+          input.focus({
+            preventScroll: true,
+            // Show `:focus-visible` after keyboard interaction, even if the
+            // thumb was previously focused by a pointer.
+            focusVisible: true
+          });
+        }
         handleInputChange(newValue, index, event);
         event.preventDefault();
       }
@@ -303,8 +345,9 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
       children: /*#__PURE__*/_jsxs(React.Fragment, {
         children: [childrenProp, /*#__PURE__*/_jsx("input", {
           ref: mergedInputRef,
-          ...inputProps
-        }), inset && !isMounted && renderBeforeHydration &&
+          ...inputProps,
+          suppressHydrationWarning: true
+        }), inset && isHydrating && renderBeforeHydration &&
         // this must be rendered with the last thumb to ensure all
         // preceding thumbs are already rendered in the DOM
         last && /*#__PURE__*/_jsx("script", {
@@ -333,8 +376,7 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
         }
       },
       style: getThumbStyle(),
-      suppressHydrationWarning: renderBeforeHydration || undefined,
-      tabIndex: -1
+      suppressHydrationWarning: renderBeforeHydration || undefined
     }, elementProps],
     stateAttributesMapping: sliderStateAttributesMapping
   });