Merge branch 'master' into loading-button

.github/workflows/codeql.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@662472033e021d55d94146f66f6058822b0b39fd # v3.27.0
+        uses: github/codeql-action/init@4f3212b61783c3c68e8309a0f18a699764811cda # v3.27.1
         with:
           languages: typescript
           config-file: ./.github/codeql/codeql-config.yml
@@ -30,4 +30,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@662472033e021d55d94146f66f6058822b0b39fd # v3.27.0
+        uses: github/codeql-action/analyze@4f3212b61783c3c68e8309a0f18a699764811cda # v3.27.1

.github/workflows/scorecards.yml

@@ -43,6 +43,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@662472033e021d55d94146f66f6058822b0b39fd # v3.27.0
+        uses: github/codeql-action/upload-sarif@4f3212b61783c3c68e8309a0f18a699764811cda # v3.27.1
         with:
           sarif_file: results.sarif

CHANGELOG.old.md

@@ -2449,7 +2449,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som
 ### Core
 
 - [changelog] Fix issues in highlight @oliviertassinari
-- [core] Remove redundant `@material-ui/` aliases from regression test Webpack config (#38574) @ZeeshanTamboli
+- [core] Remove redundant `@material-ui/` aliases from regression test webpack config (#38574) @ZeeshanTamboli
 - [core] Fix CI error @oliviertassinari
 - [core] Remove unnecessary Box (#38461) @oliviertassinari
 - [core] Set GitHub Action top level permission @oliviertassinari
@@ -5458,7 +5458,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som
 - [docs] Fix typo in `Grid` docs (#34475) @Dustin-Digitar
 - [docs] Fix typo in `Back to top` section in AppBar docs (#34479) @Dustin-Digitar
 - [docs] Standardize all "Installation" pages (#34168) @samuelsycamore
-- [docs] Fix Webpack file name to the standard: `webpack.config.js` (#34446) @CodingItWrong
+- [docs] Fix webpack file name to the standard: `webpack.config.js` (#34446) @CodingItWrong
 - [docs] Fix Select `onChange` call (#34408) @siriwatknp
 - [docs] Notification for pickers blog - v5 stable (#34400) @joserodolfofreitas
 - [docs] Improve social sharing of docs pages (#34346) @oliviertassinari
@@ -6103,7 +6103,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som
 - [docs] Update to React 18 (#33196) @mnajdova
 - [docs] Simplify "Upload button" demo (#33326) @baharalidurrani
 - [docs] Add "refine" demo to showcase (#33240) @omeraplak
-- [docs] Add Webpack alias for legacy utils package (#33376) @jgbae
+- [docs] Add webpack alias for legacy utils package (#33376) @jgbae
 - [docs] Improve external link icons synonyms (#33257) @davidgarciab
 - [examples] Update Base UI with Tailwind CSS to use the latest versions of the dependencies (#33401) @mnajdova
 - [examples] Add Base UI example (#33154) @siriwatknp
@@ -8762,7 +8762,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som
 - [core] Remove code handling JSS components (#28421) @eps1lon
 - [core] Remove unused dependencies (#28468) @eps1lon
 - [core] Ensure both docs bundles are analyzeable (#28410) @eps1lon
-- [core] Switch to Webpack 5 (#28248) @eps1lon
+- [core] Switch to webpack 5 (#28248) @eps1lon
 - [core] Batch small changes (#28177) @oliviertassinari
 - [core] Update publish tag to latest (#28382) @mnajdova
 - [framer] Update @mui/\* dependencies (#28469) @eps1lon
@@ -9483,7 +9483,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som
 - [docs] Sort the size in a more logical order (#27186) @oliviertassinari
 - [docs] Use actual link to paperbase (#27063) @eps1lon
 - [docs] Use custom markdown loader for landing page (#27065) @eps1lon
-- [docs] Use Webpack 5 (#27077) @eps1lon
+- [docs] Use webpack 5 (#27077) @eps1lon
 - [examples] Fix CDN warning (#27229) @oliviertassinari
 - [examples] Remove `StyledEngineProvider` as JSS is not used (#27133) @mnajdova
 - [examples] Remove forgotten StyledEngineProvider (#27163) @oliviertassinari
@@ -9612,7 +9612,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som
 - [docs] Fix /components/hidden merge conflict (#26997) @eps1lon
 - [docs] Fix 404 links (#26963) @oliviertassinari
 - [docs] Remove link that points to v4 blog post (#26960) @steveafrost
-- [docs] Use custom Webpack loader for markdown (#26774) @eps1lon
+- [docs] Use custom webpack loader for markdown (#26774) @eps1lon
 - [docs] Fix 301 links (#26942) @oliviertassinari
 - [docs] Add page for the `sx` prop (#26769) @mnajdova
 - [docs] pre-fill issue when a demo crashes (#27034) @eps1lon
@@ -15660,7 +15660,7 @@ A big thanks to the 25 contributors who made this release possible.
 - [docs] Improve a11y of the chip array example (#20294) @m4theushw
 - [docs] Refactor markdown parsing (#20549) @eps1lon
 - [docs] Remove old workarounds (#20587) @eps1lon
-- [docs] Remove unnecessary Webpack loaders (#20563) @eps1lon
+- [docs] Remove unnecessary webpack loaders (#20563) @eps1lon
 - [docs] Sync translations (#20498) @oliviertassinari
 - [docs] Use reactStrictMode over custom switch (#20522) @eps1lon
 
@@ -22224,7 +22224,7 @@ A big thanks to the 14 contributors who made this release possible.
 - [RaisedButton] Conditionally apply overlay backgroundColor (#9811) @walwoodr
 - [Snackbar] Static properties for reason string constants (#10300) @RavenHursT
 - [TextField] Fix caret position issue (#10214) @MaratFaskhiev
-- Add sideEffects: false for Webpack 4 (#11167) @matthoffner
+- Add sideEffects: false for webpack 4 (#11167) @matthoffner
 
 ### Docs
 
@@ -25082,7 +25082,7 @@ When `withStyles()` is used as a decorator and `strictNullChecks` is enabled, on
 - [types] Better component typing (#8304) @oliviertassinari
 - [styles] Add a new defensive warning (#8341) @oliviertassinari
 - [core] Upgrade the dependencies (#8284) @oliviertassinari
-- [core] Help Webpack doing dead code elimination (#8340) @oliviertassinari
+- [core] Help webpack doing dead code elimination (#8340) @oliviertassinari
 - [core] Add TypeScript in the CI (#8328) @oliviertassinari
 - [typescript] Fix typo in Tooltip (#8271) @Rid
 - [typescript] Fix definitions for BreakpointsOptions (#8285) @peterprice
@@ -25802,7 +25802,7 @@ We do, we have extended the support of React to the 16.0.0-alpha.13 release (aka
 - [docs] Fix typo in class name (#7192) @ossan-engineer
 - [docs] Add supported server section (#7231) @oliviertassinari
 - [docs] Detail the browser support (#7188) @oliviertassinari
-- [docs] Upgrade to Webpack v3 (#7210) @oliviertassinari
+- [docs] Upgrade to webpack v3 (#7210) @oliviertassinari
 - [docs] More documentation on the typography (#7248) @oliviertassinari
 
 ### Core
@@ -26381,7 +26381,7 @@ _Feb 26, 2017_
 
 ### Docs
 
-- [docs] Use Webpack 2 & dll bundle (#6160) @nathanmarks
+- [docs] Use webpack 2 & dll bundle (#6160) @nathanmarks
 - [docs] Improve the user experience on mobile (#6154) @oliviertassinari
 - [docs] Fix the Table examples on mobile (425d8ed47e0282b8c0409517c53e00ef61374b02) @oliviertassinari
 - [docs] Add an API section (#6239) @oliviertassinari
@@ -26391,7 +26391,7 @@ _Feb 26, 2017_
 
 - [core] Fix typos in styles/transitions pointed out in issue (#6175) @Shahrukh-Zindani
 - [core] Lightweight the build (#6152) @oliviertassinari
-- [core] Add exports to index.js for inclusion in Webpack bundle (#6144) @fkretzer
+- [core] Add exports to index.js for inclusion in webpack bundle (#6144) @fkretzer
 - [test] Integration of test suite to run on BrowserStack (#6236) @oliviertassinari
 - [test] Bump vrtest version for exit code fix (1831aa76fe72e9b22a0b82f2a360f860ca89fdce) @nathanmarks
 
@@ -26535,7 +26535,7 @@ You can preview a **very early** version of the `next` branch following [this li
 
 ### Core
 
-- [core] Add support for Webpack 2/Rollup tree shaking in `svg-icons` sub module (#5774)
+- [core] Add support for webpack 2/Rollup tree shaking in `svg-icons` sub module (#5774)
 
 ## 0.16.5
 
@@ -26595,7 +26595,7 @@ This release is intended to solve an [issue](https://github.com/mui/material-ui/
 
 - [ListItem] Fix hover on touch devices (#5566)
 - [core] include `react-tap-event-plugin@^2.0.0` for `react@^15.4.0` (#5572)
-- [core] Add support for Webpack 2/Rollup tree shaking (#5545)
+- [core] Add support for webpack 2/Rollup tree shaking (#5545)
 
 ### Docs
 

apps/pigment-css-next-app/package.json

@@ -23,7 +23,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "0.0.25",
+    "@pigment-css/nextjs-plugin": "0.0.26",
     "@types/node": "^20.17.6",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

apps/pigment-css-vite-app/package.json

@@ -21,13 +21,13 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
-    "react-router-dom": "^6.27.0",
+    "react-router-dom": "^6.28.0",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
-    "@pigment-css/vite-plugin": "0.0.25",
+    "@pigment-css/vite-plugin": "0.0.26",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/webfontloader": "^1.6.38",

docs/data/joy/customization/dark-mode/dark-mode.md

@@ -115,7 +115,7 @@ export default class MyDocument extends Document {
 
 ### Next.js App Router
 
-To use the Joy UI API with a Next.js project with the App Router, add the following code to the [root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) file in order to prevent flickering:
+To use the Joy UI API with a Next.js project with the App Router, add the following code to the [root layout](https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) file in order to prevent flickering:
 
 ```jsx title="app/layout.js"
 import InitColorSchemeScript from '@mui/joy/InitColorSchemeScript';

docs/data/joy/integrations/icon-libraries/icon-libraries.md

@@ -47,7 +47,7 @@ npm install @mui/icons-material @mui/material
 
 Because `@mui/material` is a required dependency of `@mui/icons-material`, you have to update your bundler's config to add an alias.
 
-Here is an example of how you can do it, if you use [Webpack](https://webpack.js.org/):
+Here is an example of how you can do it, if you use [webpack](https://webpack.js.org/):
 
 **webpack.config.js**
 

docs/data/material/components/icons/icons.md

@@ -120,7 +120,7 @@ This component extends the native `<svg>` element:
 ### Component prop
 
 You can use the `SvgIcon` wrapper even if your icons are saved in the `.svg` format.
-[svgr](https://github.com/gregberge/svgr) has loaders to import SVG files and use them as React components. For example, with Webpack:
+[svgr](https://github.com/gregberge/svgr) has loaders to import SVG files and use them as React components. For example, with webpack:
 
 ```jsx
 // webpack.config.js

docs/data/material/components/progress/progress.md

@@ -112,7 +112,9 @@ After 1.0 second, you can display a loader to keep user's flow of thought uninte
 Under heavy load, you might lose the stroke dash animation or see random `CircularProgress` ring widths.
 You should run processor intensive operations in a web worker or by batch in order not to block the main rendering thread.
 
-![heavy load](/static/images/progress/heavy-load.gif)
+<video autoplay muted loop playsinline width="1082" height="158" style="width: 541px;">
+  <source src="/static/material-ui/react-components/progress-heavy-load.mp4" type="video/mp4" />
+</video>
 
 When it's not possible, you can leverage the `disableShrink` prop to mitigate the issue.
 See [this issue](https://github.com/mui/material-ui/issues/10327).

docs/data/material/customization/css-theme-variables/configuration.md

@@ -176,7 +176,7 @@ createTheme({
 
 ### Next.js App Router
 
-Add the following code to the [root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) file:
+Add the following code to the [root layout](https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) file:
 
 ```jsx title="app/layout.js"
 import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';

docs/data/material/discover-more/backers/backers.md

@@ -156,7 +156,7 @@ Your organization logo will be placed in:
 - the [README.md](https://github.com/mui/material-ui#sponsors) (80k+ unique visitors/month)
 - the [Gold sponsor list](#gold-sponsors)
 
-\*we accept donations, but we won't show unethical ads.
+\*for backlink sponsors, your logo won't be visible.
 
 ### Silver
 

docs/data/material/getting-started/faq/faq.md

@@ -351,7 +351,7 @@ There are several common reasons for this to happen:
 
 - You have another `@mui/styles` library somewhere in your dependencies.
 - You have a monorepo structure for your project (for example, lerna or yarn workspaces) and `@mui/styles` module is a dependency in more than one package (this one is more or less the same as the previous one).
-- You have several applications that are using `@mui/styles` running on the same page (for example, several entry points in Webpack are loaded on the same page).
+- You have several applications that are using `@mui/styles` running on the same page (for example, several entry points in webpack are loaded on the same page).
 
 ### Duplicated module in node_modules
 
@@ -365,7 +365,7 @@ If you identified that duplication is the issue that you are encountering there
 If you are using npm you can try running `npm dedupe`.
 This command searches the local dependencies and tries to simplify the structure by moving common dependencies further up the tree.
 
-If you are using Webpack, you can change the way it will [resolve](https://webpack.js.org/configuration/resolve/#resolve-modules) the @mui/styles module. You can overwrite the default order in which Webpack will look for your dependencies and make your application node_modules more prioritized than default node module resolution order:
+If you are using webpack, you can change the way it will [resolve](https://webpack.js.org/configuration/resolve/#resolve-modules) the @mui/styles module. You can overwrite the default order in which webpack will look for your dependencies and make your application node_modules more prioritized than default node module resolution order:
 
 ```diff
  resolve: {
@@ -377,7 +377,7 @@ If you are using Webpack, you can change the way it will [resolve](https://webpa
 
 ### Running multiple applications on one page
 
-If you have several applications running on one page, consider using one @mui/styles module for all of them. If you are using Webpack, you can use [CommonsChunkPlugin](https://webpack.js.org/plugins/commons-chunk-plugin/) to create an explicit [vendor chunk](https://webpack.js.org/plugins/commons-chunk-plugin/#explicit-vendor-chunk), that will contain the @mui/styles module:
+If you have several applications running on one page, consider using one @mui/styles module for all of them. If you are using webpack, you can use [CommonsChunkPlugin](https://webpack.js.org/plugins/commons-chunk-plugin/) to create an explicit [vendor chunk](https://webpack.js.org/plugins/commons-chunk-plugin/#explicit-vendor-chunk), that will contain the @mui/styles module:
 
 ```diff
   module.exports = {
@@ -409,7 +409,7 @@ You could end up accidentally using two class name generators in a variety of sc
 - You are using a bundler and it is splitting code in a way that causes multiple class name generator instances to be created.
 
 :::success
-If you are using Webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk).
+If you are using webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk).
 :::
 
 Overall, it's simple to recover from this problem by wrapping each Material UI application with [`StylesProvider`](/system/styles/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared among them**.

docs/data/material/getting-started/supported-platforms/supported-platforms.md

@@ -40,6 +40,6 @@ Have a look at the older [versions](https://mui.com/versions/) for backward comp
 Material UI requires a minimum version of TypeScript 4.7.
 This aims to match the policy of [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped), with the support of the versions of TypeScript that are less than two years old.
 
-## Webpack
+## webpack
 
-The minimium required version of webpack to bundle applications that use Material UI is v5. Webpack <= v4 can't bundle Material UI untranspiled as it uses features such as the [null coalscing operator (`??`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing) and [optional chaining (`?.`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining).
+The minimium required version of webpack to bundle applications that use Material UI is v5. webpack <= v4 can't bundle Material UI untranspiled as it uses features such as the [null coalscing operator (`??`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing) and [optional chaining (`?.`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining).

docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.js

@@ -65,6 +65,7 @@ export default function ColorModeIconDropdown(props) {
         slotProps={{
           paper: {
             variant: 'outlined',
+            elevation: 0,
             sx: {
               my: '4px',
             },

docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.tsx

@@ -65,6 +65,7 @@ export default function ColorModeIconDropdown(props: IconButtonOwnProps) {
         slotProps={{
           paper: {
             variant: 'outlined',
+            elevation: 0,
             sx: {
               my: '4px',
             },

docs/data/material/getting-started/templates/shared-theme/themePrimitives.js

@@ -160,7 +160,7 @@ export const getDesignTokens = (mode) => {
       },
     },
     typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
+      fontFamily: 'Inter, sans-serif',
       h1: {
         fontSize: defaultTheme.typography.pxToRem(48),
         fontWeight: 600,
@@ -318,7 +318,7 @@ export const colorSchemes = {
 };
 
 export const typography = {
-  fontFamily: ['"Inter", "sans-serif"'].join(','),
+  fontFamily: 'Inter, sans-serif',
   h1: {
     fontSize: defaultTheme.typography.pxToRem(48),
     fontWeight: 600,

docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts

@@ -183,7 +183,7 @@ export const getDesignTokens = (mode: PaletteMode) => {
       },
     },
     typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
+      fontFamily: 'Inter, sans-serif',
       h1: {
         fontSize: defaultTheme.typography.pxToRem(48),
         fontWeight: 600,
@@ -341,7 +341,7 @@ export const colorSchemes = {
 };
 
 export const typography = {
-  fontFamily: ['"Inter", "sans-serif"'].join(','),
+  fontFamily: 'Inter, sans-serif',
   h1: {
     fontSize: defaultTheme.typography.pxToRem(48),
     fontWeight: 600,

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md

@@ -230,7 +230,7 @@ You are strongly discouraged to:
 
   :::
 
-A great way to use these bundles is to configure bundler aliases, for example with [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
+A great way to use these bundles is to configure bundler aliases, for example with [webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
 
 ```js
 {