@mui/system 7.3.10 → 7.3.11

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.3.11
+
+<!-- generated comparing v7.3.10..v7.x -->
+
+_May 6, 2026_
+
+A big thanks to the 5 contributors who made this release possible.
+
+### `@mui/material@7.3.11`
+
+- [autocomplete] Fix highlight sync and scroll preservation (#48350) @mj12albert
+- [autocomplete] Fix popper rendering issues (#48343) @mj12albert
+- [autocomplete] Improve highlight tracking and selection state (#48318) @mj12albert
+- [button] Fix `startIcon` alignment (#48339) @mj12albert
+- [button] Remove duplicated className entries (#48284) @silviuaavram
+- [checkbox] Set `aria-checked=mixed` when indeterminate (#48286) @mj12albert
+- [dialog][drawer][focus trap] Fix initial focus target (#48324) @mj12albert
+- [drawer] Fix transition jump (#48340) @mj12albert
+- [input] Fix layout shift with display: flex (#48359) @oliviertassinari
+- [inputs] Fix autofocus in SSR environment (#48307) @mj12albert
+- [popper] Persist positioning styles when popperOptions changes reference (#48302) @mj12albert
+- [switch] Fix incorrect `role` with `slotProps.input` (#48472) @mj12albert
+- [utils] Add shadow dom utils (#48309) @mj12albert
+
+### Docs
+
+- [docs] Update banner to announce v9 (#48299) @siriwatknp
+- [docs] Add v9 in the versions select in v7.mui.com (#48233) @alexfauquette
+
+### Core
+
+- [internal] Update some host-reference entries (#48225) @silviuaavram
+
+All contributors of this release in alphabetical order: @alexfauquette, @mj12albert, @oliviertassinari, @silviuaavram, @siriwatknp
+
 ## 7.3.10
 
 <!-- generated comparing v7.3.9..v7.x -->

package/ThemeProvider/ThemeProvider.d.ts

@@ -14,11 +14,12 @@ export interface ThemeProviderProps<Theme = DefaultTheme> {
   theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
 }
 
+// #host-reference
 /**
  * This component makes the `theme` available down the React tree.
  * It should preferably be used at **the root of your component tree**.
  * API:
  *
- * - [ThemeProvider API](https://mui.com/material-ui/customization/theming/#themeprovider)
+ * - [ThemeProvider API](https://v7.mui.com/material-ui/customization/theming/#themeprovider)
  */
 export default function ThemeProvider<T = DefaultTheme>(props: ThemeProviderProps<T>): React.ReactElement<ThemeProviderProps<T>>;

package/cssVars/createCssVarsProvider.js

@@ -238,7 +238,8 @@ function createCssVarsProvider(options) {
       setColorScheme,
       setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
         if (memoTheme.colorSchemeSelector === 'media') {
-          console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
+          // #host-reference
+          console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://v7.mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
         }
         setMode(newMode);
       },

package/esm/ThemeProvider/ThemeProvider.d.ts

@@ -14,11 +14,12 @@ export interface ThemeProviderProps<Theme = DefaultTheme> {
   theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
 }
 
+// #host-reference
 /**
  * This component makes the `theme` available down the React tree.
  * It should preferably be used at **the root of your component tree**.
  * API:
  *
- * - [ThemeProvider API](https://mui.com/material-ui/customization/theming/#themeprovider)
+ * - [ThemeProvider API](https://v7.mui.com/material-ui/customization/theming/#themeprovider)
  */
 export default function ThemeProvider<T = DefaultTheme>(props: ThemeProviderProps<T>): React.ReactElement<ThemeProviderProps<T>>;

package/esm/cssVars/createCssVarsProvider.js

@@ -230,7 +230,8 @@ export default function createCssVarsProvider(options) {
       setColorScheme,
       setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
         if (memoTheme.colorSchemeSelector === 'media') {
-          console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
+          // #host-reference
+          console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://v7.mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
         }
         setMode(newMode);
       },

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v7.3.10
+ * @mui/system v7.3.11
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/version/index.js

@@ -1,6 +1,6 @@
-export const version = "7.3.10";
+export const version = "7.3.11";
 export const major = Number("7");
 export const minor = Number("3");
-export const patch = Number("10");
+export const patch = Number("11");
 export const prerelease = undefined;
 export default version;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v7.3.10
+ * @mui/system v7.3.11
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "7.3.10",
+  "version": "7.3.11",
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
   "keywords": [
@@ -28,10 +28,10 @@
     "clsx": "^2.1.1",
     "csstype": "^3.2.3",
     "prop-types": "^15.8.1",
+    "@mui/private-theming": "^7.3.11",
     "@mui/styled-engine": "^7.3.10",
-    "@mui/private-theming": "^7.3.10",
-    "@mui/types": "^7.4.12",
-    "@mui/utils": "^7.3.10"
+    "@mui/utils": "^7.3.11",
+    "@mui/types": "^7.4.12"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "7.3.10";
+const version = exports.version = "7.3.11";
 const major = exports.major = Number("7");
 const minor = exports.minor = Number("3");
-const patch = exports.patch = Number("10");
+const patch = exports.patch = Number("11");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;