@mui/material 6.4.3 → 6.4.5

package/Button/Button.js

@@ -501,9 +501,9 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     variant = 'text',
     ...other
   } = props;
-  const id = useId(idProp);
+  const loadingId = useId(idProp);
   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
-    "aria-labelledby": id,
+    "aria-labelledby": loadingId,
     color: "inherit",
     size: 16
   });
@@ -563,7 +563,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     ref: ref,
     type: type,
-    id: id,
+    id: loading ? loadingId : idProp,
     ...other,
     classes: classes,
     children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.4.5
+
+<!-- generated comparing v6.4.4..v6.x -->
+
+_Feb 18, 2025_
+
+A big thanks to the 5 contributors who made this release possible.
+
+### `@mui/material@6.4.5`
+
+- [Autocomplete] Remove legacy `aria-owns` attribute for combobox (#45303) @ZeeshanTamboli
+- [Button] Apply id only if loading indicator is present (#45339) @aarongarciah
+
+### Docs
+
+- [icons] Fix typo in material-icons.md (#45336) @a-s-russo
+- [Menu] Add Grouped Menu demo (#45292) @noobDev31
+
+### Core
+
+- [blog] Consistent Base UI terminology (#45342) @aarongarciah
+- Fix double redirection to Base UI (#45146) @oliviertassinari
+
+All contributors of this release in alphabetical order: @a-s-russo, @aarongarciah, @noobDev31, @oliviertassinari, @ZeeshanTamboli
+
+## 6.4.4
+
+<!-- generated comparing v6.4.3..v6.x -->
+
+_Feb 11, 2025_
+
+A big thanks to the 3 contributors who made this release possible.
+
+### `@mui/material@6.4.4`
+
+- [MobileStepper] deprecate `LinearProgressProps` and complete `slots`, `slotProps` (@siriwatknp) (#45242) @siriwatknp
+- [Slider] Deprecate composed classes (@sai6855) (#45223) @sai6855
+- [utils] Merge `sx` instead of override when using `mergeSlotProps` (#45129) @siriwatknp
+
+### Docs
+
+- [Autocomplete] Improve Google Maps search example (#44708) @oliviertassinari
+- [Dialog] Removes deprecated PaperProps from docs (#45217) @sai6855
+- A quick first step to update docs for Tailwind v4 (#45221) @oliviertassinari
+
+### Core
+
+- Fix missing store contributor renaming (527222d) @oliviertassinari
+- Fix MUI Base vale rule (#45140) @oliviertassinari
+- Fix 404 errors (#45137) @oliviertassinari
+- [docs] Sync active sponsors (#45204) @oliviertassinari
+- [docs-infra] Move Ukraine banner to the bottom (#45135) @oliviertassinari
+
+All contributors of this release in alphabetical order: @oliviertassinari, @sai6855, @siriwatknp
+
 ## 6.4.3
 
 <!-- generated comparing v6.4.2..v6.x -->

package/IconButton/IconButton.js

@@ -193,9 +193,9 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
-  const id = useId(idProp);
+  const loadingId = useId(idProp);
   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
-    "aria-labelledby": id,
+    "aria-labelledby": loadingId,
     color: "inherit",
     size: 16
   });
@@ -211,7 +211,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(IconButtonRoot, {
-    id: id,
+    id: loading ? loadingId : idProp,
     className: clsx(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,

package/MobileStepper/MobileStepper.d.ts

@@ -4,8 +4,73 @@ import { InternalStandardProps as StandardProps, Theme } from '..';
 import { PaperProps } from '../Paper';
 import { LinearProgressProps } from '../LinearProgress';
 import { MobileStepperClasses } from './mobileStepperClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
-export interface MobileStepperProps extends StandardProps<PaperProps, 'children' | 'variant'> {
+export interface MobileStepperSlots {
+  /**
+   * The component that renders the root slot.
+   * @default Paper
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the progress slot.
+   * @default LinearProgress
+   */
+  progress: React.ElementType;
+  /**
+   * The component that renders the dots slot.
+   * @default 'div'
+   */
+  dots: React.ElementType;
+  /**
+   * The component that renders the dot slot.
+   * @default 'div'
+   */
+  dot: React.ElementType;
+}
+
+export interface MobileStepperRootSlotPropsOverrides {}
+export interface MobileStepperProgressSlotPropsOverrides {}
+export interface MobileStepperDotsSlotPropsOverrides {}
+export interface MobileStepperDotSlotPropsOverrides {}
+
+export type MobileStepperSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  MobileStepperSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
+     */
+    root: SlotProps<
+      React.ElementType<PaperProps>,
+      MobileStepperRootSlotPropsOverrides,
+      MobileStepperOwnerState
+    >;
+    /**
+     * Props forwarded to the progress slot.
+     * By default, the avaible props are based on the [LinearProgress](https://mui.com/material-ui/api/linear-progress/#props) component.
+     */
+    progress: SlotProps<
+      React.ElementType<LinearProgressProps>,
+      MobileStepperProgressSlotPropsOverrides,
+      MobileStepperOwnerState
+    >;
+    /**
+     * Props forwarded to the dots slot.
+     * By default, the avaible props are based on the div element.
+     */
+    dots: SlotProps<'div', MobileStepperDotsSlotPropsOverrides, MobileStepperOwnerState>;
+    /**
+     * Props forwarded to the dot slot.
+     * By default, the avaible props are based on the div element.
+     */
+    dot: SlotProps<'div', MobileStepperDotSlotPropsOverrides, MobileStepperOwnerState>;
+  }
+>;
+
+export interface MobileStepperProps
+  extends StandardProps<PaperProps, 'children' | 'variant'>,
+    MobileStepperSlotsAndSlotProps {
   /**
    * Set the active step (zero based index).
    * Defines which dot is highlighted when the variant is 'dots'.
@@ -22,6 +87,7 @@ export interface MobileStepperProps extends StandardProps<PaperProps, 'children'
   classes?: Partial<MobileStepperClasses>;
   /**
    * Props applied to the `LinearProgress` element.
+   * @deprecated Use `slotProps.progress` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   LinearProgressProps?: Partial<LinearProgressProps>;
   /**
@@ -48,6 +114,8 @@ export interface MobileStepperProps extends StandardProps<PaperProps, 'children'
   variant?: 'text' | 'dots' | 'progress';
 }
 
+export interface MobileStepperOwnerState extends Omit<MobileStepperProps, 'slots' | 'slotProps'> {}
+
 /**
  *
  * Demos:

package/MobileStepper/MobileStepper.js

@@ -13,6 +13,7 @@ import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import slotShouldForwardProp from "../styles/slotShouldForwardProp.js";
 import { getMobileStepperUtilityClass } from "./mobileStepperClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -152,6 +153,8 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
     position = 'bottom',
     steps,
     variant = 'dots',
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = {
@@ -169,29 +172,63 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
     }
   }
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(MobileStepperRoot, {
-    square: true,
-    elevation: 0,
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      progress: LinearProgressProps,
+      ...slotProps
+    }
+  };
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    elementType: MobileStepperRoot,
+    shouldForwardComponentProp: true,
     className: clsx(classes.root, className),
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    additionalProps: {
+      square: true,
+      elevation: 0
+    }
+  });
+  const [DotsSlot, dotsSlotProps] = useSlot('dots', {
+    className: classes.dots,
+    elementType: MobileStepperDots,
+    externalForwardedProps,
+    ownerState
+  });
+  const [DotSlot, dotSlotProps] = useSlot('dot', {
+    elementType: MobileStepperDot,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ProgressSlot, progressSlotProps] = useSlot('progress', {
+    className: classes.progress,
+    elementType: MobileStepperProgress,
+    shouldForwardComponentProp: true,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      value,
+      variant: 'determinate'
+    }
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootSlotProps,
     children: [backButton, variant === 'text' && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [activeStep + 1, " / ", steps]
-    }), variant === 'dots' && /*#__PURE__*/_jsx(MobileStepperDots, {
-      ownerState: ownerState,
-      className: classes.dots,
-      children: [...new Array(steps)].map((_, index) => /*#__PURE__*/_jsx(MobileStepperDot, {
-        className: clsx(classes.dot, index === activeStep && classes.dotActive),
-        ownerState: ownerState,
+    }), variant === 'dots' && /*#__PURE__*/_jsx(DotsSlot, {
+      ...dotsSlotProps,
+      children: [...new Array(steps)].map((_, index) => /*#__PURE__*/_jsx(DotSlot, {
+        ...dotSlotProps,
+        className: clsx(classes.dot, dotSlotProps.className, index === activeStep && classes.dotActive),
         dotActive: index === activeStep
       }, index))
-    }), variant === 'progress' && /*#__PURE__*/_jsx(MobileStepperProgress, {
-      ownerState: ownerState,
-      className: classes.progress,
-      variant: "determinate",
-      value: value,
-      ...LinearProgressProps
+    }), variant === 'progress' && /*#__PURE__*/_jsx(ProgressSlot, {
+      ...progressSlotProps
     }), nextButton]
   });
 });
@@ -220,6 +257,7 @@ process.env.NODE_ENV !== "production" ? MobileStepper.propTypes /* remove-propty
   className: PropTypes.string,
   /**
    * Props applied to the `LinearProgress` element.
+   * @deprecated Use `slotProps.progress` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   LinearProgressProps: PropTypes.object,
   /**
@@ -231,6 +269,26 @@ process.env.NODE_ENV !== "production" ? MobileStepper.propTypes /* remove-propty
    * @default 'bottom'
    */
   position: PropTypes.oneOf(['bottom', 'static', 'top']),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    dot: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    dots: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    progress: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    dot: PropTypes.elementType,
+    dots: PropTypes.elementType,
+    progress: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The total steps.
    */

package/Slider/sliderClasses.d.ts

@@ -45,19 +45,33 @@ export interface SliderClasses {
     markLabelActive: string;
     /** Styles applied to the root element if `size="small"`. */
     sizeSmall: string;
-    /** Styles applied to the thumb element if `color="primary"`. */
+    /** Styles applied to the thumb element if `color="primary"`.
+     * @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#slider-classes-thumb) and [.MuiSlider-colorPrimary](/material-ui/api/slider/#slider-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     thumbColorPrimary: string;
-    /** Styles applied to the thumb element if `color="secondary"`. */
+    /** Styles applied to the thumb element if `color="secondary"`.
+     * @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#slider-classes-thumb) and [.MuiSlider-colorSecondary](/material-ui/api/slider/#slider-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     thumbColorSecondary: string;
-    /** Styles applied to the thumb element if `color="error"`. */
+    /** Styles applied to the thumb element if `color="error"`.
+     * @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#slider-classes-thumb) and [.MuiSlider-colorError](/material-ui/api/slider/#slider-classes-colorError) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     thumbColorError: string;
-    /** Styles applied to the thumb element if `color="info"`. */
+    /** Styles applied to the thumb element if `color="info"`.
+     * @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#slider-classes-thumb) and [.MuiSlider-colorInfo](/material-ui/api/slider/#slider-classes-colorInfo) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     thumbColorInfo: string;
-    /** Styles applied to the thumb element if `color="success"`. */
+    /** Styles applied to the thumb element if `color="success"`.
+     * @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#slider-classes-thumb) and [.MuiSlider-colorSuccess](/material-ui/api/slider/#slider-classes-colorSuccess) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     thumbColorSuccess: string;
-    /** Styles applied to the thumb element if `color="warning"`. */
+    /** Styles applied to the thumb element if `color="warning"`.
+     * @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#slider-classes-thumb) and [.MuiSlider-colorWarning](/material-ui/api/slider/#slider-classes-colorWarning) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     thumbColorWarning: string;
-    /** Styles applied to the thumb element if `size="small"`. */
+    /** Styles applied to the thumb element if `size="small"`.
+     * @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#slider-classes-thumb) and [.MuiSlider-sizeSmall](/material-ui/api/slider/#slider-classes-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     thumbSizeSmall: string;
     /** Styles applied to the thumb label element. */
     valueLabel: string;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.4.3
+ * @mui/material v6.4.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/Button/Button.js

@@ -501,9 +501,9 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     variant = 'text',
     ...other
   } = props;
-  const id = useId(idProp);
+  const loadingId = useId(idProp);
   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
-    "aria-labelledby": id,
+    "aria-labelledby": loadingId,
     color: "inherit",
     size: 16
   });
@@ -563,7 +563,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     ref: ref,
     type: type,
-    id: id,
+    id: loading ? loadingId : idProp,
     ...other,
     classes: classes,
     children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]

package/modern/IconButton/IconButton.js

@@ -193,9 +193,9 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
-  const id = useId(idProp);
+  const loadingId = useId(idProp);
   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
-    "aria-labelledby": id,
+    "aria-labelledby": loadingId,
     color: "inherit",
     size: 16
   });
@@ -211,7 +211,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(IconButtonRoot, {
-    id: id,
+    id: loading ? loadingId : idProp,
     className: clsx(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,

package/modern/MobileStepper/MobileStepper.js

@@ -13,6 +13,7 @@ import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import slotShouldForwardProp from "../styles/slotShouldForwardProp.js";
 import { getMobileStepperUtilityClass } from "./mobileStepperClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -152,6 +153,8 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
     position = 'bottom',
     steps,
     variant = 'dots',
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = {
@@ -169,29 +172,63 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
     }
   }
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(MobileStepperRoot, {
-    square: true,
-    elevation: 0,
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      progress: LinearProgressProps,
+      ...slotProps
+    }
+  };
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    elementType: MobileStepperRoot,
+    shouldForwardComponentProp: true,
     className: clsx(classes.root, className),
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    additionalProps: {
+      square: true,
+      elevation: 0
+    }
+  });
+  const [DotsSlot, dotsSlotProps] = useSlot('dots', {
+    className: classes.dots,
+    elementType: MobileStepperDots,
+    externalForwardedProps,
+    ownerState
+  });
+  const [DotSlot, dotSlotProps] = useSlot('dot', {
+    elementType: MobileStepperDot,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ProgressSlot, progressSlotProps] = useSlot('progress', {
+    className: classes.progress,
+    elementType: MobileStepperProgress,
+    shouldForwardComponentProp: true,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      value,
+      variant: 'determinate'
+    }
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootSlotProps,
     children: [backButton, variant === 'text' && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [activeStep + 1, " / ", steps]
-    }), variant === 'dots' && /*#__PURE__*/_jsx(MobileStepperDots, {
-      ownerState: ownerState,
-      className: classes.dots,
-      children: [...new Array(steps)].map((_, index) => /*#__PURE__*/_jsx(MobileStepperDot, {
-        className: clsx(classes.dot, index === activeStep && classes.dotActive),
-        ownerState: ownerState,
+    }), variant === 'dots' && /*#__PURE__*/_jsx(DotsSlot, {
+      ...dotsSlotProps,
+      children: [...new Array(steps)].map((_, index) => /*#__PURE__*/_jsx(DotSlot, {
+        ...dotSlotProps,
+        className: clsx(classes.dot, dotSlotProps.className, index === activeStep && classes.dotActive),
         dotActive: index === activeStep
       }, index))
-    }), variant === 'progress' && /*#__PURE__*/_jsx(MobileStepperProgress, {
-      ownerState: ownerState,
-      className: classes.progress,
-      variant: "determinate",
-      value: value,
-      ...LinearProgressProps
+    }), variant === 'progress' && /*#__PURE__*/_jsx(ProgressSlot, {
+      ...progressSlotProps
     }), nextButton]
   });
 });
@@ -220,6 +257,7 @@ process.env.NODE_ENV !== "production" ? MobileStepper.propTypes /* remove-propty
   className: PropTypes.string,
   /**
    * Props applied to the `LinearProgress` element.
+   * @deprecated Use `slotProps.progress` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   LinearProgressProps: PropTypes.object,
   /**
@@ -231,6 +269,26 @@ process.env.NODE_ENV !== "production" ? MobileStepper.propTypes /* remove-propty
    * @default 'bottom'
    */
   position: PropTypes.oneOf(['bottom', 'static', 'top']),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    dot: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    dots: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    progress: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    dot: PropTypes.elementType,
+    dots: PropTypes.elementType,
+    progress: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The total steps.
    */

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.4.3
+ * @mui/material v6.4.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/useAutocomplete/useAutocomplete.js

@@ -877,7 +877,6 @@ function useAutocomplete(props) {
   }
   return {
     getRootProps: (other = {}) => ({
-      'aria-owns': listboxAvailable ? `${id}-listbox` : null,
       ...other,
       onKeyDown: handleKeyDown(other),
       onMouseDown: handleMouseDown,

package/modern/utils/mergeSlotProps.js

@@ -22,22 +22,29 @@ export default function mergeSlotProps(externalSlotProps, defaultSlotProps) {
             ...defaultSlotPropsValue.style,
             ...externalSlotPropsValue.style
           }
+        }),
+        ...(defaultSlotPropsValue?.sx && externalSlotPropsValue?.sx && {
+          sx: [...(Array.isArray(defaultSlotPropsValue.sx) ? defaultSlotPropsValue.sx : [defaultSlotPropsValue.sx]), ...(Array.isArray(externalSlotPropsValue.sx) ? externalSlotPropsValue.sx : [externalSlotPropsValue.sx])]
         })
       };
     };
   }
-  const className = clsx(defaultSlotProps?.className, externalSlotProps?.className);
+  const typedDefaultSlotProps = defaultSlotProps;
+  const className = clsx(typedDefaultSlotProps?.className, externalSlotProps?.className);
   return {
     ...defaultSlotProps,
     ...externalSlotProps,
     ...(!!className && {
       className
     }),
-    ...(defaultSlotProps?.style && externalSlotProps?.style && {
+    ...(typedDefaultSlotProps?.style && externalSlotProps?.style && {
       style: {
-        ...defaultSlotProps.style,
+        ...typedDefaultSlotProps.style,
         ...externalSlotProps.style
       }
+    }),
+    ...(typedDefaultSlotProps?.sx && externalSlotProps?.sx && {
+      sx: [...(Array.isArray(typedDefaultSlotProps.sx) ? typedDefaultSlotProps.sx : [typedDefaultSlotProps.sx]), ...(Array.isArray(externalSlotProps.sx) ? externalSlotProps.sx : [externalSlotProps.sx])]
     })
   };
 }

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.4.3";
+export const version = "6.4.5";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("3");
+export const patch = Number("5");
 export const prerelease = undefined;
 export default version;

package/node/Button/Button.js

@@ -508,9 +508,9 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     variant = 'text',
     ...other
   } = props;
-  const id = (0, _utils.unstable_useId)(idProp);
+  const loadingId = (0, _utils.unstable_useId)(idProp);
   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-    "aria-labelledby": id,
+    "aria-labelledby": loadingId,
     color: "inherit",
     size: 16
   });
@@ -570,7 +570,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),
     ref: ref,
     type: type,
-    id: id,
+    id: loading ? loadingId : idProp,
     ...other,
     classes: classes,
     children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]

package/node/IconButton/IconButton.js

@@ -200,9 +200,9 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
-  const id = (0, _utils.unstable_useId)(idProp);
+  const loadingId = (0, _utils.unstable_useId)(idProp);
   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-    "aria-labelledby": id,
+    "aria-labelledby": loadingId,
     color: "inherit",
     size: 16
   });
@@ -218,7 +218,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(IconButtonRoot, {
-    id: id,
+    id: loading ? loadingId : idProp,
     className: (0, _clsx.default)(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,

package/node/MobileStepper/MobileStepper.js

@@ -20,6 +20,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
 var _mobileStepperClasses = require("./mobileStepperClasses");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -159,6 +160,8 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
     position = 'bottom',
     steps,
     variant = 'dots',
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = {
@@ -176,29 +179,63 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
     }
   }
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MobileStepperRoot, {
-    square: true,
-    elevation: 0,
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      progress: LinearProgressProps,
+      ...slotProps
+    }
+  };
+  const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
+    ref,
+    elementType: MobileStepperRoot,
+    shouldForwardComponentProp: true,
     className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    additionalProps: {
+      square: true,
+      elevation: 0
+    }
+  });
+  const [DotsSlot, dotsSlotProps] = (0, _useSlot.default)('dots', {
+    className: classes.dots,
+    elementType: MobileStepperDots,
+    externalForwardedProps,
+    ownerState
+  });
+  const [DotSlot, dotSlotProps] = (0, _useSlot.default)('dot', {
+    elementType: MobileStepperDot,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ProgressSlot, progressSlotProps] = (0, _useSlot.default)('progress', {
+    className: classes.progress,
+    elementType: MobileStepperProgress,
+    shouldForwardComponentProp: true,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      value,
+      variant: 'determinate'
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
+    ...rootSlotProps,
     children: [backButton, variant === 'text' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [activeStep + 1, " / ", steps]
-    }), variant === 'dots' && /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileStepperDots, {
-      ownerState: ownerState,
-      className: classes.dots,
-      children: [...new Array(steps)].map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileStepperDot, {
-        className: (0, _clsx.default)(classes.dot, index === activeStep && classes.dotActive),
-        ownerState: ownerState,
+    }), variant === 'dots' && /*#__PURE__*/(0, _jsxRuntime.jsx)(DotsSlot, {
+      ...dotsSlotProps,
+      children: [...new Array(steps)].map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(DotSlot, {
+        ...dotSlotProps,
+        className: (0, _clsx.default)(classes.dot, dotSlotProps.className, index === activeStep && classes.dotActive),
         dotActive: index === activeStep
       }, index))
-    }), variant === 'progress' && /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileStepperProgress, {
-      ownerState: ownerState,
-      className: classes.progress,
-      variant: "determinate",
-      value: value,
-      ...LinearProgressProps
+    }), variant === 'progress' && /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressSlot, {
+      ...progressSlotProps
     }), nextButton]
   });
 });
@@ -227,6 +264,7 @@ process.env.NODE_ENV !== "production" ? MobileStepper.propTypes /* remove-propty
   className: _propTypes.default.string,
   /**
    * Props applied to the `LinearProgress` element.
+   * @deprecated Use `slotProps.progress` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   LinearProgressProps: _propTypes.default.object,
   /**
@@ -238,6 +276,26 @@ process.env.NODE_ENV !== "production" ? MobileStepper.propTypes /* remove-propty
    * @default 'bottom'
    */
   position: _propTypes.default.oneOf(['bottom', 'static', 'top']),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    dot: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    dots: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    progress: _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({
+    dot: _propTypes.default.elementType,
+    dots: _propTypes.default.elementType,
+    progress: _propTypes.default.elementType,
+    root: _propTypes.default.elementType
+  }),
   /**
    * The total steps.
    */

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.4.3
+ * @mui/material v6.4.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/useAutocomplete/useAutocomplete.js

@@ -883,7 +883,6 @@ function useAutocomplete(props) {
   }
   return {
     getRootProps: (other = {}) => ({
-      'aria-owns': listboxAvailable ? `${id}-listbox` : null,
       ...other,
       onKeyDown: handleKeyDown(other),
       onMouseDown: handleMouseDown,

package/node/utils/mergeSlotProps.js

@@ -29,22 +29,29 @@ function mergeSlotProps(externalSlotProps, defaultSlotProps) {
             ...defaultSlotPropsValue.style,
             ...externalSlotPropsValue.style
           }
+        }),
+        ...(defaultSlotPropsValue?.sx && externalSlotPropsValue?.sx && {
+          sx: [...(Array.isArray(defaultSlotPropsValue.sx) ? defaultSlotPropsValue.sx : [defaultSlotPropsValue.sx]), ...(Array.isArray(externalSlotPropsValue.sx) ? externalSlotPropsValue.sx : [externalSlotPropsValue.sx])]
         })
       };
     };
   }
-  const className = (0, _clsx.default)(defaultSlotProps?.className, externalSlotProps?.className);
+  const typedDefaultSlotProps = defaultSlotProps;
+  const className = (0, _clsx.default)(typedDefaultSlotProps?.className, externalSlotProps?.className);
   return {
     ...defaultSlotProps,
     ...externalSlotProps,
     ...(!!className && {
       className
     }),
-    ...(defaultSlotProps?.style && externalSlotProps?.style && {
+    ...(typedDefaultSlotProps?.style && externalSlotProps?.style && {
       style: {
-        ...defaultSlotProps.style,
+        ...typedDefaultSlotProps.style,
         ...externalSlotProps.style
       }
+    }),
+    ...(typedDefaultSlotProps?.sx && externalSlotProps?.sx && {
+      sx: [...(Array.isArray(typedDefaultSlotProps.sx) ? typedDefaultSlotProps.sx : [typedDefaultSlotProps.sx]), ...(Array.isArray(externalSlotProps.sx) ? externalSlotProps.sx : [externalSlotProps.sx])]
     })
   };
 }

package/node/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.4.3";
+const version = exports.version = "6.4.5";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("4");
-const patch = exports.patch = Number("3");
+const patch = exports.patch = Number("5");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.4.3",
+  "version": "6.4.5",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -35,8 +35,8 @@
     "prop-types": "^15.8.1",
     "react-is": "^19.0.0",
     "react-transition-group": "^4.4.5",
+    "@mui/core-downloads-tracker": "^6.4.5",
     "@mui/system": "^6.4.3",
-    "@mui/core-downloads-tracker": "^6.4.3",
     "@mui/types": "^7.2.21",
     "@mui/utils": "^6.4.3"
   },

package/useAutocomplete/useAutocomplete.js

@@ -877,7 +877,6 @@ function useAutocomplete(props) {
   }
   return {
     getRootProps: (other = {}) => ({
-      'aria-owns': listboxAvailable ? `${id}-listbox` : null,
       ...other,
       onKeyDown: handleKeyDown(other),
       onMouseDown: handleMouseDown,

package/utils/mergeSlotProps.js

@@ -22,22 +22,29 @@ export default function mergeSlotProps(externalSlotProps, defaultSlotProps) {
             ...defaultSlotPropsValue.style,
             ...externalSlotPropsValue.style
           }
+        }),
+        ...(defaultSlotPropsValue?.sx && externalSlotPropsValue?.sx && {
+          sx: [...(Array.isArray(defaultSlotPropsValue.sx) ? defaultSlotPropsValue.sx : [defaultSlotPropsValue.sx]), ...(Array.isArray(externalSlotPropsValue.sx) ? externalSlotPropsValue.sx : [externalSlotPropsValue.sx])]
         })
       };
     };
   }
-  const className = clsx(defaultSlotProps?.className, externalSlotProps?.className);
+  const typedDefaultSlotProps = defaultSlotProps;
+  const className = clsx(typedDefaultSlotProps?.className, externalSlotProps?.className);
   return {
     ...defaultSlotProps,
     ...externalSlotProps,
     ...(!!className && {
       className
     }),
-    ...(defaultSlotProps?.style && externalSlotProps?.style && {
+    ...(typedDefaultSlotProps?.style && externalSlotProps?.style && {
       style: {
-        ...defaultSlotProps.style,
+        ...typedDefaultSlotProps.style,
         ...externalSlotProps.style
       }
+    }),
+    ...(typedDefaultSlotProps?.sx && externalSlotProps?.sx && {
+      sx: [...(Array.isArray(typedDefaultSlotProps.sx) ? typedDefaultSlotProps.sx : [typedDefaultSlotProps.sx]), ...(Array.isArray(externalSlotProps.sx) ? externalSlotProps.sx : [externalSlotProps.sx])]
     })
   };
 }

package/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.4.3";
+export const version = "6.4.5";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("3");
+export const patch = Number("5");
 export const prerelease = undefined;
 export default version;