@mui/material 7.0.0-beta.3 → 7.0.0-rc.0

package/Accordion/Accordion.d.ts

@@ -4,9 +4,14 @@ import { Theme } from "../index.js";
 import { TransitionProps } from "../transitions/transition.js";
 import { AccordionClasses } from "./accordionClasses.js";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
-import { ExtendPaperTypeMap } from "../Paper/Paper.js";
+import { ExtendPaperTypeMap, PaperProps } from "../Paper/Paper.js";
 import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from "../utils/types.js";
 export interface AccordionSlots {
+  /**
+   * The component that renders the root.
+   * @default Paper
+   */
+  root: React.ElementType;
   /**
    * The component that renders the heading.
    * @default 'h3'
@@ -19,9 +24,15 @@ export interface AccordionSlots {
    */
   transition: React.ElementType;
 }
-export interface AccordionTransitionSlotPropsOverrides {}
+export interface AccordionRootSlotPropsOverrides {}
 export interface AccordionHeadingSlotPropsOverrides {}
+export interface AccordionTransitionSlotPropsOverrides {}
 export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<AccordionSlots, {
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the Paper element.
+   */
+  root: SlotProps<React.ElementType<PaperProps>, AccordionRootSlotPropsOverrides, AccordionOwnerState>;
   /**
    * Props forwarded to the heading slot.
    * By default, the avaible props are based on the h3 element.

package/Accordion/Accordion.js

@@ -192,6 +192,20 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     slots: backwardCompatibleSlots,
     slotProps: backwardCompatibleSlotProps
   };
+  const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
+    elementType: AccordionRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    className: (0, _clsx.default)(classes.root, className),
+    shouldForwardComponentProp: true,
+    ownerState,
+    ref,
+    additionalProps: {
+      square
+    }
+  });
   const [AccordionHeadingSlot, accordionProps] = (0, _useSlot.default)('heading', {
     elementType: AccordionHeading,
     externalForwardedProps,
@@ -203,12 +217,8 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     externalForwardedProps,
     ownerState
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AccordionRoot, {
-    className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
-    ownerState: ownerState,
-    square: square,
-    ...other,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
+    ...rootProps,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionHeadingSlot, {
       ...accordionProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AccordionContext.default.Provider, {
@@ -288,6 +298,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    */
   slotProps: _propTypes.default.shape({
     heading: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
@@ -296,6 +307,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    */
   slots: _propTypes.default.shape({
     heading: _propTypes.default.elementType,
+    root: _propTypes.default.elementType,
     transition: _propTypes.default.elementType
   }),
   /**

package/AccordionSummary/AccordionSummary.d.ts

@@ -1,13 +1,47 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
+import { ButtonBaseProps, ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
 import { OverrideProps } from "../OverridableComponent/index.js";
-import { Theme } from "../index.js";
+import { CreateSlotsAndSlotProps, SlotProps, Theme } from "../index.js";
 import { AccordionSummaryClasses } from "./accordionSummaryClasses.js";
-export interface AccordionSummaryOwnProps {
+export interface AccordionSummarySlots {
   /**
-   * The content of the component.
+   * The component that renders the root slot.
+   * @default ButtonBase
    */
+  root: React.ElementType;
+  /**
+   * The component that renders the content slot.
+   * @default div
+   */
+  content: React.ElementType;
+  /**
+   * The component that renders the expand icon wrapper slot.
+   * @default div
+   */
+  expandIconWrapper: React.ElementType;
+}
+export interface AccordionSummaryRootSlotPropsOverrides {}
+export interface AccordionSummaryContentSlotPropsOverrides {}
+export interface AccordionSummaryExpandIconWrapperSlotPropsOverrides {}
+export type AccordionSummarySlotsAndSlotProps = CreateSlotsAndSlotProps<AccordionSummarySlots, {
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the [ButtonBase](https://mui.com/material-ui/api/button-base/#props) component.
+   */
+  root: SlotProps<React.ElementType<ButtonBaseProps>, AccordionSummaryRootSlotPropsOverrides, AccordionSummaryOwnerState>;
+  /**
+   * Props forwarded to the content slot.
+   * By default, the avaible props are based on a div element.
+   */
+  content: SlotProps<'div', AccordionSummaryContentSlotPropsOverrides, AccordionSummaryOwnerState>;
+  /**
+   * Props forwarded to the expand icon wrapper slot.
+   * By default, the avaible props are based on a div element.
+   */
+  expandIconWrapper: SlotProps<'div', AccordionSummaryExpandIconWrapperSlotPropsOverrides, AccordionSummaryOwnerState>;
+}>;
+export interface AccordionSummaryOwnProps extends AccordionSummarySlotsAndSlotProps {
   children?: React.ReactNode;
   /**
    * Override or extend the styles applied to the component.
@@ -26,6 +60,7 @@ export type AccordionSummaryTypeMap<AdditionalProps = {}, RootComponent extends
   props: AdditionalProps & AccordionSummaryOwnProps;
   defaultComponent: RootComponent;
 }>;
+export interface AccordionSummaryOwnerState extends Omit<AccordionSummaryProps, 'slots' | 'slotProps'> {}
 
 /**
  *

package/AccordionSummary/AccordionSummary.js

@@ -17,6 +17,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _AccordionContext = _interopRequireDefault(require("../Accordion/AccordionContext"));
 var _accordionSummaryClasses = _interopRequireWildcard(require("./accordionSummaryClasses"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -119,6 +120,8 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary
     expandIcon,
     focusVisibleClassName,
     onClick,
+    slots,
+    slotProps,
     ...other
   } = props;
   const {
@@ -142,24 +145,54 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary
     disableGutters
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AccordionSummaryRoot, {
-    focusRipple: false,
-    disableRipple: true,
-    disabled: disabled,
-    "aria-expanded": expanded,
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
+    ref,
+    shouldForwardComponentProp: true,
     className: (0, _clsx.default)(classes.root, className),
-    focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),
-    onClick: handleChange,
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionSummaryContent, {
-      className: classes.content,
-      ownerState: ownerState,
+    elementType: AccordionSummaryRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    additionalProps: {
+      focusRipple: false,
+      disableRipple: true,
+      disabled,
+      'aria-expanded': expanded,
+      focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName)
+    },
+    getSlotProps: handlers => ({
+      ...handlers,
+      onClick: event => {
+        handlers.onClick?.(event);
+        handleChange(event);
+      }
+    })
+  });
+  const [ContentSlot, contentSlotProps] = (0, _useSlot.default)('content', {
+    className: classes.content,
+    elementType: AccordionSummaryContent,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ExpandIconWrapperSlot, expandIconWrapperSlotProps] = (0, _useSlot.default)('expandIconWrapper', {
+    className: classes.expandIconWrapper,
+    elementType: AccordionSummaryExpandIconWrapper,
+    externalForwardedProps,
+    ownerState
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
+    ...rootSlotProps,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ContentSlot, {
+      ...contentSlotProps,
       children: children
-    }), expandIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionSummaryExpandIconWrapper, {
-      className: classes.expandIconWrapper,
-      ownerState: ownerState,
+    }), expandIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandIconWrapperSlot, {
+      ...expandIconWrapperSlotProps,
       children: expandIcon
     })]
   });
@@ -198,6 +231,24 @@ process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes /* remove-pro
    * @ignore
    */
   onClick: _propTypes.default.func,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    content: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    expandIconWrapper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    content: _propTypes.default.elementType,
+    expandIconWrapper: _propTypes.default.elementType,
+    root: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/CHANGELOG.md

@@ -1,5 +1,89 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.0.0-rc.0
+
+<!-- generated comparing v7.0.0-beta.4..master -->
+
+_Mar 18, 2025_
+
+A big thanks to the 4 contributors who made this release possible.
+
+### `@mui/material@7.0.0-rc.0`
+
+- [StepLabel] Add missing root slot (#45603) @sai6855
+- [Switch] Add slots and slotProps (#45595) @siriwatknp
+- [utils] Add merging function to `mergeSlotProps` utility (#45543) @siriwatknp
+
+### Core
+
+- [blog] Clarify the difference between the two Pro plans (#45266) @oliviertassinari
+- [code-infra] Allow specifying a custom error formatter module for error minifcation (#45291) @Janpot
+- [code-infra] Make `getVersionEnvVariables` reusable for other repos (#45562) @Janpot
+- [code-infra] Update peer dependency of `@mui/utils` in `@mui/docs` (#45561) @Janpot
+- Add StackBlitz template to issue template (#45504) @Janpot
+
+All contributors of this release in alphabetical order: @Janpot, @oliviertassinari, @sai6855, @siriwatknp
+
+## 7.0.0-beta.4
+
+<!-- generated comparing v7.0.0-beta.3..master -->
+
+_Mar 13, 2025_
+
+A big thanks to the 10 contributors who made this release possible.
+This release contains bug fixes 🐛 and improvements to the new package layout 🏗️.
+
+### `@mui/material@7.0.0-beta.4`
+
+- [Accordion] Add missing `root` slot (#45532) @sai6855
+- [AccordionSummary] Add slots and slotProps (#45559) @sai6855
+- [ListItemText] Add missing `root` slot (#45540) @sai6855
+- [SpeedDial] Add missing `root` slot (#45541) @sai6855
+- [Tooltip] Allow auto placement on tooltip (#45399) @Jtaks
+- [useScrollTrigger] Do nothing if target is null (#45441) @vipierozan99
+- [TextareaAutosize] Fix ResizeObserver causing infinite `selectionchange` loop (#45351) @mj12albert
+- Fix negative input for CSS variables spacing array (#45550) @siriwatknp
+- Add missing deprecations in deprecations-all file (#45505) @sai6855
+- Rename some `@mui/material/styles/createTypography` exports (#45558) @Janpot
+
+### `@mui/icons-material@7.0.0-beta.4`
+
+- Remove unused icon names from the download script (#45453) @yermartee
+
+### `@mui/system@7.0.0-beta.4`
+
+- Prevent nested non-vars theme inheritance (#45545) @siriwatknp
+- Disable theme recalculation as default behavior (#45405) @siriwatknp
+- Fix package layout inconsistencies (#45491) @DiegoAndai
+
+### `@mui/styled-engine@7.0.0-beta.4`
+
+- Add `enableCssLayer` prop to StyledEngineProvider (#45428) @siriwatknp
+
+### `@mui/types@7.3.0`
+
+- [code-infra] Fix type resolution for @mui/types (#45513) @Janpot
+
+### `@mui/utils@7.0.0-beta.4`
+
+- Fix package layout inconsistencies (#45491) @DiegoAndai
+- Use correct iri-reference homepage format (#45472) @dahiro
+
+### Docs
+
+- [Backdrop] Fix component name in migration guide (#45506) @sai6855
+- [TextField] Add HTML input section to TextField page (#45439) @siriwatknp
+
+### Core
+
+- [code-infra] Convert a few docs modules to ts (#45548) @Janpot
+- [code-infra] Remove more CJS modules from the docs (#45557) @Janpot
+- [code-infra] Remove nested imports from theme augmentation (#45514) @Janpot
+- [docs-infra] Add @ts-ignore to avoid type checking for MUI X (#45555) @siriwatknp
+- [blog] Fix author end-of-year updates (#45533) @oliviertassinari
+
+All contributors of this release in alphabetical order: @dahiro, @DiegoAndai, @Janpot, @Jtaks, @mj12albert, @oliviertassinari, @sai6855, @siriwatknp, @vipierozan99, @yermartee
+
 ## 7.0.0-beta.3
 
 <!-- generated comparing v7.0.0-beta.2..master -->

package/InputBase/InputBase.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.rootOverridesResolver = exports.inputOverridesResolver = exports.default = exports.InputBaseRoot = exports.InputBaseInput = void 0;
-var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
+var _formatMuiErrorMessage = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -381,7 +381,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     if (!isControlled) {
       const element = event.target || inputRef.current;
       if (element == null) {
-        throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: Expected valid input target. ' + 'Did you use a custom `inputComponent` and forget to forward refs? ' + 'See https://mui.com/r/input-component-ref-interface for more info.' : (0, _formatMuiErrorMessage2.default)(1));
+        throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: Expected valid input target. ' + 'Did you use a custom `inputComponent` and forget to forward refs? ' + 'See https://mui.com/r/input-component-ref-interface for more info.' : (0, _formatMuiErrorMessage.default)(1));
       }
       checkDirty({
         value: element.value

package/ListItemText/ListItemText.d.ts

@@ -5,6 +5,11 @@ import { TypographyProps } from "../Typography/index.js";
 import { ListItemTextClasses } from "./listItemTextClasses.js";
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
 export interface ListItemTextSlots {
+  /**
+   * The component that renders the root slot.
+   * @default 'div'
+   */
+  root?: React.ElementType;
   /**
    * The component that renders the primary slot.
    * @default Typography
@@ -17,6 +22,11 @@ export interface ListItemTextSlots {
   secondary?: React.ElementType;
 }
 export type ListItemTextSlotsAndSlotProps = CreateSlotsAndSlotProps<ListItemTextSlots, {
+  /**
+   * Props forwared to the root slot.
+   * By default, the available props are based on `div` element.
+   */
+  root: SlotProps<'div', {}, ListItemTextOwnerState>;
   /**
    * Props forwared to the primary slot (as long as disableTypography is not `true`)
    * By default, the available props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component

package/ListItemText/ListItemText.js

@@ -114,6 +114,16 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
       ...slotProps
     }
   };
+  const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
+    className: (0, _clsx.default)(classes.root, className),
+    elementType: ListItemTextRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    ref
+  });
   const [PrimarySlot, primarySlotProps] = (0, _useSlot.default)('primary', {
     className: classes.primary,
     elementType: _Typography.default,
@@ -142,11 +152,8 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
       children: secondary
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ListItemTextRoot, {
-    className: (0, _clsx.default)(classes.root, className),
-    ownerState: ownerState,
-    ref: ref,
-    ...other,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
+    ...rootSlotProps,
     children: [primary, secondary]
   });
 });
@@ -207,6 +214,7 @@ process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptyp
    */
   slotProps: _propTypes.default.shape({
     primary: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     secondary: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
@@ -215,6 +223,7 @@ process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptyp
    */
   slots: _propTypes.default.shape({
     primary: _propTypes.default.elementType,
+    root: _propTypes.default.elementType,
     secondary: _propTypes.default.elementType
   }),
   /**

package/Select/SelectInput.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
+var _formatMuiErrorMessage = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -355,7 +355,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     let selected;
     if (multiple) {
       if (!Array.isArray(value)) {
-        throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `value` prop must be an array ' + 'when using the `Select` component with `multiple`.' : (0, _formatMuiErrorMessage2.default)(2));
+        throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `value` prop must be an array ' + 'when using the `Select` component with `multiple`.' : (0, _formatMuiErrorMessage.default)(2));
       }
       selected = value.some(v => areEqualValues(v, child.props.value));
       if (selected && computeDisplay) {

package/SpeedDial/SpeedDial.d.ts

@@ -9,6 +9,11 @@ import { CreateSlotsAndSlotProps, SlotComponentProps } from "../utils/types.js";
 export type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown';
 export type OpenReason = 'toggle' | 'focus' | 'mouseEnter';
 export interface SpeedDialSlots {
+  /**
+   * The component that renders the root slot.
+   * @default 'div'
+   */
+  root: React.ElementType;
   /**
    * The component that renders the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
@@ -17,6 +22,11 @@ export interface SpeedDialSlots {
   transition: React.ElementType;
 }
 export type SpeedDialSlotsAndSlotProps = CreateSlotsAndSlotProps<SpeedDialSlots, {
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on div element.
+   */
+  root: SlotComponentProps<'div', React.HTMLAttributes<HTMLDivElement>, SpeedDialOwnerState>;
   /**
    * Props forwarded to the transition slot.
    * By default, the avaible props are based on the [Zoom](https://mui.com/material-ui/api/zoom/#props) component.

package/SpeedDial/SpeedDial.js

@@ -379,22 +379,49 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     slots: backwardCompatibleSlots,
     slotProps: backwardCompatibleSlotProps
   };
+  const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
+    elementType: SpeedDialRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    ref,
+    className: (0, _clsx.default)(classes.root, className),
+    additionalProps: {
+      role: 'presentation'
+    },
+    getSlotProps: handlers => ({
+      ...handlers,
+      onKeyDown: event => {
+        handlers.onKeyDown?.(event);
+        handleKeyDown(event);
+      },
+      onBlur: event => {
+        handlers.onBlur?.(event);
+        handleClose(event);
+      },
+      onFocus: event => {
+        handlers.onFocus?.(event);
+        handleOpen(event);
+      },
+      onMouseEnter: event => {
+        handlers.onMouseEnter?.(event);
+        handleOpen(event);
+      },
+      onMouseLeave: event => {
+        handlers.onMouseLeave?.(event);
+        handleClose(event);
+      }
+    })
+  });
   const [TransitionSlot, transitionProps] = (0, _useSlot.default)('transition', {
     elementType: _Zoom.default,
     externalForwardedProps,
     ownerState
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SpeedDialRoot, {
-    className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
-    role: "presentation",
-    onKeyDown: handleKeyDown,
-    onBlur: handleClose,
-    onFocus: handleOpen,
-    onMouseEnter: handleOpen,
-    onMouseLeave: handleClose,
-    ownerState: ownerState,
-    ...other,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
+    ...rootSlotProps,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, {
       in: !hidden,
       timeout: transitionDuration,
@@ -514,6 +541,7 @@ process.env.NODE_ENV !== "production" ? SpeedDial.propTypes /* remove-proptypes
    * @default {}
    */
   slotProps: _propTypes.default.shape({
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
@@ -521,6 +549,7 @@ process.env.NODE_ENV !== "production" ? SpeedDial.propTypes /* remove-proptypes
    * @default {}
    */
   slots: _propTypes.default.shape({
+    root: _propTypes.default.elementType,
     transition: _propTypes.default.elementType
   }),
   /**

package/SpeedDialAction/SpeedDialAction.js

@@ -348,7 +348,7 @@ process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes /* remove-prop
    * @default 'left'
    * @deprecated Use `slotProps.tooltip.placement` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  tooltipPlacement: _propTypes.default.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+  tooltipPlacement: _propTypes.default.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
   /**
    * Label to display in the tooltip.
    * @deprecated Use `slotProps.tooltip.title` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.

package/StepLabel/StepLabel.d.ts

@@ -6,6 +6,11 @@ import { Theme } from "../styles/index.js";
 import { StepLabelClasses } from "./stepLabelClasses.js";
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
 export interface StepLabelSlots {
+  /**
+   * The component that renders the root.
+   * @default span
+   */
+  root: React.ElementType;
   /**
    * The component that renders the label.
    * @default span
@@ -17,7 +22,20 @@ export interface StepLabelSlots {
   stepIcon: React.ElementType;
 }
 export type StepLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<StepLabelSlots, {
-  label: SlotProps<React.ElementType<React.HTMLProps<HTMLSpanElement>>, {}, StepLabelOwnerState>;
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the span element.
+   */
+  root: SlotProps<'span', {}, StepLabelOwnerState>;
+  /**
+   * Props forwarded to the label slot.
+   * By default, the avaible props are based on the span element.
+   */
+  label: SlotProps<'span', {}, StepLabelOwnerState>;
+  /**
+   * Props forwarded to the stepIcon slot.
+   * By default, the avaible props are based on the div element.
+   */
   stepIcon: SlotProps<React.ElementType<StepIconProps>, {}, StepLabelOwnerState>;
 }>;
 export interface StepLabelOwnerState extends StepLabelProps {}

package/StepLabel/StepLabel.js

@@ -169,6 +169,16 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
       ...slotProps
     }
   };
+  const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
+    elementType: StepLabelRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    ref,
+    className: (0, _clsx.default)(classes.root, className)
+  });
   const [LabelSlot, labelProps] = (0, _useSlot.default)('label', {
     elementType: StepLabelLabel,
     externalForwardedProps,
@@ -179,11 +189,8 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
     externalForwardedProps,
     ownerState
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StepLabelRoot, {
-    className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
+    ...rootProps,
     children: [icon || StepIconSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StepLabelIconContainer, {
       className: classes.iconContainer,
       ownerState: ownerState,
@@ -249,6 +256,7 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    */
   slotProps: _propTypes.default.shape({
     label: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     stepIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
@@ -257,6 +265,7 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    */
   slots: _propTypes.default.shape({
     label: _propTypes.default.elementType,
+    root: _propTypes.default.elementType,
     stepIcon: _propTypes.default.elementType
   }),
   /**