Merge branch 'master' into fix/scroll-lock-touch

Signed-off-by: atomiks <[email protected]>

Author: atomiks

.github/workflows/codeql.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@4e94bd11f71e507f7f87df81788dff88d1dacbfb # v4.31.0
+        uses: github/codeql-action/init@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
         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@4e94bd11f71e507f7f87df81788dff88d1dacbfb # v4.31.0
+        uses: github/codeql-action/analyze@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2

.github/workflows/mark-duplicate.yml

@@ -14,7 +14,7 @@ jobs:
       issues: write
     steps:
       - name: Mark duplicate
-        uses: actions-cool/issues-helper@45d75b6cf72bf4f254be6230cb887ad002702491 # v3.6.3
+        uses: actions-cool/issues-helper@564cd9b1baacd7a9cd634e8039a149901ee5f600 # v3.7.1
         with:
           actions: 'mark-duplicate'
           token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/scorecards.yml

@@ -40,6 +40,6 @@ jobs:
           publish_results: true
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@4e94bd11f71e507f7f87df81788dff88d1dacbfb # v4.31.0
+        uses: github/codeql-action/upload-sarif@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
         with:
           sarif_file: results.sarif

.gitignore

@@ -5,7 +5,6 @@
 # IntelliJ IDEA module file
 *.iml
 *.log
-*.tsbuildinfo
 /.eslintcache
 /coverage
 /docs/.env.local
@@ -34,3 +33,7 @@ docs/public/llms-full.txt
 docs/public/react
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

docs/next-env.d.ts

@@ -11,7 +11,6 @@ import { rehypeQuickNav } from 'docs/src/components/QuickNav/rehypeQuickNav.mjs'
 import { rehypeChangelog } from 'docs/src/components/QuickNav/rehypeChangelog.mjs';
 import { rehypeKbd } from 'docs/src/components/Kbd/rehypeKbd.mjs';
 import { rehypeReference } from 'docs/src/components/ReferenceTable/rehypeReference.mjs';
-import { rehypeDemos } from 'docs/src/components/Demo/rehypeDemos.mjs';
 import { rehypeSyntaxHighlighting } from 'docs/src/syntax-highlighting/index.mjs';
 import { rehypeSlug } from 'docs/src/components/QuickNav/rehypeSlug.mjs';
 import { rehypeSubtitle } from 'docs/src/components/Subtitle/rehypeSubtitle.mjs';
@@ -23,7 +22,6 @@ const withMdx = nextMdx({
   options: {
     remarkPlugins: [remarkGfm, remarkTypography],
     rehypePlugins: [
-      rehypeDemos,
       rehypeReference,
       ...rehypeSyntaxHighlighting,
       rehypeSlug,
@@ -50,6 +48,37 @@ const rootPackage = loadPackageJson();
 const nextConfig = {
   trailingSlash: false,
   pageExtensions: ['mdx', 'tsx'],
+  turbopack: {
+    rules: {
+      './src/app/**/demos/*/index.ts': {
+        as: '*.ts',
+        loaders: ['@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighter'],
+      },
+      './src/demo-data/*/index.ts': {
+        as: '*.ts',
+        loaders: ['@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighter'],
+      },
+    },
+  },
+  webpack: (config, { defaultLoaders }) => {
+    // for production builds
+    config.module.rules.push({
+      test: /\/demos\/[^/]+\/index\.ts$/,
+      use: [
+        defaultLoaders.babel,
+        '@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighter',
+      ],
+    });
+    config.module.rules.push({
+      test: /\/src\/demo-data\/[^/]+\/index\.ts$/,
+      use: [
+        defaultLoaders.babel,
+        '@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighter',
+      ],
+    });
+
+    return config;
+  },
   env: {
     // docs-infra
     LIB_VERSION: rootPackage.version,

docs/next.config.mjs

@@ -21,20 +21,21 @@
     "@emotion/styled": "^11.14.1",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
+    "@mui/internal-docs-infra": "^0.2.3-canary.12",
     "@next/mdx": "^15.5.6",
     "@react-spring/web": "^10.0.3",
     "@stefanprobst/rehype-extract-toc": "^3.0.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@types/mdx": "^2.0.13",
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.1",
-    "es-toolkit": "^1.40.0",
-    "estree-util-value-to-estree": "^3.4.1",
+    "es-toolkit": "^1.41.0",
+    "estree-util-value-to-estree": "^3.5.0",
     "globby": "^15.0.0",
     "hast": "^1.0.0",
     "hast-util-heading-rank": "^3.0.0",
     "hast-util-to-string": "^3.0.1",
-    "lucide-react": "^0.546.0",
+    "lucide-react": "^0.552.0",
     "lz-string": "^1.5.0",
     "match-sorter": "^8.1.0",
     "next": "15.5.6",
@@ -44,7 +45,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-error-boundary": "^6.0.0",
-    "react-hook-form": "^7.65.0",
+    "react-hook-form": "^7.66.0",
     "react-is": "^19.2.0",
     "rehype-pretty-code": "^0.14.1",
     "remark": "^15.0.1",
@@ -55,23 +56,25 @@
     "remark-rehype": "^11.1.2",
     "remark-typography": "0.7.0",
     "scroll-into-view-if-needed": "3.1.0",
-    "shiki": "^3.13.0",
+    "server-only": "^0.0.1",
+    "shiki": "^3.14.0",
     "to-vfile": "^8.0.0",
     "unist-util-visit-parents": "^6.0.2",
     "vfile-matter": "^5.0.1"
   },
   "devDependencies": {
     "@mdx-js/mdx": "^3.1.1",
-    "@mui/internal-docs-infra": "^0.2.3-canary.5",
-    "@mui/internal-test-utils": "^2.0.14",
-    "@tailwindcss/postcss": "4.1.15",
+    "@mui/internal-docs-infra": "^0.2.3-canary.10",
+    "@mui/internal-test-utils": "^2.0.15",
+    "@tailwindcss/postcss": "4.1.16",
     "@types/chai": "^5.2.3",
     "@types/gtag.js": "^0.0.20",
     "@types/hast": "^3.0.4",
-    "@types/node": "^22.18.12",
+    "@types/node": "~22.18.13",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "@types/unist": "^3.0.3",
+    "@wooorm/starry-night": "^3.8.0",
     "chai": "^6.2.0",
     "cross-env": "^10.1.0",
     "mdast-util-mdx-jsx": "^3.2.0",
@@ -80,9 +83,9 @@
     "react-reconciler": "^0.33.0",
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
-    "rimraf": "^6.0.1",
+    "rimraf": "^6.1.0",
     "serve": "^14.2.5",
-    "tailwindcss": "4.1.15",
+    "tailwindcss": "4.1.16",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "webpack-bundle-analyzer": "^4.10.2",

docs/package.json

@@ -2,15 +2,15 @@
   "name": "AccordionHeader",
   "description": "A heading that labels the corresponding panel.\nRenders an `<h3>` element.",
   "props": {
-    "style": {
-      "type": "CSSProperties | ((state: Accordion.Item.State) => CSSProperties | undefined)",
-      "detailedType": "| React.CSSProperties\n| ((\n    state: Accordion.Item.State,\n  ) => CSSProperties | undefined)\n| undefined"
-    },
     "className": {
       "type": "string | ((state: Accordion.Item.State) => string | undefined)",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
       "detailedType": "| string\n| ((state: Accordion.Item.State) => string | undefined)"
     },
+    "style": {
+      "type": "CSSProperties | ((state: Accordion.Item.State) => CSSProperties | undefined)",
+      "detailedType": "| React.CSSProperties\n| ((\n    state: Accordion.Item.State,\n  ) => CSSProperties | undefined)\n| undefined"
+    },
     "render": {
       "type": "ReactElement | ((props: HTMLProps, state: Accordion.Item.State) => ReactElement)",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",

docs/reference/generated/accordion-header.json

@@ -12,10 +12,6 @@
       "description": "Event handler called when the panel is opened or closed.",
       "detailedType": "| ((\n    open: boolean,\n    eventDetails: Accordion.Item.ChangeEventDetails,\n  ) => void)\n| undefined"
     },
-    "style": {
-      "type": "CSSProperties | ((state: Accordion.Item.State) => CSSProperties | undefined)",
-      "detailedType": "| React.CSSProperties\n| ((\n    state: Accordion.Item.State,\n  ) => CSSProperties | undefined)\n| undefined"
-    },
     "disabled": {
       "type": "boolean",
       "default": "false",
@@ -27,6 +23,10 @@
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
       "detailedType": "| string\n| ((state: Accordion.Item.State) => string | undefined)"
     },
+    "style": {
+      "type": "CSSProperties | ((state: Accordion.Item.State) => CSSProperties | undefined)",
+      "detailedType": "| React.CSSProperties\n| ((\n    state: Accordion.Item.State,\n  ) => CSSProperties | undefined)\n| undefined"
+    },
     "render": {
       "type": "ReactElement | ((props: HTMLProps, state: Accordion.Item.State) => ReactElement)",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",

docs/reference/generated/accordion-item.json

@@ -8,15 +8,15 @@
       "description": "Allows the browser’s built-in page search to find and expand the panel contents.\n\nOverrides the `keepMounted` prop and uses `hidden=\"until-found\"`\nto hide the element without removing it from the DOM.",
       "detailedType": "boolean | undefined"
     },
-    "style": {
-      "type": "CSSProperties | ((state: Accordion.Panel.State) => CSSProperties | undefined)",
-      "detailedType": "| React.CSSProperties\n| ((\n    state: Accordion.Panel.State,\n  ) => CSSProperties | undefined)\n| undefined"
-    },
     "className": {
       "type": "string | ((state: Accordion.Panel.State) => string | undefined)",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
       "detailedType": "| string\n| ((state: Accordion.Panel.State) => string | undefined)"
     },
+    "style": {
+      "type": "CSSProperties | ((state: Accordion.Panel.State) => CSSProperties | undefined)",
+      "detailedType": "| React.CSSProperties\n| ((\n    state: Accordion.Panel.State,\n  ) => CSSProperties | undefined)\n| undefined"
+    },
     "keepMounted": {
       "type": "boolean",
       "default": "false",