@base-ui/react 1.1.0 → 1.3.0

package/select/root/SelectRoot.js

@@ -50,6 +50,7 @@ function SelectRoot(props) {
     defaultOpen = false,
     onOpenChange,
     name: nameProp,
+    autoComplete,
     disabled: disabledProp = false,
     readOnly = false,
     required = false,
@@ -119,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,
@@ -241,7 +242,6 @@ function SelectRoot(props) {
   const handleUnmount = (0, _useStableCallback.useStableCallback)(() => {
     setMounted(false);
     store.set('activeIndex', null);
-    resetOpenInteractionType();
     onOpenChangeComplete?.(false);
   });
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
@@ -325,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;
     }
   });
@@ -397,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;
@@ -458,7 +457,9 @@ 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,
         required: required && !hasMultipleSelection,

package/select/root/SelectRootContext.d.ts

@@ -14,30 +14,30 @@ export interface SelectRootContext {
   highlightItemOnHover: boolean;
   setValue: (nextValue: any, eventDetails: SelectRoot.ChangeEventDetails) => void;
   setOpen: (open: boolean, eventDetails: SelectRoot.ChangeEventDetails) => void;
-  listRef: React.MutableRefObject<Array<HTMLElement | null>>;
-  popupRef: React.MutableRefObject<HTMLDivElement | null>;
-  scrollHandlerRef: React.MutableRefObject<((el: HTMLDivElement) => void) | null>;
+  listRef: React.RefObject<Array<HTMLElement | null>>;
+  popupRef: React.RefObject<HTMLDivElement | null>;
+  scrollHandlerRef: React.RefObject<((el: HTMLDivElement) => void) | null>;
   handleScrollArrowVisibility: () => void;
   scrollArrowsMountedCountRef: React.RefObject<number>;
   getItemProps: (props?: HTMLProps & {
-    active?: boolean;
-    selected?: boolean;
+    active?: boolean | undefined;
+    selected?: boolean | undefined;
   }) => Record<string, unknown>;
   events: FloatingEvents;
-  valueRef: React.MutableRefObject<HTMLSpanElement | null>;
-  valuesRef: React.MutableRefObject<Array<any>>;
-  labelsRef: React.MutableRefObject<Array<string | null>>;
-  typingRef: React.MutableRefObject<boolean>;
-  selectionRef: React.MutableRefObject<{
+  valueRef: React.RefObject<HTMLSpanElement | null>;
+  valuesRef: React.RefObject<Array<any>>;
+  labelsRef: React.RefObject<Array<string | null>>;
+  typingRef: React.RefObject<boolean>;
+  selectionRef: React.RefObject<{
     allowUnselectedMouseUp: boolean;
     allowSelectedMouseUp: boolean;
   }>;
-  selectedItemTextRef: React.MutableRefObject<HTMLSpanElement | null>;
+  selectedItemTextRef: React.RefObject<HTMLSpanElement | null>;
   validation: UseFieldValidationReturnValue;
-  onOpenChangeComplete?: (open: boolean) => void;
-  keyboardActiveRef: React.MutableRefObject<boolean>;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
+  keyboardActiveRef: React.RefObject<boolean>;
   alignItemWithTriggerActiveRef: React.RefObject<boolean>;
-  initialValueRef: React.MutableRefObject<any>;
+  initialValueRef: React.RefObject<any>;
 }
 export declare const SelectRootContext: React.Context<SelectRootContext | null>;
 export declare const SelectFloatingContext: React.Context<import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore | null>;

package/select/root/SelectRootContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

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

@@ -7,18 +7,30 @@ 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.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace SelectScrollArrow {
   type State = SelectScrollArrowState;

package/select/scroll-arrow/SelectScrollArrow.js

@@ -72,12 +72,12 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
       }
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     direction,
     visible,
     side,
     transitionStatus
-  }), [direction, visible, side, transitionStatus]);
+  };
   const defaultProps = {
     'aria-hidden': true,
     children: direction === 'up' ? '▲' : '▼',

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

@@ -8,12 +8,12 @@ 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
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace SelectScrollDownArrow {
   type State = SelectScrollDownArrowState;

package/select/scroll-down-arrow/SelectScrollDownArrowDataAttributes.js

@@ -27,6 +27,6 @@ let SelectScrollDownArrowDataAttributes = exports.SelectScrollDownArrowDataAttri
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  SelectScrollDownArrowDataAttributes["side"] = "data-side";
+  SelectScrollDownArrowDataAttributes[SelectScrollDownArrowDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   return SelectScrollDownArrowDataAttributes;
 }({});

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

@@ -8,12 +8,12 @@ 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
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace SelectScrollUpArrow {
   type State = SelectScrollUpArrowState;

package/select/scroll-up-arrow/SelectScrollUpArrowDataAttributes.js

@@ -27,6 +27,6 @@ let SelectScrollUpArrowDataAttributes = exports.SelectScrollUpArrowDataAttribute
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  SelectScrollUpArrowDataAttributes["side"] = "data-side";
+  SelectScrollUpArrowDataAttributes[SelectScrollUpArrowDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   return SelectScrollUpArrowDataAttributes;
 }({});

package/select/store.d.ts

@@ -2,17 +2,19 @@ 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: (item: any, value: any) => boolean;
+  isItemEqualToValue: (itemValue: any, selectedValue: any) => boolean;
   value: any;
   open: boolean;
   mounted: boolean;
@@ -33,15 +35,16 @@ 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;
   itemToStringLabel: (state: State) => ((item: any) => string) | undefined;
   itemToStringValue: (state: State) => ((item: any) => string) | undefined;
-  isItemEqualToValue: (state: State) => (item: any, value: any) => boolean;
+  isItemEqualToValue: (state: State) => (itemValue: any, selectedValue: any) => boolean;
   value: (state: State) => any;
   hasSelectedValue: (state: State) => boolean;
   hasNullItemLabel: (state: State, enabled: boolean) => boolean;
@@ -53,7 +56,7 @@ export declare const selectors: {
   activeIndex: (state: State) => number | null;
   selectedIndex: (state: State) => number | null;
   isActive: (state: State, index: number) => boolean;
-  isSelected: (state: State, index: number, candidate: any) => boolean;
+  isSelected: (state: State, index: number, itemValue: any) => boolean;
   isSelectedByFocus: (state: State, index: number) => boolean;
   popupProps: (state: State) => HTMLProps;
   triggerProps: (state: State) => HTMLProps;

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),
@@ -41,11 +42,11 @@ const selectors = exports.selectors = {
   activeIndex: (0, _store.createSelector)(state => state.activeIndex),
   selectedIndex: (0, _store.createSelector)(state => state.selectedIndex),
   isActive: (0, _store.createSelector)((state, index) => state.activeIndex === index),
-  isSelected: (0, _store.createSelector)((state, index, candidate) => {
+  isSelected: (0, _store.createSelector)((state, index, itemValue) => {
     const comparer = state.isItemEqualToValue;
     const storeValue = state.value;
     if (state.multiple) {
-      return Array.isArray(storeValue) && storeValue.some(item => (0, _itemEquality.compareItemEquality)(item, candidate, comparer));
+      return Array.isArray(storeValue) && storeValue.some(selectedItem => (0, _itemEquality.compareItemEquality)(itemValue, selectedItem, comparer));
     }
 
     // `selectedIndex` is only updated after the items mount for the first time,
@@ -53,7 +54,7 @@ const selectors = exports.selectors = {
     if (state.selectedIndex === index && state.selectedIndex !== null) {
       return true;
     }
-    return (0, _itemEquality.compareItemEquality)(storeValue, candidate, comparer);
+    return (0, _itemEquality.compareItemEquality)(itemValue, storeValue, comparer);
   }),
   isSelectedByFocus: (0, _store.createSelector)((state, index) => {
     return state.selectedIndex === index;

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,10 +26,12 @@ 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. */
-  disabled?: boolean;
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled?: boolean | undefined;
 }
 export declare namespace SelectTrigger {
   type State = SelectTriggerState;

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,
@@ -221,14 +224,14 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
   // ensure nested useButton does not overwrite the combobox role:
   // <Toolbar.Button render={<Select.Trigger />} />
   props.role = 'combobox';
-  const state = React.useMemo(() => ({
+  const state = {
     ...fieldState,
     open,
     disabled,
     value,
     readOnly,
     placeholder: !hasSelectedValue
-  }), [fieldState, open, disabled, value, readOnly, hasSelectedValue]);
+  };
   return (0, _useRenderElement.useRenderElement)('button', componentProps, {
     ref: [forwardedRef, triggerRef],
     state,

package/select/value/SelectValue.d.ts

@@ -12,8 +12,12 @@ export interface SelectValueState {
    * The value of the currently selected item.
    */
   value: any;
+  /**
+   * Whether the placeholder is being displayed.
+   */
+  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/select/value/SelectValue.js

@@ -40,10 +40,10 @@ const SelectValue = exports.SelectValue = /*#__PURE__*/React.forwardRef(function
   const hasSelectedValue = (0, _store.useStore)(store, _store2.selectors.hasSelectedValue);
   const shouldCheckNullItemLabel = !hasSelectedValue && placeholder != null && childrenProp == null;
   const hasNullLabel = (0, _store.useStore)(store, _store2.selectors.hasNullItemLabel, shouldCheckNullItemLabel);
-  const state = React.useMemo(() => ({
+  const state = {
     value,
     placeholder: !hasSelectedValue
-  }), [value, hasSelectedValue]);
+  };
   let children = null;
   if (typeof childrenProp === 'function') {
     children = childrenProp(value);

package/separator/Separator.d.ts

@@ -7,12 +7,12 @@ 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'
    */
-  orientation?: Orientation;
+  orientation?: Orientation | undefined;
 }
 export interface SeparatorState {
   /**

package/separator/Separator.js

@@ -21,9 +21,9 @@ const Separator = exports.Separator = /*#__PURE__*/React.forwardRef(function Sep
     orientation = 'horizontal',
     ...elementProps
   } = componentProps;
-  const state = React.useMemo(() => ({
+  const state = {
     orientation
-  }), [orientation]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,

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";