@base-ui/react 1.2.0 → 1.3.0

package/select/positioner/SelectPositioner.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import { useAnchorPositioning, type Align, type Side } from "../../utils/useAnchorPositioning.js";
+import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
 /**
  * Positions the select popup.
  * Renders a `<div>` element.
@@ -9,12 +9,24 @@ import { useAnchorPositioning, type Align, type Side } from "../../utils/useAnch
  */
 export declare const SelectPositioner: React.ForwardRefExoticComponent<Omit<SelectPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectPositionerState {
+  /**
+   * Whether the component is open.
+   */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side | 'none';
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
   anchorHidden: boolean;
 }
-export interface SelectPositionerProps extends useAnchorPositioning.SharedParameters, BaseUIComponentProps<'div', SelectPositioner.State> {
+export interface SelectPositionerProps extends UseAnchorPositioningSharedParameters, BaseUIComponentProps<'div', SelectPositionerState> {
   /**
    * Whether the positioner overlaps the trigger so the selected item's text is aligned with the trigger's value text. This only applies to mouse input and is automatically disabled if there is not enough space.
    * @default true

package/select/positioner/SelectPositionerContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type Side, useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
-export interface SelectPositionerContext extends Omit<useAnchorPositioning.ReturnValue, 'side'> {
+import type { Side, UseAnchorPositioningReturnValue } from "../../utils/useAnchorPositioning.js";
+export interface SelectPositionerContext extends Omit<UseAnchorPositioningReturnValue, 'side'> {
   side: 'none' | Side;
   alignItemWithTriggerActive: boolean;
   setControlledAlignItemWithTrigger: React.Dispatch<React.SetStateAction<boolean>>;

package/select/root/SelectRoot.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
+import { type Group } from "../../utils/resolveValueLabel.js";
 /**
  * Groups all parts of the select.
  * Doesn’t render its own HTML element.
@@ -101,10 +102,10 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
    * <Select.Root items={items} />
    * ```
    */
-  items?: (Record<string, React.ReactNode> | ReadonlyArray<{
+  items?: Record<string, React.ReactNode> | ReadonlyArray<{
     label: React.ReactNode;
     value: any;
-  }>) | undefined;
+  }> | ReadonlyArray<Group<any>> | undefined;
   /**
    * When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger.
    * If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.
@@ -125,11 +126,11 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
    *
    * To render a controlled select, use the `value` prop instead.
    */
-  defaultValue?: (SelectValueType<Value, Multiple> | null) | undefined;
+  defaultValue?: SelectValueType<Value, Multiple> | null | undefined;
   /**
    * The value of the select. Use when controlled.
    */
-  value?: (SelectValueType<Value, Multiple> | null) | undefined;
+  value?: SelectValueType<Value, Multiple> | null | undefined;
   /**
    * Event handler called when the value of the select changes.
    */

package/select/root/SelectRoot.js

@@ -120,11 +120,11 @@ function SelectRoot(props) {
   } = (0, _useTransitionStatus.useTransitionStatus)(open);
   const {
     openMethod,
-    triggerProps: interactionTypeProps,
-    reset: resetOpenInteractionType
+    triggerProps: interactionTypeProps
   } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
   const store = (0, _useRefWithInit.useRefWithInit)(() => new _store.Store({
     id: generatedId,
+    labelId: undefined,
     modal,
     multiple,
     itemToStringLabel,
@@ -242,7 +242,6 @@ function SelectRoot(props) {
   const handleUnmount = (0, _useStableCallback.useStableCallback)(() => {
     setMounted(false);
     store.set('activeIndex', null);
-    resetOpenInteractionType();
     onOpenChangeComplete?.(false);
   });
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
@@ -326,8 +325,6 @@ function SelectRoot(props) {
       }
     },
     onTypingChange(typing) {
-      // FIXME: Floating UI doesn't support allowing space to select an item while the popup is
-      // closed and the trigger isn't a native <button>.
       typingRef.current = typing;
     }
   });
@@ -398,6 +395,7 @@ function SelectRoot(props) {
   }), [store, name, required, disabled, readOnly, multiple, itemToStringLabel, itemToStringValue, highlightItemOnHover, setValue, setOpen, getItemProps, floatingContext.context.events, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
   const ref = (0, _useMergedRefs.useMergedRefs)(inputRef, validation.inputRef);
   const hasMultipleSelection = multiple && Array.isArray(value) && value.length > 0;
+  const hiddenInputName = multiple ? undefined : name;
   const hiddenInputs = React.useMemo(() => {
     if (!multiple || !Array.isArray(value) || !name) {
       return null;
@@ -459,7 +457,8 @@ function SelectRoot(props) {
             queueMicrotask(handleChange);
           }
         }),
-        name: multiple ? undefined : name,
+        id: generatedId && hiddenInputName == null ? `${generatedId}-hidden-input` : undefined,
+        name: hiddenInputName,
         autoComplete: autoComplete,
         value: serializedValue,
         disabled: disabled,

package/select/scroll-arrow/SelectScrollArrow.d.ts

@@ -7,12 +7,24 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  */
 export declare const SelectScrollArrow: React.ForwardRefExoticComponent<Omit<SelectScrollArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollArrowState {
+  /**
+   * The direction of the element.
+   */
   direction: 'up' | 'down';
+  /**
+   * Whether the element is visible.
+   */
   visible: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side | 'none';
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface SelectScrollArrowProps extends BaseUIComponentProps<'div', SelectScrollArrow.State> {
+export interface SelectScrollArrowProps extends BaseUIComponentProps<'div', SelectScrollArrowState> {
   direction: 'up' | 'down';
   /**
    * Whether to keep the HTML element in the DOM while the select popup is not scrollable.

package/select/scroll-down-arrow/SelectScrollDownArrow.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const SelectScrollDownArrow: React.ForwardRefExoticComponent<Omit<SelectScrollDownArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollDownArrowState {}
-export interface SelectScrollDownArrowProps extends BaseUIComponentProps<'div', SelectScrollDownArrow.State> {
+export interface SelectScrollDownArrowProps extends BaseUIComponentProps<'div', SelectScrollDownArrowState> {
   /**
    * Whether to keep the HTML element in the DOM while the select popup is not scrollable.
    * @default false

package/select/scroll-up-arrow/SelectScrollUpArrow.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const SelectScrollUpArrow: React.ForwardRefExoticComponent<Omit<SelectScrollUpArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollUpArrowState {}
-export interface SelectScrollUpArrowProps extends BaseUIComponentProps<'div', SelectScrollUpArrow.State> {
+export interface SelectScrollUpArrowProps extends BaseUIComponentProps<'div', SelectScrollUpArrowState> {
   /**
    * Whether to keep the HTML element in the DOM while the select popup is not scrollable.
    * @default false

package/select/store.d.ts

@@ -2,14 +2,16 @@ import { Store } from '@base-ui/utils/store';
 import { type InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 import type { TransitionStatus } from "../utils/useTransitionStatus.js";
 import type { HTMLProps } from "../utils/types.js";
+import { type Group } from "../utils/resolveValueLabel.js";
 export type State = {
   id: string | undefined;
+  labelId: string | undefined;
   modal: boolean;
   multiple: boolean;
   items: Record<string, React.ReactNode> | ReadonlyArray<{
     label: React.ReactNode;
     value: any;
-  }> | undefined;
+  }> | ReadonlyArray<Group<any>> | undefined;
   itemToStringLabel: ((item: any) => string) | undefined;
   itemToStringValue: ((item: any) => string) | undefined;
   isItemEqualToValue: (itemValue: any, selectedValue: any) => boolean;
@@ -33,9 +35,10 @@ export type State = {
 export type SelectStore = Store<State>;
 export declare const selectors: {
   id: (state: State) => string | undefined;
+  labelId: (state: State) => string | undefined;
   modal: (state: State) => boolean;
   multiple: (state: State) => boolean;
-  items: (state: State) => Record<string, import("react").ReactNode> | readonly {
+  items: (state: State) => readonly Group<any>[] | Record<string, import("react").ReactNode> | readonly {
     label: React.ReactNode;
     value: any;
   }[] | undefined;

package/select/store.js

@@ -9,6 +9,7 @@ var _itemEquality = require("../utils/itemEquality");
 var _resolveValueLabel = require("../utils/resolveValueLabel");
 const selectors = exports.selectors = {
   id: (0, _store.createSelector)(state => state.id),
+  labelId: (0, _store.createSelector)(state => state.labelId),
   modal: (0, _store.createSelector)(state => state.modal),
   multiple: (0, _store.createSelector)(state => state.multiple),
   items: (0, _store.createSelector)(state => state.items),

package/select/trigger/SelectTrigger.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 /**
  * A button that opens the select popup.
  * Renders a `<button>` element.
@@ -8,7 +8,7 @@ import type { FieldRoot } from "../../field/root/FieldRoot.js";
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
 export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface SelectTriggerState extends FieldRoot.State {
+export interface SelectTriggerState extends FieldRootState {
   /**
    * Whether the select popup is currently open.
    */
@@ -26,9 +26,11 @@ export interface SelectTriggerState extends FieldRoot.State {
    */
   placeholder: boolean;
 }
-export interface SelectTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', SelectTrigger.State> {
+export interface SelectTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', SelectTriggerState> {
   children?: React.ReactNode;
-  /** Whether the component should ignore user interaction. */
+  /**
+   * Whether the component should ignore user interaction.
+   */
   disabled?: boolean | undefined;
 }
 export declare namespace SelectTrigger {

package/select/trigger/SelectTrigger.js

@@ -27,6 +27,7 @@ var _useButton = require("../../use-button");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
+var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
 const BOUNDARY_OFFSET = 2;
 const SELECTED_DELAY = 400;
 const UNSELECTED_DELAY = 200;
@@ -59,7 +60,7 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
     disabled: fieldDisabled
   } = (0, _FieldRootContext.useFieldRootContext)();
   const {
-    labelId
+    labelId: fieldLabelId
   } = (0, _LabelableContext.useLabelableContext)();
   const {
     store,
@@ -79,10 +80,12 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
   const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
   const listElement = (0, _store.useStore)(store, _store2.selectors.listElement);
   const rootId = (0, _store.useStore)(store, _store2.selectors.id);
+  const selectLabelId = (0, _store.useStore)(store, _store2.selectors.labelId);
   const hasSelectedValue = (0, _store.useStore)(store, _store2.selectors.hasSelectedValue);
   const shouldCheckNullItemLabel = !hasSelectedValue && open;
   const hasNullItemLabel = (0, _store.useStore)(store, _store2.selectors.hasNullItemLabel, shouldCheckNullItemLabel);
   const id = idProp ?? rootId;
+  const ariaLabelledBy = (0, _resolveAriaLabelledBy.resolveAriaLabelledBy)(fieldLabelId, selectLabelId);
   (0, _useLabelableId.useLabelableId)({
     id
   });
@@ -148,7 +151,7 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
     'aria-expanded': open ? 'true' : 'false',
     'aria-haspopup': 'listbox',
     'aria-controls': open ? ariaControlsId : undefined,
-    'aria-labelledby': labelId,
+    'aria-labelledby': ariaLabelledBy,
     'aria-readonly': readOnly || undefined,
     'aria-required': required || undefined,
     tabIndex: disabled ? -1 : 0,

package/select/value/SelectValue.d.ts

@@ -17,7 +17,7 @@ export interface SelectValueState {
    */
   placeholder: boolean;
 }
-export interface SelectValueProps extends Omit<BaseUIComponentProps<'span', SelectValue.State>, 'children'> {
+export interface SelectValueProps extends Omit<BaseUIComponentProps<'span', SelectValueState>, 'children'> {
   /**
    * Accepts a function that returns a `ReactNode` to format the selected value.
    * @example

package/separator/Separator.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps, Orientation } from "../utils/types.js";
  * Documentation: [Base UI Separator](https://base-ui.com/react/components/separator)
  */
 export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface SeparatorProps extends BaseUIComponentProps<'div', Separator.State> {
+export interface SeparatorProps extends BaseUIComponentProps<'div', SeparatorState> {
   /**
    * The orientation of the separator.
    * @default 'horizontal'

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

@@ -81,7 +81,6 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
   const {
     disabled,
     dragging,
-    validation,
     inset,
     lastChangedValueRef,
     lastChangeReasonRef,
@@ -277,7 +276,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)) {

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/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,63 @@
+"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,
+    ...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,7 +55,7 @@ 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.
    *
@@ -115,7 +121,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 +131,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

@@ -25,6 +25,7 @@ var _useField = require("../../field/useField");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
 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");
@@ -76,6 +77,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     ...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 +94,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;
 
@@ -255,6 +258,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     indicatorPosition,
     inset: thumbAlignment !== 'center',
     labelId: ariaLabelledby,
+    rootLabelId: defaultLabelId,
     largeStep,
     lastUsedThumbIndex,
     lastChangedValueRef,
@@ -275,6 +279,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     setActive,
     setDragging,
     setIndicatorPosition,
+    setLabelId,
     setValue,
     state,
     step,
@@ -282,7 +287,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, 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.
@@ -66,11 +67,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>;