Merge branch 'master' into styled-engine/dedicated-cache-key

Author: Janpot

.circleci/config.yml

@@ -133,7 +133,7 @@ jobs:
             git add -A && git diff --exit-code --staged
   test_types:
     <<: *default-job
-    resource_class: medium+.gen2
+    resource_class: xlarge.gen2
     steps:
       - checkout
       - install-deps
@@ -146,27 +146,19 @@ jobs:
       - run:
           name: Tests TypeScript definitions
           command: pnpm typescript:ci
-          environment:
-            NODE_OPTIONS: --max-old-space-size=3072
       - run:
           name: Test module augmentation
           command: pnpm typescript:module-augmentation
   test_types_next:
     <<: *default-job
-    resource_class: medium+.gen2
+    resource_class: xlarge.gen2
     steps:
       - checkout
       - install-deps:
           typescript-version: << parameters.typescript-version >>
       - run:
           name: Tests TypeScript definitions
           command: pnpm typescript:ci
-          environment:
-            NODE_OPTIONS: --max-old-space-size=3072
-      - run:
-          name: Prepare files
-          # Enable configuration that is only valid in typescript@next
-          command: sed -i 's|// <ts@next uncomment>||g' test/moduleResolution/tsconfig.node.json
       - run:
           name: Build declaration files
           command: |

.github/workflows/ci.yml

@@ -64,9 +64,6 @@ jobs:
       # - run: pnpm release:changelog
       #   env:
       #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - name: Check docs links
-        if: ${{ matrix.os == 'ubuntu-latest' }}
-        run: pnpm docs:link-check
       - name: Debug export-detail.json on when pnpm docs:build fails with EMFILE error
         if: failure()
         run: cat ./docs/.next/export-detail.json || true

.gitignore

@@ -7,6 +7,7 @@
 .vscode/*
 !.vscode/launch.json
 !.vscode/extensions.json
+!.vscode/settings.json
 *.log
 /.eslintcache
 /.nyc_output

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "editorconfig.editorconfig",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "yoavbls.pretty-ts-errors"
+    "yoavbls.pretty-ts-errors",
+    "TypeScriptTeam.native-preview"
   ]
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "js/ts.experimental.useTsgo": true
+}

CHANGELOG.md

@@ -1,5 +1,89 @@
 # [Versions](https://mui.com/material-ui/getting-started/versions/)
 
+## 9.1.0
+
+<!-- generated comparing v9.0.1..master -->
+
+_Jun 8, 2026_
+
+A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚙️ Support for the [prefers-reduced-motion](https://mui.com/material-ui/transitions/#reduced-motion) setting.
+- ♿️ Improved support for Windows High Contrast mode with the [enhanceHighContrast](https://mui.com/material-ui/customization/palette/#windows-high-contrast-mode) theme wrapper.
+
+### `@mui/material@9.1.0`
+
+- [autocomplete] Enable clearing highlight when mouse leaves popup (#48354) @mj12albert
+- [autocomplete] Fix `freeSolo` controlled values cleared by initial `null` (#48611) @mj12albert
+- [autocomplete] Fix item removal when it receives focus from VoiceOver before using Backspace (#48572) @silviuaavram
+- [autocomplete] Fix `resetHighlightOnMouseLeave` JSdoc (#48536) @mj12albert
+- [autocomplete] Guard against null inputRef during unmount (#48617) @noam3127
+- [badge] Add `aria-hidden` to badge content and polish docs demos (#48471) @mj12albert
+- [badge] Use inline CSS variables for anchorOrigin/overlap positioning (#48549) @siriwatknp
+- [button] Fix customized flex gap styles (#48542) @mj12albert
+- [dialog] Fix unwanted `DialogPaper` focus ring (#48535) @mj12albert
+- [focus trap] Fix incorrect tab order when `tabIndex >= 1` (#48546) @mj12albert
+- [progress] Show runtime errors only once (#48591) @silviuaavram
+- [select] Allow spacebar to select elements (#48615) @silviuaavram
+- [select] Support typeahead when closed (#48563) @mj12albert
+- [step button] Choose higher contrast ripple color for dark mode focus (#48612) @silviuaavram
+- [stepper] Include StepConnector inside Step element (#48492) @silviuaavram
+- [stepper] Proper support for vertical alternativeLabel (#48485) @silviuaavram
+- [tabs] Fix React 18 roving tabindex and dedupe invalid-value warning (#48605) @Janpot
+- [theme] Add HighContrast theme enhancer (#48319) @silviuaavram
+- [timeline item] Fix extra ::before spacing when TimelineOppositeContent is present (#46663) @tyalau
+- [tooltip] Prevent stuck-open tooltip when child becomes disabled (#48606) @Janpot
+- [transitions] Custom `Transition` component (#48325) @mj12albert
+- [transitions] Support `prefers-reduced-motion` (#48357) @mj12albert
+
+### `@mui/utils@9.1.0`
+
+- [utils] Prevent prototype pollution in fastDeepAssign (#48580) @Janpot
+
+### Docs
+
+- [docs] Add function `slotProps` documentation (#48574) @mj12albert
+- [docs] Clarify styled-components version compatibility (#48533) @nightt5879
+- [docs] Fix broken URLs (#48520) @oliviertassinari
+- [docs] Fix invalid JSON in Zed MCP setup example (#48490) @pavan-sh
+- [docs] Mention release version for enhanceHighContrast (#48609) @silviuaavram
+- [docs] Remove outdated MUI X v8 notification (#48600) @cherniavskii
+- [docs] Remove redundant enhanceHighContrast information (#48632) @silviuaavram
+- [docs-infra] Decrease loaded bundle size on docs (#48584) @brijeshb42
+- [docs-infra] Drop multi-locale plumbing from API pages (#48370) @brijeshb42
+- [docs-infra] Fix Cookie banner heading (#48529) @oliviertassinari
+- [docs-infra] Infinitely cache all static assets (#48627) @brijeshb42
+- [docs-infra] Remove outdated noSEOadvantage entries (#48527) @oliviertassinari
+- [docs-infra] Restore build-only invariant throws via `NEXT_RUNTIME` guard (#48475) @Janpot
+- [docs-infra] Test HTML validation in broken links checker (#48088) @Janpot
+- [docs][icons] Fix Font Awesome Chip demo in dark mode (#48576) @siriwatknp
+- [docs][icons] Remove redundant font awesome demo (#48493) @ZeeshanTamboli
+- [docs][modal] Add nested modal guidance (#46507) @JakeSaterlay
+- [docs][stepper] Fix focus management in examples (#48494) @silviuaavram
+
+### Core
+
+- Eslint markdown (#48371) @Janpot
+- [agents] Fix some docs links (#48561) @silviuaavram
+- [blog] Copy editing improvement on v9 announcement blog posts (#48543) @joserodolfofreitas
+- [code-infra] Cleanup unused jss packages (#48590) @brijeshb42
+- [code-infra] Collapse canary workflows into nightly and nightly-cron (#48556) @Janpot
+- [code-infra] Convert @mui/private-theming to TypeScript (#48565) @Janpot
+- [code-infra] Convert @mui/styled-engine to TypeScript (#48544) @Janpot
+- [code-infra] Convert @mui/styled-engine-sc to TypeScript (#48577) @Janpot
+- [code-infra] Fix duplicate resource_class in test_regressions CI job (#48601) @LukasTy
+- [code-infra] Make @mui/internal-docs-utils compatible with TypeScript 6 (#48594) @Janpot
+- [code-infra] Migrate CircleCI jobs to Gen2 resource classes (#48593) @LukasTy
+- [code-infra] Parallelize visual regression screenshots (#48557) @Janpot
+- [code-infra] Run nightly-cron on v7.x (#48579) @Janpot
+- [core] Fix typescript@next typecheck (#48587) @Janpot
+- [pnpm] Add security settings to pnpm-workspace.yaml (#48582) @Janpot
+- [styled-engine-sc] Fix compatibility with Vite and Vitest (#48558) @mj12albert
+- [test] Add axe-core tests for mui-material (#48341) @siriwatknp
+- [test] Configure Tailwind CSS in the visual-regression app (#48575) @Janpot
+
+All contributors of this release in alphabetical order: @brijeshb42, @cherniavskii, @JakeSaterlay, @Janpot, @joserodolfofreitas, @LukasTy, @mj12albert, @nightt5879, @noam3127, @oliviertassinari, @pavan-sh, @silviuaavram, @siriwatknp, @tyalau, @ZeeshanTamboli
+
 ## 9.0.1
 
 <!-- generated comparing v9.0.0..master -->

README.md

@@ -2,7 +2,7 @@
 <!-- #host-reference -->
 
 <p align="center">
-  <a href="https://mui.com/core/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="Material UI logo"></a>
+  <a href="https://mui.com/core/" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="Material UI logo"></a>
 </p>
 
 <h1 align="center">Material UI</h1>
@@ -50,8 +50,8 @@ Use `@latest` for the latest stable release.
 ### Diamond 💎
 
 <p>
-  <a href="https://www.doit.com/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://mui.com/static/sponsors/doit-square.svg" alt="doit" title="Management Platform for Google Cloud and AWS" loading="lazy" /></a>
-  <a href="https://formengine.io/lightweight-react-json-schema-form-builder-library-for-mui/?utm_source=mui&utm_medium=sponsor&utm_campaign=mui&utm_content=stop-manually&utm_term=smartway" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://mui.com/static/sponsors/formengine-square.svg" alt="formengine" title="Build forms with MUI the smart way!" loading="lazy" /></a>
+  <a href="https://www.doit.com/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="sponsored" target="_blank"><img height="128" width="128" src="https://mui.com/static/sponsors/doit-square.svg" alt="doit" title="Management Platform for Google Cloud and AWS" loading="lazy" /></a>
+  <a href="https://formengine.io/lightweight-react-json-schema-form-builder-library-for-mui/?utm_source=mui&utm_medium=sponsor&utm_campaign=mui&utm_content=stop-manually&utm_term=smartway" rel="sponsored" target="_blank"><img height="128" width="128" src="https://mui.com/static/sponsors/formengine-square.svg" alt="formengine" title="Build forms with MUI the smart way!" loading="lazy" /></a>
 </p>
 
 Diamond sponsors are those who have pledged $1,500/month or more to MUI.
@@ -61,26 +61,26 @@ Diamond sponsors are those who have pledged $1,500/month or more to MUI.
 via [Open Collective](https://opencollective.com/mui-org) or via [Patreon](https://www.patreon.com/oliviertassinari)
 
 <p>
-  <a href="https://tidelift.com/" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/30204434?s=288" alt="tidelift.com" title="Tidelift: Enterprise-ready open-source software." loading="lazy" /></a>
+  <a href="https://tidelift.com/" rel="sponsored" target="_blank"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/30204434?s=288" alt="tidelift.com" title="Tidelift: Enterprise-ready open-source software." loading="lazy" /></a>
   &nbsp;
-  <a href="https://www.dialmycalls.com/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/dialmycalls/f5ae9ab/avatar/288.png" alt="dialmycalls.com" title="DialMyCalls: Send text messages, calls, and emails." loading="lazy" /></a>
+  <a href="https://www.dialmycalls.com/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/dialmycalls/f5ae9ab/avatar/288.png" alt="dialmycalls.com" title="DialMyCalls: Send text messages, calls, and emails." loading="lazy" /></a>
   &nbsp;
 </p>
 
 <p>
-  <a href="https://goread.io/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank">Goread.io</a>
+  <a href="https://goread.io/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="sponsored" target="_blank">Goread.io</a>
   &nbsp;
-  <a href="https://buzzoid.com/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank">Buzzoid</a>
+  <a href="https://buzzoid.com/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="sponsored" target="_blank">Buzzoid</a>
   &nbsp;
-  <a href="https://twicsy.com/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank">Twicsy</a>
+  <a href="https://twicsy.com/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="sponsored" target="_blank">Twicsy</a>
   &nbsp;
-  <a href="https://poprey.com/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank">Poprey</a>
+  <a href="https://poprey.com/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="sponsored" target="_blank">Poprey</a>
   &nbsp;
-  <a href="https://www.socialwick.com/instagram/followers/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank">SocialWick</a>
+  <a href="https://www.socialwick.com/instagram/followers/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="sponsored" target="_blank">SocialWick</a>
   &nbsp;
- <a href="https://www.follower24.de/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank">Follower24</a>
+ <a href="https://www.follower24.de/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="sponsored" target="_blank">Follower24</a>
   &nbsp;
-  <a href="https://followerfabrik.de/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank">FollowerFabrik</a>
+  <a href="https://followerfabrik.de/?utm_source=mui.com&utm_medium=referral&utm_content=readme" rel="sponsored" target="_blank">FollowerFabrik</a>
   &nbsp;
 </p>
 

babel.config.mjs

@@ -25,6 +25,10 @@ function resolveAliasPath(relativeToBabelConf) {
 export default function getBabelConfig(api) {
   const baseConfig = getBaseConfig(api);
 
+  // Covers: docs prod build (NODE_ENV=production), package esm build (BABEL_ENV=stable),
+  // package cjs build (BABEL_ENV=node). Excludes docs dev, tests, coverage.
+  const isProductionBuild = api.env(['production', 'stable', 'node']);
+
   const defaultAlias = {
     '@mui/material': resolveAliasPath('./packages/mui-material/src'),
     '@mui/internal-core-docs': resolveAliasPath('./packages-internal/core-docs/src'),
@@ -43,7 +47,7 @@ export default function getBabelConfig(api) {
   };
 
   /** @type {babel.PluginItem[]} */
-  const plugins = [
+  const prodOnlyPlugins = [
     [
       '@mui/internal-babel-plugin-minify-errors',
       {
@@ -55,21 +59,34 @@ export default function getBabelConfig(api) {
     ],
   ];
 
+  const excludedBasePlugins = new Set([
+    '@mui/internal-babel-plugin-display-name',
+    // Inlining MUI_VERSION, etc only matters for shipped bundles.
+    // Dev reads process.env at runtime without needing substitution.
+    ...(isProductionBuild ? [] : ['babel-plugin-transform-inline-environment-variables']),
+  ]);
+
   const basePlugins = (baseConfig.plugins || []).filter(
     (/** @type {[unknown, unknown, string]} */ [, , pluginName]) =>
-      pluginName !== '@mui/internal-babel-plugin-display-name',
+      !excludedBasePlugins.has(pluginName),
   );
-  basePlugins.push(...plugins);
+
+  if (isProductionBuild) {
+    basePlugins.push(...prodOnlyPlugins);
+  }
 
   return {
     ...baseConfig,
     plugins: basePlugins,
-    overrides: [
-      {
-        exclude: /\.test\.(m?js|ts|tsx)$/,
-        plugins: ['@babel/plugin-transform-react-constant-elements'],
-      },
-    ],
+    // `@babel/plugin-transform-react-constant-elements` hoists static JSX — prod-only optimization.
+    overrides: isProductionBuild
+      ? [
+          {
+            exclude: /\.test\.(m?js|ts|tsx)$/,
+            plugins: ['@babel/plugin-transform-react-constant-elements'],
+          },
+        ]
+      : [],
     env: {
       development: {
         plugins: [

docs/data/material/components/avatars/BadgeAvatars.js

@@ -2,6 +2,7 @@ import { styled } from '@mui/material/styles';
 import Badge from '@mui/material/Badge';
 import Avatar from '@mui/material/Avatar';
 import Stack from '@mui/material/Stack';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
   '& .MuiBadge-badge': {
@@ -46,16 +47,28 @@ export default function BadgeAvatars() {
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         variant="dot"
       >
-        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Remy Sharp, online" src="/static/images/avatar/1.jpg" />
       </StyledBadge>
       <Badge
         overlap="circular"
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-        badgeContent={
-          <SmallAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-        }
+        badgeContent={2}
+        color="primary"
       >
-        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar
+          alt="Travis Howard, 2 unread messages"
+          src="/static/images/avatar/2.jpg"
+        />
+      </Badge>
+      <Badge
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        badgeContent={<SmallAvatar alt="" src="/static/images/avatar/1.jpg" />}
+      >
+        <InsertDriveFileIcon
+          color="action"
+          fontSize="large"
+          titleAccess="Q4 budget spreadsheet, last edited by Remy Sharp"
+        />
       </Badge>
     </Stack>
   );

docs/data/material/components/avatars/BadgeAvatars.tsx

@@ -2,6 +2,7 @@ import { styled } from '@mui/material/styles';
 import Badge from '@mui/material/Badge';
 import Avatar from '@mui/material/Avatar';
 import Stack from '@mui/material/Stack';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
   '& .MuiBadge-badge': {
@@ -46,16 +47,28 @@ export default function BadgeAvatars() {
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         variant="dot"
       >
-        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Remy Sharp, online" src="/static/images/avatar/1.jpg" />
       </StyledBadge>
       <Badge
         overlap="circular"
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-        badgeContent={
-          <SmallAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-        }
+        badgeContent={2}
+        color="primary"
       >
-        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar
+          alt="Travis Howard, 2 unread messages"
+          src="/static/images/avatar/2.jpg"
+        />
+      </Badge>
+      <Badge
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        badgeContent={<SmallAvatar alt="" src="/static/images/avatar/1.jpg" />}
+      >
+        <InsertDriveFileIcon
+          color="action"
+          fontSize="large"
+          titleAccess="Q4 budget spreadsheet, last edited by Remy Sharp"
+        />
       </Badge>
     </Stack>
   );