@mui/material 6.0.0-beta.2 → 6.0.0-beta.3-dev.20240725-084532-7340f56bef

package/Divider/Divider.js

@@ -113,6 +113,8 @@ const DividerRoot = styled('div', {
       whiteSpace: 'nowrap',
       textAlign: 'center',
       border: 0,
+      borderTopStyle: 'solid',
+      borderLeftStyle: 'solid',
       '&::before, &::after': {
         content: '""',
         alignSelf: 'center'
@@ -125,7 +127,8 @@ const DividerRoot = styled('div', {
     style: {
       '&::before, &::after': {
         width: '100%',
-        borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
+        borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
+        borderTopStyle: 'inherit'
       }
     }
   }, {
@@ -136,7 +139,8 @@ const DividerRoot = styled('div', {
       flexDirection: 'column',
       '&::before, &::after': {
         height: '100%',
-        borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`
+        borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
+        borderLeftStyle: 'inherit'
       }
     }
   }, {

package/Fade/Fade.js

@@ -7,6 +7,7 @@ import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
+import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   entering: {
@@ -47,7 +48,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
   } = props;
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, children.ref, ref);
+  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/Grow/Grow.js

@@ -8,6 +8,7 @@ import { Transition } from 'react-transition-group';
 import { useTheme } from '../zero-styled';
 import { getTransitionProps, reflow } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
+import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 function getScale(value) {
   return `scale(${value}, ${value ** 2})`;
@@ -57,7 +58,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const autoTimeout = React.useRef();
   const theme = useTheme();
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, children.ref, ref);
+  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/ImageListItemBar/ImageListItemBar.js

@@ -17,7 +17,7 @@ const useUtilityClasses = ownerState => {
     actionPosition
   } = ownerState;
   const slots = {
-    root: ['root', `position${capitalize(position)}`],
+    root: ['root', `position${capitalize(position)}`, `actionPosition${capitalize(actionPosition)}`],
     titleWrap: ['titleWrap', `titleWrap${capitalize(position)}`, actionIcon && `titleWrapActionPos${capitalize(actionPosition)}`],
     title: ['title'],
     subtitle: ['subtitle'],

package/ImageListItemBar/imageListItemBarClasses.d.ts

@@ -7,13 +7,23 @@ export interface ImageListItemBarClasses {
     positionTop: string;
     /** Styles applied to the root element if `position="below"`. */
     positionBelow: string;
+    /** Styles applied to the action container element if `actionPosition="left"`. */
+    actionPositionLeft: string;
+    /** Styles applied to the action container element if `actionPosition="right"`. */
+    actionPositionRight: string;
     /** Styles applied to the title and subtitle container element. */
     titleWrap: string;
-    /** Styles applied to the title and subtitle container element if `position="below"`. */
+    /** Styles applied to the title and subtitle container element if `position="below"`.
+     * @deprecated Combine the [.MuiImageListItemBar-titleWrap](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-titleWrap) and [.MuiImageListItemBar-positionBelow](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-positionBelow) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     titleWrapBelow: string;
-    /** Styles applied to the container element if `actionPosition="left"`. */
+    /** Styles applied to the container element if `actionPosition="left"`.
+     * @deprecated Combine the [.MuiImageListItemBar-titleWrap](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-titleWrap) and [.MuiImageListItemBar-actionPositionLeft](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-actionPositionLeft) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     titleWrapActionPosLeft: string;
-    /** Styles applied to the container element if `actionPosition="right"`. */
+    /** Styles applied to the container element if `actionPosition="right"`.
+     * @deprecated Combine the [.MuiImageListItemBar-titleWrap](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-titleWrap) and [.MuiImageListItemBar-actionPositionRight](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-actionPositionRight) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     titleWrapActionPosRight: string;
     /** Styles applied to the title container element. */
     title: string;
@@ -21,7 +31,9 @@ export interface ImageListItemBarClasses {
     subtitle: string;
     /** Styles applied to the actionIcon if supplied. */
     actionIcon: string;
-    /** Styles applied to the actionIcon if `actionPosition="left"`. */
+    /** Styles applied to the actionIcon if `actionPosition="left"`.
+     * @deprecated Combine the [.MuiImageListItemBar-actionIcon](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-actionIcon) and [.MuiImageListItemBar-actionPositionLeft](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-actionPositionLeft) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     actionIconActionPosLeft: string;
 }
 export type ImageListItemBarClassKey = keyof ImageListItemBarClasses;

package/ImageListItemBar/imageListItemBarClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getImageListItemBarUtilityClass(slot) {
   return generateUtilityClass('MuiImageListItemBar', slot);
 }
-const imageListItemBarClasses = generateUtilityClasses('MuiImageListItemBar', ['root', 'positionBottom', 'positionTop', 'positionBelow', 'titleWrap', 'titleWrapBottom', 'titleWrapTop', 'titleWrapBelow', 'titleWrapActionPosLeft', 'titleWrapActionPosRight', 'title', 'subtitle', 'actionIcon', 'actionIconActionPosLeft', 'actionIconActionPosRight']);
+const imageListItemBarClasses = generateUtilityClasses('MuiImageListItemBar', ['root', 'positionBottom', 'positionTop', 'positionBelow', 'actionPositionLeft', 'actionPositionRight', 'titleWrap', 'titleWrapBottom', 'titleWrapTop', 'titleWrapBelow', 'titleWrapActionPosLeft', 'titleWrapActionPosRight', 'title', 'subtitle', 'actionIcon', 'actionIconActionPosLeft', 'actionIconActionPosRight']);
 export default imageListItemBarClasses;

package/Paper/Paper.js

@@ -100,7 +100,7 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
       ...(variant === 'elevation' && {
         '--Paper-shadow': (theme.vars || theme).shadows[elevation],
         ...(theme.vars && {
-          '--Paper-overlay': theme.overlays?.[elevation]
+          '--Paper-overlay': theme.vars.overlays?.[elevation]
         }),
         ...(!theme.vars && theme.palette.mode === 'dark' && {
           '--Paper-overlay': `linear-gradient(${alpha('#fff', getOverlayAlpha(elevation))}, ${alpha('#fff', getOverlayAlpha(elevation))})`

package/Rating/Rating.d.ts

@@ -44,7 +44,7 @@ export interface RatingProps
    * @param {number} value The rating label's value to format.
    * @returns {string}
    * @default function defaultLabelText(value) {
-   *   return `${value} Star${value !== 1 ? 's' : ''}`;
+   *   return `${value || '0'} Star${value !== 1 ? 's' : ''}`;
    * }
    */
   getLabelText?: (value: number) => string;

package/Rating/Rating.js

@@ -303,7 +303,7 @@ const defaultEmptyIcon = /*#__PURE__*/_jsx(StarBorder, {
   fontSize: "inherit"
 });
 function defaultLabelText(value) {
-  return `${value} Star${value !== 1 ? 's' : ''}`;
+  return `${value || '0'} Star${value !== 1 ? 's' : ''}`;
 }
 const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   const props = useDefaultProps({
@@ -588,7 +588,7 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
    * @param {number} value The rating label's value to format.
    * @returns {string}
    * @default function defaultLabelText(value) {
-   *   return `${value} Star${value !== 1 ? 's' : ''}`;
+   *   return `${value || '0'} Star${value !== 1 ? 's' : ''}`;
    * }
    */
   getLabelText: PropTypes.func,

package/Select/selectClasses.d.ts

@@ -7,6 +7,8 @@ export interface SelectClasses {
     multiple: string;
     /** Styles applied to the select component if `variant="filled"`. */
     filled: string;
+    /** Styles applied to the select component if it is focused. */
+    focused: string;
     /** Styles applied to the select component if `variant="outlined"`. */
     outlined: string;
     /** Styles applied to the select component if `variant="standard"`. */

package/Slide/Slide.js

@@ -11,6 +11,7 @@ import useForkRef from '../utils/useForkRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import { ownerWindow } from '../utils';
+import getChildRef from '../utils/getChildRef';
 
 // Translate the node so it can't be seen on the screen.
 // Later, we're going to translate the node back to its original location with `none`.
@@ -105,7 +106,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     ...other
   } = props;
   const childrenRef = React.useRef(null);
-  const handleRef = useForkRef(children.ref, childrenRef, ref);
+  const handleRef = useForkRef(getChildRef(children), childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {
       // onEnterXxx and onExitXxx callbacks have a different arguments.length value.

package/Tooltip/Tooltip.js

@@ -20,6 +20,7 @@ import useForkRef from '../utils/useForkRef';
 import useId from '../utils/useId';
 import useControlled from '../utils/useControlled';
 import tooltipClasses, { getTooltipUtilityClass } from './tooltipClasses';
+import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
@@ -510,7 +511,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = useForkRef(children.ref, setChildNode, ref);
+  const handleRef = useForkRef(getChildRef(children), setChildNode, ref);
 
   // There is no point in displaying an empty tooltip.
   // So we exclude all falsy values, except 0, which is valid.

package/Typography/Typography.d.ts

@@ -38,6 +38,7 @@ export interface TypographyOwnProps extends SystemProps<Theme> {
   /**
    * If `true`, the element will be a paragraph element.
    * @default false
+   * @deprecated Use the `component` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   paragraph?: boolean;
   /**

package/Typography/Typography.js

@@ -214,6 +214,7 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes
   /**
    * If `true`, the element will be a paragraph element.
    * @default false
+   * @deprecated Use the `component` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   paragraph: PropTypes.bool,
   /**

package/Typography/typographyClasses.d.ts

@@ -41,7 +41,10 @@ export interface TypographyClasses {
     noWrap: string;
     /** Styles applied to the root element if `gutterBottom={true}`. */
     gutterBottom: string;
-    /** Styles applied to the root element if `paragraph={true}`. */
+    /**
+     * Styles applied to the root element if `paragraph={true}`.
+     * @deprecated
+     */
     paragraph: string;
 }
 export type TypographyClassKey = keyof TypographyClasses;

package/Zoom/Zoom.js

@@ -7,6 +7,7 @@ import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
+import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   entering: {
@@ -47,7 +48,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     ...other
   } = props;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, children.ref, ref);
+  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-beta.2
+ * @mui/material v6.0.0-beta.3-dev.20240725-084532-7340f56bef
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/Divider/Divider.js

@@ -113,6 +113,8 @@ const DividerRoot = styled('div', {
       whiteSpace: 'nowrap',
       textAlign: 'center',
       border: 0,
+      borderTopStyle: 'solid',
+      borderLeftStyle: 'solid',
       '&::before, &::after': {
         content: '""',
         alignSelf: 'center'
@@ -125,7 +127,8 @@ const DividerRoot = styled('div', {
     style: {
       '&::before, &::after': {
         width: '100%',
-        borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
+        borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
+        borderTopStyle: 'inherit'
       }
     }
   }, {
@@ -136,7 +139,8 @@ const DividerRoot = styled('div', {
       flexDirection: 'column',
       '&::before, &::after': {
         height: '100%',
-        borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`
+        borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
+        borderLeftStyle: 'inherit'
       }
     }
   }, {

package/modern/Fade/Fade.js

@@ -7,6 +7,7 @@ import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
+import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   entering: {
@@ -47,7 +48,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
   } = props;
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, children.ref, ref);
+  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/modern/Grow/Grow.js

@@ -8,6 +8,7 @@ import { Transition } from 'react-transition-group';
 import { useTheme } from '../zero-styled';
 import { getTransitionProps, reflow } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
+import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 function getScale(value) {
   return `scale(${value}, ${value ** 2})`;
@@ -57,7 +58,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const autoTimeout = React.useRef();
   const theme = useTheme();
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, children.ref, ref);
+  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/modern/ImageListItemBar/ImageListItemBar.js

@@ -17,7 +17,7 @@ const useUtilityClasses = ownerState => {
     actionPosition
   } = ownerState;
   const slots = {
-    root: ['root', `position${capitalize(position)}`],
+    root: ['root', `position${capitalize(position)}`, `actionPosition${capitalize(actionPosition)}`],
     titleWrap: ['titleWrap', `titleWrap${capitalize(position)}`, actionIcon && `titleWrapActionPos${capitalize(actionPosition)}`],
     title: ['title'],
     subtitle: ['subtitle'],

package/modern/ImageListItemBar/imageListItemBarClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getImageListItemBarUtilityClass(slot) {
   return generateUtilityClass('MuiImageListItemBar', slot);
 }
-const imageListItemBarClasses = generateUtilityClasses('MuiImageListItemBar', ['root', 'positionBottom', 'positionTop', 'positionBelow', 'titleWrap', 'titleWrapBottom', 'titleWrapTop', 'titleWrapBelow', 'titleWrapActionPosLeft', 'titleWrapActionPosRight', 'title', 'subtitle', 'actionIcon', 'actionIconActionPosLeft', 'actionIconActionPosRight']);
+const imageListItemBarClasses = generateUtilityClasses('MuiImageListItemBar', ['root', 'positionBottom', 'positionTop', 'positionBelow', 'actionPositionLeft', 'actionPositionRight', 'titleWrap', 'titleWrapBottom', 'titleWrapTop', 'titleWrapBelow', 'titleWrapActionPosLeft', 'titleWrapActionPosRight', 'title', 'subtitle', 'actionIcon', 'actionIconActionPosLeft', 'actionIconActionPosRight']);
 export default imageListItemBarClasses;

package/modern/Paper/Paper.js

@@ -100,7 +100,7 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
       ...(variant === 'elevation' && {
         '--Paper-shadow': (theme.vars || theme).shadows[elevation],
         ...(theme.vars && {
-          '--Paper-overlay': theme.overlays?.[elevation]
+          '--Paper-overlay': theme.vars.overlays?.[elevation]
         }),
         ...(!theme.vars && theme.palette.mode === 'dark' && {
           '--Paper-overlay': `linear-gradient(${alpha('#fff', getOverlayAlpha(elevation))}, ${alpha('#fff', getOverlayAlpha(elevation))})`

package/modern/Rating/Rating.js

@@ -303,7 +303,7 @@ const defaultEmptyIcon = /*#__PURE__*/_jsx(StarBorder, {
   fontSize: "inherit"
 });
 function defaultLabelText(value) {
-  return `${value} Star${value !== 1 ? 's' : ''}`;
+  return `${value || '0'} Star${value !== 1 ? 's' : ''}`;
 }
 const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   const props = useDefaultProps({
@@ -588,7 +588,7 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
    * @param {number} value The rating label's value to format.
    * @returns {string}
    * @default function defaultLabelText(value) {
-   *   return `${value} Star${value !== 1 ? 's' : ''}`;
+   *   return `${value || '0'} Star${value !== 1 ? 's' : ''}`;
    * }
    */
   getLabelText: PropTypes.func,

package/modern/Slide/Slide.js

@@ -11,6 +11,7 @@ import useForkRef from '../utils/useForkRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import { ownerWindow } from '../utils';
+import getChildRef from '../utils/getChildRef';
 
 // Translate the node so it can't be seen on the screen.
 // Later, we're going to translate the node back to its original location with `none`.
@@ -105,7 +106,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     ...other
   } = props;
   const childrenRef = React.useRef(null);
-  const handleRef = useForkRef(children.ref, childrenRef, ref);
+  const handleRef = useForkRef(getChildRef(children), childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {
       // onEnterXxx and onExitXxx callbacks have a different arguments.length value.

package/modern/Tooltip/Tooltip.js

@@ -20,6 +20,7 @@ import useForkRef from '../utils/useForkRef';
 import useId from '../utils/useId';
 import useControlled from '../utils/useControlled';
 import tooltipClasses, { getTooltipUtilityClass } from './tooltipClasses';
+import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
@@ -510,7 +511,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = useForkRef(children.ref, setChildNode, ref);
+  const handleRef = useForkRef(getChildRef(children), setChildNode, ref);
 
   // There is no point in displaying an empty tooltip.
   // So we exclude all falsy values, except 0, which is valid.

package/modern/Typography/Typography.js

@@ -214,6 +214,7 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes
   /**
    * If `true`, the element will be a paragraph element.
    * @default false
+   * @deprecated Use the `component` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   paragraph: PropTypes.bool,
   /**

package/modern/Zoom/Zoom.js

@@ -7,6 +7,7 @@ import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
+import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   entering: {
@@ -47,7 +48,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     ...other
   } = props;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, children.ref, ref);
+  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-beta.2
+ * @mui/material v6.0.0-beta.3-dev.20240725-084532-7340f56bef
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/styles/CssVarsProvider.js

@@ -16,7 +16,6 @@ const {
 } = createCssVarsProvider({
   themeId: THEME_ID,
   theme: defaultTheme,
-  attribute: defaultConfig.attribute,
   colorSchemeStorageKey: defaultConfig.colorSchemeStorageKey,
   modeStorageKey: defaultConfig.modeStorageKey,
   defaultColorScheme: {

package/modern/styles/createGetSelector.js

@@ -1,5 +1,17 @@
 import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 export default (theme => (colorScheme, css) => {
+  const selector = theme.colorSchemeSelector;
+  let rule = selector;
+  if (selector === 'class') {
+    rule = '.%s';
+  }
+  if (selector === 'data') {
+    rule = '[data-%s]';
+  }
+  if (selector?.startsWith('data-') && !selector.includes('%s')) {
+    // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
+    rule = `[${selector}="%s"]`;
+  }
   if (theme.defaultColorScheme === colorScheme) {
     if (colorScheme === 'dark') {
       const excludedVariables = {};
@@ -7,15 +19,32 @@ export default (theme => (colorScheme, css) => {
         excludedVariables[cssVar] = css[cssVar];
         delete css[cssVar];
       });
+      if (rule === 'media') {
+        return {
+          ':root': css,
+          '@media (prefers-color-scheme: dark) { :root': excludedVariables
+        };
+      }
+      if (rule) {
+        return {
+          [rule.replace('%s', colorScheme)]: excludedVariables,
+          ':root': css
+        };
+      }
       return {
-        [`[${theme.attribute}="${String(colorScheme)}"]`]: excludedVariables,
-        [theme.colorSchemeSelector]: css
+        ':root': {
+          ...css,
+          ...excludedVariables
+        }
       };
     }
-    return `${theme.colorSchemeSelector}, [${theme.attribute}="${String(colorScheme)}"]`;
-  }
-  if (colorScheme) {
-    return `[${theme.attribute}="${String(colorScheme)}"]`;
+  } else if (colorScheme) {
+    if (rule === 'media') {
+      return `@media (prefers-color-scheme: ${String(colorScheme)}) { :root`;
+    }
+    if (rule) {
+      return rule.replace('%s', String(colorScheme));
+    }
   }
-  return theme.colorSchemeSelector;
+  return ':root';
 });

package/modern/styles/excludeVariablesFromRoot.js

@@ -1,5 +1,5 @@
 /**
- * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+ * @internal These variables should not appear in the :root stylesheet when the `defaultColorScheme="dark"`
  */
 const excludeVariablesFromRoot = cssVarPrefix => [...[...Array(24)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index + 1}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`];
 export default excludeVariablesFromRoot;