From c95584588eb369b4b05e23a91c0abc82ec6a52be Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 29 Mar 2023 10:26:16 +0200
Subject: [PATCH 01/30] [ButtonUnstyled] Drop `component` prop

---
 .../components/button/UnstyledButtonCustom.js |  2 +-
 .../button/UnstyledButtonCustom.tsx           |  2 +-
 .../components/button/UnstyledButtonsSpan.js  |  4 +--
 .../components/button/UnstyledButtonsSpan.tsx |  4 +--
 .../button/UnstyledButtonsSpan.tsx.preview    |  4 +--
 docs/data/base/components/button/button.md    |  8 ++---
 docs/pages/base/api/button-unstyled.json      |  1 -
 .../button-unstyled/button-unstyled.json      |  1 -
 .../ButtonUnstyled/ButtonUnstyled.spec.tsx    | 35 -------------------
 .../ButtonUnstyled/ButtonUnstyled.test.tsx    | 21 ++++++-----
 .../src/ButtonUnstyled/ButtonUnstyled.tsx     | 18 ++++------
 .../ButtonUnstyled/ButtonUnstyled.types.ts    |  8 ++---
 test/utils/describeConformanceUnstyled.tsx    | 32 -----------------
 13 files changed, 33 insertions(+), 107 deletions(-)

diff --git a/docs/data/base/components/button/UnstyledButtonCustom.js b/docs/data/base/components/button/UnstyledButtonCustom.js
index 3044a6a7a3893a..297d7c65e20cf3 100644
--- a/docs/data/base/components/button/UnstyledButtonCustom.js
+++ b/docs/data/base/components/button/UnstyledButtonCustom.js
@@ -108,7 +108,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
 );
 
 const SvgButton = React.forwardRef(function SvgButton(props, ref) {
-  return <ButtonUnstyled {...props} component={CustomButtonRoot} ref={ref} />;
+  return <ButtonUnstyled {...props} slots={{ root: CustomButtonRoot }} ref={ref} />;
 });
 
 export default function UnstyledButtonCustom() {
diff --git a/docs/data/base/components/button/UnstyledButtonCustom.tsx b/docs/data/base/components/button/UnstyledButtonCustom.tsx
index de5113dd3bc9f7..61ac37f1ad8156 100644
--- a/docs/data/base/components/button/UnstyledButtonCustom.tsx
+++ b/docs/data/base/components/button/UnstyledButtonCustom.tsx
@@ -112,7 +112,7 @@ const SvgButton = React.forwardRef(function SvgButton(
   props: ButtonUnstyledProps,
   ref: React.ForwardedRef<any>,
 ) {
-  return <ButtonUnstyled {...props} component={CustomButtonRoot} ref={ref} />;
+  return <ButtonUnstyled {...props} slots={{ root: CustomButtonRoot }} ref={ref} />;
 });
 
 export default function UnstyledButtonCustom() {
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.js b/docs/data/base/components/button/UnstyledButtonsSpan.js
index 1528e97a1e419d..a705789b2d7843 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.js
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.js
@@ -43,8 +43,8 @@ const CustomButton = styled(ButtonUnstyled)`
 export default function UnstyledButtonsSpan() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton component="span">Button</CustomButton>
-      <CustomButton component="span" disabled>
+      <CustomButton slots={{ root: 'span' }}>Button</CustomButton>
+      <CustomButton slots={{ root: 'span' }} disabled>
         Disabled
       </CustomButton>
     </Stack>
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
index f05620d89899cb..99a10b8a8939f2 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
@@ -47,8 +47,8 @@ const CustomButton = styled(ButtonUnstyled)`
 export default function UnstyledButtonsSpan() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton component="span">Button</CustomButton>
-      <CustomButton component="span" disabled>
+      <CustomButton slots={{ root: 'span' }}>Button</CustomButton>
+      <CustomButton slots={{ root: 'span' }} disabled>
         Disabled
       </CustomButton>
     </Stack>
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview
index 456f8c68ebbaf6..3bc6f9900b4213 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview
@@ -1,4 +1,4 @@
-<CustomButton component="span">Button</CustomButton>
-<CustomButton component="span" disabled>
+<CustomButton slots={{ root: "span" }}>Button</CustomButton>
+<CustomButton slots={{ root: "span" }} disabled>
   Disabled
 </CustomButton>
\ No newline at end of file
diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
index bf5a824e172f3c..87fc82f91d1633 100644
--- a/docs/data/base/components/button/button.md
+++ b/docs/data/base/components/button/button.md
@@ -59,10 +59,10 @@ The following props are available on all non-utility Base components.
 See [Usage](/base/getting-started/usage/) for full details.
 :::
 
-Use the `component` prop to override the root slot with a custom element:
+Use the `slots.root` prop to override the root slot with a custom element:
 
 ```jsx
-<ButtonUnstyled component="div" />
+<ButtonUnstyled slots={{ root: 'div' }} />
 ```
 
 If you provide a non-interactive element such as a `<span>`, the Unstyled Button component will automatically add the necessary accessibility attributes.
@@ -72,8 +72,8 @@ Compare the attributes on the `<span>` in this demo with the Button from the pre
 {{"demo": "UnstyledButtonsSpan.js"}}
 
 :::warning
-If an Unstyled Button is customized with a non-button element (i.e. `<ButtonUnstyled component="span" />`), it will not submit the form it's in when clicked.
-Similarly, `<ButtonUnstyled component="span" type="reset">` will not reset its parent form.
+If an Unstyled Button is customized with a non-button element (i.e. `<ButtonUnstyled slots={{ root: "span" }} />`), it will not submit the form it's in when clicked.
+Similarly, `<ButtonUnstyled slots={{ root: "span" }} type="reset">` will not reset its parent form.
 :::
 
 ## Hook
diff --git a/docs/pages/base/api/button-unstyled.json b/docs/pages/base/api/button-unstyled.json
index db79f2e3ff0d16..4036108b67d0a7 100644
--- a/docs/pages/base/api/button-unstyled.json
+++ b/docs/pages/base/api/button-unstyled.json
@@ -6,7 +6,6 @@
         "description": "func<br>&#124;&nbsp;{ current?: { focusVisible: func } }"
       }
     },
-    "component": { "type": { "name": "elementType" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "focusableWhenDisabled": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": {
diff --git a/docs/translations/api-docs/button-unstyled/button-unstyled.json b/docs/translations/api-docs/button-unstyled/button-unstyled.json
index ca3b0959dcb074..9e7f20da93f4fa 100644
--- a/docs/translations/api-docs/button-unstyled/button-unstyled.json
+++ b/docs/translations/api-docs/button-unstyled/button-unstyled.json
@@ -2,7 +2,6 @@
   "componentDescription": "The foundation for building custom-styled buttons.",
   "propDescriptions": {
     "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disabled": "If <code>true</code>, the component is disabled.",
     "focusableWhenDisabled": "If <code>true</code>, allows a disabled button to receive focus.",
     "slotProps": "The props used for each slot inside the Button.",
diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
index 75b549d3bfbf41..50b163e613cdef 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
@@ -22,38 +22,3 @@ const CustomButtonRoot = React.forwardRef(function CustomButtonRoot(
 function ButtonWithCustomRoot(props: ButtonUnstyledProps) {
   return <ButtonUnstyled {...props} slots={{ root: CustomButtonRoot }} />;
 }
-
-const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
-    function CustomComponent() {
-      return <div />;
-    };
-
-  return (
-    <div>
-      {/* @ts-expect-error */}
-      <ButtonUnstyled invalidProp={0} />
-
-      <ButtonUnstyled component="a" href="#" />
-
-      <ButtonUnstyled component={CustomComponent} stringProp="test" numberProp={0} />
-      {/* @ts-expect-error */}
-      <ButtonUnstyled component={CustomComponent} />
-
-      <ButtonUnstyled
-        component="button"
-        onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
-      />
-
-      <ButtonUnstyled<'div'>
-        component="div"
-        ref={(elem) => {
-          expectType<HTMLDivElement | null, typeof elem>(elem);
-        }}
-        onClick={(e) => {
-          expectType<React.MouseEvent<HTMLDivElement, MouseEvent>, typeof e>(e);
-        }}
-      />
-    </div>
-  );
-};
diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.test.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.test.tsx
index 0812368e9908c0..f40d3936f5da75 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.test.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.test.tsx
@@ -30,7 +30,7 @@ describe('<ButtonUnstyled />', () => {
 
   describe('role attribute', () => {
     it('is set when the root component is an HTML element other than a button', () => {
-      const { getByRole } = render(<ButtonUnstyled component="span" />);
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: 'span' }} />);
       expect(getByRole('button')).not.to.equal(null);
     });
 
@@ -42,7 +42,7 @@ describe('<ButtonUnstyled />', () => {
         ) => <span role={props.role} ref={ref} />,
       );
 
-      const { getByRole } = render(<ButtonUnstyled component={WrappedSpan} />);
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: WrappedSpan }} />);
       expect(getByRole('button')).not.to.equal(null);
     });
 
@@ -54,7 +54,7 @@ describe('<ButtonUnstyled />', () => {
         ) => <button role={props.role} ref={ref} />,
       );
 
-      const { getByRole } = render(<ButtonUnstyled component={WrappedButton} />);
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: WrappedButton }} />);
       expect(getByRole('button')).not.to.have.attribute('role');
     });
   });
@@ -104,7 +104,7 @@ describe('<ButtonUnstyled />', () => {
     describe('as non-button element', () => {
       it('can receive focus when focusableWhenDisabled is set', () => {
         const { getByRole } = render(
-          <ButtonUnstyled component="span" focusableWhenDisabled disabled />,
+          <ButtonUnstyled slots={{ root: 'span' }} focusableWhenDisabled disabled />,
         );
 
         const button = getByRole('button');
@@ -117,7 +117,7 @@ describe('<ButtonUnstyled />', () => {
 
       it('has aria-disabled and tabIndex attributes set', () => {
         const { getByRole } = render(
-          <ButtonUnstyled component="span" focusableWhenDisabled disabled />,
+          <ButtonUnstyled slots={{ root: 'span' }} focusableWhenDisabled disabled />,
         );
 
         const button = getByRole('button');
@@ -129,7 +129,12 @@ describe('<ButtonUnstyled />', () => {
       it('does not respond to user actions when disabled and focused', () => {
         const handleClick = spy();
         const { getByRole } = render(
-          <ButtonUnstyled component="span" focusableWhenDisabled disabled onClick={handleClick} />,
+          <ButtonUnstyled
+            slots={{ root: 'span' }}
+            focusableWhenDisabled
+            disabled
+            onClick={handleClick}
+          />,
         );
 
         const button = getByRole('button');
@@ -155,7 +160,7 @@ describe('<ButtonUnstyled />', () => {
     });
 
     it('renders as the element provided in the "component" prop, even with a "href" prop', () => {
-      const { getByRole } = render(<ButtonUnstyled component="h1" href="#" />);
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: 'h1' }} href="#" />);
       expect(getByRole('heading')).not.to.equal(null);
     });
 
@@ -172,7 +177,7 @@ describe('<ButtonUnstyled />', () => {
     });
 
     it('renders as the element provided in the "component" prop, even with a "to" prop', () => {
-      const { getByRole } = render(<ButtonUnstyled component="h1" to="#" />);
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: 'h1' }} to="#" />);
       expect(getByRole('heading')).not.to.equal(null);
     });
 
diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
index dd0a9af0338012..db41afa254d423 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
@@ -6,7 +6,6 @@ import { getButtonUnstyledUtilityClass } from './buttonUnstyledClasses';
 import {
   ButtonUnstyledProps,
   ButtonUnstyledOwnProps,
-  ButtonUnstyledTypeMap,
   ButtonUnstyledRootSlotProps,
 } from './ButtonUnstyled.types';
 import useButton from '../useButton';
@@ -39,13 +38,13 @@ const useUtilityClasses = (ownerState: ButtonUnstyledOwnerState) => {
  *
  * - [ButtonUnstyled API](https://mui.com/base/api/button-unstyled/)
  */
-const ButtonUnstyled = React.forwardRef(function ButtonUnstyled<
-  BaseComponentType extends React.ElementType = ButtonUnstyledTypeMap['defaultComponent'],
->(props: ButtonUnstyledProps<BaseComponentType>, forwardedRef: React.ForwardedRef<any>) {
+const ButtonUnstyled = React.forwardRef(function ButtonUnstyled(
+  props: ButtonUnstyledProps,
+  forwardedRef: React.ForwardedRef<any>,
+) {
   const {
     action,
     children,
-    component,
     disabled,
     focusableWhenDisabled = false,
     onBlur,
@@ -88,7 +87,7 @@ const ButtonUnstyled = React.forwardRef(function ButtonUnstyled<
   const classes = useUtilityClasses(ownerState);
 
   const defaultElement = other.href || other.to ? 'a' : 'button';
-  const Root: React.ElementType = component ?? slots.root ?? defaultElement;
+  const Root: React.ElementType = slots.root ?? defaultElement;
   const rootProps: WithOptionalOwnerState<ButtonUnstyledRootSlotProps> = useSlotProps({
     elementType: Root,
     getSlotProps: getRootProps,
@@ -102,7 +101,7 @@ const ButtonUnstyled = React.forwardRef(function ButtonUnstyled<
   });
 
   return <Root {...rootProps}>{children}</Root>;
-}) as OverridableComponent<ButtonUnstyledTypeMap>;
+});
 
 ButtonUnstyled.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -124,11 +123,6 @@ ButtonUnstyled.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false
diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts
index e70a68b6287665..86afd4b927b250 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
+import { DefaultComponentProps, Simplify } from '@mui/types';
 import { UseButtonParameters, UseButtonRootSlotProps } from '../useButton';
 import { SlotComponentProps } from '../utils';
 
@@ -43,11 +43,7 @@ export interface ButtonUnstyledSlots {
   root?: React.ElementType;
 }
 
-export type ButtonUnstyledProps<
-  D extends React.ElementType = ButtonUnstyledTypeMap['defaultComponent'],
-> = OverrideProps<ButtonUnstyledTypeMap<{}, D>, D> & {
-  component?: D;
-};
+export type ButtonUnstyledProps = DefaultComponentProps<ButtonUnstyledTypeMap>;
 
 export interface ButtonUnstyledTypeMap<P = {}, D extends React.ElementType = 'button'> {
   props: P & ButtonUnstyledOwnProps;
diff --git a/test/utils/describeConformanceUnstyled.tsx b/test/utils/describeConformanceUnstyled.tsx
index 149143650a7cd9..07d3fe73b8ae46 100644
--- a/test/utils/describeConformanceUnstyled.tsx
+++ b/test/utils/describeConformanceUnstyled.tsx
@@ -9,7 +9,6 @@ import {
   describeRef,
   randomStringValue,
   testClassName,
-  testComponentProp,
   testReactTestRenderer,
 } from './describeConformance';
 
@@ -163,36 +162,6 @@ function testSlotsProp(element: React.ReactElement, getOptions: () => UnstyledCo
       });
     }
   });
-
-  it('uses the component provided in the `component` prop when both `component` and `slots.root` are provided', () => {
-    const RootComponentA = React.forwardRef(
-      ({ children }: React.PropsWithChildren<{}>, ref: React.Ref<any>) => (
-        // @ts-ignore
-        <Element data-testid="a" ref={ref}>
-          {children}
-        </Element>
-      ),
-    );
-
-    const RootComponentB = React.forwardRef(
-      ({ children }: React.PropsWithChildren<{}>, ref: React.Ref<any>) => (
-        // @ts-ignore
-        <Element data-testid="b" ref={ref}>
-          {children}
-        </Element>
-      ),
-    );
-
-    const { queryByTestId } = render(
-      React.cloneElement(element, {
-        component: RootComponentA,
-        slots: { root: RootComponentB },
-      }),
-    );
-
-    expect(queryByTestId('a')).not.to.equal(null);
-    expect(queryByTestId('b')).to.equal(null);
-  });
 }
 
 function testSlotPropsProp(
@@ -342,7 +311,6 @@ function testDisablingClassGeneration(
 }
 
 const fullSuite = {
-  componentProp: testComponentProp,
   slotsProp: testSlotsProp,
   slotPropsProp: testSlotPropsProp,
   slotPropsCallbacks: testSlotPropsCallbacks,

From 8e7ebdad55ab01151d5c12f396b1558ddca0804b Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 29 Mar 2023 11:04:20 +0200
Subject: [PATCH 02/30] docs:typescript:formatted

---
 .../base/components/button/UnstyledButtonsSpan.tsx.preview    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview
index 3bc6f9900b4213..c38f8399833ef2 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview
@@ -1,4 +1,4 @@
-<CustomButton slots={{ root: "span" }}>Button</CustomButton>
-<CustomButton slots={{ root: "span" }} disabled>
+<CustomButton slots={{ root: 'span' }}>Button</CustomButton>
+<CustomButton slots={{ root: 'span' }} disabled>
   Disabled
 </CustomButton>
\ No newline at end of file

From 615cfafe7818ba9089aac7278ec01728f66ba4c2 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 29 Mar 2023 11:19:04 +0200
Subject: [PATCH 03/30] Fix lint issues

---
 packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx | 1 -
 test/utils/describeConformanceUnstyled.tsx              | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
index db41afa254d423..46977ffe099967 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
 import composeClasses from '../composeClasses';
 import { getButtonUnstyledUtilityClass } from './buttonUnstyledClasses';
 import {
diff --git a/test/utils/describeConformanceUnstyled.tsx b/test/utils/describeConformanceUnstyled.tsx
index 07d3fe73b8ae46..34b9aa99aa5f90 100644
--- a/test/utils/describeConformanceUnstyled.tsx
+++ b/test/utils/describeConformanceUnstyled.tsx
@@ -101,7 +101,7 @@ function testPropForwarding(
 }
 
 function testSlotsProp(element: React.ReactElement, getOptions: () => UnstyledConformanceOptions) {
-  const { render, slots, testComponentPropWith: Element = 'div' } = getOptions();
+  const { render, slots } = getOptions();
 
   if (!render) {
     throwMissingPropError('render');

From 3b88d2d318fd0c193963613c7f1ca531a877fbd7 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 29 Mar 2023 11:33:42 +0200
Subject: [PATCH 04/30] Fix tests related to the changes of the conformance
 test suite

---
 packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx        | 2 +-
 .../mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx     | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx
index a64c1ed57d0bb8..a6cbe769d74d82 100644
--- a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx
+++ b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx
@@ -35,7 +35,7 @@ describe('<MenuUnstyled />', () => {
         expectedClassName: menuUnstyledClasses.listbox,
       },
     },
-    skip: ['reactTestRenderer', 'propsSpread', 'componentProp', 'slotsProp'],
+    skip: ['reactTestRenderer', 'propsSpread', 'slotsProp'],
   }));
 
   describe('after initialization', () => {
diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
index 53715300970af5..ebb1d754005664 100644
--- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
@@ -23,7 +23,6 @@ describe('<TextareaAutosize />', () => {
     slots: {},
     skip: [
       // doesn't have slots, so these tests are irrelevant:
-      'componentProp',
       'mergeClassName',
       'ownerStatePropagation',
       'propsSpread',

From 42c3a54cebf80f690ae232e85410dd86c9788902 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 29 Mar 2023 12:55:20 +0200
Subject: [PATCH 05/30] Use React.ButtonHTMLAttributes

---
 .../mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts  | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts
index 86afd4b927b250..2a66f4de3404d1 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DefaultComponentProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { UseButtonParameters, UseButtonRootSlotProps } from '../useButton';
 import { SlotComponentProps } from '../utils';
 
@@ -43,12 +43,7 @@ export interface ButtonUnstyledSlots {
   root?: React.ElementType;
 }
 
-export type ButtonUnstyledProps = DefaultComponentProps<ButtonUnstyledTypeMap>;
-
-export interface ButtonUnstyledTypeMap<P = {}, D extends React.ElementType = 'button'> {
-  props: P & ButtonUnstyledOwnProps;
-  defaultComponent: D;
-}
+export type ButtonUnstyledProps = ButtonUnstyledOwnProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export type ButtonUnstyledOwnerState = ButtonUnstyledOwnProps & {
   active: boolean;

From abb7d98337b660f63995d59d3794c6dd531836b4 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 29 Mar 2023 13:43:22 +0200
Subject: [PATCH 06/30] remove ButtonUnstyledTypeMap usages

---
 .../button/UnstyledButtonsDisabledFocusCustom.js     |  4 ++--
 .../button/UnstyledButtonsDisabledFocusCustom.tsx    | 12 ++++--------
 .../UnstyledButtonsDisabledFocusCustom.tsx.preview   |  4 ++--
 .../base/components/button/UnstyledButtonsSpan.tsx   |  8 ++------
 .../src/ButtonUnstyled/ButtonUnstyled.types.ts       |  3 ++-
 5 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
index d971c0f9772359..372cca78453424 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
@@ -43,10 +43,10 @@ const CustomButton = styled(ButtonUnstyled)`
 export default function UnstyledButtonsDisabledFocusCustom() {
   return (
     <Stack spacing={2}>
-      <CustomButton component="span" disabled>
+      <CustomButton slots={{ root: 'span' }} disabled>
         focusableWhenDisabled = false
       </CustomButton>
-      <CustomButton component="span" disabled focusableWhenDisabled>
+      <CustomButton slots={{ root: 'span' }} disabled focusableWhenDisabled>
         focusableWhenDisabled = true
       </CustomButton>
     </Stack>
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
index e29ae166ce7d13..372cca78453424 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
@@ -1,11 +1,7 @@
 import * as React from 'react';
-import ButtonUnstyled, {
-  buttonUnstyledClasses,
-  ButtonUnstyledTypeMap,
-} from '@mui/base/ButtonUnstyled';
+import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
-import { OverridableComponent } from '@mui/types';
 
 const blue = {
   500: '#007FFF',
@@ -42,15 +38,15 @@ const CustomButton = styled(ButtonUnstyled)`
     opacity: 0.5;
     cursor: not-allowed;
   }
-` as OverridableComponent<ButtonUnstyledTypeMap>;
+`;
 
 export default function UnstyledButtonsDisabledFocusCustom() {
   return (
     <Stack spacing={2}>
-      <CustomButton component="span" disabled>
+      <CustomButton slots={{ root: 'span' }} disabled>
         focusableWhenDisabled = false
       </CustomButton>
-      <CustomButton component="span" disabled focusableWhenDisabled>
+      <CustomButton slots={{ root: 'span' }} disabled focusableWhenDisabled>
         focusableWhenDisabled = true
       </CustomButton>
     </Stack>
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx.preview b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx.preview
index 6c68795155388b..ea5b0163da93f7 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx.preview
@@ -1,6 +1,6 @@
-<CustomButton component="span" disabled>
+<CustomButton slots={{ root: 'span' }} disabled>
   focusableWhenDisabled = false
 </CustomButton>
-<CustomButton component="span" disabled focusableWhenDisabled>
+<CustomButton slots={{ root: 'span' }} disabled focusableWhenDisabled>
   focusableWhenDisabled = true
 </CustomButton>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
index 99a10b8a8939f2..a705789b2d7843 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
@@ -1,11 +1,7 @@
 import * as React from 'react';
-import ButtonUnstyled, {
-  buttonUnstyledClasses,
-  ButtonUnstyledTypeMap,
-} from '@mui/base/ButtonUnstyled';
+import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
-import { OverridableComponent } from '@mui/types';
 
 const blue = {
   500: '#007FFF',
@@ -42,7 +38,7 @@ const CustomButton = styled(ButtonUnstyled)`
     opacity: 0.5;
     cursor: not-allowed;
   }
-` as OverridableComponent<ButtonUnstyledTypeMap>;
+`;
 
 export default function UnstyledButtonsSpan() {
   return (
diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts
index 2a66f4de3404d1..b6ca6beec878e0 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts
@@ -43,7 +43,8 @@ export interface ButtonUnstyledSlots {
   root?: React.ElementType;
 }
 
-export type ButtonUnstyledProps = ButtonUnstyledOwnProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export type ButtonUnstyledProps = ButtonUnstyledOwnProps &
+  React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export type ButtonUnstyledOwnerState = ButtonUnstyledOwnProps & {
   active: boolean;

From aced6ee36b58b5c220d75ca7469d36e559981a2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Mon, 17 Apr 2023 17:42:58 +0200
Subject: [PATCH 07/30] Created a Base UI version of OverridableComponent

---
 .../UnstyledButtonsDisabledFocusCustom.tsx    |  7 +++-
 .../components/button/UnstyledButtonsSpan.tsx |  7 +++-
 .../OverridingRootSlot.js                     |  2 +-
 .../OverridingRootSlot.tsx                    |  2 +-
 .../OverridingRootSlot.tsx.preview            |  2 +-
 .../ButtonUnstyled/ButtonUnstyled.spec.tsx    | 37 +++++++++++++++++++
 .../src/ButtonUnstyled/ButtonUnstyled.tsx     | 35 +++---------------
 .../ButtonUnstyled/ButtonUnstyled.types.ts    | 14 ++++++-
 .../src/utils/OverridableComponent.ts         | 24 ++++++++++++
 packages/mui-base/src/utils/index.ts          |  1 +
 10 files changed, 93 insertions(+), 38 deletions(-)
 create mode 100644 packages/mui-base/src/utils/OverridableComponent.ts

diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
index 2685b34e47bcdd..59f46bc4ef05a1 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
@@ -1,8 +1,11 @@
 import * as React from 'react';
-import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
+import ButtonUnstyled, {
+  buttonUnstyledClasses,
+  ButtonUnstyledTypeMap,
+} from '@mui/base/ButtonUnstyled';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
-import { OverridableComponent } from '@mui/types';
+import { OverridableComponent } from '@mui/base/utils';
 
 export default function UnstyledButtonsDisabledFocusCustom() {
   return (
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
index ab20fdddad68c1..46b2bc7b3462da 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
@@ -1,8 +1,11 @@
 import * as React from 'react';
-import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
+import ButtonUnstyled, {
+  buttonUnstyledClasses,
+  ButtonUnstyledTypeMap,
+} from '@mui/base/ButtonUnstyled';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
-import { OverridableComponent } from '@mui/types';
+import { OverridableComponent } from '@mui/base/utils';
 
 export default function UnstyledButtonsSpan() {
   return (
diff --git a/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.js b/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.js
index f148067f05e38e..6e9611ce0f5f5e 100644
--- a/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.js
+++ b/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.js
@@ -2,5 +2,5 @@ import * as React from 'react';
 import ButtonUnstyled from '@mui/base/ButtonUnstyled';
 
 export default function DivButton() {
-  return <ButtonUnstyled component="div">Button</ButtonUnstyled>;
+  return <ButtonUnstyled slots={{ root: 'div' }}>Button</ButtonUnstyled>;
 }
diff --git a/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx b/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx
index f148067f05e38e..6e9611ce0f5f5e 100644
--- a/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx
+++ b/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx
@@ -2,5 +2,5 @@ import * as React from 'react';
 import ButtonUnstyled from '@mui/base/ButtonUnstyled';
 
 export default function DivButton() {
-  return <ButtonUnstyled component="div">Button</ButtonUnstyled>;
+  return <ButtonUnstyled slots={{ root: 'div' }}>Button</ButtonUnstyled>;
 }
diff --git a/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx.preview b/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx.preview
index 1f24878ebbdc23..002d4720f304fb 100644
--- a/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx.preview
+++ b/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx.preview
@@ -1 +1 @@
-<ButtonUnstyled component="div">Button</ButtonUnstyled>
\ No newline at end of file
+<ButtonUnstyled slots={{ root: 'div' }}>Button</ButtonUnstyled>
\ No newline at end of file
diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
index 50b163e613cdef..e29b1fc4960f1f 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
@@ -22,3 +22,40 @@ const CustomButtonRoot = React.forwardRef(function CustomButtonRoot(
 function ButtonWithCustomRoot(props: ButtonUnstyledProps) {
   return <ButtonUnstyled {...props} slots={{ root: CustomButtonRoot }} />;
 }
+
+const polymorphicComponentTest = () => {
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
+
+  return (
+    <div>
+      {/* @ts-expect-error */}
+      <ButtonUnstyled invalidProp={0} />
+
+      <ButtonUnstyled slots={{ root: 'a' }} href="#" />
+
+      <ButtonUnstyled<typeof CustomComponent>
+        slots={{ root: CustomComponent }}
+        stringProp="test"
+        numberProp={0}
+      />
+      {/* @ts-expect-error */}
+      <ButtonUnstyled<typeof CustomComponent> slots={{ root: CustomComponent }} />
+
+      <ButtonUnstyled
+        onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
+      />
+
+      <ButtonUnstyled<'div'>
+        ref={(elem) => {
+          expectType<HTMLDivElement | null, typeof elem>(elem);
+        }}
+        onClick={(e) => {
+          expectType<React.MouseEvent<HTMLDivElement, MouseEvent>, typeof e>(e);
+        }}
+      />
+    </div>
+  );
+};
diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
index 9252fdead22d5e..ab009645fac34c 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { OverridableComponent } from '../utils/OverridableComponent';
 import composeClasses from '../composeClasses';
 import { getButtonUnstyledUtilityClass } from './buttonUnstyledClasses';
 import {
   ButtonUnstyledProps,
   ButtonUnstyledOwnProps,
+  ButtonUnstyledTypeMap,
   ButtonUnstyledRootSlotProps,
 } from './ButtonUnstyled.types';
 import useButton from '../useButton';
@@ -37,10 +39,9 @@ const useUtilityClasses = (ownerState: ButtonUnstyledOwnerState) => {
  *
  * - [ButtonUnstyled API](https://mui.com/base/react-button/components-api/#button-unstyled)
  */
-const ButtonUnstyled = React.forwardRef(function ButtonUnstyled(
-  props: ButtonUnstyledProps,
-  forwardedRef: React.ForwardedRef<any>,
-) {
+const ButtonUnstyled = React.forwardRef(function ButtonUnstyled<
+  BaseComponentType extends React.ElementType = ButtonUnstyledTypeMap['defaultComponent'],
+>(props: ButtonUnstyledProps<BaseComponentType>, forwardedRef: React.ForwardedRef<any>) {
   const {
     action,
     children,
@@ -100,7 +101,7 @@ const ButtonUnstyled = React.forwardRef(function ButtonUnstyled(
   });
 
   return <Root {...rootProps}>{children}</Root>;
-});
+}) as OverridableComponent<ButtonUnstyledTypeMap>;
 
 ButtonUnstyled.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -136,34 +137,10 @@ ButtonUnstyled.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   href: PropTypes.string,
-  /**
-   * @ignore
-   */
-  onBlur: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
   /**
    * @ignore
    */
   onFocusVisible: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onKeyUp: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onMouseLeave: PropTypes.func,
   /**
    * The props used for each slot inside the Button.
    * @default {}
diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts
index b6ca6beec878e0..9e05e64ab07239 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Simplify } from '@mui/types';
 import { UseButtonParameters, UseButtonRootSlotProps } from '../useButton';
 import { SlotComponentProps } from '../utils';
+import { PolymorphicProps } from '../utils/OverridableComponent';
 
 export interface ButtonUnstyledActions {
   focusVisible(): void;
@@ -43,8 +44,17 @@ export interface ButtonUnstyledSlots {
   root?: React.ElementType;
 }
 
-export type ButtonUnstyledProps = ButtonUnstyledOwnProps &
-  React.ButtonHTMLAttributes<HTMLButtonElement>;
+export type ButtonUnstyledProps<
+  RootComponent extends React.ElementType = ButtonUnstyledTypeMap['defaultComponent'],
+> = PolymorphicProps<ButtonUnstyledTypeMap<{}, RootComponent>, RootComponent>;
+
+export interface ButtonUnstyledTypeMap<
+  AdditionalProps = {},
+  DefaultComponent extends React.ElementType = 'button',
+> {
+  props: AdditionalProps & ButtonUnstyledOwnProps;
+  defaultComponent: DefaultComponent;
+}
 
 export type ButtonUnstyledOwnerState = ButtonUnstyledOwnProps & {
   active: boolean;
diff --git a/packages/mui-base/src/utils/OverridableComponent.ts b/packages/mui-base/src/utils/OverridableComponent.ts
new file mode 100644
index 00000000000000..4538c6c0afe88f
--- /dev/null
+++ b/packages/mui-base/src/utils/OverridableComponent.ts
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { OverridableTypeMap } from '@mui/types';
+
+/**
+ * A component whose root component can be controlled explicitly with a generic type parameter.
+ * Adjusts valid props based on the type of `RootComponent`.
+ *
+ * @template TypeMap The interface the defines the props and a default root element of the component.
+ */
+export type OverridableComponent<TypeMap extends OverridableTypeMap> = {
+  <RootComponent extends React.ElementType = TypeMap['defaultComponent']>(
+    props: PolymorphicProps<TypeMap, RootComponent>,
+  ): JSX.Element | null;
+  propTypes?: any;
+  displayName?: string | undefined;
+};
+
+/**
+ * Own props of the component augmented with props of the root component.
+ */
+export type PolymorphicProps<
+  TypeMap extends OverridableTypeMap,
+  RootComponent extends React.ElementType,
+> = TypeMap['props'] & Omit<React.ComponentPropsWithRef<RootComponent>, keyof TypeMap['props']>;
diff --git a/packages/mui-base/src/utils/index.ts b/packages/mui-base/src/utils/index.ts
index d6e65355fd32ff..f333c01e9b7bd8 100644
--- a/packages/mui-base/src/utils/index.ts
+++ b/packages/mui-base/src/utils/index.ts
@@ -6,4 +6,5 @@ export { default as isHostComponent } from './isHostComponent';
 export { default as resolveComponentProps } from './resolveComponentProps';
 export { default as useSlotProps } from './useSlotProps';
 export { default as mergeSlotProps } from './mergeSlotProps';
+export * from './OverridableComponent';
 export * from './types';

From 1aca46b21f99129c2a6afdb74dfb3513b0896850 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 18 Apr 2023 12:00:31 +0200
Subject: [PATCH 08/30] revert some test changes, cleanup code

---
 .../ButtonUnstyled/ButtonUnstyled.test.tsx    |  1 +
 .../src/ButtonUnstyled/ButtonUnstyled.tsx     |  6 ---
 .../src/MenuUnstyled/MenuUnstyled.test.tsx    |  2 +-
 .../TextareaAutosize.test.tsx                 |  1 +
 test/utils/describeConformanceUnstyled.tsx    | 38 ++++++++++++++++++-
 5 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.test.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.test.tsx
index f40d3936f5da75..d4388c9b77cb19 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.test.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.test.tsx
@@ -26,6 +26,7 @@ describe('<ButtonUnstyled />', () => {
         expectedClassName: buttonUnstyledClasses.root,
       },
     },
+    skip: ['componentProp'],
   }));
 
   describe('role attribute', () => {
diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
index ab009645fac34c..2a94b07074f26c 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
@@ -47,13 +47,7 @@ const ButtonUnstyled = React.forwardRef(function ButtonUnstyled<
     children,
     disabled,
     focusableWhenDisabled = false,
-    onBlur,
-    onClick,
-    onFocus,
     onFocusVisible,
-    onKeyDown,
-    onKeyUp,
-    onMouseLeave,
     slotProps = {},
     slots = {},
     ...other
diff --git a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx
index a6cbe769d74d82..a64c1ed57d0bb8 100644
--- a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx
+++ b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx
@@ -35,7 +35,7 @@ describe('<MenuUnstyled />', () => {
         expectedClassName: menuUnstyledClasses.listbox,
       },
     },
-    skip: ['reactTestRenderer', 'propsSpread', 'slotsProp'],
+    skip: ['reactTestRenderer', 'propsSpread', 'componentProp', 'slotsProp'],
   }));
 
   describe('after initialization', () => {
diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
index 23b0f32e876ebe..c238baaacfc3d4 100644
--- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
@@ -23,6 +23,7 @@ describe('<TextareaAutosize />', () => {
     slots: {},
     skip: [
       // doesn't have slots, so these tests are irrelevant:
+      'componentProp',
       'mergeClassName',
       'ownerStatePropagation',
       'propsSpread',
diff --git a/test/utils/describeConformanceUnstyled.tsx b/test/utils/describeConformanceUnstyled.tsx
index b0bf28567529fa..7c62a61c43a538 100644
--- a/test/utils/describeConformanceUnstyled.tsx
+++ b/test/utils/describeConformanceUnstyled.tsx
@@ -9,6 +9,7 @@ import {
   describeRef,
   randomStringValue,
   testClassName,
+  testComponentProp,
   testReactTestRenderer,
 } from './describeConformance';
 
@@ -101,7 +102,7 @@ function testPropForwarding(
 }
 
 function testSlotsProp(element: React.ReactElement, getOptions: () => UnstyledConformanceOptions) {
-  const { render, slots } = getOptions();
+  const { render, slots, skip, testComponentPropWith: Element = 'div' } = getOptions();
 
   if (!render) {
     throwMissingPropError('render');
@@ -162,6 +163,40 @@ function testSlotsProp(element: React.ReactElement, getOptions: () => UnstyledCo
       });
     }
   });
+
+  it('uses the component provided in the `component` prop when both `component` and `slots.root` are provided', () => {
+    if (skip && skip.indexOf('componentProp') >= 0) {
+      return;
+    }
+
+    const RootComponentA = React.forwardRef(
+      ({ children }: React.PropsWithChildren<{}>, ref: React.Ref<any>) => (
+        // @ts-ignore
+        <Element data-testid="a" ref={ref}>
+          {children}
+        </Element>
+      ),
+    );
+
+    const RootComponentB = React.forwardRef(
+      ({ children }: React.PropsWithChildren<{}>, ref: React.Ref<any>) => (
+        // @ts-ignore
+        <Element data-testid="b" ref={ref}>
+          {children}
+        </Element>
+      ),
+    );
+
+    const { queryByTestId } = render(
+      React.cloneElement(element, {
+        component: RootComponentA,
+        slots: { root: RootComponentB },
+      }),
+    );
+
+    expect(queryByTestId('a')).not.to.equal(null);
+    expect(queryByTestId('b')).to.equal(null);
+  });
 }
 
 function testSlotPropsProp(
@@ -311,6 +346,7 @@ function testDisablingClassGeneration(
 }
 
 const fullSuite = {
+  componentProp: testComponentProp,
   slotsProp: testSlotsProp,
   slotPropsProp: testSlotPropsProp,
   slotPropsCallbacks: testSlotPropsCallbacks,

From ee4fdb7c88fd227a76d954613b13c42034f53a9a Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 18 Apr 2023 14:07:02 +0200
Subject: [PATCH 09/30] Rename the OverridableComponent to PolymorphicComponent

---
 packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx  | 2 ++
 packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx       | 4 ++--
 packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts  | 2 +-
 .../{OverridableComponent.ts => PolymorphicComponent.ts}      | 2 +-
 packages/mui-base/src/utils/index.ts                          | 2 +-
 5 files changed, 7 insertions(+), 5 deletions(-)
 rename packages/mui-base/src/utils/{OverridableComponent.ts => PolymorphicComponent.ts} (93%)

diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
index e29b1fc4960f1f..bb37dadab01bdb 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
@@ -40,7 +40,9 @@ const polymorphicComponentTest = () => {
         slots={{ root: CustomComponent }}
         stringProp="test"
         numberProp={0}
+        onClick={() => {}}
       />
+
       {/* @ts-expect-error */}
       <ButtonUnstyled<typeof CustomComponent> slots={{ root: CustomComponent }} />
 
diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
index 2a94b07074f26c..3c7b27c496ef45 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '../utils/OverridableComponent';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import composeClasses from '../composeClasses';
 import { getButtonUnstyledUtilityClass } from './buttonUnstyledClasses';
 import {
@@ -95,7 +95,7 @@ const ButtonUnstyled = React.forwardRef(function ButtonUnstyled<
   });
 
   return <Root {...rootProps}>{children}</Root>;
-}) as OverridableComponent<ButtonUnstyledTypeMap>;
+}) as PolymorphicComponent<ButtonUnstyledTypeMap>;
 
 ButtonUnstyled.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts
index 9e05e64ab07239..b2506cb14473b6 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Simplify } from '@mui/types';
 import { UseButtonParameters, UseButtonRootSlotProps } from '../useButton';
 import { SlotComponentProps } from '../utils';
-import { PolymorphicProps } from '../utils/OverridableComponent';
+import { PolymorphicProps } from '../utils/PolymorphicComponent';
 
 export interface ButtonUnstyledActions {
   focusVisible(): void;
diff --git a/packages/mui-base/src/utils/OverridableComponent.ts b/packages/mui-base/src/utils/PolymorphicComponent.ts
similarity index 93%
rename from packages/mui-base/src/utils/OverridableComponent.ts
rename to packages/mui-base/src/utils/PolymorphicComponent.ts
index 4538c6c0afe88f..296afc23fcf618 100644
--- a/packages/mui-base/src/utils/OverridableComponent.ts
+++ b/packages/mui-base/src/utils/PolymorphicComponent.ts
@@ -7,7 +7,7 @@ import { OverridableTypeMap } from '@mui/types';
  *
  * @template TypeMap The interface the defines the props and a default root element of the component.
  */
-export type OverridableComponent<TypeMap extends OverridableTypeMap> = {
+export type PolymorphicComponent<TypeMap extends OverridableTypeMap> = {
   <RootComponent extends React.ElementType = TypeMap['defaultComponent']>(
     props: PolymorphicProps<TypeMap, RootComponent>,
   ): JSX.Element | null;
diff --git a/packages/mui-base/src/utils/index.ts b/packages/mui-base/src/utils/index.ts
index f333c01e9b7bd8..5ad2a254192e6f 100644
--- a/packages/mui-base/src/utils/index.ts
+++ b/packages/mui-base/src/utils/index.ts
@@ -6,5 +6,5 @@ export { default as isHostComponent } from './isHostComponent';
 export { default as resolveComponentProps } from './resolveComponentProps';
 export { default as useSlotProps } from './useSlotProps';
 export { default as mergeSlotProps } from './mergeSlotProps';
-export * from './OverridableComponent';
+export * from './PolymorphicComponent';
 export * from './types';

From f49956de6e9fa09c67f841dbee4464eb3aaff0f9 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 18 Apr 2023 14:16:48 +0200
Subject: [PATCH 10/30] Fixed regressions in names

---
 .../components/button/UnstyledButtonsDisabledFocusCustom.tsx  | 4 ++--
 docs/data/base/components/button/UnstyledButtonsSpan.tsx      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
index 59f46bc4ef05a1..852bc0f621cd69 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
@@ -5,7 +5,7 @@ import ButtonUnstyled, {
 } from '@mui/base/ButtonUnstyled';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
-import { OverridableComponent } from '@mui/base/utils';
+import { PolymorphicComponent } from '@mui/base/utils';
 
 export default function UnstyledButtonsDisabledFocusCustom() {
   return (
@@ -55,4 +55,4 @@ const CustomButton = styled(ButtonUnstyled)`
     opacity: 0.5;
     cursor: not-allowed;
   }
-` as OverridableComponent<ButtonUnstyledTypeMap>;
+` as PolymorphicComponent<ButtonUnstyledTypeMap>;
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
index 46b2bc7b3462da..b15d9c3d1035cc 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
@@ -5,7 +5,7 @@ import ButtonUnstyled, {
 } from '@mui/base/ButtonUnstyled';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
-import { OverridableComponent } from '@mui/base/utils';
+import { PolymorphicComponent } from '@mui/base/utils';
 
 export default function UnstyledButtonsSpan() {
   return (
@@ -53,4 +53,4 @@ const CustomButton = styled(ButtonUnstyled)`
     opacity: 0.5;
     cursor: not-allowed;
   }
-` as OverridableComponent<ButtonUnstyledTypeMap>;
+` as PolymorphicComponent<ButtonUnstyledTypeMap>;

From c709d0c3cc098b431d696f219bde2018cb9e8780 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 18 Apr 2023 19:48:29 +0200
Subject: [PATCH 11/30] update the spec tests

---
 .../src/ButtonUnstyled/ButtonUnstyled.spec.tsx     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
index bb37dadab01bdb..8491745e5d474a 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
@@ -29,6 +29,10 @@ const polymorphicComponentTest = () => {
       return <div />;
     };
 
+  const Root: React.FC<{}> = function Root() {
+    return <div />;
+  };
+
   return (
     <div>
       {/* @ts-expect-error */}
@@ -36,14 +40,10 @@ const polymorphicComponentTest = () => {
 
       <ButtonUnstyled slots={{ root: 'a' }} href="#" />
 
-      <ButtonUnstyled<typeof CustomComponent>
-        slots={{ root: CustomComponent }}
-        stringProp="test"
-        numberProp={0}
-        onClick={() => {}}
-      />
+      {/* @ts-expect-error onClick must be specified in the custom root component */}
+      <ButtonUnstyled<typeof Root> slots={{ root: Root }} onClick={() => {}} />
 
-      {/* @ts-expect-error */}
+      {/* @ts-expect-error required props not specified*/}
       <ButtonUnstyled<typeof CustomComponent> slots={{ root: CustomComponent }} />
 
       <ButtonUnstyled

From d61f4314574911505d0548d58fecdd5b34afddeb Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 19 Apr 2023 09:37:25 +0200
Subject: [PATCH 12/30] Fix lint issues

---
 packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
index 8491745e5d474a..6bdc3d7e8d059a 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
@@ -29,7 +29,7 @@ const polymorphicComponentTest = () => {
       return <div />;
     };
 
-  const Root: React.FC<{}> = function Root() {
+  const Root = function Root() {
     return <div />;
   };
 
@@ -43,7 +43,7 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error onClick must be specified in the custom root component */}
       <ButtonUnstyled<typeof Root> slots={{ root: Root }} onClick={() => {}} />
 
-      {/* @ts-expect-error required props not specified*/}
+      {/* @ts-expect-error required props not specified */}
       <ButtonUnstyled<typeof CustomComponent> slots={{ root: CustomComponent }} />
 
       <ButtonUnstyled

From d86107a68646e69fb57d760bf7adab3badfc2bce Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 19 Apr 2023 10:04:23 +0200
Subject: [PATCH 13/30] Update
 packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx

Signed-off-by: Marija Najdova <mnajdova@gmail.com>
---
 packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
index 6bdc3d7e8d059a..e736e404bdf058 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
@@ -51,6 +51,7 @@ const polymorphicComponentTest = () => {
       />
 
       <ButtonUnstyled<'div'>
+         slotProps={{ root: 'div' }}
         ref={(elem) => {
           expectType<HTMLDivElement | null, typeof elem>(elem);
         }}

From e0cc64d98869fc87a963b5202ee5508abf07d2e5 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 19 Apr 2023 10:49:23 +0200
Subject: [PATCH 14/30] Docs updates on the genric usage

---
 docs/data/base/components/button/button.md    | 19 ++++++++++++++++++-
 .../ButtonUnstyled/ButtonUnstyled.spec.tsx    |  4 +++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
index 558f84a8fe529c..74ed97b34b822f 100644
--- a/docs/data/base/components/button/button.md
+++ b/docs/data/base/components/button/button.md
@@ -57,7 +57,7 @@ The Unstyled Button component is composed of a root `<button>` slot with no inte
 ### Slot props
 
 :::info
-The following props are available on all non-utility Base components.
+The following prop is available on all non-utility Base components.
 See [Usage](/base/getting-started/usage/) for full details.
 :::
 
@@ -78,6 +78,23 @@ If an Unstyled Button is customized with a non-button element (i.e. `<ButtonUnst
 Similarly, `<ButtonUnstyled slots={{ root: "span" }} type="reset">` will not reset its parent form.
 :::
 
+#### Usage with TypeScript
+
+If you are using TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component. This way, you can safely provide the custom compoenent's props directly on the unstyled compnent:
+
+```tsx
+<ButtonUnstyled<typeof CustomComponent>
+  slots={{ root: CustomComponent }}
+  customProp
+/>
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<ButtonUnstyled<'svg'> viewBox="0 0 24 24" />
+```
+
 ## Hook
 
 ```js
diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
index e736e404bdf058..52b7c9222b3872 100644
--- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
+++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
@@ -46,12 +46,14 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error required props not specified */}
       <ButtonUnstyled<typeof CustomComponent> slots={{ root: CustomComponent }} />
 
+      <ButtonUnstyled<'svg'> viewBox="" />
+
       <ButtonUnstyled
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <ButtonUnstyled<'div'>
-         slotProps={{ root: 'div' }}
+        slotProps={{ root: 'div' }}
         ref={(elem) => {
           expectType<HTMLDivElement | null, typeof elem>(elem);
         }}

From 10cca14a588c67294855d9f9f0e1b629d509fe15 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 19 Apr 2023 10:46:53 -0500
Subject: [PATCH 15/30] update button and overriding component structure docs

---
 docs/data/base/components/button/button.md    | 16 +++----
 .../overriding-component-structure.md         | 43 ++-----------------
 2 files changed, 12 insertions(+), 47 deletions(-)

diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
index 74ed97b34b822f..349a629807f1d6 100644
--- a/docs/data/base/components/button/button.md
+++ b/docs/data/base/components/button/button.md
@@ -54,12 +54,7 @@ The Unstyled Button component is composed of a root `<button>` slot with no inte
 </button>
 ```
 
-### Slot props
-
-:::info
-The following prop is available on all non-utility Base components.
-See [Usage](/base/getting-started/usage/) for full details.
-:::
+### Custom structure
 
 Use the `slots.root` prop to override the root slot with a custom element:
 
@@ -67,6 +62,11 @@ Use the `slots.root` prop to override the root slot with a custom element:
 <ButtonUnstyled slots={{ root: 'div' }} />
 ```
 
+:::info
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
+:::
+
 If you provide a non-interactive element such as a `<span>`, the Unstyled Button component will automatically add the necessary accessibility attributes.
 
 Compare the attributes on the `<span>` in this demo with the Button from the previous demo—try inspecting them both with your browser's dev tools:
@@ -74,13 +74,13 @@ Compare the attributes on the `<span>` in this demo with the Button from the pre
 {{"demo": "UnstyledButtonsSpan.js"}}
 
 :::warning
-If an Unstyled Button is customized with a non-button element (i.e. `<ButtonUnstyled slots={{ root: "span" }} />`), it will not submit the form it's in when clicked.
+If an Unstyled Button is customized with a non-button element (for instance, `<ButtonUnstyled slots={{ root: "span" }} />`), it will not submit the form it's in when clicked.
 Similarly, `<ButtonUnstyled slots={{ root: "span" }} type="reset">` will not reset its parent form.
 :::
 
 #### Usage with TypeScript
 
-If you are using TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component. This way, you can safely provide the custom compoenent's props directly on the unstyled compnent:
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component. This way, you can safely provide the custom compoenent's props directly on the unstyled compnent:
 
 ```tsx
 <ButtonUnstyled<typeof CustomComponent>
diff --git a/docs/data/base/guides/overriding-component-structure/overriding-component-structure.md b/docs/data/base/guides/overriding-component-structure/overriding-component-structure.md
index b014266a40488f..f85cb3dac7cb2b 100644
--- a/docs/data/base/guides/overriding-component-structure/overriding-component-structure.md
+++ b/docs/data/base/guides/overriding-component-structure/overriding-component-structure.md
@@ -13,12 +13,9 @@ Slots are most commonly filled by HTML tags, but may also be filled by React com
 
 All components contain a root slot that defines their primary node in the DOM tree; more complex components also contain additional interior slots named after the elements they represent.
 
-All _non-utility_ Base UI components accept two props for overriding their rendered HTML structure:
+All _non-utility_ Base UI components accept [the `slots` prop](#the-slots-prop) for overriding their rendered HTML structure.
 
-- `component`—to override the root slot
-- `slots`—to override any interior slots (when present) as well as the root
-
-Additionally, you can pass custom props to interior slots using `slotProps`.
+Additionally, you can pass custom props to [interior slots](#interior-slots) using `slotProps`.
 
 ## The root slot
 
@@ -26,19 +23,7 @@ The root slot represents the component's outermost element.
 For simpler components, the root slot is often filled by the native HTML element that the component is intended to replace.
 
 For example, the [Unstyled Button's](/base/react-button/) root slot is a `<button>` element.
-This component _only_ has a root slot; more complex components may have additional [interior slots](#interior-slots).
-
-### The component prop
-
-Use the `component` prop to override a component's root slot.
-The demo below shows how to replace the Button's `<button>` tag with a `<div>`:
-
-{{"demo": "OverridingRootSlot.js"}}
-
-:::success
-If you provide a non-interactive element like a `<div>` or a `<span>`, the Button will automatically add the necessary accessibility attributes.
-Try inspecting the demo Button above in your browser's dev tools to see this feature in action.
-:::
+This component _only_ has a root slot; more complex components may have additional interior slots.
 
 ## Interior slots
 
@@ -49,31 +34,11 @@ For example, the [Unstyled Slider](/base/react-slider/) is composed of a root `<
 
 ### The slots prop
 
-Use the `slots` prop to replace a component's interior slots.
+Use the `slots` prop to replace the elements in a component's slots, including the root.
 The example below shows how to override the listbox slot in the [Unstyled Select](/base/react-select/) component—a `<ul>` by default—with an `<ol>`:
 
 {{"demo": "OverridingInternalSlot.js"}}
 
-Note that you can also use the `slots` prop to override the root slot:
-
-```jsx
-// This:
-<SelectUnstyled slots={{ root: 'span' }} />
-
-// ...is the same as this:
-<SelectUnstyled component="span">
-```
-
-But if you try to override the root slot with both `component` and `slots`, then `component` will take precedence:
-
-```jsx
-// This:
-<SelectUnstyled component="div" slots={{ root: 'span' }} />
-
-// ...renders as this:
-<div class="MuiSelectUnstyled-root" />
-```
-
 ### The slotProps prop
 
 The `slotProps` prop is an object that contains the props for all slots within a component.

From 0c78312c5c656e24fb446d3827c4a86d6c1e9ba9 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 25 Apr 2023 08:32:51 +0200
Subject: [PATCH 16/30] prettier

---
 docs/data/base/components/button/button.md   | 5 +----
 packages/mui-base/src/Button/Button.test.tsx | 7 +------
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
index 4f2e298073343c..5dad2afbcbb2da 100644
--- a/docs/data/base/components/button/button.md
+++ b/docs/data/base/components/button/button.md
@@ -83,10 +83,7 @@ Similarly, `<Button slots={{ root: "span" }} type="reset">` will not reset its p
 In TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component. This way, you can safely provide the custom compoenent's props directly on the unstyled compnent:
 
 ```tsx
-<Button<typeof CustomComponent>
-  slots={{ root: CustomComponent }}
-  customProp
-/>
+<Button<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
 ```
 
 The same applies for props specific to custom primitive elements:
diff --git a/packages/mui-base/src/Button/Button.test.tsx b/packages/mui-base/src/Button/Button.test.tsx
index 41592011b6bbf5..a2c9cb0d849713 100644
--- a/packages/mui-base/src/Button/Button.test.tsx
+++ b/packages/mui-base/src/Button/Button.test.tsx
@@ -130,12 +130,7 @@ describe('<Button />', () => {
       it('does not respond to user actions when disabled and focused', () => {
         const handleClick = spy();
         const { getByRole } = render(
-          <Button
-            slots={{ root: 'span' }}
-            focusableWhenDisabled
-            disabled
-            onClick={handleClick}
-          />,
+          <Button slots={{ root: 'span' }} focusableWhenDisabled disabled onClick={handleClick} />,
         );
 
         const button = getByRole('button');

From 5c8d684395d40424c97be5dd276f3f63dbb1f330 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 25 Apr 2023 08:58:16 +0200
Subject: [PATCH 17/30] docs:api

---
 docs/pages/base/api/button.json               |   2 +-
 docs/pages/base/api/use-button.json           |   2 +-
 docs/pages/joy-ui/api/alert.js                |   2 +-
 docs/pages/joy-ui/api/aspect-ratio.js         |   2 +-
 docs/pages/joy-ui/api/autocomplete-listbox.js |   2 +-
 docs/pages/joy-ui/api/autocomplete-option.js  |   2 +-
 docs/pages/joy-ui/api/autocomplete.js         |   2 +-
 docs/pages/joy-ui/api/avatar-group.js         |   2 +-
 docs/pages/joy-ui/api/avatar.js               |   2 +-
 docs/pages/joy-ui/api/badge.js                |   2 +-
 docs/pages/joy-ui/api/breadcrumbs.js          |   2 +-
 docs/pages/joy-ui/api/button.js               |   2 +-
 docs/pages/joy-ui/api/card-content.js         |   2 +-
 docs/pages/joy-ui/api/card-cover.js           |   6 +-
 docs/pages/joy-ui/api/card-overflow.js        |   2 +-
 docs/pages/joy-ui/api/card.js                 |   2 +-
 docs/pages/joy-ui/api/checkbox.js             |   2 +-
 docs/pages/joy-ui/api/chip-delete.js          |   2 +-
 docs/pages/joy-ui/api/chip.js                 |   2 +-
 docs/pages/joy-ui/api/circular-progress.js    |   2 +-
 docs/pages/joy-ui/api/css-baseline.js         |   2 +-
 docs/pages/joy-ui/api/divider.js              |   2 +-
 docs/pages/joy-ui/api/form-control.js         |   2 +-
 docs/pages/joy-ui/api/form-helper-text.js     |   2 +-
 docs/pages/joy-ui/api/form-label.js           |   6 +-
 docs/pages/joy-ui/api/icon-button.js          |   2 +-
 docs/pages/joy-ui/api/input.js                |   2 +-
 docs/pages/joy-ui/api/linear-progress.js      |   2 +-
 docs/pages/joy-ui/api/link.js                 |   2 +-
 docs/pages/joy-ui/api/list-divider.js         |   2 +-
 docs/pages/joy-ui/api/list-item-button.js     |   2 +-
 docs/pages/joy-ui/api/list-item-content.js    |   2 +-
 docs/pages/joy-ui/api/list-item-decorator.js  |   2 +-
 docs/pages/joy-ui/api/list-item.js            |   6 +-
 docs/pages/joy-ui/api/list-subheader.js       |   2 +-
 docs/pages/joy-ui/api/list.js                 |   2 +-
 docs/pages/joy-ui/api/menu-item.js            |   6 +-
 docs/pages/joy-ui/api/menu-list.js            |   6 +-
 docs/pages/joy-ui/api/menu.js                 |   2 +-
 docs/pages/joy-ui/api/modal-close.js          |   2 +-
 docs/pages/joy-ui/api/modal-dialog.js         |   2 +-
 docs/pages/joy-ui/api/modal-overflow.js       |   2 +-
 docs/pages/joy-ui/api/modal.js                |   2 +-
 docs/pages/joy-ui/api/option.js               |   2 +-
 docs/pages/joy-ui/api/radio-group.js          |   2 +-
 docs/pages/joy-ui/api/radio.js                |   2 +-
 docs/pages/joy-ui/api/scoped-css-baseline.js  |   2 +-
 docs/pages/joy-ui/api/select.js               |   2 +-
 docs/pages/joy-ui/api/sheet.js                |   2 +-
 docs/pages/joy-ui/api/slider.js               |   2 +-
 docs/pages/joy-ui/api/stack.js                |   2 +-
 docs/pages/joy-ui/api/svg-icon.js             |   2 +-
 docs/pages/joy-ui/api/switch.js               |   2 +-
 docs/pages/joy-ui/api/tab-list.js             |   2 +-
 docs/pages/joy-ui/api/tab-panel.js            |   6 +-
 docs/pages/joy-ui/api/tab.js                  |   2 +-
 docs/pages/joy-ui/api/table.js                |   2 +-
 docs/pages/joy-ui/api/tabs.js                 |   2 +-
 docs/pages/joy-ui/api/textarea.js             |   2 +-
 docs/pages/joy-ui/api/tooltip.js              |   2 +-
 docs/pages/joy-ui/api/typography.js           |   6 +-
 docs/translations/api-docs/alert/alert.json   | 140 +++++----
 .../api-docs/aspect-ratio/aspect-ratio.json   |  82 ++++++
 .../autocomplete-listbox.json                 |  52 ++++
 .../autocomplete-option.json                  |  79 ++++++
 .../api-docs/autocomplete/autocomplete.json   | 238 ++++++++++------
 .../api-docs/avatar-group/avatar-group.json   |  23 +-
 docs/translations/api-docs/avatar/avatar.json |  92 ++++--
 docs/translations/api-docs/badge/badge.json   | 136 +++++----
 .../api-docs/breadcrumbs/breadcrumbs.json     |  39 ++-
 docs/translations/api-docs/button/button.json | 266 +++++-------------
 .../api-docs/card-content/card-content.json   |   8 +-
 .../api-docs/card-cover/card-cover.json       |  12 +
 .../api-docs/card-overflow/card-overflow.json |  71 +++++
 docs/translations/api-docs/card/card.json     |  99 ++++++-
 .../api-docs/checkbox/checkbox.json           | 126 +++++++--
 .../api-docs/chip-delete/chip-delete.json     |  83 ++++++
 docs/translations/api-docs/chip/chip.json     | 264 ++++++-----------
 .../circular-progress/circular-progress.json  | 116 +++++---
 .../api-docs/css-baseline/css-baseline.json   |   2 +-
 .../api-docs/divider/divider.json             |  81 ++----
 .../api-docs/form-control/form-control.json   |  96 +++++--
 .../form-helper-text/form-helper-text.json    |  54 +---
 .../api-docs/form-label/form-label.json       |  48 +---
 .../api-docs/icon-button/icon-button.json     | 107 ++++---
 docs/translations/api-docs/input/input.json   | 157 ++++++-----
 .../linear-progress/linear-progress.json      | 138 +++++----
 docs/translations/api-docs/link/link.json     | 145 ++++++++--
 .../api-docs/list-divider/list-divider.json   |  41 +++
 .../list-item-button/list-item-button.json    | 107 +++++--
 .../list-item-content/list-item-content.json  |  12 +
 .../list-item-decorator.json                  |  12 +
 .../api-docs/list-item/list-item.json         | 146 +++++-----
 .../list-subheader/list-subheader.json        |  80 ++++--
 docs/translations/api-docs/list/list.json     |  71 +++--
 .../api-docs/menu-item/menu-item.json         |  87 ++++--
 .../api-docs/menu-list/menu-list.json         |  72 +++--
 docs/translations/api-docs/menu/menu.json     |  77 +++--
 .../api-docs/modal-close/modal-close.json     |  86 ++++++
 .../api-docs/modal-dialog/modal-dialog.json   |  98 +++++++
 .../modal-overflow/modal-overflow.json        |   8 +
 docs/translations/api-docs/modal/modal.json   |  24 +-
 .../api-docs/option-group/option-group.json   |  28 ++
 docs/translations/api-docs/option/option.json |  89 ++++++
 docs/translations/api-docs/popper/popper.json |   8 +-
 .../api-docs/radio-group/radio-group.json     |  98 ++++++-
 docs/translations/api-docs/radio/radio.json   | 133 +++++++--
 .../scoped-css-baseline.json                  |  10 +-
 docs/translations/api-docs/select/select.json | 206 +++++++++-----
 docs/translations/api-docs/sheet/sheet.json   |  72 +++++
 docs/translations/api-docs/slider/slider.json | 184 +++++++-----
 .../api-docs/snackbar/snackbar.json           |  51 +---
 .../api-docs/svg-icon/svg-icon.json           | 103 +++++--
 docs/translations/api-docs/switch/switch.json | 149 ++++++----
 .../api-docs/tab-list/tab-list.json           | 106 ++++---
 .../api-docs/tab-panel/tab-panel.json         |  26 +-
 docs/translations/api-docs/tab/tab.json       |  92 +++---
 .../table-pagination/table-pagination.json    |  46 +--
 docs/translations/api-docs/table/table.json   | 140 ++++++++-
 .../api-docs/tabs-list/tabs-list.json         |  23 ++
 docs/translations/api-docs/tabs/tabs.json     | 106 +++----
 .../api-docs/textarea/textarea.json           | 122 ++++++++
 .../api-docs/tooltip/tooltip.json             | 156 ++++++----
 .../api-docs/typography/typography.json       | 154 +++++-----
 packages/mui-base/src/Button/Button.tsx       |   2 +-
 packages/mui-base/src/useButton/useButton.ts  |   2 +-
 126 files changed, 3910 insertions(+), 2021 deletions(-)
 create mode 100644 docs/translations/api-docs/aspect-ratio/aspect-ratio.json
 create mode 100644 docs/translations/api-docs/autocomplete-listbox/autocomplete-listbox.json
 create mode 100644 docs/translations/api-docs/autocomplete-option/autocomplete-option.json
 create mode 100644 docs/translations/api-docs/card-cover/card-cover.json
 create mode 100644 docs/translations/api-docs/card-overflow/card-overflow.json
 create mode 100644 docs/translations/api-docs/chip-delete/chip-delete.json
 create mode 100644 docs/translations/api-docs/list-divider/list-divider.json
 create mode 100644 docs/translations/api-docs/list-item-content/list-item-content.json
 create mode 100644 docs/translations/api-docs/list-item-decorator/list-item-decorator.json
 create mode 100644 docs/translations/api-docs/modal-close/modal-close.json
 create mode 100644 docs/translations/api-docs/modal-dialog/modal-dialog.json
 create mode 100644 docs/translations/api-docs/modal-overflow/modal-overflow.json
 create mode 100644 docs/translations/api-docs/option-group/option-group.json
 create mode 100644 docs/translations/api-docs/option/option.json
 create mode 100644 docs/translations/api-docs/sheet/sheet.json
 create mode 100644 docs/translations/api-docs/tabs-list/tabs-list.json
 create mode 100644 docs/translations/api-docs/textarea/textarea.json

diff --git a/docs/pages/base/api/button.json b/docs/pages/base/api/button.json
index 767f019b519b52..b3a580e0a62e19 100644
--- a/docs/pages/base/api/button.json
+++ b/docs/pages/base/api/button.json
@@ -40,6 +40,6 @@
   "forwardsRefTo": "HTMLButtonElement",
   "filename": "/packages/mui-base/src/Button/Button.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/base/react-button/\">Button</a></li></ul>",
+  "demos": "<ul><li><a href=\"/base/react-button/\">Unstyled Button</a></li></ul>",
   "cssComponent": false
 }
diff --git a/docs/pages/base/api/use-button.json b/docs/pages/base/api/use-button.json
index c30c89d3b09b68..cfd717d3b3e77d 100644
--- a/docs/pages/base/api/use-button.json
+++ b/docs/pages/base/api/use-button.json
@@ -65,5 +65,5 @@
   },
   "name": "useButton",
   "filename": "/packages/mui-base/src/useButton/useButton.ts",
-  "demos": "<ul><li><a href=\"/base/react-button/#hook\">Button</a></li></ul>"
+  "demos": "<ul><li><a href=\"/base/react-button/#hook\">Unstyled Button</a></li></ul>"
 }
diff --git a/docs/pages/joy-ui/api/alert.js b/docs/pages/joy-ui/api/alert.js
index 1beef9603135c9..f676f9ab4475f1 100644
--- a/docs/pages/joy-ui/api/alert.js
+++ b/docs/pages/joy-ui/api/alert.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/alert', false, /alert.*.json$/);
+  const req = require.context('docs/translations/api-docs/alert', false, /alert.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/aspect-ratio.js b/docs/pages/joy-ui/api/aspect-ratio.js
index ff99079a85af64..071e2029415cd8 100644
--- a/docs/pages/joy-ui/api/aspect-ratio.js
+++ b/docs/pages/joy-ui/api/aspect-ratio.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/aspect-ratio',
+    'docs/translations/api-docs/aspect-ratio',
     false,
     /aspect-ratio.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/autocomplete-listbox.js b/docs/pages/joy-ui/api/autocomplete-listbox.js
index e79dc1da495467..5922969487241e 100644
--- a/docs/pages/joy-ui/api/autocomplete-listbox.js
+++ b/docs/pages/joy-ui/api/autocomplete-listbox.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/autocomplete-listbox',
+    'docs/translations/api-docs/autocomplete-listbox',
     false,
     /autocomplete-listbox.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/autocomplete-option.js b/docs/pages/joy-ui/api/autocomplete-option.js
index 8304139be937e1..8835b989490bfa 100644
--- a/docs/pages/joy-ui/api/autocomplete-option.js
+++ b/docs/pages/joy-ui/api/autocomplete-option.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/autocomplete-option',
+    'docs/translations/api-docs/autocomplete-option',
     false,
     /autocomplete-option.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/autocomplete.js b/docs/pages/joy-ui/api/autocomplete.js
index e860d625a4952d..ea7bc74e15919f 100644
--- a/docs/pages/joy-ui/api/autocomplete.js
+++ b/docs/pages/joy-ui/api/autocomplete.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/autocomplete',
+    'docs/translations/api-docs/autocomplete',
     false,
     /autocomplete.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/avatar-group.js b/docs/pages/joy-ui/api/avatar-group.js
index c5ccfec00272ea..b1e7dd07841f4d 100644
--- a/docs/pages/joy-ui/api/avatar-group.js
+++ b/docs/pages/joy-ui/api/avatar-group.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/avatar-group',
+    'docs/translations/api-docs/avatar-group',
     false,
     /avatar-group.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/avatar.js b/docs/pages/joy-ui/api/avatar.js
index 57a3395ab0730a..ff34aacf10fd9a 100644
--- a/docs/pages/joy-ui/api/avatar.js
+++ b/docs/pages/joy-ui/api/avatar.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/avatar', false, /avatar.*.json$/);
+  const req = require.context('docs/translations/api-docs/avatar', false, /avatar.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/badge.js b/docs/pages/joy-ui/api/badge.js
index 934d17137e217d..18d7387490b512 100644
--- a/docs/pages/joy-ui/api/badge.js
+++ b/docs/pages/joy-ui/api/badge.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/badge', false, /badge.*.json$/);
+  const req = require.context('docs/translations/api-docs/badge', false, /badge.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/breadcrumbs.js b/docs/pages/joy-ui/api/breadcrumbs.js
index afb0cff96967f1..4fe89696f281ae 100644
--- a/docs/pages/joy-ui/api/breadcrumbs.js
+++ b/docs/pages/joy-ui/api/breadcrumbs.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/breadcrumbs',
+    'docs/translations/api-docs/breadcrumbs',
     false,
     /breadcrumbs.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/button.js b/docs/pages/joy-ui/api/button.js
index 2921080c103f66..66ad9f22ef0c47 100644
--- a/docs/pages/joy-ui/api/button.js
+++ b/docs/pages/joy-ui/api/button.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/button', false, /button.*.json$/);
+  const req = require.context('docs/translations/api-docs/button', false, /button.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/card-content.js b/docs/pages/joy-ui/api/card-content.js
index 9ed9f2faacfc3f..f8529aba2bbde4 100644
--- a/docs/pages/joy-ui/api/card-content.js
+++ b/docs/pages/joy-ui/api/card-content.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/card-content',
+    'docs/translations/api-docs/card-content',
     false,
     /card-content.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/card-cover.js b/docs/pages/joy-ui/api/card-cover.js
index 0236dc8169b6f1..6e14e77bf0666f 100644
--- a/docs/pages/joy-ui/api/card-cover.js
+++ b/docs/pages/joy-ui/api/card-cover.js
@@ -9,11 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context(
-    'docs/translations/api-docs-joy/card-cover',
-    false,
-    /card-cover.*.json$/,
-  );
+  const req = require.context('docs/translations/api-docs/card-cover', false, /card-cover.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/card-overflow.js b/docs/pages/joy-ui/api/card-overflow.js
index 2b57750faa905a..1106b1c0f7a3c1 100644
--- a/docs/pages/joy-ui/api/card-overflow.js
+++ b/docs/pages/joy-ui/api/card-overflow.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/card-overflow',
+    'docs/translations/api-docs/card-overflow',
     false,
     /card-overflow.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/card.js b/docs/pages/joy-ui/api/card.js
index 5da0e773bb2a6d..91bcc50d89eac4 100644
--- a/docs/pages/joy-ui/api/card.js
+++ b/docs/pages/joy-ui/api/card.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/card', false, /card.*.json$/);
+  const req = require.context('docs/translations/api-docs/card', false, /card.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/checkbox.js b/docs/pages/joy-ui/api/checkbox.js
index 0df2f4c56de0b7..90a006ee745260 100644
--- a/docs/pages/joy-ui/api/checkbox.js
+++ b/docs/pages/joy-ui/api/checkbox.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/checkbox', false, /checkbox.*.json$/);
+  const req = require.context('docs/translations/api-docs/checkbox', false, /checkbox.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/chip-delete.js b/docs/pages/joy-ui/api/chip-delete.js
index 39698b8886be15..0d3f508dfc08ea 100644
--- a/docs/pages/joy-ui/api/chip-delete.js
+++ b/docs/pages/joy-ui/api/chip-delete.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/chip-delete',
+    'docs/translations/api-docs/chip-delete',
     false,
     /chip-delete.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/chip.js b/docs/pages/joy-ui/api/chip.js
index becc5c4656a95b..dce59e6ca9c489 100644
--- a/docs/pages/joy-ui/api/chip.js
+++ b/docs/pages/joy-ui/api/chip.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/chip', false, /chip.*.json$/);
+  const req = require.context('docs/translations/api-docs/chip', false, /chip.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/circular-progress.js b/docs/pages/joy-ui/api/circular-progress.js
index 99973fb75b7d20..3c1f447e891e4d 100644
--- a/docs/pages/joy-ui/api/circular-progress.js
+++ b/docs/pages/joy-ui/api/circular-progress.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/circular-progress',
+    'docs/translations/api-docs/circular-progress',
     false,
     /circular-progress.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/css-baseline.js b/docs/pages/joy-ui/api/css-baseline.js
index 6fe78ac3fb9d43..6bb60d8ee9f04c 100644
--- a/docs/pages/joy-ui/api/css-baseline.js
+++ b/docs/pages/joy-ui/api/css-baseline.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/css-baseline',
+    'docs/translations/api-docs/css-baseline',
     false,
     /css-baseline.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/divider.js b/docs/pages/joy-ui/api/divider.js
index 018e205ed7d7ea..72044e9d17d343 100644
--- a/docs/pages/joy-ui/api/divider.js
+++ b/docs/pages/joy-ui/api/divider.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/divider', false, /divider.*.json$/);
+  const req = require.context('docs/translations/api-docs/divider', false, /divider.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/form-control.js b/docs/pages/joy-ui/api/form-control.js
index fe1436d9acbf30..380d4f46e73625 100644
--- a/docs/pages/joy-ui/api/form-control.js
+++ b/docs/pages/joy-ui/api/form-control.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/form-control',
+    'docs/translations/api-docs/form-control',
     false,
     /form-control.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/form-helper-text.js b/docs/pages/joy-ui/api/form-helper-text.js
index bb9f7d5ef3010c..f90e49d2cff7d3 100644
--- a/docs/pages/joy-ui/api/form-helper-text.js
+++ b/docs/pages/joy-ui/api/form-helper-text.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/form-helper-text',
+    'docs/translations/api-docs/form-helper-text',
     false,
     /form-helper-text.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/form-label.js b/docs/pages/joy-ui/api/form-label.js
index a17441b6360311..029a4b5d721a95 100644
--- a/docs/pages/joy-ui/api/form-label.js
+++ b/docs/pages/joy-ui/api/form-label.js
@@ -9,11 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context(
-    'docs/translations/api-docs-joy/form-label',
-    false,
-    /form-label.*.json$/,
-  );
+  const req = require.context('docs/translations/api-docs/form-label', false, /form-label.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/icon-button.js b/docs/pages/joy-ui/api/icon-button.js
index b74a97145df7bb..8d880c94791f40 100644
--- a/docs/pages/joy-ui/api/icon-button.js
+++ b/docs/pages/joy-ui/api/icon-button.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/icon-button',
+    'docs/translations/api-docs/icon-button',
     false,
     /icon-button.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/input.js b/docs/pages/joy-ui/api/input.js
index 5148e848df28b1..e23210a40a1e98 100644
--- a/docs/pages/joy-ui/api/input.js
+++ b/docs/pages/joy-ui/api/input.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/input', false, /input.*.json$/);
+  const req = require.context('docs/translations/api-docs/input', false, /input.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/linear-progress.js b/docs/pages/joy-ui/api/linear-progress.js
index 913b381ac10b9d..9a53abc65ef7bf 100644
--- a/docs/pages/joy-ui/api/linear-progress.js
+++ b/docs/pages/joy-ui/api/linear-progress.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/linear-progress',
+    'docs/translations/api-docs/linear-progress',
     false,
     /linear-progress.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/link.js b/docs/pages/joy-ui/api/link.js
index cefc7a511cf31a..169cf91892fca4 100644
--- a/docs/pages/joy-ui/api/link.js
+++ b/docs/pages/joy-ui/api/link.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/link', false, /link.*.json$/);
+  const req = require.context('docs/translations/api-docs/link', false, /link.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/list-divider.js b/docs/pages/joy-ui/api/list-divider.js
index 7368cf339d4cb5..e1fb8484708de4 100644
--- a/docs/pages/joy-ui/api/list-divider.js
+++ b/docs/pages/joy-ui/api/list-divider.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/list-divider',
+    'docs/translations/api-docs/list-divider',
     false,
     /list-divider.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/list-item-button.js b/docs/pages/joy-ui/api/list-item-button.js
index e89eeff96e040a..a9307d09e55004 100644
--- a/docs/pages/joy-ui/api/list-item-button.js
+++ b/docs/pages/joy-ui/api/list-item-button.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/list-item-button',
+    'docs/translations/api-docs/list-item-button',
     false,
     /list-item-button.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/list-item-content.js b/docs/pages/joy-ui/api/list-item-content.js
index 46a470fbd462f6..bcc09cb276402a 100644
--- a/docs/pages/joy-ui/api/list-item-content.js
+++ b/docs/pages/joy-ui/api/list-item-content.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/list-item-content',
+    'docs/translations/api-docs/list-item-content',
     false,
     /list-item-content.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/list-item-decorator.js b/docs/pages/joy-ui/api/list-item-decorator.js
index 34d3416aeb72fa..0f0cdca73f183a 100644
--- a/docs/pages/joy-ui/api/list-item-decorator.js
+++ b/docs/pages/joy-ui/api/list-item-decorator.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/list-item-decorator',
+    'docs/translations/api-docs/list-item-decorator',
     false,
     /list-item-decorator.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/list-item.js b/docs/pages/joy-ui/api/list-item.js
index 795326d3b784e8..4fc2f704505775 100644
--- a/docs/pages/joy-ui/api/list-item.js
+++ b/docs/pages/joy-ui/api/list-item.js
@@ -9,11 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context(
-    'docs/translations/api-docs-joy/list-item',
-    false,
-    /list-item.*.json$/,
-  );
+  const req = require.context('docs/translations/api-docs/list-item', false, /list-item.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/list-subheader.js b/docs/pages/joy-ui/api/list-subheader.js
index 40c4ae82a46e44..76f688f634b7b4 100644
--- a/docs/pages/joy-ui/api/list-subheader.js
+++ b/docs/pages/joy-ui/api/list-subheader.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/list-subheader',
+    'docs/translations/api-docs/list-subheader',
     false,
     /list-subheader.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/list.js b/docs/pages/joy-ui/api/list.js
index eb6d30911256fa..f9e574b5dd8fee 100644
--- a/docs/pages/joy-ui/api/list.js
+++ b/docs/pages/joy-ui/api/list.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/list', false, /list.*.json$/);
+  const req = require.context('docs/translations/api-docs/list', false, /list.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/menu-item.js b/docs/pages/joy-ui/api/menu-item.js
index 7c25eabddc7a9d..0ade9979d879a0 100644
--- a/docs/pages/joy-ui/api/menu-item.js
+++ b/docs/pages/joy-ui/api/menu-item.js
@@ -9,11 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context(
-    'docs/translations/api-docs-joy/menu-item',
-    false,
-    /menu-item.*.json$/,
-  );
+  const req = require.context('docs/translations/api-docs/menu-item', false, /menu-item.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/menu-list.js b/docs/pages/joy-ui/api/menu-list.js
index 328df9707e3920..98269ca9d3408e 100644
--- a/docs/pages/joy-ui/api/menu-list.js
+++ b/docs/pages/joy-ui/api/menu-list.js
@@ -9,11 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context(
-    'docs/translations/api-docs-joy/menu-list',
-    false,
-    /menu-list.*.json$/,
-  );
+  const req = require.context('docs/translations/api-docs/menu-list', false, /menu-list.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/menu.js b/docs/pages/joy-ui/api/menu.js
index 9d8852e164459a..7ed6ff1f4cf692 100644
--- a/docs/pages/joy-ui/api/menu.js
+++ b/docs/pages/joy-ui/api/menu.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/menu', false, /menu.*.json$/);
+  const req = require.context('docs/translations/api-docs/menu', false, /menu.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/modal-close.js b/docs/pages/joy-ui/api/modal-close.js
index 2e1f20037a8b9b..6acbd161ff954e 100644
--- a/docs/pages/joy-ui/api/modal-close.js
+++ b/docs/pages/joy-ui/api/modal-close.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/modal-close',
+    'docs/translations/api-docs/modal-close',
     false,
     /modal-close.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/modal-dialog.js b/docs/pages/joy-ui/api/modal-dialog.js
index 7a075af2d745a4..dca619aae97ae8 100644
--- a/docs/pages/joy-ui/api/modal-dialog.js
+++ b/docs/pages/joy-ui/api/modal-dialog.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/modal-dialog',
+    'docs/translations/api-docs/modal-dialog',
     false,
     /modal-dialog.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/modal-overflow.js b/docs/pages/joy-ui/api/modal-overflow.js
index 05d8f4ee7ca5e4..b832c31cedd1d7 100644
--- a/docs/pages/joy-ui/api/modal-overflow.js
+++ b/docs/pages/joy-ui/api/modal-overflow.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/modal-overflow',
+    'docs/translations/api-docs/modal-overflow',
     false,
     /modal-overflow.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/modal.js b/docs/pages/joy-ui/api/modal.js
index ef6790a308f66d..d3c0a292b31b49 100644
--- a/docs/pages/joy-ui/api/modal.js
+++ b/docs/pages/joy-ui/api/modal.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/modal', false, /modal.*.json$/);
+  const req = require.context('docs/translations/api-docs/modal', false, /modal.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/option.js b/docs/pages/joy-ui/api/option.js
index 5e0ef1712e7508..407f0a0c666e6c 100644
--- a/docs/pages/joy-ui/api/option.js
+++ b/docs/pages/joy-ui/api/option.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/option', false, /option.*.json$/);
+  const req = require.context('docs/translations/api-docs/option', false, /option.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/radio-group.js b/docs/pages/joy-ui/api/radio-group.js
index d06674a93711c6..3a7599262211b2 100644
--- a/docs/pages/joy-ui/api/radio-group.js
+++ b/docs/pages/joy-ui/api/radio-group.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/radio-group',
+    'docs/translations/api-docs/radio-group',
     false,
     /radio-group.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/radio.js b/docs/pages/joy-ui/api/radio.js
index 3aa10955c27845..f0280245c1d835 100644
--- a/docs/pages/joy-ui/api/radio.js
+++ b/docs/pages/joy-ui/api/radio.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/radio', false, /radio.*.json$/);
+  const req = require.context('docs/translations/api-docs/radio', false, /radio.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/scoped-css-baseline.js b/docs/pages/joy-ui/api/scoped-css-baseline.js
index 169d8079db865d..4cbb0177db7fc6 100644
--- a/docs/pages/joy-ui/api/scoped-css-baseline.js
+++ b/docs/pages/joy-ui/api/scoped-css-baseline.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs-joy/scoped-css-baseline',
+    'docs/translations/api-docs/scoped-css-baseline',
     false,
     /scoped-css-baseline.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/select.js b/docs/pages/joy-ui/api/select.js
index 2aee4a53ac36ce..42e65d0af26441 100644
--- a/docs/pages/joy-ui/api/select.js
+++ b/docs/pages/joy-ui/api/select.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/select', false, /select.*.json$/);
+  const req = require.context('docs/translations/api-docs/select', false, /select.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/sheet.js b/docs/pages/joy-ui/api/sheet.js
index 01e2356cf17d4e..919c00509ce008 100644
--- a/docs/pages/joy-ui/api/sheet.js
+++ b/docs/pages/joy-ui/api/sheet.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/sheet', false, /sheet.*.json$/);
+  const req = require.context('docs/translations/api-docs/sheet', false, /sheet.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/slider.js b/docs/pages/joy-ui/api/slider.js
index 8b09d18829b5fa..768c767c931f60 100644
--- a/docs/pages/joy-ui/api/slider.js
+++ b/docs/pages/joy-ui/api/slider.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/slider', false, /slider.*.json$/);
+  const req = require.context('docs/translations/api-docs/slider', false, /slider.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/stack.js b/docs/pages/joy-ui/api/stack.js
index fb0d64b8ba91a4..9544e37c5e9ad1 100644
--- a/docs/pages/joy-ui/api/stack.js
+++ b/docs/pages/joy-ui/api/stack.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/stack', false, /stack.*.json$/);
+  const req = require.context('docs/translations/api-docs/stack', false, /stack.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/svg-icon.js b/docs/pages/joy-ui/api/svg-icon.js
index 5587325c7a8351..6353473c58fe18 100644
--- a/docs/pages/joy-ui/api/svg-icon.js
+++ b/docs/pages/joy-ui/api/svg-icon.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/svg-icon', false, /svg-icon.*.json$/);
+  const req = require.context('docs/translations/api-docs/svg-icon', false, /svg-icon.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/switch.js b/docs/pages/joy-ui/api/switch.js
index 251a53ea2dde37..6038ed77d88509 100644
--- a/docs/pages/joy-ui/api/switch.js
+++ b/docs/pages/joy-ui/api/switch.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/switch', false, /switch.*.json$/);
+  const req = require.context('docs/translations/api-docs/switch', false, /switch.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/tab-list.js b/docs/pages/joy-ui/api/tab-list.js
index 05c1990d59aca3..922412b7c1ed55 100644
--- a/docs/pages/joy-ui/api/tab-list.js
+++ b/docs/pages/joy-ui/api/tab-list.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/tab-list', false, /tab-list.*.json$/);
+  const req = require.context('docs/translations/api-docs/tab-list', false, /tab-list.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/tab-panel.js b/docs/pages/joy-ui/api/tab-panel.js
index a3ad5d3d2b35d0..f7a6710df28eb8 100644
--- a/docs/pages/joy-ui/api/tab-panel.js
+++ b/docs/pages/joy-ui/api/tab-panel.js
@@ -9,11 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context(
-    'docs/translations/api-docs-joy/tab-panel',
-    false,
-    /tab-panel.*.json$/,
-  );
+  const req = require.context('docs/translations/api-docs/tab-panel', false, /tab-panel.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/tab.js b/docs/pages/joy-ui/api/tab.js
index 946f0bad09c092..9a39374793fe55 100644
--- a/docs/pages/joy-ui/api/tab.js
+++ b/docs/pages/joy-ui/api/tab.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/tab', false, /tab.*.json$/);
+  const req = require.context('docs/translations/api-docs/tab', false, /tab.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/table.js b/docs/pages/joy-ui/api/table.js
index f72830a7e92af2..eac919239c9b5d 100644
--- a/docs/pages/joy-ui/api/table.js
+++ b/docs/pages/joy-ui/api/table.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/table', false, /table.*.json$/);
+  const req = require.context('docs/translations/api-docs/table', false, /table.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/tabs.js b/docs/pages/joy-ui/api/tabs.js
index 88c7dbafee813f..89fb45a9a0359a 100644
--- a/docs/pages/joy-ui/api/tabs.js
+++ b/docs/pages/joy-ui/api/tabs.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/tabs', false, /tabs.*.json$/);
+  const req = require.context('docs/translations/api-docs/tabs', false, /tabs.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/textarea.js b/docs/pages/joy-ui/api/textarea.js
index 4acc6adc593e90..ca4a8077f21281 100644
--- a/docs/pages/joy-ui/api/textarea.js
+++ b/docs/pages/joy-ui/api/textarea.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/textarea', false, /textarea.*.json$/);
+  const req = require.context('docs/translations/api-docs/textarea', false, /textarea.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/tooltip.js b/docs/pages/joy-ui/api/tooltip.js
index 50d17684416fb8..83ec1312d014c9 100644
--- a/docs/pages/joy-ui/api/tooltip.js
+++ b/docs/pages/joy-ui/api/tooltip.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs-joy/tooltip', false, /tooltip.*.json$/);
+  const req = require.context('docs/translations/api-docs/tooltip', false, /tooltip.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/typography.js b/docs/pages/joy-ui/api/typography.js
index d159b1190f218d..5b2785af0f9655 100644
--- a/docs/pages/joy-ui/api/typography.js
+++ b/docs/pages/joy-ui/api/typography.js
@@ -9,11 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context(
-    'docs/translations/api-docs-joy/typography',
-    false,
-    /typography.*.json$/,
-  );
+  const req = require.context('docs/translations/api-docs/typography', false, /typography.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/translations/api-docs/alert/alert.json b/docs/translations/api-docs/alert/alert.json
index ea1893da3a3810..272cde996ffc11 100644
--- a/docs/translations/api-docs/alert/alert.json
+++ b/docs/translations/api-docs/alert/alert.json
@@ -1,112 +1,104 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "action": "The action to display. It renders after the message, at the end of the alert.",
-    "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "closeText": "Override the default label for the <em>close popup</em> icon button.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
-    "color": "The color of the component. Unless provided, the value is taken from the <code>severity</code> prop. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
-    "components": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead.",
-    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
-    "icon": "Override the icon displayed before the children. Unless provided, the icon is mapped to the value of the <code>severity</code> prop. Set to <code>false</code> to remove the <code>icon</code>.",
-    "iconMapping": "The component maps the <code>severity</code> prop to a range of different icons, for instance success to <code>&lt;SuccessOutlined&gt;</code>. If you wish to change this mapping, you can provide your own. Alternatively, you can use the <code>icon</code> prop to override the icon displayed.",
-    "onClose": "Callback fired when the component requests to be closed. When provided and no <code>action</code> prop is set, a close icon button is displayed that triggers the callback when clicked.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent) =&gt; void</code><br><em>event:</em> The event source of the callback.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "endDecorator": "Element placed after the children.",
+    "invertedColors": "If <code>true</code>, the children with an implicit color prop invert their colors to match the component&#39;s variant and color.",
     "role": "The ARIA role attribute of the element.",
-    "severity": "The severity of the alert. This defines the color and icon used.",
-    "slotProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future.",
-    "slots": "The components used for each slot inside.<br>This prop is an alias for the <code>components</code> prop, which will be deprecated in the future.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "startDecorator": "Element placed before the children.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The variant to use."
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "filled": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "root": { "description": "Class name applied to the root element." },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"filled\"</code>"
+      "conditions": "<code>color=\"primary\"</code>"
     },
-    "outlined": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
+      "conditions": "<code>color=\"danger\"</code>"
     },
-    "standard": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"standard\"</code>"
+      "conditions": "<code>color=\"info\"</code>"
     },
-    "standardSuccess": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"standard\"</code> and <code>color=\"success\"</code>"
+      "conditions": "<code>color=\"neutral\"</code>"
     },
-    "standardInfo": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"standard\"</code> and <code>color=\"info\"</code>"
+      "conditions": "<code>color=\"success\"</code>"
     },
-    "standardWarning": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"standard\"</code> and <code>color=\"warning\"</code>"
+      "conditions": "<code>color=\"warning\"</code>"
     },
-    "standardError": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"standard\"</code> and <code>color=\"error\"</code>"
+      "conditions": "color inversion is triggered"
     },
-    "outlinedSuccess": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"success\"</code>"
+    "endDecorator": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the endDecorator element",
+      "conditions": "supplied"
     },
-    "outlinedInfo": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"info\"</code>"
+      "conditions": "<code>size=\"sm\"</code>"
     },
-    "outlinedWarning": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"warning\"</code>"
+      "conditions": "<code>size=\"md\"</code>"
     },
-    "outlinedError": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"error\"</code>"
+      "conditions": "<code>size=\"lg\"</code>"
     },
-    "filledSuccess": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"success\"</code>"
+    "startDecorator": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the startDecorator element",
+      "conditions": "supplied"
     },
-    "filledInfo": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"info\"</code>"
+      "conditions": "<code>variant=\"plain\"</code>"
     },
-    "filledWarning": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"warning\"</code>"
+      "conditions": "<code>variant=\"outlined\"</code>"
     },
-    "filledError": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"error\"</code>"
+      "conditions": "<code>variant=\"soft\"</code>"
     },
-    "icon": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the icon wrapper element"
-    },
-    "message": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the message wrapper element"
-    },
-    "action": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the action wrapper element",
-      "conditions": "<code>action</code> is provided"
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "startDecorator": "The component that renders the start decorator.",
+    "endDecorator": "The component that renders the end decorator."
   }
 }
diff --git a/docs/translations/api-docs/aspect-ratio/aspect-ratio.json b/docs/translations/api-docs/aspect-ratio/aspect-ratio.json
new file mode 100644
index 00000000000000..ca1a512b1a74ff
--- /dev/null
+++ b/docs/translations/api-docs/aspect-ratio/aspect-ratio.json
@@ -0,0 +1,82 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "children": "Used to render icon or text elements inside the AspectRatio if <code>src</code> is not set. This can be an element, or just a string.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "maxHeight": "The maximum calculated height of the element (not the CSS height).",
+    "minHeight": "The minimum calculated height of the element (not the CSS height).",
+    "objectFit": "The CSS object-fit value of the first-child.",
+    "ratio": "The aspect-ratio of the element. The current implementation uses padding instead of the CSS aspect-ratio due to browser support. <a href=\"https://caniuse.com/?search=aspect-ratio\">https://caniuse.com/?search=aspect-ratio</a>",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+  },
+  "classDescriptions": {
+    "root": { "description": "Class name applied to the root element." },
+    "content": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the content element"
+    },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the content element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the content element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the content element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the content element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the content element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the content element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the content element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the content element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the content element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the content element",
+      "conditions": "<code>variant=\"solid\"</code>"
+    }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "content": "The component that renders the content."
+  }
+}
diff --git a/docs/translations/api-docs/autocomplete-listbox/autocomplete-listbox.json b/docs/translations/api-docs/autocomplete-listbox/autocomplete-listbox.json
new file mode 100644
index 00000000000000..1d2ea890edaa5e
--- /dev/null
+++ b/docs/translations/api-docs/autocomplete-listbox/autocomplete-listbox.json
@@ -0,0 +1,52 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "size": "The size of the component (affect other nested list* components). To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+  },
+  "classDescriptions": {
+    "root": { "description": "Class name applied to the root element." },
+    "sizeSm": { "description": "Classname applied to the root element if `size=\"sm\"`." },
+    "sizeMd": { "description": "Classname applied to the root element if `size=\"md\"`." },
+    "sizeLg": { "description": "Classname applied to the root element if `size=\"lg\"`." },
+    "colorPrimary": {
+      "description": "Classname applied to the root element if `color=\"primary\"`."
+    },
+    "colorNeutral": {
+      "description": "Classname applied to the root element if `color=\"neutral\"`."
+    },
+    "colorDanger": {
+      "description": "Classname applied to the root element if `color=\"danger\"`."
+    },
+    "colorInfo": { "description": "Classname applied to the root element if `color=\"info\"`." },
+    "colorSuccess": {
+      "description": "Classname applied to the root element if `color=\"success\"`."
+    },
+    "colorWarning": {
+      "description": "Classname applied to the root element if `color=\"warning\"`."
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "Classname applied to the root element if `variant=\"plain\"`."
+    },
+    "variantOutlined": {
+      "description": "Classname applied to the root element if `variant=\"outlined\"`."
+    },
+    "variantSoft": {
+      "description": "Classname applied to the root element if `variant=\"soft\"`."
+    },
+    "variantSolid": {
+      "description": "Classname applied to the root element if `variant=\"solid\"`."
+    }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
+}
diff --git a/docs/translations/api-docs/autocomplete-option/autocomplete-option.json b/docs/translations/api-docs/autocomplete-option/autocomplete-option.json
new file mode 100644
index 00000000000000..ff0b5617dc3048
--- /dev/null
+++ b/docs/translations/api-docs/autocomplete-option/autocomplete-option.json
@@ -0,0 +1,79 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+  },
+  "classDescriptions": {
+    "root": { "description": "Class name applied to the root element." },
+    "focused": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "focused"
+    },
+    "focusVisible": {
+      "description": "State class applied to {{nodeName}}.",
+      "nodeName": "the `component`'s `focusVisibleClassName` prop"
+    },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantSoft": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantOutlined": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSolid": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
+    }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
+}
diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/docs/translations/api-docs/autocomplete/autocomplete.json
index 54ebd6ebd1aba9..ae572296547d1a 100644
--- a/docs/translations/api-docs/autocomplete/autocomplete.json
+++ b/docs/translations/api-docs/autocomplete/autocomplete.json
@@ -1,45 +1,34 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "autoComplete": "If <code>true</code>, the portion of the selected suggestion that has not been typed by the user, known as the completion string, appears inline after the input cursor in the textbox. The inline completion string is visually highlighted and has a selected state.",
-    "autoHighlight": "If <code>true</code>, the first option is automatically highlighted.",
-    "autoSelect": "If <code>true</code>, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input.<br>When using <code>freeSolo</code> mode, the typed value will be the input value if the Autocomplete loses focus without highlighting an option.",
-    "blurOnSelect": "Control if the input should be blurred when an option is selected:<br>- <code>false</code> the input is not blurred. - <code>true</code> the input is always blurred. - <code>touch</code> the input is blurred after a touch event. - <code>mouse</code> the input is blurred after a mouse event.",
-    "ChipProps": "Props applied to the <a href=\"/material-ui/api/chip/\"><code>Chip</code></a> element.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "aria-describedby": "Identifies the element (or elements) that describes the object.",
+    "aria-label": "Defines a string value that labels the current element.",
+    "aria-labelledby": "Identifies the element (or elements) that labels the current element.",
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "clearIcon": "The icon to display in place of the default clear icon.",
-    "clearOnBlur": "If <code>true</code>, the input&#39;s text is cleared on blur if no value is selected.<br>Set to <code>true</code> if you want to help the user enter a new value. Set to <code>false</code> if you want to help the user resume their search.",
-    "clearOnEscape": "If <code>true</code>, clear all values when the user presses escape and the popup is closed.",
     "clearText": "Override the default text for the <em>clear</em> icon button.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
     "closeText": "Override the default text for the <em>close popup</em> icon button.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
-    "componentsProps": "The props used for each slot inside.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "defaultValue": "The default value. Use when the component is not controlled.",
     "disableClearable": "If <code>true</code>, the input can&#39;t be cleared.",
-    "disableCloseOnSelect": "If <code>true</code>, the popup won&#39;t close when a value is selected.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "disabledItemsFocusable": "If <code>true</code>, will allow focus on disabled items.",
-    "disableListWrap": "If <code>true</code>, the list box in the popup will not wrap focus.",
-    "disablePortal": "If <code>true</code>, the <code>Popper</code> content will be under the DOM hierarchy of the parent component.",
+    "endDecorator": "Trailing adornment for this input.",
+    "error": "If <code>true</code>, the <code>input</code> will indicate an error. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
     "filterOptions": "A function that determines the filtered options to be rendered on search.<br><br><strong>Signature:</strong><br><code>function(options: Array&lt;T&gt;, state: object) =&gt; Array&lt;T&gt;</code><br><em>options:</em> The options to render.<br><em>state:</em> The state of the component.",
-    "filterSelectedOptions": "If <code>true</code>, hide the selected options from the list box.",
     "forcePopupIcon": "Force the visibility display of the popup icon.",
     "freeSolo": "If <code>true</code>, the Autocomplete is free solo, meaning that the user input is not bound to provided options.",
-    "fullWidth": "If <code>true</code>, the input will take up the full width of its container.",
-    "getLimitTagsText": "The label to display when the tags are truncated (<code>limitTags</code>).<br><br><strong>Signature:</strong><br><code>function(more: number) =&gt; ReactNode</code><br><em>more:</em> The number of truncated tags.",
+    "getLimitTagsText": "The label to display when the tags are truncated (<code>limitTags</code>).<br><br><strong>Signature:</strong><br><code>function(more: string | number) =&gt; ReactNode</code><br><em>more:</em> The number of truncated tags.",
     "getOptionDisabled": "Used to determine the disabled state for a given option.<br><br><strong>Signature:</strong><br><code>function(option: T) =&gt; boolean</code><br><em>option:</em> The option to test.",
     "getOptionLabel": "Used to determine the string value for a given option. It&#39;s used to fill the input (and the list box options if <code>renderOption</code> is not provided).<br>If used in free solo mode, it must accept both the type of the options and a string.<br><br><strong>Signature:</strong><br><code>function(option: T) =&gt; string</code><br>",
     "groupBy": "If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when <code>renderGroup</code> is not provided.<br><br><strong>Signature:</strong><br><code>function(options: T) =&gt; string</code><br><em>options:</em> The options to group.",
-    "handleHomeEndKeys": "If <code>true</code>, the component handles the &quot;Home&quot; and &quot;End&quot; keys when the popup is open. It should move focus to the first option and last option, respectively.",
     "id": "This prop is used to help implement the accessibility logic. If you don&#39;t provide an id it will fall back to a randomly generated one.",
-    "includeInputInList": "If <code>true</code>, the highlight can move to the input.",
     "inputValue": "The input value.",
     "isOptionEqualToValue": "Used to determine if the option represents the given value. Uses strict equality by default. ⚠️ Both arguments need to be handled, an option can only match with one value.<br><br><strong>Signature:</strong><br><code>function(option: T, value: T) =&gt; boolean</code><br><em>option:</em> The option to test.<br><em>value:</em> The value to test against.",
     "limitTags": "The maximum number of tags that will be visible when not focused. Set <code>-1</code> to disable the limit.",
-    "ListboxComponent": "The component used to render the listbox.",
-    "ListboxProps": "Props applied to the Listbox element.",
     "loading": "If <code>true</code>, the component is in a loading state. This shows the <code>loadingText</code> in place of suggestions (only if there are no suggestions to show, e.g. <code>options</code> are empty).",
     "loadingText": "Text to display when in a loading state.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
     "multiple": "If <code>true</code>, <code>value</code> must be an array and the menu will support multiple selections.",
+    "name": "Name attribute of the <code>input</code> element.",
     "noOptionsText": "Text to display when there are no options.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
     "onChange": "Callback fired when the value changes.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent, value: T | Array&lt;T&gt;, reason: string, details?: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>value:</em> The new value of the component.<br><em>reason:</em> One of &quot;createOption&quot;, &quot;selectOption&quot;, &quot;removeOption&quot;, &quot;blur&quot; or &quot;clear&quot;.",
     "onClose": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>reason:</em> Can be: <code>&quot;toggleInput&quot;</code>, <code>&quot;escape&quot;</code>, <code>&quot;selectOption&quot;</code>, <code>&quot;removeOption&quot;</code>, <code>&quot;blur&quot;</code>.",
@@ -47,120 +36,185 @@
     "onInputChange": "Callback fired when the input value changes.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent, value: string, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>value:</em> The new value of the text input.<br><em>reason:</em> Can be: <code>&quot;input&quot;</code> (user input), <code>&quot;reset&quot;</code> (programmatic change), <code>&quot;clear&quot;</code>.",
     "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent) =&gt; void</code><br><em>event:</em> The event source of the callback.",
     "open": "If <code>true</code>, the component is shown.",
-    "openOnFocus": "If <code>true</code>, the popup will open on input focus.",
     "openText": "Override the default text for the <em>open popup</em> icon button.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
     "options": "Array of options.",
-    "PaperComponent": "The component used to render the body of the popup.",
-    "PopperComponent": "The component used to position the popup.",
+    "placeholder": "The input placeholder",
     "popupIcon": "The icon to display in place of the default popup icon.",
     "readOnly": "If <code>true</code>, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.",
     "renderGroup": "Render the group.<br><br><strong>Signature:</strong><br><code>function(params: AutocompleteRenderGroupParams) =&gt; ReactNode</code><br><em>params:</em> The group to render.",
-    "renderInput": "Render the input.<br><br><strong>Signature:</strong><br><code>function(params: object) =&gt; ReactNode</code><br>",
     "renderOption": "Render the option, use <code>getOptionLabel</code> by default.<br><br><strong>Signature:</strong><br><code>function(props: object, option: T, state: object) =&gt; ReactNode</code><br><em>props:</em> The props to apply on the li element.<br><em>option:</em> The option to render.<br><em>state:</em> The state of the component.",
     "renderTags": "Render the selected value.<br><br><strong>Signature:</strong><br><code>function(value: Array&lt;T&gt;, getTagProps: function, ownerState: object) =&gt; ReactNode</code><br><em>value:</em> The <code>value</code> provided to the component.<br><em>getTagProps:</em> A tag props getter.<br><em>ownerState:</em> The state of the Autocomplete component.",
-    "selectOnFocus": "If <code>true</code>, the input&#39;s text is selected on focus. It helps the user clear the selected value.",
-    "size": "The size of the component.",
+    "required": "If <code>true</code>, the <code>input</code> element is required. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
     "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "startDecorator": "Leading adornment for this input.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "value": "The value of the autocomplete.<br>The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the <code>isOptionEqualToValue</code> prop."
+    "type": "Type of the <code>input</code> element. It should be <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types\">a valid HTML5 input type</a>.",
+    "value": "The value of the autocomplete.<br>The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the <code>isOptionEqualToValue</code> prop.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "fullWidth": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>fullWidth={true}</code>"
+    "root": { "description": "Class name applied to the root element." },
+    "wrapper": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the wrapper element"
     },
-    "expanded": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+    "input": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the input element"
+    },
+    "startDecorator": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the startDecorator element"
+    },
+    "endDecorator": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the endDecorator element"
+    },
+    "formControl": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "the listbox is displayed"
+      "conditions": "the component is a descendant of <code>FormControl</code>"
     },
     "focused": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "focused"
+      "conditions": "the component is focused"
     },
-    "tag": {
-      "description": "Styles applied to {{nodeName}}, {{conditions}}.",
-      "nodeName": "the tag elements",
-      "conditions": "e.g. the chips"
-    },
-    "tagSizeSmall": {
-      "description": "Styles applied to {{nodeName}}, {{conditions}}.",
-      "nodeName": "the tag elements",
-      "conditions": "e.g. the chips if <code>size=\"small\"</code>"
-    },
-    "tagSizeMedium": {
-      "description": "Styles applied to {{nodeName}}, {{conditions}}.",
-      "nodeName": "the tag elements",
-      "conditions": "e.g. the chips if <code>size=\"medium\"</code>"
+    "disabled": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disabled={true}</code>"
     },
-    "hasPopupIcon": { "description": "Styles applied when the popup icon is rendered." },
-    "hasClearIcon": { "description": "Styles applied when the clear icon is rendered." },
-    "inputRoot": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Input element"
+    "error": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>error={true}</code>"
     },
-    "input": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the input element" },
-    "inputFocused": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the input element",
-      "conditions": "the input is focused"
+    "multiple": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the wrapper element",
+      "conditions": "<code>multiple={true}</code>"
     },
-    "endAdornment": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the endAdornment element"
+    "limitTag": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the limitTag element"
     },
+    "hasPopupIcon": { "description": "Class name applied when the popup icon is rendered." },
+    "hasClearIcon": { "description": "Class name applied when the clear icon is rendered." },
     "clearIndicator": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the clear indicator"
     },
     "popupIndicator": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the popup indicator"
     },
     "popupIndicatorOpen": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the popup indicator",
       "conditions": "the popup is open"
     },
-    "popper": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the popper element"
-    },
-    "popperDisablePortal": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the popper element",
-      "conditions": "<code>disablePortal={true}</code>"
-    },
-    "paper": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Paper component"
-    },
     "listbox": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the listbox component"
     },
+    "option": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the option component"
+    },
     "loading": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the loading wrapper"
     },
     "noOptions": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the no option wrapper"
     },
-    "option": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the option elements"
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
     },
-    "groupLabel": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the group's label elements"
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
     },
-    "groupUl": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the group's ul elements"
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
+    },
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "wrapper": "The component that renders the wrapper.",
+    "input": "The component that renders the input.",
+    "startDecorator": "The component that renders the start decorator.",
+    "endDecorator": "The component that renders the end decorator.",
+    "clearIndicator": "The component that renders the clear indicator.",
+    "popupIndicator": "The component that renders the popup indicator.",
+    "listbox": "The component that renders the listbox.",
+    "option": "The component that renders the option.",
+    "loading": "The component that renders the loading.",
+    "noOptions": "The component that renders the no-options.",
+    "limitTag": "The component that renders the limit tag."
   }
 }
diff --git a/docs/translations/api-docs/avatar-group/avatar-group.json b/docs/translations/api-docs/avatar-group/avatar-group.json
index af216ecd52b34d..9d7fae700387dd 100644
--- a/docs/translations/api-docs/avatar-group/avatar-group.json
+++ b/docs/translations/api-docs/avatar-group/avatar-group.json
@@ -1,22 +1,15 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The avatars to stack.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "children": "Used to render icon or text elements inside the AvatarGroup if <code>src</code> is not set. This can be an element, or just a string.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
-    "max": "Max avatars to show before +x.",
-    "slotProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future.",
-    "spacing": "Spacing between avatars.",
+    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "total": "The total number of avatars. Used for calculating the number of extra avatars.",
-    "variant": "The variant to use."
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
-  "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "avatar": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the avatar elements"
-    }
-  }
+  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/avatar/avatar.json b/docs/translations/api-docs/avatar/avatar.json
index 585772ace3613f..5297faf8a62a6f 100644
--- a/docs/translations/api-docs/avatar/avatar.json
+++ b/docs/translations/api-docs/avatar/avatar.json
@@ -3,42 +3,96 @@
   "propDescriptions": {
     "alt": "Used in combination with <code>src</code> or <code>srcSet</code> to provide an alt attribute for the rendered <code>img</code> element.",
     "children": "Used to render icon or text elements inside the Avatar if <code>src</code> is not set. This can be an element, or just a string.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "imgProps": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes\">Attributes</a> applied to the <code>img</code> element if the component is used to display an image. It can be used to listen for the loading error event.",
-    "sizes": "The <code>sizes</code> attribute for the <code>img</code> element.",
+    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "src": "The <code>src</code> attribute for the <code>img</code> element.",
     "srcSet": "The <code>srcSet</code> attribute for the <code>img</code> element. Use this attribute for responsive image display.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The shape of the avatar."
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "colorDefault": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "root": { "description": "Class name applied to the root element." },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "not <code>src</code> or <code>srcSet</code>"
+      "conditions": "<code>color=\"primary\"</code>"
     },
-    "circular": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"circular\"</code>"
+      "conditions": "<code>color=\"neutral\"</code>"
     },
-    "rounded": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"rounded\"</code>"
+      "conditions": "<code>color=\"danger\"</code>"
     },
-    "square": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"square\"</code>"
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "fallback": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the fallback icon"
+    },
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
+    },
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
     },
     "img": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the img element",
       "conditions": "either <code>src</code> or <code>srcSet</code> is defined"
     },
-    "fallback": { "description": "Styles applied to the fallback icon" }
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
+    }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "img": "The component that renders the img.",
+    "fallback": "The component that renders the fallback."
   }
 }
diff --git a/docs/translations/api-docs/badge/badge.json b/docs/translations/api-docs/badge/badge.json
index d4581d9dd4ae06..57d56e4627179e 100644
--- a/docs/translations/api-docs/badge/badge.json
+++ b/docs/translations/api-docs/badge/badge.json
@@ -3,141 +3,133 @@
   "propDescriptions": {
     "anchorOrigin": "The anchor of the badge.",
     "badgeContent": "The content rendered within the badge.",
+    "badgeInset": "The inset of the badge. Support shorthand syntax as described in <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/inset\">https://developer.mozilla.org/en-US/docs/Web/CSS/inset</a>.",
     "children": "The badge will be added relative to this node.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "components": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead.",
-    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
     "invisible": "If <code>true</code>, the badge is invisible.",
     "max": "Max count to show.",
-    "overlap": "Wrapped shape the badge should overlap.",
     "showZero": "Controls whether the badge is hidden when <code>badgeContent</code> is zero.",
-    "slotProps": "The props used for each slot inside the Badge.",
-    "slots": "The components used for each slot inside the Badge. Either a string to use a HTML element or a component.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The variant to use."
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
+    "root": { "description": "Class name applied to the root element." },
     "badge": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the badge `span` element"
     },
-    "dot": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>variant=\"dot\"</code>"
-    },
-    "standard": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>variant=\"standard\"</code>"
-    },
     "anchorOriginTopRight": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>anchorOrigin={{ 'top', 'right' }}</code>"
     },
     "anchorOriginBottomRight": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>anchorOrigin={{ 'bottom', 'right' }}</code>"
     },
     "anchorOriginTopLeft": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>anchorOrigin={{ 'top', 'left' }}</code>"
     },
     "anchorOriginBottomLeft": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>anchorOrigin={{ 'bottom', 'left' }}</code>"
     },
-    "invisible": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>invisible={true}</code>"
-    },
     "colorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>color=\"primary\"</code>"
     },
-    "colorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>color=\"secondary\"</code>"
-    },
-    "colorError": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
-      "conditions": "<code>color=\"error\"</code>"
+      "conditions": "<code>color=\"danger\"</code>"
     },
     "colorInfo": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>color=\"info\"</code>"
     },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
     "colorSuccess": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>color=\"success\"</code>"
     },
     "colorWarning": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>color=\"warning\"</code>"
     },
-    "anchorOriginTopRightRectangular": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>anchorOrigin={{ 'top', 'right' }} overlap=\"rectangular\"</code>"
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
     },
-    "anchorOriginBottomRightRectangular": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "invisible": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
-      "conditions": "<code>anchorOrigin={{ 'bottom', 'right' }} overlap=\"rectangular\"</code>"
+      "conditions": "<code>invisible={true}</code>"
     },
-    "anchorOriginTopLeftRectangular": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "locationInside": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
-      "conditions": "<code>anchorOrigin={{ 'top', 'left' }} overlap=\"rectangular\"</code>"
+      "conditions": "<code>location=\"inside\"</code>"
     },
-    "anchorOriginBottomLeftRectangular": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "locationOutside": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
-      "conditions": "<code>anchorOrigin={{ 'bottom', 'left' }} overlap=\"rectangular\"</code>"
+      "conditions": "<code>location=\"outside\"</code>"
     },
-    "anchorOriginTopRightCircular": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
-      "conditions": "<code>anchorOrigin={{ 'top', 'right' }} overlap=\"circular\"</code>"
+      "conditions": "<code>size=\"sm\"</code>"
     },
-    "anchorOriginBottomRightCircular": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
-      "conditions": "<code>anchorOrigin={{ 'bottom', 'right' }} overlap=\"circular\"</code>"
+      "conditions": "<code>size=\"md\"</code>"
     },
-    "anchorOriginTopLeftCircular": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
-      "conditions": "<code>anchorOrigin={{ 'top', 'left' }} overlap=\"circular\"</code>"
+      "conditions": "<code>size=\"lg\"</code>"
     },
-    "anchorOriginBottomLeftCircular": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
-      "conditions": "<code>anchorOrigin={{ 'bottom', 'left' }} overlap=\"circular\"</code>"
+      "conditions": "<code>variant=\"outlined\"</code>"
     },
-    "overlapRectangular": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
-      "conditions": "<code>overlap=\"rectangular\"</code>"
+      "conditions": "<code>variant=\"soft\"</code>"
     },
-    "overlapCircular": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
-      "conditions": "<code>overlap=\"circular\"</code>"
+      "conditions": "<code>variant=\"solid\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "badge": "The component that renders the badge."
   }
 }
diff --git a/docs/translations/api-docs/breadcrumbs/breadcrumbs.json b/docs/translations/api-docs/breadcrumbs/breadcrumbs.json
index 5ec041c625611f..cf9e2f9325d7c7 100644
--- a/docs/translations/api-docs/breadcrumbs/breadcrumbs.json
+++ b/docs/translations/api-docs/breadcrumbs/breadcrumbs.json
@@ -2,24 +2,41 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "expandText": "Override the default label for the expand button.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
-    "itemsAfterCollapse": "If max items is exceeded, the number of items to show after the ellipsis.",
-    "itemsBeforeCollapse": "If max items is exceeded, the number of items to show before the ellipsis.",
-    "maxItems": "Specifies the maximum number of breadcrumbs to display. When there are more than the maximum number, only the first <code>itemsBeforeCollapse</code> and last <code>itemsAfterCollapse</code> will be shown, with an ellipsis in between.",
     "separator": "Custom separator node.",
-    "slotProps": "The props used for each slot inside the Breadcumb.",
-    "slots": "The components used for each slot inside the Breadcumb. Either a string to use a HTML element or a component.",
+    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "ol": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the ol element" },
-    "li": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the li element" },
+    "root": { "description": "Class name applied to the root element." },
+    "ol": { "description": "Class name applied to {{nodeName}}.", "nodeName": "the ol element" },
+    "li": { "description": "Class name applied to {{nodeName}}.", "nodeName": "the li element" },
     "separator": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the separator element"
+    },
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
+    },
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "ol": "The component that renders the ol.",
+    "li": "The component that renders the li.",
+    "separator": "The component that renders the separator."
   }
 }
diff --git a/docs/translations/api-docs/button/button.json b/docs/translations/api-docs/button/button.json
index da71ba84da8ec4..1b2359cb447569 100644
--- a/docs/translations/api-docs/button/button.json
+++ b/docs/translations/api-docs/button/button.json
@@ -1,148 +1,78 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
+    "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "disableElevation": "If <code>true</code>, no elevation is used.",
-    "disableFocusRipple": "If <code>true</code>, the  keyboard focus ripple is disabled.",
-    "disableRipple": "If <code>true</code>, the ripple effect is disabled.<br>⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the <code>.Mui-focusVisible</code> class.",
-    "endIcon": "Element placed after the children.",
+    "endDecorator": "Element placed after the children.",
     "fullWidth": "If <code>true</code>, the button will take up the full width of its container.",
-    "href": "The URL to link to when the button is clicked. If defined, an <code>a</code> element will be used as the root node.",
-    "size": "The size of the component. <code>small</code> is equivalent to the dense button styling.",
-    "startIcon": "Element placed before the children.",
+    "loading": "If <code>true</code>, the loading indicator is shown.",
+    "loadingIndicator": "The node should contain an element with <code>role=&quot;progressbar&quot;</code> with an accessible name. By default we render a <code>CircularProgress</code> that is labelled by the button itself.",
+    "loadingPosition": "The loading indicator can be positioned on the start, end, or the center of the button.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "startDecorator": "Element placed before the children.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The variant to use."
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "text": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "root": { "description": "Class name applied to the root element." },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"text\"</code>"
+      "conditions": "<code>color=\"primary\"</code>"
     },
-    "textInherit": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"text\"</code> and <code>color=\"inherit\"</code>"
+      "conditions": "<code>color=\"neutral\"</code>"
     },
-    "textPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"text\"</code> and <code>color=\"primary\"</code>"
+      "conditions": "<code>color=\"danger\"</code>"
     },
-    "textSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"text\"</code> and <code>color=\"secondary\"</code>"
+      "conditions": "<code>color=\"info\"</code>"
     },
-    "textSuccess": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"text\"</code> and <code>color=\"success\"</code>"
+      "conditions": "<code>color=\"success\"</code>"
     },
-    "textError": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"text\"</code> and <code>color=\"error\"</code>"
+      "conditions": "<code>color=\"warning\"</code>"
     },
-    "textInfo": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"text\"</code> and <code>color=\"info\"</code>"
+      "conditions": "color inversion is triggered"
     },
-    "textWarning": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"text\"</code> and <code>color=\"warning\"</code>"
+      "conditions": "<code>variant=\"plain\"</code>"
     },
-    "outlined": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>variant=\"outlined\"</code>"
     },
-    "outlinedInherit": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"inherit\"</code>"
+      "conditions": "<code>variant=\"soft\"</code>"
     },
-    "outlinedPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"primary\"</code>"
-    },
-    "outlinedSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"secondary\"</code>"
-    },
-    "outlinedSuccess": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"success\"</code>"
-    },
-    "outlinedError": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"error\"</code>"
-    },
-    "outlinedInfo": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"info\"</code>"
-    },
-    "outlinedWarning": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"warning\"</code>"
-    },
-    "contained": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"contained\"</code>"
-    },
-    "containedInherit": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"inherit\"</code>"
-    },
-    "containedPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"primary\"</code>"
-    },
-    "containedSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"secondary\"</code>"
-    },
-    "containedSuccess": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"success\"</code>"
-    },
-    "containedInfo": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"info\"</code>"
-    },
-    "containedError": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"error\"</code>"
-    },
-    "containedWarning": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"warning\"</code>"
-    },
-    "disableElevation": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>disableElevation={true}</code>"
+      "conditions": "<code>variant=\"solid\"</code>"
     },
     "focusVisible": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
@@ -154,100 +84,50 @@
       "nodeName": "the root element",
       "conditions": "<code>disabled={true}</code>"
     },
-    "colorInherit": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"inherit\"</code>"
-    },
-    "textSizeSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"small\"</code> and <code>variant=\"text\"</code>"
+      "conditions": "<code>size=\"sm\"</code>"
     },
-    "textSizeMedium": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"medium\"</code> and <code>variant=\"text\"</code>"
+      "conditions": "<code>size=\"md\"</code>"
     },
-    "textSizeLarge": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"large\"</code> and <code>variant=\"text\"</code>"
-    },
-    "outlinedSizeSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"small\"</code> and <code>variant=\"outlined\"</code>"
-    },
-    "outlinedSizeMedium": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"medium\"</code> and <code>variant=\"outlined\"</code>"
-    },
-    "outlinedSizeLarge": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"large\"</code> and <code>variant=\"outlined\"</code>"
-    },
-    "containedSizeSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"small\"</code> and <code>variant=\"contained\"</code>"
-    },
-    "containedSizeMedium": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"medium\"</code> and <code>variant=\"contained\"</code>"
-    },
-    "containedSizeLarge": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"large\"</code> and <code>variant=\"contained\"</code>"
-    },
-    "sizeSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"small\"</code>"
-    },
-    "sizeMedium": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"medium\"</code>"
-    },
-    "sizeLarge": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"large\"</code>"
+      "conditions": "<code>size=\"lg\"</code>"
     },
     "fullWidth": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>fullWidth={true}</code>"
     },
-    "startIcon": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the startIcon element",
+    "startDecorator": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the startDecorator element",
       "conditions": "supplied"
     },
-    "endIcon": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the endIcon element",
+    "endDecorator": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the endDecorator element",
       "conditions": "supplied"
     },
-    "iconSizeSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the icon element",
-      "conditions": "supplied and <code>size=\"small\"</code>"
-    },
-    "iconSizeMedium": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the icon element",
-      "conditions": "supplied and <code>size=\"medium\"</code>"
+    "loading": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>loading={true}</code>"
     },
-    "iconSizeLarge": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the icon element",
-      "conditions": "supplied and <code>size=\"large\"</code>"
+    "loadingIndicatorCenter": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the loadingIndicatorCenter element"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "startDecorator": "The component that renders the start decorator.",
+    "endDecorator": "The component that renders the end decorator.",
+    "loadingIndicatorCenter": "The component that renders the loading indicator center."
   }
 }
diff --git a/docs/translations/api-docs/card-content/card-content.json b/docs/translations/api-docs/card-content/card-content.json
index ff27adf5730304..44696adcb84b77 100644
--- a/docs/translations/api-docs/card-content/card-content.json
+++ b/docs/translations/api-docs/card-content/card-content.json
@@ -1,10 +1,12 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "children": "Used to render icon or text elements inside the CardContent if <code>src</code> is not set. This can be an element, or just a string.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
-  "classDescriptions": { "root": { "description": "Styles applied to the root element." } }
+  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/card-cover/card-cover.json b/docs/translations/api-docs/card-cover/card-cover.json
new file mode 100644
index 00000000000000..315390b8b24583
--- /dev/null
+++ b/docs/translations/api-docs/card-cover/card-cover.json
@@ -0,0 +1,12 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "children": "Used to render icon or text elements inside the CardCover if <code>src</code> is not set. This can be an element, or just a string.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+  },
+  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
+  "slotDescriptions": { "root": "The component that renders the root." }
+}
diff --git a/docs/translations/api-docs/card-overflow/card-overflow.json b/docs/translations/api-docs/card-overflow/card-overflow.json
new file mode 100644
index 00000000000000..cf12f77e5b0327
--- /dev/null
+++ b/docs/translations/api-docs/card-overflow/card-overflow.json
@@ -0,0 +1,71 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "children": "Used to render icon or text elements inside the CardOverflow if <code>src</code> is not set. This can be an element, or just a string.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+  },
+  "classDescriptions": {
+    "root": { "description": "Class name applied to the root element." },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
+    }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
+}
diff --git a/docs/translations/api-docs/card/card.json b/docs/translations/api-docs/card/card.json
index feb6f7366eddd9..6888ced30db8d9 100644
--- a/docs/translations/api-docs/card/card.json
+++ b/docs/translations/api-docs/card/card.json
@@ -1,10 +1,99 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "raised": "If <code>true</code>, the card will use raised styling.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+    "children": "Used to render icon or text elements inside the Card if <code>src</code> is not set. This can be an element, or just a string.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "invertedColors": "If <code>true</code>, the children with an implicit color prop invert their colors to match the component&#39;s variant and color.",
+    "orientation": "The component orientation.",
+    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
-  "classDescriptions": { "root": { "description": "Styles applied to the root element." } }
+  "classDescriptions": {
+    "root": { "description": "Class name applied to the root element." },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
+    },
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
+    },
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
+    },
+    "horizontal": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>orientation=\"horizontal\"</code>"
+    },
+    "vertical": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>orientation=\"vertical\"</code>"
+    }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/checkbox/checkbox.json b/docs/translations/api-docs/checkbox/checkbox.json
index edd98e7b792b81..a0368b267720c1 100644
--- a/docs/translations/api-docs/checkbox/checkbox.json
+++ b/docs/translations/api-docs/checkbox/checkbox.json
@@ -3,34 +3,56 @@
   "propDescriptions": {
     "checked": "If <code>true</code>, the component is checked.",
     "checkedIcon": "The icon to display when the component is checked.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
+    "className": "Class name applied to the root element.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "defaultChecked": "The default checked state. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "disableRipple": "If <code>true</code>, the ripple effect is disabled.",
-    "icon": "The icon to display when the component is unchecked.",
-    "id": "The id of the <code>input</code> element.",
+    "disableIcon": "If <code>true</code>, the checked icon is removed and the selected variant is applied on the <code>action</code> element instead.",
     "indeterminate": "If <code>true</code>, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a <code>data-indeterminate</code> attribute on the <code>input</code>.",
     "indeterminateIcon": "The icon to display when the component is indeterminate.",
-    "inputProps": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes\">Attributes</a> applied to the <code>input</code> element.",
-    "inputRef": "Pass a ref to the <code>input</code> element.",
-    "onChange": "Callback fired when the state is changed.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean).",
+    "label": "The label element next to the checkbox.",
+    "name": "The <code>name</code> attribute of the input.",
+    "onChange": "Callback fired when the state is changed.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string). You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean).",
+    "overlay": "If <code>true</code>, the root element&#39;s position is set to initial which allows the action area to fill the nearest positioned parent. This prop is useful for composing Checkbox with ListItem component.",
+    "readOnly": "If <code>true</code>, the component is read only.",
     "required": "If <code>true</code>, the <code>input</code> element is required.",
-    "size": "The size of the component. <code>small</code> is equivalent to the dense checkbox styling.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "value": "The value of the component. The DOM API casts this to a string. The browser uses &quot;on&quot; as the default value."
+    "uncheckedIcon": "The icon when <code>checked</code> is false.",
+    "value": "The value of the component. The DOM API casts this to a string. The browser uses &quot;on&quot; as the default value.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
+    "root": { "description": "Class name applied to the root element." },
+    "checkbox": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the checkbox element"
+    },
+    "action": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the action element"
+    },
+    "input": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the input element"
+    },
+    "label": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the label element"
+    },
     "checked": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>checked={true}</code>"
+      "description": "State class applied to {{nodeName}}.",
+      "nodeName": "the input component's `checked` class"
     },
     "disabled": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>disabled={true}</code>"
+      "description": "State class applied to {{nodeName}}.",
+      "nodeName": "the input component's disabled class"
+    },
+    "focusVisible": {
+      "description": "Class name applied to the root element if the switch has visible focus"
     },
     "indeterminate": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
@@ -38,14 +60,76 @@
       "conditions": "<code>indeterminate={true}</code>"
     },
     "colorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"primary\"</code>"
     },
-    "colorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
+    },
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"secondary\"</code>"
+      "conditions": "<code>variant=\"solid\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "checkbox": "The component that renders the checkbox.",
+    "action": "The component that renders the action.",
+    "input": "The component that renders the input.",
+    "label": "The component that renders the label."
   }
 }
diff --git a/docs/translations/api-docs/chip-delete/chip-delete.json b/docs/translations/api-docs/chip-delete/chip-delete.json
new file mode 100644
index 00000000000000..3abc95a48f15b8
--- /dev/null
+++ b/docs/translations/api-docs/chip-delete/chip-delete.json
@@ -0,0 +1,83 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "children": "If provided, it will replace the default icon.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "disabled": "If <code>true</code>, the component is disabled. If <code>undefined</code>, the value inherits from the parent chip via a React context.",
+    "onDelete": "Callback fired when the component is not disabled and either: - <code>Backspace</code>, <code>Enter</code> or <code>Delete</code> is pressed. - The component is clicked.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+  },
+  "classDescriptions": {
+    "root": { "description": "Class name applied to the root element." },
+    "disabled": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disabled={true}</code>"
+    },
+    "focusVisible": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "keyboard focused"
+    },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
+}
diff --git a/docs/translations/api-docs/chip/chip.json b/docs/translations/api-docs/chip/chip.json
index 2a39e6b8f90a2e..f0443706901b0d 100644
--- a/docs/translations/api-docs/chip/chip.json
+++ b/docs/translations/api-docs/chip/chip.json
@@ -1,236 +1,136 @@
 {
   "componentDescription": "Chips represent complex entities in small blocks, such as a contact.",
   "propDescriptions": {
-    "avatar": "The Avatar element to display.",
-    "children": "This prop isn&#39;t supported. Use the <code>component</code> prop if you need to change the children structure.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "clickable": "If <code>true</code>, the chip will appear clickable, and will raise when pressed, even if the onClick prop is not defined. If <code>false</code>, the chip will not appear clickable, even if onClick prop is defined. This can be used, for example, along with the component prop to indicate an anchor Chip is clickable. Note: this controls the UI and does not affect the onClick event.",
-    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
+    "children": "The content of the component.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "deleteIcon": "Override the default delete icon element. Shown only if <code>onDelete</code> is set.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "icon": "Icon element.",
-    "label": "The content of the component.",
-    "onDelete": "Callback fired when the delete icon is clicked. If set, the delete icon will be shown.",
-    "size": "The size of the component.",
-    "skipFocusWhenDisabled": "If <code>true</code>, allows the disabled chip to escape focus. If <code>false</code>, allows the disabled chip to receive focus.",
+    "endDecorator": "Element placed after the children.",
+    "onClick": "Element action click handler.",
+    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "startDecorator": "Element placed before the children.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The variant to use."
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "sizeSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "root": { "description": "Class name applied to the root element." },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"small\"</code>"
+      "conditions": "<code>color=\"primary\"</code>"
     },
-    "sizeMedium": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"medium\"</code>"
+      "conditions": "<code>color=\"neutral\"</code>"
     },
-    "colorError": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"error\"</code>"
+      "conditions": "<code>color=\"danger\"</code>"
     },
     "colorInfo": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"info\"</code>"
     },
-    "colorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"secondary\"</code>"
-    },
     "colorSuccess": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"success\"</code>"
     },
     "colorWarning": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"warning\"</code>"
     },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
     "disabled": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>disabled={true}</code>"
     },
-    "clickable": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>onClick</code> is defined or <code>clickable={true}</code>"
+    "endDecorator": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the endDecorator element",
+      "conditions": "supplied"
     },
-    "clickableColorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "focusVisible": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>onClick</code> and <code>color=\"primary\"</code> is defined or <code>clickable={true}</code>"
+      "conditions": "keyboard focused"
     },
-    "clickableColorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>onClick</code> and <code>color=\"secondary\"</code> is defined or <code>clickable={true}</code>"
+    "label": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the label `span` element"
     },
-    "deletable": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>onDelete</code> is defined"
+    "labelSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the label `span` element",
+      "conditions": "<code>size=\"sm\"</code>"
     },
-    "deletableColorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>onDelete</code> and <code>color=\"primary\"</code> is defined"
+    "labelMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the label `span` element",
+      "conditions": "<code>size=\"md\"</code>"
     },
-    "deletableColorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>onDelete</code> and <code>color=\"secondary\"</code> is defined"
+    "labelLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the label `span` element",
+      "conditions": "<code>size=\"lg\"</code>"
     },
-    "outlined": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
+      "conditions": "<code>size=\"sm\"</code>"
     },
-    "filled": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"filled\"</code>"
+      "conditions": "<code>size=\"md\"</code>"
     },
-    "outlinedPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"primary\"</code>"
+      "conditions": "<code>size=\"lg\"</code>"
     },
-    "outlinedSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"secondary\"</code>"
+    "startDecorator": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the startDecorator element",
+      "conditions": "supplied"
     },
-    "filledPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"primary\"</code>"
+      "conditions": "<code>variant=\"plain\"</code>"
     },
-    "filledSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"secondary\"</code>"
-    },
-    "avatar": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the avatar element"
-    },
-    "avatarSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the avatar element",
-      "conditions": "<code>size=\"small\"</code>"
-    },
-    "avatarMedium": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the avatar element",
-      "conditions": "<code>size=\"medium\"</code>"
-    },
-    "avatarColorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the avatar element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "avatarColorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the avatar element",
-      "conditions": "<code>color=\"secondary\"</code>"
-    },
-    "icon": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon element" },
-    "iconSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the icon element",
-      "conditions": "<code>size=\"small\"</code>"
-    },
-    "iconMedium": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the icon element",
-      "conditions": "<code>size=\"medium\"</code>"
-    },
-    "iconColorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the icon element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "iconColorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the icon element",
-      "conditions": "<code>color=\"secondary\"</code>"
-    },
-    "label": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the label `span` element"
-    },
-    "labelSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the label `span` element",
-      "conditions": "<code>size=\"small\"</code>"
+      "conditions": "<code>variant=\"solid\"</code>"
     },
-    "labelMedium": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the label `span` element",
-      "conditions": "<code>size=\"medium\"</code>"
-    },
-    "deleteIcon": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the deleteIcon element"
-    },
-    "deleteIconSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the deleteIcon element",
-      "conditions": "<code>size=\"small\"</code>"
-    },
-    "deleteIconMedium": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the deleteIcon element",
-      "conditions": "<code>size=\"medium\"</code>"
-    },
-    "deleteIconColorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the deleteIcon element",
-      "conditions": "<code>color=\"primary\"</code> and <code>variant=\"filled\"</code>"
-    },
-    "deleteIconColorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the deleteIcon element",
-      "conditions": "<code>color=\"secondary\"</code> and <code>variant=\"filled\"</code>"
-    },
-    "deleteIconOutlinedColorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the deleteIcon element",
-      "conditions": "<code>color=\"primary\"</code> and <code>variant=\"outlined\"</code>"
-    },
-    "deleteIconOutlinedColorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the deleteIcon element",
-      "conditions": "<code>color=\"secondary\"</code> and <code>variant=\"outlined\"</code>"
-    },
-    "deleteIconFilledColorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the deleteIcon element",
-      "conditions": "<code>color=\"primary\"</code> and <code>variant=\"filled\"</code>"
-    },
-    "deleteIconFilledColorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the deleteIcon element",
-      "conditions": "<code>color=\"secondary\"</code> and <code>variant=\"filled\"</code>"
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
     },
-    "focusVisible": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "keyboard focused"
+      "conditions": "<code>variant=\"outlined\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "label": "The component that renders the label.",
+    "action": "The component that renders the action.",
+    "startDecorator": "The component that renders the start decorator.",
+    "endDecorator": "The component that renders the end decorator."
   }
 }
diff --git a/docs/translations/api-docs/circular-progress/circular-progress.json b/docs/translations/api-docs/circular-progress/circular-progress.json
index 0536e31502071f..cfc511917f4a38 100644
--- a/docs/translations/api-docs/circular-progress/circular-progress.json
+++ b/docs/translations/api-docs/circular-progress/circular-progress.json
@@ -1,56 +1,108 @@
 {
   "componentDescription": "## ARIA\n\nIf the progress bar is describing the loading progress of a particular region of a page,\nyou should use `aria-describedby` to point to the progress bar, and set the `aria-busy`\nattribute to `true` on that region until it has finished loading.",
   "propDescriptions": {
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
-    "disableShrink": "If <code>true</code>, the shrink animation is disabled. This only works if variant is <code>indeterminate</code>.",
-    "size": "The size of the component. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g &#39;3rem&#39;.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "determinate": "The boolean to select a variant. Use indeterminate when there is no progress value.",
+    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "thickness": "The thickness of the circle.",
     "value": "The value of the progress indicator for the determinate variant. Value between 0 and 100.",
-    "variant": "The variant to use. Use indeterminate when there is no progress value."
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
+    "root": { "description": "Class name applied to the root element." },
     "determinate": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"determinate\"</code>"
+      "conditions": "<code>determinate</code> is true"
     },
-    "indeterminate": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"indeterminate\"</code>"
+    "svg": { "description": "Class name applied to {{nodeName}}.", "nodeName": "the svg element" },
+    "track": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the `track` element"
+    },
+    "progress": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the `progress` element"
     },
     "colorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"primary\"</code>"
     },
-    "colorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"secondary\"</code>"
+      "conditions": "<code>color=\"info\"</code>"
     },
-    "svg": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the svg element" },
-    "circle": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the `circle` svg path"
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
     },
-    "circleDeterminate": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the `circle` svg path",
-      "conditions": "<code>variant=\"determinate\"</code>"
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
     },
-    "circleIndeterminate": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the `circle` svg path",
-      "conditions": "<code>variant=\"indeterminate\"</code>"
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
     },
-    "circleDisableShrink": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the `circle` svg path",
-      "conditions": "<code>disableShrink={true}</code>"
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "svg": "The component that renders the svg.",
+    "track": "The component that renders the track.",
+    "progress": "The component that renders the progress."
   }
 }
diff --git a/docs/translations/api-docs/css-baseline/css-baseline.json b/docs/translations/api-docs/css-baseline/css-baseline.json
index 4ee0b2b962dff0..f2fcbd9425d184 100644
--- a/docs/translations/api-docs/css-baseline/css-baseline.json
+++ b/docs/translations/api-docs/css-baseline/css-baseline.json
@@ -2,7 +2,7 @@
   "componentDescription": "Kickstart an elegant, consistent, and simple baseline to build upon.",
   "propDescriptions": {
     "children": "You can wrap a node.",
-    "enableColorScheme": "Enable <code>color-scheme</code> CSS property to use <code>theme.palette.mode</code>. For more details, check out <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme\">https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme</a> For browser support, check out <a href=\"https://caniuse.com/?search=color-scheme\">https://caniuse.com/?search=color-scheme</a>"
+    "disableColorScheme": "Disable <code>color-scheme</code> CSS property.<br>For more details, check out <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme\">https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme</a> For browser support, check out <a href=\"https://caniuse.com/?search=color-scheme\">https://caniuse.com/?search=color-scheme</a>"
   },
   "classDescriptions": {}
 }
diff --git a/docs/translations/api-docs/divider/divider.json b/docs/translations/api-docs/divider/divider.json
index df91195b789978..82a3af78429e10 100644
--- a/docs/translations/api-docs/divider/divider.json
+++ b/docs/translations/api-docs/divider/divider.json
@@ -1,83 +1,36 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "absolute": "Absolutely position the element.",
     "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "flexItem": "If <code>true</code>, a vertical divider will have the correct height when used in flex container. (By default, a vertical divider will have a calculated height of <code>0px</code> if it is the child of a flex container.)",
-    "light": "If <code>true</code>, the divider will have a lighter color.",
+    "inset": "Class name applied to the divider to shrink or stretch the line based on the orientation.",
     "orientation": "The component orientation.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "textAlign": "The text alignment.",
-    "variant": "The variant to use."
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "absolute": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "root": { "description": "Class name applied to the root element." },
+    "horizontal": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>absolute={true}</code>"
-    },
-    "inset": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"inset\"</code>"
-    },
-    "fullWidth": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"fullWidth\"</code>"
-    },
-    "light": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>light={true}</code>"
-    },
-    "middle": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"middle\"</code>"
+      "conditions": "<code>orientation=\"horizontal\"</code>"
     },
     "vertical": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>orientation=\"vertical\"</code>"
     },
-    "flexItem": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>flexItem={true}</code>"
-    },
-    "withChildren": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "divider have text"
-    },
-    "withChildrenVertical": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "divider have text and <code>orientation=\"vertical\"</code>"
-    },
-    "textAlignRight": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "insetContext": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>textAlign=\"right\" orientation=\"horizontal\"</code>"
+      "conditions": "<code>inset=\"context\"</code>"
     },
-    "textAlignLeft": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "insetNone": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>textAlign=\"left\" orientation=\"horizontal\"</code>"
-    },
-    "wrapper": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the span children element",
-      "conditions": "<code>orientation=\"horizontal\"</code>"
-    },
-    "wrapperVertical": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the span children element",
-      "conditions": "<code>orientation=\"vertical\"</code>"
+      "conditions": "<code>inset=\"none\"</code>"
     }
-  }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/form-control/form-control.json b/docs/translations/api-docs/form-control/form-control.json
index 31c98e255dbb53..595dd81ec7ef20 100644
--- a/docs/translations/api-docs/form-control/form-control.json
+++ b/docs/translations/api-docs/form-control/form-control.json
@@ -1,37 +1,85 @@
 {
-  "componentDescription": "Provides context such as filled/focused/error/required for form inputs.\nRelying on the context provides high flexibility and ensures that the state always stays\nconsistent across the children of the `FormControl`.\nThis context is used by the following components:\n\n - FormLabel\n - FormHelperText\n - Input\n - InputLabel\n\nYou can find one composition example below and more going to [the demos](/material-ui/react-text-field/#components).\n\n```jsx\n<FormControl>\n  <InputLabel htmlFor=\"my-input\">Email address</InputLabel>\n  <Input id=\"my-input\" aria-describedby=\"my-helper-text\" />\n  <FormHelperText id=\"my-helper-text\">We'll never share your email.</FormHelperText>\n</FormControl>\n```\n\n⚠️ Only one `InputBase` can be used within a FormControl because it creates visual inconsistencies.\nFor instance, only one input can be focused at the same time, the state shouldn't be shared.",
+  "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "disabled": "If <code>true</code>, the label, input and helper text should be displayed in a disabled state.",
-    "error": "If <code>true</code>, the label is displayed in an error state.",
-    "focused": "If <code>true</code>, the component is displayed in focused state.",
-    "fullWidth": "If <code>true</code>, the component will take up the full width of its container.",
-    "hiddenLabel": "If <code>true</code>, the label is hidden. This is used to increase density for a <code>FilledInput</code>. Be sure to add <code>aria-label</code> to the <code>input</code> element.",
-    "margin": "If <code>dense</code> or <code>normal</code>, will adjust vertical spacing of this and contained components.",
-    "required": "If <code>true</code>, the label will indicate that the <code>input</code> is required.",
-    "size": "The size of the component.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The variant to use."
+    "disabled": "If <code>true</code>, the children are in disabled state.",
+    "error": "If <code>true</code>, the children will indicate an error.",
+    "orientation": "The content direction flow.",
+    "required": "If <code>true</code>, the user must specify a value for the input before the owning form can be submitted. If <code>true</code>, the asterisk appears on the FormLabel.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "marginNormal": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "root": { "description": "Class name applied to the root element." },
+    "disabled": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>margin=\"normal\"</code>"
+      "conditions": "<code>disabled={true}</code>"
     },
-    "marginDense": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "error": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>margin=\"dense\"</code>"
+      "conditions": "<code>error={true}</code>"
     },
-    "fullWidth": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>fullWidth={true}</code>"
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
+    },
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
+    },
+    "horizontal": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>orientation=\"horizontal\"</code>"
+    },
+    "vertical": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>orientation=\"vertical\"</code>"
     }
-  }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/form-helper-text/form-helper-text.json b/docs/translations/api-docs/form-helper-text/form-helper-text.json
index 5c305d80f923a9..3a039cdf5b968b 100644
--- a/docs/translations/api-docs/form-helper-text/form-helper-text.json
+++ b/docs/translations/api-docs/form-helper-text/form-helper-text.json
@@ -1,54 +1,12 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component.<br>If <code>&#39; &#39;</code> is provided, the component reserves one line height for displaying a future message.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "children": "The content of the component.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "disabled": "If <code>true</code>, the helper text should be displayed in a disabled state.",
-    "error": "If <code>true</code>, helper text should be displayed in an error state.",
-    "filled": "If <code>true</code>, the helper text should use filled classes key.",
-    "focused": "If <code>true</code>, the helper text should use focused classes key.",
-    "margin": "If <code>dense</code>, will adjust vertical spacing. This is normally obtained via context from FormControl.",
-    "required": "If <code>true</code>, the helper text should use required classes key.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The variant to use."
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
-  "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "error": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>error={true}</code>"
-    },
-    "disabled": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>disabled={true}</code>"
-    },
-    "sizeSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"small\"</code>"
-    },
-    "contained": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"filled\"</code> or <code>variant=\"outlined\"</code>"
-    },
-    "focused": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>focused={true}</code>"
-    },
-    "filled": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>filled={true}</code>"
-    },
-    "required": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>required={true}</code>"
-    }
-  }
+  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/form-label/form-label.json b/docs/translations/api-docs/form-label/form-label.json
index d4cb70dfdbaa70..4c11f8cccedcb5 100644
--- a/docs/translations/api-docs/form-label/form-label.json
+++ b/docs/translations/api-docs/form-label/form-label.json
@@ -2,51 +2,21 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "disabled": "If <code>true</code>, the label should be displayed in a disabled state.",
-    "error": "If <code>true</code>, the label is displayed in an error state.",
-    "filled": "If <code>true</code>, the label should use filled classes key.",
-    "focused": "If <code>true</code>, the input of this label is focused (used by <code>FormGroup</code> components).",
-    "required": "If <code>true</code>, the label will indicate that the <code>input</code> is required.",
+    "required": "The asterisk is added if required=<code>true</code>",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "colorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "the color is secondary"
-    },
-    "focused": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>focused={true}</code>"
-    },
-    "disabled": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>disabled={true}</code>"
-    },
-    "error": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>error={true}</code>"
-    },
-    "filled": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>filled={true}</code>"
-    },
-    "required": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>required={true}</code>"
-    },
+    "root": { "description": "Class name applied to the root element." },
     "asterisk": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the asterisk element"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "asterisk": "The component that renders the asterisk."
   }
 }
diff --git a/docs/translations/api-docs/icon-button/icon-button.json b/docs/translations/api-docs/icon-button/icon-button.json
index 627a0420deb213..423284b5d883f3 100644
--- a/docs/translations/api-docs/icon-button/icon-button.json
+++ b/docs/translations/api-docs/icon-button/icon-button.json
@@ -1,82 +1,99 @@
 {
-  "componentDescription": "Refer to the [Icons](/material-ui/icons/) section of the documentation\nregarding the available icon options.",
+  "componentDescription": "",
   "propDescriptions": {
-    "children": "The icon to display.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
+    "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "disableFocusRipple": "If <code>true</code>, the  keyboard focus ripple is disabled.",
-    "disableRipple": "If <code>true</code>, the ripple effect is disabled.<br>⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the <code>.Mui-focusVisible</code> class.",
-    "edge": "If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape).",
-    "size": "The size of the component. <code>small</code> is equivalent to the dense button styling.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+    "focusVisibleClassName": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/HEAD/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "edgeStart": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>edge=\"start\"</code>"
-    },
-    "edgeEnd": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>edge=\"end\"</code>"
-    },
-    "colorInherit": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"inherit\"</code>"
-    },
+    "root": { "description": "Class name applied to the root element." },
     "colorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"primary\"</code>"
     },
-    "colorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"secondary\"</code>"
+      "conditions": "<code>color=\"neutral\"</code>"
     },
-    "colorError": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"error\"</code>"
+      "conditions": "<code>color=\"danger\"</code>"
     },
     "colorInfo": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"info\"</code>"
     },
     "colorSuccess": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"success\"</code>"
     },
     "colorWarning": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"warning\"</code>"
     },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
+    },
+    "focusVisible": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "the button is keyboard focused"
+    },
     "disabled": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>disabled={true}</code>"
     },
-    "sizeSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"small\"</code>"
+      "conditions": "<code>size=\"sm\"</code>"
     },
-    "sizeMedium": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"medium\"</code>"
+      "conditions": "<code>size=\"md\"</code>"
     },
-    "sizeLarge": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"large\"</code>"
+      "conditions": "<code>size=\"lg\"</code>"
     }
-  }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/input/input.json b/docs/translations/api-docs/input/input.json
index 7b9e265eeed5c1..10f8256303ed62 100644
--- a/docs/translations/api-docs/input/input.json
+++ b/docs/translations/api-docs/input/input.json
@@ -1,101 +1,124 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "autoComplete": "This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it&#39;s more like an autofill. You can learn more about it <a href=\"https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill\">following the specification</a>.",
-    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>. The prop defaults to the value (<code>&#39;primary&#39;</code>) inherited from the parent FormControl component.",
-    "components": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead.",
-    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
-    "defaultValue": "The default value. Use when the component is not controlled.",
-    "disabled": "If <code>true</code>, the component is disabled. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
-    "disableUnderline": "If <code>true</code>, the <code>input</code> will not have an underline.",
-    "endAdornment": "End <code>InputAdornment</code> for this component.",
+    "className": "Class name applied to the root element.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "endDecorator": "Trailing adornment for this input.",
     "error": "If <code>true</code>, the <code>input</code> will indicate an error. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
-    "fullWidth": "If <code>true</code>, the <code>input</code> will take up the full width of its container.",
-    "id": "The id of the <code>input</code> element.",
-    "inputComponent": "The component used for the <code>input</code> element. Either a string to use a HTML element or a component.",
-    "inputProps": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes\">Attributes</a> applied to the <code>input</code> element.",
-    "inputRef": "Pass a ref to the <code>input</code> element.",
-    "margin": "If <code>dense</code>, will adjust vertical spacing. This is normally obtained via context from FormControl. The prop defaults to the value (<code>&#39;none&#39;</code>) inherited from the parent FormControl component.",
-    "maxRows": "Maximum number of rows to display when multiline option is set to true.",
-    "minRows": "Minimum number of rows to display when multiline option is set to true.",
-    "multiline": "If <code>true</code>, a <a href=\"/material-ui/react-textarea-autosize/\">TextareaAutosize</a> element is rendered.",
-    "name": "Name attribute of the <code>input</code> element.",
-    "onChange": "Callback fired when the value is changed.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLTextAreaElement | HTMLInputElement&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string).",
-    "placeholder": "The short hint displayed in the <code>input</code> before the user enters a value.",
-    "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).",
-    "required": "If <code>true</code>, the <code>input</code> element is required. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
-    "rows": "Number of rows to display when multiline option is set to true.",
-    "slotProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future.",
-    "slots": "The components used for each slot inside.<br>This prop is an alias for the <code>components</code> prop, which will be deprecated in the future.",
-    "startAdornment": "Start <code>InputAdornment</code> for this component.",
+    "fullWidth": "If <code>true</code>, the button will take up the full width of its container.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "startDecorator": "Leading adornment for this input.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "type": "Type of the <code>input</code> element. It should be <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types\">a valid HTML5 input type</a>.",
-    "value": "The value of the <code>input</code> element, required for a controlled component."
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
+    "root": { "description": "Class name applied to the root element." },
+    "input": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the input element"
+    },
     "formControl": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "the component is a descendant of <code>FormControl</code>"
     },
     "focused": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "the component is focused"
     },
     "disabled": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>disabled={true}</code>"
     },
-    "colorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "error": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "color secondary"
+      "conditions": "<code>error={true}</code>"
     },
-    "underline": {
-      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>disableUnderline={true}</code>"
+      "conditions": "<code>color=\"primary\"</code>"
     },
-    "error": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>error={true}</code>"
+      "conditions": "<code>color=\"neutral\"</code>"
     },
-    "sizeSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the input element",
-      "conditions": "<code>size=\"small\"</code>"
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
     },
-    "multiline": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>multiline={true}</code>"
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
+    },
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
     },
     "fullWidth": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>fullWidth={true}</code>"
     },
-    "input": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the input element" },
-    "inputSizeSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the input element",
-      "conditions": "<code>size=\"small\"</code>"
-    },
-    "inputMultiline": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the input element",
-      "conditions": "<code>multiline={true}</code>"
-    },
-    "inputTypeSearch": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the input element",
-      "conditions": "<code>type=\"search\"</code>"
-    }
+    "startDecorator": { "description": "Class name applied to the startDecorator element" },
+    "endDecorator": { "description": "Class name applied to the endDecorator element" }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "input": "The component that renders the input.",
+    "startDecorator": "The component that renders the start decorator.",
+    "endDecorator": "The component that renders the end decorator."
   }
 }
diff --git a/docs/translations/api-docs/linear-progress/linear-progress.json b/docs/translations/api-docs/linear-progress/linear-progress.json
index 002004676364fb..3060b04436a2cb 100644
--- a/docs/translations/api-docs/linear-progress/linear-progress.json
+++ b/docs/translations/api-docs/linear-progress/linear-progress.json
@@ -1,98 +1,94 @@
 {
   "componentDescription": "## ARIA\n\nIf the progress bar is describing the loading progress of a particular region of a page,\nyou should use `aria-describedby` to point to the progress bar, and set the `aria-busy`\nattribute to `true` on that region until it has finished loading.",
   "propDescriptions": {
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "determinate": "The boolean to select a variant. Use indeterminate when there is no progress value.",
+    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "value": "The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100.",
-    "valueBuffer": "The value for the buffer variant. Value between 0 and 100.",
-    "variant": "The variant to use. Use indeterminate or query when there is no progress value."
+    "thickness": "The thickness of the bar.",
+    "value": "The value of the progress indicator for the determinate variant. Value between 0 and 100.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "colorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root and bar2 element",
-      "conditions": "<code>color=\"primary\"</code>; bar2 if <code>variant=\"buffer\"</code>"
-    },
-    "colorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root and bar2 elements",
-      "conditions": "<code>color=\"secondary\"</code>; bar2 if <code>variant=\"buffer\"</code>"
-    },
+    "root": { "description": "Class name applied to the root element." },
     "determinate": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"determinate\"</code>"
+      "conditions": "<code>determinate</code> is true"
     },
-    "indeterminate": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"indeterminate\"</code>"
+      "conditions": "<code>color=\"primary\"</code>"
     },
-    "buffer": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"buffer\"</code>"
+      "conditions": "<code>color=\"neutral\"</code>"
     },
-    "query": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"query\"</code>"
+      "conditions": "<code>color=\"danger\"</code>"
     },
-    "dashed": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the additional bar element",
-      "conditions": "<code>variant=\"buffer\"</code>"
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
     },
-    "dashedColorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the additional bar element",
-      "conditions": "<code>variant=\"buffer\"</code> and <code>color=\"primary\"</code>"
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
     },
-    "dashedColorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the additional bar element",
-      "conditions": "<code>variant=\"buffer\"</code> and <code>color=\"secondary\"</code>"
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
     },
-    "bar": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the layered bar1 and bar2 elements"
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
     },
-    "barColorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the bar elements",
-      "conditions": "<code>color=\"primary\"</code>; bar2 if <code>variant</code> not \"buffer\""
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
     },
-    "barColorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the bar elements",
-      "conditions": "<code>color=\"secondary\"</code>; bar2 if <code>variant</code> not \"buffer\""
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
     },
-    "bar1Indeterminate": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the bar1 element",
-      "conditions": "<code>variant=\"indeterminate or query\"</code>"
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
     },
-    "bar1Determinate": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the bar1 element",
-      "conditions": "<code>variant=\"determinate\"</code>"
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
     },
-    "bar1Buffer": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the bar1 element",
-      "conditions": "<code>variant=\"buffer\"</code>"
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
     },
-    "bar2Indeterminate": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the bar2 element",
-      "conditions": "<code>variant=\"indeterminate or query\"</code>"
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
     },
-    "bar2Buffer": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the bar2 element",
-      "conditions": "<code>variant=\"buffer\"</code>"
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
     }
-  }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/link/link.json b/docs/translations/api-docs/link/link.json
index cad1c837105e1b..782e727b76dc4f 100644
--- a/docs/translations/api-docs/link/link.json
+++ b/docs/translations/api-docs/link/link.json
@@ -2,40 +2,153 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "color": "The color of the link.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.<br>⚠️ <a href=\"/material-ui/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
+    "color": "The color of the link. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "disabled": "If <code>true</code>, the component is disabled.",
+    "endDecorator": "Element placed after the children.",
+    "level": "Applies the theme typography styles.",
+    "overlay": "If <code>true</code>, the ::after pseudo element is added to cover the area of interaction. The parent of the overlay Link should have <code>relative</code> CSS position.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "startDecorator": "Element placed before the children.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "TypographyClasses": "<code>classes</code> prop applied to the <a href=\"/material-ui/api/typography/\"><code>Typography</code></a> element.",
+    "textColor": "The system color.",
     "underline": "Controls when the link should have an underline.",
-    "variant": "Applies the theme typography styles."
+    "variant": "Applies the theme link styles. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
+    "root": { "description": "Class name applied to the root element." },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "disabled": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disabled={true}</code>"
+    },
+    "focusVisible": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "the link is keyboard focused"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
+    },
     "underlineNone": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>underline=\"none\"</code>"
     },
     "underlineHover": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>underline=\"hover\"</code>"
     },
     "underlineAlways": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>underline=\"always\"</code>"
     },
-    "button": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "h1": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>component=\"button\"</code>"
+      "conditions": "<code>level=\"h1\"</code>"
     },
-    "focusVisible": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+    "h2": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "the link is keyboard focused"
-    }
+      "conditions": "<code>level=\"h2\"</code>"
+    },
+    "h3": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>level=\"h3\"</code>"
+    },
+    "h4": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>level=\"h4\"</code>"
+    },
+    "h5": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>level=\"h5\"</code>"
+    },
+    "h6": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>level=\"h6\"</code>"
+    },
+    "body1": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>level=\"body1\"</code>"
+    },
+    "body2": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>level=\"body2\"</code>"
+    },
+    "body3": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>level=\"body3\"</code>"
+    },
+    "startDecorator": { "description": "Class name applied to the startDecorator element" },
+    "endDecorator": { "description": "Class name applied to the endDecorator element" }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "startDecorator": "The component that renders the start decorator.",
+    "endDecorator": "The component that renders the end decorator."
   }
 }
diff --git a/docs/translations/api-docs/list-divider/list-divider.json b/docs/translations/api-docs/list-divider/list-divider.json
new file mode 100644
index 00000000000000..04cebc2490afa4
--- /dev/null
+++ b/docs/translations/api-docs/list-divider/list-divider.json
@@ -0,0 +1,41 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "children": "The content of the component.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "inset": "The empty space on the side(s) of the divider in a vertical list.<br>For horizontal list (the nearest parent List has <code>row</code> prop set to <code>true</code>), only <code>inset=&quot;gutter&quot;</code> affects the list divider.",
+    "orientation": "The component orientation.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+  },
+  "classDescriptions": {
+    "root": { "description": "Class name applied to the root element." },
+    "insetGutter": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>inset=\"gutter\"</code>"
+    },
+    "insetStartDecorator": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>inset=\"startDecorator\"</code>"
+    },
+    "insetStartContent": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>inset=\"startContent\"</code>"
+    },
+    "horizontal": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>orientation=\"horizontal\"</code>"
+    },
+    "vertical": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>orientation=\"vertical\"</code>"
+    }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
+}
diff --git a/docs/translations/api-docs/list-item-button/list-item-button.json b/docs/translations/api-docs/list-item-button/list-item-button.json
index 8341f6efc9a6c4..9c11527415767f 100644
--- a/docs/translations/api-docs/list-item-button/list-item-button.json
+++ b/docs/translations/api-docs/list-item-button/list-item-button.json
@@ -1,54 +1,101 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "alignItems": "Defines the <code>align-items</code> style property.",
+    "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
     "autoFocus": "If <code>true</code>, the list item is focused during the first mount. Focus will also be triggered if the value changes from false to true.",
-    "children": "The content of the component if a <code>ListItemSecondaryAction</code> is used it must be the last child.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "children": "The content of the component.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "dense": "If <code>true</code>, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "disableGutters": "If <code>true</code>, the left and right padding is removed.",
-    "divider": "If <code>true</code>, a 1px light border is added to the bottom of the list item.",
     "focusVisibleClassName": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/HEAD/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed.",
-    "selected": "Use to apply selected styling.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+    "orientation": "The content direction flow.",
+    "selected": "If <code>true</code>, the component is selected.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
+    "root": { "description": "Class name applied to the root element." },
+    "vertical": {
+      "description": "Class name applied to {{nodeName}}, {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "if <code>orientation=\"vertical\"</code>"
+    },
+    "horizontal": {
+      "description": "Class name applied to {{nodeName}}, {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "if <code>orientation=\"horizontal\"</code>"
+    },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"context\"</code>"
+    },
     "focusVisible": {
       "description": "State class applied to {{nodeName}}.",
       "nodeName": "the `component`'s `focusVisibleClassName` prop"
     },
-    "dense": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the component element",
-      "conditions": "dense"
-    },
-    "alignItemsFlexStart": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the component element",
-      "conditions": "<code>alignItems=\"flex-start\"</code>"
-    },
     "disabled": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the inner `component` element",
       "conditions": "<code>disabled={true}</code>"
     },
-    "divider": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the inner `component` element",
-      "conditions": "<code>divider={true}</code>"
-    },
-    "gutters": {
-      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
-      "nodeName": "the inner `component` element",
-      "conditions": "<code>disableGutters={true}</code>"
-    },
     "selected": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>selected={true}</code>"
+    },
+    "variantPlain": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantSoft": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantOutlined": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSolid": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
     }
-  }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/list-item-content/list-item-content.json b/docs/translations/api-docs/list-item-content/list-item-content.json
new file mode 100644
index 00000000000000..3a039cdf5b968b
--- /dev/null
+++ b/docs/translations/api-docs/list-item-content/list-item-content.json
@@ -0,0 +1,12 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "children": "The content of the component.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+  },
+  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
+  "slotDescriptions": { "root": "The component that renders the root." }
+}
diff --git a/docs/translations/api-docs/list-item-decorator/list-item-decorator.json b/docs/translations/api-docs/list-item-decorator/list-item-decorator.json
new file mode 100644
index 00000000000000..3a039cdf5b968b
--- /dev/null
+++ b/docs/translations/api-docs/list-item-decorator/list-item-decorator.json
@@ -0,0 +1,12 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "children": "The content of the component.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+  },
+  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
+  "slotDescriptions": { "root": "The component that renders the root." }
+}
diff --git a/docs/translations/api-docs/list-item/list-item.json b/docs/translations/api-docs/list-item/list-item.json
index 00611759e2cd21..7caf906ef0a3bb 100644
--- a/docs/translations/api-docs/list-item/list-item.json
+++ b/docs/translations/api-docs/list-item/list-item.json
@@ -1,86 +1,104 @@
 {
-  "componentDescription": "Uses an additional container component if `ListItemSecondaryAction` is the last child.",
+  "componentDescription": "",
   "propDescriptions": {
-    "alignItems": "Defines the <code>align-items</code> style property.",
-    "autoFocus": "If <code>true</code>, the list item is focused during the first mount. Focus will also be triggered if the value changes from false to true.",
-    "button": "If <code>true</code>, the list item is a button (using <code>ButtonBase</code>). Props intended for <code>ButtonBase</code> can then be applied to <code>ListItem</code>.",
-    "children": "The content of the component if a <code>ListItemSecondaryAction</code> is used it must be the last child.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "children": "The content of the component.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "components": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead.",
-    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
-    "ContainerComponent": "The container component used when a <code>ListItemSecondaryAction</code> is the last child.<br>⚠️ <a href=\"/material-ui/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
-    "ContainerProps": "Props applied to the container component if used.",
-    "dense": "If <code>true</code>, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component.",
-    "disabled": "If <code>true</code>, the component is disabled.",
-    "disableGutters": "If <code>true</code>, the left and right padding is removed.",
-    "disablePadding": "If <code>true</code>, all padding is removed.",
-    "divider": "If <code>true</code>, a 1px light border is added to the bottom of the list item.",
-    "secondaryAction": "The element to display at the end of ListItem.",
-    "selected": "Use to apply selected styling.",
-    "slotProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future.",
-    "slots": "The components used for each slot inside.<br>This prop is an alias for the <code>components</code> prop, which will be deprecated in the future.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+    "endAction": "The element to display at the end of ListItem.",
+    "nested": "If <code>true</code>, the component can contain NestedList.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "startAction": "The element to display at the start of ListItem.",
+    "sticky": "If <code>true</code>, the component has sticky position (with top = 0).",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": {
-      "description": "Styles applied to {{nodeName}}. May be wrapped by a `container`.",
-      "nodeName": "the (normally root) `component` element"
+    "root": { "description": "Class name applied to the root element." },
+    "startAction": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the component element",
+      "conditions": "<code>startAction</code> element is provided"
     },
-    "container": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the container element",
-      "conditions": "<code>children</code> includes <code>ListItemSecondaryAction</code>"
+    "endAction": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the component element",
+      "conditions": "<code>endAction</code> element is provided"
     },
-    "focusVisible": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the `component`'s `focusVisibleClassName` prop",
-      "conditions": "<code>button={true}</code>"
+    "nested": {
+      "description": "Class name applied to {{nodeName}}, {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "if nested={true}"
     },
-    "dense": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the component element",
-      "conditions": "dense"
+    "nesting": {
+      "description": "Class name applied to {{nodeName}}, {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "if it is under a nested list item"
     },
-    "alignItemsFlexStart": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the component element",
-      "conditions": "<code>alignItems=\"flex-start\"</code>"
+    "sticky": {
+      "description": "Class name applied to {{nodeName}}, {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "if sticky={true}"
     },
-    "disabled": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the inner `component` element",
-      "conditions": "<code>disabled={true}</code>"
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
     },
-    "divider": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the inner `component` element",
-      "conditions": "<code>divider={true}</code>"
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
     },
-    "gutters": {
-      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
-      "nodeName": "the inner `component` element",
-      "conditions": "<code>disableGutters={true}</code>"
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
     },
-    "padding": {
-      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>disablePadding={true}</code>"
+      "conditions": "<code>color=\"info\"</code>"
     },
-    "button": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the inner `component` element",
-      "conditions": "<code>button={true}</code>"
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
     },
-    "secondaryAction": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the component element",
-      "conditions": "<code>children</code> includes <code>ListItemSecondaryAction</code>"
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
     },
-    "selected": {
+    "variantPlain": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>selected={true}</code>"
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantSoft": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantOutlined": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSolid": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "startAction": "The component that renders the start action.",
+    "endAction": "The component that renders the end action."
   }
 }
diff --git a/docs/translations/api-docs/list-subheader/list-subheader.json b/docs/translations/api-docs/list-subheader/list-subheader.json
index 33932ec54d3552..45720b6993a8f0 100644
--- a/docs/translations/api-docs/list-subheader/list-subheader.json
+++ b/docs/translations/api-docs/list-subheader/list-subheader.json
@@ -2,40 +2,76 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "disableGutters": "If <code>true</code>, the List Subheader will not have gutters.",
-    "disableSticky": "If <code>true</code>, the List Subheader will not stick to the top during scroll.",
-    "inset": "If <code>true</code>, the List Subheader is indented.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sticky": "If <code>true</code>, the component has sticky position (with top = 0).",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
+    "root": { "description": "Class name applied to the root element." },
+    "sticky": {
+      "description": "Class name applied to {{nodeName}}, {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "if sticky={true}"
+    },
     "colorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"primary\"</code>"
     },
-    "colorInherit": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"inherit\"</code>"
+      "conditions": "<code>color=\"neutral\"</code>"
     },
-    "gutters": {
-      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
-      "nodeName": "the inner `component` element",
-      "conditions": "<code>disableGutters={true}</code>"
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
     },
-    "inset": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>inset={true}</code>"
+      "conditions": "<code>color=\"info\"</code>"
     },
-    "sticky": {
-      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>disableSticky={true}</code>"
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantSoft": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantOutlined": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSolid": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
     }
-  }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/list/list.json b/docs/translations/api-docs/list/list.json
index f90e8bf1693b4a..1df1151c16e80f 100644
--- a/docs/translations/api-docs/list/list.json
+++ b/docs/translations/api-docs/list/list.json
@@ -2,29 +2,68 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "dense": "If <code>true</code>, compact vertical padding designed for keyboard and mouse input is used for the list and list items. The prop is available to descendant components as the <code>dense</code> context.",
-    "disablePadding": "If <code>true</code>, vertical padding is removed from the list.",
-    "subheader": "The content of the subheader, normally <code>ListSubheader</code>.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+    "orientation": "The component orientation.",
+    "size": "The size of the component (affect other nested list* components). To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>.",
+    "wrap": "Only for horizontal list. If <code>true</code>, the list sets the flex-wrap to &quot;wrap&quot; and adjust margin to have gap-like behavior (will move to <code>gap</code> in the future)."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "padding": {
-      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
+    "root": { "description": "Classname applied to the root element." },
+    "nesting": {
+      "description": "Classname applied to the root element if wrapped with nested context."
+    },
+    "scoped": { "description": "Classname applied to the root element if `scoped` is true." },
+    "sizeSm": { "description": "Classname applied to the root element if `size=\"sm\"`." },
+    "sizeMd": { "description": "Classname applied to the root element if `size=\"md\"`." },
+    "sizeLg": { "description": "Classname applied to the root element if `size=\"lg\"`." },
+    "colorPrimary": {
+      "description": "Classname applied to the root element if `color=\"primary\"`."
+    },
+    "colorNeutral": {
+      "description": "Classname applied to the root element if `color=\"neutral\"`."
+    },
+    "colorDanger": {
+      "description": "Classname applied to the root element if `color=\"danger\"`."
+    },
+    "colorInfo": { "description": "Classname applied to the root element if `color=\"info\"`." },
+    "colorSuccess": {
+      "description": "Classname applied to the root element if `color=\"success\"`."
+    },
+    "colorWarning": {
+      "description": "Classname applied to the root element if `color=\"warning\"`."
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>disablePadding={true}</code>"
+      "conditions": "color inversion is triggered"
     },
-    "dense": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantPlain": {
+      "description": "Classname applied to the root element if `variant=\"plain\"`."
+    },
+    "variantOutlined": {
+      "description": "Classname applied to the root element if `variant=\"outlined\"`."
+    },
+    "variantSoft": {
+      "description": "Classname applied to the root element if `variant=\"soft\"`."
+    },
+    "variantSolid": {
+      "description": "Classname applied to the root element if `variant=\"solid\"`."
+    },
+    "horizontal": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "dense"
+      "conditions": "<code>orientation=\"horizontal\"</code>"
     },
-    "subheader": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "vertical": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "a <code>subheader</code> is provided"
+      "conditions": "<code>orientation=\"vertical\"</code>"
     }
-  }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/menu-item/menu-item.json b/docs/translations/api-docs/menu-item/menu-item.json
index 007092738de45b..9e0532aa4ded04 100644
--- a/docs/translations/api-docs/menu-item/menu-item.json
+++ b/docs/translations/api-docs/menu-item/menu-item.json
@@ -1,48 +1,85 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "autoFocus": "If <code>true</code>, the list item is focused during the first mount. Focus will also be triggered if the value changes from false to true.",
     "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "dense": "If <code>true</code>, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent Menu component.",
-    "disableGutters": "If <code>true</code>, the left and right padding is removed.",
-    "divider": "If <code>true</code>, a 1px light border is added to the bottom of the menu item.",
-    "focusVisibleClassName": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/HEAD/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "orientation": "The content direction flow.",
     "selected": "If <code>true</code>, the component is selected.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
+    "root": { "description": "Class name applied to the root element." },
     "focusVisible": {
+      "description": "State class applied to {{nodeName}}.",
+      "nodeName": "the `component`'s `focusVisibleClassName` prop"
+    },
+    "disabled": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the inner `component` element",
+      "conditions": "<code>disabled={true}</code>"
+    },
+    "selected": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "keyboard focused"
+      "conditions": "<code>selected={true}</code>"
     },
-    "dense": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "dense"
+      "conditions": "<code>color=\"primary\"</code>"
     },
-    "disabled": {
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>disabled={true}</code>"
+      "conditions": "<code>variant=\"plain\"</code>"
     },
-    "divider": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantSoft": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>divider={true}</code>"
+      "conditions": "<code>variant=\"soft\"</code>"
     },
-    "gutters": {
-      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
-      "nodeName": "the inner `component` element",
-      "conditions": "<code>disableGutters={true}</code>"
+    "variantOutlined": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
     },
-    "selected": {
+    "variantSolid": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>selected={true}</code>"
+      "conditions": "<code>variant=\"solid\"</code>"
     }
-  }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/menu-list/menu-list.json b/docs/translations/api-docs/menu-list/menu-list.json
index 95d35092ebacc3..6f2cb672147c2e 100644
--- a/docs/translations/api-docs/menu-list/menu-list.json
+++ b/docs/translations/api-docs/menu-list/menu-list.json
@@ -1,29 +1,65 @@
 {
-  "componentDescription": "A permanently displayed menu following https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/.\nIt's exposed to help customization of the [`Menu`](/material-ui/api/menu/) component if you\nuse it separately you need to move focus into the component manually. Once\nthe focus is placed inside the component it is fully keyboard accessible.",
+  "componentDescription": "",
   "propDescriptions": {
-    "autoFocus": "If <code>true</code>, will focus the <code>[role=&quot;menu&quot;]</code> container and move into tab order.",
-    "autoFocusItem": "If <code>true</code>, will focus the first menuitem if <code>variant=&quot;menu&quot;</code> or selected item if <code>variant=&quot;selectedMenu&quot;</code>.",
-    "children": "MenuList contents, normally <code>MenuItem</code>s.",
-    "disabledItemsFocusable": "If <code>true</code>, will allow focus on disabled items.",
-    "disableListWrap": "If <code>true</code>, the menu items will not wrap focus.",
-    "variant": "The variant to use. Use <code>menu</code> to prevent selected items from impacting the initial focus and the vertical alignment relative to the anchor element."
+    "actions": "A ref with imperative actions. It allows to select the first or last menu item.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "size": "The size of the component (affect other nested list* components because the <code>Menu</code> inherits <code>List</code>). To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "padding": {
-      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
+    "root": { "description": "Class name applied to the root element." },
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>disablePadding={true}</code>"
+      "conditions": "<code>size=\"sm\"</code>"
     },
-    "dense": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "dense"
+      "conditions": "<code>size=\"md\"</code>"
     },
-    "subheader": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "a <code>subheader</code> is provided"
+      "conditions": "<code>size=\"lg\"</code>"
+    },
+    "colorPrimary": {
+      "description": "Classname applied to the root element if `color=\"primary\"`."
+    },
+    "colorNeutral": {
+      "description": "Classname applied to the root element if `color=\"neutral\"`."
+    },
+    "colorDanger": {
+      "description": "Classname applied to the root element if `color=\"danger\"`."
+    },
+    "colorInfo": { "description": "Classname applied to the root element if `color=\"info\"`." },
+    "colorSuccess": {
+      "description": "Classname applied to the root element if `color=\"success\"`."
+    },
+    "colorWarning": {
+      "description": "Classname applied to the root element if `color=\"warning\"`."
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "Classname applied to the root element if `variant=\"plain\"`."
+    },
+    "variantOutlined": {
+      "description": "Classname applied to the root element if `variant=\"outlined\"`."
+    },
+    "variantSoft": {
+      "description": "Classname applied to the root element if `variant=\"soft\"`."
+    },
+    "variantSolid": {
+      "description": "Classname applied to the root element if `variant=\"solid\"`."
     }
-  }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/menu/menu.json b/docs/translations/api-docs/menu/menu.json
index 6880082fd0f57a..22900511139739 100644
--- a/docs/translations/api-docs/menu/menu.json
+++ b/docs/translations/api-docs/menu/menu.json
@@ -1,29 +1,62 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "anchorEl": "An HTML element, or a function that returns one. It&#39;s used to set the position of the menu.",
-    "autoFocus": "If <code>true</code> (Default) will focus the <code>[role=&quot;menu&quot;]</code> if no focusable child is found. Disabled children are not focusable. If you set this prop to <code>false</code> focus will be placed on the parent modal container. This has severe accessibility implications and should only be considered if you manage focus otherwise.",
-    "children": "Menu contents, normally <code>MenuItem</code>s.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "disableAutoFocusItem": "When opening the menu will not focus the active item but the <code>[role=&quot;menu&quot;]</code> unless <code>autoFocus</code> is also set to <code>false</code>. Not using the default means not following WAI-ARIA authoring practices. Please be considerate about possible accessibility implications.",
-    "MenuListProps": "Props applied to the <a href=\"/material-ui/api/menu-list/\"><code>MenuList</code></a> element.",
-    "onClose": "Callback fired when the component requests to be closed.<br><br><strong>Signature:</strong><br><code>function(event: object, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>reason:</em> Can be: <code>&quot;escapeKeyDown&quot;</code>, <code>&quot;backdropClick&quot;</code>, <code>&quot;tabKeyDown&quot;</code>.",
-    "open": "If <code>true</code>, the component is shown.",
-    "PopoverClasses": "<code>classes</code> prop applied to the <a href=\"/material-ui/api/popover/\"><code>Popover</code></a> element.",
+    "actions": "A ref with imperative actions. It allows to select the first or last menu item.",
+    "anchorEl": "An HTML element, <a href=\"https://popper.js.org/docs/v2/virtual-elements/\">virtualElement</a>, or a function that returns either. It&#39;s used to set the position of the popper. The return value will passed as the reference object of the Popper instance.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "disablePortal": "The <code>children</code> will be under the DOM hierarchy of the parent component.",
+    "invertedColors": "If <code>true</code>, the children with an implicit color prop invert their colors to match the component&#39;s variant and color.",
+    "keepMounted": "Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Popper.",
+    "modifiers": "Popper.js is based on a &quot;plugin-like&quot; architecture, most of its features are fully encapsulated &quot;modifiers&quot;.<br>A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks. To learn how to create a modifier, <a href=\"https://popper.js.org/docs/v2/modifiers/\">read the modifiers documentation</a>.",
+    "onClose": "Triggered when focus leaves the menu and the menu should close.",
+    "open": "Controls whether the menu is displayed.",
+    "size": "The size of the component (affect other nested list* components because the <code>Menu</code> inherits <code>List</code>). To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "transitionDuration": "The length of the transition in <code>ms</code>, or &#39;auto&#39;",
-    "TransitionProps": "Props applied to the transition element. By default, the element is based on this <a href=\"http://reactcommunity.org/react-transition-group/transition/\"><code>Transition</code></a> component.",
-    "variant": "The variant to use. Use <code>menu</code> to prevent selected items from impacting the initial focus."
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "paper": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Paper component"
-    },
-    "list": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the List component via `MenuList`"
-    }
-  }
+    "root": { "description": "Classname applied to the root element." },
+    "listbox": { "description": "Classname applied to the listbox element." },
+    "expanded": { "description": "Classname applied to the root element when the menu open." },
+    "colorPrimary": {
+      "description": "Classname applied to the root element if `color=\"primary\"`."
+    },
+    "colorNeutral": {
+      "description": "Classname applied to the root element if `color=\"neutral\"`."
+    },
+    "colorDanger": {
+      "description": "Classname applied to the root element if `color=\"danger\"`."
+    },
+    "colorInfo": { "description": "Classname applied to the root element if `color=\"info\"`." },
+    "colorSuccess": {
+      "description": "Classname applied to the root element if `color=\"success\"`."
+    },
+    "colorWarning": {
+      "description": "Classname applied to the root element if `color=\"warning\"`."
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "Classname applied to the root element if `variant=\"plain\"`."
+    },
+    "variantOutlined": {
+      "description": "Classname applied to the root element if `variant=\"outlined\"`."
+    },
+    "variantSoft": {
+      "description": "Classname applied to the root element if `variant=\"soft\"`."
+    },
+    "variantSolid": {
+      "description": "Classname applied to the root element if `variant=\"solid\"`."
+    },
+    "sizeSm": { "description": "Classname applied to the root element if `size=\"sm\"`." },
+    "sizeMd": { "description": "Classname applied to the root element if `size=\"md\"`." },
+    "sizeLg": { "description": "Classname applied to the root element if `size=\"lg\"`." }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/modal-close/modal-close.json b/docs/translations/api-docs/modal-close/modal-close.json
new file mode 100644
index 00000000000000..b0a6990f0afc30
--- /dev/null
+++ b/docs/translations/api-docs/modal-close/modal-close.json
@@ -0,0 +1,86 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+  },
+  "classDescriptions": {
+    "root": { "description": "Class name applied to the root element." },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
+    },
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
+    },
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
+    }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
+}
diff --git a/docs/translations/api-docs/modal-dialog/modal-dialog.json b/docs/translations/api-docs/modal-dialog/modal-dialog.json
new file mode 100644
index 00000000000000..de938f84650863
--- /dev/null
+++ b/docs/translations/api-docs/modal-dialog/modal-dialog.json
@@ -0,0 +1,98 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "children": "The content of the component.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "layout": "The layout of the dialog",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+  },
+  "classDescriptions": {
+    "root": { "description": "Class name applied to the root element." },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
+    },
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
+    },
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
+    },
+    "layoutCenter": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>layout=\"center\"</code>"
+    },
+    "layoutFullscreen": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>layout=\"fullscreen\"</code>"
+    }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
+}
diff --git a/docs/translations/api-docs/modal-overflow/modal-overflow.json b/docs/translations/api-docs/modal-overflow/modal-overflow.json
new file mode 100644
index 00000000000000..131bb9e1a8c9cd
--- /dev/null
+++ b/docs/translations/api-docs/modal-overflow/modal-overflow.json
@@ -0,0 +1,8 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+  },
+  "classDescriptions": { "root": { "description": "Styles applied to the root element." } },
+  "slotDescriptions": { "root": "The component that renders the root." }
+}
diff --git a/docs/translations/api-docs/modal/modal.json b/docs/translations/api-docs/modal/modal.json
index 97b62347bb30e4..cab58d8e952fe4 100644
--- a/docs/translations/api-docs/modal/modal.json
+++ b/docs/translations/api-docs/modal/modal.json
@@ -1,14 +1,8 @@
 {
-  "componentDescription": "Modal is a lower-level construct that is leveraged by the following components:\n\n- [Dialog](/material-ui/api/dialog/)\n- [Drawer](/material-ui/api/drawer/)\n- [Menu](/material-ui/api/menu/)\n- [Popover](/material-ui/api/popover/)\n\nIf you are creating a modal dialog, you probably want to use the [Dialog](/material-ui/api/dialog/) component\nrather than directly using Modal.\n\nThis component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).",
+  "componentDescription": "",
   "propDescriptions": {
-    "BackdropComponent": "A backdrop component. This prop enables custom backdrop rendering.",
-    "BackdropProps": "Props applied to the <a href=\"/material-ui/api/backdrop/\"><code>Backdrop</code></a> element.",
     "children": "A single child content element.<br>⚠️ <a href=\"/material-ui/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "closeAfterTransition": "When set to true the Modal waits until a nested Transition is completed before closing.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "components": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead.",
-    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
     "container": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time.",
     "disableAutoFocus": "If <code>true</code>, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the <code>disableAutoFocus</code> prop.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers.",
     "disableEnforceFocus": "If <code>true</code>, the modal will not prevent focus from leaving the modal while open.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers.",
@@ -18,23 +12,21 @@
     "disableScrollLock": "Disable the scroll lock behavior.",
     "hideBackdrop": "If <code>true</code>, the backdrop is not rendered.",
     "keepMounted": "Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Modal.",
-    "onBackdropClick": "Callback fired when the backdrop is clicked.",
-    "onClose": "Callback fired when the component requests to be closed. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>.<br><br><strong>Signature:</strong><br><code>function(event: object, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>reason:</em> Can be: <code>&quot;escapeKeyDown&quot;</code>, <code>&quot;backdropClick&quot;</code>.",
+    "onClose": "Callback fired when the component requests to be closed. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>.<br><br><strong>Signature:</strong><br><code>function(event: object, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>reason:</em> Can be: <code>&quot;escapeKeyDown&quot;</code>, <code>&quot;backdropClick&quot;</code>, <code>&quot;closeClick&quot;</code>.",
     "open": "If <code>true</code>, the component is shown.",
-    "slotProps": "The props used for each slot inside the Modal.",
-    "slots": "The components used for each slot inside the Modal. Either a string to use a HTML element or a component.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
     "root": { "description": "Class name applied to the root element." },
-    "hidden": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "the <code>Modal</code> has exited"
-    },
     "backdrop": {
       "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the backdrop element"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "backdrop": "The component that renders the backdrop."
   }
 }
diff --git a/docs/translations/api-docs/option-group/option-group.json b/docs/translations/api-docs/option-group/option-group.json
new file mode 100644
index 00000000000000..a6f2a32d74ed40
--- /dev/null
+++ b/docs/translations/api-docs/option-group/option-group.json
@@ -0,0 +1,28 @@
+{
+  "componentDescription": "An unstyled option group to be used within a Select.",
+  "propDescriptions": {
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "disabled": "If <code>true</code> all the options in the group will be disabled.",
+    "label": "The human-readable description of the group.",
+    "slotProps": "The props used for each slot inside the Input.",
+    "slots": "The components used for each slot inside the OptionGroup. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
+  },
+  "classDescriptions": {
+    "root": { "description": "Class name applied to the root element." },
+    "disabled": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root `li` element",
+      "conditions": "<code>disabled={true}</code>"
+    },
+    "label": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the label element"
+    },
+    "list": { "description": "Class name applied to {{nodeName}}.", "nodeName": "the list element" }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "label": "The component that renders the label.",
+    "list": "The component that renders the list."
+  }
+}
diff --git a/docs/translations/api-docs/option/option.json b/docs/translations/api-docs/option/option.json
new file mode 100644
index 00000000000000..a38126f4d6801c
--- /dev/null
+++ b/docs/translations/api-docs/option/option.json
@@ -0,0 +1,89 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "children": "The content of the component.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "disabled": "If <code>true</code>, the component is disabled.",
+    "label": "A text representation of the option&#39;s content. Used for keyboard text navigation matching.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "value": "The option value.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+  },
+  "classDescriptions": {
+    "root": { "description": "Class name applied to the root element." },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"context\"</code>"
+    },
+    "disabled": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disabled={true}</code>"
+    },
+    "selected": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "the option is selected"
+    },
+    "highlighted": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "the option is highlighted"
+    },
+    "variantPlain": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantSoft": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantOutlined": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSolid": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
+    }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
+}
diff --git a/docs/translations/api-docs/popper/popper.json b/docs/translations/api-docs/popper/popper.json
index b6533b390e8cf1..2fee1eb3dd079f 100644
--- a/docs/translations/api-docs/popper/popper.json
+++ b/docs/translations/api-docs/popper/popper.json
@@ -1,11 +1,10 @@
 {
-  "componentDescription": "",
+  "componentDescription": "Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v2/) for positioning.",
   "propDescriptions": {
     "anchorEl": "An HTML element, <a href=\"https://popper.js.org/docs/v2/virtual-elements/\">virtualElement</a>, or a function that returns either. It&#39;s used to set the position of the popper. The return value will passed as the reference object of the Popper instance.",
     "children": "Popper render function or node.",
-    "components": "The components used for each slot inside the Popper. Either a string to use a HTML element or a component.",
-    "componentsProps": "The props used for each slot inside the Popper.",
     "container": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time.",
+    "direction": "Direction of the text.",
     "disablePortal": "The <code>children</code> will be under the DOM hierarchy of the parent component.",
     "keepMounted": "Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Popper.",
     "modifiers": "Popper.js is based on a &quot;plugin-like&quot; architecture, most of its features are fully encapsulated &quot;modifiers&quot;.<br>A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks. To learn how to create a modifier, <a href=\"https://popper.js.org/docs/v2/modifiers/\">read the modifiers documentation</a>.",
@@ -14,8 +13,7 @@
     "popperOptions": "Options provided to the <a href=\"https://popper.js.org/docs/v2/constructors/#options\"><code>Popper.js</code></a> instance.",
     "popperRef": "A ref that points to the used popper instance.",
     "slotProps": "The props used for each slot inside the Popper.",
-    "slots": "The components used for each slot inside the Popper. Either a string to use a HTML element or a component.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "slots": "The components used for each slot inside the Popper. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
     "transition": "Help supporting a react-transition-group/Transition component."
   },
   "classDescriptions": {}
diff --git a/docs/translations/api-docs/radio-group/radio-group.json b/docs/translations/api-docs/radio-group/radio-group.json
index f6aaf9b25f7001..eef957bb749b2b 100644
--- a/docs/translations/api-docs/radio-group/radio-group.json
+++ b/docs/translations/api-docs/radio-group/radio-group.json
@@ -1,23 +1,99 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component.",
+    "className": "Class name applied to the root element.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "defaultValue": "The default value. Use when the component is not controlled.",
+    "disableIcon": "The radio&#39;s <code>disabledIcon</code> prop. If specified, the value is passed down to every radios under this element.",
     "name": "The name used to reference the value of the control. If you don&#39;t provide this prop, it falls back to a randomly generated name.",
-    "onChange": "Callback fired when a radio button is selected.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLInputElement&gt;, value: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>value:</em> The value of the selected radio button. You can pull out the new value by accessing <code>event.target.value</code> (string).",
-    "value": "Value of the selected radio button. The DOM API casts this to a string."
+    "onChange": "Callback fired when a radio button is selected.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string).",
+    "orientation": "The component orientation.",
+    "overlay": "The radio&#39;s <code>overlay</code> prop. If specified, the value is passed down to every radios under this element.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "value": "Value of the selected radio button. The DOM API casts this to a string.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "row": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "root": { "description": "Class name applied to the root element." },
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>row={true}</code>"
+      "conditions": "<code>size=\"sm\"</code>"
     },
-    "error": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>error={true}</code>"
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
+    },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
+    },
+    "horizontal": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>orientation=\"horizontal\"</code>"
+    },
+    "vertical": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>orientation=\"vertical\"</code>"
     }
-  }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/radio/radio.json b/docs/translations/api-docs/radio/radio.json
index a37b16ec49df88..e7824f297bfa91 100644
--- a/docs/translations/api-docs/radio/radio.json
+++ b/docs/translations/api-docs/radio/radio.json
@@ -3,42 +3,133 @@
   "propDescriptions": {
     "checked": "If <code>true</code>, the component is checked.",
     "checkedIcon": "The icon to display when the component is checked.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
+    "className": "Class name applied to the root element.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "defaultChecked": "The default checked state. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "disableRipple": "If <code>true</code>, the ripple effect is disabled.",
-    "icon": "The icon to display when the component is unchecked.",
-    "id": "The id of the <code>input</code> element.",
-    "inputProps": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes\">Attributes</a> applied to the <code>input</code> element.",
-    "inputRef": "Pass a ref to the <code>input</code> element.",
-    "name": "Name attribute of the <code>input</code> element.",
+    "disableIcon": "If <code>true</code>, the checked icon is removed and the selected variant is applied on the <code>action</code> element instead.",
+    "label": "The label element at the end the radio.",
+    "name": "The <code>name</code> attribute of the input.",
     "onChange": "Callback fired when the state is changed.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string). You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean).",
+    "overlay": "If <code>true</code>, the root element&#39;s position is set to initial which allows the action area to fill the nearest positioned parent. This prop is useful for composing Radio with ListItem component.",
+    "readOnly": "If <code>true</code>, the component is read only.",
     "required": "If <code>true</code>, the <code>input</code> element is required.",
-    "size": "The size of the component. <code>small</code> is equivalent to the dense radio styling.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "value": "The value of the component. The DOM API casts this to a string."
+    "uncheckedIcon": "The icon to display when the component is not checked.",
+    "value": "The value of the component. The DOM API casts this to a string.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
+    "root": { "description": "Class name applied to the root element." },
+    "radio": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the radio element"
+    },
+    "icon": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the icon element"
+    },
+    "action": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the action element"
+    },
+    "input": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the input element"
+    },
+    "label": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the label element"
+    },
     "checked": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>checked={true}</code>"
+      "description": "State class applied to {{nodeName}}, {{conditions}}.",
+      "nodeName": "the root",
+      "conditions": "action slots if <code>checked</code>"
     },
     "disabled": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>disabled={true}</code>"
+      "description": "State class applied to {{nodeName}}, {{conditions}}.",
+      "nodeName": "the root",
+      "conditions": "action slots if <code>disabled</code>"
+    },
+    "focusVisible": {
+      "description": "Class name applied to the root element if the switch has visible focus"
     },
     "colorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"primary\"</code>"
     },
-    "colorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"secondary\"</code>"
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
+    },
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "radio": "The component that renders the radio.",
+    "icon": "The component that renders the icon.",
+    "action": "The component that renders the action.",
+    "input": "The component that renders the input.",
+    "label": "The component that renders the label."
   }
 }
diff --git a/docs/translations/api-docs/scoped-css-baseline/scoped-css-baseline.json b/docs/translations/api-docs/scoped-css-baseline/scoped-css-baseline.json
index 98a79e623f4841..261555f056fcdd 100644
--- a/docs/translations/api-docs/scoped-css-baseline/scoped-css-baseline.json
+++ b/docs/translations/api-docs/scoped-css-baseline/scoped-css-baseline.json
@@ -1,11 +1,13 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "children": "You can wrap a node.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "enableColorScheme": "Enable <code>color-scheme</code> CSS property to use <code>theme.palette.mode</code>. For more details, check out <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme\">https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme</a> For browser support, check out <a href=\"https://caniuse.com/?search=color-scheme\">https://caniuse.com/?search=color-scheme</a>",
+    "disableColorScheme": "Disable <code>color-scheme</code> CSS property. For more details, check out <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme\">https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme</a> For browser support, check out <a href=\"https://caniuse.com/?search=color-scheme\">https://caniuse.com/?search=color-scheme</a>",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
-  "classDescriptions": { "root": { "description": "Styles applied to the root element." } }
+  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/select/select.json b/docs/translations/api-docs/select/select.json
index 0e09fe6d4805dd..a362701dee65df 100644
--- a/docs/translations/api-docs/select/select.json
+++ b/docs/translations/api-docs/select/select.json
@@ -1,89 +1,149 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "autoWidth": "If <code>true</code>, the width of the popover will automatically be set according to the items inside the menu, otherwise it will be at least the width of the select input.",
-    "children": "The option elements to populate the select with. Can be some <code>MenuItem</code> when <code>native</code> is false and <code>option</code> when <code>native</code> is true.<br>⚠️The <code>MenuItem</code> elements <strong>must</strong> be direct descendants when <code>native</code> is false.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "defaultOpen": "If <code>true</code>, the component is initially open. Use when the component open state is not controlled (i.e. the <code>open</code> prop is not defined). You can only use it when the <code>native</code> prop is <code>false</code> (default).",
-    "defaultValue": "The default value. Use when the component is not controlled.",
-    "displayEmpty": "If <code>true</code>, a value is displayed even if no items are selected.<br>In order to display a meaningful value, a function can be passed to the <code>renderValue</code> prop which returns the value to be displayed when no items are selected.<br>⚠️ When using this prop, make sure the label doesn&#39;t overlap with the empty displayed value. The label should either be hidden or forced to a shrunk state.",
-    "IconComponent": "The icon that displays the arrow.",
-    "id": "The <code>id</code> of the wrapper element or the <code>select</code> element when <code>native</code>.",
-    "input": "An <code>Input</code> element; does not have to be a material-ui specific <code>Input</code>.",
-    "inputProps": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes\">Attributes</a> applied to the <code>input</code> element. When <code>native</code> is <code>true</code>, the attributes are applied on the <code>select</code> element.",
-    "label": "See <a href=\"/material-ui/api/outlined-input/#props\">OutlinedInput#label</a>",
-    "labelId": "The ID of an element that acts as an additional label. The Select will be labelled by the additional label and the selected value.",
-    "MenuProps": "Props applied to the <a href=\"/material-ui/api/menu/\"><code>Menu</code></a> element.",
-    "multiple": "If <code>true</code>, <code>value</code> must be an array and the menu will support multiple selections.",
-    "native": "If <code>true</code>, the component uses a native <code>select</code> element.",
-    "onChange": "Callback fired when a menu item is selected.<br><br><strong>Signature:</strong><br><code>function(event: SelectChangeEvent&lt;T&gt;, child?: object) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (any). <strong>Warning</strong>: This is a generic event, not a change event, unless the change event is caused by browser autofill.<br><em>child:</em> The react element that was selected when <code>native</code> is <code>false</code> (default).",
-    "onClose": "Callback fired when the component requests to be closed. Use it in either controlled (see the <code>open</code> prop), or uncontrolled mode (to detect when the Select collapses).<br><br><strong>Signature:</strong><br><code>function(event: object) =&gt; void</code><br><em>event:</em> The event source of the callback.",
-    "onOpen": "Callback fired when the component requests to be opened. Use it in either controlled (see the <code>open</code> prop), or uncontrolled mode (to detect when the Select expands).<br><br><strong>Signature:</strong><br><code>function(event: object) =&gt; void</code><br><em>event:</em> The event source of the callback.",
-    "open": "If <code>true</code>, the component is shown. You can only use it when the <code>native</code> prop is <code>false</code> (default).",
-    "renderValue": "Render the selected value. You can only use it when the <code>native</code> prop is <code>false</code> (default).<br><br><strong>Signature:</strong><br><code>function(value: any) =&gt; ReactNode</code><br><em>value:</em> The <code>value</code> provided to the component.",
-    "SelectDisplayProps": "Props applied to the clickable div element.",
+    "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
+    "autoFocus": "If <code>true</code>, the select element is focused during the first mount",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "defaultListboxOpen": "If <code>true</code>, the select will be initially open.",
+    "defaultValue": "The default selected value. Use when the component is not controlled.",
+    "disabled": "If <code>true</code>, the component is disabled.",
+    "endDecorator": "Trailing adornment for the select.",
+    "getSerializedValue": "A function to convert the currently selected value to a string. Used to set a value of a hidden input associated with the select, so that the selected value can be posted with a form.",
+    "indicator": "The indicator(*) for the select.    ________________   [ value        * ]    ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾",
+    "listboxId": "<code>id</code> attribute of the listbox element. Also used to derive the <code>id</code> attributes of options.",
+    "listboxOpen": "Controls the open state of the select&#39;s listbox.",
+    "name": "Name of the element. For example used by the server to identify the fields in form submits. If the name is provided, the component will render a hidden input element that can be submitted to a server.",
+    "onChange": "Callback fired when an option is selected.",
+    "onClose": "Triggered when focus leaves the menu and the menu should close.",
+    "onListboxOpenChange": "Callback fired when the component requests to be opened. Use in controlled mode (see listboxOpen).",
+    "placeholder": "Text to show when there is no selected value.",
+    "renderValue": "Function that customizes the rendering of the selected value.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "startDecorator": "Leading adornment for the select.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "value": "The <code>input</code> value. Providing an empty string will select no options. Set to an empty string <code>&#39;&#39;</code> if you don&#39;t want any of the available options to be selected.<br>If the value is an object it must have reference equality with the option in order to be selected. If the value is not an object, the string representation must match with the string representation of the option in order to be selected.",
-    "variant": "The variant to use."
+    "value": "The selected value. Set to <code>null</code> to deselect all options.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "select": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the select component `select` class"
-    },
-    "multiple": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the select component",
-      "conditions": "<code>multiple={true}</code>"
-    },
-    "filled": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the select component",
-      "conditions": "<code>variant=\"filled\"</code>"
-    },
-    "outlined": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the select component",
-      "conditions": "<code>variant=\"outlined\"</code>"
+    "root": { "description": "Class name applied to {{nodeName}}.", "nodeName": "the root slot" },
+    "button": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the button slot"
     },
-    "standard": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the select component",
-      "conditions": "<code>variant=\"standard\"</code>"
+    "indicator": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the indicator slot"
     },
-    "disabled": {
-      "description": "State class applied to {{nodeName}}.",
-      "nodeName": "the select component `disabled` class"
-    },
-    "icon": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon component" },
-    "iconOpen": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the icon component",
-      "conditions": "the popup is open"
-    },
-    "iconFilled": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the icon component",
-      "conditions": "<code>variant=\"filled\"</code>"
-    },
-    "iconOutlined": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the icon component",
+    "startDecorator": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the startDecorator slot"
+    },
+    "endDecorator": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the endDecorator slot"
+    },
+    "popper": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the popper slot"
+    },
+    "listbox": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the listbox slot"
+    },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root slot",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root slot",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root slot",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root slot",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root slot",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root slot",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root slot",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root slot",
       "conditions": "<code>variant=\"outlined\"</code>"
     },
-    "iconStandard": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the icon component",
-      "conditions": "<code>variant=\"standard\"</code>"
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root slot",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root slot",
+      "conditions": "<code>variant=\"solid\"</code>"
     },
-    "nativeInput": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the underlying native input component"
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root slot",
+      "conditions": "<code>size=\"sm\"</code>"
     },
-    "error": {
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root slot",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root slot",
+      "conditions": "<code>size=\"lg\"</code>"
+    },
+    "focusVisible": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>error={true}</code>"
+      "nodeName": "the SelectBase root slot",
+      "conditions": "the button is keyboard focused"
+    },
+    "disabled": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root slot",
+      "conditions": "<code>disabled={true}</code>"
+    },
+    "expanded": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root slot",
+      "conditions": "listbox open"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "button": "The component that renders the button.",
+    "startDecorator": "The component that renders the start decorator.",
+    "endDecorator": "The component that renders the end decorator.",
+    "indicator": "The component that renders the indicator.",
+    "listbox": "The component that renders the listbox."
   }
 }
diff --git a/docs/translations/api-docs/sheet/sheet.json b/docs/translations/api-docs/sheet/sheet.json
new file mode 100644
index 00000000000000..1f141290078461
--- /dev/null
+++ b/docs/translations/api-docs/sheet/sheet.json
@@ -0,0 +1,72 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "children": "The content of the component.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "invertedColors": "If <code>true</code>, the children with an implicit color prop invert their colors to match the component&#39;s variant and color.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+  },
+  "classDescriptions": {
+    "root": { "description": "Class name applied to the root element." },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
+    }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
+}
diff --git a/docs/translations/api-docs/slider/slider.json b/docs/translations/api-docs/slider/slider.json
index e7e7dce95d28cc..2d7e7ccd4844b3 100644
--- a/docs/translations/api-docs/slider/slider.json
+++ b/docs/translations/api-docs/slider/slider.json
@@ -2,17 +2,16 @@
   "componentDescription": "",
   "propDescriptions": {
     "aria-label": "The label of the slider.",
-    "aria-labelledby": "The id of the element containing a label for the slider.",
     "aria-valuetext": "A string value that provides a user-friendly name for the current value of the slider.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
-    "components": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead.",
-    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "defaultValue": "The default value. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the component is disabled.",
     "disableSwap": "If <code>true</code>, the active thumb doesn&#39;t swap when moving pointer over a thumb while dragging another thumb.",
     "getAriaLabel": "Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. This is important for screen reader users.<br><br><strong>Signature:</strong><br><code>function(index: number) =&gt; string</code><br><em>index:</em> The thumb label&#39;s index to format.",
     "getAriaValueText": "Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users.<br><br><strong>Signature:</strong><br><code>function(value: number, index: number) =&gt; string</code><br><em>value:</em> The thumb label&#39;s value to format.<br><em>index:</em> The thumb label&#39;s index to format.",
+    "isRtl": "If <code>true</code> the Slider will be rendered right-to-left (with the lowest value on the right-hand side).",
     "marks": "Marks indicate predetermined values to which the user can move the slider. If <code>true</code> the marks are spaced according the value of the <code>step</code> prop. If an array, it should contain objects with <code>value</code> and an optional <code>label</code> keys.",
     "max": "The maximum allowed value of the slider. Should not be equal to min.",
     "min": "The minimum allowed value of the slider. Should not be equal to max.",
@@ -21,36 +20,27 @@
     "onChangeCommitted": "Callback function that is fired when the <code>mouseup</code> is triggered.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent | Event, value: number | Array&lt;number&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.",
     "orientation": "The component orientation.",
     "scale": "A transformation function, to change the scale of the slider.<br><br><strong>Signature:</strong><br><code>function(x: any) =&gt; any</code><br>",
-    "size": "The size of the slider.",
-    "slotProps": "The props used for each slot inside the Slider.",
-    "slots": "The components used for each slot inside the Slider. Either a string to use a HTML element or a component.",
+    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "step": "The granularity with which the slider can step through values. (A &quot;discrete&quot; slider.) The <code>min</code> prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is <code>null</code>, the thumb can only be slid onto marks provided with the <code>marks</code> prop.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "tabIndex": "Tab index attribute of the hidden <code>input</code> element.",
     "track": "The track presentation:<br>- <code>normal</code> the track will render a bar representing the slider value. - <code>inverted</code> the track will render a bar representing the remaining slider value. - <code>false</code> the track will render without a bar.",
     "value": "The value of the slider. For ranged sliders, provide an array with two values.",
     "valueLabelDisplay": "Controls when the value label is displayed:<br>- <code>auto</code> the value label will display when the thumb is hovered or focused. - <code>on</code> will display persistently. - <code>off</code> will never display.",
-    "valueLabelFormat": "The format function the value label&#39;s value.<br>When a function is provided, it should have the following signature:<br>- {number} value The value label&#39;s value to format - {number} index The value label&#39;s index to format"
+    "valueLabelFormat": "The format function the value label&#39;s value.<br>When a function is provided, it should have the following signature:<br>- {number} value The value label&#39;s value to format - {number} index The value label&#39;s index to format",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "colorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"secondary\"</code>"
-    },
+    "root": { "description": "Class name applied to the root element." },
     "marked": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>marks</code> is provided with at least one label"
     },
     "vertical": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>orientation=\"vertical\"</code>"
     },
@@ -64,80 +54,134 @@
       "nodeName": "the root",
       "conditions": "a thumb is being dragged"
     },
-    "rail": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the rail element" },
-    "track": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the track element" },
+    "focusVisible": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the thumb element",
+      "conditions": "it has keyboard focused"
+    },
+    "rail": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the rail element"
+    },
+    "track": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the track element"
+    },
     "trackFalse": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>track={false}</code>"
     },
     "trackInverted": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>track=\"inverted\"</code>"
     },
-    "thumb": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the thumb element" },
-    "active": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the thumb element",
-      "conditions": "it's active"
+    "thumb": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the thumb element"
     },
-    "focusVisible": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the thumb element",
-      "conditions": "keyboard focused"
+    "valueLabel": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the thumb label element"
+    },
+    "valueLabelOpen": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the thumb label element",
+      "conditions": "it's open"
+    },
+    "mark": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the mark element"
     },
-    "mark": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the mark element" },
     "markActive": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
       "nodeName": "the mark element",
-      "conditions": "active (depending on the value)"
+      "conditions": "it is active"
     },
     "markLabel": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the mark label element"
     },
-    "markLabelActive": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the mark label element",
-      "conditions": "active (depending on the value)"
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
     },
-    "sizeSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"small\"</code>"
+      "conditions": "<code>color=\"danger\"</code>"
     },
-    "thumbColorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the thumb element",
-      "conditions": "<code>color=\"primary\"</code>"
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
     },
-    "thumbColorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the thumb element",
-      "conditions": "<code>color=\"secondary\"</code>"
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
     },
-    "thumbSizeSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the thumb element",
-      "conditions": "<code>size=\"small\"</code>"
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
     },
-    "valueLabel": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the thumb label element"
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
     },
-    "valueLabelOpen": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the thumb label element",
-      "conditions": "it's open"
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
     },
-    "valueLabelCircle": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the thumb label's circle element"
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
     },
-    "valueLabelLabel": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the thumb label's label element"
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
+    },
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "track": "The component that renders the track.",
+    "rail": "The component that renders the rail.",
+    "thumb": "The component that renders the thumb.",
+    "mark": "The component that renders the mark.",
+    "markLabel": "The component that renders the mark label.",
+    "valueLabel": "The component that renders the value label.",
+    "input": "The component that renders the input."
   }
 }
diff --git a/docs/translations/api-docs/snackbar/snackbar.json b/docs/translations/api-docs/snackbar/snackbar.json
index f711f727361f42..6c4f7ffd1ef1fd 100644
--- a/docs/translations/api-docs/snackbar/snackbar.json
+++ b/docs/translations/api-docs/snackbar/snackbar.json
@@ -1,55 +1,16 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "action": "The action to display. It renders after the message, at the end of the snackbar.",
-    "anchorOrigin": "The anchor of the <code>Snackbar</code>. On smaller screens, the component grows to occupy all the available width, the horizontal alignment is ignored.",
     "autoHideDuration": "The number of milliseconds to wait before automatically calling the <code>onClose</code> function. <code>onClose</code> should then set the state of the <code>open</code> prop to hide the Snackbar. This behavior is disabled by default with the <code>null</code> value.",
-    "children": "Replace the <code>SnackbarContent</code> component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "ClickAwayListenerProps": "Props applied to the <code>ClickAwayListener</code> element.",
-    "ContentProps": "Props applied to the <a href=\"/material-ui/api/snackbar-content/\"><code>SnackbarContent</code></a> element.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disableWindowBlurListener": "If <code>true</code>, the <code>autoHideDuration</code> timer will expire even if the window is not focused.",
-    "key": "When displaying multiple consecutive Snackbars from a parent rendering a single &lt;Snackbar/&gt;, add the key prop to ensure independent treatment of each message. e.g. &lt;Snackbar key={message} /&gt;, otherwise, the message may update-in-place and features such as autoHideDuration may be canceled.",
-    "message": "The message to display.",
+    "exited": "The prop used to handle exited transition and unmount the component.",
     "onClose": "Callback fired when the component requests to be closed. Typically <code>onClose</code> is used to set state in the parent component, which is used to control the <code>Snackbar</code> <code>open</code> prop. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>, for example ignoring <code>clickaway</code>.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent&lt;any&gt; | Event, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>reason:</em> Can be: <code>&quot;timeout&quot;</code> (<code>autoHideDuration</code> expired), <code>&quot;clickaway&quot;</code>, or <code>&quot;escapeKeyDown&quot;</code>.",
     "open": "If <code>true</code>, the component is shown.",
     "resumeHideDuration": "The number of milliseconds to wait before dismissing after user interaction. If <code>autoHideDuration</code> prop isn&#39;t specified, it does nothing. If <code>autoHideDuration</code> prop is specified but <code>resumeHideDuration</code> isn&#39;t, we default to <code>autoHideDuration / 2</code> ms.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "TransitionComponent": "The component used for the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component.",
-    "transitionDuration": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.",
-    "TransitionProps": "Props applied to the transition element. By default, the element is based on this <a href=\"http://reactcommunity.org/react-transition-group/transition/\"><code>Transition</code></a> component."
+    "slotProps": "The props used for each slot inside the Snackbar.",
+    "slots": "The components used for each slot inside the Snackbar. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
   },
-  "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "anchorOriginTopCenter": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>anchorOrigin={{ 'top', 'center' }}</code>"
-    },
-    "anchorOriginBottomCenter": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>anchorOrigin={{ 'bottom', 'center' }}</code>"
-    },
-    "anchorOriginTopRight": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>anchorOrigin={{ 'top', 'right' }}</code>"
-    },
-    "anchorOriginBottomRight": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>anchorOrigin={{ 'bottom', 'right' }}</code>"
-    },
-    "anchorOriginTopLeft": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>anchorOrigin={{ 'top', 'left' }}</code>"
-    },
-    "anchorOriginBottomLeft": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>anchorOrigin={{ 'bottom', 'left' }}</code>"
-    }
-  }
+  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/svg-icon/svg-icon.json b/docs/translations/api-docs/svg-icon/svg-icon.json
index 6a7dfb879cc722..95ecb3f260c547 100644
--- a/docs/translations/api-docs/svg-icon/svg-icon.json
+++ b/docs/translations/api-docs/svg-icon/svg-icon.json
@@ -2,63 +2,110 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "Node passed into the SVG element.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>. You can use the <code>htmlColor</code> prop to apply a color attribute to the SVG element.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. You can use the <code>htmlColor</code> prop to apply a color attribute to the SVG element. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "fontSize": "The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.",
+    "fontSize": "The fontSize applied to the icon. Defaults to 1rem, but can be configure to inherit font size.",
     "htmlColor": "Applies a color attribute to the SVG element.",
     "inheritViewBox": "If <code>true</code>, the root node will inherit the custom <code>component</code>&#39;s viewBox and the <code>viewBox</code> prop will be ignored. Useful when you want to reference a custom <code>component</code> and have <code>SvgIcon</code> pass that <code>component</code>&#39;s viewBox to the root node.",
     "shapeRendering": "The shape-rendering attribute. The behavior of the different options is described on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering\">MDN Web Docs</a>. If you are having issues with blurry icons you should investigate this prop.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "titleAccess": "Provides a human-readable title for the element that contains it. <a href=\"https://www.w3.org/TR/SVG-access/#Equivalent\">https://www.w3.org/TR/SVG-access/#Equivalent</a>",
     "viewBox": "Allows you to redefine what the coordinates without units mean inside an SVG element. For example, if the SVG element is 500 (width) by 200 (height), and you pass viewBox=&quot;0 0 50 20&quot;, this means that the coordinates inside the SVG will go from the top left corner (0,0) to bottom right (50,20) and each unit will be worth 10px."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
+    "root": { "description": "Class name applied to the root element." },
+    "colorInherit": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"inherit\"</code>"
+    },
     "colorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"primary\"</code>"
     },
-    "colorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"secondary\"</code>"
+      "conditions": "<code>color=\"neutral\"</code>"
     },
-    "colorAction": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"action\"</code>"
+      "conditions": "<code>color=\"danger\"</code>"
     },
-    "colorError": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"error\"</code>"
+      "conditions": "<code>color=\"info\"</code>"
     },
-    "colorDisabled": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"disabled\"</code>"
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
     },
     "fontSizeInherit": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>fontSize=\"inherit\"</code>"
     },
-    "fontSizeSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "fontSizeXs": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fontSize=\"xs\"</code>"
+    },
+    "fontSizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fontSize=\"sm\"</code>"
+    },
+    "fontSizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fontSize=\"md\"</code>"
+    },
+    "fontSizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>fontSize=\"small\"</code>"
+      "conditions": "<code>fontSize=\"lg\"</code>"
     },
-    "fontSizeMedium": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "fontSizeXl": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>fontSize=\"medium\"</code>"
+      "conditions": "<code>fontSize=\"xl\"</code>"
     },
-    "fontSizeLarge": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "fontSizeXl2": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>fontSize=\"large\"</code>"
+      "conditions": "<code>fontSize=\"xl2\"</code>"
+    },
+    "fontSizeXl3": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fontSize=\"xl3\"</code>"
+    },
+    "fontSizeXl4": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fontSize=\"xl4\"</code>"
+    },
+    "fontSizeXl5": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fontSize=\"xl5\"</code>"
+    },
+    "fontSizeXl6": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fontSize=\"xl6\"</code>"
     }
-  }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/switch/switch.json b/docs/translations/api-docs/switch/switch.json
index 1e5c6b7daab8ad..96ddc47f9721cc 100644
--- a/docs/translations/api-docs/switch/switch.json
+++ b/docs/translations/api-docs/switch/switch.json
@@ -2,74 +2,129 @@
   "componentDescription": "",
   "propDescriptions": {
     "checked": "If <code>true</code>, the component is checked.",
-    "checkedIcon": "The icon to display when the component is checked.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "defaultChecked": "The default checked state. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "disableRipple": "If <code>true</code>, the ripple effect is disabled.",
-    "edge": "If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape).",
-    "icon": "The icon to display when the component is unchecked.",
-    "id": "The id of the <code>input</code> element.",
-    "inputProps": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes\">Attributes</a> applied to the <code>input</code> element.",
-    "inputRef": "Pass a ref to the <code>input</code> element.",
+    "endDecorator": "The element that appears at the end of the switch.",
     "onChange": "Callback fired when the state is changed.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string). You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean).",
+    "readOnly": "If <code>true</code>, the component is read only.",
     "required": "If <code>true</code>, the <code>input</code> element is required.",
-    "size": "The size of the component. <code>small</code> is equivalent to the dense switch styling.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "startDecorator": "The element that appears at the end of the switch.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "value": "The value of the component. The DOM API casts this to a string. The browser uses &quot;on&quot; as the default value."
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "edgeStart": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>edge=\"start\"</code>"
+    "root": { "description": "Class name applied to the root element." },
+    "checked": {
+      "description": "State class applied to {{nodeName}}.",
+      "nodeName": "the root `checked` class"
     },
-    "edgeEnd": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>edge=\"end\"</code>"
+    "disabled": {
+      "description": "State class applied to {{nodeName}}.",
+      "nodeName": "the root disabled class"
+    },
+    "action": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the action element"
+    },
+    "input": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the input element"
     },
-    "switchBase": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the internal `SwitchBase` component's `root` class"
+    "thumb": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the input element"
+    },
+    "track": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the track element"
+    },
+    "focusVisible": {
+      "description": "State class applied to the root element if the switch has visible focus"
+    },
+    "readOnly": {
+      "description": "Class name applied to the root element if the switch is read-only"
     },
     "colorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the internal SwitchBase component's root element",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
       "conditions": "<code>color=\"primary\"</code>"
     },
-    "colorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the internal SwitchBase component's root element",
-      "conditions": "<code>color=\"secondary\"</code>"
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
     },
-    "sizeSmall": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"small\"</code>"
+      "conditions": "<code>color=\"info\"</code>"
     },
-    "sizeMedium": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"medium\"</code>"
+      "conditions": "<code>color=\"success\"</code>"
     },
-    "checked": {
-      "description": "State class applied to {{nodeName}}.",
-      "nodeName": "the internal `SwitchBase` component's `checked` class"
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
     },
-    "disabled": {
-      "description": "State class applied to {{nodeName}}.",
-      "nodeName": "the internal SwitchBase component's disabled class"
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
     },
-    "input": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the internal SwitchBase component's input element"
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
     },
-    "thumb": {
-      "description": "Styles used to create the thumb passed to the internal `SwitchBase` component `icon` prop."
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
     },
-    "track": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the track element" }
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
+    },
+    "startDecorator": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the startDecorator element"
+    },
+    "endDecorator": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the endDecorator element"
+    }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "thumb": "The component that renders the thumb.",
+    "action": "The component that renders the action.",
+    "input": "The component that renders the input.",
+    "track": "The component that renders the track.",
+    "startDecorator": "The component that renders the start decorator.",
+    "endDecorator": "The component that renders the end decorator."
   }
 }
diff --git a/docs/translations/api-docs/tab-list/tab-list.json b/docs/translations/api-docs/tab-list/tab-list.json
index 60d83960a1645c..39dfa648bfeaab 100644
--- a/docs/translations/api-docs/tab-list/tab-list.json
+++ b/docs/translations/api-docs/tab-list/tab-list.json
@@ -1,63 +1,53 @@
 {
   "componentDescription": "",
-  "propDescriptions": { "children": "A list of <code>&lt;Tab /&gt;</code> elements." },
+  "propDescriptions": {
+    "children": "Used to render icon or text elements inside the TabList if <code>src</code> is not set. This can be an element, or just a string.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+  },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "vertical": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "root": { "description": "Class name applied to the root element." },
+    "colorPrimary": {
+      "description": "Classname applied to the root element if `color=\"primary\"`."
+    },
+    "colorNeutral": {
+      "description": "Classname applied to the root element if `color=\"neutral\"`."
+    },
+    "colorDanger": {
+      "description": "Classname applied to the root element if `color=\"danger\"`."
+    },
+    "colorInfo": { "description": "Classname applied to the root element if `color=\"info\"`." },
+    "colorSuccess": {
+      "description": "Classname applied to the root element if `color=\"success\"`."
+    },
+    "colorWarning": {
+      "description": "Classname applied to the root element if `color=\"warning\"`."
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>orientation=\"vertical\"</code>"
-    },
-    "flexContainer": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the flex container element"
-    },
-    "flexContainerVertical": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the flex container element",
-      "conditions": "<code>orientation=\"vertical\"</code>"
-    },
-    "centered": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the flex container element",
-      "conditions": "<code>centered={true}</code> & <code>!variant=\"scrollable\"</code>"
-    },
-    "scroller": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the tablist element"
-    },
-    "fixed": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the tablist element",
-      "conditions": "<code>!variant=\"scrollable\"</code>\b\b\b"
-    },
-    "scrollableX": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the tablist element",
-      "conditions": "<code>variant=\"scrollable\"</code> and <code>orientation=\"horizontal\"</code>"
-    },
-    "scrollableY": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the tablist element",
-      "conditions": "<code>variant=\"scrollable\"</code> and <code>orientation=\"vertical\"</code>"
-    },
-    "hideScrollbar": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the tablist element",
-      "conditions": "<code>variant=\"scrollable\"</code> and <code>visibleScrollbar={false}</code>"
-    },
-    "scrollButtons": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the ScrollButtonComponent component"
-    },
-    "scrollButtonsHideMobile": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the ScrollButtonComponent component",
-      "conditions": "<code>allowScrollButtonsMobile={true}</code>"
-    },
-    "indicator": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the TabIndicator component"
-    }
-  }
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "Classname applied to the root element if `variant=\"plain\"`."
+    },
+    "variantOutlined": {
+      "description": "Classname applied to the root element if `variant=\"outlined\"`."
+    },
+    "variantSoft": {
+      "description": "Classname applied to the root element if `variant=\"soft\"`."
+    },
+    "variantSolid": {
+      "description": "Classname applied to the root element if `variant=\"solid\"`."
+    },
+    "sizeSm": { "description": "Classname applied to the root element if `size=\"sm\"`." },
+    "sizeMd": { "description": "Classname applied to the root element if `size=\"md\"`." },
+    "sizeLg": { "description": "Classname applied to the root element if `size=\"lg\"`." }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/tab-panel/tab-panel.json b/docs/translations/api-docs/tab-panel/tab-panel.json
index 9dddc21ca16db5..eb37a0a8e71422 100644
--- a/docs/translations/api-docs/tab-panel/tab-panel.json
+++ b/docs/translations/api-docs/tab-panel/tab-panel.json
@@ -2,9 +2,29 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "value": "The <code>value</code> of the corresponding <code>Tab</code>. Must use the index of the <code>Tab</code> when no <code>value</code> was passed to <code>Tab</code>."
+    "value": "The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected."
   },
-  "classDescriptions": { "root": { "description": "Styles applied to the root element." } }
+  "classDescriptions": {
+    "root": { "description": "Classname applied to the root element." },
+    "hidden": { "description": "Classname applied to the root element if the tab is not active." },
+    "sizeSm": { "description": "Classname applied to the root element if `size=\"sm\"`." },
+    "sizeMd": { "description": "Classname applied to the root element if `size=\"md\"`." },
+    "sizeLg": { "description": "Classname applied to the root element if `size=\"lg\"`." },
+    "horizontal": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>orientation=\"horizontal\"</code>"
+    },
+    "vertical": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>orientation=\"vertical\"</code>"
+    }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/tab/tab.json b/docs/translations/api-docs/tab/tab.json
index 1326365b9a0752..cf4c7c2d8de2cf 100644
--- a/docs/translations/api-docs/tab/tab.json
+++ b/docs/translations/api-docs/tab/tab.json
@@ -1,64 +1,64 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "This prop isn&#39;t supported. Use the <code>component</code> prop if you need to change the children structure.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "disableFocusRipple": "If <code>true</code>, the  keyboard focus ripple is disabled.",
-    "disableRipple": "If <code>true</code>, the ripple effect is disabled.<br>⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the <code>.Mui-focusVisible</code> class.",
-    "icon": "The icon to display.",
-    "iconPosition": "The position of the icon relative to the label.",
-    "label": "The label element.",
+    "onChange": "Callback invoked when new value is being set.",
+    "orientation": "The content direction flow.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "value": "You can provide your own value. Otherwise, we fallback to the child position index.",
-    "wrapped": "Tab labels appear in a single row. They can use a second line if needed."
+    "value": "You can provide your own value. Otherwise, it falls back to the child position index.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "labelIcon": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "both <code>icon</code> and <code>label</code> are provided"
+    "root": { "description": "Classname applied to the root element." },
+    "disabled": { "description": "Classname applied to the root element if `disabled={true}`." },
+    "focusVisible": {
+      "description": "Classname applied to the root element when its focus is visible."
     },
-    "textColorInherit": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "the parent [<code>Tabs</code>](/material-ui/api/tabs/) has <code>textColor=\"inherit\"</code>"
+    "selected": { "description": "Classname applied to the root element when it is selected." },
+    "horizontal": {
+      "description": "Classname applied to the root element if `orientation=\"horizontal\"`."
     },
-    "textColorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "the parent [<code>Tabs</code>](/material-ui/api/tabs/) has <code>textColor=\"primary\"</code>"
+    "vertical": {
+      "description": "Classname applied to the root element if `orientation=\"vertical\"`."
     },
-    "textColorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "the parent [<code>Tabs</code>](/material-ui/api/tabs/) has <code>textColor=\"secondary\"</code>"
+    "colorPrimary": {
+      "description": "Classname applied to the root element if `color=\"primary\"`."
     },
-    "selected": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>selected={true}</code> (controlled by the Tabs component)"
+    "colorNeutral": {
+      "description": "Classname applied to the root element if `color=\"neutral\"`."
     },
-    "disabled": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>disabled={true}</code> (controlled by the Tabs component)"
+    "colorDanger": {
+      "description": "Classname applied to the root element if `color=\"danger\"`."
     },
-    "fullWidth": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>fullWidth={true}</code> (controlled by the Tabs component)"
+    "colorInfo": { "description": "Classname applied to the root element if `color=\"info\"`." },
+    "colorSuccess": {
+      "description": "Classname applied to the root element if `color=\"success\"`."
+    },
+    "colorWarning": {
+      "description": "Classname applied to the root element if `color=\"warning\"`."
     },
-    "wrapped": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>wrapped={true}</code>"
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "Classname applied to the root element if `variant=\"plain\"`."
     },
-    "iconWrapper": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the wrapper element of `icon`",
-      "conditions": "<code>icon</code> is provided"
+    "variantOutlined": {
+      "description": "Classname applied to the root element if `variant=\"outlined\"`."
+    },
+    "variantSoft": {
+      "description": "Classname applied to the root element if `variant=\"soft\"`."
+    },
+    "variantSolid": {
+      "description": "Classname applied to the root element if `variant=\"solid\"`."
     }
-  }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/table-pagination/table-pagination.json b/docs/translations/api-docs/table-pagination/table-pagination.json
index cff49eb2a8cacb..106432ab9dccd0 100644
--- a/docs/translations/api-docs/table-pagination/table-pagination.json
+++ b/docs/translations/api-docs/table-pagination/table-pagination.json
@@ -1,66 +1,72 @@
 {
-  "componentDescription": "A `TableCell` based component for placing inside `TableFooter` for pagination.",
+  "componentDescription": "A pagination for tables.",
   "propDescriptions": {
-    "ActionsComponent": "The component used for displaying the actions. Either a string to use a HTML element or a component.",
-    "backIconButtonProps": "Props applied to the back arrow <a href=\"/material-ui/api/icon-button/\"><code>IconButton</code></a> component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "count": "The total number of rows.<br>To enable server side pagination for an unknown number of items, provide -1.",
     "getItemAriaLabel": "Accepts a function which returns a string value that provides a user-friendly name for the current page. This is important for screen reader users.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.<br><br><strong>Signature:</strong><br><code>function(type: string) =&gt; string</code><br><em>type:</em> The link or button type to format (&#39;first&#39; | &#39;last&#39; | &#39;next&#39; | &#39;previous&#39;).",
     "labelDisplayedRows": "Customize the displayed rows label. Invoked with a <code>{ from, to, count, page }</code> object.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
+    "labelId": "Id of the label element within the pagination.",
     "labelRowsPerPage": "Customize the rows per page label.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
-    "nextIconButtonProps": "Props applied to the next arrow <a href=\"/material-ui/api/icon-button/\"><code>IconButton</code></a> element.",
     "onPageChange": "Callback fired when the page is changed.<br><br><strong>Signature:</strong><br><code>function(event: React.MouseEvent&lt;HTMLButtonElement&gt; | null, page: number) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>page:</em> The page selected.",
     "onRowsPerPageChange": "Callback fired when the number of rows per page is changed.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLTextAreaElement | HTMLInputElement&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback.",
     "page": "The zero-based index of the current page.",
     "rowsPerPage": "The number of rows per page.<br>Set -1 to display all the rows.",
     "rowsPerPageOptions": "Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. Use -1 for the value with a custom label to show all the rows.",
-    "SelectProps": "Props applied to the rows per page <a href=\"/material-ui/api/select/\"><code>Select</code></a> element.",
-    "showFirstButton": "If <code>true</code>, show the first-page button.",
-    "showLastButton": "If <code>true</code>, show the last-page button.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+    "selectId": "Id of the select element within the pagination.",
+    "slotProps": "The props used for each slot inside the TablePagination.",
+    "slots": "The components used for each slot inside the TablePagination. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
+    "root": { "description": "Class name applied to the root element." },
     "toolbar": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the Toolbar component"
     },
     "spacer": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the spacer element"
     },
     "selectLabel": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the select label Typography element"
     },
     "selectRoot": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the Select component `root` element"
     },
     "select": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the Select component `select` class"
     },
     "selectIcon": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the Select component `icon` class"
     },
     "input": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the Select component `root` element"
     },
     "menuItem": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the MenuItem component"
     },
     "displayedRows": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the displayed rows Typography element"
     },
     "actions": {
-      "description": "Styles applied to {{nodeName}}.",
+      "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the internal `TablePaginationActions` component"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "actions": "The component that renders the actions.",
+    "select": "The component that renders the select.",
+    "selectLabel": "The component that renders the select label.",
+    "menuItem": "The component that renders the menu item.",
+    "displayedRows": "The component that renders the displayed rows.",
+    "toolbar": "The component that renders the toolbar.",
+    "spacer": "The component that renders the spacer."
   }
 }
diff --git a/docs/translations/api-docs/table/table.json b/docs/translations/api-docs/table/table.json
index 0db74bcc4a1f4f..46bc9be0b4865f 100644
--- a/docs/translations/api-docs/table/table.json
+++ b/docs/translations/api-docs/table/table.json
@@ -1,20 +1,142 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the table, normally <code>TableHead</code> and <code>TableBody</code>.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "borderAxis": "The axis to display a border on the table cell.",
+    "children": "Children of the table",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "padding": "Allows TableCells to inherit padding of the Table.",
-    "size": "Allows TableCells to inherit size of the Table.",
+    "hoverRow": "If <code>true</code>, the table row will shade on hover.",
+    "noWrap": "If <code>true</code>, the body cells will not wrap, but instead will truncate with a text overflow ellipsis.<br>Note: Header cells are always truncated with overflow ellipsis.",
+    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "stickyHeader": "Set the header sticky.<br>⚠️ It doesn&#39;t work with IE11.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+    "stripe": "The odd or even row of the table body will have subtle background color.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
+    "root": { "description": "Class name applied to the root element." },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
+    },
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
+    },
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
+    },
     "stickyHeader": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>stickyHeader</code> is true"
+    },
+    "noWrap": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>noWrap</code> is true"
+    },
+    "hoverRow": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>hoverRow</code> is true"
+    },
+    "borderAxisNone": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>borderAxis=\"none\"</code>"
+    },
+    "borderAxisX": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>stickyHeader={true}</code>"
+      "conditions": "<code>borderAxis=\"x\"</code>"
+    },
+    "borderAxisXBetween": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>borderAxis=\"xBetween\"</code>"
+    },
+    "borderAxisY": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>borderAxis=\"y\"</code>"
+    },
+    "borderAxisYBetween": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>borderAxis=\"yBetween\"</code>"
+    },
+    "borderAxisBoth": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>borderAxis=\"both\"</code>"
+    },
+    "borderAxisBothBetween": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>borderAxis=\"bothBetween\"</code>"
     }
-  }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/tabs-list/tabs-list.json b/docs/translations/api-docs/tabs-list/tabs-list.json
new file mode 100644
index 00000000000000..0067df3d304aa5
--- /dev/null
+++ b/docs/translations/api-docs/tabs-list/tabs-list.json
@@ -0,0 +1,23 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "children": "The content of the component.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "slotProps": "The props used for each slot inside the TabsList.",
+    "slots": "The components used for each slot inside the TabsList. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
+  },
+  "classDescriptions": {
+    "root": { "description": "Class name applied to the root element." },
+    "horizontal": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>orientation='horizontal'</code>"
+    },
+    "vertical": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>orientation='vertical'</code>"
+    }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
+}
diff --git a/docs/translations/api-docs/tabs/tabs.json b/docs/translations/api-docs/tabs/tabs.json
index 4fae2073b12685..321ce823397512 100644
--- a/docs/translations/api-docs/tabs/tabs.json
+++ b/docs/translations/api-docs/tabs/tabs.json
@@ -1,87 +1,65 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "action": "Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It supports two actions: <code>updateIndicator()</code> and <code>updateScrollButtons()</code>",
-    "allowScrollButtonsMobile": "If <code>true</code>, the scroll buttons aren&#39;t forced hidden on mobile. By default the scroll buttons are hidden on mobile and takes precedence over <code>scrollButtons</code>.",
-    "aria-label": "The label for the Tabs as a string.",
-    "aria-labelledby": "An id or list of ids separated by a space that label the Tabs.",
-    "centered": "If <code>true</code>, the tabs are centered. This prop is intended for large views.",
     "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "indicatorColor": "Determines the color of the indicator.",
-    "onChange": "Callback fired when the value changes.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent, value: any) =&gt; void</code><br><em>event:</em> The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> We default to the index of the child (number)",
+    "defaultValue": "The default value. Use when the component is not controlled.",
+    "direction": "The direction of the text.",
+    "onChange": "Callback invoked when new value is being set.",
     "orientation": "The component orientation (layout flow direction).",
-    "ScrollButtonComponent": "The component used to render the scroll buttons.",
-    "scrollButtons": "Determine behavior of scroll buttons when tabs are set to scroll:<br>- <code>auto</code> will only present them when not all the items are visible. - <code>true</code> will always present them. - <code>false</code> will never present them.<br>By default the scroll buttons are hidden on mobile. This behavior can be disabled with <code>allowScrollButtonsMobile</code>.",
     "selectionFollowsFocus": "If <code>true</code> the selected tab changes on focus. Otherwise it only changes on activation.",
-    "slotProps": "The extra props for the slot components. You can override the existing props or add new ones.",
-    "slots": "The components used for each slot inside.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "TabIndicatorProps": "Props applied to the tab indicator element.",
-    "TabScrollButtonProps": "Props applied to the <a href=\"/material-ui/api/tab-scroll-button/\"><code>TabScrollButton</code></a> element.",
-    "textColor": "Determines the color of the <code>Tab</code>.",
-    "value": "The value of the currently selected <code>Tab</code>. If you don&#39;t want any selected <code>Tab</code>, you can set this prop to <code>false</code>.",
-    "variant": "Determines additional display behavior of the tabs:<br> - <code>scrollable</code> will invoke scrolling properties and allow for horizontally  scrolling (or swiping) of the tab bar.  -<code>fullWidth</code> will make the tabs grow to use all the available space,  which should be used for small views, like on mobile.  - <code>standard</code> will render the default state.",
-    "visibleScrollbar": "If <code>true</code>, the scrollbar is visible. It can be useful when displaying a long vertical list of tabs."
+    "value": "The value of the currently selected <code>Tab</code>. If you don&#39;t want any selected <code>Tab</code>, you can set this prop to <code>null</code>.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
+    "root": { "description": "Classname applied to the root element." },
+    "horizontal": {
+      "description": "Classname applied to the root element if `orientation=\"horizontal\"`."
+    },
     "vertical": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>orientation=\"vertical\"</code>"
+      "description": "Classname applied to the root element if `orientation=\"vertical\"`."
     },
-    "flexContainer": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the flex container element"
+    "colorPrimary": {
+      "description": "Classname applied to the root element if `color=\"primary\"`."
     },
-    "flexContainerVertical": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the flex container element",
-      "conditions": "<code>orientation=\"vertical\"</code>"
+    "colorNeutral": {
+      "description": "Classname applied to the root element if `color=\"neutral\"`."
     },
-    "centered": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the flex container element",
-      "conditions": "<code>centered={true}</code> & <code>!variant=\"scrollable\"</code>"
+    "colorDanger": {
+      "description": "Classname applied to the root element if `color=\"danger\"`."
     },
-    "scroller": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the tablist element"
+    "colorInfo": { "description": "Classname applied to the root element if `color=\"info\"`." },
+    "colorSuccess": {
+      "description": "Classname applied to the root element if `color=\"success\"`."
     },
-    "fixed": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the tablist element",
-      "conditions": "<code>!variant=\"scrollable\"</code>\b\b\b"
+    "colorWarning": {
+      "description": "Classname applied to the root element if `color=\"warning\"`."
     },
-    "scrollableX": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the tablist element",
-      "conditions": "<code>variant=\"scrollable\"</code> and <code>orientation=\"horizontal\"</code>"
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
     },
-    "scrollableY": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the tablist element",
-      "conditions": "<code>variant=\"scrollable\"</code> and <code>orientation=\"vertical\"</code>"
+    "variantPlain": {
+      "description": "Classname applied to the root element if `variant=\"plain\"`."
     },
-    "hideScrollbar": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the tablist element",
-      "conditions": "<code>variant=\"scrollable\"</code> and <code>visibleScrollbar={false}</code>"
+    "variantOutlined": {
+      "description": "Classname applied to the root element if `variant=\"outlined\"`."
     },
-    "scrollButtons": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the ScrollButtonComponent component"
+    "variantSoft": {
+      "description": "Classname applied to the root element if `variant=\"soft\"`."
     },
-    "scrollButtonsHideMobile": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the ScrollButtonComponent component",
-      "conditions": "<code>allowScrollButtonsMobile={true}</code>"
+    "variantSolid": {
+      "description": "Classname applied to the root element if `variant=\"solid\"`."
     },
-    "indicator": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the TabIndicator component"
-    }
-  }
+    "sizeSm": { "description": "Classname applied to the root element if `size=\"sm\"`." },
+    "sizeMd": { "description": "Classname applied to the root element if `size=\"md\"`." },
+    "sizeLg": { "description": "Classname applied to the root element if `size=\"lg\"`." }
+  },
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/textarea/textarea.json b/docs/translations/api-docs/textarea/textarea.json
new file mode 100644
index 00000000000000..0992dbc61999f3
--- /dev/null
+++ b/docs/translations/api-docs/textarea/textarea.json
@@ -0,0 +1,122 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "endDecorator": "Trailing adornment for this input.",
+    "error": "If <code>true</code>, the <code>input</code> will indicate an error. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
+    "maxRows": "Maximum number of rows to display.",
+    "minRows": "Minimum number of rows to display.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "startDecorator": "Leading adornment for this input.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+  },
+  "classDescriptions": {
+    "root": { "description": "Class name applied to the root element." },
+    "textarea": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the textarea element"
+    },
+    "startDecorator": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the startDecorator element",
+      "conditions": "supplied"
+    },
+    "endDecorator": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the endDecorator element",
+      "conditions": "supplied"
+    },
+    "formControl": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "the component is a descendant of <code>FormControl</code>"
+    },
+    "disabled": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disabled={true}</code>"
+    },
+    "error": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>error={true}</code>"
+    },
+    "focused": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "the component is focused"
+    },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
+    },
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "textarea": "The component that renders the textarea.",
+    "startDecorator": "The component that renders the start decorator.",
+    "endDecorator": "The component that renders the end decorator."
+  }
+}
diff --git a/docs/translations/api-docs/tooltip/tooltip.json b/docs/translations/api-docs/tooltip/tooltip.json
index 410fdec86caacf..1052515510406b 100644
--- a/docs/translations/api-docs/tooltip/tooltip.json
+++ b/docs/translations/api-docs/tooltip/tooltip.json
@@ -2,89 +2,145 @@
   "componentDescription": "",
   "propDescriptions": {
     "arrow": "If <code>true</code>, adds an arrow to the tooltip.",
-    "children": "Tooltip reference element.<br>⚠️ <a href=\"/material-ui/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "components": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead.",
-    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
+    "children": "Tooltip reference element.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "describeChild": "Set to <code>true</code> if the <code>title</code> acts as an accessible description. By default the <code>title</code> acts as an accessible label for the child.",
+    "direction": "Direction of the text.",
     "disableFocusListener": "Do not respond to focus-visible events.",
     "disableHoverListener": "Do not respond to hover events.",
     "disableInteractive": "Makes a tooltip not interactive, i.e. it will close when the user hovers over the tooltip before the <code>leaveDelay</code> is expired.",
+    "disablePortal": "The <code>children</code> will be under the DOM hierarchy of the parent component.",
     "disableTouchListener": "Do not respond to long press touch events.",
     "enterDelay": "The number of milliseconds to wait before showing the tooltip. This prop won&#39;t impact the enter touch delay (<code>enterTouchDelay</code>).",
     "enterNextDelay": "The number of milliseconds to wait before showing the tooltip when one was already recently opened.",
     "enterTouchDelay": "The number of milliseconds a user must touch the element before showing the tooltip.",
     "followCursor": "If <code>true</code>, the tooltip follow the cursor over the wrapped element.",
     "id": "This prop is used to help implement the accessibility logic. If you don&#39;t provide this prop. It falls back to a randomly generated id.",
+    "keepMounted": "Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Popper.",
     "leaveDelay": "The number of milliseconds to wait before hiding the tooltip. This prop won&#39;t impact the leave touch delay (<code>leaveTouchDelay</code>).",
     "leaveTouchDelay": "The number of milliseconds after the user stops touching an element before hiding the tooltip.",
+    "modifiers": "Popper.js is based on a &quot;plugin-like&quot; architecture, most of its features are fully encapsulated &quot;modifiers&quot;.<br>A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks. To learn how to create a modifier, <a href=\"https://popper.js.org/docs/v2/modifiers/\">read the modifiers documentation</a>.",
     "onClose": "Callback fired when the component requests to be closed.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent) =&gt; void</code><br><em>event:</em> The event source of the callback.",
     "onOpen": "Callback fired when the component requests to be open.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent) =&gt; void</code><br><em>event:</em> The event source of the callback.",
     "open": "If <code>true</code>, the component is shown.",
     "placement": "Tooltip placement.",
-    "PopperComponent": "The component used for the popper.",
-    "PopperProps": "Props applied to the <a href=\"/material-ui/api/popper/\"><code>Popper</code></a> element.",
-    "slotProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future.",
-    "slots": "The components used for each slot inside.<br>This prop is an alias for the <code>components</code> prop, which will be deprecated in the future.",
+    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "title": "Tooltip title. Zero-length titles string, undefined, null and false are never displayed.",
-    "TransitionComponent": "The component used for the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component.",
-    "TransitionProps": "Props applied to the transition element. By default, the element is based on this <a href=\"http://reactcommunity.org/react-transition-group/transition/\"><code>Transition</code></a> component."
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "popper": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Popper component"
-    },
-    "popperInteractive": {
-      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
-      "nodeName": "the Popper component",
-      "conditions": "<code>disableInteractive={true}</code>"
-    },
-    "popperArrow": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the Popper component",
-      "conditions": "<code>arrow={true}</code>"
-    },
-    "popperClose": {
-      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
-      "nodeName": "the Popper component",
-      "conditions": "the tooltip is open"
-    },
-    "tooltip": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the tooltip (label wrapper) element"
-    },
+    "root": { "description": "Class name applied to the root element." },
     "tooltipArrow": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the tooltip (label wrapper) element",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
       "conditions": "<code>arrow={true}</code>"
     },
-    "arrow": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the arrow element" },
+    "arrow": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the arrow element"
+    },
     "touch": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the tooltip (label wrapper) element",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
       "conditions": "the tooltip is opened by touch"
     },
-    "tooltipPlacementLeft": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the tooltip (label wrapper) element",
+    "placementLeft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
       "conditions": "<code>placement</code> contains \"left\""
     },
-    "tooltipPlacementRight": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the tooltip (label wrapper) element",
+    "placementRight": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
       "conditions": "<code>placement</code> contains \"right\""
     },
-    "tooltipPlacementTop": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the tooltip (label wrapper) element",
+    "placementTop": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
       "conditions": "<code>placement</code> contains \"top\""
     },
-    "tooltipPlacementBottom": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the tooltip (label wrapper) element",
+    "placementBottom": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
       "conditions": "<code>placement</code> contains \"bottom\""
+    },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color inversion is triggered"
+    },
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
+    },
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
+    },
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "arrow": "The component that renders the arrow."
   }
 }
diff --git a/docs/translations/api-docs/typography/typography.json b/docs/translations/api-docs/typography/typography.json
index 8438692a0a0bea..fc995f10b485ef 100644
--- a/docs/translations/api-docs/typography/typography.json
+++ b/docs/translations/api-docs/typography/typography.json
@@ -1,123 +1,139 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "align": "Set the text-align on the component.",
     "children": "The content of the component.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "endDecorator": "Element placed after the children.",
     "gutterBottom": "If <code>true</code>, the text will have a bottom margin.",
+    "level": "Applies the theme typography styles.",
+    "levelMapping": "The component maps the variant prop to a range of different HTML element types. For instance, body1 to <code>&lt;h6&gt;</code>. If you wish to change that mapping, you can provide your own. Alternatively, you can use the <code>component</code> prop.",
     "noWrap": "If <code>true</code>, the text will not wrap, but instead will truncate with a text overflow ellipsis.<br>Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow).",
-    "paragraph": "If <code>true</code>, the element will be a paragraph element.",
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "startDecorator": "Element placed before the children.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "Applies the theme typography styles.",
-    "variantMapping": "The component maps the variant prop to a range of different HTML element types. For instance, subtitle1 to <code>&lt;h6&gt;</code>. If you wish to change that mapping, you can provide your own. Alternatively, you can use the <code>component</code> prop."
+    "textColor": "The system color.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
-    "body2": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "root": { "description": "Class name applied to the root element." },
+    "h1": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"body2\"</code>"
+      "conditions": "<code>level=\"h1\"</code>"
     },
-    "body1": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "h2": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"body1\"</code>"
+      "conditions": "<code>level=\"h2\"</code>"
     },
-    "caption": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "h3": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"caption\"</code>"
+      "conditions": "<code>level=\"h3\"</code>"
     },
-    "button": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "h4": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"button\"</code>"
+      "conditions": "<code>level=\"h4\"</code>"
     },
-    "h1": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "h5": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"h1\"</code>"
+      "conditions": "<code>level=\"h5\"</code>"
     },
-    "h2": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "h6": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"h2\"</code>"
+      "conditions": "<code>level=\"h6\"</code>"
     },
-    "h3": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "body1": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"h3\"</code>"
+      "conditions": "<code>level=\"body1\"</code>"
     },
-    "h4": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "body2": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"h4\"</code>"
+      "conditions": "<code>level=\"body2\"</code>"
     },
-    "h5": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "body3": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"h5\"</code>"
+      "conditions": "<code>level=\"body3\"</code>"
     },
-    "h6": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "noWrap": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"h6\"</code>"
+      "conditions": "<code>nowrap={true}</code>"
     },
-    "subtitle1": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "gutterBottom": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"subtitle1\"</code>"
+      "conditions": "<code>gutterBottom={true}</code>"
     },
-    "subtitle2": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "startDecorator": { "description": "Class name applied to the startDecorator element" },
+    "endDecorator": { "description": "Class name applied to the endDecorator element" },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"subtitle2\"</code>"
+      "conditions": "<code>color=\"primary\"</code>"
     },
-    "overline": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"overline\"</code>"
+      "conditions": "<code>color=\"neutral\"</code>"
     },
-    "inherit": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"inherit\"</code>"
+      "conditions": "<code>color=\"danger\"</code>"
     },
-    "alignLeft": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>align=\"left\"</code>"
+      "conditions": "<code>color=\"info\"</code>"
     },
-    "alignCenter": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>align=\"center\"</code>"
+      "conditions": "<code>color=\"success\"</code>"
     },
-    "alignRight": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>align=\"right\"</code>"
+      "conditions": "<code>color=\"warning\"</code>"
     },
-    "alignJustify": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>align=\"justify\"</code>"
+      "conditions": "color inversion is triggered"
     },
-    "noWrap": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantPlain": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>nowrap={true}</code>"
+      "conditions": "<code>variant=\"plain\"</code>"
     },
-    "gutterBottom": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantOutlined": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>gutterBottom={true}</code>"
+      "conditions": "<code>variant=\"outlined\"</code>"
     },
-    "paragraph": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+    "variantSoft": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>paragraph={true}</code>"
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantSolid": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "startDecorator": "The component that renders the start decorator.",
+    "endDecorator": "The component that renders the end decorator."
   }
 }
diff --git a/packages/mui-base/src/Button/Button.tsx b/packages/mui-base/src/Button/Button.tsx
index 9f952f48571ed5..ee7e9aaec317e1 100644
--- a/packages/mui-base/src/Button/Button.tsx
+++ b/packages/mui-base/src/Button/Button.tsx
@@ -28,7 +28,7 @@ const useUtilityClasses = (ownerState: ButtonOwnerState) => {
  *
  * Demos:
  *
- * - [Button](https://mui.com/base/react-button/)
+ * - [Unstyled Button](https://mui.com/base/react-button/)
  *
  * API:
  *
diff --git a/packages/mui-base/src/useButton/useButton.ts b/packages/mui-base/src/useButton/useButton.ts
index 70c6ceba2731e5..d7a1e93a13f879 100644
--- a/packages/mui-base/src/useButton/useButton.ts
+++ b/packages/mui-base/src/useButton/useButton.ts
@@ -14,7 +14,7 @@ import { EventHandlers } from '../utils/types';
  *
  * Demos:
  *
- * - [Button](https://mui.com/base/react-button/#hook)
+ * - [Unstyled Button](https://mui.com/base/react-button/#hook)
  *
  * API:
  *

From 641bd2676994dd0d5314e06c6ed0149f9c577190 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 25 Apr 2023 09:46:43 +0200
Subject: [PATCH 18/30] fix some issues

---
 .../OverridingRootSlot.tsx.preview                            | 2 +-
 packages/api-docs-builder/buildApiUtils.test.ts               | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx.preview b/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx.preview
index 365e95d254935c..d8e8070585ac6a 100644
--- a/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx.preview
+++ b/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx.preview
@@ -1 +1 @@
-<Button slots={{ root: 'div' }}>Button</Button>
+<Button slots={{ root: 'div' }}>Button</Button>
\ No newline at end of file
diff --git a/packages/api-docs-builder/buildApiUtils.test.ts b/packages/api-docs-builder/buildApiUtils.test.ts
index f27b85cc38cf64..1fd6c7d14a5733 100644
--- a/packages/api-docs-builder/buildApiUtils.test.ts
+++ b/packages/api-docs-builder/buildApiUtils.test.ts
@@ -128,7 +128,7 @@ describe('buildApiUtils', () => {
         path.join(process.cwd(), `/packages/mui-base/src/Button/Button.tsx`),
       );
       sinon.assert.match(info, {
-        name: 'Button',
+        name: 'Unstyled Button',
         apiPathname: '/base/react-button/components-api/#button',
         muiName: 'MuiButton',
         apiPagesDirectory: sinon.match((value) =>
@@ -176,7 +176,7 @@ describe('buildApiUtils', () => {
       if (existed) {
         expect(info.getDemos()).to.deep.equal([
           {
-            demoPageTitle: 'Button',
+            demoPageTitle: 'Unstyled Button',
             demoPathname: '/base/react-button/#hook',
           },
         ]);

From 27e0da13ba9eba656fd85b304d7b7c9778451619 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 25 Apr 2023 09:59:51 +0200
Subject: [PATCH 19/30] fix wrong path separators

---
 docs/pages/joy-ui/api/alert.js                |   2 +-
 docs/pages/joy-ui/api/aspect-ratio.js         |   2 +-
 docs/pages/joy-ui/api/autocomplete-listbox.js |   2 +-
 docs/pages/joy-ui/api/autocomplete-option.js  |   2 +-
 docs/pages/joy-ui/api/autocomplete.js         |   2 +-
 docs/pages/joy-ui/api/avatar-group.js         |   2 +-
 docs/pages/joy-ui/api/avatar.js               |   2 +-
 docs/pages/joy-ui/api/badge.js                |   2 +-
 docs/pages/joy-ui/api/breadcrumbs.js          |   2 +-
 docs/pages/joy-ui/api/button.js               |   2 +-
 docs/pages/joy-ui/api/card-content.js         |   2 +-
 docs/pages/joy-ui/api/card-cover.js           |   6 +-
 docs/pages/joy-ui/api/card-overflow.js        |   2 +-
 docs/pages/joy-ui/api/card.js                 |   2 +-
 docs/pages/joy-ui/api/checkbox.js             |   2 +-
 docs/pages/joy-ui/api/chip-delete.js          |   2 +-
 docs/pages/joy-ui/api/chip.js                 |   2 +-
 docs/pages/joy-ui/api/circular-progress.js    |   2 +-
 docs/pages/joy-ui/api/css-baseline.js         |   2 +-
 docs/pages/joy-ui/api/divider.js              |   2 +-
 docs/pages/joy-ui/api/form-control.js         |   2 +-
 docs/pages/joy-ui/api/form-helper-text.js     |   2 +-
 docs/pages/joy-ui/api/form-label.js           |   6 +-
 docs/pages/joy-ui/api/icon-button.js          |   2 +-
 docs/pages/joy-ui/api/input.js                |   2 +-
 docs/pages/joy-ui/api/linear-progress.js      |   2 +-
 docs/pages/joy-ui/api/link.js                 |   2 +-
 docs/pages/joy-ui/api/list-divider.js         |   2 +-
 docs/pages/joy-ui/api/list-item-button.js     |   2 +-
 docs/pages/joy-ui/api/list-item-content.js    |   2 +-
 docs/pages/joy-ui/api/list-item-decorator.js  |   2 +-
 docs/pages/joy-ui/api/list-item.js            |   6 +-
 docs/pages/joy-ui/api/list-subheader.js       |   2 +-
 docs/pages/joy-ui/api/list.js                 |   2 +-
 docs/pages/joy-ui/api/menu-item.js            |   6 +-
 docs/pages/joy-ui/api/menu-list.js            |   6 +-
 docs/pages/joy-ui/api/menu.js                 |   2 +-
 docs/pages/joy-ui/api/modal-close.js          |   2 +-
 docs/pages/joy-ui/api/modal-dialog.js         |   2 +-
 docs/pages/joy-ui/api/modal-overflow.js       |   2 +-
 docs/pages/joy-ui/api/modal.js                |   2 +-
 docs/pages/joy-ui/api/option.js               |   2 +-
 docs/pages/joy-ui/api/radio-group.js          |   2 +-
 docs/pages/joy-ui/api/radio.js                |   2 +-
 docs/pages/joy-ui/api/scoped-css-baseline.js  |   2 +-
 docs/pages/joy-ui/api/select.js               |   2 +-
 docs/pages/joy-ui/api/sheet.js                |   2 +-
 docs/pages/joy-ui/api/slider.js               |   2 +-
 docs/pages/joy-ui/api/stack.js                |   2 +-
 docs/pages/joy-ui/api/svg-icon.js             |   2 +-
 docs/pages/joy-ui/api/switch.js               |   2 +-
 docs/pages/joy-ui/api/tab-list.js             |   2 +-
 docs/pages/joy-ui/api/tab-panel.js            |   6 +-
 docs/pages/joy-ui/api/tab.js                  |   2 +-
 docs/pages/joy-ui/api/table.js                |   2 +-
 docs/pages/joy-ui/api/tabs.js                 |   2 +-
 docs/pages/joy-ui/api/textarea.js             |   2 +-
 docs/pages/joy-ui/api/tooltip.js              |   2 +-
 docs/pages/joy-ui/api/typography.js           |   6 +-
 docs/translations/api-docs/alert/alert.json   | 140 +++++-----
 .../api-docs/autocomplete/autocomplete.json   | 238 ++++++----------
 .../api-docs/avatar-group/avatar-group.json   |  23 +-
 docs/translations/api-docs/avatar/avatar.json |  92 ++----
 docs/translations/api-docs/badge/badge.json   | 110 +-------
 .../api-docs/breadcrumbs/breadcrumbs.json     |  39 +--
 docs/translations/api-docs/button/button.json | 130 +--------
 .../api-docs/card-content/card-content.json   |   8 +-
 docs/translations/api-docs/card/card.json     |  99 +------
 .../api-docs/checkbox/checkbox.json           | 126 ++-------
 docs/translations/api-docs/chip/chip.json     | 264 ++++++++++++------
 .../circular-progress/circular-progress.json  | 116 +++-----
 .../api-docs/css-baseline/css-baseline.json   |   2 +-
 .../api-docs/divider/divider.json             |  81 ++++--
 .../api-docs/form-control/form-control.json   |  88 +-----
 .../form-helper-text/form-helper-text.json    |  54 +++-
 .../api-docs/form-label/form-label.json       |  48 +++-
 .../api-docs/icon-button/icon-button.json     | 107 +++----
 docs/translations/api-docs/input/input.json   | 132 +++------
 .../linear-progress/linear-progress.json      | 138 ++++-----
 docs/translations/api-docs/link/link.json     | 145 ++--------
 .../list-item-button/list-item-button.json    | 107 ++-----
 .../api-docs/list-item/list-item.json         | 146 +++++-----
 .../list-subheader/list-subheader.json        |  80 ++----
 docs/translations/api-docs/list/list.json     |  71 ++---
 .../api-docs/menu-item/menu-item.json         |  78 +-----
 .../api-docs/menu-list/menu-list.json         |  72 ++---
 docs/translations/api-docs/menu/menu.json     |  70 ++---
 docs/translations/api-docs/modal/modal.json   |  16 +-
 docs/translations/api-docs/option/option.json |  79 +-----
 .../api-docs/radio-group/radio-group.json     |  98 +------
 docs/translations/api-docs/radio/radio.json   | 133 ++-------
 .../scoped-css-baseline.json                  |  10 +-
 docs/translations/api-docs/select/select.json | 141 ++--------
 docs/translations/api-docs/slider/slider.json | 108 ++-----
 .../api-docs/svg-icon/svg-icon.json           | 103 ++-----
 docs/translations/api-docs/switch/switch.json | 118 +-------
 .../api-docs/tab-list/tab-list.json           | 106 +++----
 .../api-docs/tab-panel/tab-panel.json         |  27 +-
 docs/translations/api-docs/tab/tab.json       |  64 +----
 docs/translations/api-docs/table/table.json   | 140 +---------
 docs/translations/api-docs/tabs/tabs.json     |  56 +---
 .../api-docs/tooltip/tooltip.json             | 156 ++++-------
 .../api-docs/typography/typography.json       | 154 +++++-----
 .../ApiBuilders/ComponentApiBuilder.ts        |   4 +-
 104 files changed, 1429 insertions(+), 3034 deletions(-)

diff --git a/docs/pages/joy-ui/api/alert.js b/docs/pages/joy-ui/api/alert.js
index f676f9ab4475f1..1beef9603135c9 100644
--- a/docs/pages/joy-ui/api/alert.js
+++ b/docs/pages/joy-ui/api/alert.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/alert', false, /alert.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/alert', false, /alert.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/aspect-ratio.js b/docs/pages/joy-ui/api/aspect-ratio.js
index 071e2029415cd8..ff99079a85af64 100644
--- a/docs/pages/joy-ui/api/aspect-ratio.js
+++ b/docs/pages/joy-ui/api/aspect-ratio.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/aspect-ratio',
+    'docs/translations/api-docs-joy/aspect-ratio',
     false,
     /aspect-ratio.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/autocomplete-listbox.js b/docs/pages/joy-ui/api/autocomplete-listbox.js
index 5922969487241e..e79dc1da495467 100644
--- a/docs/pages/joy-ui/api/autocomplete-listbox.js
+++ b/docs/pages/joy-ui/api/autocomplete-listbox.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/autocomplete-listbox',
+    'docs/translations/api-docs-joy/autocomplete-listbox',
     false,
     /autocomplete-listbox.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/autocomplete-option.js b/docs/pages/joy-ui/api/autocomplete-option.js
index 8835b989490bfa..8304139be937e1 100644
--- a/docs/pages/joy-ui/api/autocomplete-option.js
+++ b/docs/pages/joy-ui/api/autocomplete-option.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/autocomplete-option',
+    'docs/translations/api-docs-joy/autocomplete-option',
     false,
     /autocomplete-option.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/autocomplete.js b/docs/pages/joy-ui/api/autocomplete.js
index ea7bc74e15919f..e860d625a4952d 100644
--- a/docs/pages/joy-ui/api/autocomplete.js
+++ b/docs/pages/joy-ui/api/autocomplete.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/autocomplete',
+    'docs/translations/api-docs-joy/autocomplete',
     false,
     /autocomplete.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/avatar-group.js b/docs/pages/joy-ui/api/avatar-group.js
index b1e7dd07841f4d..c5ccfec00272ea 100644
--- a/docs/pages/joy-ui/api/avatar-group.js
+++ b/docs/pages/joy-ui/api/avatar-group.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/avatar-group',
+    'docs/translations/api-docs-joy/avatar-group',
     false,
     /avatar-group.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/avatar.js b/docs/pages/joy-ui/api/avatar.js
index ff34aacf10fd9a..57a3395ab0730a 100644
--- a/docs/pages/joy-ui/api/avatar.js
+++ b/docs/pages/joy-ui/api/avatar.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/avatar', false, /avatar.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/avatar', false, /avatar.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/badge.js b/docs/pages/joy-ui/api/badge.js
index 18d7387490b512..934d17137e217d 100644
--- a/docs/pages/joy-ui/api/badge.js
+++ b/docs/pages/joy-ui/api/badge.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/badge', false, /badge.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/badge', false, /badge.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/breadcrumbs.js b/docs/pages/joy-ui/api/breadcrumbs.js
index 4fe89696f281ae..afb0cff96967f1 100644
--- a/docs/pages/joy-ui/api/breadcrumbs.js
+++ b/docs/pages/joy-ui/api/breadcrumbs.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/breadcrumbs',
+    'docs/translations/api-docs-joy/breadcrumbs',
     false,
     /breadcrumbs.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/button.js b/docs/pages/joy-ui/api/button.js
index 66ad9f22ef0c47..2921080c103f66 100644
--- a/docs/pages/joy-ui/api/button.js
+++ b/docs/pages/joy-ui/api/button.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/button', false, /button.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/button', false, /button.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/card-content.js b/docs/pages/joy-ui/api/card-content.js
index f8529aba2bbde4..9ed9f2faacfc3f 100644
--- a/docs/pages/joy-ui/api/card-content.js
+++ b/docs/pages/joy-ui/api/card-content.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/card-content',
+    'docs/translations/api-docs-joy/card-content',
     false,
     /card-content.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/card-cover.js b/docs/pages/joy-ui/api/card-cover.js
index 6e14e77bf0666f..0236dc8169b6f1 100644
--- a/docs/pages/joy-ui/api/card-cover.js
+++ b/docs/pages/joy-ui/api/card-cover.js
@@ -9,7 +9,11 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/card-cover', false, /card-cover.*.json$/);
+  const req = require.context(
+    'docs/translations/api-docs-joy/card-cover',
+    false,
+    /card-cover.*.json$/,
+  );
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/card-overflow.js b/docs/pages/joy-ui/api/card-overflow.js
index 1106b1c0f7a3c1..2b57750faa905a 100644
--- a/docs/pages/joy-ui/api/card-overflow.js
+++ b/docs/pages/joy-ui/api/card-overflow.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/card-overflow',
+    'docs/translations/api-docs-joy/card-overflow',
     false,
     /card-overflow.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/card.js b/docs/pages/joy-ui/api/card.js
index 91bcc50d89eac4..5da0e773bb2a6d 100644
--- a/docs/pages/joy-ui/api/card.js
+++ b/docs/pages/joy-ui/api/card.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/card', false, /card.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/card', false, /card.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/checkbox.js b/docs/pages/joy-ui/api/checkbox.js
index 90a006ee745260..0df2f4c56de0b7 100644
--- a/docs/pages/joy-ui/api/checkbox.js
+++ b/docs/pages/joy-ui/api/checkbox.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/checkbox', false, /checkbox.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/checkbox', false, /checkbox.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/chip-delete.js b/docs/pages/joy-ui/api/chip-delete.js
index 0d3f508dfc08ea..39698b8886be15 100644
--- a/docs/pages/joy-ui/api/chip-delete.js
+++ b/docs/pages/joy-ui/api/chip-delete.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/chip-delete',
+    'docs/translations/api-docs-joy/chip-delete',
     false,
     /chip-delete.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/chip.js b/docs/pages/joy-ui/api/chip.js
index dce59e6ca9c489..becc5c4656a95b 100644
--- a/docs/pages/joy-ui/api/chip.js
+++ b/docs/pages/joy-ui/api/chip.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/chip', false, /chip.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/chip', false, /chip.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/circular-progress.js b/docs/pages/joy-ui/api/circular-progress.js
index 3c1f447e891e4d..99973fb75b7d20 100644
--- a/docs/pages/joy-ui/api/circular-progress.js
+++ b/docs/pages/joy-ui/api/circular-progress.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/circular-progress',
+    'docs/translations/api-docs-joy/circular-progress',
     false,
     /circular-progress.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/css-baseline.js b/docs/pages/joy-ui/api/css-baseline.js
index 6bb60d8ee9f04c..6fe78ac3fb9d43 100644
--- a/docs/pages/joy-ui/api/css-baseline.js
+++ b/docs/pages/joy-ui/api/css-baseline.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/css-baseline',
+    'docs/translations/api-docs-joy/css-baseline',
     false,
     /css-baseline.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/divider.js b/docs/pages/joy-ui/api/divider.js
index 72044e9d17d343..018e205ed7d7ea 100644
--- a/docs/pages/joy-ui/api/divider.js
+++ b/docs/pages/joy-ui/api/divider.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/divider', false, /divider.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/divider', false, /divider.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/form-control.js b/docs/pages/joy-ui/api/form-control.js
index 380d4f46e73625..fe1436d9acbf30 100644
--- a/docs/pages/joy-ui/api/form-control.js
+++ b/docs/pages/joy-ui/api/form-control.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/form-control',
+    'docs/translations/api-docs-joy/form-control',
     false,
     /form-control.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/form-helper-text.js b/docs/pages/joy-ui/api/form-helper-text.js
index f90e49d2cff7d3..bb9f7d5ef3010c 100644
--- a/docs/pages/joy-ui/api/form-helper-text.js
+++ b/docs/pages/joy-ui/api/form-helper-text.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/form-helper-text',
+    'docs/translations/api-docs-joy/form-helper-text',
     false,
     /form-helper-text.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/form-label.js b/docs/pages/joy-ui/api/form-label.js
index 029a4b5d721a95..a17441b6360311 100644
--- a/docs/pages/joy-ui/api/form-label.js
+++ b/docs/pages/joy-ui/api/form-label.js
@@ -9,7 +9,11 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/form-label', false, /form-label.*.json$/);
+  const req = require.context(
+    'docs/translations/api-docs-joy/form-label',
+    false,
+    /form-label.*.json$/,
+  );
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/icon-button.js b/docs/pages/joy-ui/api/icon-button.js
index 8d880c94791f40..b74a97145df7bb 100644
--- a/docs/pages/joy-ui/api/icon-button.js
+++ b/docs/pages/joy-ui/api/icon-button.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/icon-button',
+    'docs/translations/api-docs-joy/icon-button',
     false,
     /icon-button.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/input.js b/docs/pages/joy-ui/api/input.js
index e23210a40a1e98..5148e848df28b1 100644
--- a/docs/pages/joy-ui/api/input.js
+++ b/docs/pages/joy-ui/api/input.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/input', false, /input.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/input', false, /input.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/linear-progress.js b/docs/pages/joy-ui/api/linear-progress.js
index 9a53abc65ef7bf..913b381ac10b9d 100644
--- a/docs/pages/joy-ui/api/linear-progress.js
+++ b/docs/pages/joy-ui/api/linear-progress.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/linear-progress',
+    'docs/translations/api-docs-joy/linear-progress',
     false,
     /linear-progress.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/link.js b/docs/pages/joy-ui/api/link.js
index 169cf91892fca4..cefc7a511cf31a 100644
--- a/docs/pages/joy-ui/api/link.js
+++ b/docs/pages/joy-ui/api/link.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/link', false, /link.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/link', false, /link.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/list-divider.js b/docs/pages/joy-ui/api/list-divider.js
index e1fb8484708de4..7368cf339d4cb5 100644
--- a/docs/pages/joy-ui/api/list-divider.js
+++ b/docs/pages/joy-ui/api/list-divider.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/list-divider',
+    'docs/translations/api-docs-joy/list-divider',
     false,
     /list-divider.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/list-item-button.js b/docs/pages/joy-ui/api/list-item-button.js
index a9307d09e55004..e89eeff96e040a 100644
--- a/docs/pages/joy-ui/api/list-item-button.js
+++ b/docs/pages/joy-ui/api/list-item-button.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/list-item-button',
+    'docs/translations/api-docs-joy/list-item-button',
     false,
     /list-item-button.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/list-item-content.js b/docs/pages/joy-ui/api/list-item-content.js
index bcc09cb276402a..46a470fbd462f6 100644
--- a/docs/pages/joy-ui/api/list-item-content.js
+++ b/docs/pages/joy-ui/api/list-item-content.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/list-item-content',
+    'docs/translations/api-docs-joy/list-item-content',
     false,
     /list-item-content.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/list-item-decorator.js b/docs/pages/joy-ui/api/list-item-decorator.js
index 0f0cdca73f183a..34d3416aeb72fa 100644
--- a/docs/pages/joy-ui/api/list-item-decorator.js
+++ b/docs/pages/joy-ui/api/list-item-decorator.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/list-item-decorator',
+    'docs/translations/api-docs-joy/list-item-decorator',
     false,
     /list-item-decorator.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/list-item.js b/docs/pages/joy-ui/api/list-item.js
index 4fc2f704505775..795326d3b784e8 100644
--- a/docs/pages/joy-ui/api/list-item.js
+++ b/docs/pages/joy-ui/api/list-item.js
@@ -9,7 +9,11 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/list-item', false, /list-item.*.json$/);
+  const req = require.context(
+    'docs/translations/api-docs-joy/list-item',
+    false,
+    /list-item.*.json$/,
+  );
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/list-subheader.js b/docs/pages/joy-ui/api/list-subheader.js
index 76f688f634b7b4..40c4ae82a46e44 100644
--- a/docs/pages/joy-ui/api/list-subheader.js
+++ b/docs/pages/joy-ui/api/list-subheader.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/list-subheader',
+    'docs/translations/api-docs-joy/list-subheader',
     false,
     /list-subheader.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/list.js b/docs/pages/joy-ui/api/list.js
index f9e574b5dd8fee..eb6d30911256fa 100644
--- a/docs/pages/joy-ui/api/list.js
+++ b/docs/pages/joy-ui/api/list.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/list', false, /list.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/list', false, /list.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/menu-item.js b/docs/pages/joy-ui/api/menu-item.js
index 0ade9979d879a0..7c25eabddc7a9d 100644
--- a/docs/pages/joy-ui/api/menu-item.js
+++ b/docs/pages/joy-ui/api/menu-item.js
@@ -9,7 +9,11 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/menu-item', false, /menu-item.*.json$/);
+  const req = require.context(
+    'docs/translations/api-docs-joy/menu-item',
+    false,
+    /menu-item.*.json$/,
+  );
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/menu-list.js b/docs/pages/joy-ui/api/menu-list.js
index 98269ca9d3408e..328df9707e3920 100644
--- a/docs/pages/joy-ui/api/menu-list.js
+++ b/docs/pages/joy-ui/api/menu-list.js
@@ -9,7 +9,11 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/menu-list', false, /menu-list.*.json$/);
+  const req = require.context(
+    'docs/translations/api-docs-joy/menu-list',
+    false,
+    /menu-list.*.json$/,
+  );
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/menu.js b/docs/pages/joy-ui/api/menu.js
index 7ed6ff1f4cf692..9d8852e164459a 100644
--- a/docs/pages/joy-ui/api/menu.js
+++ b/docs/pages/joy-ui/api/menu.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/menu', false, /menu.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/menu', false, /menu.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/modal-close.js b/docs/pages/joy-ui/api/modal-close.js
index 6acbd161ff954e..2e1f20037a8b9b 100644
--- a/docs/pages/joy-ui/api/modal-close.js
+++ b/docs/pages/joy-ui/api/modal-close.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/modal-close',
+    'docs/translations/api-docs-joy/modal-close',
     false,
     /modal-close.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/modal-dialog.js b/docs/pages/joy-ui/api/modal-dialog.js
index dca619aae97ae8..7a075af2d745a4 100644
--- a/docs/pages/joy-ui/api/modal-dialog.js
+++ b/docs/pages/joy-ui/api/modal-dialog.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/modal-dialog',
+    'docs/translations/api-docs-joy/modal-dialog',
     false,
     /modal-dialog.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/modal-overflow.js b/docs/pages/joy-ui/api/modal-overflow.js
index b832c31cedd1d7..05d8f4ee7ca5e4 100644
--- a/docs/pages/joy-ui/api/modal-overflow.js
+++ b/docs/pages/joy-ui/api/modal-overflow.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/modal-overflow',
+    'docs/translations/api-docs-joy/modal-overflow',
     false,
     /modal-overflow.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/modal.js b/docs/pages/joy-ui/api/modal.js
index d3c0a292b31b49..ef6790a308f66d 100644
--- a/docs/pages/joy-ui/api/modal.js
+++ b/docs/pages/joy-ui/api/modal.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/modal', false, /modal.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/modal', false, /modal.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/option.js b/docs/pages/joy-ui/api/option.js
index 407f0a0c666e6c..5e0ef1712e7508 100644
--- a/docs/pages/joy-ui/api/option.js
+++ b/docs/pages/joy-ui/api/option.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/option', false, /option.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/option', false, /option.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/radio-group.js b/docs/pages/joy-ui/api/radio-group.js
index 3a7599262211b2..d06674a93711c6 100644
--- a/docs/pages/joy-ui/api/radio-group.js
+++ b/docs/pages/joy-ui/api/radio-group.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/radio-group',
+    'docs/translations/api-docs-joy/radio-group',
     false,
     /radio-group.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/radio.js b/docs/pages/joy-ui/api/radio.js
index f0280245c1d835..3aa10955c27845 100644
--- a/docs/pages/joy-ui/api/radio.js
+++ b/docs/pages/joy-ui/api/radio.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/radio', false, /radio.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/radio', false, /radio.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/scoped-css-baseline.js b/docs/pages/joy-ui/api/scoped-css-baseline.js
index 4cbb0177db7fc6..169d8079db865d 100644
--- a/docs/pages/joy-ui/api/scoped-css-baseline.js
+++ b/docs/pages/joy-ui/api/scoped-css-baseline.js
@@ -10,7 +10,7 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/scoped-css-baseline',
+    'docs/translations/api-docs-joy/scoped-css-baseline',
     false,
     /scoped-css-baseline.*.json$/,
   );
diff --git a/docs/pages/joy-ui/api/select.js b/docs/pages/joy-ui/api/select.js
index 42e65d0af26441..2aee4a53ac36ce 100644
--- a/docs/pages/joy-ui/api/select.js
+++ b/docs/pages/joy-ui/api/select.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/select', false, /select.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/select', false, /select.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/sheet.js b/docs/pages/joy-ui/api/sheet.js
index 919c00509ce008..01e2356cf17d4e 100644
--- a/docs/pages/joy-ui/api/sheet.js
+++ b/docs/pages/joy-ui/api/sheet.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/sheet', false, /sheet.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/sheet', false, /sheet.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/slider.js b/docs/pages/joy-ui/api/slider.js
index 768c767c931f60..8b09d18829b5fa 100644
--- a/docs/pages/joy-ui/api/slider.js
+++ b/docs/pages/joy-ui/api/slider.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/slider', false, /slider.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/slider', false, /slider.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/stack.js b/docs/pages/joy-ui/api/stack.js
index 9544e37c5e9ad1..fb0d64b8ba91a4 100644
--- a/docs/pages/joy-ui/api/stack.js
+++ b/docs/pages/joy-ui/api/stack.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/stack', false, /stack.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/stack', false, /stack.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/svg-icon.js b/docs/pages/joy-ui/api/svg-icon.js
index 6353473c58fe18..5587325c7a8351 100644
--- a/docs/pages/joy-ui/api/svg-icon.js
+++ b/docs/pages/joy-ui/api/svg-icon.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/svg-icon', false, /svg-icon.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/svg-icon', false, /svg-icon.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/switch.js b/docs/pages/joy-ui/api/switch.js
index 6038ed77d88509..251a53ea2dde37 100644
--- a/docs/pages/joy-ui/api/switch.js
+++ b/docs/pages/joy-ui/api/switch.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/switch', false, /switch.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/switch', false, /switch.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/tab-list.js b/docs/pages/joy-ui/api/tab-list.js
index 922412b7c1ed55..05c1990d59aca3 100644
--- a/docs/pages/joy-ui/api/tab-list.js
+++ b/docs/pages/joy-ui/api/tab-list.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/tab-list', false, /tab-list.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/tab-list', false, /tab-list.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/tab-panel.js b/docs/pages/joy-ui/api/tab-panel.js
index f7a6710df28eb8..a3ad5d3d2b35d0 100644
--- a/docs/pages/joy-ui/api/tab-panel.js
+++ b/docs/pages/joy-ui/api/tab-panel.js
@@ -9,7 +9,11 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/tab-panel', false, /tab-panel.*.json$/);
+  const req = require.context(
+    'docs/translations/api-docs-joy/tab-panel',
+    false,
+    /tab-panel.*.json$/,
+  );
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/tab.js b/docs/pages/joy-ui/api/tab.js
index 9a39374793fe55..946f0bad09c092 100644
--- a/docs/pages/joy-ui/api/tab.js
+++ b/docs/pages/joy-ui/api/tab.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/tab', false, /tab.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/tab', false, /tab.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/table.js b/docs/pages/joy-ui/api/table.js
index eac919239c9b5d..f72830a7e92af2 100644
--- a/docs/pages/joy-ui/api/table.js
+++ b/docs/pages/joy-ui/api/table.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/table', false, /table.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/table', false, /table.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/tabs.js b/docs/pages/joy-ui/api/tabs.js
index 89fb45a9a0359a..88c7dbafee813f 100644
--- a/docs/pages/joy-ui/api/tabs.js
+++ b/docs/pages/joy-ui/api/tabs.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/tabs', false, /tabs.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/tabs', false, /tabs.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/textarea.js b/docs/pages/joy-ui/api/textarea.js
index ca4a8077f21281..4acc6adc593e90 100644
--- a/docs/pages/joy-ui/api/textarea.js
+++ b/docs/pages/joy-ui/api/textarea.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/textarea', false, /textarea.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/textarea', false, /textarea.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/tooltip.js b/docs/pages/joy-ui/api/tooltip.js
index 83ec1312d014c9..50d17684416fb8 100644
--- a/docs/pages/joy-ui/api/tooltip.js
+++ b/docs/pages/joy-ui/api/tooltip.js
@@ -9,7 +9,7 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/tooltip', false, /tooltip.*.json$/);
+  const req = require.context('docs/translations/api-docs-joy/tooltip', false, /tooltip.*.json$/);
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/pages/joy-ui/api/typography.js b/docs/pages/joy-ui/api/typography.js
index 5b2785af0f9655..d159b1190f218d 100644
--- a/docs/pages/joy-ui/api/typography.js
+++ b/docs/pages/joy-ui/api/typography.js
@@ -9,7 +9,11 @@ export default function Page(props) {
 }
 
 Page.getInitialProps = () => {
-  const req = require.context('docs/translations/api-docs/typography', false, /typography.*.json$/);
+  const req = require.context(
+    'docs/translations/api-docs-joy/typography',
+    false,
+    /typography.*.json$/,
+  );
   const descriptions = mapApiPageTranslations(req);
 
   return {
diff --git a/docs/translations/api-docs/alert/alert.json b/docs/translations/api-docs/alert/alert.json
index 272cde996ffc11..ea1893da3a3810 100644
--- a/docs/translations/api-docs/alert/alert.json
+++ b/docs/translations/api-docs/alert/alert.json
@@ -1,104 +1,112 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "endDecorator": "Element placed after the children.",
-    "invertedColors": "If <code>true</code>, the children with an implicit color prop invert their colors to match the component&#39;s variant and color.",
+    "action": "The action to display. It renders after the message, at the end of the alert.",
+    "children": "The content of the component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "closeText": "Override the default label for the <em>close popup</em> icon button.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
+    "color": "The color of the component. Unless provided, the value is taken from the <code>severity</code> prop. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
+    "components": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead.",
+    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
+    "icon": "Override the icon displayed before the children. Unless provided, the icon is mapped to the value of the <code>severity</code> prop. Set to <code>false</code> to remove the <code>icon</code>.",
+    "iconMapping": "The component maps the <code>severity</code> prop to a range of different icons, for instance success to <code>&lt;SuccessOutlined&gt;</code>. If you wish to change this mapping, you can provide your own. Alternatively, you can use the <code>icon</code> prop to override the icon displayed.",
+    "onClose": "Callback fired when the component requests to be closed. When provided and no <code>action</code> prop is set, a close icon button is displayed that triggers the callback when clicked.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent) =&gt; void</code><br><em>event:</em> The event source of the callback.",
     "role": "The ARIA role attribute of the element.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "startDecorator": "Element placed before the children.",
+    "severity": "The severity of the alert. This defines the color and icon used.",
+    "slotProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future.",
+    "slots": "The components used for each slot inside.<br>This prop is an alias for the <code>components</code> prop, which will be deprecated in the future.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "variant": "The variant to use."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "root": { "description": "Styles applied to the root element." },
+    "filled": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
+      "conditions": "<code>variant=\"filled\"</code>"
     },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "outlined": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
+      "conditions": "<code>variant=\"outlined\"</code>"
     },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "standard": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
+      "conditions": "<code>variant=\"standard\"</code>"
     },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "standardSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
+      "conditions": "<code>variant=\"standard\"</code> and <code>color=\"success\"</code>"
     },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "standardInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
+      "conditions": "<code>variant=\"standard\"</code> and <code>color=\"info\"</code>"
     },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "standardWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
+      "conditions": "<code>variant=\"standard\"</code> and <code>color=\"warning\"</code>"
     },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+    "standardError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "endDecorator": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the endDecorator element",
-      "conditions": "supplied"
+      "conditions": "<code>variant=\"standard\"</code> and <code>color=\"error\"</code>"
     },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "outlinedSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"success\"</code>"
     },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "outlinedInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"info\"</code>"
     },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "outlinedWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"warning\"</code>"
     },
-    "startDecorator": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the startDecorator element",
-      "conditions": "supplied"
+    "outlinedError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"error\"</code>"
     },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "filledSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
+      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"success\"</code>"
     },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "filledInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
+      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"info\"</code>"
     },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "filledWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
+      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"warning\"</code>"
     },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "filledError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
+      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"error\"</code>"
+    },
+    "icon": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the icon wrapper element"
+    },
+    "message": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the message wrapper element"
+    },
+    "action": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the action wrapper element",
+      "conditions": "<code>action</code> is provided"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "startDecorator": "The component that renders the start decorator.",
-    "endDecorator": "The component that renders the end decorator."
   }
 }
diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/docs/translations/api-docs/autocomplete/autocomplete.json
index ae572296547d1a..54ebd6ebd1aba9 100644
--- a/docs/translations/api-docs/autocomplete/autocomplete.json
+++ b/docs/translations/api-docs/autocomplete/autocomplete.json
@@ -1,34 +1,45 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "aria-describedby": "Identifies the element (or elements) that describes the object.",
-    "aria-label": "Defines a string value that labels the current element.",
-    "aria-labelledby": "Identifies the element (or elements) that labels the current element.",
-    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
+    "autoComplete": "If <code>true</code>, the portion of the selected suggestion that has not been typed by the user, known as the completion string, appears inline after the input cursor in the textbox. The inline completion string is visually highlighted and has a selected state.",
+    "autoHighlight": "If <code>true</code>, the first option is automatically highlighted.",
+    "autoSelect": "If <code>true</code>, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input.<br>When using <code>freeSolo</code> mode, the typed value will be the input value if the Autocomplete loses focus without highlighting an option.",
+    "blurOnSelect": "Control if the input should be blurred when an option is selected:<br>- <code>false</code> the input is not blurred. - <code>true</code> the input is always blurred. - <code>touch</code> the input is blurred after a touch event. - <code>mouse</code> the input is blurred after a mouse event.",
+    "ChipProps": "Props applied to the <a href=\"/material-ui/api/chip/\"><code>Chip</code></a> element.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "clearIcon": "The icon to display in place of the default clear icon.",
+    "clearOnBlur": "If <code>true</code>, the input&#39;s text is cleared on blur if no value is selected.<br>Set to <code>true</code> if you want to help the user enter a new value. Set to <code>false</code> if you want to help the user resume their search.",
+    "clearOnEscape": "If <code>true</code>, clear all values when the user presses escape and the popup is closed.",
     "clearText": "Override the default text for the <em>clear</em> icon button.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
     "closeText": "Override the default text for the <em>close popup</em> icon button.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "componentsProps": "The props used for each slot inside.",
     "defaultValue": "The default value. Use when the component is not controlled.",
     "disableClearable": "If <code>true</code>, the input can&#39;t be cleared.",
+    "disableCloseOnSelect": "If <code>true</code>, the popup won&#39;t close when a value is selected.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "endDecorator": "Trailing adornment for this input.",
-    "error": "If <code>true</code>, the <code>input</code> will indicate an error. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
+    "disabledItemsFocusable": "If <code>true</code>, will allow focus on disabled items.",
+    "disableListWrap": "If <code>true</code>, the list box in the popup will not wrap focus.",
+    "disablePortal": "If <code>true</code>, the <code>Popper</code> content will be under the DOM hierarchy of the parent component.",
     "filterOptions": "A function that determines the filtered options to be rendered on search.<br><br><strong>Signature:</strong><br><code>function(options: Array&lt;T&gt;, state: object) =&gt; Array&lt;T&gt;</code><br><em>options:</em> The options to render.<br><em>state:</em> The state of the component.",
+    "filterSelectedOptions": "If <code>true</code>, hide the selected options from the list box.",
     "forcePopupIcon": "Force the visibility display of the popup icon.",
     "freeSolo": "If <code>true</code>, the Autocomplete is free solo, meaning that the user input is not bound to provided options.",
-    "getLimitTagsText": "The label to display when the tags are truncated (<code>limitTags</code>).<br><br><strong>Signature:</strong><br><code>function(more: string | number) =&gt; ReactNode</code><br><em>more:</em> The number of truncated tags.",
+    "fullWidth": "If <code>true</code>, the input will take up the full width of its container.",
+    "getLimitTagsText": "The label to display when the tags are truncated (<code>limitTags</code>).<br><br><strong>Signature:</strong><br><code>function(more: number) =&gt; ReactNode</code><br><em>more:</em> The number of truncated tags.",
     "getOptionDisabled": "Used to determine the disabled state for a given option.<br><br><strong>Signature:</strong><br><code>function(option: T) =&gt; boolean</code><br><em>option:</em> The option to test.",
     "getOptionLabel": "Used to determine the string value for a given option. It&#39;s used to fill the input (and the list box options if <code>renderOption</code> is not provided).<br>If used in free solo mode, it must accept both the type of the options and a string.<br><br><strong>Signature:</strong><br><code>function(option: T) =&gt; string</code><br>",
     "groupBy": "If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when <code>renderGroup</code> is not provided.<br><br><strong>Signature:</strong><br><code>function(options: T) =&gt; string</code><br><em>options:</em> The options to group.",
+    "handleHomeEndKeys": "If <code>true</code>, the component handles the &quot;Home&quot; and &quot;End&quot; keys when the popup is open. It should move focus to the first option and last option, respectively.",
     "id": "This prop is used to help implement the accessibility logic. If you don&#39;t provide an id it will fall back to a randomly generated one.",
+    "includeInputInList": "If <code>true</code>, the highlight can move to the input.",
     "inputValue": "The input value.",
     "isOptionEqualToValue": "Used to determine if the option represents the given value. Uses strict equality by default. ⚠️ Both arguments need to be handled, an option can only match with one value.<br><br><strong>Signature:</strong><br><code>function(option: T, value: T) =&gt; boolean</code><br><em>option:</em> The option to test.<br><em>value:</em> The value to test against.",
     "limitTags": "The maximum number of tags that will be visible when not focused. Set <code>-1</code> to disable the limit.",
+    "ListboxComponent": "The component used to render the listbox.",
+    "ListboxProps": "Props applied to the Listbox element.",
     "loading": "If <code>true</code>, the component is in a loading state. This shows the <code>loadingText</code> in place of suggestions (only if there are no suggestions to show, e.g. <code>options</code> are empty).",
     "loadingText": "Text to display when in a loading state.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
     "multiple": "If <code>true</code>, <code>value</code> must be an array and the menu will support multiple selections.",
-    "name": "Name attribute of the <code>input</code> element.",
     "noOptionsText": "Text to display when there are no options.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
     "onChange": "Callback fired when the value changes.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent, value: T | Array&lt;T&gt;, reason: string, details?: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>value:</em> The new value of the component.<br><em>reason:</em> One of &quot;createOption&quot;, &quot;selectOption&quot;, &quot;removeOption&quot;, &quot;blur&quot; or &quot;clear&quot;.",
     "onClose": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>reason:</em> Can be: <code>&quot;toggleInput&quot;</code>, <code>&quot;escape&quot;</code>, <code>&quot;selectOption&quot;</code>, <code>&quot;removeOption&quot;</code>, <code>&quot;blur&quot;</code>.",
@@ -36,185 +47,120 @@
     "onInputChange": "Callback fired when the input value changes.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent, value: string, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>value:</em> The new value of the text input.<br><em>reason:</em> Can be: <code>&quot;input&quot;</code> (user input), <code>&quot;reset&quot;</code> (programmatic change), <code>&quot;clear&quot;</code>.",
     "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent) =&gt; void</code><br><em>event:</em> The event source of the callback.",
     "open": "If <code>true</code>, the component is shown.",
+    "openOnFocus": "If <code>true</code>, the popup will open on input focus.",
     "openText": "Override the default text for the <em>open popup</em> icon button.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
     "options": "Array of options.",
-    "placeholder": "The input placeholder",
+    "PaperComponent": "The component used to render the body of the popup.",
+    "PopperComponent": "The component used to position the popup.",
     "popupIcon": "The icon to display in place of the default popup icon.",
     "readOnly": "If <code>true</code>, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.",
     "renderGroup": "Render the group.<br><br><strong>Signature:</strong><br><code>function(params: AutocompleteRenderGroupParams) =&gt; ReactNode</code><br><em>params:</em> The group to render.",
+    "renderInput": "Render the input.<br><br><strong>Signature:</strong><br><code>function(params: object) =&gt; ReactNode</code><br>",
     "renderOption": "Render the option, use <code>getOptionLabel</code> by default.<br><br><strong>Signature:</strong><br><code>function(props: object, option: T, state: object) =&gt; ReactNode</code><br><em>props:</em> The props to apply on the li element.<br><em>option:</em> The option to render.<br><em>state:</em> The state of the component.",
     "renderTags": "Render the selected value.<br><br><strong>Signature:</strong><br><code>function(value: Array&lt;T&gt;, getTagProps: function, ownerState: object) =&gt; ReactNode</code><br><em>value:</em> The <code>value</code> provided to the component.<br><em>getTagProps:</em> A tag props getter.<br><em>ownerState:</em> The state of the Autocomplete component.",
-    "required": "If <code>true</code>, the <code>input</code> element is required. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
+    "selectOnFocus": "If <code>true</code>, the input&#39;s text is selected on focus. It helps the user clear the selected value.",
+    "size": "The size of the component.",
     "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "startDecorator": "Leading adornment for this input.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "type": "Type of the <code>input</code> element. It should be <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types\">a valid HTML5 input type</a>.",
-    "value": "The value of the autocomplete.<br>The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the <code>isOptionEqualToValue</code> prop.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "value": "The value of the autocomplete.<br>The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the <code>isOptionEqualToValue</code> prop."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "wrapper": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the wrapper element"
-    },
-    "input": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the input element"
-    },
-    "startDecorator": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the startDecorator element"
-    },
-    "endDecorator": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the endDecorator element"
+    "root": { "description": "Styles applied to the root element." },
+    "fullWidth": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fullWidth={true}</code>"
     },
-    "formControl": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "expanded": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "the component is a descendant of <code>FormControl</code>"
+      "conditions": "the listbox is displayed"
     },
     "focused": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "the component is focused"
+      "conditions": "focused"
     },
-    "disabled": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>disabled={true}</code>"
+    "tag": {
+      "description": "Styles applied to {{nodeName}}, {{conditions}}.",
+      "nodeName": "the tag elements",
+      "conditions": "e.g. the chips"
     },
-    "error": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>error={true}</code>"
+    "tagSizeSmall": {
+      "description": "Styles applied to {{nodeName}}, {{conditions}}.",
+      "nodeName": "the tag elements",
+      "conditions": "e.g. the chips if <code>size=\"small\"</code>"
+    },
+    "tagSizeMedium": {
+      "description": "Styles applied to {{nodeName}}, {{conditions}}.",
+      "nodeName": "the tag elements",
+      "conditions": "e.g. the chips if <code>size=\"medium\"</code>"
+    },
+    "hasPopupIcon": { "description": "Styles applied when the popup icon is rendered." },
+    "hasClearIcon": { "description": "Styles applied when the clear icon is rendered." },
+    "inputRoot": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the Input element"
     },
-    "multiple": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the wrapper element",
-      "conditions": "<code>multiple={true}</code>"
+    "input": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the input element" },
+    "inputFocused": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the input element",
+      "conditions": "the input is focused"
     },
-    "limitTag": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the limitTag element"
+    "endAdornment": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the endAdornment element"
     },
-    "hasPopupIcon": { "description": "Class name applied when the popup icon is rendered." },
-    "hasClearIcon": { "description": "Class name applied when the clear icon is rendered." },
     "clearIndicator": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the clear indicator"
     },
     "popupIndicator": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the popup indicator"
     },
     "popupIndicatorOpen": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the popup indicator",
       "conditions": "the popup is open"
     },
+    "popper": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the popper element"
+    },
+    "popperDisablePortal": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the popper element",
+      "conditions": "<code>disablePortal={true}</code>"
+    },
+    "paper": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the Paper component"
+    },
     "listbox": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the listbox component"
     },
-    "option": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the option component"
-    },
     "loading": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the loading wrapper"
     },
     "noOptions": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the no option wrapper"
     },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
+    "option": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the option elements"
     },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
+    "groupLabel": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the group's label elements"
     },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
+    "groupUl": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the group's ul elements"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "wrapper": "The component that renders the wrapper.",
-    "input": "The component that renders the input.",
-    "startDecorator": "The component that renders the start decorator.",
-    "endDecorator": "The component that renders the end decorator.",
-    "clearIndicator": "The component that renders the clear indicator.",
-    "popupIndicator": "The component that renders the popup indicator.",
-    "listbox": "The component that renders the listbox.",
-    "option": "The component that renders the option.",
-    "loading": "The component that renders the loading.",
-    "noOptions": "The component that renders the no-options.",
-    "limitTag": "The component that renders the limit tag."
   }
 }
diff --git a/docs/translations/api-docs/avatar-group/avatar-group.json b/docs/translations/api-docs/avatar-group/avatar-group.json
index 9d7fae700387dd..af216ecd52b34d 100644
--- a/docs/translations/api-docs/avatar-group/avatar-group.json
+++ b/docs/translations/api-docs/avatar-group/avatar-group.json
@@ -1,15 +1,22 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "Used to render icon or text elements inside the AvatarGroup if <code>src</code> is not set. This can be an element, or just a string.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "children": "The avatars to stack.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
+    "max": "Max avatars to show before +x.",
+    "slotProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future.",
+    "spacing": "Spacing between avatars.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "total": "The total number of avatars. Used for calculating the number of extra avatars.",
+    "variant": "The variant to use."
   },
-  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  "classDescriptions": {
+    "root": { "description": "Styles applied to the root element." },
+    "avatar": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the avatar elements"
+    }
+  }
 }
diff --git a/docs/translations/api-docs/avatar/avatar.json b/docs/translations/api-docs/avatar/avatar.json
index 5297faf8a62a6f..585772ace3613f 100644
--- a/docs/translations/api-docs/avatar/avatar.json
+++ b/docs/translations/api-docs/avatar/avatar.json
@@ -3,96 +3,42 @@
   "propDescriptions": {
     "alt": "Used in combination with <code>src</code> or <code>srcSet</code> to provide an alt attribute for the rendered <code>img</code> element.",
     "children": "Used to render icon or text elements inside the Avatar if <code>src</code> is not set. This can be an element, or just a string.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "imgProps": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes\">Attributes</a> applied to the <code>img</code> element if the component is used to display an image. It can be used to listen for the loading error event.",
+    "sizes": "The <code>sizes</code> attribute for the <code>img</code> element.",
     "src": "The <code>src</code> attribute for the <code>img</code> element.",
     "srcSet": "The <code>srcSet</code> attribute for the <code>img</code> element. Use this attribute for responsive image display.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "variant": "The shape of the avatar."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "root": { "description": "Styles applied to the root element." },
+    "colorDefault": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
+      "conditions": "not <code>src</code> or <code>srcSet</code>"
     },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "circular": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
+      "conditions": "<code>variant=\"circular\"</code>"
     },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "rounded": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
+      "conditions": "<code>variant=\"rounded\"</code>"
     },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "square": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "fallback": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the fallback icon"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
+      "conditions": "<code>variant=\"square\"</code>"
     },
     "img": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the img element",
       "conditions": "either <code>src</code> or <code>srcSet</code> is defined"
     },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "img": "The component that renders the img.",
-    "fallback": "The component that renders the fallback."
+    "fallback": { "description": "Styles applied to the fallback icon" }
   }
 }
diff --git a/docs/translations/api-docs/badge/badge.json b/docs/translations/api-docs/badge/badge.json
index 57d56e4627179e..677e829f386373 100644
--- a/docs/translations/api-docs/badge/badge.json
+++ b/docs/translations/api-docs/badge/badge.json
@@ -1,20 +1,14 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "anchorOrigin": "The anchor of the badge.",
     "badgeContent": "The content rendered within the badge.",
-    "badgeInset": "The inset of the badge. Support shorthand syntax as described in <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/inset\">https://developer.mozilla.org/en-US/docs/Web/CSS/inset</a>.",
     "children": "The badge will be added relative to this node.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "invisible": "If <code>true</code>, the badge is invisible.",
     "max": "Max count to show.",
     "showZero": "Controls whether the badge is hidden when <code>badgeContent</code> is zero.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "slotProps": "The props used for each slot inside the Badge.",
+    "slots": "The components used for each slot inside the Badge. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
   },
   "classDescriptions": {
     "root": { "description": "Class name applied to the root element." },
@@ -22,110 +16,10 @@
       "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the badge `span` element"
     },
-    "anchorOriginTopRight": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>anchorOrigin={{ 'top', 'right' }}</code>"
-    },
-    "anchorOriginBottomRight": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>anchorOrigin={{ 'bottom', 'right' }}</code>"
-    },
-    "anchorOriginTopLeft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>anchorOrigin={{ 'top', 'left' }}</code>"
-    },
-    "anchorOriginBottomLeft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>anchorOrigin={{ 'bottom', 'left' }}</code>"
-    },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
     "invisible": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>invisible={true}</code>"
-    },
-    "locationInside": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>location=\"inside\"</code>"
-    },
-    "locationOutside": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>location=\"outside\"</code>"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>size=\"lg\"</code>"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the badge `span` element",
-      "conditions": "<code>variant=\"solid\"</code>"
     }
   },
   "slotDescriptions": {
diff --git a/docs/translations/api-docs/breadcrumbs/breadcrumbs.json b/docs/translations/api-docs/breadcrumbs/breadcrumbs.json
index cf9e2f9325d7c7..5ec041c625611f 100644
--- a/docs/translations/api-docs/breadcrumbs/breadcrumbs.json
+++ b/docs/translations/api-docs/breadcrumbs/breadcrumbs.json
@@ -2,41 +2,24 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "expandText": "Override the default label for the expand button.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
+    "itemsAfterCollapse": "If max items is exceeded, the number of items to show after the ellipsis.",
+    "itemsBeforeCollapse": "If max items is exceeded, the number of items to show before the ellipsis.",
+    "maxItems": "Specifies the maximum number of breadcrumbs to display. When there are more than the maximum number, only the first <code>itemsBeforeCollapse</code> and last <code>itemsAfterCollapse</code> will be shown, with an ellipsis in between.",
     "separator": "Custom separator node.",
-    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "slotProps": "The props used for each slot inside the Breadcumb.",
+    "slots": "The components used for each slot inside the Breadcumb. Either a string to use a HTML element or a component.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "ol": { "description": "Class name applied to {{nodeName}}.", "nodeName": "the ol element" },
-    "li": { "description": "Class name applied to {{nodeName}}.", "nodeName": "the li element" },
+    "root": { "description": "Styles applied to the root element." },
+    "ol": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the ol element" },
+    "li": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the li element" },
     "separator": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the separator element"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "ol": "The component that renders the ol.",
-    "li": "The component that renders the li.",
-    "separator": "The component that renders the separator."
   }
 }
diff --git a/docs/translations/api-docs/button/button.json b/docs/translations/api-docs/button/button.json
index 1b2359cb447569..e880be5b3dbae4 100644
--- a/docs/translations/api-docs/button/button.json
+++ b/docs/translations/api-docs/button/button.json
@@ -1,133 +1,29 @@
 {
-  "componentDescription": "",
+  "componentDescription": "The foundation for building custom-styled buttons.",
   "propDescriptions": {
     "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "endDecorator": "Element placed after the children.",
-    "fullWidth": "If <code>true</code>, the button will take up the full width of its container.",
-    "loading": "If <code>true</code>, the loading indicator is shown.",
-    "loadingIndicator": "The node should contain an element with <code>role=&quot;progressbar&quot;</code> with an accessible name. By default we render a <code>CircularProgress</code> that is labelled by the button itself.",
-    "loadingPosition": "The loading indicator can be positioned on the start, end, or the center of the button.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "startDecorator": "Element placed before the children.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "focusableWhenDisabled": "If <code>true</code>, allows a disabled button to receive focus.",
+    "slotProps": "The props used for each slot inside the Button.",
+    "slots": "The components used for each slot inside the Button. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
   },
   "classDescriptions": {
     "root": { "description": "Class name applied to the root element." },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    },
-    "focusVisible": {
+    "active": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the ButtonBase root element",
-      "conditions": "the button is keyboard focused"
+      "nodeName": "the root `button` element",
+      "conditions": "<code>active={true}</code>"
     },
     "disabled": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
+      "nodeName": "the root `button` element",
       "conditions": "<code>disabled={true}</code>"
     },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
-    },
-    "fullWidth": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>fullWidth={true}</code>"
-    },
-    "startDecorator": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the startDecorator element",
-      "conditions": "supplied"
-    },
-    "endDecorator": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the endDecorator element",
-      "conditions": "supplied"
-    },
-    "loading": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>loading={true}</code>"
-    },
-    "loadingIndicatorCenter": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the loadingIndicatorCenter element"
+    "focusVisible": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root `button` element",
+      "conditions": "<code>focusVisible={true}</code>"
     }
   },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "startDecorator": "The component that renders the start decorator.",
-    "endDecorator": "The component that renders the end decorator.",
-    "loadingIndicatorCenter": "The component that renders the loading indicator center."
-  }
+  "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/card-content/card-content.json b/docs/translations/api-docs/card-content/card-content.json
index 44696adcb84b77..ff27adf5730304 100644
--- a/docs/translations/api-docs/card-content/card-content.json
+++ b/docs/translations/api-docs/card-content/card-content.json
@@ -1,12 +1,10 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "Used to render icon or text elements inside the CardContent if <code>src</code> is not set. This can be an element, or just a string.",
+    "children": "The content of the component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
-  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  "classDescriptions": { "root": { "description": "Styles applied to the root element." } }
 }
diff --git a/docs/translations/api-docs/card/card.json b/docs/translations/api-docs/card/card.json
index 6888ced30db8d9..feb6f7366eddd9 100644
--- a/docs/translations/api-docs/card/card.json
+++ b/docs/translations/api-docs/card/card.json
@@ -1,99 +1,10 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "Used to render icon or text elements inside the Card if <code>src</code> is not set. This can be an element, or just a string.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "invertedColors": "If <code>true</code>, the children with an implicit color prop invert their colors to match the component&#39;s variant and color.",
-    "orientation": "The component orientation.",
-    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "children": "The content of the component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "raised": "If <code>true</code>, the card will use raised styling.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
-  "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
-    },
-    "horizontal": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>orientation=\"horizontal\"</code>"
-    },
-    "vertical": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>orientation=\"vertical\"</code>"
-    }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  "classDescriptions": { "root": { "description": "Styles applied to the root element." } }
 }
diff --git a/docs/translations/api-docs/checkbox/checkbox.json b/docs/translations/api-docs/checkbox/checkbox.json
index a0368b267720c1..edd98e7b792b81 100644
--- a/docs/translations/api-docs/checkbox/checkbox.json
+++ b/docs/translations/api-docs/checkbox/checkbox.json
@@ -3,56 +3,34 @@
   "propDescriptions": {
     "checked": "If <code>true</code>, the component is checked.",
     "checkedIcon": "The icon to display when the component is checked.",
-    "className": "Class name applied to the root element.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
     "defaultChecked": "The default checked state. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "disableIcon": "If <code>true</code>, the checked icon is removed and the selected variant is applied on the <code>action</code> element instead.",
+    "disableRipple": "If <code>true</code>, the ripple effect is disabled.",
+    "icon": "The icon to display when the component is unchecked.",
+    "id": "The id of the <code>input</code> element.",
     "indeterminate": "If <code>true</code>, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a <code>data-indeterminate</code> attribute on the <code>input</code>.",
     "indeterminateIcon": "The icon to display when the component is indeterminate.",
-    "label": "The label element next to the checkbox.",
-    "name": "The <code>name</code> attribute of the input.",
-    "onChange": "Callback fired when the state is changed.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string). You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean).",
-    "overlay": "If <code>true</code>, the root element&#39;s position is set to initial which allows the action area to fill the nearest positioned parent. This prop is useful for composing Checkbox with ListItem component.",
-    "readOnly": "If <code>true</code>, the component is read only.",
+    "inputProps": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes\">Attributes</a> applied to the <code>input</code> element.",
+    "inputRef": "Pass a ref to the <code>input</code> element.",
+    "onChange": "Callback fired when the state is changed.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean).",
     "required": "If <code>true</code>, the <code>input</code> element is required.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "size": "The size of the component. <code>small</code> is equivalent to the dense checkbox styling.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "uncheckedIcon": "The icon when <code>checked</code> is false.",
-    "value": "The value of the component. The DOM API casts this to a string. The browser uses &quot;on&quot; as the default value.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "value": "The value of the component. The DOM API casts this to a string. The browser uses &quot;on&quot; as the default value."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "checkbox": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the checkbox element"
-    },
-    "action": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the action element"
-    },
-    "input": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the input element"
-    },
-    "label": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the label element"
-    },
+    "root": { "description": "Styles applied to the root element." },
     "checked": {
-      "description": "State class applied to {{nodeName}}.",
-      "nodeName": "the input component's `checked` class"
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>checked={true}</code>"
     },
     "disabled": {
-      "description": "State class applied to {{nodeName}}.",
-      "nodeName": "the input component's disabled class"
-    },
-    "focusVisible": {
-      "description": "Class name applied to the root element if the switch has visible focus"
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disabled={true}</code>"
     },
     "indeterminate": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
@@ -60,76 +38,14 @@
       "conditions": "<code>indeterminate={true}</code>"
     },
     "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"primary\"</code>"
     },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "colorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
+      "conditions": "<code>color=\"secondary\"</code>"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "checkbox": "The component that renders the checkbox.",
-    "action": "The component that renders the action.",
-    "input": "The component that renders the input.",
-    "label": "The component that renders the label."
   }
 }
diff --git a/docs/translations/api-docs/chip/chip.json b/docs/translations/api-docs/chip/chip.json
index f0443706901b0d..2a39e6b8f90a2e 100644
--- a/docs/translations/api-docs/chip/chip.json
+++ b/docs/translations/api-docs/chip/chip.json
@@ -1,136 +1,236 @@
 {
   "componentDescription": "Chips represent complex entities in small blocks, such as a contact.",
   "propDescriptions": {
-    "children": "The content of the component.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "avatar": "The Avatar element to display.",
+    "children": "This prop isn&#39;t supported. Use the <code>component</code> prop if you need to change the children structure.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "clickable": "If <code>true</code>, the chip will appear clickable, and will raise when pressed, even if the onClick prop is not defined. If <code>false</code>, the chip will not appear clickable, even if onClick prop is defined. This can be used, for example, along with the component prop to indicate an anchor Chip is clickable. Note: this controls the UI and does not affect the onClick event.",
+    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "deleteIcon": "Override the default delete icon element. Shown only if <code>onDelete</code> is set.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "endDecorator": "Element placed after the children.",
-    "onClick": "Element action click handler.",
-    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "startDecorator": "Element placed before the children.",
+    "icon": "Icon element.",
+    "label": "The content of the component.",
+    "onDelete": "Callback fired when the delete icon is clicked. If set, the delete icon will be shown.",
+    "size": "The size of the component.",
+    "skipFocusWhenDisabled": "If <code>true</code>, allows the disabled chip to escape focus. If <code>false</code>, allows the disabled chip to receive focus.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "variant": "The variant to use."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "root": { "description": "Styles applied to the root element." },
+    "sizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
+      "conditions": "<code>size=\"small\"</code>"
     },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "sizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
+      "conditions": "<code>size=\"medium\"</code>"
     },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "colorError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
+      "conditions": "<code>color=\"error\"</code>"
     },
     "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"info\"</code>"
     },
+    "colorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"secondary\"</code>"
+    },
     "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"success\"</code>"
     },
     "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"warning\"</code>"
     },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
     "disabled": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>disabled={true}</code>"
     },
-    "endDecorator": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the endDecorator element",
-      "conditions": "supplied"
-    },
-    "focusVisible": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+    "clickable": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "keyboard focused"
+      "conditions": "<code>onClick</code> is defined or <code>clickable={true}</code>"
     },
-    "label": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the label `span` element"
+    "clickableColorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>onClick</code> and <code>color=\"primary\"</code> is defined or <code>clickable={true}</code>"
     },
-    "labelSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the label `span` element",
-      "conditions": "<code>size=\"sm\"</code>"
+    "clickableColorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>onClick</code> and <code>color=\"secondary\"</code> is defined or <code>clickable={true}</code>"
     },
-    "labelMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the label `span` element",
-      "conditions": "<code>size=\"md\"</code>"
+    "deletable": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>onDelete</code> is defined"
     },
-    "labelLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the label `span` element",
-      "conditions": "<code>size=\"lg\"</code>"
+    "deletableColorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>onDelete</code> and <code>color=\"primary\"</code> is defined"
     },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "deletableColorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
+      "conditions": "<code>onDelete</code> and <code>color=\"secondary\"</code> is defined"
     },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "outlined": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
+      "conditions": "<code>variant=\"outlined\"</code>"
     },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "filled": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
+      "conditions": "<code>variant=\"filled\"</code>"
     },
-    "startDecorator": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the startDecorator element",
-      "conditions": "supplied"
+    "outlinedPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"primary\"</code>"
     },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "outlinedSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"secondary\"</code>"
     },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "filledPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
+      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"primary\"</code>"
     },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "filledSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
+      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"secondary\"</code>"
+    },
+    "avatar": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the avatar element"
+    },
+    "avatarSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the avatar element",
+      "conditions": "<code>size=\"small\"</code>"
+    },
+    "avatarMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the avatar element",
+      "conditions": "<code>size=\"medium\"</code>"
+    },
+    "avatarColorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the avatar element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "avatarColorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the avatar element",
+      "conditions": "<code>color=\"secondary\"</code>"
+    },
+    "icon": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon element" },
+    "iconSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "<code>size=\"small\"</code>"
+    },
+    "iconMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "<code>size=\"medium\"</code>"
+    },
+    "iconColorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "iconColorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "<code>color=\"secondary\"</code>"
+    },
+    "label": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the label `span` element"
+    },
+    "labelSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the label `span` element",
+      "conditions": "<code>size=\"small\"</code>"
+    },
+    "labelMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the label `span` element",
+      "conditions": "<code>size=\"medium\"</code>"
+    },
+    "deleteIcon": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the deleteIcon element"
+    },
+    "deleteIconSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the deleteIcon element",
+      "conditions": "<code>size=\"small\"</code>"
+    },
+    "deleteIconMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the deleteIcon element",
+      "conditions": "<code>size=\"medium\"</code>"
+    },
+    "deleteIconColorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the deleteIcon element",
+      "conditions": "<code>color=\"primary\"</code> and <code>variant=\"filled\"</code>"
+    },
+    "deleteIconColorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the deleteIcon element",
+      "conditions": "<code>color=\"secondary\"</code> and <code>variant=\"filled\"</code>"
+    },
+    "deleteIconOutlinedColorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the deleteIcon element",
+      "conditions": "<code>color=\"primary\"</code> and <code>variant=\"outlined\"</code>"
+    },
+    "deleteIconOutlinedColorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the deleteIcon element",
+      "conditions": "<code>color=\"secondary\"</code> and <code>variant=\"outlined\"</code>"
+    },
+    "deleteIconFilledColorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the deleteIcon element",
+      "conditions": "<code>color=\"primary\"</code> and <code>variant=\"filled\"</code>"
+    },
+    "deleteIconFilledColorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the deleteIcon element",
+      "conditions": "<code>color=\"secondary\"</code> and <code>variant=\"filled\"</code>"
     },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "focusVisible": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
+      "conditions": "keyboard focused"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "label": "The component that renders the label.",
-    "action": "The component that renders the action.",
-    "startDecorator": "The component that renders the start decorator.",
-    "endDecorator": "The component that renders the end decorator."
   }
 }
diff --git a/docs/translations/api-docs/circular-progress/circular-progress.json b/docs/translations/api-docs/circular-progress/circular-progress.json
index cfc511917f4a38..0536e31502071f 100644
--- a/docs/translations/api-docs/circular-progress/circular-progress.json
+++ b/docs/translations/api-docs/circular-progress/circular-progress.json
@@ -1,108 +1,56 @@
 {
   "componentDescription": "## ARIA\n\nIf the progress bar is describing the loading progress of a particular region of a page,\nyou should use `aria-describedby` to point to the progress bar, and set the `aria-busy`\nattribute to `true` on that region until it has finished loading.",
   "propDescriptions": {
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "determinate": "The boolean to select a variant. Use indeterminate when there is no progress value.",
-    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
+    "disableShrink": "If <code>true</code>, the shrink animation is disabled. This only works if variant is <code>indeterminate</code>.",
+    "size": "The size of the component. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g &#39;3rem&#39;.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "thickness": "The thickness of the circle.",
     "value": "The value of the progress indicator for the determinate variant. Value between 0 and 100.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "variant": "The variant to use. Use indeterminate when there is no progress value."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
+    "root": { "description": "Styles applied to the root element." },
     "determinate": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>determinate</code> is true"
+      "conditions": "<code>variant=\"determinate\"</code>"
     },
-    "svg": { "description": "Class name applied to {{nodeName}}.", "nodeName": "the svg element" },
-    "track": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the `track` element"
-    },
-    "progress": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the `progress` element"
+    "indeterminate": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"indeterminate\"</code>"
     },
     "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"primary\"</code>"
     },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "colorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
+      "conditions": "<code>color=\"secondary\"</code>"
     },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
+    "svg": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the svg element" },
+    "circle": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the `circle` svg path"
     },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
+    "circleDeterminate": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the `circle` svg path",
+      "conditions": "<code>variant=\"determinate\"</code>"
     },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
+    "circleIndeterminate": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the `circle` svg path",
+      "conditions": "<code>variant=\"indeterminate\"</code>"
     },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
+    "circleDisableShrink": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the `circle` svg path",
+      "conditions": "<code>disableShrink={true}</code>"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "svg": "The component that renders the svg.",
-    "track": "The component that renders the track.",
-    "progress": "The component that renders the progress."
   }
 }
diff --git a/docs/translations/api-docs/css-baseline/css-baseline.json b/docs/translations/api-docs/css-baseline/css-baseline.json
index f2fcbd9425d184..4ee0b2b962dff0 100644
--- a/docs/translations/api-docs/css-baseline/css-baseline.json
+++ b/docs/translations/api-docs/css-baseline/css-baseline.json
@@ -2,7 +2,7 @@
   "componentDescription": "Kickstart an elegant, consistent, and simple baseline to build upon.",
   "propDescriptions": {
     "children": "You can wrap a node.",
-    "disableColorScheme": "Disable <code>color-scheme</code> CSS property.<br>For more details, check out <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme\">https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme</a> For browser support, check out <a href=\"https://caniuse.com/?search=color-scheme\">https://caniuse.com/?search=color-scheme</a>"
+    "enableColorScheme": "Enable <code>color-scheme</code> CSS property to use <code>theme.palette.mode</code>. For more details, check out <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme\">https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme</a> For browser support, check out <a href=\"https://caniuse.com/?search=color-scheme\">https://caniuse.com/?search=color-scheme</a>"
   },
   "classDescriptions": {}
 }
diff --git a/docs/translations/api-docs/divider/divider.json b/docs/translations/api-docs/divider/divider.json
index 82a3af78429e10..df91195b789978 100644
--- a/docs/translations/api-docs/divider/divider.json
+++ b/docs/translations/api-docs/divider/divider.json
@@ -1,36 +1,83 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "absolute": "Absolutely position the element.",
     "children": "The content of the component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "inset": "Class name applied to the divider to shrink or stretch the line based on the orientation.",
+    "flexItem": "If <code>true</code>, a vertical divider will have the correct height when used in flex container. (By default, a vertical divider will have a calculated height of <code>0px</code> if it is the child of a flex container.)",
+    "light": "If <code>true</code>, the divider will have a lighter color.",
     "orientation": "The component orientation.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "textAlign": "The text alignment.",
+    "variant": "The variant to use."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "horizontal": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "root": { "description": "Styles applied to the root element." },
+    "absolute": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>orientation=\"horizontal\"</code>"
+      "conditions": "<code>absolute={true}</code>"
+    },
+    "inset": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"inset\"</code>"
+    },
+    "fullWidth": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"fullWidth\"</code>"
+    },
+    "light": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>light={true}</code>"
+    },
+    "middle": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"middle\"</code>"
     },
     "vertical": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>orientation=\"vertical\"</code>"
     },
-    "insetContext": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "flexItem": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>flexItem={true}</code>"
+    },
+    "withChildren": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "divider have text"
+    },
+    "withChildrenVertical": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "divider have text and <code>orientation=\"vertical\"</code>"
+    },
+    "textAlignRight": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>inset=\"context\"</code>"
+      "conditions": "<code>textAlign=\"right\" orientation=\"horizontal\"</code>"
     },
-    "insetNone": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "textAlignLeft": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>inset=\"none\"</code>"
+      "conditions": "<code>textAlign=\"left\" orientation=\"horizontal\"</code>"
+    },
+    "wrapper": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the span children element",
+      "conditions": "<code>orientation=\"horizontal\"</code>"
+    },
+    "wrapperVertical": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the span children element",
+      "conditions": "<code>orientation=\"vertical\"</code>"
     }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  }
 }
diff --git a/docs/translations/api-docs/form-control/form-control.json b/docs/translations/api-docs/form-control/form-control.json
index 595dd81ec7ef20..1af947ce5c1f86 100644
--- a/docs/translations/api-docs/form-control/form-control.json
+++ b/docs/translations/api-docs/form-control/form-control.json
@@ -1,85 +1,15 @@
 {
-  "componentDescription": "",
+  "componentDescription": "Provides context such as filled/focused/error/required for form inputs.\nRelying on the context provides high flexibility and ensures that the state always stays\nconsistent across the children of the `FormControl`.\nThis context is used by the following components:\n\n*   FormLabel\n*   FormHelperText\n*   Input\n*   InputLabel\n\nYou can find one composition example below and more going to [the demos](https://mui.com/material-ui/react-text-field/#components).\n\n```jsx\n<FormControl>\n  <InputLabel htmlFor=\"my-input\">Email address</InputLabel>\n  <Input id=\"my-input\" aria-describedby=\"my-helper-text\" />\n  <FormHelperText id=\"my-helper-text\">We'll never share your email.</FormHelperText>\n</FormControl>\n```\n\n⚠️ Only one `Input` can be used within a FormControl because it create visual inconsistencies.\nFor instance, only one input can be focused at the same time, the state shouldn't be shared.",
   "propDescriptions": {
     "children": "The content of the component.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "disabled": "If <code>true</code>, the children are in disabled state.",
-    "error": "If <code>true</code>, the children will indicate an error.",
-    "orientation": "The content direction flow.",
-    "required": "If <code>true</code>, the user must specify a value for the input before the owning form can be submitted. If <code>true</code>, the asterisk appears on the FormLabel.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+    "disabled": "If <code>true</code>, the label, input and helper text should be displayed in a disabled state.",
+    "error": "If <code>true</code>, the label is displayed in an error state.",
+    "onChange": "Callback fired when the form element&#39;s value is modified.",
+    "required": "If <code>true</code>, the label will indicate that the <code>input</code> is required.",
+    "slotProps": "The props used for each slot inside the FormControl.",
+    "slots": "The components used for each slot inside the FormControl. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "value": "The value of the form element."
   },
-  "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "disabled": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>disabled={true}</code>"
-    },
-    "error": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>error={true}</code>"
-    },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
-    },
-    "horizontal": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>orientation=\"horizontal\"</code>"
-    },
-    "vertical": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>orientation=\"vertical\"</code>"
-    }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  "classDescriptions": {}
 }
diff --git a/docs/translations/api-docs/form-helper-text/form-helper-text.json b/docs/translations/api-docs/form-helper-text/form-helper-text.json
index 3a039cdf5b968b..5c305d80f923a9 100644
--- a/docs/translations/api-docs/form-helper-text/form-helper-text.json
+++ b/docs/translations/api-docs/form-helper-text/form-helper-text.json
@@ -1,12 +1,54 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component.",
+    "children": "The content of the component.<br>If <code>&#39; &#39;</code> is provided, the component reserves one line height for displaying a future message.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+    "disabled": "If <code>true</code>, the helper text should be displayed in a disabled state.",
+    "error": "If <code>true</code>, helper text should be displayed in an error state.",
+    "filled": "If <code>true</code>, the helper text should use filled classes key.",
+    "focused": "If <code>true</code>, the helper text should use focused classes key.",
+    "margin": "If <code>dense</code>, will adjust vertical spacing. This is normally obtained via context from FormControl.",
+    "required": "If <code>true</code>, the helper text should use required classes key.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The variant to use."
   },
-  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  "classDescriptions": {
+    "root": { "description": "Styles applied to the root element." },
+    "error": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>error={true}</code>"
+    },
+    "disabled": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disabled={true}</code>"
+    },
+    "sizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code>"
+    },
+    "contained": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"filled\"</code> or <code>variant=\"outlined\"</code>"
+    },
+    "focused": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>focused={true}</code>"
+    },
+    "filled": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>filled={true}</code>"
+    },
+    "required": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>required={true}</code>"
+    }
+  }
 }
diff --git a/docs/translations/api-docs/form-label/form-label.json b/docs/translations/api-docs/form-label/form-label.json
index 4c11f8cccedcb5..d4cb70dfdbaa70 100644
--- a/docs/translations/api-docs/form-label/form-label.json
+++ b/docs/translations/api-docs/form-label/form-label.json
@@ -2,21 +2,51 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "required": "The asterisk is added if required=<code>true</code>",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "disabled": "If <code>true</code>, the label should be displayed in a disabled state.",
+    "error": "If <code>true</code>, the label is displayed in an error state.",
+    "filled": "If <code>true</code>, the label should use filled classes key.",
+    "focused": "If <code>true</code>, the input of this label is focused (used by <code>FormGroup</code> components).",
+    "required": "If <code>true</code>, the label will indicate that the <code>input</code> is required.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
+    "root": { "description": "Styles applied to the root element." },
+    "colorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "the color is secondary"
+    },
+    "focused": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>focused={true}</code>"
+    },
+    "disabled": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disabled={true}</code>"
+    },
+    "error": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>error={true}</code>"
+    },
+    "filled": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>filled={true}</code>"
+    },
+    "required": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>required={true}</code>"
+    },
     "asterisk": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the asterisk element"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "asterisk": "The component that renders the asterisk."
   }
 }
diff --git a/docs/translations/api-docs/icon-button/icon-button.json b/docs/translations/api-docs/icon-button/icon-button.json
index 423284b5d883f3..627a0420deb213 100644
--- a/docs/translations/api-docs/icon-button/icon-button.json
+++ b/docs/translations/api-docs/icon-button/icon-button.json
@@ -1,99 +1,82 @@
 {
-  "componentDescription": "",
+  "componentDescription": "Refer to the [Icons](/material-ui/icons/) section of the documentation\nregarding the available icon options.",
   "propDescriptions": {
-    "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "children": "The icon to display.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "focusVisibleClassName": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/HEAD/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "disableFocusRipple": "If <code>true</code>, the  keyboard focus ripple is disabled.",
+    "disableRipple": "If <code>true</code>, the ripple effect is disabled.<br>⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the <code>.Mui-focusVisible</code> class.",
+    "edge": "If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape).",
+    "size": "The size of the component. <code>small</code> is equivalent to the dense button styling.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
+    "root": { "description": "Styles applied to the root element." },
+    "edgeStart": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>edge=\"start\"</code>"
+    },
+    "edgeEnd": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>edge=\"end\"</code>"
+    },
+    "colorInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"inherit\"</code>"
+    },
     "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"primary\"</code>"
     },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "colorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
+      "conditions": "<code>color=\"secondary\"</code>"
     },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "colorError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
+      "conditions": "<code>color=\"error\"</code>"
     },
     "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"info\"</code>"
     },
     "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"success\"</code>"
     },
     "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"warning\"</code>"
     },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    },
-    "focusVisible": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "the button is keyboard focused"
-    },
     "disabled": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>disabled={true}</code>"
     },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "sizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
+      "conditions": "<code>size=\"small\"</code>"
     },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "sizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
+      "conditions": "<code>size=\"medium\"</code>"
     },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "sizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
+      "conditions": "<code>size=\"large\"</code>"
     }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  }
 }
diff --git a/docs/translations/api-docs/input/input.json b/docs/translations/api-docs/input/input.json
index 10f8256303ed62..2853be93336b60 100644
--- a/docs/translations/api-docs/input/input.json
+++ b/docs/translations/api-docs/input/input.json
@@ -1,124 +1,84 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "autoComplete": "This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it&#39;s more like an autofill. You can learn more about it <a href=\"https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill\">following the specification</a>.",
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "endDecorator": "Trailing adornment for this input.",
-    "error": "If <code>true</code>, the <code>input</code> will indicate an error. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
-    "fullWidth": "If <code>true</code>, the button will take up the full width of its container.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "startDecorator": "Leading adornment for this input.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "defaultValue": "The default value. Use when the component is not controlled.",
+    "disabled": "If <code>true</code>, the component is disabled. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
+    "endAdornment": "Trailing adornment for this input.",
+    "error": "If <code>true</code>, the <code>input</code> will indicate an error by setting the <code>aria-invalid</code> attribute on the input and the <code>Mui-error</code> class on the root element. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
+    "id": "The id of the <code>input</code> element.",
+    "maxRows": "Maximum number of rows to display when multiline option is set to true.",
+    "minRows": "Minimum number of rows to display when multiline option is set to true.",
+    "multiline": "If <code>true</code>, a <code>textarea</code> element is rendered.",
+    "name": "Name attribute of the <code>input</code> element.",
+    "placeholder": "The short hint displayed in the <code>input</code> before the user enters a value.",
+    "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).",
+    "required": "If <code>true</code>, the <code>input</code> element is required. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
+    "rows": "Number of rows to display when multiline option is set to true.",
+    "slotProps": "The props used for each slot inside the Input.",
+    "slots": "The components used for each slot inside the InputBase. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "startAdornment": "Leading adornment for this input.",
+    "type": "Type of the <code>input</code> element. It should be <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types\">a valid HTML5 input type</a>.",
+    "value": "The value of the <code>input</code> element, required for a controlled component."
   },
   "classDescriptions": {
     "root": { "description": "Class name applied to the root element." },
-    "input": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the input element"
-    },
     "formControl": {
       "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "the component is a descendant of <code>FormControl</code>"
     },
-    "focused": {
+    "adornedStart": {
       "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "the component is focused"
+      "conditions": "<code>startAdornment</code> is provided"
     },
-    "disabled": {
+    "adornedEnd": {
       "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>disabled={true}</code>"
+      "conditions": "<code>endAdornment</code> is provided"
     },
-    "error": {
+    "focused": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>error={true}</code>"
-    },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
+      "conditions": "the component is focused"
     },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "disabled": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
+      "conditions": "<code>disabled={true}</code>"
     },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "error": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
+      "conditions": "<code>error={true}</code>"
     },
-    "variantOutlined": {
+    "multiline": {
       "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
+      "conditions": "<code>multiline={true}</code>"
     },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
+    "input": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the input element"
     },
-    "variantSolid": {
+    "inputMultiline": {
       "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
+      "nodeName": "the input element",
+      "conditions": "<code>multiline={true}</code>"
     },
-    "fullWidth": {
+    "inputTypeSearch": {
       "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>fullWidth={true}</code>"
-    },
-    "startDecorator": { "description": "Class name applied to the startDecorator element" },
-    "endDecorator": { "description": "Class name applied to the endDecorator element" }
+      "nodeName": "the input element",
+      "conditions": "<code>type=\"search\"</code>"
+    }
   },
   "slotDescriptions": {
     "root": "The component that renders the root.",
     "input": "The component that renders the input.",
-    "startDecorator": "The component that renders the start decorator.",
-    "endDecorator": "The component that renders the end decorator."
+    "textarea": "The component that renders the textarea."
   }
 }
diff --git a/docs/translations/api-docs/linear-progress/linear-progress.json b/docs/translations/api-docs/linear-progress/linear-progress.json
index 3060b04436a2cb..002004676364fb 100644
--- a/docs/translations/api-docs/linear-progress/linear-progress.json
+++ b/docs/translations/api-docs/linear-progress/linear-progress.json
@@ -1,94 +1,98 @@
 {
   "componentDescription": "## ARIA\n\nIf the progress bar is describing the loading progress of a particular region of a page,\nyou should use `aria-describedby` to point to the progress bar, and set the `aria-busy`\nattribute to `true` on that region until it has finished loading.",
   "propDescriptions": {
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "determinate": "The boolean to select a variant. Use indeterminate when there is no progress value.",
-    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "thickness": "The thickness of the bar.",
-    "value": "The value of the progress indicator for the determinate variant. Value between 0 and 100.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "value": "The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100.",
+    "valueBuffer": "The value for the buffer variant. Value between 0 and 100.",
+    "variant": "The variant to use. Use indeterminate or query when there is no progress value."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
+    "root": { "description": "Styles applied to the root element." },
+    "colorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root and bar2 element",
+      "conditions": "<code>color=\"primary\"</code>; bar2 if <code>variant=\"buffer\"</code>"
+    },
+    "colorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root and bar2 elements",
+      "conditions": "<code>color=\"secondary\"</code>; bar2 if <code>variant=\"buffer\"</code>"
+    },
     "determinate": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>determinate</code> is true"
+      "conditions": "<code>variant=\"determinate\"</code>"
     },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "indeterminate": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
+      "conditions": "<code>variant=\"indeterminate\"</code>"
     },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "buffer": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
+      "conditions": "<code>variant=\"buffer\"</code>"
     },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "query": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
+      "conditions": "<code>variant=\"query\"</code>"
     },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
+    "dashed": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the additional bar element",
+      "conditions": "<code>variant=\"buffer\"</code>"
     },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
+    "dashedColorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the additional bar element",
+      "conditions": "<code>variant=\"buffer\"</code> and <code>color=\"primary\"</code>"
     },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
+    "dashedColorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the additional bar element",
+      "conditions": "<code>variant=\"buffer\"</code> and <code>color=\"secondary\"</code>"
     },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
+    "bar": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the layered bar1 and bar2 elements"
     },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
+    "barColorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the bar elements",
+      "conditions": "<code>color=\"primary\"</code>; bar2 if <code>variant</code> not \"buffer\""
     },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
+    "barColorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the bar elements",
+      "conditions": "<code>color=\"secondary\"</code>; bar2 if <code>variant</code> not \"buffer\""
     },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
+    "bar1Indeterminate": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the bar1 element",
+      "conditions": "<code>variant=\"indeterminate or query\"</code>"
     },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
+    "bar1Determinate": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the bar1 element",
+      "conditions": "<code>variant=\"determinate\"</code>"
     },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
+    "bar1Buffer": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the bar1 element",
+      "conditions": "<code>variant=\"buffer\"</code>"
     },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
+    "bar2Indeterminate": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the bar2 element",
+      "conditions": "<code>variant=\"indeterminate or query\"</code>"
     },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
+    "bar2Buffer": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the bar2 element",
+      "conditions": "<code>variant=\"buffer\"</code>"
     }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  }
 }
diff --git a/docs/translations/api-docs/link/link.json b/docs/translations/api-docs/link/link.json
index 782e727b76dc4f..cad1c837105e1b 100644
--- a/docs/translations/api-docs/link/link.json
+++ b/docs/translations/api-docs/link/link.json
@@ -2,153 +2,40 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "color": "The color of the link. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "disabled": "If <code>true</code>, the component is disabled.",
-    "endDecorator": "Element placed after the children.",
-    "level": "Applies the theme typography styles.",
-    "overlay": "If <code>true</code>, the ::after pseudo element is added to cover the area of interaction. The parent of the overlay Link should have <code>relative</code> CSS position.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "startDecorator": "Element placed before the children.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the link.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.<br>⚠️ <a href=\"/material-ui/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "textColor": "The system color.",
+    "TypographyClasses": "<code>classes</code> prop applied to the <a href=\"/material-ui/api/typography/\"><code>Typography</code></a> element.",
     "underline": "Controls when the link should have an underline.",
-    "variant": "Applies the theme link styles. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "variant": "Applies the theme typography styles."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "disabled": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>disabled={true}</code>"
-    },
-    "focusVisible": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "the link is keyboard focused"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    },
+    "root": { "description": "Styles applied to the root element." },
     "underlineNone": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>underline=\"none\"</code>"
     },
     "underlineHover": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>underline=\"hover\"</code>"
     },
     "underlineAlways": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>underline=\"always\"</code>"
     },
-    "h1": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>level=\"h1\"</code>"
-    },
-    "h2": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>level=\"h2\"</code>"
-    },
-    "h3": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>level=\"h3\"</code>"
-    },
-    "h4": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>level=\"h4\"</code>"
-    },
-    "h5": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>level=\"h5\"</code>"
-    },
-    "h6": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>level=\"h6\"</code>"
-    },
-    "body1": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>level=\"body1\"</code>"
-    },
-    "body2": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "button": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>level=\"body2\"</code>"
+      "conditions": "<code>component=\"button\"</code>"
     },
-    "body3": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "focusVisible": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>level=\"body3\"</code>"
-    },
-    "startDecorator": { "description": "Class name applied to the startDecorator element" },
-    "endDecorator": { "description": "Class name applied to the endDecorator element" }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "startDecorator": "The component that renders the start decorator.",
-    "endDecorator": "The component that renders the end decorator."
+      "conditions": "the link is keyboard focused"
+    }
   }
 }
diff --git a/docs/translations/api-docs/list-item-button/list-item-button.json b/docs/translations/api-docs/list-item-button/list-item-button.json
index 9c11527415767f..8341f6efc9a6c4 100644
--- a/docs/translations/api-docs/list-item-button/list-item-button.json
+++ b/docs/translations/api-docs/list-item-button/list-item-button.json
@@ -1,101 +1,54 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
+    "alignItems": "Defines the <code>align-items</code> style property.",
     "autoFocus": "If <code>true</code>, the list item is focused during the first mount. Focus will also be triggered if the value changes from false to true.",
-    "children": "The content of the component.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "children": "The content of the component if a <code>ListItemSecondaryAction</code> is used it must be the last child.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "dense": "If <code>true</code>, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component.",
     "disabled": "If <code>true</code>, the component is disabled.",
+    "disableGutters": "If <code>true</code>, the left and right padding is removed.",
+    "divider": "If <code>true</code>, a 1px light border is added to the bottom of the list item.",
     "focusVisibleClassName": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/HEAD/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed.",
-    "orientation": "The content direction flow.",
-    "selected": "If <code>true</code>, the component is selected.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "selected": "Use to apply selected styling.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "vertical": {
-      "description": "Class name applied to {{nodeName}}, {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "if <code>orientation=\"vertical\"</code>"
-    },
-    "horizontal": {
-      "description": "Class name applied to {{nodeName}}, {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "if <code>orientation=\"horizontal\"</code>"
-    },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"context\"</code>"
-    },
+    "root": { "description": "Styles applied to the root element." },
     "focusVisible": {
       "description": "State class applied to {{nodeName}}.",
       "nodeName": "the `component`'s `focusVisibleClassName` prop"
     },
+    "dense": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the component element",
+      "conditions": "dense"
+    },
+    "alignItemsFlexStart": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the component element",
+      "conditions": "<code>alignItems=\"flex-start\"</code>"
+    },
     "disabled": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the inner `component` element",
       "conditions": "<code>disabled={true}</code>"
     },
-    "selected": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>selected={true}</code>"
-    },
-    "variantPlain": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantSoft": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
+    "divider": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the inner `component` element",
+      "conditions": "<code>divider={true}</code>"
     },
-    "variantOutlined": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
+    "gutters": {
+      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
+      "nodeName": "the inner `component` element",
+      "conditions": "<code>disableGutters={true}</code>"
     },
-    "variantSolid": {
+    "selected": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
+      "conditions": "<code>selected={true}</code>"
     }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  }
 }
diff --git a/docs/translations/api-docs/list-item/list-item.json b/docs/translations/api-docs/list-item/list-item.json
index 7caf906ef0a3bb..00611759e2cd21 100644
--- a/docs/translations/api-docs/list-item/list-item.json
+++ b/docs/translations/api-docs/list-item/list-item.json
@@ -1,104 +1,86 @@
 {
-  "componentDescription": "",
+  "componentDescription": "Uses an additional container component if `ListItemSecondaryAction` is the last child.",
   "propDescriptions": {
-    "children": "The content of the component.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "alignItems": "Defines the <code>align-items</code> style property.",
+    "autoFocus": "If <code>true</code>, the list item is focused during the first mount. Focus will also be triggered if the value changes from false to true.",
+    "button": "If <code>true</code>, the list item is a button (using <code>ButtonBase</code>). Props intended for <code>ButtonBase</code> can then be applied to <code>ListItem</code>.",
+    "children": "The content of the component if a <code>ListItemSecondaryAction</code> is used it must be the last child.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "endAction": "The element to display at the end of ListItem.",
-    "nested": "If <code>true</code>, the component can contain NestedList.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "startAction": "The element to display at the start of ListItem.",
-    "sticky": "If <code>true</code>, the component has sticky position (with top = 0).",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "components": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead.",
+    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
+    "ContainerComponent": "The container component used when a <code>ListItemSecondaryAction</code> is the last child.<br>⚠️ <a href=\"/material-ui/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
+    "ContainerProps": "Props applied to the container component if used.",
+    "dense": "If <code>true</code>, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component.",
+    "disabled": "If <code>true</code>, the component is disabled.",
+    "disableGutters": "If <code>true</code>, the left and right padding is removed.",
+    "disablePadding": "If <code>true</code>, all padding is removed.",
+    "divider": "If <code>true</code>, a 1px light border is added to the bottom of the list item.",
+    "secondaryAction": "The element to display at the end of ListItem.",
+    "selected": "Use to apply selected styling.",
+    "slotProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future.",
+    "slots": "The components used for each slot inside.<br>This prop is an alias for the <code>components</code> prop, which will be deprecated in the future.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "startAction": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the component element",
-      "conditions": "<code>startAction</code> element is provided"
-    },
-    "endAction": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the component element",
-      "conditions": "<code>endAction</code> element is provided"
-    },
-    "nested": {
-      "description": "Class name applied to {{nodeName}}, {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "if nested={true}"
-    },
-    "nesting": {
-      "description": "Class name applied to {{nodeName}}, {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "if it is under a nested list item"
+    "root": {
+      "description": "Styles applied to {{nodeName}}. May be wrapped by a `container`.",
+      "nodeName": "the (normally root) `component` element"
     },
-    "sticky": {
-      "description": "Class name applied to {{nodeName}}, {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "if sticky={true}"
-    },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
+    "container": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the container element",
+      "conditions": "<code>children</code> includes <code>ListItemSecondaryAction</code>"
     },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
+    "focusVisible": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the `component`'s `focusVisibleClassName` prop",
+      "conditions": "<code>button={true}</code>"
     },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
+    "dense": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the component element",
+      "conditions": "dense"
     },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
+    "alignItemsFlexStart": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the component element",
+      "conditions": "<code>alignItems=\"flex-start\"</code>"
     },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
+    "disabled": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the inner `component` element",
+      "conditions": "<code>disabled={true}</code>"
     },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
+    "divider": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the inner `component` element",
+      "conditions": "<code>divider={true}</code>"
     },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
+    "gutters": {
+      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
+      "nodeName": "the inner `component` element",
+      "conditions": "<code>disableGutters={true}</code>"
     },
-    "variantPlain": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+    "padding": {
+      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
+      "conditions": "<code>disablePadding={true}</code>"
     },
-    "variantSoft": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
+    "button": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the inner `component` element",
+      "conditions": "<code>button={true}</code>"
     },
-    "variantOutlined": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
+    "secondaryAction": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the component element",
+      "conditions": "<code>children</code> includes <code>ListItemSecondaryAction</code>"
     },
-    "variantSolid": {
+    "selected": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
+      "conditions": "<code>selected={true}</code>"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "startAction": "The component that renders the start action.",
-    "endAction": "The component that renders the end action."
   }
 }
diff --git a/docs/translations/api-docs/list-subheader/list-subheader.json b/docs/translations/api-docs/list-subheader/list-subheader.json
index 45720b6993a8f0..33932ec54d3552 100644
--- a/docs/translations/api-docs/list-subheader/list-subheader.json
+++ b/docs/translations/api-docs/list-subheader/list-subheader.json
@@ -2,76 +2,40 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sticky": "If <code>true</code>, the component has sticky position (with top = 0).",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "disableGutters": "If <code>true</code>, the List Subheader will not have gutters.",
+    "disableSticky": "If <code>true</code>, the List Subheader will not stick to the top during scroll.",
+    "inset": "If <code>true</code>, the List Subheader is indented.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "sticky": {
-      "description": "Class name applied to {{nodeName}}, {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "if sticky={true}"
-    },
+    "root": { "description": "Styles applied to the root element." },
     "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"primary\"</code>"
     },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "colorInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
+      "conditions": "<code>color=\"inherit\"</code>"
     },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
+    "gutters": {
+      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
+      "nodeName": "the inner `component` element",
+      "conditions": "<code>disableGutters={true}</code>"
     },
-    "variantSoft": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+    "inset": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
+      "conditions": "<code>inset={true}</code>"
     },
-    "variantOutlined": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSolid": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+    "sticky": {
+      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
+      "conditions": "<code>disableSticky={true}</code>"
     }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  }
 }
diff --git a/docs/translations/api-docs/list/list.json b/docs/translations/api-docs/list/list.json
index 1df1151c16e80f..f90e8bf1693b4a 100644
--- a/docs/translations/api-docs/list/list.json
+++ b/docs/translations/api-docs/list/list.json
@@ -2,68 +2,29 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "orientation": "The component orientation.",
-    "size": "The size of the component (affect other nested list* components). To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>.",
-    "wrap": "Only for horizontal list. If <code>true</code>, the list sets the flex-wrap to &quot;wrap&quot; and adjust margin to have gap-like behavior (will move to <code>gap</code> in the future)."
+    "dense": "If <code>true</code>, compact vertical padding designed for keyboard and mouse input is used for the list and list items. The prop is available to descendant components as the <code>dense</code> context.",
+    "disablePadding": "If <code>true</code>, vertical padding is removed from the list.",
+    "subheader": "The content of the subheader, normally <code>ListSubheader</code>.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Classname applied to the root element." },
-    "nesting": {
-      "description": "Classname applied to the root element if wrapped with nested context."
-    },
-    "scoped": { "description": "Classname applied to the root element if `scoped` is true." },
-    "sizeSm": { "description": "Classname applied to the root element if `size=\"sm\"`." },
-    "sizeMd": { "description": "Classname applied to the root element if `size=\"md\"`." },
-    "sizeLg": { "description": "Classname applied to the root element if `size=\"lg\"`." },
-    "colorPrimary": {
-      "description": "Classname applied to the root element if `color=\"primary\"`."
-    },
-    "colorNeutral": {
-      "description": "Classname applied to the root element if `color=\"neutral\"`."
-    },
-    "colorDanger": {
-      "description": "Classname applied to the root element if `color=\"danger\"`."
-    },
-    "colorInfo": { "description": "Classname applied to the root element if `color=\"info\"`." },
-    "colorSuccess": {
-      "description": "Classname applied to the root element if `color=\"success\"`."
-    },
-    "colorWarning": {
-      "description": "Classname applied to the root element if `color=\"warning\"`."
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+    "root": { "description": "Styles applied to the root element." },
+    "padding": {
+      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
+      "conditions": "<code>disablePadding={true}</code>"
     },
-    "variantPlain": {
-      "description": "Classname applied to the root element if `variant=\"plain\"`."
-    },
-    "variantOutlined": {
-      "description": "Classname applied to the root element if `variant=\"outlined\"`."
-    },
-    "variantSoft": {
-      "description": "Classname applied to the root element if `variant=\"soft\"`."
-    },
-    "variantSolid": {
-      "description": "Classname applied to the root element if `variant=\"solid\"`."
-    },
-    "horizontal": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "dense": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>orientation=\"horizontal\"</code>"
+      "conditions": "dense"
     },
-    "vertical": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "subheader": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>orientation=\"vertical\"</code>"
+      "conditions": "a <code>subheader</code> is provided"
     }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  }
 }
diff --git a/docs/translations/api-docs/menu-item/menu-item.json b/docs/translations/api-docs/menu-item/menu-item.json
index 9e0532aa4ded04..1d5601b2a7adfa 100644
--- a/docs/translations/api-docs/menu-item/menu-item.json
+++ b/docs/translations/api-docs/menu-item/menu-item.json
@@ -1,84 +1,22 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "orientation": "The content direction flow.",
-    "selected": "If <code>true</code>, the component is selected.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "label": "A text representation of the menu item&#39;s content. Used for keyboard text navigation matching.",
+    "slotProps": "The props used for each slot inside the MenuItem.",
+    "slots": "The components used for each slot inside the MenuItem. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
   },
   "classDescriptions": {
     "root": { "description": "Class name applied to the root element." },
-    "focusVisible": {
-      "description": "State class applied to {{nodeName}}.",
-      "nodeName": "the `component`'s `focusVisibleClassName` prop"
-    },
     "disabled": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the inner `component` element",
+      "nodeName": "the root `button` element",
       "conditions": "<code>disabled={true}</code>"
     },
-    "selected": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>selected={true}</code>"
-    },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantSoft": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantOutlined": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSolid": {
+    "focusVisible": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
+      "nodeName": "the root `button` element",
+      "conditions": "<code>focusVisible={true}</code>"
     }
   },
   "slotDescriptions": { "root": "The component that renders the root." }
diff --git a/docs/translations/api-docs/menu-list/menu-list.json b/docs/translations/api-docs/menu-list/menu-list.json
index 6f2cb672147c2e..95d35092ebacc3 100644
--- a/docs/translations/api-docs/menu-list/menu-list.json
+++ b/docs/translations/api-docs/menu-list/menu-list.json
@@ -1,65 +1,29 @@
 {
-  "componentDescription": "",
+  "componentDescription": "A permanently displayed menu following https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/.\nIt's exposed to help customization of the [`Menu`](/material-ui/api/menu/) component if you\nuse it separately you need to move focus into the component manually. Once\nthe focus is placed inside the component it is fully keyboard accessible.",
   "propDescriptions": {
-    "actions": "A ref with imperative actions. It allows to select the first or last menu item.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "size": "The size of the component (affect other nested list* components because the <code>Menu</code> inherits <code>List</code>). To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "autoFocus": "If <code>true</code>, will focus the <code>[role=&quot;menu&quot;]</code> container and move into tab order.",
+    "autoFocusItem": "If <code>true</code>, will focus the first menuitem if <code>variant=&quot;menu&quot;</code> or selected item if <code>variant=&quot;selectedMenu&quot;</code>.",
+    "children": "MenuList contents, normally <code>MenuItem</code>s.",
+    "disabledItemsFocusable": "If <code>true</code>, will allow focus on disabled items.",
+    "disableListWrap": "If <code>true</code>, the menu items will not wrap focus.",
+    "variant": "The variant to use. Use <code>menu</code> to prevent selected items from impacting the initial focus and the vertical alignment relative to the anchor element."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "root": { "description": "Styles applied to the root element." },
+    "padding": {
+      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
+      "conditions": "<code>disablePadding={true}</code>"
     },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "dense": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
+      "conditions": "dense"
     },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "subheader": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
-    },
-    "colorPrimary": {
-      "description": "Classname applied to the root element if `color=\"primary\"`."
-    },
-    "colorNeutral": {
-      "description": "Classname applied to the root element if `color=\"neutral\"`."
-    },
-    "colorDanger": {
-      "description": "Classname applied to the root element if `color=\"danger\"`."
-    },
-    "colorInfo": { "description": "Classname applied to the root element if `color=\"info\"`." },
-    "colorSuccess": {
-      "description": "Classname applied to the root element if `color=\"success\"`."
-    },
-    "colorWarning": {
-      "description": "Classname applied to the root element if `color=\"warning\"`."
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Classname applied to the root element if `variant=\"plain\"`."
-    },
-    "variantOutlined": {
-      "description": "Classname applied to the root element if `variant=\"outlined\"`."
-    },
-    "variantSoft": {
-      "description": "Classname applied to the root element if `variant=\"soft\"`."
-    },
-    "variantSolid": {
-      "description": "Classname applied to the root element if `variant=\"solid\"`."
+      "conditions": "a <code>subheader</code> is provided"
     }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  }
 }
diff --git a/docs/translations/api-docs/menu/menu.json b/docs/translations/api-docs/menu/menu.json
index 22900511139739..da3220db4b7701 100644
--- a/docs/translations/api-docs/menu/menu.json
+++ b/docs/translations/api-docs/menu/menu.json
@@ -2,61 +2,27 @@
   "componentDescription": "",
   "propDescriptions": {
     "actions": "A ref with imperative actions. It allows to select the first or last menu item.",
-    "anchorEl": "An HTML element, <a href=\"https://popper.js.org/docs/v2/virtual-elements/\">virtualElement</a>, or a function that returns either. It&#39;s used to set the position of the popper. The return value will passed as the reference object of the Popper instance.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "anchorEl": "An HTML element, <a href=\"https://popper.js.org/docs/v2/virtual-elements/\">virtualElement</a>, or a function that returns either. It&#39;s used to set the position of the popper.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "disablePortal": "The <code>children</code> will be under the DOM hierarchy of the parent component.",
-    "invertedColors": "If <code>true</code>, the children with an implicit color prop invert their colors to match the component&#39;s variant and color.",
-    "keepMounted": "Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Popper.",
-    "modifiers": "Popper.js is based on a &quot;plugin-like&quot; architecture, most of its features are fully encapsulated &quot;modifiers&quot;.<br>A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks. To learn how to create a modifier, <a href=\"https://popper.js.org/docs/v2/modifiers/\">read the modifiers documentation</a>.",
-    "onClose": "Triggered when focus leaves the menu and the menu should close.",
+    "onOpenChange": "Triggered when focus leaves the menu and the menu should close.",
     "open": "Controls whether the menu is displayed.",
-    "size": "The size of the component (affect other nested list* components because the <code>Menu</code> inherits <code>List</code>). To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "slotProps": "The props used for each slot inside the Menu.",
+    "slots": "The components used for each slot inside the Menu. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Classname applied to the root element." },
-    "listbox": { "description": "Classname applied to the listbox element." },
-    "expanded": { "description": "Classname applied to the root element when the menu open." },
-    "colorPrimary": {
-      "description": "Classname applied to the root element if `color=\"primary\"`."
-    },
-    "colorNeutral": {
-      "description": "Classname applied to the root element if `color=\"neutral\"`."
-    },
-    "colorDanger": {
-      "description": "Classname applied to the root element if `color=\"danger\"`."
-    },
-    "colorInfo": { "description": "Classname applied to the root element if `color=\"info\"`." },
-    "colorSuccess": {
-      "description": "Classname applied to the root element if `color=\"success\"`."
-    },
-    "colorWarning": {
-      "description": "Classname applied to the root element if `color=\"warning\"`."
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Classname applied to the root element if `variant=\"plain\"`."
-    },
-    "variantOutlined": {
-      "description": "Classname applied to the root element if `variant=\"outlined\"`."
-    },
-    "variantSoft": {
-      "description": "Classname applied to the root element if `variant=\"soft\"`."
-    },
-    "variantSolid": {
-      "description": "Classname applied to the root element if `variant=\"solid\"`."
-    },
-    "sizeSm": { "description": "Classname applied to the root element if `size=\"sm\"`." },
-    "sizeMd": { "description": "Classname applied to the root element if `size=\"md\"`." },
-    "sizeLg": { "description": "Classname applied to the root element if `size=\"lg\"`." }
+    "root": { "description": "Class name applied to the root element." },
+    "listbox": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the listbox element"
+    },
+    "expanded": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root `Popper` element and the listbox `ul` element",
+      "conditions": "<code>open={true}</code>"
+    }
   },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "listbox": "The component that renders the listbox."
+  }
 }
diff --git a/docs/translations/api-docs/modal/modal.json b/docs/translations/api-docs/modal/modal.json
index cab58d8e952fe4..83c5cf84ab30ec 100644
--- a/docs/translations/api-docs/modal/modal.json
+++ b/docs/translations/api-docs/modal/modal.json
@@ -1,7 +1,8 @@
 {
-  "componentDescription": "",
+  "componentDescription": "Modal is a lower-level construct that is leveraged by the following components:\n\n*   [Dialog](https://mui.com/material-ui/api/dialog/)\n*   [Drawer](https://mui.com/material-ui/api/drawer/)\n*   [Menu](https://mui.com/material-ui/api/menu/)\n*   [Popover](https://mui.com/material-ui/api/popover/)\n\nIf you are creating a modal dialog, you probably want to use the [Dialog](https://mui.com/material-ui/api/dialog/) component\nrather than directly using Modal.\n\nThis component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).",
   "propDescriptions": {
     "children": "A single child content element.<br>⚠️ <a href=\"/material-ui/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
+    "closeAfterTransition": "When set to true the Modal waits until a nested Transition is completed before closing.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "container": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time.",
     "disableAutoFocus": "If <code>true</code>, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the <code>disableAutoFocus</code> prop.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers.",
@@ -12,14 +13,19 @@
     "disableScrollLock": "Disable the scroll lock behavior.",
     "hideBackdrop": "If <code>true</code>, the backdrop is not rendered.",
     "keepMounted": "Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Modal.",
-    "onClose": "Callback fired when the component requests to be closed. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>.<br><br><strong>Signature:</strong><br><code>function(event: object, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>reason:</em> Can be: <code>&quot;escapeKeyDown&quot;</code>, <code>&quot;backdropClick&quot;</code>, <code>&quot;closeClick&quot;</code>.",
+    "onBackdropClick": "Callback fired when the backdrop is clicked.",
+    "onClose": "Callback fired when the component requests to be closed. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>.<br><br><strong>Signature:</strong><br><code>function(event: object, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>reason:</em> Can be: <code>&quot;escapeKeyDown&quot;</code>, <code>&quot;backdropClick&quot;</code>.",
     "open": "If <code>true</code>, the component is shown.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
+    "slotProps": "The props used for each slot inside the Modal.",
+    "slots": "The components used for each slot inside the Modal. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
   },
   "classDescriptions": {
     "root": { "description": "Class name applied to the root element." },
+    "hidden": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "the <code>Modal</code> has exited"
+    },
     "backdrop": {
       "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the backdrop element"
diff --git a/docs/translations/api-docs/option/option.json b/docs/translations/api-docs/option/option.json
index a38126f4d6801c..9242960c42375e 100644
--- a/docs/translations/api-docs/option/option.json
+++ b/docs/translations/api-docs/option/option.json
@@ -1,88 +1,29 @@
 {
-  "componentDescription": "",
+  "componentDescription": "An unstyled option to be used within a Select.",
   "propDescriptions": {
-    "children": "The content of the component.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "disabled": "If <code>true</code>, the component is disabled.",
+    "disabled": "If <code>true</code>, the option will be disabled.",
     "label": "A text representation of the option&#39;s content. Used for keyboard text navigation matching.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "value": "The option value.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "slotProps": "The props used for each slot inside the Option.",
+    "slots": "The components used for each slot inside the Option. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "value": "The value of the option."
   },
   "classDescriptions": {
     "root": { "description": "Class name applied to the root element." },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"context\"</code>"
-    },
     "disabled": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
+      "nodeName": "the root `li` element",
       "conditions": "<code>disabled={true}</code>"
     },
     "selected": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "the option is selected"
+      "nodeName": "the root `li` element",
+      "conditions": "<code>selected={true}</code>"
     },
     "highlighted": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "the option is highlighted"
-    },
-    "variantPlain": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantSoft": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantOutlined": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSolid": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
+      "nodeName": "the root `li` element",
+      "conditions": "<code>highlighted={true}</code>"
     }
   },
   "slotDescriptions": { "root": "The component that renders the root." }
diff --git a/docs/translations/api-docs/radio-group/radio-group.json b/docs/translations/api-docs/radio-group/radio-group.json
index eef957bb749b2b..f6aaf9b25f7001 100644
--- a/docs/translations/api-docs/radio-group/radio-group.json
+++ b/docs/translations/api-docs/radio-group/radio-group.json
@@ -1,99 +1,23 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "className": "Class name applied to the root element.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "children": "The content of the component.",
     "defaultValue": "The default value. Use when the component is not controlled.",
-    "disableIcon": "The radio&#39;s <code>disabledIcon</code> prop. If specified, the value is passed down to every radios under this element.",
     "name": "The name used to reference the value of the control. If you don&#39;t provide this prop, it falls back to a randomly generated name.",
-    "onChange": "Callback fired when a radio button is selected.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string).",
-    "orientation": "The component orientation.",
-    "overlay": "The radio&#39;s <code>overlay</code> prop. If specified, the value is passed down to every radios under this element.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "value": "Value of the selected radio button. The DOM API casts this to a string.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "onChange": "Callback fired when a radio button is selected.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLInputElement&gt;, value: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>value:</em> The value of the selected radio button. You can pull out the new value by accessing <code>event.target.value</code> (string).",
+    "value": "Value of the selected radio button. The DOM API casts this to a string."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "root": { "description": "Styles applied to the root element." },
+    "row": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
+      "conditions": "<code>row={true}</code>"
     },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "error": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
-    },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    },
-    "horizontal": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>orientation=\"horizontal\"</code>"
-    },
-    "vertical": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>orientation=\"vertical\"</code>"
+      "conditions": "<code>error={true}</code>"
     }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  }
 }
diff --git a/docs/translations/api-docs/radio/radio.json b/docs/translations/api-docs/radio/radio.json
index e7824f297bfa91..a37b16ec49df88 100644
--- a/docs/translations/api-docs/radio/radio.json
+++ b/docs/translations/api-docs/radio/radio.json
@@ -3,133 +3,42 @@
   "propDescriptions": {
     "checked": "If <code>true</code>, the component is checked.",
     "checkedIcon": "The icon to display when the component is checked.",
-    "className": "Class name applied to the root element.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "defaultChecked": "The default checked state. Use when the component is not controlled.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "disableIcon": "If <code>true</code>, the checked icon is removed and the selected variant is applied on the <code>action</code> element instead.",
-    "label": "The label element at the end the radio.",
-    "name": "The <code>name</code> attribute of the input.",
+    "disableRipple": "If <code>true</code>, the ripple effect is disabled.",
+    "icon": "The icon to display when the component is unchecked.",
+    "id": "The id of the <code>input</code> element.",
+    "inputProps": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes\">Attributes</a> applied to the <code>input</code> element.",
+    "inputRef": "Pass a ref to the <code>input</code> element.",
+    "name": "Name attribute of the <code>input</code> element.",
     "onChange": "Callback fired when the state is changed.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string). You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean).",
-    "overlay": "If <code>true</code>, the root element&#39;s position is set to initial which allows the action area to fill the nearest positioned parent. This prop is useful for composing Radio with ListItem component.",
-    "readOnly": "If <code>true</code>, the component is read only.",
     "required": "If <code>true</code>, the <code>input</code> element is required.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "size": "The size of the component. <code>small</code> is equivalent to the dense radio styling.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "uncheckedIcon": "The icon to display when the component is not checked.",
-    "value": "The value of the component. The DOM API casts this to a string.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "value": "The value of the component. The DOM API casts this to a string."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "radio": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the radio element"
-    },
-    "icon": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the icon element"
-    },
-    "action": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the action element"
-    },
-    "input": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the input element"
-    },
-    "label": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the label element"
-    },
+    "root": { "description": "Styles applied to the root element." },
     "checked": {
-      "description": "State class applied to {{nodeName}}, {{conditions}}.",
-      "nodeName": "the root",
-      "conditions": "action slots if <code>checked</code>"
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>checked={true}</code>"
     },
     "disabled": {
-      "description": "State class applied to {{nodeName}}, {{conditions}}.",
-      "nodeName": "the root",
-      "conditions": "action slots if <code>disabled</code>"
-    },
-    "focusVisible": {
-      "description": "Class name applied to the root element if the switch has visible focus"
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disabled={true}</code>"
     },
     "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"primary\"</code>"
     },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "colorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
+      "conditions": "<code>color=\"secondary\"</code>"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "radio": "The component that renders the radio.",
-    "icon": "The component that renders the icon.",
-    "action": "The component that renders the action.",
-    "input": "The component that renders the input.",
-    "label": "The component that renders the label."
   }
 }
diff --git a/docs/translations/api-docs/scoped-css-baseline/scoped-css-baseline.json b/docs/translations/api-docs/scoped-css-baseline/scoped-css-baseline.json
index 261555f056fcdd..98a79e623f4841 100644
--- a/docs/translations/api-docs/scoped-css-baseline/scoped-css-baseline.json
+++ b/docs/translations/api-docs/scoped-css-baseline/scoped-css-baseline.json
@@ -1,13 +1,11 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "You can wrap a node.",
+    "children": "The content of the component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "disableColorScheme": "Disable <code>color-scheme</code> CSS property. For more details, check out <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme\">https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme</a> For browser support, check out <a href=\"https://caniuse.com/?search=color-scheme\">https://caniuse.com/?search=color-scheme</a>",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "enableColorScheme": "Enable <code>color-scheme</code> CSS property to use <code>theme.palette.mode</code>. For more details, check out <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme\">https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme</a> For browser support, check out <a href=\"https://caniuse.com/?search=color-scheme\">https://caniuse.com/?search=color-scheme</a>",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
-  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  "classDescriptions": { "root": { "description": "Styles applied to the root element." } }
 }
diff --git a/docs/translations/api-docs/select/select.json b/docs/translations/api-docs/select/select.json
index a362701dee65df..590bbb9533d5fc 100644
--- a/docs/translations/api-docs/select/select.json
+++ b/docs/translations/api-docs/select/select.json
@@ -1,149 +1,58 @@
 {
-  "componentDescription": "",
+  "componentDescription": "The foundation for building custom-styled select components.",
   "propDescriptions": {
-    "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
     "autoFocus": "If <code>true</code>, the select element is focused during the first mount",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "defaultListboxOpen": "If <code>true</code>, the select will be initially open.",
     "defaultValue": "The default selected value. Use when the component is not controlled.",
-    "disabled": "If <code>true</code>, the component is disabled.",
-    "endDecorator": "Trailing adornment for the select.",
+    "disabled": "If <code>true</code>, the select is disabled.",
     "getSerializedValue": "A function to convert the currently selected value to a string. Used to set a value of a hidden input associated with the select, so that the selected value can be posted with a form.",
-    "indicator": "The indicator(*) for the select.    ________________   [ value        * ]    ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾",
-    "listboxId": "<code>id</code> attribute of the listbox element. Also used to derive the <code>id</code> attributes of options.",
+    "listboxId": "<code>id</code> attribute of the listbox element.",
     "listboxOpen": "Controls the open state of the select&#39;s listbox.",
+    "multiple": "If <code>true</code>, selecting multiple values is allowed. This affects the type of the <code>value</code>, <code>defaultValue</code>, and <code>onChange</code> props.",
     "name": "Name of the element. For example used by the server to identify the fields in form submits. If the name is provided, the component will render a hidden input element that can be submitted to a server.",
     "onChange": "Callback fired when an option is selected.",
-    "onClose": "Triggered when focus leaves the menu and the menu should close.",
     "onListboxOpenChange": "Callback fired when the component requests to be opened. Use in controlled mode (see listboxOpen).",
-    "placeholder": "Text to show when there is no selected value.",
+    "optionStringifier": "A function used to convert the option label to a string. It&#39;s useful when labels are elements and need to be converted to plain text to enable navigation using character keys on a keyboard.",
     "renderValue": "Function that customizes the rendering of the selected value.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "startDecorator": "Leading adornment for the select.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "value": "The selected value. Set to <code>null</code> to deselect all options.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "slotProps": "The props used for each slot inside the Input.",
+    "slots": "The components used for each slot inside the Select. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "value": "The selected value. Set to <code>null</code> to deselect all options."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to {{nodeName}}.", "nodeName": "the root slot" },
-    "button": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the button slot"
-    },
-    "indicator": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the indicator slot"
-    },
-    "startDecorator": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the startDecorator slot"
-    },
-    "endDecorator": {
+    "root": { "description": "Class name applied to the root element." },
+    "listbox": {
       "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the endDecorator slot"
+      "nodeName": "the listbox element"
     },
     "popper": {
       "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the popper slot"
-    },
-    "listbox": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the listbox slot"
-    },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root slot",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root slot",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root slot",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root slot",
-      "conditions": "<code>color=\"info\"</code>"
+      "nodeName": "the popper element"
     },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root slot",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root slot",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root slot",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root slot",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root slot",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root slot",
-      "conditions": "<code>variant=\"solid\"</code>"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root slot",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root slot",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root slot",
-      "conditions": "<code>size=\"lg\"</code>"
+    "active": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root `button` element",
+      "conditions": "<code>active={true}</code>"
     },
-    "focusVisible": {
+    "expanded": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the SelectBase root slot",
-      "conditions": "the button is keyboard focused"
+      "nodeName": "the root `button` element",
+      "conditions": "<code>expanded={true}</code>"
     },
     "disabled": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root slot",
+      "nodeName": "the root `button` element and the listbox 'ul' element",
       "conditions": "<code>disabled={true}</code>"
     },
-    "expanded": {
+    "focusVisible": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root slot",
-      "conditions": "listbox open"
+      "nodeName": "the root `button` element",
+      "conditions": "<code>focusVisible={true}</code>"
     }
   },
   "slotDescriptions": {
     "root": "The component that renders the root.",
-    "button": "The component that renders the button.",
-    "startDecorator": "The component that renders the start decorator.",
-    "endDecorator": "The component that renders the end decorator.",
-    "indicator": "The component that renders the indicator.",
-    "listbox": "The component that renders the listbox."
+    "listbox": "The component that renders the listbox.",
+    "popper": "The component that renders the popper."
   }
 }
diff --git a/docs/translations/api-docs/slider/slider.json b/docs/translations/api-docs/slider/slider.json
index 2d7e7ccd4844b3..3a12486a363953 100644
--- a/docs/translations/api-docs/slider/slider.json
+++ b/docs/translations/api-docs/slider/slider.json
@@ -2,9 +2,8 @@
   "componentDescription": "",
   "propDescriptions": {
     "aria-label": "The label of the slider.",
+    "aria-labelledby": "The id of the element containing a label for the slider.",
     "aria-valuetext": "A string value that provides a user-friendly name for the current value of the slider.",
-    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "defaultValue": "The default value. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the component is disabled.",
@@ -20,17 +19,13 @@
     "onChangeCommitted": "Callback function that is fired when the <code>mouseup</code> is triggered.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent | Event, value: number | Array&lt;number&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.",
     "orientation": "The component orientation.",
     "scale": "A transformation function, to change the scale of the slider.<br><br><strong>Signature:</strong><br><code>function(x: any) =&gt; any</code><br>",
-    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "slotProps": "The props used for each slot inside the Slider.",
+    "slots": "The components used for each slot inside the Slider. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
     "step": "The granularity with which the slider can step through values. (A &quot;discrete&quot; slider.) The <code>min</code> prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is <code>null</code>, the thumb can only be slid onto marks provided with the <code>marks</code> prop.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "tabIndex": "Tab index attribute of the hidden <code>input</code> element.",
     "track": "The track presentation:<br>- <code>normal</code> the track will render a bar representing the slider value. - <code>inverted</code> the track will render a bar representing the remaining slider value. - <code>false</code> the track will render without a bar.",
     "value": "The value of the slider. For ranged sliders, provide an array with two values.",
-    "valueLabelDisplay": "Controls when the value label is displayed:<br>- <code>auto</code> the value label will display when the thumb is hovered or focused. - <code>on</code> will display persistently. - <code>off</code> will never display.",
-    "valueLabelFormat": "The format function the value label&#39;s value.<br>When a function is provided, it should have the following signature:<br>- {number} value The value label&#39;s value to format - {number} index The value label&#39;s index to format",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "valueLabelFormat": "The format function the value label&#39;s value.<br>When a function is provided, it should have the following signature:<br>- {number} value The value label&#39;s value to format - {number} index The value label&#39;s index to format"
   },
   "classDescriptions": {
     "root": { "description": "Class name applied to the root element." },
@@ -54,11 +49,6 @@
       "nodeName": "the root",
       "conditions": "a thumb is being dragged"
     },
-    "focusVisible": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the thumb element",
-      "conditions": "it has keyboard focused"
-    },
     "rail": {
       "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the rail element"
@@ -81,97 +71,33 @@
       "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the thumb element"
     },
-    "valueLabel": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the thumb label element"
+    "active": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the thumb element",
+      "conditions": "it's active"
     },
-    "valueLabelOpen": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the thumb label element",
-      "conditions": "it's open"
+    "focusVisible": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the thumb element",
+      "conditions": "keyboard focused"
     },
     "mark": {
       "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the mark element"
     },
     "markActive": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the mark element",
-      "conditions": "it is active"
+      "conditions": "active (depending on the value)"
     },
     "markLabel": {
       "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the mark label element"
     },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
+    "markLabelActive": {
       "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
+      "nodeName": "the mark label element",
+      "conditions": "active (depending on the value)"
     }
   },
   "slotDescriptions": {
diff --git a/docs/translations/api-docs/svg-icon/svg-icon.json b/docs/translations/api-docs/svg-icon/svg-icon.json
index 95ecb3f260c547..6a7dfb879cc722 100644
--- a/docs/translations/api-docs/svg-icon/svg-icon.json
+++ b/docs/translations/api-docs/svg-icon/svg-icon.json
@@ -2,110 +2,63 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "Node passed into the SVG element.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. You can use the <code>htmlColor</code> prop to apply a color attribute to the SVG element. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>. You can use the <code>htmlColor</code> prop to apply a color attribute to the SVG element.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "fontSize": "The fontSize applied to the icon. Defaults to 1rem, but can be configure to inherit font size.",
+    "fontSize": "The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.",
     "htmlColor": "Applies a color attribute to the SVG element.",
     "inheritViewBox": "If <code>true</code>, the root node will inherit the custom <code>component</code>&#39;s viewBox and the <code>viewBox</code> prop will be ignored. Useful when you want to reference a custom <code>component</code> and have <code>SvgIcon</code> pass that <code>component</code>&#39;s viewBox to the root node.",
     "shapeRendering": "The shape-rendering attribute. The behavior of the different options is described on the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering\">MDN Web Docs</a>. If you are having issues with blurry icons you should investigate this prop.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "titleAccess": "Provides a human-readable title for the element that contains it. <a href=\"https://www.w3.org/TR/SVG-access/#Equivalent\">https://www.w3.org/TR/SVG-access/#Equivalent</a>",
     "viewBox": "Allows you to redefine what the coordinates without units mean inside an SVG element. For example, if the SVG element is 500 (width) by 200 (height), and you pass viewBox=&quot;0 0 50 20&quot;, this means that the coordinates inside the SVG will go from the top left corner (0,0) to bottom right (50,20) and each unit will be worth 10px."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "colorInherit": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"inherit\"</code>"
-    },
+    "root": { "description": "Styles applied to the root element." },
     "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"primary\"</code>"
     },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "colorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
+      "conditions": "<code>color=\"secondary\"</code>"
     },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "colorAction": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
+      "conditions": "<code>color=\"action\"</code>"
     },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "colorError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
+      "conditions": "<code>color=\"error\"</code>"
     },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "colorDisabled": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
+      "conditions": "<code>color=\"disabled\"</code>"
     },
     "fontSizeInherit": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>fontSize=\"inherit\"</code>"
     },
-    "fontSizeXs": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>fontSize=\"xs\"</code>"
-    },
-    "fontSizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>fontSize=\"sm\"</code>"
-    },
-    "fontSizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>fontSize=\"md\"</code>"
-    },
-    "fontSizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "fontSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>fontSize=\"lg\"</code>"
+      "conditions": "<code>fontSize=\"small\"</code>"
     },
-    "fontSizeXl": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "fontSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>fontSize=\"xl\"</code>"
+      "conditions": "<code>fontSize=\"medium\"</code>"
     },
-    "fontSizeXl2": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "fontSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>fontSize=\"xl2\"</code>"
-    },
-    "fontSizeXl3": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>fontSize=\"xl3\"</code>"
-    },
-    "fontSizeXl4": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>fontSize=\"xl4\"</code>"
-    },
-    "fontSizeXl5": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>fontSize=\"xl5\"</code>"
-    },
-    "fontSizeXl6": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>fontSize=\"xl6\"</code>"
+      "conditions": "<code>fontSize=\"large\"</code>"
     }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  }
 }
diff --git a/docs/translations/api-docs/switch/switch.json b/docs/translations/api-docs/switch/switch.json
index 96ddc47f9721cc..c51aac68be0678 100644
--- a/docs/translations/api-docs/switch/switch.json
+++ b/docs/translations/api-docs/switch/switch.json
@@ -1,130 +1,36 @@
 {
-  "componentDescription": "",
+  "componentDescription": "The foundation for building custom-styled switches.",
   "propDescriptions": {
     "checked": "If <code>true</code>, the component is checked.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "defaultChecked": "The default checked state. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "endDecorator": "The element that appears at the end of the switch.",
     "onChange": "Callback fired when the state is changed.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string). You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean).",
     "readOnly": "If <code>true</code>, the component is read only.",
     "required": "If <code>true</code>, the <code>input</code> element is required.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "startDecorator": "The element that appears at the end of the switch.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "slotProps": "The props used for each slot inside the Switch.",
+    "slots": "The components used for each slot inside the Switch. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
+    "root": { "description": "Class applied to the root element." },
+    "input": { "description": "Class applied to the internal input element" },
+    "track": { "description": "Class applied to the track element" },
+    "thumb": { "description": "Class applied to the thumb element" },
     "checked": {
-      "description": "State class applied to {{nodeName}}.",
-      "nodeName": "the root `checked` class"
+      "description": "State class applied to the root element if the switch is checked"
     },
     "disabled": {
-      "description": "State class applied to {{nodeName}}.",
-      "nodeName": "the root disabled class"
-    },
-    "action": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the action element"
-    },
-    "input": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the input element"
-    },
-    "thumb": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the input element"
-    },
-    "track": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the track element"
+      "description": "State class applied to the root element if the switch is disabled"
     },
     "focusVisible": {
       "description": "State class applied to the root element if the switch has visible focus"
     },
-    "readOnly": {
-      "description": "Class name applied to the root element if the switch is read-only"
-    },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    },
-    "startDecorator": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the startDecorator element"
-    },
-    "endDecorator": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the endDecorator element"
-    }
+    "readOnly": { "description": "Class applied to the root element if the switch is read-only" }
   },
   "slotDescriptions": {
     "root": "The component that renders the root.",
-    "thumb": "The component that renders the thumb.",
-    "action": "The component that renders the action.",
     "input": "The component that renders the input.",
-    "track": "The component that renders the track.",
-    "startDecorator": "The component that renders the start decorator.",
-    "endDecorator": "The component that renders the end decorator."
+    "thumb": "The component that renders the thumb.",
+    "track": "The component that renders the track."
   }
 }
diff --git a/docs/translations/api-docs/tab-list/tab-list.json b/docs/translations/api-docs/tab-list/tab-list.json
index 39dfa648bfeaab..60d83960a1645c 100644
--- a/docs/translations/api-docs/tab-list/tab-list.json
+++ b/docs/translations/api-docs/tab-list/tab-list.json
@@ -1,53 +1,63 @@
 {
   "componentDescription": "",
-  "propDescriptions": {
-    "children": "Used to render icon or text elements inside the TabList if <code>src</code> is not set. This can be an element, or just a string.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
-  },
+  "propDescriptions": { "children": "A list of <code>&lt;Tab /&gt;</code> elements." },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "colorPrimary": {
-      "description": "Classname applied to the root element if `color=\"primary\"`."
-    },
-    "colorNeutral": {
-      "description": "Classname applied to the root element if `color=\"neutral\"`."
-    },
-    "colorDanger": {
-      "description": "Classname applied to the root element if `color=\"danger\"`."
-    },
-    "colorInfo": { "description": "Classname applied to the root element if `color=\"info\"`." },
-    "colorSuccess": {
-      "description": "Classname applied to the root element if `color=\"success\"`."
-    },
-    "colorWarning": {
-      "description": "Classname applied to the root element if `color=\"warning\"`."
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+    "root": { "description": "Styles applied to the root element." },
+    "vertical": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Classname applied to the root element if `variant=\"plain\"`."
-    },
-    "variantOutlined": {
-      "description": "Classname applied to the root element if `variant=\"outlined\"`."
-    },
-    "variantSoft": {
-      "description": "Classname applied to the root element if `variant=\"soft\"`."
-    },
-    "variantSolid": {
-      "description": "Classname applied to the root element if `variant=\"solid\"`."
-    },
-    "sizeSm": { "description": "Classname applied to the root element if `size=\"sm\"`." },
-    "sizeMd": { "description": "Classname applied to the root element if `size=\"md\"`." },
-    "sizeLg": { "description": "Classname applied to the root element if `size=\"lg\"`." }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+      "conditions": "<code>orientation=\"vertical\"</code>"
+    },
+    "flexContainer": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the flex container element"
+    },
+    "flexContainerVertical": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the flex container element",
+      "conditions": "<code>orientation=\"vertical\"</code>"
+    },
+    "centered": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the flex container element",
+      "conditions": "<code>centered={true}</code> & <code>!variant=\"scrollable\"</code>"
+    },
+    "scroller": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the tablist element"
+    },
+    "fixed": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the tablist element",
+      "conditions": "<code>!variant=\"scrollable\"</code>\b\b\b"
+    },
+    "scrollableX": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the tablist element",
+      "conditions": "<code>variant=\"scrollable\"</code> and <code>orientation=\"horizontal\"</code>"
+    },
+    "scrollableY": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the tablist element",
+      "conditions": "<code>variant=\"scrollable\"</code> and <code>orientation=\"vertical\"</code>"
+    },
+    "hideScrollbar": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the tablist element",
+      "conditions": "<code>variant=\"scrollable\"</code> and <code>visibleScrollbar={false}</code>"
+    },
+    "scrollButtons": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the ScrollButtonComponent component"
+    },
+    "scrollButtonsHideMobile": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the ScrollButtonComponent component",
+      "conditions": "<code>allowScrollButtonsMobile={true}</code>"
+    },
+    "indicator": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the TabIndicator component"
+    }
+  }
 }
diff --git a/docs/translations/api-docs/tab-panel/tab-panel.json b/docs/translations/api-docs/tab-panel/tab-panel.json
index eb37a0a8e71422..fa22ca26bbdc73 100644
--- a/docs/translations/api-docs/tab-panel/tab-panel.json
+++ b/docs/translations/api-docs/tab-panel/tab-panel.json
@@ -3,27 +3,16 @@
   "propDescriptions": {
     "children": "The content of the component.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "value": "The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected."
+    "slotProps": "The props used for each slot inside the TabPanel.",
+    "slots": "The components used for each slot inside the TabPanel. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "value": "The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected. If not provided, it will fall back to the index of the panel. It is recommended to explicitly provide it, as it&#39;s required for the tab panel to be rendered on the server."
   },
   "classDescriptions": {
-    "root": { "description": "Classname applied to the root element." },
-    "hidden": { "description": "Classname applied to the root element if the tab is not active." },
-    "sizeSm": { "description": "Classname applied to the root element if `size=\"sm\"`." },
-    "sizeMd": { "description": "Classname applied to the root element if `size=\"md\"`." },
-    "sizeLg": { "description": "Classname applied to the root element if `size=\"lg\"`." },
-    "horizontal": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>orientation=\"horizontal\"</code>"
-    },
-    "vertical": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>orientation=\"vertical\"</code>"
+    "root": { "description": "Class name applied to the root element." },
+    "hidden": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root `div` element",
+      "conditions": "<code>hidden={true}</code>"
     }
   },
   "slotDescriptions": { "root": "The component that renders the root." }
diff --git a/docs/translations/api-docs/tab/tab.json b/docs/translations/api-docs/tab/tab.json
index cf4c7c2d8de2cf..a022f725a44992 100644
--- a/docs/translations/api-docs/tab/tab.json
+++ b/docs/translations/api-docs/tab/tab.json
@@ -2,62 +2,24 @@
   "componentDescription": "",
   "propDescriptions": {
     "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disabled": "If <code>true</code>, the component is disabled.",
     "onChange": "Callback invoked when new value is being set.",
-    "orientation": "The content direction flow.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "value": "You can provide your own value. Otherwise, it falls back to the child position index.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "slotProps": "The props used for each slot inside the Tab.",
+    "slots": "The components used for each slot inside the Tab. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "value": "You can provide your own value. Otherwise, it falls back to the child position index."
   },
   "classDescriptions": {
-    "root": { "description": "Classname applied to the root element." },
-    "disabled": { "description": "Classname applied to the root element if `disabled={true}`." },
-    "focusVisible": {
-      "description": "Classname applied to the root element when its focus is visible."
-    },
-    "selected": { "description": "Classname applied to the root element when it is selected." },
-    "horizontal": {
-      "description": "Classname applied to the root element if `orientation=\"horizontal\"`."
-    },
-    "vertical": {
-      "description": "Classname applied to the root element if `orientation=\"vertical\"`."
-    },
-    "colorPrimary": {
-      "description": "Classname applied to the root element if `color=\"primary\"`."
-    },
-    "colorNeutral": {
-      "description": "Classname applied to the root element if `color=\"neutral\"`."
-    },
-    "colorDanger": {
-      "description": "Classname applied to the root element if `color=\"danger\"`."
-    },
-    "colorInfo": { "description": "Classname applied to the root element if `color=\"info\"`." },
-    "colorSuccess": {
-      "description": "Classname applied to the root element if `color=\"success\"`."
-    },
-    "colorWarning": {
-      "description": "Classname applied to the root element if `color=\"warning\"`."
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Classname applied to the root element if `variant=\"plain\"`."
-    },
-    "variantOutlined": {
-      "description": "Classname applied to the root element if `variant=\"outlined\"`."
-    },
-    "variantSoft": {
-      "description": "Classname applied to the root element if `variant=\"soft\"`."
-    },
-    "variantSolid": {
-      "description": "Classname applied to the root element if `variant=\"solid\"`."
+    "root": { "description": "Class name applied to the root element." },
+    "selected": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root `button` element",
+      "conditions": "<code>selected={true}</code>"
+    },
+    "disabled": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root `button` element",
+      "conditions": "<code>disabled={true}</code>"
     }
   },
   "slotDescriptions": { "root": "The component that renders the root." }
diff --git a/docs/translations/api-docs/table/table.json b/docs/translations/api-docs/table/table.json
index 46bc9be0b4865f..0db74bcc4a1f4f 100644
--- a/docs/translations/api-docs/table/table.json
+++ b/docs/translations/api-docs/table/table.json
@@ -1,142 +1,20 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "borderAxis": "The axis to display a border on the table cell.",
-    "children": "Children of the table",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "children": "The content of the table, normally <code>TableHead</code> and <code>TableBody</code>.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "hoverRow": "If <code>true</code>, the table row will shade on hover.",
-    "noWrap": "If <code>true</code>, the body cells will not wrap, but instead will truncate with a text overflow ellipsis.<br>Note: Header cells are always truncated with overflow ellipsis.",
-    "size": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "padding": "Allows TableCells to inherit padding of the Table.",
+    "size": "Allows TableCells to inherit size of the Table.",
     "stickyHeader": "Set the header sticky.<br>⚠️ It doesn&#39;t work with IE11.",
-    "stripe": "The odd or even row of the table body will have subtle background color.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
-    },
+    "root": { "description": "Styles applied to the root element." },
     "stickyHeader": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>stickyHeader</code> is true"
-    },
-    "noWrap": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>noWrap</code> is true"
-    },
-    "hoverRow": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>hoverRow</code> is true"
-    },
-    "borderAxisNone": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>borderAxis=\"none\"</code>"
-    },
-    "borderAxisX": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>borderAxis=\"x\"</code>"
-    },
-    "borderAxisXBetween": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>borderAxis=\"xBetween\"</code>"
-    },
-    "borderAxisY": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>borderAxis=\"y\"</code>"
-    },
-    "borderAxisYBetween": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>borderAxis=\"yBetween\"</code>"
-    },
-    "borderAxisBoth": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>borderAxis=\"both\"</code>"
-    },
-    "borderAxisBothBetween": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>borderAxis=\"bothBetween\"</code>"
+      "conditions": "<code>stickyHeader={true}</code>"
     }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  }
 }
diff --git a/docs/translations/api-docs/tabs/tabs.json b/docs/translations/api-docs/tabs/tabs.json
index 321ce823397512..fe065328796929 100644
--- a/docs/translations/api-docs/tabs/tabs.json
+++ b/docs/translations/api-docs/tabs/tabs.json
@@ -2,64 +2,28 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "defaultValue": "The default value. Use when the component is not controlled.",
     "direction": "The direction of the text.",
     "onChange": "Callback invoked when new value is being set.",
     "orientation": "The component orientation (layout flow direction).",
     "selectionFollowsFocus": "If <code>true</code> the selected tab changes on focus. Otherwise it only changes on activation.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "value": "The value of the currently selected <code>Tab</code>. If you don&#39;t want any selected <code>Tab</code>, you can set this prop to <code>null</code>.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "slotProps": "The props used for each slot inside the Tabs.",
+    "slots": "The components used for each slot inside the Tabs. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "value": "The value of the currently selected <code>Tab</code>. If you don&#39;t want any selected <code>Tab</code>, you can set this prop to <code>null</code>."
   },
   "classDescriptions": {
-    "root": { "description": "Classname applied to the root element." },
+    "root": { "description": "Class name applied to the root element." },
     "horizontal": {
-      "description": "Classname applied to the root element if `orientation=\"horizontal\"`."
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>orientation='horizontal'</code>"
     },
     "vertical": {
-      "description": "Classname applied to the root element if `orientation=\"vertical\"`."
-    },
-    "colorPrimary": {
-      "description": "Classname applied to the root element if `color=\"primary\"`."
-    },
-    "colorNeutral": {
-      "description": "Classname applied to the root element if `color=\"neutral\"`."
-    },
-    "colorDanger": {
-      "description": "Classname applied to the root element if `color=\"danger\"`."
-    },
-    "colorInfo": { "description": "Classname applied to the root element if `color=\"info\"`." },
-    "colorSuccess": {
-      "description": "Classname applied to the root element if `color=\"success\"`."
-    },
-    "colorWarning": {
-      "description": "Classname applied to the root element if `color=\"warning\"`."
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Classname applied to the root element if `variant=\"plain\"`."
-    },
-    "variantOutlined": {
-      "description": "Classname applied to the root element if `variant=\"outlined\"`."
-    },
-    "variantSoft": {
-      "description": "Classname applied to the root element if `variant=\"soft\"`."
-    },
-    "variantSolid": {
-      "description": "Classname applied to the root element if `variant=\"solid\"`."
-    },
-    "sizeSm": { "description": "Classname applied to the root element if `size=\"sm\"`." },
-    "sizeMd": { "description": "Classname applied to the root element if `size=\"md\"`." },
-    "sizeLg": { "description": "Classname applied to the root element if `size=\"lg\"`." }
+      "conditions": "<code>orientation='vertical'</code>"
+    }
   },
   "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/docs/translations/api-docs/tooltip/tooltip.json b/docs/translations/api-docs/tooltip/tooltip.json
index 1052515510406b..410fdec86caacf 100644
--- a/docs/translations/api-docs/tooltip/tooltip.json
+++ b/docs/translations/api-docs/tooltip/tooltip.json
@@ -2,145 +2,89 @@
   "componentDescription": "",
   "propDescriptions": {
     "arrow": "If <code>true</code>, adds an arrow to the tooltip.",
-    "children": "Tooltip reference element.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "children": "Tooltip reference element.<br>⚠️ <a href=\"/material-ui/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "components": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead.",
+    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
     "describeChild": "Set to <code>true</code> if the <code>title</code> acts as an accessible description. By default the <code>title</code> acts as an accessible label for the child.",
-    "direction": "Direction of the text.",
     "disableFocusListener": "Do not respond to focus-visible events.",
     "disableHoverListener": "Do not respond to hover events.",
     "disableInteractive": "Makes a tooltip not interactive, i.e. it will close when the user hovers over the tooltip before the <code>leaveDelay</code> is expired.",
-    "disablePortal": "The <code>children</code> will be under the DOM hierarchy of the parent component.",
     "disableTouchListener": "Do not respond to long press touch events.",
     "enterDelay": "The number of milliseconds to wait before showing the tooltip. This prop won&#39;t impact the enter touch delay (<code>enterTouchDelay</code>).",
     "enterNextDelay": "The number of milliseconds to wait before showing the tooltip when one was already recently opened.",
     "enterTouchDelay": "The number of milliseconds a user must touch the element before showing the tooltip.",
     "followCursor": "If <code>true</code>, the tooltip follow the cursor over the wrapped element.",
     "id": "This prop is used to help implement the accessibility logic. If you don&#39;t provide this prop. It falls back to a randomly generated id.",
-    "keepMounted": "Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Popper.",
     "leaveDelay": "The number of milliseconds to wait before hiding the tooltip. This prop won&#39;t impact the leave touch delay (<code>leaveTouchDelay</code>).",
     "leaveTouchDelay": "The number of milliseconds after the user stops touching an element before hiding the tooltip.",
-    "modifiers": "Popper.js is based on a &quot;plugin-like&quot; architecture, most of its features are fully encapsulated &quot;modifiers&quot;.<br>A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks. To learn how to create a modifier, <a href=\"https://popper.js.org/docs/v2/modifiers/\">read the modifiers documentation</a>.",
     "onClose": "Callback fired when the component requests to be closed.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent) =&gt; void</code><br><em>event:</em> The event source of the callback.",
     "onOpen": "Callback fired when the component requests to be open.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent) =&gt; void</code><br><em>event:</em> The event source of the callback.",
     "open": "If <code>true</code>, the component is shown.",
     "placement": "Tooltip placement.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "PopperComponent": "The component used for the popper.",
+    "PopperProps": "Props applied to the <a href=\"/material-ui/api/popper/\"><code>Popper</code></a> element.",
+    "slotProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future.",
+    "slots": "The components used for each slot inside.<br>This prop is an alias for the <code>components</code> prop, which will be deprecated in the future.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "title": "Tooltip title. Zero-length titles string, undefined, null and false are never displayed.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "TransitionComponent": "The component used for the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component.",
+    "TransitionProps": "Props applied to the transition element. By default, the element is based on this <a href=\"http://reactcommunity.org/react-transition-group/transition/\"><code>Transition</code></a> component."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "tooltipArrow": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
+    "popper": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the Popper component"
+    },
+    "popperInteractive": {
+      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
+      "nodeName": "the Popper component",
+      "conditions": "<code>disableInteractive={true}</code>"
+    },
+    "popperArrow": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the Popper component",
       "conditions": "<code>arrow={true}</code>"
     },
-    "arrow": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the arrow element"
+    "popperClose": {
+      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
+      "nodeName": "the Popper component",
+      "conditions": "the tooltip is open"
+    },
+    "tooltip": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the tooltip (label wrapper) element"
+    },
+    "tooltipArrow": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the tooltip (label wrapper) element",
+      "conditions": "<code>arrow={true}</code>"
     },
+    "arrow": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the arrow element" },
     "touch": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the tooltip (label wrapper) element",
       "conditions": "the tooltip is opened by touch"
     },
-    "placementLeft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
+    "tooltipPlacementLeft": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the tooltip (label wrapper) element",
       "conditions": "<code>placement</code> contains \"left\""
     },
-    "placementRight": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
+    "tooltipPlacementRight": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the tooltip (label wrapper) element",
       "conditions": "<code>placement</code> contains \"right\""
     },
-    "placementTop": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
+    "tooltipPlacementTop": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the tooltip (label wrapper) element",
       "conditions": "<code>placement</code> contains \"top\""
     },
-    "placementBottom": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
+    "tooltipPlacementBottom": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the tooltip (label wrapper) element",
       "conditions": "<code>placement</code> contains \"bottom\""
-    },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "arrow": "The component that renders the arrow."
   }
 }
diff --git a/docs/translations/api-docs/typography/typography.json b/docs/translations/api-docs/typography/typography.json
index fc995f10b485ef..8438692a0a0bea 100644
--- a/docs/translations/api-docs/typography/typography.json
+++ b/docs/translations/api-docs/typography/typography.json
@@ -1,139 +1,123 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "align": "Set the text-align on the component.",
     "children": "The content of the component.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "endDecorator": "Element placed after the children.",
     "gutterBottom": "If <code>true</code>, the text will have a bottom margin.",
-    "level": "Applies the theme typography styles.",
-    "levelMapping": "The component maps the variant prop to a range of different HTML element types. For instance, body1 to <code>&lt;h6&gt;</code>. If you wish to change that mapping, you can provide your own. Alternatively, you can use the <code>component</code> prop.",
     "noWrap": "If <code>true</code>, the text will not wrap, but instead will truncate with a text overflow ellipsis.<br>Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow).",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "startDecorator": "Element placed before the children.",
+    "paragraph": "If <code>true</code>, the element will be a paragraph element.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "textColor": "The system color.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
+    "variant": "Applies the theme typography styles.",
+    "variantMapping": "The component maps the variant prop to a range of different HTML element types. For instance, subtitle1 to <code>&lt;h6&gt;</code>. If you wish to change that mapping, you can provide your own. Alternatively, you can use the <code>component</code> prop."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "h1": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>level=\"h1\"</code>"
-    },
-    "h2": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "root": { "description": "Styles applied to the root element." },
+    "body2": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>level=\"h2\"</code>"
+      "conditions": "<code>variant=\"body2\"</code>"
     },
-    "h3": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "body1": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>level=\"h3\"</code>"
+      "conditions": "<code>variant=\"body1\"</code>"
     },
-    "h4": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "caption": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>level=\"h4\"</code>"
+      "conditions": "<code>variant=\"caption\"</code>"
     },
-    "h5": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "button": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>level=\"h5\"</code>"
+      "conditions": "<code>variant=\"button\"</code>"
     },
-    "h6": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "h1": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>level=\"h6\"</code>"
+      "conditions": "<code>variant=\"h1\"</code>"
     },
-    "body1": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "h2": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>level=\"body1\"</code>"
+      "conditions": "<code>variant=\"h2\"</code>"
     },
-    "body2": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "h3": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>level=\"body2\"</code>"
+      "conditions": "<code>variant=\"h3\"</code>"
     },
-    "body3": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "h4": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>level=\"body3\"</code>"
+      "conditions": "<code>variant=\"h4\"</code>"
     },
-    "noWrap": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "h5": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>nowrap={true}</code>"
+      "conditions": "<code>variant=\"h5\"</code>"
     },
-    "gutterBottom": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "h6": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>gutterBottom={true}</code>"
+      "conditions": "<code>variant=\"h6\"</code>"
     },
-    "startDecorator": { "description": "Class name applied to the startDecorator element" },
-    "endDecorator": { "description": "Class name applied to the endDecorator element" },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "subtitle1": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
+      "conditions": "<code>variant=\"subtitle1\"</code>"
     },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "subtitle2": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
+      "conditions": "<code>variant=\"subtitle2\"</code>"
     },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "overline": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
+      "conditions": "<code>variant=\"overline\"</code>"
     },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "inherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
+      "conditions": "<code>variant=\"inherit\"</code>"
     },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "alignLeft": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
+      "conditions": "<code>align=\"left\"</code>"
     },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "alignCenter": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
+      "conditions": "<code>align=\"center\"</code>"
     },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
+    "alignRight": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
+      "conditions": "<code>align=\"right\"</code>"
     },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "alignJustify": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
+      "conditions": "<code>align=\"justify\"</code>"
     },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "noWrap": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
+      "conditions": "<code>nowrap={true}</code>"
     },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "gutterBottom": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
+      "conditions": "<code>gutterBottom={true}</code>"
     },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+    "paragraph": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
+      "conditions": "<code>paragraph={true}</code>"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "startDecorator": "The component that renders the start decorator.",
-    "endDecorator": "The component that renders the end decorator."
   }
 }
diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
index f1f6d8934b85fe..bf1a34a12ba14d 100644
--- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -685,10 +685,10 @@ export default async function generateComponentApi(
   if (!skipApiGeneration) {
     // Generate pages, json and translations
     let translationPagesDirectory = 'docs/translations/api-docs';
-    if (reactApi.apiPathname.startsWith('/joy-ui') && reactApi.filename.includes('mui-joy/src')) {
+    if (reactApi.apiPathname.match(/[\\/]joy-ui/) && reactApi.filename.match(/[\\/]mui-joy[\\/]src/)) {
       translationPagesDirectory = 'docs/translations/api-docs-joy';
     } else if (
-      reactApi.apiPathname.startsWith('/base') &&
+      reactApi.apiPathname.match(/[\\/]base/) &&
       reactApi.filename.includes('mui-base/src')
     ) {
       translationPagesDirectory = 'docs/translations/api-docs-base';

From cb6229174abf5cba08f1421d909144deb855c926 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 25 Apr 2023 10:02:26 +0200
Subject: [PATCH 20/30] One more fix

---
 packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
index bf1a34a12ba14d..821e75089c93b3 100644
--- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -689,7 +689,7 @@ export default async function generateComponentApi(
       translationPagesDirectory = 'docs/translations/api-docs-joy';
     } else if (
       reactApi.apiPathname.match(/[\\/]base/) &&
-      reactApi.filename.includes('mui-base/src')
+      reactApi.filename.match(/[\\/]mui-base[\\/]src/)
     ) {
       translationPagesDirectory = 'docs/translations/api-docs-base';
     }

From 4ebe89fc959a881215f36ccb56dd1b99b9729690 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 25 Apr 2023 10:24:27 +0200
Subject: [PATCH 21/30] more changes

---
 docs/translations/api-docs/badge/badge.json   | 128 ++++++++-
 docs/translations/api-docs/button/button.json | 256 ++++++++++++++++--
 .../api-docs/form-control/form-control.json   |  34 ++-
 docs/translations/api-docs/input/input.json   |  83 +++---
 .../api-docs/menu-item/menu-item.json         |  45 ++-
 docs/translations/api-docs/menu/menu.json     |  39 +--
 docs/translations/api-docs/modal/modal.json   |  14 +-
 docs/translations/api-docs/option/option.json |  79 +++++-
 docs/translations/api-docs/popper/popper.json |   8 +-
 docs/translations/api-docs/select/select.json | 119 +++++---
 docs/translations/api-docs/slider/slider.json | 104 ++++---
 .../api-docs/snackbar/snackbar.json           |  51 +++-
 docs/translations/api-docs/switch/switch.json |  79 ++++--
 .../api-docs/tab-panel/tab-panel.json         |  17 +-
 docs/translations/api-docs/tab/tab.json       |  64 ++++-
 .../table-pagination/table-pagination.json    |  46 ++--
 docs/translations/api-docs/tabs/tabs.json     |  90 ++++--
 .../ApiBuilders/ComponentApiBuilder.ts        |  23 +-
 18 files changed, 987 insertions(+), 292 deletions(-)

diff --git a/docs/translations/api-docs/badge/badge.json b/docs/translations/api-docs/badge/badge.json
index 677e829f386373..d4581d9dd4ae06 100644
--- a/docs/translations/api-docs/badge/badge.json
+++ b/docs/translations/api-docs/badge/badge.json
@@ -1,29 +1,143 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "anchorOrigin": "The anchor of the badge.",
     "badgeContent": "The content rendered within the badge.",
     "children": "The badge will be added relative to this node.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "components": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead.",
+    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
     "invisible": "If <code>true</code>, the badge is invisible.",
     "max": "Max count to show.",
+    "overlap": "Wrapped shape the badge should overlap.",
     "showZero": "Controls whether the badge is hidden when <code>badgeContent</code> is zero.",
     "slotProps": "The props used for each slot inside the Badge.",
-    "slots": "The components used for each slot inside the Badge. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
+    "slots": "The components used for each slot inside the Badge. Either a string to use a HTML element or a component.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The variant to use."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
+    "root": { "description": "Styles applied to the root element." },
     "badge": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the badge `span` element"
     },
+    "dot": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>variant=\"dot\"</code>"
+    },
+    "standard": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>variant=\"standard\"</code>"
+    },
+    "anchorOriginTopRight": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>anchorOrigin={{ 'top', 'right' }}</code>"
+    },
+    "anchorOriginBottomRight": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>anchorOrigin={{ 'bottom', 'right' }}</code>"
+    },
+    "anchorOriginTopLeft": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>anchorOrigin={{ 'top', 'left' }}</code>"
+    },
+    "anchorOriginBottomLeft": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>anchorOrigin={{ 'bottom', 'left' }}</code>"
+    },
     "invisible": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>invisible={true}</code>"
+    },
+    "colorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>color=\"secondary\"</code>"
+    },
+    "colorError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>color=\"error\"</code>"
+    },
+    "colorInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "anchorOriginTopRightRectangular": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>anchorOrigin={{ 'top', 'right' }} overlap=\"rectangular\"</code>"
+    },
+    "anchorOriginBottomRightRectangular": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>anchorOrigin={{ 'bottom', 'right' }} overlap=\"rectangular\"</code>"
+    },
+    "anchorOriginTopLeftRectangular": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>anchorOrigin={{ 'top', 'left' }} overlap=\"rectangular\"</code>"
+    },
+    "anchorOriginBottomLeftRectangular": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>anchorOrigin={{ 'bottom', 'left' }} overlap=\"rectangular\"</code>"
+    },
+    "anchorOriginTopRightCircular": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>anchorOrigin={{ 'top', 'right' }} overlap=\"circular\"</code>"
+    },
+    "anchorOriginBottomRightCircular": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>anchorOrigin={{ 'bottom', 'right' }} overlap=\"circular\"</code>"
+    },
+    "anchorOriginTopLeftCircular": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>anchorOrigin={{ 'top', 'left' }} overlap=\"circular\"</code>"
+    },
+    "anchorOriginBottomLeftCircular": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>anchorOrigin={{ 'bottom', 'left' }} overlap=\"circular\"</code>"
+    },
+    "overlapRectangular": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>overlap=\"rectangular\"</code>"
+    },
+    "overlapCircular": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the badge `span` element",
+      "conditions": "<code>overlap=\"circular\"</code>"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "badge": "The component that renders the badge."
   }
 }
diff --git a/docs/translations/api-docs/button/button.json b/docs/translations/api-docs/button/button.json
index e880be5b3dbae4..da71ba84da8ec4 100644
--- a/docs/translations/api-docs/button/button.json
+++ b/docs/translations/api-docs/button/button.json
@@ -1,29 +1,253 @@
 {
-  "componentDescription": "The foundation for building custom-styled buttons.",
+  "componentDescription": "",
   "propDescriptions": {
-    "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
+    "children": "The content of the component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "focusableWhenDisabled": "If <code>true</code>, allows a disabled button to receive focus.",
-    "slotProps": "The props used for each slot inside the Button.",
-    "slots": "The components used for each slot inside the Button. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
+    "disableElevation": "If <code>true</code>, no elevation is used.",
+    "disableFocusRipple": "If <code>true</code>, the  keyboard focus ripple is disabled.",
+    "disableRipple": "If <code>true</code>, the ripple effect is disabled.<br>⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the <code>.Mui-focusVisible</code> class.",
+    "endIcon": "Element placed after the children.",
+    "fullWidth": "If <code>true</code>, the button will take up the full width of its container.",
+    "href": "The URL to link to when the button is clicked. If defined, an <code>a</code> element will be used as the root node.",
+    "size": "The size of the component. <code>small</code> is equivalent to the dense button styling.",
+    "startIcon": "Element placed before the children.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The variant to use."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "active": {
+    "root": { "description": "Styles applied to the root element." },
+    "text": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code>"
+    },
+    "textInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"inherit\"</code>"
+    },
+    "textPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"primary\"</code>"
+    },
+    "textSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"secondary\"</code>"
+    },
+    "textSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"success\"</code>"
+    },
+    "textError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"error\"</code>"
+    },
+    "textInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"info\"</code>"
+    },
+    "textWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"warning\"</code>"
+    },
+    "outlined": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "outlinedInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"inherit\"</code>"
+    },
+    "outlinedPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"primary\"</code>"
+    },
+    "outlinedSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"secondary\"</code>"
+    },
+    "outlinedSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"success\"</code>"
+    },
+    "outlinedError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"error\"</code>"
+    },
+    "outlinedInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"info\"</code>"
+    },
+    "outlinedWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"warning\"</code>"
+    },
+    "contained": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code>"
+    },
+    "containedInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"inherit\"</code>"
+    },
+    "containedPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"primary\"</code>"
+    },
+    "containedSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"secondary\"</code>"
+    },
+    "containedSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"success\"</code>"
+    },
+    "containedInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"info\"</code>"
+    },
+    "containedError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"error\"</code>"
+    },
+    "containedWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"warning\"</code>"
+    },
+    "disableElevation": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disableElevation={true}</code>"
+    },
+    "focusVisible": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `button` element",
-      "conditions": "<code>active={true}</code>"
+      "nodeName": "the ButtonBase root element",
+      "conditions": "the button is keyboard focused"
     },
     "disabled": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `button` element",
+      "nodeName": "the root element",
       "conditions": "<code>disabled={true}</code>"
     },
-    "focusVisible": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `button` element",
-      "conditions": "<code>focusVisible={true}</code>"
+    "colorInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"inherit\"</code>"
+    },
+    "textSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code> and <code>variant=\"text\"</code>"
+    },
+    "textSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code> and <code>variant=\"text\"</code>"
+    },
+    "textSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code> and <code>variant=\"text\"</code>"
+    },
+    "outlinedSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code> and <code>variant=\"outlined\"</code>"
+    },
+    "outlinedSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code> and <code>variant=\"outlined\"</code>"
+    },
+    "outlinedSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code> and <code>variant=\"outlined\"</code>"
+    },
+    "containedSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code> and <code>variant=\"contained\"</code>"
+    },
+    "containedSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code> and <code>variant=\"contained\"</code>"
+    },
+    "containedSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code> and <code>variant=\"contained\"</code>"
+    },
+    "sizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code>"
+    },
+    "sizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code>"
+    },
+    "sizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code>"
+    },
+    "fullWidth": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fullWidth={true}</code>"
+    },
+    "startIcon": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the startIcon element",
+      "conditions": "supplied"
+    },
+    "endIcon": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the endIcon element",
+      "conditions": "supplied"
+    },
+    "iconSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "supplied and <code>size=\"small\"</code>"
+    },
+    "iconSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "supplied and <code>size=\"medium\"</code>"
+    },
+    "iconSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "supplied and <code>size=\"large\"</code>"
     }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  }
 }
diff --git a/docs/translations/api-docs/form-control/form-control.json b/docs/translations/api-docs/form-control/form-control.json
index 1af947ce5c1f86..31c98e255dbb53 100644
--- a/docs/translations/api-docs/form-control/form-control.json
+++ b/docs/translations/api-docs/form-control/form-control.json
@@ -1,15 +1,37 @@
 {
-  "componentDescription": "Provides context such as filled/focused/error/required for form inputs.\nRelying on the context provides high flexibility and ensures that the state always stays\nconsistent across the children of the `FormControl`.\nThis context is used by the following components:\n\n*   FormLabel\n*   FormHelperText\n*   Input\n*   InputLabel\n\nYou can find one composition example below and more going to [the demos](https://mui.com/material-ui/react-text-field/#components).\n\n```jsx\n<FormControl>\n  <InputLabel htmlFor=\"my-input\">Email address</InputLabel>\n  <Input id=\"my-input\" aria-describedby=\"my-helper-text\" />\n  <FormHelperText id=\"my-helper-text\">We'll never share your email.</FormHelperText>\n</FormControl>\n```\n\n⚠️ Only one `Input` can be used within a FormControl because it create visual inconsistencies.\nFor instance, only one input can be focused at the same time, the state shouldn't be shared.",
+  "componentDescription": "Provides context such as filled/focused/error/required for form inputs.\nRelying on the context provides high flexibility and ensures that the state always stays\nconsistent across the children of the `FormControl`.\nThis context is used by the following components:\n\n - FormLabel\n - FormHelperText\n - Input\n - InputLabel\n\nYou can find one composition example below and more going to [the demos](/material-ui/react-text-field/#components).\n\n```jsx\n<FormControl>\n  <InputLabel htmlFor=\"my-input\">Email address</InputLabel>\n  <Input id=\"my-input\" aria-describedby=\"my-helper-text\" />\n  <FormHelperText id=\"my-helper-text\">We'll never share your email.</FormHelperText>\n</FormControl>\n```\n\n⚠️ Only one `InputBase` can be used within a FormControl because it creates visual inconsistencies.\nFor instance, only one input can be focused at the same time, the state shouldn't be shared.",
   "propDescriptions": {
     "children": "The content of the component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disabled": "If <code>true</code>, the label, input and helper text should be displayed in a disabled state.",
     "error": "If <code>true</code>, the label is displayed in an error state.",
-    "onChange": "Callback fired when the form element&#39;s value is modified.",
+    "focused": "If <code>true</code>, the component is displayed in focused state.",
+    "fullWidth": "If <code>true</code>, the component will take up the full width of its container.",
+    "hiddenLabel": "If <code>true</code>, the label is hidden. This is used to increase density for a <code>FilledInput</code>. Be sure to add <code>aria-label</code> to the <code>input</code> element.",
+    "margin": "If <code>dense</code> or <code>normal</code>, will adjust vertical spacing of this and contained components.",
     "required": "If <code>true</code>, the label will indicate that the <code>input</code> is required.",
-    "slotProps": "The props used for each slot inside the FormControl.",
-    "slots": "The components used for each slot inside the FormControl. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "value": "The value of the form element."
+    "size": "The size of the component.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "variant": "The variant to use."
   },
-  "classDescriptions": {}
+  "classDescriptions": {
+    "root": { "description": "Styles applied to the root element." },
+    "marginNormal": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>margin=\"normal\"</code>"
+    },
+    "marginDense": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>margin=\"dense\"</code>"
+    },
+    "fullWidth": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fullWidth={true}</code>"
+    }
+  }
 }
diff --git a/docs/translations/api-docs/input/input.json b/docs/translations/api-docs/input/input.json
index 2853be93336b60..7b9e265eeed5c1 100644
--- a/docs/translations/api-docs/input/input.json
+++ b/docs/translations/api-docs/input/input.json
@@ -3,82 +3,99 @@
   "propDescriptions": {
     "autoComplete": "This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it&#39;s more like an autofill. You can learn more about it <a href=\"https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill\">following the specification</a>.",
     "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
-    "className": "Class name applied to the root element.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>. The prop defaults to the value (<code>&#39;primary&#39;</code>) inherited from the parent FormControl component.",
+    "components": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead.",
+    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
     "defaultValue": "The default value. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the component is disabled. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
-    "endAdornment": "Trailing adornment for this input.",
-    "error": "If <code>true</code>, the <code>input</code> will indicate an error by setting the <code>aria-invalid</code> attribute on the input and the <code>Mui-error</code> class on the root element. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
+    "disableUnderline": "If <code>true</code>, the <code>input</code> will not have an underline.",
+    "endAdornment": "End <code>InputAdornment</code> for this component.",
+    "error": "If <code>true</code>, the <code>input</code> will indicate an error. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
+    "fullWidth": "If <code>true</code>, the <code>input</code> will take up the full width of its container.",
     "id": "The id of the <code>input</code> element.",
+    "inputComponent": "The component used for the <code>input</code> element. Either a string to use a HTML element or a component.",
+    "inputProps": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes\">Attributes</a> applied to the <code>input</code> element.",
+    "inputRef": "Pass a ref to the <code>input</code> element.",
+    "margin": "If <code>dense</code>, will adjust vertical spacing. This is normally obtained via context from FormControl. The prop defaults to the value (<code>&#39;none&#39;</code>) inherited from the parent FormControl component.",
     "maxRows": "Maximum number of rows to display when multiline option is set to true.",
     "minRows": "Minimum number of rows to display when multiline option is set to true.",
-    "multiline": "If <code>true</code>, a <code>textarea</code> element is rendered.",
+    "multiline": "If <code>true</code>, a <a href=\"/material-ui/react-textarea-autosize/\">TextareaAutosize</a> element is rendered.",
     "name": "Name attribute of the <code>input</code> element.",
+    "onChange": "Callback fired when the value is changed.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLTextAreaElement | HTMLInputElement&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string).",
     "placeholder": "The short hint displayed in the <code>input</code> before the user enters a value.",
     "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).",
     "required": "If <code>true</code>, the <code>input</code> element is required. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
     "rows": "Number of rows to display when multiline option is set to true.",
-    "slotProps": "The props used for each slot inside the Input.",
-    "slots": "The components used for each slot inside the InputBase. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "startAdornment": "Leading adornment for this input.",
+    "slotProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future.",
+    "slots": "The components used for each slot inside.<br>This prop is an alias for the <code>components</code> prop, which will be deprecated in the future.",
+    "startAdornment": "Start <code>InputAdornment</code> for this component.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "type": "Type of the <code>input</code> element. It should be <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types\">a valid HTML5 input type</a>.",
     "value": "The value of the <code>input</code> element, required for a controlled component."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
+    "root": { "description": "Styles applied to the root element." },
     "formControl": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "the component is a descendant of <code>FormControl</code>"
     },
-    "adornedStart": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>startAdornment</code> is provided"
-    },
-    "adornedEnd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>endAdornment</code> is provided"
-    },
     "focused": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "the component is focused"
     },
     "disabled": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>disabled={true}</code>"
     },
+    "colorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "color secondary"
+    },
+    "underline": {
+      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disableUnderline={true}</code>"
+    },
     "error": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>error={true}</code>"
     },
+    "sizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the input element",
+      "conditions": "<code>size=\"small\"</code>"
+    },
     "multiline": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>multiline={true}</code>"
     },
-    "input": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the input element"
+    "fullWidth": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fullWidth={true}</code>"
+    },
+    "input": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the input element" },
+    "inputSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the input element",
+      "conditions": "<code>size=\"small\"</code>"
     },
     "inputMultiline": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the input element",
       "conditions": "<code>multiline={true}</code>"
     },
     "inputTypeSearch": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the input element",
       "conditions": "<code>type=\"search\"</code>"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "input": "The component that renders the input.",
-    "textarea": "The component that renders the textarea."
   }
 }
diff --git a/docs/translations/api-docs/menu-item/menu-item.json b/docs/translations/api-docs/menu-item/menu-item.json
index 1d5601b2a7adfa..007092738de45b 100644
--- a/docs/translations/api-docs/menu-item/menu-item.json
+++ b/docs/translations/api-docs/menu-item/menu-item.json
@@ -1,23 +1,48 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "autoFocus": "If <code>true</code>, the list item is focused during the first mount. Focus will also be triggered if the value changes from false to true.",
+    "children": "The content of the component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "label": "A text representation of the menu item&#39;s content. Used for keyboard text navigation matching.",
-    "slotProps": "The props used for each slot inside the MenuItem.",
-    "slots": "The components used for each slot inside the MenuItem. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
+    "dense": "If <code>true</code>, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent Menu component.",
+    "disableGutters": "If <code>true</code>, the left and right padding is removed.",
+    "divider": "If <code>true</code>, a 1px light border is added to the bottom of the menu item.",
+    "focusVisibleClassName": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/HEAD/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed.",
+    "selected": "If <code>true</code>, the component is selected.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
+    "root": { "description": "Styles applied to the root element." },
+    "focusVisible": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "keyboard focused"
+    },
+    "dense": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "dense"
+    },
     "disabled": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `button` element",
+      "nodeName": "the root element",
       "conditions": "<code>disabled={true}</code>"
     },
-    "focusVisible": {
+    "divider": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>divider={true}</code>"
+    },
+    "gutters": {
+      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
+      "nodeName": "the inner `component` element",
+      "conditions": "<code>disableGutters={true}</code>"
+    },
+    "selected": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `button` element",
-      "conditions": "<code>focusVisible={true}</code>"
+      "nodeName": "the root element",
+      "conditions": "<code>selected={true}</code>"
     }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  }
 }
diff --git a/docs/translations/api-docs/menu/menu.json b/docs/translations/api-docs/menu/menu.json
index da3220db4b7701..6880082fd0f57a 100644
--- a/docs/translations/api-docs/menu/menu.json
+++ b/docs/translations/api-docs/menu/menu.json
@@ -1,28 +1,29 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "actions": "A ref with imperative actions. It allows to select the first or last menu item.",
-    "anchorEl": "An HTML element, <a href=\"https://popper.js.org/docs/v2/virtual-elements/\">virtualElement</a>, or a function that returns either. It&#39;s used to set the position of the popper.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "onOpenChange": "Triggered when focus leaves the menu and the menu should close.",
-    "open": "Controls whether the menu is displayed.",
-    "slotProps": "The props used for each slot inside the Menu.",
-    "slots": "The components used for each slot inside the Menu. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
+    "anchorEl": "An HTML element, or a function that returns one. It&#39;s used to set the position of the menu.",
+    "autoFocus": "If <code>true</code> (Default) will focus the <code>[role=&quot;menu&quot;]</code> if no focusable child is found. Disabled children are not focusable. If you set this prop to <code>false</code> focus will be placed on the parent modal container. This has severe accessibility implications and should only be considered if you manage focus otherwise.",
+    "children": "Menu contents, normally <code>MenuItem</code>s.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "disableAutoFocusItem": "When opening the menu will not focus the active item but the <code>[role=&quot;menu&quot;]</code> unless <code>autoFocus</code> is also set to <code>false</code>. Not using the default means not following WAI-ARIA authoring practices. Please be considerate about possible accessibility implications.",
+    "MenuListProps": "Props applied to the <a href=\"/material-ui/api/menu-list/\"><code>MenuList</code></a> element.",
+    "onClose": "Callback fired when the component requests to be closed.<br><br><strong>Signature:</strong><br><code>function(event: object, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>reason:</em> Can be: <code>&quot;escapeKeyDown&quot;</code>, <code>&quot;backdropClick&quot;</code>, <code>&quot;tabKeyDown&quot;</code>.",
+    "open": "If <code>true</code>, the component is shown.",
+    "PopoverClasses": "<code>classes</code> prop applied to the <a href=\"/material-ui/api/popover/\"><code>Popover</code></a> element.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "transitionDuration": "The length of the transition in <code>ms</code>, or &#39;auto&#39;",
+    "TransitionProps": "Props applied to the transition element. By default, the element is based on this <a href=\"http://reactcommunity.org/react-transition-group/transition/\"><code>Transition</code></a> component.",
+    "variant": "The variant to use. Use <code>menu</code> to prevent selected items from impacting the initial focus."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "listbox": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the listbox element"
+    "root": { "description": "Styles applied to the root element." },
+    "paper": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the Paper component"
     },
-    "expanded": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `Popper` element and the listbox `ul` element",
-      "conditions": "<code>open={true}</code>"
+    "list": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the List component via `MenuList`"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "listbox": "The component that renders the listbox."
   }
 }
diff --git a/docs/translations/api-docs/modal/modal.json b/docs/translations/api-docs/modal/modal.json
index 83c5cf84ab30ec..97b62347bb30e4 100644
--- a/docs/translations/api-docs/modal/modal.json
+++ b/docs/translations/api-docs/modal/modal.json
@@ -1,9 +1,14 @@
 {
-  "componentDescription": "Modal is a lower-level construct that is leveraged by the following components:\n\n*   [Dialog](https://mui.com/material-ui/api/dialog/)\n*   [Drawer](https://mui.com/material-ui/api/drawer/)\n*   [Menu](https://mui.com/material-ui/api/menu/)\n*   [Popover](https://mui.com/material-ui/api/popover/)\n\nIf you are creating a modal dialog, you probably want to use the [Dialog](https://mui.com/material-ui/api/dialog/) component\nrather than directly using Modal.\n\nThis component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).",
+  "componentDescription": "Modal is a lower-level construct that is leveraged by the following components:\n\n- [Dialog](/material-ui/api/dialog/)\n- [Drawer](/material-ui/api/drawer/)\n- [Menu](/material-ui/api/menu/)\n- [Popover](/material-ui/api/popover/)\n\nIf you are creating a modal dialog, you probably want to use the [Dialog](/material-ui/api/dialog/) component\nrather than directly using Modal.\n\nThis component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).",
   "propDescriptions": {
+    "BackdropComponent": "A backdrop component. This prop enables custom backdrop rendering.",
+    "BackdropProps": "Props applied to the <a href=\"/material-ui/api/backdrop/\"><code>Backdrop</code></a> element.",
     "children": "A single child content element.<br>⚠️ <a href=\"/material-ui/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "closeAfterTransition": "When set to true the Modal waits until a nested Transition is completed before closing.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "components": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead.",
+    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
     "container": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time.",
     "disableAutoFocus": "If <code>true</code>, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the <code>disableAutoFocus</code> prop.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers.",
     "disableEnforceFocus": "If <code>true</code>, the modal will not prevent focus from leaving the modal while open.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers.",
@@ -17,7 +22,8 @@
     "onClose": "Callback fired when the component requests to be closed. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>.<br><br><strong>Signature:</strong><br><code>function(event: object, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>reason:</em> Can be: <code>&quot;escapeKeyDown&quot;</code>, <code>&quot;backdropClick&quot;</code>.",
     "open": "If <code>true</code>, the component is shown.",
     "slotProps": "The props used for each slot inside the Modal.",
-    "slots": "The components used for each slot inside the Modal. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
+    "slots": "The components used for each slot inside the Modal. Either a string to use a HTML element or a component.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
     "root": { "description": "Class name applied to the root element." },
@@ -30,9 +36,5 @@
       "description": "Class name applied to {{nodeName}}.",
       "nodeName": "the backdrop element"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "backdrop": "The component that renders the backdrop."
   }
 }
diff --git a/docs/translations/api-docs/option/option.json b/docs/translations/api-docs/option/option.json
index 9242960c42375e..a38126f4d6801c 100644
--- a/docs/translations/api-docs/option/option.json
+++ b/docs/translations/api-docs/option/option.json
@@ -1,29 +1,88 @@
 {
-  "componentDescription": "An unstyled option to be used within a Select.",
+  "componentDescription": "",
   "propDescriptions": {
+    "children": "The content of the component.",
+    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "disabled": "If <code>true</code>, the option will be disabled.",
+    "disabled": "If <code>true</code>, the component is disabled.",
     "label": "A text representation of the option&#39;s content. Used for keyboard text navigation matching.",
-    "slotProps": "The props used for each slot inside the Option.",
-    "slots": "The components used for each slot inside the Option. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "value": "The value of the option."
+    "slotProps": "The props used for each slot inside.",
+    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "value": "The option value.",
+    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
   },
   "classDescriptions": {
     "root": { "description": "Class name applied to the root element." },
+    "colorPrimary": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorNeutral": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"neutral\"</code>"
+    },
+    "colorDanger": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"danger\"</code>"
+    },
+    "colorInfo": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "colorContext": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"context\"</code>"
+    },
     "disabled": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `li` element",
+      "nodeName": "the root element",
       "conditions": "<code>disabled={true}</code>"
     },
     "selected": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `li` element",
-      "conditions": "<code>selected={true}</code>"
+      "nodeName": "the root element",
+      "conditions": "the option is selected"
     },
     "highlighted": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `li` element",
-      "conditions": "<code>highlighted={true}</code>"
+      "nodeName": "the root element",
+      "conditions": "the option is highlighted"
+    },
+    "variantPlain": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"plain\"</code>"
+    },
+    "variantSoft": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"soft\"</code>"
+    },
+    "variantOutlined": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "variantSolid": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"solid\"</code>"
     }
   },
   "slotDescriptions": { "root": "The component that renders the root." }
diff --git a/docs/translations/api-docs/popper/popper.json b/docs/translations/api-docs/popper/popper.json
index 2fee1eb3dd079f..b6533b390e8cf1 100644
--- a/docs/translations/api-docs/popper/popper.json
+++ b/docs/translations/api-docs/popper/popper.json
@@ -1,10 +1,11 @@
 {
-  "componentDescription": "Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v2/) for positioning.",
+  "componentDescription": "",
   "propDescriptions": {
     "anchorEl": "An HTML element, <a href=\"https://popper.js.org/docs/v2/virtual-elements/\">virtualElement</a>, or a function that returns either. It&#39;s used to set the position of the popper. The return value will passed as the reference object of the Popper instance.",
     "children": "Popper render function or node.",
+    "components": "The components used for each slot inside the Popper. Either a string to use a HTML element or a component.",
+    "componentsProps": "The props used for each slot inside the Popper.",
     "container": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time.",
-    "direction": "Direction of the text.",
     "disablePortal": "The <code>children</code> will be under the DOM hierarchy of the parent component.",
     "keepMounted": "Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Popper.",
     "modifiers": "Popper.js is based on a &quot;plugin-like&quot; architecture, most of its features are fully encapsulated &quot;modifiers&quot;.<br>A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks. To learn how to create a modifier, <a href=\"https://popper.js.org/docs/v2/modifiers/\">read the modifiers documentation</a>.",
@@ -13,7 +14,8 @@
     "popperOptions": "Options provided to the <a href=\"https://popper.js.org/docs/v2/constructors/#options\"><code>Popper.js</code></a> instance.",
     "popperRef": "A ref that points to the used popper instance.",
     "slotProps": "The props used for each slot inside the Popper.",
-    "slots": "The components used for each slot inside the Popper. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "slots": "The components used for each slot inside the Popper. Either a string to use a HTML element or a component.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "transition": "Help supporting a react-transition-group/Transition component."
   },
   "classDescriptions": {}
diff --git a/docs/translations/api-docs/select/select.json b/docs/translations/api-docs/select/select.json
index 590bbb9533d5fc..0e09fe6d4805dd 100644
--- a/docs/translations/api-docs/select/select.json
+++ b/docs/translations/api-docs/select/select.json
@@ -1,58 +1,89 @@
 {
-  "componentDescription": "The foundation for building custom-styled select components.",
+  "componentDescription": "",
   "propDescriptions": {
-    "autoFocus": "If <code>true</code>, the select element is focused during the first mount",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "defaultListboxOpen": "If <code>true</code>, the select will be initially open.",
-    "defaultValue": "The default selected value. Use when the component is not controlled.",
-    "disabled": "If <code>true</code>, the select is disabled.",
-    "getSerializedValue": "A function to convert the currently selected value to a string. Used to set a value of a hidden input associated with the select, so that the selected value can be posted with a form.",
-    "listboxId": "<code>id</code> attribute of the listbox element.",
-    "listboxOpen": "Controls the open state of the select&#39;s listbox.",
-    "multiple": "If <code>true</code>, selecting multiple values is allowed. This affects the type of the <code>value</code>, <code>defaultValue</code>, and <code>onChange</code> props.",
-    "name": "Name of the element. For example used by the server to identify the fields in form submits. If the name is provided, the component will render a hidden input element that can be submitted to a server.",
-    "onChange": "Callback fired when an option is selected.",
-    "onListboxOpenChange": "Callback fired when the component requests to be opened. Use in controlled mode (see listboxOpen).",
-    "optionStringifier": "A function used to convert the option label to a string. It&#39;s useful when labels are elements and need to be converted to plain text to enable navigation using character keys on a keyboard.",
-    "renderValue": "Function that customizes the rendering of the selected value.",
-    "slotProps": "The props used for each slot inside the Input.",
-    "slots": "The components used for each slot inside the Select. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "value": "The selected value. Set to <code>null</code> to deselect all options."
+    "autoWidth": "If <code>true</code>, the width of the popover will automatically be set according to the items inside the menu, otherwise it will be at least the width of the select input.",
+    "children": "The option elements to populate the select with. Can be some <code>MenuItem</code> when <code>native</code> is false and <code>option</code> when <code>native</code> is true.<br>⚠️The <code>MenuItem</code> elements <strong>must</strong> be direct descendants when <code>native</code> is false.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "defaultOpen": "If <code>true</code>, the component is initially open. Use when the component open state is not controlled (i.e. the <code>open</code> prop is not defined). You can only use it when the <code>native</code> prop is <code>false</code> (default).",
+    "defaultValue": "The default value. Use when the component is not controlled.",
+    "displayEmpty": "If <code>true</code>, a value is displayed even if no items are selected.<br>In order to display a meaningful value, a function can be passed to the <code>renderValue</code> prop which returns the value to be displayed when no items are selected.<br>⚠️ When using this prop, make sure the label doesn&#39;t overlap with the empty displayed value. The label should either be hidden or forced to a shrunk state.",
+    "IconComponent": "The icon that displays the arrow.",
+    "id": "The <code>id</code> of the wrapper element or the <code>select</code> element when <code>native</code>.",
+    "input": "An <code>Input</code> element; does not have to be a material-ui specific <code>Input</code>.",
+    "inputProps": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes\">Attributes</a> applied to the <code>input</code> element. When <code>native</code> is <code>true</code>, the attributes are applied on the <code>select</code> element.",
+    "label": "See <a href=\"/material-ui/api/outlined-input/#props\">OutlinedInput#label</a>",
+    "labelId": "The ID of an element that acts as an additional label. The Select will be labelled by the additional label and the selected value.",
+    "MenuProps": "Props applied to the <a href=\"/material-ui/api/menu/\"><code>Menu</code></a> element.",
+    "multiple": "If <code>true</code>, <code>value</code> must be an array and the menu will support multiple selections.",
+    "native": "If <code>true</code>, the component uses a native <code>select</code> element.",
+    "onChange": "Callback fired when a menu item is selected.<br><br><strong>Signature:</strong><br><code>function(event: SelectChangeEvent&lt;T&gt;, child?: object) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (any). <strong>Warning</strong>: This is a generic event, not a change event, unless the change event is caused by browser autofill.<br><em>child:</em> The react element that was selected when <code>native</code> is <code>false</code> (default).",
+    "onClose": "Callback fired when the component requests to be closed. Use it in either controlled (see the <code>open</code> prop), or uncontrolled mode (to detect when the Select collapses).<br><br><strong>Signature:</strong><br><code>function(event: object) =&gt; void</code><br><em>event:</em> The event source of the callback.",
+    "onOpen": "Callback fired when the component requests to be opened. Use it in either controlled (see the <code>open</code> prop), or uncontrolled mode (to detect when the Select expands).<br><br><strong>Signature:</strong><br><code>function(event: object) =&gt; void</code><br><em>event:</em> The event source of the callback.",
+    "open": "If <code>true</code>, the component is shown. You can only use it when the <code>native</code> prop is <code>false</code> (default).",
+    "renderValue": "Render the selected value. You can only use it when the <code>native</code> prop is <code>false</code> (default).<br><br><strong>Signature:</strong><br><code>function(value: any) =&gt; ReactNode</code><br><em>value:</em> The <code>value</code> provided to the component.",
+    "SelectDisplayProps": "Props applied to the clickable div element.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "value": "The <code>input</code> value. Providing an empty string will select no options. Set to an empty string <code>&#39;&#39;</code> if you don&#39;t want any of the available options to be selected.<br>If the value is an object it must have reference equality with the option in order to be selected. If the value is not an object, the string representation must match with the string representation of the option in order to be selected.",
+    "variant": "The variant to use."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "listbox": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the listbox element"
+    "select": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the select component `select` class"
     },
-    "popper": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the popper element"
+    "multiple": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the select component",
+      "conditions": "<code>multiple={true}</code>"
     },
-    "active": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `button` element",
-      "conditions": "<code>active={true}</code>"
+    "filled": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the select component",
+      "conditions": "<code>variant=\"filled\"</code>"
     },
-    "expanded": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `button` element",
-      "conditions": "<code>expanded={true}</code>"
+    "outlined": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the select component",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "standard": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the select component",
+      "conditions": "<code>variant=\"standard\"</code>"
     },
     "disabled": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `button` element and the listbox 'ul' element",
-      "conditions": "<code>disabled={true}</code>"
+      "description": "State class applied to {{nodeName}}.",
+      "nodeName": "the select component `disabled` class"
+    },
+    "icon": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon component" },
+    "iconOpen": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon component",
+      "conditions": "the popup is open"
     },
-    "focusVisible": {
+    "iconFilled": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon component",
+      "conditions": "<code>variant=\"filled\"</code>"
+    },
+    "iconOutlined": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon component",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "iconStandard": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon component",
+      "conditions": "<code>variant=\"standard\"</code>"
+    },
+    "nativeInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the underlying native input component"
+    },
+    "error": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `button` element",
-      "conditions": "<code>focusVisible={true}</code>"
+      "nodeName": "the root element",
+      "conditions": "<code>error={true}</code>"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "listbox": "The component that renders the listbox.",
-    "popper": "The component that renders the popper."
   }
 }
diff --git a/docs/translations/api-docs/slider/slider.json b/docs/translations/api-docs/slider/slider.json
index 3a12486a363953..e7e7dce95d28cc 100644
--- a/docs/translations/api-docs/slider/slider.json
+++ b/docs/translations/api-docs/slider/slider.json
@@ -4,13 +4,15 @@
     "aria-label": "The label of the slider.",
     "aria-labelledby": "The id of the element containing a label for the slider.",
     "aria-valuetext": "A string value that provides a user-friendly name for the current value of the slider.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
+    "components": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead.",
+    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
     "defaultValue": "The default value. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the component is disabled.",
     "disableSwap": "If <code>true</code>, the active thumb doesn&#39;t swap when moving pointer over a thumb while dragging another thumb.",
     "getAriaLabel": "Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. This is important for screen reader users.<br><br><strong>Signature:</strong><br><code>function(index: number) =&gt; string</code><br><em>index:</em> The thumb label&#39;s index to format.",
     "getAriaValueText": "Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users.<br><br><strong>Signature:</strong><br><code>function(value: number, index: number) =&gt; string</code><br><em>value:</em> The thumb label&#39;s value to format.<br><em>index:</em> The thumb label&#39;s index to format.",
-    "isRtl": "If <code>true</code> the Slider will be rendered right-to-left (with the lowest value on the right-hand side).",
     "marks": "Marks indicate predetermined values to which the user can move the slider. If <code>true</code> the marks are spaced according the value of the <code>step</code> prop. If an array, it should contain objects with <code>value</code> and an optional <code>label</code> keys.",
     "max": "The maximum allowed value of the slider. Should not be equal to min.",
     "min": "The minimum allowed value of the slider. Should not be equal to max.",
@@ -19,23 +21,36 @@
     "onChangeCommitted": "Callback function that is fired when the <code>mouseup</code> is triggered.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent | Event, value: number | Array&lt;number&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> The new value.",
     "orientation": "The component orientation.",
     "scale": "A transformation function, to change the scale of the slider.<br><br><strong>Signature:</strong><br><code>function(x: any) =&gt; any</code><br>",
+    "size": "The size of the slider.",
     "slotProps": "The props used for each slot inside the Slider.",
-    "slots": "The components used for each slot inside the Slider. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
+    "slots": "The components used for each slot inside the Slider. Either a string to use a HTML element or a component.",
     "step": "The granularity with which the slider can step through values. (A &quot;discrete&quot; slider.) The <code>min</code> prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is <code>null</code>, the thumb can only be slid onto marks provided with the <code>marks</code> prop.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "tabIndex": "Tab index attribute of the hidden <code>input</code> element.",
     "track": "The track presentation:<br>- <code>normal</code> the track will render a bar representing the slider value. - <code>inverted</code> the track will render a bar representing the remaining slider value. - <code>false</code> the track will render without a bar.",
     "value": "The value of the slider. For ranged sliders, provide an array with two values.",
+    "valueLabelDisplay": "Controls when the value label is displayed:<br>- <code>auto</code> the value label will display when the thumb is hovered or focused. - <code>on</code> will display persistently. - <code>off</code> will never display.",
     "valueLabelFormat": "The format function the value label&#39;s value.<br>When a function is provided, it should have the following signature:<br>- {number} value The value label&#39;s value to format - {number} index The value label&#39;s index to format"
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
+    "root": { "description": "Styles applied to the root element." },
+    "colorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"secondary\"</code>"
+    },
     "marked": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>marks</code> is provided with at least one label"
     },
     "vertical": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>orientation=\"vertical\"</code>"
     },
@@ -49,28 +64,19 @@
       "nodeName": "the root",
       "conditions": "a thumb is being dragged"
     },
-    "rail": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the rail element"
-    },
-    "track": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the track element"
-    },
+    "rail": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the rail element" },
+    "track": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the track element" },
     "trackFalse": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>track={false}</code>"
     },
     "trackInverted": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>track=\"inverted\"</code>"
     },
-    "thumb": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the thumb element"
-    },
+    "thumb": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the thumb element" },
     "active": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the thumb element",
@@ -81,33 +87,57 @@
       "nodeName": "the thumb element",
       "conditions": "keyboard focused"
     },
-    "mark": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the mark element"
-    },
+    "mark": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the mark element" },
     "markActive": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the mark element",
       "conditions": "active (depending on the value)"
     },
     "markLabel": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the mark label element"
     },
     "markLabelActive": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the mark label element",
       "conditions": "active (depending on the value)"
+    },
+    "sizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code>"
+    },
+    "thumbColorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the thumb element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "thumbColorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the thumb element",
+      "conditions": "<code>color=\"secondary\"</code>"
+    },
+    "thumbSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the thumb element",
+      "conditions": "<code>size=\"small\"</code>"
+    },
+    "valueLabel": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the thumb label element"
+    },
+    "valueLabelOpen": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the thumb label element",
+      "conditions": "it's open"
+    },
+    "valueLabelCircle": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the thumb label's circle element"
+    },
+    "valueLabelLabel": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the thumb label's label element"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "track": "The component that renders the track.",
-    "rail": "The component that renders the rail.",
-    "thumb": "The component that renders the thumb.",
-    "mark": "The component that renders the mark.",
-    "markLabel": "The component that renders the mark label.",
-    "valueLabel": "The component that renders the value label.",
-    "input": "The component that renders the input."
   }
 }
diff --git a/docs/translations/api-docs/snackbar/snackbar.json b/docs/translations/api-docs/snackbar/snackbar.json
index 6c4f7ffd1ef1fd..f711f727361f42 100644
--- a/docs/translations/api-docs/snackbar/snackbar.json
+++ b/docs/translations/api-docs/snackbar/snackbar.json
@@ -1,16 +1,55 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "action": "The action to display. It renders after the message, at the end of the snackbar.",
+    "anchorOrigin": "The anchor of the <code>Snackbar</code>. On smaller screens, the component grows to occupy all the available width, the horizontal alignment is ignored.",
     "autoHideDuration": "The number of milliseconds to wait before automatically calling the <code>onClose</code> function. <code>onClose</code> should then set the state of the <code>open</code> prop to hide the Snackbar. This behavior is disabled by default with the <code>null</code> value.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "children": "Replace the <code>SnackbarContent</code> component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "ClickAwayListenerProps": "Props applied to the <code>ClickAwayListener</code> element.",
+    "ContentProps": "Props applied to the <a href=\"/material-ui/api/snackbar-content/\"><code>SnackbarContent</code></a> element.",
     "disableWindowBlurListener": "If <code>true</code>, the <code>autoHideDuration</code> timer will expire even if the window is not focused.",
-    "exited": "The prop used to handle exited transition and unmount the component.",
+    "key": "When displaying multiple consecutive Snackbars from a parent rendering a single &lt;Snackbar/&gt;, add the key prop to ensure independent treatment of each message. e.g. &lt;Snackbar key={message} /&gt;, otherwise, the message may update-in-place and features such as autoHideDuration may be canceled.",
+    "message": "The message to display.",
     "onClose": "Callback fired when the component requests to be closed. Typically <code>onClose</code> is used to set state in the parent component, which is used to control the <code>Snackbar</code> <code>open</code> prop. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>, for example ignoring <code>clickaway</code>.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent&lt;any&gt; | Event, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>reason:</em> Can be: <code>&quot;timeout&quot;</code> (<code>autoHideDuration</code> expired), <code>&quot;clickaway&quot;</code>, or <code>&quot;escapeKeyDown&quot;</code>.",
     "open": "If <code>true</code>, the component is shown.",
     "resumeHideDuration": "The number of milliseconds to wait before dismissing after user interaction. If <code>autoHideDuration</code> prop isn&#39;t specified, it does nothing. If <code>autoHideDuration</code> prop is specified but <code>resumeHideDuration</code> isn&#39;t, we default to <code>autoHideDuration / 2</code> ms.",
-    "slotProps": "The props used for each slot inside the Snackbar.",
-    "slots": "The components used for each slot inside the Snackbar. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "TransitionComponent": "The component used for the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component.",
+    "transitionDuration": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.",
+    "TransitionProps": "Props applied to the transition element. By default, the element is based on this <a href=\"http://reactcommunity.org/react-transition-group/transition/\"><code>Transition</code></a> component."
   },
-  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  "classDescriptions": {
+    "root": { "description": "Styles applied to the root element." },
+    "anchorOriginTopCenter": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>anchorOrigin={{ 'top', 'center' }}</code>"
+    },
+    "anchorOriginBottomCenter": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>anchorOrigin={{ 'bottom', 'center' }}</code>"
+    },
+    "anchorOriginTopRight": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>anchorOrigin={{ 'top', 'right' }}</code>"
+    },
+    "anchorOriginBottomRight": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>anchorOrigin={{ 'bottom', 'right' }}</code>"
+    },
+    "anchorOriginTopLeft": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>anchorOrigin={{ 'top', 'left' }}</code>"
+    },
+    "anchorOriginBottomLeft": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>anchorOrigin={{ 'bottom', 'left' }}</code>"
+    }
+  }
 }
diff --git a/docs/translations/api-docs/switch/switch.json b/docs/translations/api-docs/switch/switch.json
index c51aac68be0678..1e5c6b7daab8ad 100644
--- a/docs/translations/api-docs/switch/switch.json
+++ b/docs/translations/api-docs/switch/switch.json
@@ -1,36 +1,75 @@
 {
-  "componentDescription": "The foundation for building custom-styled switches.",
+  "componentDescription": "",
   "propDescriptions": {
     "checked": "If <code>true</code>, the component is checked.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "checkedIcon": "The icon to display when the component is checked.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
     "defaultChecked": "The default checked state. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the component is disabled.",
+    "disableRipple": "If <code>true</code>, the ripple effect is disabled.",
+    "edge": "If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape).",
+    "icon": "The icon to display when the component is unchecked.",
+    "id": "The id of the <code>input</code> element.",
+    "inputProps": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes\">Attributes</a> applied to the <code>input</code> element.",
+    "inputRef": "Pass a ref to the <code>input</code> element.",
     "onChange": "Callback fired when the state is changed.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string). You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean).",
-    "readOnly": "If <code>true</code>, the component is read only.",
     "required": "If <code>true</code>, the <code>input</code> element is required.",
-    "slotProps": "The props used for each slot inside the Switch.",
-    "slots": "The components used for each slot inside the Switch. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
+    "size": "The size of the component. <code>small</code> is equivalent to the dense switch styling.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "value": "The value of the component. The DOM API casts this to a string. The browser uses &quot;on&quot; as the default value."
   },
   "classDescriptions": {
-    "root": { "description": "Class applied to the root element." },
-    "input": { "description": "Class applied to the internal input element" },
-    "track": { "description": "Class applied to the track element" },
-    "thumb": { "description": "Class applied to the thumb element" },
+    "root": { "description": "Styles applied to the root element." },
+    "edgeStart": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>edge=\"start\"</code>"
+    },
+    "edgeEnd": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>edge=\"end\"</code>"
+    },
+    "switchBase": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the internal `SwitchBase` component's `root` class"
+    },
+    "colorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the internal SwitchBase component's root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the internal SwitchBase component's root element",
+      "conditions": "<code>color=\"secondary\"</code>"
+    },
+    "sizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code>"
+    },
+    "sizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code>"
+    },
     "checked": {
-      "description": "State class applied to the root element if the switch is checked"
+      "description": "State class applied to {{nodeName}}.",
+      "nodeName": "the internal `SwitchBase` component's `checked` class"
     },
     "disabled": {
-      "description": "State class applied to the root element if the switch is disabled"
+      "description": "State class applied to {{nodeName}}.",
+      "nodeName": "the internal SwitchBase component's disabled class"
     },
-    "focusVisible": {
-      "description": "State class applied to the root element if the switch has visible focus"
+    "input": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the internal SwitchBase component's input element"
     },
-    "readOnly": { "description": "Class applied to the root element if the switch is read-only" }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "input": "The component that renders the input.",
-    "thumb": "The component that renders the thumb.",
-    "track": "The component that renders the track."
+    "thumb": {
+      "description": "Styles used to create the thumb passed to the internal `SwitchBase` component `icon` prop."
+    },
+    "track": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the track element" }
   }
 }
diff --git a/docs/translations/api-docs/tab-panel/tab-panel.json b/docs/translations/api-docs/tab-panel/tab-panel.json
index fa22ca26bbdc73..9dddc21ca16db5 100644
--- a/docs/translations/api-docs/tab-panel/tab-panel.json
+++ b/docs/translations/api-docs/tab-panel/tab-panel.json
@@ -2,18 +2,9 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "slotProps": "The props used for each slot inside the TabPanel.",
-    "slots": "The components used for each slot inside the TabPanel. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "value": "The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected. If not provided, it will fall back to the index of the panel. It is recommended to explicitly provide it, as it&#39;s required for the tab panel to be rendered on the server."
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "value": "The <code>value</code> of the corresponding <code>Tab</code>. Must use the index of the <code>Tab</code> when no <code>value</code> was passed to <code>Tab</code>."
   },
-  "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "hidden": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `div` element",
-      "conditions": "<code>hidden={true}</code>"
-    }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  "classDescriptions": { "root": { "description": "Styles applied to the root element." } }
 }
diff --git a/docs/translations/api-docs/tab/tab.json b/docs/translations/api-docs/tab/tab.json
index a022f725a44992..1326365b9a0752 100644
--- a/docs/translations/api-docs/tab/tab.json
+++ b/docs/translations/api-docs/tab/tab.json
@@ -1,26 +1,64 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "children": "This prop isn&#39;t supported. Use the <code>component</code> prop if you need to change the children structure.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "onChange": "Callback invoked when new value is being set.",
-    "slotProps": "The props used for each slot inside the Tab.",
-    "slots": "The components used for each slot inside the Tab. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "value": "You can provide your own value. Otherwise, it falls back to the child position index."
+    "disableFocusRipple": "If <code>true</code>, the  keyboard focus ripple is disabled.",
+    "disableRipple": "If <code>true</code>, the ripple effect is disabled.<br>⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the <code>.Mui-focusVisible</code> class.",
+    "icon": "The icon to display.",
+    "iconPosition": "The position of the icon relative to the label.",
+    "label": "The label element.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "value": "You can provide your own value. Otherwise, we fallback to the child position index.",
+    "wrapped": "Tab labels appear in a single row. They can use a second line if needed."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
+    "root": { "description": "Styles applied to the root element." },
+    "labelIcon": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "both <code>icon</code> and <code>label</code> are provided"
+    },
+    "textColorInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "the parent [<code>Tabs</code>](/material-ui/api/tabs/) has <code>textColor=\"inherit\"</code>"
+    },
+    "textColorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "the parent [<code>Tabs</code>](/material-ui/api/tabs/) has <code>textColor=\"primary\"</code>"
+    },
+    "textColorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "the parent [<code>Tabs</code>](/material-ui/api/tabs/) has <code>textColor=\"secondary\"</code>"
+    },
     "selected": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `button` element",
-      "conditions": "<code>selected={true}</code>"
+      "nodeName": "the root element",
+      "conditions": "<code>selected={true}</code> (controlled by the Tabs component)"
     },
     "disabled": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `button` element",
-      "conditions": "<code>disabled={true}</code>"
+      "nodeName": "the root element",
+      "conditions": "<code>disabled={true}</code> (controlled by the Tabs component)"
+    },
+    "fullWidth": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fullWidth={true}</code> (controlled by the Tabs component)"
+    },
+    "wrapped": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>wrapped={true}</code>"
+    },
+    "iconWrapper": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the wrapper element of `icon`",
+      "conditions": "<code>icon</code> is provided"
     }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  }
 }
diff --git a/docs/translations/api-docs/table-pagination/table-pagination.json b/docs/translations/api-docs/table-pagination/table-pagination.json
index 106432ab9dccd0..cff49eb2a8cacb 100644
--- a/docs/translations/api-docs/table-pagination/table-pagination.json
+++ b/docs/translations/api-docs/table-pagination/table-pagination.json
@@ -1,72 +1,66 @@
 {
-  "componentDescription": "A pagination for tables.",
+  "componentDescription": "A `TableCell` based component for placing inside `TableFooter` for pagination.",
   "propDescriptions": {
+    "ActionsComponent": "The component used for displaying the actions. Either a string to use a HTML element or a component.",
+    "backIconButtonProps": "Props applied to the back arrow <a href=\"/material-ui/api/icon-button/\"><code>IconButton</code></a> component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "count": "The total number of rows.<br>To enable server side pagination for an unknown number of items, provide -1.",
     "getItemAriaLabel": "Accepts a function which returns a string value that provides a user-friendly name for the current page. This is important for screen reader users.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.<br><br><strong>Signature:</strong><br><code>function(type: string) =&gt; string</code><br><em>type:</em> The link or button type to format (&#39;first&#39; | &#39;last&#39; | &#39;next&#39; | &#39;previous&#39;).",
     "labelDisplayedRows": "Customize the displayed rows label. Invoked with a <code>{ from, to, count, page }</code> object.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
-    "labelId": "Id of the label element within the pagination.",
     "labelRowsPerPage": "Customize the rows per page label.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
+    "nextIconButtonProps": "Props applied to the next arrow <a href=\"/material-ui/api/icon-button/\"><code>IconButton</code></a> element.",
     "onPageChange": "Callback fired when the page is changed.<br><br><strong>Signature:</strong><br><code>function(event: React.MouseEvent&lt;HTMLButtonElement&gt; | null, page: number) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>page:</em> The page selected.",
     "onRowsPerPageChange": "Callback fired when the number of rows per page is changed.<br><br><strong>Signature:</strong><br><code>function(event: React.ChangeEvent&lt;HTMLTextAreaElement | HTMLInputElement&gt;) =&gt; void</code><br><em>event:</em> The event source of the callback.",
     "page": "The zero-based index of the current page.",
     "rowsPerPage": "The number of rows per page.<br>Set -1 to display all the rows.",
     "rowsPerPageOptions": "Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. Use -1 for the value with a custom label to show all the rows.",
-    "selectId": "Id of the select element within the pagination.",
-    "slotProps": "The props used for each slot inside the TablePagination.",
-    "slots": "The components used for each slot inside the TablePagination. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
+    "SelectProps": "Props applied to the rows per page <a href=\"/material-ui/api/select/\"><code>Select</code></a> element.",
+    "showFirstButton": "If <code>true</code>, show the first-page button.",
+    "showLastButton": "If <code>true</code>, show the last-page button.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
+    "root": { "description": "Styles applied to the root element." },
     "toolbar": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the Toolbar component"
     },
     "spacer": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the spacer element"
     },
     "selectLabel": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the select label Typography element"
     },
     "selectRoot": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the Select component `root` element"
     },
     "select": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the Select component `select` class"
     },
     "selectIcon": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the Select component `icon` class"
     },
     "input": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the Select component `root` element"
     },
     "menuItem": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the MenuItem component"
     },
     "displayedRows": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the displayed rows Typography element"
     },
     "actions": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the internal `TablePaginationActions` component"
     }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "actions": "The component that renders the actions.",
-    "select": "The component that renders the select.",
-    "selectLabel": "The component that renders the select label.",
-    "menuItem": "The component that renders the menu item.",
-    "displayedRows": "The component that renders the displayed rows.",
-    "toolbar": "The component that renders the toolbar.",
-    "spacer": "The component that renders the spacer."
   }
 }
diff --git a/docs/translations/api-docs/tabs/tabs.json b/docs/translations/api-docs/tabs/tabs.json
index fe065328796929..4fae2073b12685 100644
--- a/docs/translations/api-docs/tabs/tabs.json
+++ b/docs/translations/api-docs/tabs/tabs.json
@@ -1,29 +1,87 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "action": "Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It supports two actions: <code>updateIndicator()</code> and <code>updateScrollButtons()</code>",
+    "allowScrollButtonsMobile": "If <code>true</code>, the scroll buttons aren&#39;t forced hidden on mobile. By default the scroll buttons are hidden on mobile and takes precedence over <code>scrollButtons</code>.",
+    "aria-label": "The label for the Tabs as a string.",
+    "aria-labelledby": "An id or list of ids separated by a space that label the Tabs.",
+    "centered": "If <code>true</code>, the tabs are centered. This prop is intended for large views.",
     "children": "The content of the component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "defaultValue": "The default value. Use when the component is not controlled.",
-    "direction": "The direction of the text.",
-    "onChange": "Callback invoked when new value is being set.",
+    "indicatorColor": "Determines the color of the indicator.",
+    "onChange": "Callback fired when the value changes.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent, value: any) =&gt; void</code><br><em>event:</em> The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> We default to the index of the child (number)",
     "orientation": "The component orientation (layout flow direction).",
+    "ScrollButtonComponent": "The component used to render the scroll buttons.",
+    "scrollButtons": "Determine behavior of scroll buttons when tabs are set to scroll:<br>- <code>auto</code> will only present them when not all the items are visible. - <code>true</code> will always present them. - <code>false</code> will never present them.<br>By default the scroll buttons are hidden on mobile. This behavior can be disabled with <code>allowScrollButtonsMobile</code>.",
     "selectionFollowsFocus": "If <code>true</code> the selected tab changes on focus. Otherwise it only changes on activation.",
-    "slotProps": "The props used for each slot inside the Tabs.",
-    "slots": "The components used for each slot inside the Tabs. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "value": "The value of the currently selected <code>Tab</code>. If you don&#39;t want any selected <code>Tab</code>, you can set this prop to <code>null</code>."
+    "slotProps": "The extra props for the slot components. You can override the existing props or add new ones.",
+    "slots": "The components used for each slot inside.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+    "TabIndicatorProps": "Props applied to the tab indicator element.",
+    "TabScrollButtonProps": "Props applied to the <a href=\"/material-ui/api/tab-scroll-button/\"><code>TabScrollButton</code></a> element.",
+    "textColor": "Determines the color of the <code>Tab</code>.",
+    "value": "The value of the currently selected <code>Tab</code>. If you don&#39;t want any selected <code>Tab</code>, you can set this prop to <code>false</code>.",
+    "variant": "Determines additional display behavior of the tabs:<br> - <code>scrollable</code> will invoke scrolling properties and allow for horizontally  scrolling (or swiping) of the tab bar.  -<code>fullWidth</code> will make the tabs grow to use all the available space,  which should be used for small views, like on mobile.  - <code>standard</code> will render the default state.",
+    "visibleScrollbar": "If <code>true</code>, the scrollbar is visible. It can be useful when displaying a long vertical list of tabs."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "horizontal": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>orientation='horizontal'</code>"
-    },
+    "root": { "description": "Styles applied to the root element." },
     "vertical": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>orientation='vertical'</code>"
+      "conditions": "<code>orientation=\"vertical\"</code>"
+    },
+    "flexContainer": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the flex container element"
+    },
+    "flexContainerVertical": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the flex container element",
+      "conditions": "<code>orientation=\"vertical\"</code>"
+    },
+    "centered": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the flex container element",
+      "conditions": "<code>centered={true}</code> & <code>!variant=\"scrollable\"</code>"
+    },
+    "scroller": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the tablist element"
+    },
+    "fixed": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the tablist element",
+      "conditions": "<code>!variant=\"scrollable\"</code>\b\b\b"
+    },
+    "scrollableX": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the tablist element",
+      "conditions": "<code>variant=\"scrollable\"</code> and <code>orientation=\"horizontal\"</code>"
+    },
+    "scrollableY": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the tablist element",
+      "conditions": "<code>variant=\"scrollable\"</code> and <code>orientation=\"vertical\"</code>"
+    },
+    "hideScrollbar": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the tablist element",
+      "conditions": "<code>variant=\"scrollable\"</code> and <code>visibleScrollbar={false}</code>"
+    },
+    "scrollButtons": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the ScrollButtonComponent component"
+    },
+    "scrollButtonsHideMobile": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the ScrollButtonComponent component",
+      "conditions": "<code>allowScrollButtonsMobile={true}</code>"
+    },
+    "indicator": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the TabIndicator component"
     }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
+  }
 }
diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
index 821e75089c93b3..0e15ffa00d0ca5 100644
--- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -313,6 +313,7 @@ const generateApiPage = (
   reactApi: ReactApi,
   onlyJsonFile: boolean = false,
 ) => {
+  const normalizedApiPathname = reactApi.apiPathname.replace(/\\/g, '/');
   /**
    * Gather the metadata needed for the component's API page.
    */
@@ -351,7 +352,7 @@ const generateApiPage = (
     }),
     spread: reactApi.spread,
     themeDefaultProps: reactApi.themeDefaultProps,
-    muiName: reactApi.apiPathname.startsWith('/joy-ui')
+    muiName: normalizedApiPathname.startsWith('/joy-ui')
       ? reactApi.muiName.replace('Mui', 'Joy')
       : reactApi.muiName,
     forwardsRefTo: reactApi.forwardsRefTo,
@@ -421,14 +422,16 @@ const attachTranslations = (reactApi: ReactApi) => {
       let description = generatePropDescription(prop, propName);
       description = renderMarkdownInline(description);
 
+      const normalizedApiPathname = reactApi.apiPathname.replace(/\\/g, '/');
+
       if (propName === 'classes') {
         description += ' See <a href="#css">CSS API</a> below for more details.';
       } else if (propName === 'sx') {
         description +=
           ' See the <a href="/system/getting-started/the-sx-prop/">`sx` page</a> for more details.';
-      } else if (propName === 'slots' && !reactApi.apiPathname.startsWith('/material-ui')) {
+      } else if (propName === 'slots' && !normalizedApiPathname.startsWith('/material-ui')) {
         description += ' See <a href="#slots">Slots API</a> below for more details.';
-      } else if (reactApi.apiPathname.startsWith('/joy-ui')) {
+      } else if (normalizedApiPathname.startsWith('/joy-ui')) {
         switch (propName) {
           case 'size':
             description +=
@@ -682,14 +685,20 @@ export default async function generateComponentApi(
   // eslint-disable-next-line no-console
   console.log('Built API docs for', reactApi.name);
 
+  const normalizedApiPathname = reactApi.apiPathname.replace(/\\/g, '/');
+  const noramlizedFilename = reactApi.filename.replace(/\\/g, '/');
+
   if (!skipApiGeneration) {
     // Generate pages, json and translations
     let translationPagesDirectory = 'docs/translations/api-docs';
-    if (reactApi.apiPathname.match(/[\\/]joy-ui/) && reactApi.filename.match(/[\\/]mui-joy[\\/]src/)) {
+    if (
+      normalizedApiPathname.startsWith('/joy-ui') &&
+      noramlizedFilename.includes('/mui-joy/src')
+    ) {
       translationPagesDirectory = 'docs/translations/api-docs-joy';
     } else if (
-      reactApi.apiPathname.match(/[\\/]base/) &&
-      reactApi.filename.match(/[\\/]mui-base[\\/]src/)
+      normalizedApiPathname.startsWith('/base') &&
+      noramlizedFilename.includes('/mui-base/src')
     ) {
       translationPagesDirectory = 'docs/translations/api-docs-base';
     }
@@ -697,7 +706,7 @@ export default async function generateComponentApi(
     generateApiTranslations(path.join(process.cwd(), translationPagesDirectory), reactApi);
 
     // Once we have the tabs API in all projects, we can make this default
-    const generateOnlyJsonFile = reactApi.apiPathname.startsWith('/base');
+    const generateOnlyJsonFile = normalizedApiPathname.startsWith('/base');
     generateApiPage(apiPagesDirectory, translationPagesDirectory, reactApi, generateOnlyJsonFile);
 
     // Add comment about demo & api links (including inherited component) to the component file

From 41845e681ffbb5754a1f348ab97fe34b15b59661 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Tue, 25 Apr 2023 10:01:05 +0100
Subject: [PATCH 22/30] Remove occurrences of unstyled from button doc

---
 docs/data/base/components/button/button.md    | 20 +++++++++----------
 .../api-docs-builder/buildApiUtils.test.ts    |  4 ++--
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
index 5dad2afbcbb2da..dc5ab6660147c5 100644
--- a/docs/data/base/components/button/button.md
+++ b/docs/data/base/components/button/button.md
@@ -1,13 +1,13 @@
 ---
 product: base
-title: Unstyled React Button component and hook
+title: React Button component and hook
 components: Button
 hooks: useButton
 githubLabel: 'component: button'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/
 ---
 
-# Unstyled Button
+# Button
 
 <p class="description">Buttons let users take actions and make choices with a single tap.</p>
 
@@ -17,7 +17,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/
 
 ## Introduction
 
-The Unstyled Button component replaces the native HTML `<button>` element, and offers expanded options for styling and accessibility.
+The Button component replaces the native HTML `<button>` element, and offers expanded options for styling and accessibility.
 
 {{"demo": "UnstyledButtonIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
 
@@ -37,7 +37,7 @@ export default function MyApp() {
 
 ### Basics
 
-The Unstyled Button behaves similar to the native HTML `<button>`, so it wraps around the text that will be displayed on its surface.
+The Button behaves similar to the native HTML `<button>`, so it wraps around the text that will be displayed on its surface.
 
 The following demo shows how to create and style two basic buttons.
 Notice that the second button cannot be clicked due to the `disabled` prop:
@@ -46,7 +46,7 @@ Notice that the second button cannot be clicked due to the `disabled` prop:
 
 ### Anatomy
 
-The Unstyled Button component is composed of a root `<button>` slot with no interior slots:
+The Button component is composed of a root `<button>` slot with no interior slots:
 
 ```html
 <button class="BaseButton-root">
@@ -67,20 +67,20 @@ The `slots` prop is available on all non-utility Base components.
 See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
 :::
 
-If you provide a non-interactive element such as a `<span>`, the Unstyled Button component will automatically add the necessary accessibility attributes.
+If you provide a non-interactive element such as a `<span>`, the Button component will automatically add the necessary accessibility attributes.
 
 Compare the attributes on the `<span>` in this demo with the Button from the previous demo—try inspecting them both with your browser's dev tools:
 
 {{"demo": "UnstyledButtonsSpan.js"}}
 
 :::warning
-If an Unstyled Button is customized with a non-button element (for instance, `<Button slots={{ root: "span" }} />`), it will not submit the form it's in when clicked.
+If a Button is customized with a non-button element (for instance, `<Button slots={{ root: "span" }} />`), it will not submit the form it's in when clicked.
 Similarly, `<Button slots={{ root: "span" }} type="reset">` will not reset its parent form.
 :::
 
 #### Usage with TypeScript
 
-In TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component. This way, you can safely provide the custom compoenent's props directly on the unstyled compnent:
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component. This way, you can safely provide the custom compoenent's props directly on the compnent:
 
 ```tsx
 <Button<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
@@ -130,14 +130,14 @@ For the sake of simplicity, demos and code snippets primarily feature components
 
 ### Custom elements
 
-The Unstyled Button accepts a wide range of custom elements beyond HTML elements.
+The Button accepts a wide range of custom elements beyond HTML elements.
 You can even use SVGs, as the following demo illustrates:
 
 {{"demo": "UnstyledButtonCustom.js", "defaultCodeOpen": false}}
 
 ### Focus on disabled buttons
 
-Similarly to the native HTML `<button>` element, the Unstyled Button component can't receive focus when it's disabled.
+Similarly to the native HTML `<button>` element, the Button component can't receive focus when it's disabled.
 This may reduce its accessibility, as screen readers won't be able to announce the existence and state of the button.
 
 The `focusableWhenDisabled` prop lets you change this behavior.
diff --git a/packages/api-docs-builder/buildApiUtils.test.ts b/packages/api-docs-builder/buildApiUtils.test.ts
index 1fd6c7d14a5733..f27b85cc38cf64 100644
--- a/packages/api-docs-builder/buildApiUtils.test.ts
+++ b/packages/api-docs-builder/buildApiUtils.test.ts
@@ -128,7 +128,7 @@ describe('buildApiUtils', () => {
         path.join(process.cwd(), `/packages/mui-base/src/Button/Button.tsx`),
       );
       sinon.assert.match(info, {
-        name: 'Unstyled Button',
+        name: 'Button',
         apiPathname: '/base/react-button/components-api/#button',
         muiName: 'MuiButton',
         apiPagesDirectory: sinon.match((value) =>
@@ -176,7 +176,7 @@ describe('buildApiUtils', () => {
       if (existed) {
         expect(info.getDemos()).to.deep.equal([
           {
-            demoPageTitle: 'Unstyled Button',
+            demoPageTitle: 'Button',
             demoPathname: '/base/react-button/#hook',
           },
         ]);

From 814df7ccc0ecf09b970f7b75ba9bb5d7a17b91d0 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Tue, 25 Apr 2023 10:34:30 +0100
Subject: [PATCH 23/30] update button api docs

---
 docs/pages/base/api/button.json              | 2 +-
 docs/pages/base/api/use-button.json          | 2 +-
 packages/mui-base/src/Button/Button.tsx      | 2 +-
 packages/mui-base/src/useButton/useButton.ts | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/pages/base/api/button.json b/docs/pages/base/api/button.json
index b3a580e0a62e19..767f019b519b52 100644
--- a/docs/pages/base/api/button.json
+++ b/docs/pages/base/api/button.json
@@ -40,6 +40,6 @@
   "forwardsRefTo": "HTMLButtonElement",
   "filename": "/packages/mui-base/src/Button/Button.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/base/react-button/\">Unstyled Button</a></li></ul>",
+  "demos": "<ul><li><a href=\"/base/react-button/\">Button</a></li></ul>",
   "cssComponent": false
 }
diff --git a/docs/pages/base/api/use-button.json b/docs/pages/base/api/use-button.json
index cfd717d3b3e77d..c30c89d3b09b68 100644
--- a/docs/pages/base/api/use-button.json
+++ b/docs/pages/base/api/use-button.json
@@ -65,5 +65,5 @@
   },
   "name": "useButton",
   "filename": "/packages/mui-base/src/useButton/useButton.ts",
-  "demos": "<ul><li><a href=\"/base/react-button/#hook\">Unstyled Button</a></li></ul>"
+  "demos": "<ul><li><a href=\"/base/react-button/#hook\">Button</a></li></ul>"
 }
diff --git a/packages/mui-base/src/Button/Button.tsx b/packages/mui-base/src/Button/Button.tsx
index ee7e9aaec317e1..9f952f48571ed5 100644
--- a/packages/mui-base/src/Button/Button.tsx
+++ b/packages/mui-base/src/Button/Button.tsx
@@ -28,7 +28,7 @@ const useUtilityClasses = (ownerState: ButtonOwnerState) => {
  *
  * Demos:
  *
- * - [Unstyled Button](https://mui.com/base/react-button/)
+ * - [Button](https://mui.com/base/react-button/)
  *
  * API:
  *
diff --git a/packages/mui-base/src/useButton/useButton.ts b/packages/mui-base/src/useButton/useButton.ts
index d7a1e93a13f879..70c6ceba2731e5 100644
--- a/packages/mui-base/src/useButton/useButton.ts
+++ b/packages/mui-base/src/useButton/useButton.ts
@@ -14,7 +14,7 @@ import { EventHandlers } from '../utils/types';
  *
  * Demos:
  *
- * - [Unstyled Button](https://mui.com/base/react-button/#hook)
+ * - [Button](https://mui.com/base/react-button/#hook)
  *
  * API:
  *

From 253450afe066a0d6787e210b7dfc100036922811 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 25 Apr 2023 11:36:11 +0200
Subject: [PATCH 24/30] remove old files

---
 .../api-docs/aspect-ratio/aspect-ratio.json   |  82 ------------
 .../autocomplete-listbox.json                 |  52 --------
 .../autocomplete-option.json                  |  79 ------------
 .../api-docs/card-cover/card-cover.json       |  12 --
 .../api-docs/card-overflow/card-overflow.json |  71 ----------
 .../api-docs/chip-delete/chip-delete.json     |  83 ------------
 .../api-docs/list-divider/list-divider.json   |  41 ------
 .../list-item-content/list-item-content.json  |  12 --
 .../list-item-decorator.json                  |  12 --
 .../api-docs/modal-close/modal-close.json     |  86 ------------
 .../api-docs/modal-dialog/modal-dialog.json   |  98 --------------
 .../modal-overflow/modal-overflow.json        |   8 --
 .../api-docs/option-group/option-group.json   |  28 ----
 docs/translations/api-docs/option/option.json |  89 -------------
 docs/translations/api-docs/sheet/sheet.json   |  72 -----------
 .../api-docs/tabs-list/tabs-list.json         |  23 ----
 .../api-docs/textarea/textarea.json           | 122 ------------------
 .../ApiBuilders/ComponentApiBuilder.ts        |   7 +-
 18 files changed, 2 insertions(+), 975 deletions(-)
 delete mode 100644 docs/translations/api-docs/aspect-ratio/aspect-ratio.json
 delete mode 100644 docs/translations/api-docs/autocomplete-listbox/autocomplete-listbox.json
 delete mode 100644 docs/translations/api-docs/autocomplete-option/autocomplete-option.json
 delete mode 100644 docs/translations/api-docs/card-cover/card-cover.json
 delete mode 100644 docs/translations/api-docs/card-overflow/card-overflow.json
 delete mode 100644 docs/translations/api-docs/chip-delete/chip-delete.json
 delete mode 100644 docs/translations/api-docs/list-divider/list-divider.json
 delete mode 100644 docs/translations/api-docs/list-item-content/list-item-content.json
 delete mode 100644 docs/translations/api-docs/list-item-decorator/list-item-decorator.json
 delete mode 100644 docs/translations/api-docs/modal-close/modal-close.json
 delete mode 100644 docs/translations/api-docs/modal-dialog/modal-dialog.json
 delete mode 100644 docs/translations/api-docs/modal-overflow/modal-overflow.json
 delete mode 100644 docs/translations/api-docs/option-group/option-group.json
 delete mode 100644 docs/translations/api-docs/option/option.json
 delete mode 100644 docs/translations/api-docs/sheet/sheet.json
 delete mode 100644 docs/translations/api-docs/tabs-list/tabs-list.json
 delete mode 100644 docs/translations/api-docs/textarea/textarea.json

diff --git a/docs/translations/api-docs/aspect-ratio/aspect-ratio.json b/docs/translations/api-docs/aspect-ratio/aspect-ratio.json
deleted file mode 100644
index ca1a512b1a74ff..00000000000000
--- a/docs/translations/api-docs/aspect-ratio/aspect-ratio.json
+++ /dev/null
@@ -1,82 +0,0 @@
-{
-  "componentDescription": "",
-  "propDescriptions": {
-    "children": "Used to render icon or text elements inside the AspectRatio if <code>src</code> is not set. This can be an element, or just a string.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "maxHeight": "The maximum calculated height of the element (not the CSS height).",
-    "minHeight": "The minimum calculated height of the element (not the CSS height).",
-    "objectFit": "The CSS object-fit value of the first-child.",
-    "ratio": "The aspect-ratio of the element. The current implementation uses padding instead of the CSS aspect-ratio due to browser support. <a href=\"https://caniuse.com/?search=aspect-ratio\">https://caniuse.com/?search=aspect-ratio</a>",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
-  },
-  "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "content": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the content element"
-    },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the content element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the content element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the content element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the content element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the content element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the content element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the content element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the content element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the content element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the content element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "content": "The component that renders the content."
-  }
-}
diff --git a/docs/translations/api-docs/autocomplete-listbox/autocomplete-listbox.json b/docs/translations/api-docs/autocomplete-listbox/autocomplete-listbox.json
deleted file mode 100644
index 1d2ea890edaa5e..00000000000000
--- a/docs/translations/api-docs/autocomplete-listbox/autocomplete-listbox.json
+++ /dev/null
@@ -1,52 +0,0 @@
-{
-  "componentDescription": "",
-  "propDescriptions": {
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "size": "The size of the component (affect other nested list* components). To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
-  },
-  "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "sizeSm": { "description": "Classname applied to the root element if `size=\"sm\"`." },
-    "sizeMd": { "description": "Classname applied to the root element if `size=\"md\"`." },
-    "sizeLg": { "description": "Classname applied to the root element if `size=\"lg\"`." },
-    "colorPrimary": {
-      "description": "Classname applied to the root element if `color=\"primary\"`."
-    },
-    "colorNeutral": {
-      "description": "Classname applied to the root element if `color=\"neutral\"`."
-    },
-    "colorDanger": {
-      "description": "Classname applied to the root element if `color=\"danger\"`."
-    },
-    "colorInfo": { "description": "Classname applied to the root element if `color=\"info\"`." },
-    "colorSuccess": {
-      "description": "Classname applied to the root element if `color=\"success\"`."
-    },
-    "colorWarning": {
-      "description": "Classname applied to the root element if `color=\"warning\"`."
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Classname applied to the root element if `variant=\"plain\"`."
-    },
-    "variantOutlined": {
-      "description": "Classname applied to the root element if `variant=\"outlined\"`."
-    },
-    "variantSoft": {
-      "description": "Classname applied to the root element if `variant=\"soft\"`."
-    },
-    "variantSolid": {
-      "description": "Classname applied to the root element if `variant=\"solid\"`."
-    }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
-}
diff --git a/docs/translations/api-docs/autocomplete-option/autocomplete-option.json b/docs/translations/api-docs/autocomplete-option/autocomplete-option.json
deleted file mode 100644
index ff0b5617dc3048..00000000000000
--- a/docs/translations/api-docs/autocomplete-option/autocomplete-option.json
+++ /dev/null
@@ -1,79 +0,0 @@
-{
-  "componentDescription": "",
-  "propDescriptions": {
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
-  },
-  "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "focused": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "focused"
-    },
-    "focusVisible": {
-      "description": "State class applied to {{nodeName}}.",
-      "nodeName": "the `component`'s `focusVisibleClassName` prop"
-    },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantSoft": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantOutlined": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSolid": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
-}
diff --git a/docs/translations/api-docs/card-cover/card-cover.json b/docs/translations/api-docs/card-cover/card-cover.json
deleted file mode 100644
index 315390b8b24583..00000000000000
--- a/docs/translations/api-docs/card-cover/card-cover.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "componentDescription": "",
-  "propDescriptions": {
-    "children": "Used to render icon or text elements inside the CardCover if <code>src</code> is not set. This can be an element, or just a string.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
-  },
-  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
-  "slotDescriptions": { "root": "The component that renders the root." }
-}
diff --git a/docs/translations/api-docs/card-overflow/card-overflow.json b/docs/translations/api-docs/card-overflow/card-overflow.json
deleted file mode 100644
index cf12f77e5b0327..00000000000000
--- a/docs/translations/api-docs/card-overflow/card-overflow.json
+++ /dev/null
@@ -1,71 +0,0 @@
-{
-  "componentDescription": "",
-  "propDescriptions": {
-    "children": "Used to render icon or text elements inside the CardOverflow if <code>src</code> is not set. This can be an element, or just a string.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
-  },
-  "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
-}
diff --git a/docs/translations/api-docs/chip-delete/chip-delete.json b/docs/translations/api-docs/chip-delete/chip-delete.json
deleted file mode 100644
index 3abc95a48f15b8..00000000000000
--- a/docs/translations/api-docs/chip-delete/chip-delete.json
+++ /dev/null
@@ -1,83 +0,0 @@
-{
-  "componentDescription": "",
-  "propDescriptions": {
-    "children": "If provided, it will replace the default icon.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "disabled": "If <code>true</code>, the component is disabled. If <code>undefined</code>, the value inherits from the parent chip via a React context.",
-    "onDelete": "Callback fired when the component is not disabled and either: - <code>Backspace</code>, <code>Enter</code> or <code>Delete</code> is pressed. - The component is clicked.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
-  },
-  "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "disabled": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>disabled={true}</code>"
-    },
-    "focusVisible": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "keyboard focused"
-    },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
-}
diff --git a/docs/translations/api-docs/list-divider/list-divider.json b/docs/translations/api-docs/list-divider/list-divider.json
deleted file mode 100644
index 04cebc2490afa4..00000000000000
--- a/docs/translations/api-docs/list-divider/list-divider.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-  "componentDescription": "",
-  "propDescriptions": {
-    "children": "The content of the component.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "inset": "The empty space on the side(s) of the divider in a vertical list.<br>For horizontal list (the nearest parent List has <code>row</code> prop set to <code>true</code>), only <code>inset=&quot;gutter&quot;</code> affects the list divider.",
-    "orientation": "The component orientation.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
-  },
-  "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "insetGutter": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>inset=\"gutter\"</code>"
-    },
-    "insetStartDecorator": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>inset=\"startDecorator\"</code>"
-    },
-    "insetStartContent": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>inset=\"startContent\"</code>"
-    },
-    "horizontal": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>orientation=\"horizontal\"</code>"
-    },
-    "vertical": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>orientation=\"vertical\"</code>"
-    }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
-}
diff --git a/docs/translations/api-docs/list-item-content/list-item-content.json b/docs/translations/api-docs/list-item-content/list-item-content.json
deleted file mode 100644
index 3a039cdf5b968b..00000000000000
--- a/docs/translations/api-docs/list-item-content/list-item-content.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "componentDescription": "",
-  "propDescriptions": {
-    "children": "The content of the component.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
-  },
-  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
-  "slotDescriptions": { "root": "The component that renders the root." }
-}
diff --git a/docs/translations/api-docs/list-item-decorator/list-item-decorator.json b/docs/translations/api-docs/list-item-decorator/list-item-decorator.json
deleted file mode 100644
index 3a039cdf5b968b..00000000000000
--- a/docs/translations/api-docs/list-item-decorator/list-item-decorator.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "componentDescription": "",
-  "propDescriptions": {
-    "children": "The content of the component.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
-  },
-  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
-  "slotDescriptions": { "root": "The component that renders the root." }
-}
diff --git a/docs/translations/api-docs/modal-close/modal-close.json b/docs/translations/api-docs/modal-close/modal-close.json
deleted file mode 100644
index b0a6990f0afc30..00000000000000
--- a/docs/translations/api-docs/modal-close/modal-close.json
+++ /dev/null
@@ -1,86 +0,0 @@
-{
-  "componentDescription": "",
-  "propDescriptions": {
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
-  },
-  "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
-    }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
-}
diff --git a/docs/translations/api-docs/modal-dialog/modal-dialog.json b/docs/translations/api-docs/modal-dialog/modal-dialog.json
deleted file mode 100644
index de938f84650863..00000000000000
--- a/docs/translations/api-docs/modal-dialog/modal-dialog.json
+++ /dev/null
@@ -1,98 +0,0 @@
-{
-  "componentDescription": "",
-  "propDescriptions": {
-    "children": "The content of the component.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "layout": "The layout of the dialog",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
-  },
-  "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
-    },
-    "layoutCenter": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>layout=\"center\"</code>"
-    },
-    "layoutFullscreen": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>layout=\"fullscreen\"</code>"
-    }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
-}
diff --git a/docs/translations/api-docs/modal-overflow/modal-overflow.json b/docs/translations/api-docs/modal-overflow/modal-overflow.json
deleted file mode 100644
index 131bb9e1a8c9cd..00000000000000
--- a/docs/translations/api-docs/modal-overflow/modal-overflow.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "componentDescription": "",
-  "propDescriptions": {
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details."
-  },
-  "classDescriptions": { "root": { "description": "Styles applied to the root element." } },
-  "slotDescriptions": { "root": "The component that renders the root." }
-}
diff --git a/docs/translations/api-docs/option-group/option-group.json b/docs/translations/api-docs/option-group/option-group.json
deleted file mode 100644
index a6f2a32d74ed40..00000000000000
--- a/docs/translations/api-docs/option-group/option-group.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "componentDescription": "An unstyled option group to be used within a Select.",
-  "propDescriptions": {
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "disabled": "If <code>true</code> all the options in the group will be disabled.",
-    "label": "The human-readable description of the group.",
-    "slotProps": "The props used for each slot inside the Input.",
-    "slots": "The components used for each slot inside the OptionGroup. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
-  },
-  "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "disabled": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root `li` element",
-      "conditions": "<code>disabled={true}</code>"
-    },
-    "label": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the label element"
-    },
-    "list": { "description": "Class name applied to {{nodeName}}.", "nodeName": "the list element" }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "label": "The component that renders the label.",
-    "list": "The component that renders the list."
-  }
-}
diff --git a/docs/translations/api-docs/option/option.json b/docs/translations/api-docs/option/option.json
deleted file mode 100644
index a38126f4d6801c..00000000000000
--- a/docs/translations/api-docs/option/option.json
+++ /dev/null
@@ -1,89 +0,0 @@
-{
-  "componentDescription": "",
-  "propDescriptions": {
-    "children": "The content of the component.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "disabled": "If <code>true</code>, the component is disabled.",
-    "label": "A text representation of the option&#39;s content. Used for keyboard text navigation matching.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "value": "The option value.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
-  },
-  "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"context\"</code>"
-    },
-    "disabled": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>disabled={true}</code>"
-    },
-    "selected": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "the option is selected"
-    },
-    "highlighted": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "the option is highlighted"
-    },
-    "variantPlain": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantSoft": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantOutlined": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSolid": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
-}
diff --git a/docs/translations/api-docs/sheet/sheet.json b/docs/translations/api-docs/sheet/sheet.json
deleted file mode 100644
index 1f141290078461..00000000000000
--- a/docs/translations/api-docs/sheet/sheet.json
+++ /dev/null
@@ -1,72 +0,0 @@
-{
-  "componentDescription": "",
-  "propDescriptions": {
-    "children": "The content of the component.",
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "invertedColors": "If <code>true</code>, the children with an implicit color prop invert their colors to match the component&#39;s variant and color.",
-    "slotProps": "The props used for each slot inside.",
-    "slots": "The components used for each slot inside. See <a href=\"#slots\">Slots API</a> below for more details.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
-  },
-  "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    },
-    "variantSolid": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"solid\"</code>"
-    }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
-}
diff --git a/docs/translations/api-docs/tabs-list/tabs-list.json b/docs/translations/api-docs/tabs-list/tabs-list.json
deleted file mode 100644
index 0067df3d304aa5..00000000000000
--- a/docs/translations/api-docs/tabs-list/tabs-list.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "componentDescription": "",
-  "propDescriptions": {
-    "children": "The content of the component.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "slotProps": "The props used for each slot inside the TabsList.",
-    "slots": "The components used for each slot inside the TabsList. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
-  },
-  "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "horizontal": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>orientation='horizontal'</code>"
-    },
-    "vertical": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>orientation='vertical'</code>"
-    }
-  },
-  "slotDescriptions": { "root": "The component that renders the root." }
-}
diff --git a/docs/translations/api-docs/textarea/textarea.json b/docs/translations/api-docs/textarea/textarea.json
deleted file mode 100644
index 0992dbc61999f3..00000000000000
--- a/docs/translations/api-docs/textarea/textarea.json
+++ /dev/null
@@ -1,122 +0,0 @@
-{
-  "componentDescription": "",
-  "propDescriptions": {
-    "color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out <a href=\"/joy-ui/customization/themed-components/#extend-colors\">Themed components—Extend colors</a>.",
-    "endDecorator": "Trailing adornment for this input.",
-    "error": "If <code>true</code>, the <code>input</code> will indicate an error. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
-    "maxRows": "Maximum number of rows to display.",
-    "minRows": "Minimum number of rows to display.",
-    "size": "The size of the component. To learn how to add custom sizes to the component, check out <a href=\"/joy-ui/customization/themed-components/#extend-sizes\">Themed components—Extend sizes</a>.",
-    "startDecorator": "Leading adornment for this input.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
-    "variant": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use. To learn how to add your own variants, check out <a href=\"/joy-ui/customization/themed-components/#extend-variants\">Themed components—Extend variants</a>."
-  },
-  "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
-    "textarea": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the textarea element"
-    },
-    "startDecorator": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the startDecorator element",
-      "conditions": "supplied"
-    },
-    "endDecorator": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the endDecorator element",
-      "conditions": "supplied"
-    },
-    "formControl": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "the component is a descendant of <code>FormControl</code>"
-    },
-    "disabled": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>disabled={true}</code>"
-    },
-    "error": {
-      "description": "State class applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>error={true}</code>"
-    },
-    "focused": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "the component is focused"
-    },
-    "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"primary\"</code>"
-    },
-    "colorNeutral": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"neutral\"</code>"
-    },
-    "colorDanger": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"danger\"</code>"
-    },
-    "colorInfo": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"info\"</code>"
-    },
-    "colorSuccess": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"success\"</code>"
-    },
-    "colorWarning": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>color=\"warning\"</code>"
-    },
-    "colorContext": {
-      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "color inversion is triggered"
-    },
-    "sizeSm": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"sm\"</code>"
-    },
-    "sizeMd": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"md\"</code>"
-    },
-    "sizeLg": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"lg\"</code>"
-    },
-    "variantPlain": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"plain\"</code>"
-    },
-    "variantOutlined": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code>"
-    },
-    "variantSoft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>variant=\"soft\"</code>"
-    }
-  },
-  "slotDescriptions": {
-    "root": "The component that renders the root.",
-    "textarea": "The component that renders the textarea.",
-    "startDecorator": "The component that renders the start decorator.",
-    "endDecorator": "The component that renders the end decorator."
-  }
-}
diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
index 0e15ffa00d0ca5..272769cf5e8eb5 100644
--- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -691,14 +691,11 @@ export default async function generateComponentApi(
   if (!skipApiGeneration) {
     // Generate pages, json and translations
     let translationPagesDirectory = 'docs/translations/api-docs';
-    if (
-      normalizedApiPathname.startsWith('/joy-ui') &&
-      noramlizedFilename.includes('/mui-joy/src')
-    ) {
+    if (normalizedApiPathname.startsWith('/joy-ui') && noramlizedFilename.includes('mui-joy/src')) {
       translationPagesDirectory = 'docs/translations/api-docs-joy';
     } else if (
       normalizedApiPathname.startsWith('/base') &&
-      noramlizedFilename.includes('/mui-base/src')
+      noramlizedFilename.includes('mui-base/src')
     ) {
       translationPagesDirectory = 'docs/translations/api-docs-base';
     }

From 920a682be771f7bfd61f6c74881c403f893c1ddc Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Tue, 25 Apr 2023 12:13:24 +0100
Subject: [PATCH 25/30] address comments

---
 docs/data/base/components/button/button.md                  | 2 +-
 .../api-docs-builder/ApiBuilders/ComponentApiBuilder.ts     | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
index dc5ab6660147c5..f8247cbdff004a 100644
--- a/docs/data/base/components/button/button.md
+++ b/docs/data/base/components/button/button.md
@@ -89,7 +89,7 @@ In TypeScript, you can specify the custom component type used in the `slots.root
 The same applies for props specific to custom primitive elements:
 
 ```tsx
-<Button<'svg'> viewBox="0 0 24 24" />
+<Button<'img'> slots={{ root: 'img' }} src="button.png" />
 ```
 
 ## Hook
diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
index 272769cf5e8eb5..a61f12ae12ca76 100644
--- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -686,16 +686,16 @@ export default async function generateComponentApi(
   console.log('Built API docs for', reactApi.name);
 
   const normalizedApiPathname = reactApi.apiPathname.replace(/\\/g, '/');
-  const noramlizedFilename = reactApi.filename.replace(/\\/g, '/');
+  const normalizedFilename = reactApi.filename.replace(/\\/g, '/');
 
   if (!skipApiGeneration) {
     // Generate pages, json and translations
     let translationPagesDirectory = 'docs/translations/api-docs';
-    if (normalizedApiPathname.startsWith('/joy-ui') && noramlizedFilename.includes('mui-joy/src')) {
+    if (normalizedApiPathname.startsWith('/joy-ui') && normalizedFilename.includes('mui-joy/src')) {
       translationPagesDirectory = 'docs/translations/api-docs-joy';
     } else if (
       normalizedApiPathname.startsWith('/base') &&
-      noramlizedFilename.includes('mui-base/src')
+      normalizedFilename.includes('mui-base/src')
     ) {
       translationPagesDirectory = 'docs/translations/api-docs-base';
     }

From 508a008c63e9f7905c95cc97ded031744333b970 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Tue, 25 Apr 2023 12:14:27 +0100
Subject: [PATCH 26/30] use single quote

---
 docs/data/base/components/button/button.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
index f8247cbdff004a..ae952640197d35 100644
--- a/docs/data/base/components/button/button.md
+++ b/docs/data/base/components/button/button.md
@@ -89,7 +89,7 @@ In TypeScript, you can specify the custom component type used in the `slots.root
 The same applies for props specific to custom primitive elements:
 
 ```tsx
-<Button<'img'> slots={{ root: 'img' }} src="button.png" />
+<Button<'img'> slots={{ root: 'img' }} src='button.png' />
 ```
 
 ## Hook

From 2bb9245061730e19fb782cb30c3d9bbd74620754 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Tue, 25 Apr 2023 12:32:41 +0100
Subject: [PATCH 27/30] prettier

---
 docs/data/base/components/button/button.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
index ae952640197d35..f8247cbdff004a 100644
--- a/docs/data/base/components/button/button.md
+++ b/docs/data/base/components/button/button.md
@@ -89,7 +89,7 @@ In TypeScript, you can specify the custom component type used in the `slots.root
 The same applies for props specific to custom primitive elements:
 
 ```tsx
-<Button<'img'> slots={{ root: 'img' }} src='button.png' />
+<Button<'img'> slots={{ root: 'img' }} src="button.png" />
 ```
 
 ## Hook

From fbfbd3cea7493b4a007462751d14b766fb484213 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 26 Apr 2023 09:47:31 +0100
Subject: [PATCH 28/30] remove unstyled from overriding component structure doc

---
 .../overriding-component-structure.md                     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/data/base/guides/overriding-component-structure/overriding-component-structure.md b/docs/data/base/guides/overriding-component-structure/overriding-component-structure.md
index 19c8b2f6efdc1a..5916e885da5b0a 100644
--- a/docs/data/base/guides/overriding-component-structure/overriding-component-structure.md
+++ b/docs/data/base/guides/overriding-component-structure/overriding-component-structure.md
@@ -22,7 +22,7 @@ Additionally, you can pass custom props to [interior slots](#interior-slots) usi
 The root slot represents the component's outermost element.
 For simpler components, the root slot is often filled by the native HTML element that the component is intended to replace.
 
-For example, the [Unstyled Button's](/base/react-button/) root slot is a `<button>` element.
+For example, the [Button's](/base/react-button/) root slot is a `<button>` element.
 This component _only_ has a root slot; more complex components may have additional interior slots.
 
 ## Interior slots
@@ -30,12 +30,12 @@ This component _only_ has a root slot; more complex components may have addition
 Complex components are composed of one or more interior slots in addition to the root.
 These slots are often (but not necessarily) nested within the root.
 
-For example, the [Unstyled Slider](/base/react-slider/) is composed of a root `<span>` that houses several interior slots named for the elements they represent: track, thumb, rail, and so on.
+For example, the [Slider](/base/react-slider/) is composed of a root `<span>` that houses several interior slots named for the elements they represent: track, thumb, rail, and so on.
 
 ### The slots prop
 
 Use the `slots` prop to replace the elements in a component's slots, including the root.
-The example below shows how to override the listbox slot in the [Unstyled Select](/base/react-select/) component—a `<ul>` by default—with an `<ol>`:
+The example below shows how to override the listbox slot in the [Select](/base/react-select/) component—a `<ul>` by default—with an `<ol>`:
 
 {{"demo": "OverridingInternalSlot.js"}}
 
@@ -44,7 +44,7 @@ The example below shows how to override the listbox slot in the [Unstyled Select
 The `slotProps` prop is an object that contains the props for all slots within a component.
 You can use it to define additional custom props to pass to a component's interior slots.
 
-For example, the code snippet below shows how to add a custom CSS class to the badge slot of the [Unstyled Badge](/base/react-badge/) component:
+For example, the code snippet below shows how to add a custom CSS class to the badge slot of the [Badge](/base/react-badge/) component:
 
 ```jsx
 <Badge slotProps={{ badge: { className: 'my-badge' } }} />

From 9ce855ef3cdbad6287a5fd9848d696000a4e8888 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 26 Apr 2023 09:47:40 +0100
Subject: [PATCH 29/30] add 1 more ts test

---
 packages/mui-base/src/Button/Button.spec.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/mui-base/src/Button/Button.spec.tsx b/packages/mui-base/src/Button/Button.spec.tsx
index d174f69c53b5d6..6bedc9a98f060b 100644
--- a/packages/mui-base/src/Button/Button.spec.tsx
+++ b/packages/mui-base/src/Button/Button.spec.tsx
@@ -35,6 +35,12 @@ const polymorphicComponentTest = () => {
 
       <Button slots={{ root: 'a' }} href="#" />
 
+      <Button<typeof CustomComponent>
+        slots={{ root: CustomComponent }}
+        stringProp="test"
+        numberProp={0}
+      />
+
       {/* @ts-expect-error onClick must be specified in the custom root component */}
       <Button<typeof Root> slots={{ root: Root }} onClick={() => {}} />
 

From e08991872a53be775c83cc73eb39f8f8dfa74444 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 26 Apr 2023 09:50:44 +0100
Subject: [PATCH 30/30] resolve merge conflict

---
 packages/mui-base/src/Button/Button.types.ts | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/mui-base/src/Button/Button.types.ts b/packages/mui-base/src/Button/Button.types.ts
index dec6fba3fb3430..08e66fbdfa349e 100644
--- a/packages/mui-base/src/Button/Button.types.ts
+++ b/packages/mui-base/src/Button/Button.types.ts
@@ -41,21 +41,23 @@ export interface ButtonSlots {
 }
 
 export type ButtonProps<
-  RootComponent extends React.ElementType = ButtonTypeMap['defaultComponent'],
-> = PolymorphicProps<ButtonTypeMap<{}, RootComponent>, RootComponent>;
+  RootComponentType extends React.ElementType = ButtonTypeMap['defaultComponent'],
+> = PolymorphicProps<ButtonTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export interface ButtonTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'button',
+  RootComponentType extends React.ElementType = 'button',
 > {
   props: AdditionalProps & ButtonOwnProps;
-  defaultComponent: DefaultComponent;
+  defaultComponent: RootComponentType;
 }
 
-export type ButtonOwnerState = ButtonOwnProps & {
-  active: boolean;
-  focusVisible: boolean;
-};
+export type ButtonOwnerState = Simplify<
+  ButtonOwnProps & {
+    active: boolean;
+    focusVisible: boolean;
+  }
+>;
 
 export type ButtonRootSlotProps = Simplify<
   UseButtonRootSlotProps & {