@base-ui/react 1.2.0 → 1.4.0

package/separator/SeparatorDataAttributes.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SeparatorDataAttributes = void 0;
+let SeparatorDataAttributes = exports.SeparatorDataAttributes = /*#__PURE__*/function (SeparatorDataAttributes) {
+  /**
+   * Indicates the orientation of the separator.
+   * @type {'horizontal' | 'vertical'}
+   */
+  SeparatorDataAttributes["orientation"] = "data-orientation";
+  return SeparatorDataAttributes;
+}({});

package/slider/control/SliderControl.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { SliderRoot } from "../root/SliderRoot.js";
+import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * The clickable, interactive part of the slider.
  * Renders a `<div>` element.
@@ -8,8 +8,9 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
 export declare const SliderControl: React.ForwardRefExoticComponent<Omit<SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface SliderControlProps extends BaseUIComponentProps<'div', SliderRoot.State> {}
+export interface SliderControlState extends SliderRootState {}
+export interface SliderControlProps extends BaseUIComponentProps<'div', SliderControlState> {}
 export declare namespace SliderControl {
-  type State = SliderRoot.State;
+  type State = SliderControlState;
   type Props = SliderControlProps;
 }

package/slider/control/SliderControl.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SliderControl = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _owner = require("@base-ui/utils/owner");
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
@@ -76,12 +77,12 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
   const {
     render: renderProp,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
     disabled,
     dragging,
-    validation,
     inset,
     lastChangedValueRef,
     lastChangeReasonRef,
@@ -235,8 +236,15 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
     }
   });
   const focusThumb = (0, _useStableCallback.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 = (0, _useStableCallback.useStableCallback)(nativeEvent => {
@@ -277,7 +285,6 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
     const finger = fingerCoords != null ? getFingerState(fingerCoords) : null;
     if (finger != null) {
       const commitReason = lastChangeReasonRef.current;
-      validation.commit(lastChangedValueRef.current ?? finger.value);
       onValueCommitted(lastChangedValueRef.current ?? finger.value, (0, _createBaseUIEventDetails.createGenericEventDetails)(commitReason, nativeEvent));
     }
     if ('pointerType' in nativeEvent && controlRef.current?.hasPointerCapture(nativeEvent.pointerId)) {
@@ -336,11 +343,11 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
     if (!control) {
       return () => stopListening();
     }
-    control.addEventListener('touchstart', handleTouchStart, {
+    const unsubscribeTouchStart = (0, _addEventListener.addEventListener)(control, 'touchstart', handleTouchStart, {
       passive: true
     });
     return () => {
-      control.removeEventListener('touchstart', handleTouchStart);
+      unsubscribeTouchStart();
       focusFrame.cancel();
       stopListening();
     };
@@ -357,7 +364,8 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
       ['data-base-ui-slider-control']: renderBeforeHydration ? '' : undefined,
       onPointerDown(event) {
         const control = controlRef.current;
-        if (!control || disabled || event.defaultPrevented || !(0, _dom.isElement)(event.target) ||
+        const target = (0, _utils.getTarget)(event.nativeEvent);
+        if (!control || disabled || event.defaultPrevented || !(0, _dom.isElement)(target) ||
         // Only handle left clicks
         event.button !== 0) {
           return;
@@ -400,8 +408,7 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
         doc.addEventListener('pointerup', handleTouchEnd, {
           once: true
         });
-      },
-      tabIndex: -1
+      }
     }, elementProps],
     stateAttributesMapping: _stateAttributesMapping.sliderStateAttributesMapping
   });

package/slider/index.d.ts

@@ -1,5 +1,6 @@
 export * as Slider from "./index.parts.js";
 export type * from "./root/SliderRoot.js";
+export type * from "./label/SliderLabel.js";
 export type * from "./value/SliderValue.js";
 export type * from "./control/SliderControl.js";
 export type * from "./track/SliderTrack.js";

package/slider/index.parts.d.ts

@@ -1,4 +1,5 @@
 export { SliderRoot as Root } from "./root/SliderRoot.js";
+export { SliderLabel as Label } from "./label/SliderLabel.js";
 export { SliderValue as Value } from "./value/SliderValue.js";
 export { SliderControl as Control } from "./control/SliderControl.js";
 export { SliderTrack as Track } from "./track/SliderTrack.js";

package/slider/index.parts.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "Indicator", {
     return _SliderIndicator.SliderIndicator;
   }
 });
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function () {
+    return _SliderLabel.SliderLabel;
+  }
+});
 Object.defineProperty(exports, "Root", {
   enumerable: true,
   get: function () {
@@ -40,6 +46,7 @@ Object.defineProperty(exports, "Value", {
   }
 });
 var _SliderRoot = require("./root/SliderRoot");
+var _SliderLabel = require("./label/SliderLabel");
 var _SliderValue = require("./value/SliderValue");
 var _SliderControl = require("./control/SliderControl");
 var _SliderTrack = require("./track/SliderTrack");

package/slider/indicator/SliderIndicator.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { SliderRoot } from "../root/SliderRoot.js";
+import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * Visualizes the current value of the slider.
  * Renders a `<div>` element.
@@ -8,7 +8,9 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
 export declare const SliderIndicator: React.ForwardRefExoticComponent<Omit<SliderIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface SliderIndicatorProps extends BaseUIComponentProps<'div', SliderRoot.State> {}
+export interface SliderIndicatorState extends SliderRootState {}
+export interface SliderIndicatorProps extends BaseUIComponentProps<'div', SliderIndicatorState> {}
 export declare namespace SliderIndicator {
+  type State = SliderIndicatorState;
   type Props = SliderIndicatorProps;
 }

package/slider/indicator/SliderIndicator.js

@@ -7,18 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SliderIndicator = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useOnMount = require("@base-ui/utils/useOnMount");
 var _valueToPercent = require("../../utils/valueToPercent");
+var _useIsHydrating = require("../../utils/useIsHydrating");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _SliderRootContext = require("../root/SliderRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
-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'
   };
@@ -62,6 +62,7 @@ const SliderIndicator = exports.SliderIndicator = /*#__PURE__*/React.forwardRef(
   const {
     render,
     className,
+    style: styleProp,
     ...elementProps
   } = componentProps;
   const {
@@ -74,11 +75,10 @@ const SliderIndicator = exports.SliderIndicator = /*#__PURE__*/React.forwardRef(
     state,
     values
   } = (0, _SliderRootContext.useSliderRootContext)();
-  const [isMounted, setIsMounted] = React.useState(false);
-  (0, _useOnMount.useOnMount)(() => setIsMounted(true));
+  const isHydrating = (0, _useIsHydrating.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, (0, _valueToPercent.valueToPercent)(values[0], min, max), (0, _valueToPercent.valueToPercent)(values[values.length - 1], min, max));
+  const style = inset ? getInsetStyles(vertical, range, indicatorPosition[0], indicatorPosition[1], renderBeforeHydration, isHydrating) : getCenteredStyles(vertical, range, (0, _valueToPercent.valueToPercent)(values[0], min, max), (0, _valueToPercent.valueToPercent)(values[values.length - 1], min, max));
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,

package/slider/label/SliderLabel.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { SliderRoot } from "../root/SliderRoot.js";
+/**
+ * An accessible label that is automatically associated with the slider thumbs.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
+ */
+export declare const SliderLabel: React.ForwardRefExoticComponent<Omit<SliderLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type SliderLabelState = SliderRoot.State;
+export interface SliderLabelProps extends Omit<BaseUIComponentProps<'div', SliderLabel.State>, 'id'> {}
+export declare namespace SliderLabel {
+  type State = SliderLabelState;
+  type Props = SliderLabelProps;
+}

package/slider/label/SliderLabel.js

@@ -0,0 +1,64 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SliderLabel = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _dom = require("@floating-ui/utils/dom");
+var _owner = require("@base-ui/utils/owner");
+var _useLabel = require("../../labelable-provider/useLabel");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _SliderRootContext = require("../root/SliderRootContext");
+var _stateAttributesMapping = require("../root/stateAttributesMapping");
+/**
+ * An accessible label that is automatically associated with the slider thumbs.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
+ */
+const SliderLabel = exports.SliderLabel = /*#__PURE__*/React.forwardRef(function SliderLabel(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    style,
+    ...elementProps
+  } = componentProps;
+  // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.
+  const elementPropsWithoutId = elementProps;
+  delete elementPropsWithoutId.id;
+  const {
+    state,
+    setLabelId,
+    controlRef,
+    rootLabelId
+  } = (0, _SliderRootContext.useSliderRootContext)();
+  function focusControl(event, controlId) {
+    if (controlId) {
+      const controlElement = (0, _owner.ownerDocument)(event.currentTarget).getElementById(controlId);
+      if ((0, _dom.isHTMLElement)(controlElement)) {
+        (0, _useLabel.focusElementWithVisible)(controlElement);
+        return;
+      }
+    }
+    const fallbackInputs = controlRef.current?.querySelectorAll('input[type="range"]');
+    const fallbackInput = fallbackInputs?.length === 1 ? fallbackInputs[0] : null;
+    if ((0, _dom.isHTMLElement)(fallbackInput)) {
+      (0, _useLabel.focusElementWithVisible)(fallbackInput);
+    }
+  }
+  const labelProps = (0, _useLabel.useLabel)({
+    id: rootLabelId,
+    setLabelId,
+    focusControl
+  });
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: forwardedRef,
+    state,
+    props: [labelProps, elementProps],
+    stateAttributesMapping: _stateAttributesMapping.sliderStateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") SliderLabel.displayName = "SliderLabel";

package/slider/root/SliderRoot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { BaseUIComponentProps, Orientation } from "../../utils/types.js";
 import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import { REASONS } from "../../utils/reasons.js";
 /**
  * Groups all parts of the slider.
@@ -14,7 +14,7 @@ export declare const SliderRoot: {
     ref?: React.Ref<HTMLDivElement> | undefined;
   }): React.JSX.Element;
 };
-export interface SliderRootState extends FieldRoot.State {
+export interface SliderRootState extends FieldRootState {
   /**
    * The index of the active thumb.
    */
@@ -27,7 +27,13 @@ export interface SliderRootState extends FieldRoot.State {
    * Whether the thumb is currently being dragged.
    */
   dragging: boolean;
+  /**
+   * The maximum value.
+   */
   max: number;
+  /**
+   * The minimum value.
+   */
   min: number;
   /**
    * The minimum steps between values in a range slider.
@@ -49,9 +55,9 @@ export interface SliderRootState extends FieldRoot.State {
    */
   values: readonly number[];
 }
-export interface SliderRootProps<Value extends number | readonly number[] = number | readonly number[]> extends BaseUIComponentProps<'div', SliderRoot.State> {
+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.
    */
@@ -91,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'
@@ -115,7 +126,7 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
    * - `edge-client-only`: Same as `edge` but renders after React hydration on the client, reducing bundle size in return
    * @default 'center'
    */
-  thumbAlignment?: ('center' | 'edge' | 'edge-client-only') | undefined;
+  thumbAlignment?: 'center' | 'edge' | 'edge-client-only' | undefined;
   /**
    * Controls how thumbs behave when they collide during pointer interactions.
    *
@@ -125,7 +136,7 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
    *
    * @default 'push'
    */
-  thumbCollisionBehavior?: ('push' | 'swap' | 'none') | undefined;
+  thumbCollisionBehavior?: 'push' | 'swap' | 'none' | undefined;
   /**
    * The value of the slider.
    * For ranged sliders, provide an array with two values.

package/slider/root/SliderRoot.js

@@ -21,10 +21,11 @@ var _clamp = require("../../utils/clamp");
 var _areArraysEqual = require("../../utils/areArraysEqual");
 var _utils = require("../../floating-ui-react/utils");
 var _CompositeList = require("../../composite/list/CompositeList");
-var _useField = require("../../field/useField");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _useRegisterFieldControl = require("../../field/root/useRegisterFieldControl");
 var _FormContext = require("../../form/FormContext");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
+var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
 var _asc = require("../utils/asc");
 var _getSliderValue = require("../utils/getSliderValue");
 var _validateMinimumDistance = require("../utils/validateMinimumDistance");
@@ -65,6 +66,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     max = 100,
     min = 0,
     minStepsBetweenValues = 0,
+    form,
     name: nameProp,
     onValueChange: onValueChangeProp,
     onValueCommitted: onValueCommittedProp,
@@ -73,9 +75,11 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     thumbCollisionBehavior = 'push',
     thumbAlignment = 'center',
     value: valueProp,
+    style,
     ...elementProps
   } = componentProps;
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
+  const defaultLabelId = (0, _resolveAriaLabelledBy.getDefaultLabelId)(id);
   const onValueChange = (0, _useStableCallback.useStableCallback)(onValueChangeProp);
   const onValueCommitted = (0, _useStableCallback.useStableCallback)(onValueCommittedProp);
   const {
@@ -92,9 +96,10 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     validation
   } = (0, _FieldRootContext.useFieldRootContext)();
   const {
-    labelId
+    labelId: fieldLabelId
   } = (0, _LabelableContext.useLabelableContext)();
-  const ariaLabelledby = ariaLabelledByProp ?? labelId;
+  const [labelId, setLabelId] = React.useState();
+  const ariaLabelledby = ariaLabelledByProp ?? (0, _resolveAriaLabelledBy.resolveAriaLabelledBy)(fieldLabelId, labelId);
   const disabled = fieldDisabled || disabledProp;
   const name = fieldName ?? nameProp;
 
@@ -136,13 +141,9 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
       setLastUsedThumbIndex(value);
     }
   });
-  (0, _useField.useField)({
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, {
     id,
-    commit: validation.commit,
-    value: valueUnwrapped,
-    controlRef,
-    name,
-    getValue: () => valueUnwrapped
+    value: valueUnwrapped
   });
   (0, _useValueChanged.useValueChanged)(valueUnwrapped, () => {
     clearErrors(name);
@@ -222,7 +223,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
   }
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const activeEl = (0, _utils.activeElement)((0, _owner.ownerDocument)(sliderRef.current));
-    if (disabled && activeEl && sliderRef.current?.contains(activeEl)) {
+    if (disabled && (0, _utils.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
@@ -255,10 +256,12 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     indicatorPosition,
     inset: thumbAlignment !== 'center',
     labelId: ariaLabelledby,
+    rootLabelId: defaultLabelId,
     largeStep,
     lastUsedThumbIndex,
     lastChangedValueRef,
     lastChangeReasonRef,
+    form,
     locale,
     max,
     min,
@@ -275,6 +278,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     setActive,
     setDragging,
     setIndicatorPosition,
+    setLabelId,
     setValue,
     state,
     step,
@@ -282,7 +286,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     thumbMap,
     thumbRefs,
     values
-  }), [active, controlRef, ariaLabelledby, 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, 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 = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, sliderRef],

package/slider/root/SliderRootContext.d.ts

@@ -3,7 +3,7 @@ import type { Orientation } from "../../utils/types.js";
 import type { CompositeMetadata } from "../../composite/list/CompositeList.js";
 import type { UseFieldValidationReturnValue } from "../../field/root/useFieldValidation.js";
 import type { ThumbMetadata } from "../thumb/SliderThumb.js";
-import type { SliderRoot } from "./SliderRoot.js";
+import type { SliderRoot, SliderRootState } from "./SliderRoot.js";
 export interface SliderRootContext {
   /**
    * The index of the active thumb.
@@ -22,6 +22,7 @@ export interface SliderRootContext {
   indicatorPosition: (number | undefined)[];
   inset: boolean;
   labelId?: string | undefined;
+  rootLabelId?: string | undefined;
   /**
    * The large step value of the slider when incrementing or decrementing while the shift key is held,
    * or when using Page-Up or Page-Down keys. Snaps to multiples of this value.
@@ -47,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.
@@ -66,11 +68,12 @@ export interface SliderRootContext {
   setActive: (index: number) => void;
   setDragging: React.Dispatch<React.SetStateAction<boolean>>;
   setIndicatorPosition: React.Dispatch<React.SetStateAction<(number | undefined)[]>>;
+  setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
   /**
    * Callback fired when dragging and invokes onValueChange.
    */
   setValue: (newValue: number | number[], details?: SliderRoot.ChangeEventDetails) => void;
-  state: SliderRoot.State;
+  state: SliderRootState;
   /**
    * The step increment of the slider when incrementing or decrementing. It will snap
    * to multiples of this value. Decimal values are supported.

package/slider/root/stateAttributesMapping.d.ts

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

package/slider/thumb/SliderThumb.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
 import { type LabelableContext } from "../../labelable-provider/LabelableContext.js";
-import type { SliderRoot } from "../root/SliderRoot.js";
+import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * The draggable part of the slider at the tip of the indicator.
  * Renders a `<div>` element and a nested `<input type="range">`.
@@ -12,8 +12,8 @@ export declare const SliderThumb: React.ForwardRefExoticComponent<Omit<SliderThu
 export interface ThumbMetadata {
   inputId: LabelableContext['controlId'];
 }
-export interface SliderThumbState extends SliderRoot.State {}
-export interface SliderThumbProps extends Omit<BaseUIComponentProps<'div', SliderThumb.State>, 'onBlur' | 'onFocus'> {
+export interface SliderThumbState extends SliderRootState {}
+export interface SliderThumbProps extends Omit<BaseUIComponentProps<'div', SliderThumbState>, 'onBlur' | 'onFocus'> {
   /**
    * Whether the thumb should ignore user interaction.
    * @default false
@@ -22,12 +22,12 @@ export interface SliderThumbProps extends Omit<BaseUIComponentProps<'div', Slide
   /**
    * A function which returns a string value for the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute of the `input`.
    */
-  getAriaLabel?: (((index: number) => string) | null) | undefined;
+  getAriaLabel?: ((index: number) => string) | null | undefined;
   /**
    * A function which returns a string value for the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`.
    * This is important for screen reader users.
    */
-  getAriaValueText?: (((formattedValue: string, value: number, index: number) => string) | null) | undefined;
+  getAriaValueText?: ((formattedValue: string, value: number, index: number) => string) | null | undefined;
   /**
    * The index of the thumb which corresponds to the index of its value in the
    * `value` or `defaultValue` array.