@base-ui/react 1.2.0 → 1.3.0

package/esm/select/popup/SelectPopup.js

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { rectToClientRect } from '@floating-ui/utils';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { isWebKit } from '@base-ui/utils/detectBrowser';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
@@ -10,7 +11,7 @@ import { isMouseWithinBounds } from '@base-ui/utils/isMouseWithinBounds';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStore } from '@base-ui/utils/store';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
-import { FloatingFocusManager } from "../../floating-ui-react/index.js";
+import { FloatingFocusManager, platform as floatingPlatform } from "../../floating-ui-react/index.js";
 import { useSelectFloatingContext, useSelectRootContext } from "../root/SelectRootContext.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { useSelectPositionerContext } from "../positioner/SelectPositionerContext.js";
@@ -244,8 +245,9 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
         const popupStyles = getComputedStyle(popupElement);
         const doc = ownerDocument(triggerElement);
         const win = ownerWindow(positionerElement);
-        const triggerRect = triggerElement.getBoundingClientRect();
-        const positionerRect = positionerElement.getBoundingClientRect();
+        const scale = getScale(triggerElement);
+        const triggerRect = normalizeRect(triggerElement.getBoundingClientRect(), scale);
+        const positionerRect = normalizeRect(positionerElement.getBoundingClientRect(), scale);
         const triggerX = triggerRect.left;
         const triggerHeight = triggerRect.height;
         const scroller = listElement || popupElement;
@@ -267,8 +269,8 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
         let offsetX = 0;
         let offsetY = 0;
         if (textElement && valueElement) {
-          const valueRect = valueElement.getBoundingClientRect();
-          textRect = textElement.getBoundingClientRect();
+          const valueRect = normalizeRect(valueElement.getBoundingClientRect(), scale);
+          textRect = normalizeRect(textElement.getBoundingClientRect(), scale);
           const valueLeftFromTriggerLeft = valueRect.left - triggerX;
           const textLeftFromPositionerLeft = textRect.left - positionerRect.left;
           const valueCenterFromPositionerTop = valueRect.top - triggerRect.top + valueRect.height / 2;
@@ -289,15 +291,15 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
         positionerElement.style.marginTop = `${marginTop}px`;
         positionerElement.style.marginBottom = `${marginBottom}px`;
         popupElement.style.height = '100%';
-        const maxScrollTop = scroller.scrollHeight - scroller.clientHeight;
-        const isTopPositioned = scrollTop >= maxScrollTop;
+        const maxScrollTop = getMaxScrollTop(scroller);
+        const isTopPositioned = scrollTop >= maxScrollTop - SCROLL_EPS_PX;
         if (isTopPositioned) {
           height = Math.min(viewportHeight, positionerRect.height) - (scrollTop - maxScrollTop);
         }
 
         // When the trigger is too close to the top or bottom of the viewport, or the minHeight is
         // reached, we fallback to aligning the popup to the trigger as the UX is poor otherwise.
-        const fallbackToAlignPopupToTrigger = triggerRect.top < triggerCollisionThreshold || triggerRect.bottom > viewportHeight - triggerCollisionThreshold || height < Math.min(scrollHeight, minHeight);
+        const fallbackToAlignPopupToTrigger = triggerRect.top < triggerCollisionThreshold || triggerRect.bottom > viewportHeight - triggerCollisionThreshold || Math.ceil(height) + SCROLL_EPS_PX < Math.min(scrollHeight, minHeight);
 
         // Safari doesn't position the popup correctly when pinch-zoomed.
         const isPinchZoomed = (win.visualViewport?.scale ?? 1) !== 1 && isWebKit;
@@ -311,7 +313,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
           const topOffset = Math.max(0, viewportHeight - idealHeight);
           positionerElement.style.top = positionerRect.height >= maxHeight ? '0' : `${topOffset}px`;
           positionerElement.style.height = `${height}px`;
-          scroller.scrollTop = scroller.scrollHeight - scroller.clientHeight;
+          scroller.scrollTop = getMaxScrollTop(scroller);
           initialHeightRef.current = Math.max(minHeight, height);
         } else {
           positionerElement.style.bottom = '0';
@@ -422,6 +424,18 @@ function getMaxPopupHeight(popupStyles) {
 function getMaxScrollTop(scroller) {
   return Math.max(0, scroller.scrollHeight - scroller.clientHeight);
 }
+function getScale(element) {
+  // The platform API is async-capable, but the DOM platform returns a plain scale object.
+  return floatingPlatform.getScale(element);
+}
+function normalizeRect(rect, scale) {
+  return rectToClientRect({
+    x: rect.x / scale.x,
+    y: rect.y / scale.y,
+    width: rect.width / scale.x,
+    height: rect.height / scale.y
+  });
+}
 const TRANSFORM_STYLE_RESETS = [['transform', 'none'], ['scale', '1'], ['translate', '0 0']];
 function unsetTransformStyles(popupElement) {
   const {

package/esm/select/portal/SelectPortal.d.ts

@@ -8,10 +8,9 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
 export declare const SelectPortal: React.ForwardRefExoticComponent<Omit<SelectPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SelectPortalState {}
+export interface SelectPortalProps extends FloatingPortal.Props<SelectPortalState> {}
 export declare namespace SelectPortal {
-  interface State {}
-}
-export interface SelectPortalProps extends FloatingPortal.Props<SelectPortal.State> {}
-export declare namespace SelectPortal {
+  type State = SelectPortalState;
   type Props = SelectPortalProps;
 }

package/esm/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/esm/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/esm/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/esm/select/root/SelectRoot.js

@@ -115,11 +115,11 @@ export function SelectRoot(props) {
   } = useTransitionStatus(open);
   const {
     openMethod,
-    triggerProps: interactionTypeProps,
-    reset: resetOpenInteractionType
+    triggerProps: interactionTypeProps
   } = useOpenInteractionType(open);
   const store = useRefWithInit(() => new Store({
     id: generatedId,
+    labelId: undefined,
     modal,
     multiple,
     itemToStringLabel,
@@ -237,7 +237,6 @@ export function SelectRoot(props) {
   const handleUnmount = useStableCallback(() => {
     setMounted(false);
     store.set('activeIndex', null);
-    resetOpenInteractionType();
     onOpenChangeComplete?.(false);
   });
   useOpenChangeComplete({
@@ -321,8 +320,6 @@ export 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;
     }
   });
@@ -393,6 +390,7 @@ export function SelectRoot(props) {
   }), [store, name, required, disabled, readOnly, multiple, itemToStringLabel, itemToStringValue, highlightItemOnHover, setValue, setOpen, getItemProps, floatingContext.context.events, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
   const ref = 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;
@@ -454,7 +452,8 @@ export 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/esm/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/esm/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/esm/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/esm/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/esm/select/store.js

@@ -3,6 +3,7 @@ import { compareItemEquality } from "../utils/itemEquality.js";
 import { hasNullItemLabel, stringifyAsValue } from "../utils/resolveValueLabel.js";
 export const selectors = {
   id: createSelector(state => state.id),
+  labelId: createSelector(state => state.labelId),
   modal: createSelector(state => state.modal),
   multiple: createSelector(state => state.multiple),
   items: createSelector(state => state.items),

package/esm/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/esm/select/trigger/SelectTrigger.js

@@ -21,6 +21,7 @@ import { useButton } from "../../use-button/index.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
+import { resolveAriaLabelledBy } from "../../utils/resolveAriaLabelledBy.js";
 const BOUNDARY_OFFSET = 2;
 const SELECTED_DELAY = 400;
 const UNSELECTED_DELAY = 200;
@@ -53,7 +54,7 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
     disabled: fieldDisabled
   } = useFieldRootContext();
   const {
-    labelId
+    labelId: fieldLabelId
   } = useLabelableContext();
   const {
     store,
@@ -73,10 +74,12 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
   const positionerElement = useStore(store, selectors.positionerElement);
   const listElement = useStore(store, selectors.listElement);
   const rootId = useStore(store, selectors.id);
+  const selectLabelId = useStore(store, selectors.labelId);
   const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
   const shouldCheckNullItemLabel = !hasSelectedValue && open;
   const hasNullItemLabel = useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
   const id = idProp ?? rootId;
+  const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, selectLabelId);
   useLabelableId({
     id
   });
@@ -142,7 +145,7 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
     '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/esm/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/esm/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/esm/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/esm/slider/control/SliderControl.js

@@ -75,7 +75,6 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
   const {
     disabled,
     dragging,
-    validation,
     inset,
     lastChangedValueRef,
     lastChangeReasonRef,
@@ -271,7 +270,6 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
     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, createGenericEventDetails(commitReason, nativeEvent));
     }
     if ('pointerType' in nativeEvent && controlRef.current?.hasPointerCapture(nativeEvent.pointerId)) {

package/esm/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/esm/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/esm/slider/index.parts.js

@@ -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/esm/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/esm/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/esm/slider/label/SliderLabel.js

@@ -0,0 +1,58 @@
+'use client';
+
+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 { useSliderRootContext } from "../root/SliderRootContext.js";
+import { sliderStateAttributesMapping } from "../root/stateAttributesMapping.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 const 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
+  } = useSliderRootContext();
+  function focusControl(event, controlId) {
+    if (controlId) {
+      const controlElement = ownerDocument(event.currentTarget).getElementById(controlId);
+      if (isHTMLElement(controlElement)) {
+        focusElementWithVisible(controlElement);
+        return;
+      }
+    }
+    const fallbackInputs = controlRef.current?.querySelectorAll('input[type="range"]');
+    const fallbackInput = fallbackInputs?.length === 1 ? fallbackInputs[0] : null;
+    if (isHTMLElement(fallbackInput)) {
+      focusElementWithVisible(fallbackInput);
+    }
+  }
+  const labelProps = useLabel({
+    id: rootLabelId,
+    setLabelId,
+    focusControl
+  });
+  return useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    state,
+    props: [labelProps, elementProps],
+    stateAttributesMapping: sliderStateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") SliderLabel.displayName = "SliderLabel";

package/esm/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.