WIP tests

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

@@ -17,11 +17,16 @@ const SliderRoot = React.forwardRef(function SliderRoot(
   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

@@ -180,7 +180,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 TabsContext
+    ],
+  }));
+});

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/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.tsx

@@ -22,13 +22,16 @@ const SliderTrack = React.forwardRef(function SliderTrack(
 
   const mergedRef = useRenderPropForkRef(render, forwardedRef);
 
-  const { disabled, ownerState } = useSliderContext('Track');
+  const { disabled, dragging, ownerState } = useSliderContext('Track');
 
   const { getRootProps } = useSliderTrack({
     rootRef: mergedRef,
   });
 
-  const styleHooks = React.useMemo(() => getStyleHookProps({ disabled }), [disabled]);
+  const styleHooks = React.useMemo(
+    () => getStyleHookProps({ disabled, dragging }),
+    [disabled, dragging],
+  );
 
   const trackProps = getRootProps({
     ...styleHooks,

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

@@ -2,3 +2,16 @@ import { BaseUIComponentProps } from '../../utils/BaseUI.types';
 import { SliderRootOwnerState } from '../Root/SliderRoot.types';
 
 export interface SliderTrackProps extends BaseUIComponentProps<'div', SliderRootOwnerState> {}
+
+export interface UseSliderTrackParameters {
+  /**
+   * The ref attached to the track of the Slider.
+   */
+  rootRef?: React.Ref<Element>;
+}
+
+export interface UseSliderTrackReturnValue {
+  getRootProps: (
+    externalProps?: React.ComponentPropsWithRef<'div'>,
+  ) => React.ComponentPropsWithRef<'div'>;
+}

packages/mui-base/src/Slider2/SliderTrack/useSliderTrack.ts

@@ -6,10 +6,11 @@ import { useSliderContext } from '../Root/SliderContext';
 import { useEventCallback } from '../../utils/useEventCallback';
 import { roundValueToStep, valueToPercent } from '../utils';
 import { areValuesEqual, focusThumb, trackFinger } from '../Root/useSliderRoot';
+import { UseSliderTrackParameters, UseSliderTrackReturnValue } from './SliderTrack.types';
 
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 
-export function useSliderTrack(parameters: any) {
+export function useSliderTrack(parameters: UseSliderTrackParameters): UseSliderTrackReturnValue {
   const { rootRef: externalRef } = parameters;
 
   const trackRef = React.useRef<HTMLElement>(null);

packages/mui-base/src/Slider2/index.barrel.ts

@@ -1,12 +1,17 @@
 export { Slider } from './Root/SliderRoot';
-export {
+export type {
   SliderRootOwnerState,
   SliderRootProps,
   UseSliderParameters,
   UseSliderReturnValue,
 } from './Root/SliderRoot.types';
 export { useSliderRoot } from './Root/useSliderRoot';
 export { SliderContext, type SliderContextValue, useSliderContext } from './Root/SliderContext';
+export {
+  SliderProvider,
+  type SliderProviderValue,
+  type SliderProviderProps,
+} from './Root/SliderProvider';
 
 export { SliderThumb } from './SliderThumb/SliderThumb';
 export type {

packages/mui-base/src/Slider2/index.ts

@@ -7,6 +7,11 @@ export {
 } from './Root/SliderRoot.types';
 export { useSliderRoot } from './Root/useSliderRoot';
 export { SliderContext, type SliderContextValue, useSliderContext } from './Root/SliderContext';
+export {
+  SliderProvider,
+  type SliderProviderValue,
+  type SliderProviderProps,
+} from './Root/SliderProvider';
 
 export { SliderThumb as Thumb } from './SliderThumb/SliderThumb';
 export type {