Add tests

packages/mui-base/src/Slider2/Root/SliderRoot.tsx

@@ -8,20 +8,25 @@ import { useSliderRoot } from './useSliderRoot';
 import { SliderProvider } from './SliderProvider';
 import { SliderRootProps, SliderRootOwnerState } from './SliderRoot.types';
 
-function defaultRender(props: React.ComponentPropsWithRef<'div'>) {
-  return <div {...props} />;
+function defaultRender(props: React.ComponentPropsWithRef<'span'>) {
+  return <span {...props} />;
 }
 
 const SliderRoot = React.forwardRef(function SliderRoot(
   props: SliderRootProps,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
+    'aria-labelledby': ariaLabelledby,
     className,
     defaultValue,
     disabled = false,
+    isRtl,
+    largeStep,
     render: renderProp,
     onValueChange,
+    onValueCommitted,
+    orientation,
     value,
     ...otherProps
   } = props;
@@ -31,9 +36,14 @@ const SliderRoot = React.forwardRef(function SliderRoot(
   const mergedRef = useRenderPropForkRef(render, forwardedRef);
 
   const { getRootProps, ...slider } = useSliderRoot({
+    'aria-labelledby': ariaLabelledby,
     defaultValue,
     disabled,
+    isRtl,
+    largeStep,
     onValueChange,
+    onValueCommitted,
+    orientation,
     rootRef: mergedRef,
     value,
     ...otherProps,

packages/mui-base/src/Slider2/Root/SliderRoot.types.ts

@@ -17,7 +17,10 @@ export interface SliderRootOwnerState {
 
 export interface SliderRootProps
   extends UseSliderParameters,
-    Omit<BaseUIComponentProps<'div', SliderRootOwnerState>, 'defaultValue' | 'onChange' | 'value'> {
+    Omit<
+      BaseUIComponentProps<'span', SliderRootOwnerState>,
+      'defaultValue' | 'onChange' | 'value'
+    > {
   /**
    * The default value of the slider. Use when the component is not controlled.
    */
@@ -166,8 +169,8 @@ export interface AxisProps<T extends Axis> {
 
 export interface UseSliderReturnValue {
   getRootProps: (
-    externalProps?: React.ComponentPropsWithRef<'div'>,
-  ) => React.ComponentPropsWithRef<'div'>;
+    externalProps?: React.ComponentPropsWithRef<'span'>,
+  ) => React.ComponentPropsWithRef<'span'>;
   /**
    * The index of the active thumb.
    */
@@ -180,7 +183,7 @@ export interface UseSliderReturnValue {
   /**
    * Returns the `offset` and `leap` methods to calculate the positioning styles based on the slider axis.
    */
-  axisProps: { [key in Axis]: AxisProps<key> };
+  axisProps?: { [key in Axis]: AxisProps<key> };
   changeValue: (
     valueInput: number,
     index: number,

packages/mui-base/src/Slider2/SliderOutput/SliderOutput.test.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { createRenderer } from '@mui/internal-test-utils';
+import * as Slider from '@base_ui/react/Slider2';
+import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider2';
+import { describeConformance } from '../../../test/describeConformance';
+
+const NOOP = () => {};
+
+describe('<Slider.Output />', () => {
+  const { render } = createRenderer();
+
+  const testProviderValue: SliderProviderValue = {
+    active: -1,
+    axis: 'horizontal',
+    changeValue: NOOP,
+    compoundComponentContextValue: {
+      registerItem: () => ({ id: 0, deregister: () => {} }),
+      getItemIndex: () => 0,
+      totalSubitemCount: 1,
+    },
+    dragging: false,
+    disabled: false,
+    getFingerNewValue: () => ({
+      newValue: 0,
+      activeIndex: 0,
+      newValuePercent: 0,
+    }),
+    handleValueChange: NOOP,
+    isRtl: false,
+    largeStep: 10,
+    max: 100,
+    min: 0,
+    open: -1,
+    orientation: 'horizontal',
+    ownerState: {
+      disabled: false,
+      min: 0,
+      max: 100,
+      value: 0,
+    },
+    scale: (val) => val,
+    setActive: NOOP,
+    setDragging: NOOP,
+    setOpen: NOOP,
+    setValueState: NOOP,
+    subitems: new Map(),
+    valueState: 0,
+    value: [0],
+  };
+
+  describeConformance(<Slider.Output />, () => ({
+    inheritComponent: 'output',
+    render: (node) => {
+      const { container, ...other } = render(
+        <SliderProvider value={testProviderValue}>{node}</SliderProvider>,
+      );
+
+      return { container, ...other };
+    },
+    refInstanceof: window.HTMLOutputElement,
+    skip: [
+      'reactTestRenderer', // Need to be wrapped with SliderProvider
+    ],
+  }));
+});

packages/mui-base/src/Slider2/SliderOutput/SliderOutput.tsx

@@ -20,7 +20,7 @@ const SliderOutput = React.forwardRef(function SliderOutput(
 
   const render = renderProp ?? defaultRender;
 
-  const { disabled, ownerState, value } = useSliderContext('Output');
+  const { disabled, dragging, ownerState, value } = useSliderContext('Output');
 
   const mergedRef = useRenderPropForkRef(render, forwardedRef);
 
@@ -30,7 +30,10 @@ const SliderOutput = React.forwardRef(function SliderOutput(
     rootRef: mergedRef,
   });
 
-  const styleHooks = React.useMemo(() => getStyleHookProps({ disabled }), [disabled]);
+  const styleHooks = React.useMemo(
+    () => getStyleHookProps({ disabled, dragging }),
+    [disabled, dragging],
+  );
 
   const outputProps = getRootProps({
     children: valueDisplay,

packages/mui-base/src/Slider2/SliderOutput/useSliderOutput.ts

@@ -5,7 +5,7 @@ import { useSliderContext } from '../Root/SliderContext';
 import { UseSliderOutputParameters, UseSliderOutputReturnValue } from './SliderOutput.types';
 
 function useSliderOutput(parameters: UseSliderOutputParameters): UseSliderOutputReturnValue {
-  const { 'aria-live': ariaLive = 'off' } = parameters;
+  const { 'aria-live': ariaLive = 'off', rootRef } = parameters;
 
   const { subitems } = useSliderContext('Output');
 
@@ -20,9 +20,11 @@ function useSliderOutput(parameters: UseSliderOutputParameters): UseSliderOutput
         // and also when the value is changing (but not yet committed)
         'aria-live': ariaLive,
         htmlFor: outputFor.trim(),
+        ref: rootRef,
+        ...externalProps,
       });
     },
-    [ariaLive, outputFor],
+    [ariaLive, outputFor, rootRef],
   );
 
   return React.useMemo(

packages/mui-base/src/Slider2/SliderThumb/SliderThumb.test.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { createRenderer } from '@mui/internal-test-utils';
+import * as Slider from '@base_ui/react/Slider2';
+import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider2';
+import { describeConformance } from '../../../test/describeConformance';
+
+const NOOP = () => {};
+
+describe('<Slider.Thumb />', () => {
+  const { render } = createRenderer();
+
+  const testProviderValue: SliderProviderValue = {
+    active: -1,
+    axis: 'horizontal',
+    changeValue: NOOP,
+    compoundComponentContextValue: {
+      registerItem: () => ({ id: 0, deregister: () => {} }),
+      getItemIndex: () => 0,
+      totalSubitemCount: 1,
+    },
+    dragging: false,
+    disabled: false,
+    getFingerNewValue: () => ({
+      newValue: 0,
+      activeIndex: 0,
+      newValuePercent: 0,
+    }),
+    handleValueChange: NOOP,
+    isRtl: false,
+    largeStep: 10,
+    max: 100,
+    min: 0,
+    open: -1,
+    orientation: 'horizontal',
+    ownerState: {
+      disabled: false,
+      min: 0,
+      max: 100,
+      value: 0,
+    },
+    scale: (val) => val,
+    setActive: NOOP,
+    setDragging: NOOP,
+    setOpen: NOOP,
+    setValueState: NOOP,
+    subitems: new Map(),
+    valueState: 0,
+    value: [0],
+  };
+
+  describeConformance(<Slider.Thumb />, () => ({
+    inheritComponent: 'span',
+    render: (node) => {
+      const { container, ...other } = render(
+        <SliderProvider value={testProviderValue}>{node}</SliderProvider>,
+      );
+
+      return { container, ...other };
+    },
+    refInstanceof: window.HTMLSpanElement,
+    skip: [
+      'reactTestRenderer', // Need to be wrapped with SliderProvider
+      'propsSpread', // TODO: fix after relocating the <input/>
+      'renderProp', // TODO: fix after relocating the <input/>
+    ],
+  }));
+});

packages/mui-base/src/Slider2/SliderThumb/SliderThumb.tsx

@@ -7,15 +7,15 @@ import { useSliderContext } from '../Root/SliderContext';
 import { SliderThumbProps } from './SliderThumb.types';
 import { useSliderThumb } from './useSliderThumb';
 
-function defaultRender(props: React.ComponentPropsWithRef<'div'>) {
-  return <div {...props} />;
+function defaultRender(props: React.ComponentPropsWithRef<'span'>) {
+  return <span {...props} />;
 }
 
 function NOOP() {}
 
 const SliderThumb = React.forwardRef(function SliderThumb(
   props: SliderThumbProps,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+  forwardedRef: React.ForwardedRef<HTMLSpanElement>,
 ) {
   const {
     render: renderProp,
@@ -55,10 +55,10 @@ const SliderThumb = React.forwardRef(function SliderThumb(
   const inputProps = getThumbInputProps({ disabled, onFocus, onBlur, onKeyDown });
 
   return (
-    <div {...thumbProps}>
+    <span {...thumbProps}>
       {children}
       <input {...inputProps} data-index={index} />
-    </div>
+    </span>
   );
 });
 

packages/mui-base/src/Slider2/SliderThumb/SliderThumb.types.ts

@@ -4,7 +4,7 @@ export type SliderThumbOwnerState = {};
 
 export interface SliderThumbProps
   extends UseSliderThumbParameters,
-    BaseUIComponentProps<'div', SliderThumbOwnerState> {
+    BaseUIComponentProps<'span', SliderThumbOwnerState> {
   onPointerLeave?: React.PointerEventHandler;
   onPointerOver?: React.PointerEventHandler;
   onBlur?: React.FocusEventHandler;
@@ -20,8 +20,8 @@ export interface UseSliderThumbParameters {
 
 export interface UseSliderThumbReturnValue {
   getRootProps: (
-    externalProps?: React.ComponentPropsWithRef<'div'>,
-  ) => React.ComponentPropsWithRef<'div'>;
+    externalProps?: React.ComponentPropsWithRef<'span'>,
+  ) => React.ComponentPropsWithRef<'span'>;
   getThumbInputProps: (
     externalProps?: React.ComponentPropsWithRef<'input'>,
   ) => React.ComponentPropsWithRef<'input'>;

packages/mui-base/src/Slider2/SliderThumb/useSliderThumb.ts

@@ -102,9 +102,12 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
         'aria-orientation': orientation,
         'aria-valuemax': scale(max),
         'aria-valuemin': scale(min),
+        'aria-valuenow': scale(thumbValue),
         disabled,
-        name,
         id: compoundItemId,
+        max,
+        min,
+        name,
         onChange(event: React.ChangeEvent) {
           // @ts-ignore
           changeValue(event.target.valueAsNumber, index, event);

packages/mui-base/src/Slider2/SliderTrack/SliderTrack.test.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { createRenderer } from '@mui/internal-test-utils';
+import * as Slider from '@base_ui/react/Slider2';
+import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider2';
+import { describeConformance } from '../../../test/describeConformance';
+
+const NOOP = () => {};
+
+describe('<Slider.Track />', () => {
+  const { render } = createRenderer();
+
+  const testProviderValue: SliderProviderValue = {
+    active: -1,
+    axis: 'horizontal',
+    changeValue: NOOP,
+    compoundComponentContextValue: {
+      registerItem: () => ({ id: 0, deregister: () => {} }),
+      getItemIndex: () => 0,
+      totalSubitemCount: 1,
+    },
+    dragging: false,
+    disabled: false,
+    getFingerNewValue: () => ({
+      newValue: 0,
+      activeIndex: 0,
+      newValuePercent: 0,
+    }),
+    handleValueChange: NOOP,
+    isRtl: false,
+    largeStep: 10,
+    max: 100,
+    min: 0,
+    open: -1,
+    orientation: 'horizontal',
+    ownerState: {
+      disabled: false,
+      min: 0,
+      max: 100,
+      value: 0,
+    },
+    scale: (val) => val,
+    setActive: NOOP,
+    setDragging: NOOP,
+    setOpen: NOOP,
+    setValueState: NOOP,
+    subitems: new Map(),
+    valueState: 0,
+    value: [0],
+  };
+
+  describeConformance(<Slider.Track />, () => ({
+    inheritComponent: 'span',
+    render: (node) => {
+      const { container, ...other } = render(
+        <SliderProvider value={testProviderValue}>{node}</SliderProvider>,
+      );
+
+      return { container, ...other };
+    },
+    refInstanceof: window.HTMLSpanElement,
+    skip: [
+      'reactTestRenderer', // Need to be wrapped with SliderProvider
+    ],
+  }));
+});