@mui/material - npm Package Compare versions

Comparing version 6.3.1 to 6.4.0

Alert/Alert.d.ts

@@ -13,2 +13,11 @@ import * as React from 'react';
 export interface AlertPropsColorOverrides {}
+
+export interface AlertRootSlotPropsOverrides {}
+
+export interface AlertIconSlotPropsOverrides {}
+
+export interface AlertMessageSlotPropsOverrides {}
+
+export interface AlertActionSlotPropsOverrides {}
+
 export interface AlertCloseButtonSlotPropsOverrides {}
@@ -19,2 +28,22 @@ export interface AlertCloseIconSlotPropsOverrides {}
   /**
+   * The component that renders the root slot.
+   * @default Paper
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the icon slot.
+   * @default div
+   */
+  icon: React.ElementType;
+  /**
+   * The component that renders the message slot.
+   * @default div
+   */
+  message: React.ElementType;
+  /**
+   * The component that renders the action slot.
+   * @default div
+   */
+  action: React.ElementType;
+  /**
    * The component that renders the close button.
@@ -34,2 +63,38 @@ * @default IconButton
   {
+    /**
+     * 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>, AlertRootSlotPropsOverrides, AlertOwnerState>;
+    /**
+     * Props forwarded to the icon slot.
+     * By default, the avaible props are based on a div element.
+     */
+    icon: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      AlertIconSlotPropsOverrides,
+      AlertOwnerState
+    >;
+    /**
+     * Props forwarded to the message slot.
+     * By default, the avaible props are based on a div element.
+     */
+    message: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      AlertMessageSlotPropsOverrides,
+      AlertOwnerState
+    >;
+    /**
+     * Props forwarded to the action slot.
+     * By default, the avaible props are based on a div element.
+     */
+    action: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      AlertActionSlotPropsOverrides,
+      AlertOwnerState
+    >;
+    /**
+     * Props forwarded to the closeButton slot.
+     * By default, the avaible props are based on the [IconButton](https://mui.com/material-ui/api/icon-button/#props) component.
+     */
     closeButton: SlotProps<
@@ -40,2 +105,6 @@ React.ElementType<IconButtonProps>,
     >;
+    /**
+     * Props forwarded to the closeIcon slot.
+     * By default, the avaible props are based on the [SvgIcon](https://mui.com/material-ui/api/svg-icon/#props) component.
+     */
     closeIcon: SlotProps<
@@ -42,0 +111,0 @@ React.ElementType<SvgIconProps>,

Alert/Alert.js

@@ -190,2 +190,35 @@ 'use client';
   };
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    shouldForwardComponentProp: true,
+    className: clsx(classes.root, className),
+    elementType: AlertRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    additionalProps: {
+      role,
+      elevation: 0
+    }
+  });
+  const [IconSlot, iconSlotProps] = useSlot('icon', {
+    className: classes.icon,
+    elementType: AlertIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [MessageSlot, messageSlotProps] = useSlot('message', {
+    className: classes.message,
+    elementType: AlertMessage,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ActionSlot, actionSlotProps] = useSlot('action', {
+    className: classes.action,
+    elementType: AlertAction,
+    externalForwardedProps,
+    ownerState
+  });
   const [CloseButtonSlot, closeButtonProps] = useSlot('closeButton', {
@@ -201,24 +234,15 @@ elementType: IconButton,
   });
-  return /*#__PURE__*/_jsxs(AlertRoot, {
-    role: role,
-    elevation: 0,
-    ownerState: ownerState,
-    className: clsx(classes.root, className),
-    ref: ref,
-    ...other,
-    children: [icon !== false ? /*#__PURE__*/_jsx(AlertIcon, {
-      ownerState: ownerState,
-      className: classes.icon,
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootSlotProps,
+    children: [icon !== false ? /*#__PURE__*/_jsx(IconSlot, {
+      ...iconSlotProps,
       children: icon || iconMapping[severity] || defaultIconMapping[severity]
-    }) : null, /*#__PURE__*/_jsx(AlertMessage, {
-      ownerState: ownerState,
-      className: classes.message,
+    }) : null, /*#__PURE__*/_jsx(MessageSlot, {
+      ...messageSlotProps,
       children: children
-    }), action != null ? /*#__PURE__*/_jsx(AlertAction, {
-      ownerState: ownerState,
-      className: classes.action,
+    }), action != null ? /*#__PURE__*/_jsx(ActionSlot, {
+      ...actionSlotProps,
       children: action
-    }) : null, action == null && onClose ? /*#__PURE__*/_jsx(AlertAction, {
-      ownerState: ownerState,
-      className: classes.action,
+    }) : null, action == null && onClose ? /*#__PURE__*/_jsx(ActionSlot, {
+      ...actionSlotProps,
       children: /*#__PURE__*/_jsx(CloseButtonSlot, {
@@ -335,4 +359,8 @@ size: "small",
   slotProps: PropTypes.shape({
+    action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     closeButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    closeIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    closeIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    message: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
@@ -344,4 +372,8 @@ /**
   slots: PropTypes.shape({
+    action: PropTypes.elementType,
     closeButton: PropTypes.elementType,
-    closeIcon: PropTypes.elementType
+    closeIcon: PropTypes.elementType,
+    icon: PropTypes.elementType,
+    message: PropTypes.elementType,
+    root: PropTypes.elementType
   }),
@@ -348,0 +380,0 @@ /**

Autocomplete/Autocomplete.d.ts

@@ -68,3 +68,3 @@ import * as React from 'react';
 export interface AutocompleteRenderGroupParams {
-  key: string;
+  key: number;
   group: string;
@@ -71,0 +71,0 @@ children?: React.ReactNode;

Button/Button.d.ts

@@ -64,2 +64,20 @@ import * as React from 'react';
   /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
+   */
+  loading?: boolean | null;
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator?: React.ReactNode;
+  /**
+   * The loading indicator can be positioned on the start, end, or the center of the button.
+   * @default 'center'
+   */
+  loadingPosition?: 'start' | 'end' | 'center';
+  /**
    * The size of the component.
@@ -66,0 +84,0 @@ * `small` is equivalent to the dense button styling.

Button/Button.js

@@ -9,2 +9,3 @@ 'use client';
 import { alpha } from '@mui/system/colorManipulator';
+import { unstable_useId as useId } from '@mui/material/utils';
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
@@ -15,2 +16,3 @@ import { styled } from "../zero-styled/index.js";
 import ButtonBase from "../ButtonBase/index.js";
+import CircularProgress from "../CircularProgress/index.js";
 import capitalize from "../utils/capitalize.js";
@@ -29,9 +31,12 @@ import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
     variant,
+    loading,
+    loadingPosition,
     classes
   } = ownerState;
   const slots = {
-    root: ['root', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth'],
-    label: ['label'],
+    root: ['root', loading && 'loading', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', loading && `loadingPosition${capitalize(loadingPosition)}`],
     startIcon: ['icon', 'startIcon', `iconSize${capitalize(size)}`],
-    endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`]
+    endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`],
+    loadingIndicator: ['loadingIndicator'],
+    loadingWrapper: ['loadingWrapper']
   };
@@ -81,3 +86,3 @@ const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
     } = props;
-    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth];
+    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.loading && styles.loading];
   }
@@ -269,2 +274,14 @@ })(memoTheme(({
       }
+    }, {
+      props: {
+        loadingPosition: 'center'
+      },
+      style: {
+        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+          duration: theme.transitions.duration.short
+        }),
+        [`&.${buttonClasses.loading}`]: {
+          color: 'transparent'
+        }
+      }
     }]
@@ -280,5 +297,7 @@ };
     } = props;
-    return [styles.startIcon, styles[`iconSize${capitalize(ownerState.size)}`]];
+    return [styles.startIcon, ownerState.loading && styles.startIconLoadingStart, styles[`iconSize${capitalize(ownerState.size)}`]];
   }
-})({
+})(({
+  theme
+}) => ({
   display: 'inherit',
@@ -294,4 +313,24 @@ marginRight: 8,
     }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      loading: true
+    },
+    style: {
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      loading: true,
+      fullWidth: true
+    },
+    style: {
+      marginRight: -8
+    }
   }, ...commonIconStyles]
-});
+}));
 const ButtonEndIcon = styled('span', {
@@ -304,5 +343,7 @@ name: 'MuiButton',
     } = props;
-    return [styles.endIcon, styles[`iconSize${capitalize(ownerState.size)}`]];
+    return [styles.endIcon, ownerState.loading && styles.endIconLoadingEnd, styles[`iconSize${capitalize(ownerState.size)}`]];
   }
-})({
+})(({
+  theme
+}) => ({
   display: 'inherit',
@@ -318,3 +359,124 @@ marginRight: -4,
     }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      loading: true
+    },
+    style: {
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      loading: true,
+      fullWidth: true
+    },
+    style: {
+      marginLeft: -8
+    }
   }, ...commonIconStyles]
+}));
+const ButtonLoadingIndicator = styled('span', {
+  name: 'MuiButton',
+  slot: 'LoadingIndicator',
+  overridesResolver: (props, styles) => styles.loadingIndicator
+})(({
+  theme
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  visibility: 'visible',
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: 'flex'
+    }
+  }, {
+    props: {
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 14
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      size: 'small'
+    },
+    style: {
+      left: 10
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'center'
+    },
+    style: {
+      left: '50%',
+      transform: 'translate(-50%)',
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }, {
+    props: {
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 14
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      size: 'small'
+    },
+    style: {
+      right: 10
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      fullWidth: true
+    },
+    style: {
+      position: 'relative',
+      left: -10
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      fullWidth: true
+    },
+    style: {
+      position: 'relative',
+      right: -10
+    }
+  }]
+}));
+const ButtonLoadingIconPlaceholder = styled('span', {
+  name: 'MuiButton',
+  slot: 'LoadingIconPlaceholder',
+  overridesResolver: (props, styles) => styles.loadingIconPlaceholder
+})({
+  display: 'inline-block',
+  width: '1em',
+  height: '1em'
 });
@@ -341,2 +503,6 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     fullWidth = false,
+    id: idProp,
+    loading = null,
+    loadingIndicator: loadingIndicatorProp,
+    loadingPosition = 'center',
     size = 'medium',
@@ -348,2 +514,8 @@ startIcon: startIconProp,
   } = props;
+  const id = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
   const ownerState = {
@@ -357,2 +529,5 @@ ...props,
     fullWidth,
+    loading,
+    loadingIndicator,
+    loadingPosition,
     size,
@@ -363,13 +538,33 @@ type,
   const classes = useUtilityClasses(ownerState);
-  const startIcon = startIconProp && /*#__PURE__*/_jsx(ButtonStartIcon, {
+  const startIcon = (startIconProp || loading && loadingPosition === 'start') && /*#__PURE__*/_jsx(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState: ownerState,
-    children: startIconProp
+    children: startIconProp || /*#__PURE__*/_jsx(ButtonLoadingIconPlaceholder, {
+      className: classes.loadingIconPlaceholder,
+      ownerState: ownerState
+    })
   });
-  const endIcon = endIconProp && /*#__PURE__*/_jsx(ButtonEndIcon, {
+  const endIcon = (endIconProp || loading && loadingPosition === 'end') && /*#__PURE__*/_jsx(ButtonEndIcon, {
     className: classes.endIcon,
     ownerState: ownerState,
-    children: endIconProp
+    children: endIconProp || /*#__PURE__*/_jsx(ButtonLoadingIconPlaceholder, {
+      className: classes.loadingIconPlaceholder,
+      ownerState: ownerState
+    })
   });
   const positionClassName = buttonGroupButtonContextPositionClassName || '';
+  const loader = typeof loading === 'boolean' ?
+  /*#__PURE__*/
+  // use plain HTML span to minimize the runtime overhead
+  _jsx("span", {
+    className: classes.loadingWrapper,
+    style: {
+      display: 'contents'
+    },
+    children: loading && /*#__PURE__*/_jsx(ButtonLoadingIndicator, {
+      className: classes.loadingIndicator,
+      ownerState: ownerState,
+      children: loadingIndicator
+    })
+  }) : null;
   return /*#__PURE__*/_jsxs(ButtonRoot, {
@@ -379,3 +574,3 @@ ownerState: ownerState,
     component: component,
-    disabled: disabled,
+    disabled: disabled || loading,
     focusRipple: !disableFocusRipple,
@@ -385,5 +580,6 @@ focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     type: type,
+    id: id,
     ...other,
     classes: classes,
-    children: [startIcon, children, endIcon]
+    children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
   });
@@ -462,2 +658,24 @@ });
   /**
+   * @ignore
+   */
+  id: PropTypes.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
+   */
+  loading: PropTypes.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: PropTypes.node,
+  /**
+   * The loading indicator can be positioned on the start, end, or the center of the button.
+   * @default 'center'
+   */
+  loadingPosition: PropTypes.oneOf(['center', 'end', 'start']),
+  /**
    * The size of the component.
@@ -464,0 +682,0 @@ * `small` is equivalent to the dense button styling.

Button/buttonClasses.d.ts

@@ -176,2 +176,16 @@ export interface ButtonClasses {
     colorWarning: string;
+    /** Styles applied to the root element if `loading={true}`. */
+    loading: string;
+    /** Styles applied to the loadingWrapper element. */
+    loadingWrapper: string;
+    /** Styles applied to the loadingIconPlaceholder element. */
+    loadingIconPlaceholder: string;
+    /** Styles applied to the loadingIndicator element. */
+    loadingIndicator: string;
+    /** Styles applied to the root element if `loadingPosition="center"`. */
+    loadingPositionCenter: string;
+    /** Styles applied to the root element if `loadingPosition="start"`. */
+    loadingPositionStart: string;
+    /** Styles applied to the root element if `loadingPosition="end"`. */
+    loadingPositionEnd: string;
 }
@@ -178,0 +192,0 @@ export type ButtonClassKey = keyof ButtonClasses;

Button/buttonClasses.js

@@ -6,3 +6,3 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 }
-const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorError', 'colorInfo', 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorError', 'colorInfo', 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge', 'loading', 'loadingWrapper', 'loadingIconPlaceholder', 'loadingIndicator', 'loadingPositionCenter', 'loadingPositionStart', 'loadingPositionEnd']);
 export default buttonClasses;

CardHeader/CardHeader.d.ts

@@ -6,4 +6,112 @@ import * as React from 'react';
 import { Theme } from '..';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 import { CardHeaderClasses } from './cardHeaderClasses';
 
+export interface CardHeaderRootSlotPropsOverrides {}
+
+export interface CardHeaderAvatarSlotPropsOverrides {}
+
+export interface CardHeaderActionSlotPropsOverrides {}
+
+export interface CardHeaderContentSlotPropsOverrides {}
+
+export interface CardHeaderTitleSlotPropsOverrides {}
+
+export interface CardHeaderSubheaderSlotPropsOverrides {}
+
+export interface CardHeaderSlots {
+  /**
+   * The component that renders the root slot.
+   * @default 'div'
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the avatar slot.
+   * @default 'div'
+   */
+  avatar: React.ElementType;
+  /**
+   * The component that renders the action slot.
+   * @default 'div'
+   */
+  action: React.ElementType;
+  /**
+   * The component that renders the content slot.
+   * @default 'div'
+   */
+  content: React.ElementType;
+  /**
+   * The component that renders the title slot (as long as disableTypography is not `true`).
+   * [Follow this guide](https://mui.com/material-ui/api/typography/#props) to learn more about the requirements for this component.
+   * @default Typography
+   */
+  title: React.ElementType;
+  /**
+   * The component that renders the subheader slot (as long as disableTypography is not `true`).
+   * [Follow this guide](https://mui.com/material-ui/api/typography/#props) to learn more about the requirements for this component.
+   * @default Typography
+   */
+  subheader: React.ElementType;
+}
+
+export type CardHeaderSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  CardHeaderSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the div element.
+     */
+    root: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      CardHeaderRootSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+    /**
+     * Props forwarded to the avatar slot.
+     * By default, the avaible props are based on the div element.
+     */
+    avatar: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      CardHeaderAvatarSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+    /**
+     * Props forwarded to the action slot.
+     * By default, the avaible props are based on the div element.
+     */
+    action: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      CardHeaderActionSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+    /**
+     * Props forwarded to the content slot.
+     * By default, the avaible props are based on the div element.
+     */
+    content: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      CardHeaderContentSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+    /**
+     * Props forwarded to the title slot (as long as disableTypography is not `true`).
+     * By default, the avaible props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component.
+     */
+    title: SlotProps<
+      React.ElementType<TypographyProps>,
+      CardHeaderTitleSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+    /**
+     * Props forwarded to the subheader slot (as long as disableTypography is not `true`).
+     * By default, the avaible props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component.
+     */
+    subheader: SlotProps<
+      React.ElementType<TypographyProps>,
+      CardHeaderSubheaderSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+  }
+>;
+
 export interface CardHeaderOwnProps<
@@ -40,2 +148,3 @@ TitleTypographyComponent extends React.ElementType = 'span',
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.subheader` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
@@ -59,2 +168,3 @@ subheaderTypographyProps?: TypographyProps<
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.title` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
@@ -69,2 +179,4 @@ titleTypographyProps?: TypographyProps<
 
+export interface CardHeaderOwnerState extends CardHeaderOwnProps {}
+
 export interface CardHeaderTypeMap<
@@ -77,3 +189,4 @@ AdditionalProps = {},
   props: AdditionalProps &
-    CardHeaderOwnProps<TitleTypographyComponent, SubheaderTypographyComponent>;
+    CardHeaderOwnProps<TitleTypographyComponent, SubheaderTypographyComponent> &
+    CardHeaderSlotsAndSlotProps;
   defaultComponent: RootComponent;
@@ -80,0 +193,0 @@ }

CardHeader/CardHeader.js

@@ -5,3 +5,2 @@ 'use client';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
@@ -12,2 +11,3 @@ import Typography, { typographyClasses } from "../Typography/index.js";
 import cardHeaderClasses, { getCardHeaderUtilityClass } from "./cardHeaderClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -84,3 +84,2 @@ const useUtilityClasses = ownerState => {
     avatar,
-    className,
     component = 'div',
@@ -92,2 +91,4 @@ disableTypography = false,
     titleTypographyProps,
+    slots = {},
+    slotProps = {},
     ...other
@@ -101,9 +102,24 @@ } = props;
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      title: titleTypographyProps,
+      subheader: subheaderTypographyProps,
+      ...slotProps
+    }
+  };
   let title = titleProp;
+  const [TitleSlot, titleSlotProps] = useSlot('title', {
+    className: classes.title,
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      variant: avatar ? 'body2' : 'h5',
+      component: 'span'
+    }
+  });
   if (title != null && title.type !== Typography && !disableTypography) {
-    title = /*#__PURE__*/_jsx(Typography, {
-      variant: avatar ? 'body2' : 'h5',
-      className: classes.title,
-      component: "span",
-      ...titleTypographyProps,
+    title = /*#__PURE__*/_jsx(TitleSlot, {
+      ...titleSlotProps,
       children: title
@@ -113,29 +129,58 @@ });
   let subheader = subheaderProp;
+  const [SubheaderSlot, subheaderSlotProps] = useSlot('subheader', {
+    className: classes.subheader,
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      variant: avatar ? 'body2' : 'body1',
+      color: 'textSecondary',
+      component: 'span'
+    }
+  });
   if (subheader != null && subheader.type !== Typography && !disableTypography) {
-    subheader = /*#__PURE__*/_jsx(Typography, {
-      variant: avatar ? 'body2' : 'body1',
-      className: classes.subheader,
-      color: "textSecondary",
-      component: "span",
-      ...subheaderTypographyProps,
+    subheader = /*#__PURE__*/_jsx(SubheaderSlot, {
+      ...subheaderSlotProps,
       children: subheader
     });
   }
-  return /*#__PURE__*/_jsxs(CardHeaderRoot, {
-    className: clsx(classes.root, className),
-    as: component,
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
-    children: [avatar && /*#__PURE__*/_jsx(CardHeaderAvatar, {
-      className: classes.avatar,
-      ownerState: ownerState,
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    className: classes.root,
+    elementType: CardHeaderRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+      component
+    },
+    ownerState
+  });
+  const [AvatarSlot, avatarSlotProps] = useSlot('avatar', {
+    className: classes.avatar,
+    elementType: CardHeaderAvatar,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ContentSlot, contentSlotProps] = useSlot('content', {
+    className: classes.content,
+    elementType: CardHeaderContent,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ActionSlot, actionSlotProps] = useSlot('action', {
+    className: classes.action,
+    elementType: CardHeaderAction,
+    externalForwardedProps,
+    ownerState
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootSlotProps,
+    children: [avatar && /*#__PURE__*/_jsx(AvatarSlot, {
+      ...avatarSlotProps,
       children: avatar
-    }), /*#__PURE__*/_jsxs(CardHeaderContent, {
-      className: classes.content,
-      ownerState: ownerState,
+    }), /*#__PURE__*/_jsxs(ContentSlot, {
+      ...contentSlotProps,
       children: [title, subheader]
-    }), action && /*#__PURE__*/_jsx(CardHeaderAction, {
-      className: classes.action,
-      ownerState: ownerState,
+    }), action && /*#__PURE__*/_jsx(ActionSlot, {
+      ...actionSlotProps,
       children: action
@@ -167,6 +212,2 @@ })]
   /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
    * The component used for the root node.
@@ -185,2 +226,26 @@ * Either a string to use a HTML element or a component.
   /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    avatar: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    subheader: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    title: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    action: PropTypes.elementType,
+    avatar: PropTypes.elementType,
+    content: PropTypes.elementType,
+    root: PropTypes.elementType,
+    subheader: PropTypes.elementType,
+    title: PropTypes.elementType
+  }),
+  /**
    * The content of the component.
@@ -192,2 +257,3 @@ */
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.subheader` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
@@ -206,2 +272,3 @@ subheaderTypographyProps: PropTypes.object,
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.title` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
@@ -208,0 +275,0 @@ titleTypographyProps: PropTypes.object

CircularProgress/CircularProgress.js

@@ -37,4 +37,4 @@ 'use client';
   100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -125px;
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: -126px;
   }
@@ -41,0 +41,0 @@ `;

IconButton/IconButton.d.ts

@@ -51,2 +51,14 @@ import * as React from 'react';
   /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator?: React.ReactNode;
+  /**
    * The size of the component.
@@ -53,0 +65,0 @@ * `small` is equivalent to the dense button styling.

IconButton/IconButton.js

@@ -8,2 +8,3 @@ 'use client';
 import composeClasses from '@mui/utils/composeClasses';
+import { unstable_useId as useId } from '@mui/material/utils';
 import { alpha } from '@mui/system/colorManipulator';
@@ -15,5 +16,6 @@ import { styled } from "../zero-styled/index.js";
 import ButtonBase from "../ButtonBase/index.js";
+import CircularProgress from "../CircularProgress/index.js";
 import capitalize from "../utils/capitalize.js";
 import iconButtonClasses, { getIconButtonUtilityClass } from "./iconButtonClasses.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -25,6 +27,8 @@ const {
     edge,
-    size
+    size,
+    loading
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`]
+    root: ['root', loading && 'loading', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`],
+    loadingIndicator: ['loadingIndicator']
   };
@@ -40,3 +44,3 @@ return composeClasses(slots, getIconButtonUtilityClass, classes);
     } = props;
-    return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
+    return [styles.root, ownerState.loading && styles.loading, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
   }
@@ -144,4 +148,30 @@ })(memoTheme(({
     color: (theme.vars || theme).palette.action.disabled
+  },
+  [`&.${iconButtonClasses.loading}`]: {
+    color: 'transparent'
   }
 })));
+const IconButtonLoadingIndicator = styled('span', {
+  name: 'MuiIconButton',
+  slot: 'LoadingIndicator',
+  overridesResolver: (props, styles) => styles.loadingIndicator
+})(({
+  theme
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  visibility: 'visible',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  color: (theme.vars || theme).palette.action.disabled,
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: 'flex'
+    }
+  }]
+}));
 
@@ -165,4 +195,13 @@ /**
     size = 'medium',
+    id: idProp,
+    loading = false,
+    loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
+  const id = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
   const ownerState = {
@@ -174,14 +213,21 @@ ...props,
     disableFocusRipple,
+    loading,
+    loadingIndicator,
     size
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(IconButtonRoot, {
+  return /*#__PURE__*/_jsxs(IconButtonRoot, {
+    id: id,
     className: clsx(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,
-    disabled: disabled,
+    disabled: disabled || loading,
     ref: ref,
     ...other,
     ownerState: ownerState,
-    children: children
+    children: [/*#__PURE__*/_jsx(IconButtonLoadingIndicator, {
+      className: classes.loadingIndicator,
+      ownerState: ownerState,
+      children: loading && loadingIndicator
+    }), children]
   });
@@ -246,2 +292,18 @@ });
   /**
+   * @ignore
+   */
+  id: PropTypes.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * @default false
+   */
+  loading: PropTypes.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: PropTypes.node,
+  /**
    * The size of the component.
@@ -248,0 +310,0 @@ * `small` is equivalent to the dense button styling.

IconButton/iconButtonClasses.d.ts

@@ -30,2 +30,6 @@ export interface IconButtonClasses {
     sizeLarge: string;
+    /** Styles applied to the root element if `loading={true}`. */
+    loading: string;
+    /** Styles applied to the loadingIndicator element. */
+    loadingIndicator: string;
 }
@@ -32,0 +36,0 @@ export type IconButtonClassKey = keyof IconButtonClasses;

IconButton/iconButtonClasses.js

@@ -6,3 +6,3 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 }
-const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'loading', 'loadingIndicator']);
 export default iconButtonClasses;

index.js

 /**
- * @mui/material v6.3.1
+ * @mui/material v6.4.0
  *
@@ -4,0 +4,0 @@ * @license MIT

LinearProgress/LinearProgress.js

@@ -87,4 +87,4 @@ 'use client';
     dashed: ['dashed', `dashedColor${capitalize(color)}`],
-    bar1: ['bar', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
-    bar2: ['bar', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
+    bar1: ['bar', 'bar1', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
+    bar2: ['bar', 'bar2', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
   };
@@ -207,3 +207,3 @@ return composeClasses(slots, getLinearProgressUtilityClass, classes);
     } = props;
-    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
+    return [styles.bar, styles.bar1, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
   }
@@ -272,3 +272,3 @@ })(memoTheme(({
     } = props;
-    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
+    return [styles.bar, styles.bar2, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
   }
@@ -275,0 +275,0 @@ })(memoTheme(({

LinearProgress/linearProgressClasses.d.ts

@@ -18,21 +18,43 @@ export interface LinearProgressClasses {
     dashed: string;
-    /** Styles applied to the additional bar element if `variant="buffer"` and `color="primary"`. */
+    /** Styles applied to the additional bar element if `variant="buffer"` and `color="primary"`.
+     * @deprecated Combine the [.MuiLinearProgress-dashed](/material-ui/api/linear-progress/#linear-progress-classes-dashed) and [.MuiLinearProgress-colorPrimary](/material-ui/api/linear-progress/#linear-progress-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     dashedColorPrimary: string;
-    /** Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`. */
+    /** Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`.
+     * @deprecated Combine the [.MuiLinearProgress-dashed](/material-ui/api/linear-progress/#linear-progress-classes-dashed) and [.MuiLinearProgress-colorSecondary](/material-ui/api/linear-progress/#linear-progress-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     dashedColorSecondary: string;
     /** Styles applied to the layered bar1 and bar2 elements. */
     bar: string;
-    /** Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer". */
+    /** Styles applied to the bar1 element. */
+    bar1: string;
+    /** Styles applied to the bar2 element. */
+    bar2: string;
+    /** Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer".
+     * @deprecated Use the [.MuiLinearProgress-bar](/material-ui/api/linear-progress/#linear-progress-classes-bar) and [.MuiLinearProgress-colorPrimary](/material-ui/api/linear-progress/#linear-progress-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     barColorPrimary: string;
-    /** Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer". */
+    /** Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer".
+     * @deprecated Use the [.MuiLinearProgress-bar](/material-ui/api/linear-progress/#linear-progress-classes-bar) and [.MuiLinearProgress-colorSecondary](/material-ui/api/linear-progress/#linear-progress-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     barColorSecondary: string;
-    /** Styles applied to the bar1 element if `variant="indeterminate or query"`. */
+    /** Styles applied to the bar1 element if `variant="indeterminate or query"`.
+     * @deprecated Use the [.MuiLinearProgress-bar1](/material-ui/api/linear-progress/#linear-progress-classes-bar1) and [.MuiLinearProgress-indeterminate](/material-ui/api/linear-progress/#linear-progress-classes-indeterminate) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     bar1Indeterminate: string;
-    /** Styles applied to the bar1 element if `variant="determinate"`. */
+    /** Styles applied to the bar1 element if `variant="determinate"`.
+     * @deprecated Use the [.MuiLinearProgress-bar1](/material-ui/api/linear-progress/#linear-progress-classes-bar1) and [.MuiLinearProgress-determinate](/material-ui/api/linear-progress/#linear-progress-classes-determinate) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     bar1Determinate: string;
-    /** Styles applied to the bar1 element if `variant="buffer"`. */
+    /** Styles applied to the bar1 element if `variant="buffer"`.
+     * @deprecated Use the [.MuiLinearProgress-bar1](/material-ui/api/linear-progress/#linear-progress-classes-bar1) and [.MuiLinearProgress-buffer](/material-ui/api/linear-progress/#linear-progress-classes-buffer) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     bar1Buffer: string;
-    /** Styles applied to the bar2 element if `variant="indeterminate or query"`. */
+    /** Styles applied to the bar2 element if `variant="indeterminate or query"`.
+     * @deprecated Use the [.MuiLinearProgress-bar2](/material-ui/api/linear-progress/#linear-progress-classes-bar2) and [.MuiLinearProgress-indeterminate](/material-ui/api/linear-progress/#linear-progress-classes-indeterminate) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     bar2Indeterminate: string;
-    /** Styles applied to the bar2 element if `variant="buffer"`. */
+    /** Styles applied to the bar2 element if `variant="buffer"`.
+     * @deprecated Use the [.MuiLinearProgress-bar2](/material-ui/api/linear-progress/#linear-progress-classes-bar2) and [.MuiLinearProgress-buffer](/material-ui/api/linear-progress/#linear-progress-classes-buffer) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     bar2Buffer: string;
@@ -39,0 +61,0 @@ }

LinearProgress/linearProgressClasses.js

@@ -6,3 +6,3 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 }
-const linearProgressClasses = generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
+const linearProgressClasses = generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'bar1', 'bar2', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
 export default linearProgressClasses;

Link/getTextDecoration.js

@@ -8,4 +8,5 @@ import { getPath } from '@mui/system/style';
   const transformedColor = ownerState.color;
-  const color = getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
-  const channelColor = getPath(theme, `palette.${transformedColor}Channel`);
+  // check the `main` color first for a custom palette, then fallback to the color itself
+  const color = getPath(theme, `palette.${transformedColor}.main`, false) || getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
+  const channelColor = getPath(theme, `palette.${transformedColor}.mainChannel`) || getPath(theme, `palette.${transformedColor}Channel`);
   if ('vars' in theme && channelColor) {
@@ -12,0 +13,0 @@ return `rgba(${channelColor} / 0.4)`;

modern/Alert/Alert.js

@@ -190,2 +190,35 @@ 'use client';
   };
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    shouldForwardComponentProp: true,
+    className: clsx(classes.root, className),
+    elementType: AlertRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    additionalProps: {
+      role,
+      elevation: 0
+    }
+  });
+  const [IconSlot, iconSlotProps] = useSlot('icon', {
+    className: classes.icon,
+    elementType: AlertIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [MessageSlot, messageSlotProps] = useSlot('message', {
+    className: classes.message,
+    elementType: AlertMessage,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ActionSlot, actionSlotProps] = useSlot('action', {
+    className: classes.action,
+    elementType: AlertAction,
+    externalForwardedProps,
+    ownerState
+  });
   const [CloseButtonSlot, closeButtonProps] = useSlot('closeButton', {
@@ -201,24 +234,15 @@ elementType: IconButton,
   });
-  return /*#__PURE__*/_jsxs(AlertRoot, {
-    role: role,
-    elevation: 0,
-    ownerState: ownerState,
-    className: clsx(classes.root, className),
-    ref: ref,
-    ...other,
-    children: [icon !== false ? /*#__PURE__*/_jsx(AlertIcon, {
-      ownerState: ownerState,
-      className: classes.icon,
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootSlotProps,
+    children: [icon !== false ? /*#__PURE__*/_jsx(IconSlot, {
+      ...iconSlotProps,
       children: icon || iconMapping[severity] || defaultIconMapping[severity]
-    }) : null, /*#__PURE__*/_jsx(AlertMessage, {
-      ownerState: ownerState,
-      className: classes.message,
+    }) : null, /*#__PURE__*/_jsx(MessageSlot, {
+      ...messageSlotProps,
       children: children
-    }), action != null ? /*#__PURE__*/_jsx(AlertAction, {
-      ownerState: ownerState,
-      className: classes.action,
+    }), action != null ? /*#__PURE__*/_jsx(ActionSlot, {
+      ...actionSlotProps,
       children: action
-    }) : null, action == null && onClose ? /*#__PURE__*/_jsx(AlertAction, {
-      ownerState: ownerState,
-      className: classes.action,
+    }) : null, action == null && onClose ? /*#__PURE__*/_jsx(ActionSlot, {
+      ...actionSlotProps,
       children: /*#__PURE__*/_jsx(CloseButtonSlot, {
@@ -335,4 +359,8 @@ size: "small",
   slotProps: PropTypes.shape({
+    action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     closeButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    closeIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    closeIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    message: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
@@ -344,4 +372,8 @@ /**
   slots: PropTypes.shape({
+    action: PropTypes.elementType,
     closeButton: PropTypes.elementType,
-    closeIcon: PropTypes.elementType
+    closeIcon: PropTypes.elementType,
+    icon: PropTypes.elementType,
+    message: PropTypes.elementType,
+    root: PropTypes.elementType
   }),
@@ -348,0 +380,0 @@ /**

modern/Button/Button.js

@@ -9,2 +9,3 @@ 'use client';
 import { alpha } from '@mui/system/colorManipulator';
+import { unstable_useId as useId } from '@mui/material/utils';
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
@@ -15,2 +16,3 @@ import { styled } from "../zero-styled/index.js";
 import ButtonBase from "../ButtonBase/index.js";
+import CircularProgress from "../CircularProgress/index.js";
 import capitalize from "../utils/capitalize.js";
@@ -29,9 +31,12 @@ import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
     variant,
+    loading,
+    loadingPosition,
     classes
   } = ownerState;
   const slots = {
-    root: ['root', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth'],
-    label: ['label'],
+    root: ['root', loading && 'loading', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', loading && `loadingPosition${capitalize(loadingPosition)}`],
     startIcon: ['icon', 'startIcon', `iconSize${capitalize(size)}`],
-    endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`]
+    endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`],
+    loadingIndicator: ['loadingIndicator'],
+    loadingWrapper: ['loadingWrapper']
   };
@@ -81,3 +86,3 @@ const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
     } = props;
-    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth];
+    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.loading && styles.loading];
   }
@@ -269,2 +274,14 @@ })(memoTheme(({
       }
+    }, {
+      props: {
+        loadingPosition: 'center'
+      },
+      style: {
+        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+          duration: theme.transitions.duration.short
+        }),
+        [`&.${buttonClasses.loading}`]: {
+          color: 'transparent'
+        }
+      }
     }]
@@ -280,5 +297,7 @@ };
     } = props;
-    return [styles.startIcon, styles[`iconSize${capitalize(ownerState.size)}`]];
+    return [styles.startIcon, ownerState.loading && styles.startIconLoadingStart, styles[`iconSize${capitalize(ownerState.size)}`]];
   }
-})({
+})(({
+  theme
+}) => ({
   display: 'inherit',
@@ -294,4 +313,24 @@ marginRight: 8,
     }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      loading: true
+    },
+    style: {
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      loading: true,
+      fullWidth: true
+    },
+    style: {
+      marginRight: -8
+    }
   }, ...commonIconStyles]
-});
+}));
 const ButtonEndIcon = styled('span', {
@@ -304,5 +343,7 @@ name: 'MuiButton',
     } = props;
-    return [styles.endIcon, styles[`iconSize${capitalize(ownerState.size)}`]];
+    return [styles.endIcon, ownerState.loading && styles.endIconLoadingEnd, styles[`iconSize${capitalize(ownerState.size)}`]];
   }
-})({
+})(({
+  theme
+}) => ({
   display: 'inherit',
@@ -318,3 +359,124 @@ marginRight: -4,
     }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      loading: true
+    },
+    style: {
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      loading: true,
+      fullWidth: true
+    },
+    style: {
+      marginLeft: -8
+    }
   }, ...commonIconStyles]
+}));
+const ButtonLoadingIndicator = styled('span', {
+  name: 'MuiButton',
+  slot: 'LoadingIndicator',
+  overridesResolver: (props, styles) => styles.loadingIndicator
+})(({
+  theme
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  visibility: 'visible',
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: 'flex'
+    }
+  }, {
+    props: {
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 14
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      size: 'small'
+    },
+    style: {
+      left: 10
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'center'
+    },
+    style: {
+      left: '50%',
+      transform: 'translate(-50%)',
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }, {
+    props: {
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 14
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      size: 'small'
+    },
+    style: {
+      right: 10
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      fullWidth: true
+    },
+    style: {
+      position: 'relative',
+      left: -10
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      fullWidth: true
+    },
+    style: {
+      position: 'relative',
+      right: -10
+    }
+  }]
+}));
+const ButtonLoadingIconPlaceholder = styled('span', {
+  name: 'MuiButton',
+  slot: 'LoadingIconPlaceholder',
+  overridesResolver: (props, styles) => styles.loadingIconPlaceholder
+})({
+  display: 'inline-block',
+  width: '1em',
+  height: '1em'
 });
@@ -341,2 +503,6 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     fullWidth = false,
+    id: idProp,
+    loading = null,
+    loadingIndicator: loadingIndicatorProp,
+    loadingPosition = 'center',
     size = 'medium',
@@ -348,2 +514,8 @@ startIcon: startIconProp,
   } = props;
+  const id = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
   const ownerState = {
@@ -357,2 +529,5 @@ ...props,
     fullWidth,
+    loading,
+    loadingIndicator,
+    loadingPosition,
     size,
@@ -363,13 +538,33 @@ type,
   const classes = useUtilityClasses(ownerState);
-  const startIcon = startIconProp && /*#__PURE__*/_jsx(ButtonStartIcon, {
+  const startIcon = (startIconProp || loading && loadingPosition === 'start') && /*#__PURE__*/_jsx(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState: ownerState,
-    children: startIconProp
+    children: startIconProp || /*#__PURE__*/_jsx(ButtonLoadingIconPlaceholder, {
+      className: classes.loadingIconPlaceholder,
+      ownerState: ownerState
+    })
   });
-  const endIcon = endIconProp && /*#__PURE__*/_jsx(ButtonEndIcon, {
+  const endIcon = (endIconProp || loading && loadingPosition === 'end') && /*#__PURE__*/_jsx(ButtonEndIcon, {
     className: classes.endIcon,
     ownerState: ownerState,
-    children: endIconProp
+    children: endIconProp || /*#__PURE__*/_jsx(ButtonLoadingIconPlaceholder, {
+      className: classes.loadingIconPlaceholder,
+      ownerState: ownerState
+    })
   });
   const positionClassName = buttonGroupButtonContextPositionClassName || '';
+  const loader = typeof loading === 'boolean' ?
+  /*#__PURE__*/
+  // use plain HTML span to minimize the runtime overhead
+  _jsx("span", {
+    className: classes.loadingWrapper,
+    style: {
+      display: 'contents'
+    },
+    children: loading && /*#__PURE__*/_jsx(ButtonLoadingIndicator, {
+      className: classes.loadingIndicator,
+      ownerState: ownerState,
+      children: loadingIndicator
+    })
+  }) : null;
   return /*#__PURE__*/_jsxs(ButtonRoot, {
@@ -379,3 +574,3 @@ ownerState: ownerState,
     component: component,
-    disabled: disabled,
+    disabled: disabled || loading,
     focusRipple: !disableFocusRipple,
@@ -385,5 +580,6 @@ focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     type: type,
+    id: id,
     ...other,
     classes: classes,
-    children: [startIcon, children, endIcon]
+    children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
   });
@@ -462,2 +658,24 @@ });
   /**
+   * @ignore
+   */
+  id: PropTypes.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
+   */
+  loading: PropTypes.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: PropTypes.node,
+  /**
+   * The loading indicator can be positioned on the start, end, or the center of the button.
+   * @default 'center'
+   */
+  loadingPosition: PropTypes.oneOf(['center', 'end', 'start']),
+  /**
    * The size of the component.
@@ -464,0 +682,0 @@ * `small` is equivalent to the dense button styling.

modern/Button/buttonClasses.js

@@ -6,3 +6,3 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 }
-const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorError', 'colorInfo', 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorError', 'colorInfo', 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge', 'loading', 'loadingWrapper', 'loadingIconPlaceholder', 'loadingIndicator', 'loadingPositionCenter', 'loadingPositionStart', 'loadingPositionEnd']);
 export default buttonClasses;

modern/CardHeader/CardHeader.js

@@ -5,3 +5,2 @@ 'use client';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
@@ -12,2 +11,3 @@ import Typography, { typographyClasses } from "../Typography/index.js";
 import cardHeaderClasses, { getCardHeaderUtilityClass } from "./cardHeaderClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -84,3 +84,2 @@ const useUtilityClasses = ownerState => {
     avatar,
-    className,
     component = 'div',
@@ -92,2 +91,4 @@ disableTypography = false,
     titleTypographyProps,
+    slots = {},
+    slotProps = {},
     ...other
@@ -101,9 +102,24 @@ } = props;
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      title: titleTypographyProps,
+      subheader: subheaderTypographyProps,
+      ...slotProps
+    }
+  };
   let title = titleProp;
+  const [TitleSlot, titleSlotProps] = useSlot('title', {
+    className: classes.title,
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      variant: avatar ? 'body2' : 'h5',
+      component: 'span'
+    }
+  });
   if (title != null && title.type !== Typography && !disableTypography) {
-    title = /*#__PURE__*/_jsx(Typography, {
-      variant: avatar ? 'body2' : 'h5',
-      className: classes.title,
-      component: "span",
-      ...titleTypographyProps,
+    title = /*#__PURE__*/_jsx(TitleSlot, {
+      ...titleSlotProps,
       children: title
@@ -113,29 +129,58 @@ });
   let subheader = subheaderProp;
+  const [SubheaderSlot, subheaderSlotProps] = useSlot('subheader', {
+    className: classes.subheader,
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      variant: avatar ? 'body2' : 'body1',
+      color: 'textSecondary',
+      component: 'span'
+    }
+  });
   if (subheader != null && subheader.type !== Typography && !disableTypography) {
-    subheader = /*#__PURE__*/_jsx(Typography, {
-      variant: avatar ? 'body2' : 'body1',
-      className: classes.subheader,
-      color: "textSecondary",
-      component: "span",
-      ...subheaderTypographyProps,
+    subheader = /*#__PURE__*/_jsx(SubheaderSlot, {
+      ...subheaderSlotProps,
       children: subheader
     });
   }
-  return /*#__PURE__*/_jsxs(CardHeaderRoot, {
-    className: clsx(classes.root, className),
-    as: component,
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
-    children: [avatar && /*#__PURE__*/_jsx(CardHeaderAvatar, {
-      className: classes.avatar,
-      ownerState: ownerState,
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    className: classes.root,
+    elementType: CardHeaderRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+      component
+    },
+    ownerState
+  });
+  const [AvatarSlot, avatarSlotProps] = useSlot('avatar', {
+    className: classes.avatar,
+    elementType: CardHeaderAvatar,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ContentSlot, contentSlotProps] = useSlot('content', {
+    className: classes.content,
+    elementType: CardHeaderContent,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ActionSlot, actionSlotProps] = useSlot('action', {
+    className: classes.action,
+    elementType: CardHeaderAction,
+    externalForwardedProps,
+    ownerState
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootSlotProps,
+    children: [avatar && /*#__PURE__*/_jsx(AvatarSlot, {
+      ...avatarSlotProps,
       children: avatar
-    }), /*#__PURE__*/_jsxs(CardHeaderContent, {
-      className: classes.content,
-      ownerState: ownerState,
+    }), /*#__PURE__*/_jsxs(ContentSlot, {
+      ...contentSlotProps,
       children: [title, subheader]
-    }), action && /*#__PURE__*/_jsx(CardHeaderAction, {
-      className: classes.action,
-      ownerState: ownerState,
+    }), action && /*#__PURE__*/_jsx(ActionSlot, {
+      ...actionSlotProps,
       children: action
@@ -167,6 +212,2 @@ })]
   /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
    * The component used for the root node.
@@ -185,2 +226,26 @@ * Either a string to use a HTML element or a component.
   /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    avatar: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    subheader: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    title: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    action: PropTypes.elementType,
+    avatar: PropTypes.elementType,
+    content: PropTypes.elementType,
+    root: PropTypes.elementType,
+    subheader: PropTypes.elementType,
+    title: PropTypes.elementType
+  }),
+  /**
    * The content of the component.
@@ -192,2 +257,3 @@ */
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.subheader` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
@@ -206,2 +272,3 @@ subheaderTypographyProps: PropTypes.object,
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.title` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
@@ -208,0 +275,0 @@ titleTypographyProps: PropTypes.object

modern/CircularProgress/CircularProgress.js

@@ -37,4 +37,4 @@ 'use client';
   100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -125px;
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: -126px;
   }
@@ -41,0 +41,0 @@ `;

modern/IconButton/IconButton.js

@@ -8,2 +8,3 @@ 'use client';
 import composeClasses from '@mui/utils/composeClasses';
+import { unstable_useId as useId } from '@mui/material/utils';
 import { alpha } from '@mui/system/colorManipulator';
@@ -15,5 +16,6 @@ import { styled } from "../zero-styled/index.js";
 import ButtonBase from "../ButtonBase/index.js";
+import CircularProgress from "../CircularProgress/index.js";
 import capitalize from "../utils/capitalize.js";
 import iconButtonClasses, { getIconButtonUtilityClass } from "./iconButtonClasses.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -25,6 +27,8 @@ const {
     edge,
-    size
+    size,
+    loading
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`]
+    root: ['root', loading && 'loading', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`],
+    loadingIndicator: ['loadingIndicator']
   };
@@ -40,3 +44,3 @@ return composeClasses(slots, getIconButtonUtilityClass, classes);
     } = props;
-    return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
+    return [styles.root, ownerState.loading && styles.loading, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
   }
@@ -144,4 +148,30 @@ })(memoTheme(({
     color: (theme.vars || theme).palette.action.disabled
+  },
+  [`&.${iconButtonClasses.loading}`]: {
+    color: 'transparent'
   }
 })));
+const IconButtonLoadingIndicator = styled('span', {
+  name: 'MuiIconButton',
+  slot: 'LoadingIndicator',
+  overridesResolver: (props, styles) => styles.loadingIndicator
+})(({
+  theme
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  visibility: 'visible',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  color: (theme.vars || theme).palette.action.disabled,
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: 'flex'
+    }
+  }]
+}));
 
@@ -165,4 +195,13 @@ /**
     size = 'medium',
+    id: idProp,
+    loading = false,
+    loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
+  const id = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
   const ownerState = {
@@ -174,14 +213,21 @@ ...props,
     disableFocusRipple,
+    loading,
+    loadingIndicator,
     size
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(IconButtonRoot, {
+  return /*#__PURE__*/_jsxs(IconButtonRoot, {
+    id: id,
     className: clsx(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,
-    disabled: disabled,
+    disabled: disabled || loading,
     ref: ref,
     ...other,
     ownerState: ownerState,
-    children: children
+    children: [/*#__PURE__*/_jsx(IconButtonLoadingIndicator, {
+      className: classes.loadingIndicator,
+      ownerState: ownerState,
+      children: loading && loadingIndicator
+    }), children]
   });
@@ -246,2 +292,18 @@ });
   /**
+   * @ignore
+   */
+  id: PropTypes.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * @default false
+   */
+  loading: PropTypes.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: PropTypes.node,
+  /**
    * The size of the component.
@@ -248,0 +310,0 @@ * `small` is equivalent to the dense button styling.

modern/IconButton/iconButtonClasses.js

@@ -6,3 +6,3 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 }
-const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'loading', 'loadingIndicator']);
 export default iconButtonClasses;

modern/index.js

 /**
- * @mui/material v6.3.1
+ * @mui/material v6.4.0
  *
@@ -4,0 +4,0 @@ * @license MIT

modern/LinearProgress/LinearProgress.js

@@ -87,4 +87,4 @@ 'use client';
     dashed: ['dashed', `dashedColor${capitalize(color)}`],
-    bar1: ['bar', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
-    bar2: ['bar', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
+    bar1: ['bar', 'bar1', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
+    bar2: ['bar', 'bar2', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
   };
@@ -207,3 +207,3 @@ return composeClasses(slots, getLinearProgressUtilityClass, classes);
     } = props;
-    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
+    return [styles.bar, styles.bar1, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
   }
@@ -272,3 +272,3 @@ })(memoTheme(({
     } = props;
-    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
+    return [styles.bar, styles.bar2, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
   }
@@ -275,0 +275,0 @@ })(memoTheme(({

modern/LinearProgress/linearProgressClasses.js

@@ -6,3 +6,3 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 }
-const linearProgressClasses = generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
+const linearProgressClasses = generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'bar1', 'bar2', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
 export default linearProgressClasses;

modern/Link/getTextDecoration.js

@@ -8,4 +8,5 @@ import { getPath } from '@mui/system/style';
   const transformedColor = ownerState.color;
-  const color = getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
-  const channelColor = getPath(theme, `palette.${transformedColor}Channel`);
+  // check the `main` color first for a custom palette, then fallback to the color itself
+  const color = getPath(theme, `palette.${transformedColor}.main`, false) || getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
+  const channelColor = getPath(theme, `palette.${transformedColor}.mainChannel`) || getPath(theme, `palette.${transformedColor}Channel`);
   if ('vars' in theme && channelColor) {
@@ -12,0 +13,0 @@ return `rgba(${channelColor} / 0.4)`;

modern/Select/Select.js

@@ -7,2 +7,3 @@ 'use client';
 import deepmerge from '@mui/utils/deepmerge';
+import composeClasses from '@mui/utils/composeClasses';
 import getReactElementRef from '@mui/utils/getReactElementRef';
@@ -21,2 +22,3 @@ import SelectInput from "./SelectInput.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
+import { getSelectUtilityClasses } from "./selectClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -27,3 +29,10 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
-  return classes;
+  const slots = {
+    root: ['root']
+  };
+  const composedClasses = composeClasses(slots, getSelectUtilityClasses, classes);
+  return {
+    ...classes,
+    ...composedClasses
+  };
 };
@@ -30,0 +39,0 @@ const styledRootConfig = {

modern/Select/SelectInput.js

@@ -446,3 +446,3 @@ 'use client';
       role: "combobox",
-      "aria-controls": listboxId,
+      "aria-controls": open ? listboxId : undefined,
       "aria-disabled": disabled ? 'true' : undefined,
@@ -449,0 +449,0 @@ "aria-expanded": open ? 'true' : 'false',

modern/Slider/useSlider.js

@@ -191,2 +191,4 @@ 'use client';
   const moveCount = React.useRef(0);
+  // lastChangedValue is updated whenever onChange is triggered.
+  const lastChangedValue = React.useRef(null);
   const [valueDerived, setValueState] = useControlled({
@@ -212,2 +214,3 @@ controlled: valueProp,
     });
+    lastChangedValue.current = value;
     onChange(clonedEvent, value, thumbIndex);
@@ -284,3 +287,3 @@ });
     if (onChangeCommitted) {
-      onChangeCommitted(event, newValue);
+      onChangeCommitted(event, lastChangedValue.current ?? newValue);
     }
@@ -490,3 +493,3 @@ };
     if (onChangeCommitted) {
-      onChangeCommitted(nativeEvent, newValue);
+      onChangeCommitted(nativeEvent, lastChangedValue.current ?? newValue);
     }
@@ -493,0 +496,0 @@ touchId.current = undefined;

modern/utils/index.js

@@ -21,2 +21,3 @@ 'use client';
 export { default as useForkRef } from "./useForkRef.js";
+export { default as mergeSlotProps } from "./mergeSlotProps.js";
 // TODO: remove this export once ClassNameGenerator is stable
@@ -23,0 +24,0 @@ // eslint-disable-next-line @typescript-eslint/naming-convention

modern/utils/useSlot.js

@@ -35,2 +35,3 @@ 'use client';
     internalForwardedProps,
+    shouldForwardComponentProp = false,
     ...useSlotPropsParams
@@ -71,5 +72,8 @@ } = parameters;
     ...mergedProps,
-    ...(LeafComponent && {
+    ...(LeafComponent && !shouldForwardComponentProp && {
       as: LeafComponent
     }),
+    ...(LeafComponent && shouldForwardComponentProp && {
+      component: LeafComponent
+    }),
     ref
@@ -76,0 +80,0 @@ }, ownerState);

modern/version/index.js

@@ -1,6 +0,6 @@
-export const version = "6.3.1";
+export const version = "6.4.0";
 export const major = Number("6");
-export const minor = Number("3");
-export const patch = Number("1");
+export const minor = Number("4");
+export const patch = Number("0");
 export const prerelease = undefined;
 export default version;

node/Alert/Alert.js

@@ -197,2 +197,35 @@ "use strict";
   };
+  const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
+    ref,
+    shouldForwardComponentProp: true,
+    className: (0, _clsx.default)(classes.root, className),
+    elementType: AlertRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    additionalProps: {
+      role,
+      elevation: 0
+    }
+  });
+  const [IconSlot, iconSlotProps] = (0, _useSlot.default)('icon', {
+    className: classes.icon,
+    elementType: AlertIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [MessageSlot, messageSlotProps] = (0, _useSlot.default)('message', {
+    className: classes.message,
+    elementType: AlertMessage,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ActionSlot, actionSlotProps] = (0, _useSlot.default)('action', {
+    className: classes.action,
+    elementType: AlertAction,
+    externalForwardedProps,
+    ownerState
+  });
   const [CloseButtonSlot, closeButtonProps] = (0, _useSlot.default)('closeButton', {
@@ -208,24 +241,15 @@ elementType: _IconButton.default,
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AlertRoot, {
-    role: role,
-    elevation: 0,
-    ownerState: ownerState,
-    className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
-    ...other,
-    children: [icon !== false ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertIcon, {
-      ownerState: ownerState,
-      className: classes.icon,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
+    ...rootSlotProps,
+    children: [icon !== false ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconSlot, {
+      ...iconSlotProps,
       children: icon || iconMapping[severity] || defaultIconMapping[severity]
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertMessage, {
-      ownerState: ownerState,
-      className: classes.message,
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(MessageSlot, {
+      ...messageSlotProps,
       children: children
-    }), action != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertAction, {
-      ownerState: ownerState,
-      className: classes.action,
+    }), action != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionSlot, {
+      ...actionSlotProps,
       children: action
-    }) : null, action == null && onClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertAction, {
-      ownerState: ownerState,
-      className: classes.action,
+    }) : null, action == null && onClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionSlot, {
+      ...actionSlotProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButtonSlot, {
@@ -342,4 +366,8 @@ size: "small",
   slotProps: _propTypes.default.shape({
+    action: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     closeButton: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-    closeIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+    closeIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    message: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
@@ -351,4 +379,8 @@ /**
   slots: _propTypes.default.shape({
+    action: _propTypes.default.elementType,
     closeButton: _propTypes.default.elementType,
-    closeIcon: _propTypes.default.elementType
+    closeIcon: _propTypes.default.elementType,
+    icon: _propTypes.default.elementType,
+    message: _propTypes.default.elementType,
+    root: _propTypes.default.elementType
   }),
@@ -355,0 +387,0 @@ /**

node/Button/Button.js

@@ -16,2 +16,3 @@ "use strict";
 var _colorManipulator = require("@mui/system/colorManipulator");
+var _utils = require("@mui/material/utils");
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
@@ -22,2 +23,3 @@ var _zeroStyled = require("../zero-styled");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
+var _CircularProgress = _interopRequireDefault(require("../CircularProgress"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -36,9 +38,12 @@ var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
     variant,
+    loading,
+    loadingPosition,
     classes
   } = ownerState;
   const slots = {
-    root: ['root', variant, `${variant}${(0, _capitalize.default)(color)}`, `size${(0, _capitalize.default)(size)}`, `${variant}Size${(0, _capitalize.default)(size)}`, `color${(0, _capitalize.default)(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth'],
-    label: ['label'],
+    root: ['root', loading && 'loading', variant, `${variant}${(0, _capitalize.default)(color)}`, `size${(0, _capitalize.default)(size)}`, `${variant}Size${(0, _capitalize.default)(size)}`, `color${(0, _capitalize.default)(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', loading && `loadingPosition${(0, _capitalize.default)(loadingPosition)}`],
     startIcon: ['icon', 'startIcon', `iconSize${(0, _capitalize.default)(size)}`],
-    endIcon: ['icon', 'endIcon', `iconSize${(0, _capitalize.default)(size)}`]
+    endIcon: ['icon', 'endIcon', `iconSize${(0, _capitalize.default)(size)}`],
+    loadingIndicator: ['loadingIndicator'],
+    loadingWrapper: ['loadingWrapper']
   };
@@ -88,3 +93,3 @@ const composedClasses = (0, _composeClasses.default)(slots, _buttonClasses.getButtonUtilityClass, classes);
     } = props;
-    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${(0, _capitalize.default)(ownerState.color)}`], styles[`size${(0, _capitalize.default)(ownerState.size)}`], styles[`${ownerState.variant}Size${(0, _capitalize.default)(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth];
+    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${(0, _capitalize.default)(ownerState.color)}`], styles[`size${(0, _capitalize.default)(ownerState.size)}`], styles[`${ownerState.variant}Size${(0, _capitalize.default)(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.loading && styles.loading];
   }
@@ -276,2 +281,14 @@ })((0, _memoTheme.default)(({
       }
+    }, {
+      props: {
+        loadingPosition: 'center'
+      },
+      style: {
+        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+          duration: theme.transitions.duration.short
+        }),
+        [`&.${_buttonClasses.default.loading}`]: {
+          color: 'transparent'
+        }
+      }
     }]
@@ -287,5 +304,7 @@ };
     } = props;
-    return [styles.startIcon, styles[`iconSize${(0, _capitalize.default)(ownerState.size)}`]];
+    return [styles.startIcon, ownerState.loading && styles.startIconLoadingStart, styles[`iconSize${(0, _capitalize.default)(ownerState.size)}`]];
   }
-})({
+})(({
+  theme
+}) => ({
   display: 'inherit',
@@ -301,4 +320,24 @@ marginRight: 8,
     }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      loading: true
+    },
+    style: {
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      loading: true,
+      fullWidth: true
+    },
+    style: {
+      marginRight: -8
+    }
   }, ...commonIconStyles]
-});
+}));
 const ButtonEndIcon = (0, _zeroStyled.styled)('span', {
@@ -311,5 +350,7 @@ name: 'MuiButton',
     } = props;
-    return [styles.endIcon, styles[`iconSize${(0, _capitalize.default)(ownerState.size)}`]];
+    return [styles.endIcon, ownerState.loading && styles.endIconLoadingEnd, styles[`iconSize${(0, _capitalize.default)(ownerState.size)}`]];
   }
-})({
+})(({
+  theme
+}) => ({
   display: 'inherit',
@@ -325,3 +366,124 @@ marginRight: -4,
     }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      loading: true
+    },
+    style: {
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      loading: true,
+      fullWidth: true
+    },
+    style: {
+      marginLeft: -8
+    }
   }, ...commonIconStyles]
+}));
+const ButtonLoadingIndicator = (0, _zeroStyled.styled)('span', {
+  name: 'MuiButton',
+  slot: 'LoadingIndicator',
+  overridesResolver: (props, styles) => styles.loadingIndicator
+})(({
+  theme
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  visibility: 'visible',
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: 'flex'
+    }
+  }, {
+    props: {
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 14
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      size: 'small'
+    },
+    style: {
+      left: 10
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'center'
+    },
+    style: {
+      left: '50%',
+      transform: 'translate(-50%)',
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }, {
+    props: {
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 14
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      size: 'small'
+    },
+    style: {
+      right: 10
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      fullWidth: true
+    },
+    style: {
+      position: 'relative',
+      left: -10
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      fullWidth: true
+    },
+    style: {
+      position: 'relative',
+      right: -10
+    }
+  }]
+}));
+const ButtonLoadingIconPlaceholder = (0, _zeroStyled.styled)('span', {
+  name: 'MuiButton',
+  slot: 'LoadingIconPlaceholder',
+  overridesResolver: (props, styles) => styles.loadingIconPlaceholder
+})({
+  display: 'inline-block',
+  width: '1em',
+  height: '1em'
 });
@@ -348,2 +510,6 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     fullWidth = false,
+    id: idProp,
+    loading = null,
+    loadingIndicator: loadingIndicatorProp,
+    loadingPosition = 'center',
     size = 'medium',
@@ -355,2 +521,8 @@ startIcon: startIconProp,
   } = props;
+  const id = (0, _utils.unstable_useId)(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
   const ownerState = {
@@ -364,2 +536,5 @@ ...props,
     fullWidth,
+    loading,
+    loadingIndicator,
+    loadingPosition,
     size,
@@ -370,13 +545,33 @@ type,
   const classes = useUtilityClasses(ownerState);
-  const startIcon = startIconProp && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonStartIcon, {
+  const startIcon = (startIconProp || loading && loadingPosition === 'start') && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState: ownerState,
-    children: startIconProp
+    children: startIconProp || /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonLoadingIconPlaceholder, {
+      className: classes.loadingIconPlaceholder,
+      ownerState: ownerState
+    })
   });
-  const endIcon = endIconProp && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonEndIcon, {
+  const endIcon = (endIconProp || loading && loadingPosition === 'end') && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonEndIcon, {
     className: classes.endIcon,
     ownerState: ownerState,
-    children: endIconProp
+    children: endIconProp || /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonLoadingIconPlaceholder, {
+      className: classes.loadingIconPlaceholder,
+      ownerState: ownerState
+    })
   });
   const positionClassName = buttonGroupButtonContextPositionClassName || '';
+  const loader = typeof loading === 'boolean' ?
+  /*#__PURE__*/
+  // use plain HTML span to minimize the runtime overhead
+  (0, _jsxRuntime.jsx)("span", {
+    className: classes.loadingWrapper,
+    style: {
+      display: 'contents'
+    },
+    children: loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonLoadingIndicator, {
+      className: classes.loadingIndicator,
+      ownerState: ownerState,
+      children: loadingIndicator
+    })
+  }) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonRoot, {
@@ -386,3 +581,3 @@ ownerState: ownerState,
     component: component,
-    disabled: disabled,
+    disabled: disabled || loading,
     focusRipple: !disableFocusRipple,
@@ -392,5 +587,6 @@ focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),
     type: type,
+    id: id,
     ...other,
     classes: classes,
-    children: [startIcon, children, endIcon]
+    children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
   });
@@ -469,2 +665,24 @@ });
   /**
+   * @ignore
+   */
+  id: _propTypes.default.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
+   */
+  loading: _propTypes.default.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: _propTypes.default.node,
+  /**
+   * The loading indicator can be positioned on the start, end, or the center of the button.
+   * @default 'center'
+   */
+  loadingPosition: _propTypes.default.oneOf(['center', 'end', 'start']),
+  /**
    * The size of the component.
@@ -471,0 +689,0 @@ * `small` is equivalent to the dense button styling.

node/Button/buttonClasses.js

@@ -14,3 +14,3 @@ "use strict";
 }
-const buttonClasses = (0, _generateUtilityClasses.default)('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorError', 'colorInfo', 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+const buttonClasses = (0, _generateUtilityClasses.default)('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorError', 'colorInfo', 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge', 'loading', 'loadingWrapper', 'loadingIconPlaceholder', 'loadingIndicator', 'loadingPositionCenter', 'loadingPositionStart', 'loadingPositionEnd']);
 var _default = exports.default = buttonClasses;

node/CardHeader/CardHeader.js

@@ -12,3 +12,2 @@ "use strict";
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -19,2 +18,3 @@ var _Typography = _interopRequireWildcard(require("../Typography"));
 var _cardHeaderClasses = _interopRequireWildcard(require("./cardHeaderClasses"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -91,3 +91,2 @@ const useUtilityClasses = ownerState => {
     avatar,
-    className,
     component = 'div',
@@ -99,2 +98,4 @@ disableTypography = false,
     titleTypographyProps,
+    slots = {},
+    slotProps = {},
     ...other
@@ -108,9 +109,24 @@ } = props;
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      title: titleTypographyProps,
+      subheader: subheaderTypographyProps,
+      ...slotProps
+    }
+  };
   let title = titleProp;
+  const [TitleSlot, titleSlotProps] = (0, _useSlot.default)('title', {
+    className: classes.title,
+    elementType: _Typography.default,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      variant: avatar ? 'body2' : 'h5',
+      component: 'span'
+    }
+  });
   if (title != null && title.type !== _Typography.default && !disableTypography) {
-    title = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-      variant: avatar ? 'body2' : 'h5',
-      className: classes.title,
-      component: "span",
-      ...titleTypographyProps,
+    title = /*#__PURE__*/(0, _jsxRuntime.jsx)(TitleSlot, {
+      ...titleSlotProps,
       children: title
@@ -120,29 +136,58 @@ });
   let subheader = subheaderProp;
+  const [SubheaderSlot, subheaderSlotProps] = (0, _useSlot.default)('subheader', {
+    className: classes.subheader,
+    elementType: _Typography.default,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      variant: avatar ? 'body2' : 'body1',
+      color: 'textSecondary',
+      component: 'span'
+    }
+  });
   if (subheader != null && subheader.type !== _Typography.default && !disableTypography) {
-    subheader = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-      variant: avatar ? 'body2' : 'body1',
-      className: classes.subheader,
-      color: "textSecondary",
-      component: "span",
-      ...subheaderTypographyProps,
+    subheader = /*#__PURE__*/(0, _jsxRuntime.jsx)(SubheaderSlot, {
+      ...subheaderSlotProps,
       children: subheader
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardHeaderRoot, {
-    className: (0, _clsx.default)(classes.root, className),
-    as: component,
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
-    children: [avatar && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardHeaderAvatar, {
-      className: classes.avatar,
-      ownerState: ownerState,
+  const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
+    ref,
+    className: classes.root,
+    elementType: CardHeaderRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+      component
+    },
+    ownerState
+  });
+  const [AvatarSlot, avatarSlotProps] = (0, _useSlot.default)('avatar', {
+    className: classes.avatar,
+    elementType: CardHeaderAvatar,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ContentSlot, contentSlotProps] = (0, _useSlot.default)('content', {
+    className: classes.content,
+    elementType: CardHeaderContent,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ActionSlot, actionSlotProps] = (0, _useSlot.default)('action', {
+    className: classes.action,
+    elementType: CardHeaderAction,
+    externalForwardedProps,
+    ownerState
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
+    ...rootSlotProps,
+    children: [avatar && /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarSlot, {
+      ...avatarSlotProps,
       children: avatar
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardHeaderContent, {
-      className: classes.content,
-      ownerState: ownerState,
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentSlot, {
+      ...contentSlotProps,
       children: [title, subheader]
-    }), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardHeaderAction, {
-      className: classes.action,
-      ownerState: ownerState,
+    }), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionSlot, {
+      ...actionSlotProps,
       children: action
@@ -174,6 +219,2 @@ })]
   /**
-   * @ignore
-   */
-  className: _propTypes.default.string,
-  /**
    * The component used for the root node.
@@ -192,2 +233,26 @@ * Either a string to use a HTML element or a component.
   /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    action: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    avatar: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    content: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    subheader: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    title: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    action: _propTypes.default.elementType,
+    avatar: _propTypes.default.elementType,
+    content: _propTypes.default.elementType,
+    root: _propTypes.default.elementType,
+    subheader: _propTypes.default.elementType,
+    title: _propTypes.default.elementType
+  }),
+  /**
    * The content of the component.
@@ -199,2 +264,3 @@ */
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.subheader` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
@@ -213,2 +279,3 @@ subheaderTypographyProps: _propTypes.default.object,
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.title` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
@@ -215,0 +282,0 @@ titleTypographyProps: _propTypes.default.object

node/CircularProgress/CircularProgress.js

@@ -44,4 +44,4 @@ "use strict";
   100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -125px;
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: -126px;
   }
@@ -48,0 +48,0 @@ `;

node/IconButton/IconButton.js

@@ -15,2 +15,3 @@ "use strict";
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _utils = require("@mui/material/utils");
 var _colorManipulator = require("@mui/system/colorManipulator");
@@ -22,2 +23,3 @@ var _zeroStyled = require("../zero-styled");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
+var _CircularProgress = _interopRequireDefault(require("../CircularProgress"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -32,6 +34,8 @@ var _iconButtonClasses = _interopRequireWildcard(require("./iconButtonClasses"));
     edge,
-    size
+    size,
+    loading
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', color !== 'default' && `color${(0, _capitalize.default)(color)}`, edge && `edge${(0, _capitalize.default)(edge)}`, `size${(0, _capitalize.default)(size)}`]
+    root: ['root', loading && 'loading', disabled && 'disabled', color !== 'default' && `color${(0, _capitalize.default)(color)}`, edge && `edge${(0, _capitalize.default)(edge)}`, `size${(0, _capitalize.default)(size)}`],
+    loadingIndicator: ['loadingIndicator']
   };
@@ -47,3 +51,3 @@ return (0, _composeClasses.default)(slots, _iconButtonClasses.getIconButtonUtilityClass, classes);
     } = props;
-    return [styles.root, ownerState.color !== 'default' && styles[`color${(0, _capitalize.default)(ownerState.color)}`], ownerState.edge && styles[`edge${(0, _capitalize.default)(ownerState.edge)}`], styles[`size${(0, _capitalize.default)(ownerState.size)}`]];
+    return [styles.root, ownerState.loading && styles.loading, ownerState.color !== 'default' && styles[`color${(0, _capitalize.default)(ownerState.color)}`], ownerState.edge && styles[`edge${(0, _capitalize.default)(ownerState.edge)}`], styles[`size${(0, _capitalize.default)(ownerState.size)}`]];
   }
@@ -151,4 +155,30 @@ })((0, _memoTheme.default)(({
     color: (theme.vars || theme).palette.action.disabled
+  },
+  [`&.${_iconButtonClasses.default.loading}`]: {
+    color: 'transparent'
   }
 })));
+const IconButtonLoadingIndicator = (0, _zeroStyled.styled)('span', {
+  name: 'MuiIconButton',
+  slot: 'LoadingIndicator',
+  overridesResolver: (props, styles) => styles.loadingIndicator
+})(({
+  theme
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  visibility: 'visible',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  color: (theme.vars || theme).palette.action.disabled,
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: 'flex'
+    }
+  }]
+}));
 
@@ -172,4 +202,13 @@ /**
     size = 'medium',
+    id: idProp,
+    loading = false,
+    loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
+  const id = (0, _utils.unstable_useId)(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
   const ownerState = {
@@ -181,14 +220,21 @@ ...props,
     disableFocusRipple,
+    loading,
+    loadingIndicator,
     size
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonRoot, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(IconButtonRoot, {
+    id: id,
     className: (0, _clsx.default)(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,
-    disabled: disabled,
+    disabled: disabled || loading,
     ref: ref,
     ...other,
     ownerState: ownerState,
-    children: children
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonLoadingIndicator, {
+      className: classes.loadingIndicator,
+      ownerState: ownerState,
+      children: loading && loadingIndicator
+    }), children]
   });
@@ -253,2 +299,18 @@ });
   /**
+   * @ignore
+   */
+  id: _propTypes.default.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * @default false
+   */
+  loading: _propTypes.default.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: _propTypes.default.node,
+  /**
    * The size of the component.
@@ -255,0 +317,0 @@ * `small` is equivalent to the dense button styling.

node/IconButton/iconButtonClasses.js

@@ -14,3 +14,3 @@ "use strict";
 }
-const iconButtonClasses = (0, _generateUtilityClasses.default)('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+const iconButtonClasses = (0, _generateUtilityClasses.default)('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'loading', 'loadingIndicator']);
 var _default = exports.default = iconButtonClasses;

node/LinearProgress/LinearProgress.js

@@ -94,4 +94,4 @@ "use strict";
     dashed: ['dashed', `dashedColor${(0, _capitalize.default)(color)}`],
-    bar1: ['bar', `barColor${(0, _capitalize.default)(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
-    bar2: ['bar', variant !== 'buffer' && `barColor${(0, _capitalize.default)(color)}`, variant === 'buffer' && `color${(0, _capitalize.default)(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
+    bar1: ['bar', 'bar1', `barColor${(0, _capitalize.default)(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
+    bar2: ['bar', 'bar2', variant !== 'buffer' && `barColor${(0, _capitalize.default)(color)}`, variant === 'buffer' && `color${(0, _capitalize.default)(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
   };
@@ -214,3 +214,3 @@ return (0, _composeClasses.default)(slots, _linearProgressClasses.getLinearProgressUtilityClass, classes);
     } = props;
-    return [styles.bar, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
+    return [styles.bar, styles.bar1, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
   }
@@ -279,3 +279,3 @@ })((0, _memoTheme.default)(({
     } = props;
-    return [styles.bar, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
+    return [styles.bar, styles.bar2, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
   }
@@ -282,0 +282,0 @@ })((0, _memoTheme.default)(({

node/LinearProgress/linearProgressClasses.js

@@ -14,3 +14,3 @@ "use strict";
 }
-const linearProgressClasses = (0, _generateUtilityClasses.default)('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
+const linearProgressClasses = (0, _generateUtilityClasses.default)('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'bar1', 'bar2', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
 var _default = exports.default = linearProgressClasses;

node/Link/getTextDecoration.js

@@ -14,4 +14,5 @@ "use strict";
   const transformedColor = ownerState.color;
-  const color = (0, _style.getPath)(theme, `palette.${transformedColor}`, false) || ownerState.color;
-  const channelColor = (0, _style.getPath)(theme, `palette.${transformedColor}Channel`);
+  // check the `main` color first for a custom palette, then fallback to the color itself
+  const color = (0, _style.getPath)(theme, `palette.${transformedColor}.main`, false) || (0, _style.getPath)(theme, `palette.${transformedColor}`, false) || ownerState.color;
+  const channelColor = (0, _style.getPath)(theme, `palette.${transformedColor}.mainChannel`) || (0, _style.getPath)(theme, `palette.${transformedColor}Channel`);
   if ('vars' in theme && channelColor) {
@@ -18,0 +19,0 @@ return `rgba(${channelColor} / 0.4)`;

node/Select/Select.js

@@ -14,2 +14,3 @@ "use strict";
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
@@ -28,2 +29,3 @@ var _SelectInput = _interopRequireDefault(require("./SelectInput"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _selectClasses = require("./selectClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -34,3 +36,10 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
-  return classes;
+  const slots = {
+    root: ['root']
+  };
+  const composedClasses = (0, _composeClasses.default)(slots, _selectClasses.getSelectUtilityClasses, classes);
+  return {
+    ...classes,
+    ...composedClasses
+  };
 };
@@ -37,0 +46,0 @@ const styledRootConfig = {

node/Select/SelectInput.js

@@ -453,3 +453,3 @@ "use strict";
       role: "combobox",
-      "aria-controls": listboxId,
+      "aria-controls": open ? listboxId : undefined,
       "aria-disabled": disabled ? 'true' : undefined,
@@ -456,0 +456,0 @@ "aria-expanded": open ? 'true' : 'false',

node/Slider/useSlider.js

@@ -201,2 +201,4 @@ "use strict";
   const moveCount = React.useRef(0);
+  // lastChangedValue is updated whenever onChange is triggered.
+  const lastChangedValue = React.useRef(null);
   const [valueDerived, setValueState] = (0, _utils.unstable_useControlled)({
@@ -222,2 +224,3 @@ controlled: valueProp,
     });
+    lastChangedValue.current = value;
     onChange(clonedEvent, value, thumbIndex);
@@ -294,3 +297,3 @@ });
     if (onChangeCommitted) {
-      onChangeCommitted(event, newValue);
+      onChangeCommitted(event, lastChangedValue.current ?? newValue);
     }
@@ -500,3 +503,3 @@ };
     if (onChangeCommitted) {
-      onChangeCommitted(nativeEvent, newValue);
+      onChangeCommitted(nativeEvent, lastChangedValue.current ?? newValue);
     }
@@ -503,0 +506,0 @@ touchId.current = undefined;

node/utils/index.js

@@ -44,2 +44,8 @@ "use strict";
 });
+Object.defineProperty(exports, "mergeSlotProps", {
+  enumerable: true,
+  get: function () {
+    return _mergeSlotProps.default;
+  }
+});
 Object.defineProperty(exports, "ownerDocument", {
@@ -130,2 +136,3 @@ enumerable: true,
 var _useForkRef = _interopRequireDefault(require("./useForkRef"));
+var _mergeSlotProps = _interopRequireDefault(require("./mergeSlotProps"));
 // TODO: remove this export once ClassNameGenerator is stable
@@ -132,0 +139,0 @@ // eslint-disable-next-line @typescript-eslint/naming-convention

node/utils/useSlot.js

@@ -41,2 +41,3 @@ "use strict";
     internalForwardedProps,
+    shouldForwardComponentProp = false,
     ...useSlotPropsParams
@@ -77,5 +78,8 @@ } = parameters;
     ...mergedProps,
-    ...(LeafComponent && {
+    ...(LeafComponent && !shouldForwardComponentProp && {
       as: LeafComponent
     }),
+    ...(LeafComponent && shouldForwardComponentProp && {
+      component: LeafComponent
+    }),
     ref
@@ -82,0 +86,0 @@ }, ownerState);

node/version/index.js

@@ -7,7 +7,7 @@ "use strict";
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.3.1";
+const version = exports.version = "6.4.0";
 const major = exports.major = Number("6");
-const minor = exports.minor = Number("3");
-const patch = exports.patch = Number("1");
+const minor = exports.minor = Number("4");
+const patch = exports.patch = Number("0");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package.json

 {
   "name": "@mui/material",
-  "version": "6.3.1",
+  "version": "6.4.0",
   "private": false,
@@ -38,6 +38,6 @@ "author": "MUI Team",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^6.3.1",
+    "@mui/core-downloads-tracker": "^6.4.0",
+    "@mui/utils": "^6.4.0",
     "@mui/types": "^7.2.21",
-    "@mui/system": "^6.3.1",
-    "@mui/utils": "^6.3.1"
+    "@mui/system": "^6.4.0"
   },
@@ -50,3 +50,3 @@ "peerDependencies": {
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material-pigment-css": "^6.3.1"
+    "@mui/material-pigment-css": "^6.4.0"
   },
@@ -53,0 +53,0 @@ "peerDependenciesMeta": {

Select/Select.js

@@ -7,2 +7,3 @@ 'use client';
 import deepmerge from '@mui/utils/deepmerge';
+import composeClasses from '@mui/utils/composeClasses';
 import getReactElementRef from '@mui/utils/getReactElementRef';
@@ -21,2 +22,3 @@ import SelectInput from "./SelectInput.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
+import { getSelectUtilityClasses } from "./selectClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -27,3 +29,10 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
-  return classes;
+  const slots = {
+    root: ['root']
+  };
+  const composedClasses = composeClasses(slots, getSelectUtilityClasses, classes);
+  return {
+    ...classes,
+    ...composedClasses
+  };
 };
@@ -30,0 +39,0 @@ const styledRootConfig = {

Select/SelectInput.js

@@ -446,3 +446,3 @@ 'use client';
       role: "combobox",
-      "aria-controls": listboxId,
+      "aria-controls": open ? listboxId : undefined,
       "aria-disabled": disabled ? 'true' : undefined,
@@ -449,0 +449,0 @@ "aria-expanded": open ? 'true' : 'false',

Slider/useSlider.js

@@ -191,2 +191,4 @@ 'use client';
   const moveCount = React.useRef(0);
+  // lastChangedValue is updated whenever onChange is triggered.
+  const lastChangedValue = React.useRef(null);
   const [valueDerived, setValueState] = useControlled({
@@ -212,2 +214,3 @@ controlled: valueProp,
     });
+    lastChangedValue.current = value;
     onChange(clonedEvent, value, thumbIndex);
@@ -284,3 +287,3 @@ });
     if (onChangeCommitted) {
-      onChangeCommitted(event, newValue);
+      onChangeCommitted(event, lastChangedValue.current ?? newValue);
     }
@@ -490,3 +493,3 @@ };
     if (onChangeCommitted) {
-      onChangeCommitted(nativeEvent, newValue);
+      onChangeCommitted(nativeEvent, lastChangedValue.current ?? newValue);
     }
@@ -493,0 +496,0 @@ touchId.current = undefined;

StepLabel/StepLabel.d.ts

@@ -18,3 +18,3 @@ import * as React from 'react';
    */
-  stepIcon: React.ElementType<StepIconProps>;
+  stepIcon: React.ElementType;
 }
@@ -21,0 +21,0 @@

Tooltip/Tooltip.d.ts

@@ -24,3 +24,3 @@ import * as React from 'react';
    */
-  popper: React.ElementType<PopperProps>;
+  popper: React.ElementType;
   /**
@@ -27,0 +27,0 @@ * The component used for the transition.

utils/index.d.ts

@@ -19,2 +19,3 @@ export { unstable_ClassNameGenerator } from '@mui/utils';
 export { default as useForkRef } from './useForkRef';
+export { default as mergeSlotProps } from './mergeSlotProps';
 export * from './types';

utils/index.js

@@ -21,2 +21,3 @@ 'use client';
 export { default as useForkRef } from "./useForkRef.js";
+export { default as mergeSlotProps } from "./mergeSlotProps.js";
 // TODO: remove this export once ClassNameGenerator is stable
@@ -23,0 +24,0 @@ // eslint-disable-next-line @typescript-eslint/naming-convention

utils/useSlot.d.ts

@@ -73,2 +73,10 @@ import * as React from 'react';
     internalForwardedProps?: any;
+    /**
+     * Set to true if the `elementType` is a styled component of another Material UI component.
+     *
+     * For example, the AlertRoot is a styled component of the Paper component.
+     * This flag is used to forward the `component` and `slotProps.root.component` to the Paper component.
+     * Otherwise, the `component` prop will be converted to `as` prop which replaces the Paper component (the paper styles are gone).
+     */
+    shouldForwardComponentProp?: boolean;
 }): [ElementType, {
@@ -75,0 +83,0 @@ className: string;

utils/useSlot.js

@@ -35,2 +35,3 @@ 'use client';
     internalForwardedProps,
+    shouldForwardComponentProp = false,
     ...useSlotPropsParams
@@ -71,5 +72,8 @@ } = parameters;
     ...mergedProps,
-    ...(LeafComponent && {
+    ...(LeafComponent && !shouldForwardComponentProp && {
       as: LeafComponent
     }),
+    ...(LeafComponent && shouldForwardComponentProp && {
+      component: LeafComponent
+    }),
     ref
@@ -76,0 +80,0 @@ }, ownerState);

version/index.js

@@ -1,6 +0,6 @@
-export const version = "6.3.1";
+export const version = "6.4.0";
 export const major = Number("6");
-export const minor = Number("3");
-export const patch = Number("1");
+export const minor = Number("4");
+export const patch = Number("0");
 export const prerelease = undefined;
 export default version;

No alert changes

Improved metrics

Total package byte prevSize

6384152

increased by0.88%

Number of package files

2425

increased by0.17%

Lines of code

179935

increased by0.89%

Dependency changes

• + Addedcaniuse-lite@1.0.30001692(transitive)

• + Addedelectron-to-chromium@1.5.82(transitive)

• - Removedcaniuse-lite@1.0.30001695(transitive)

• - Removedelectron-to-chromium@1.5.83(transitive)

• Updated@mui/core-downloads-tracker@^6.4.0

• Updated@mui/system@^6.4.0

• Updated@mui/utils@^6.4.0