diff --git a/docs/data/joy/components/aspect-ratio/FlexAspectRatio.js b/docs/data/joy/components/aspect-ratio/FlexAspectRatio.js
new file mode 100644
index 00000000000000..77231380c14406
--- /dev/null
+++ b/docs/data/joy/components/aspect-ratio/FlexAspectRatio.js
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Button from '@mui/joy/Button';
+import Card from '@mui/joy/Card';
+import CardContent from '@mui/joy/CardContent';
+import CardActions from '@mui/joy/CardActions';
+import Typography from '@mui/joy/Typography';
+import Stack from '@mui/joy/Stack';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Switch from '@mui/joy/Switch';
+
+export default function FlexAspectRatio() {
+  const [flex, setFlex] = React.useState(false);
+  return (
+    <Stack spacing={2} alignItems="center">
+      <FormControl orientation="horizontal">
+        <FormLabel>Flex</FormLabel>
+        <Switch checked={flex} onChange={(event) => setFlex(event.target.checked)} />
+      </FormControl>
+      <Card
+        orientation="horizontal"
+        variant="outlined"
+        sx={{ boxShadow: 'none', resize: 'horizontal', overflow: 'auto' }}
+      >
+        <AspectRatio ratio="21/9" flex={flex} sx={{ flexBasis: 200 }}>
+          <Typography level="h1" component="div">
+            21 / 9
+          </Typography>
+        </AspectRatio>
+        <CardContent>
+          <Typography level="body-xs">20 APR 2023</Typography>
+          <Typography level="title-lg" component="div">
+            Widget Title
+          </Typography>
+          <Typography level="body-lg">
+            Lorem ipsum is placeholder text commonly used in the graphic.
+          </Typography>
+          <CardActions buttonFlex="none">
+            <Button variant="outlined" color="neutral" size="sm">
+              See details
+            </Button>
+            <Button variant="solid" color="neutral" size="sm">
+              Learn more
+            </Button>
+          </CardActions>
+        </CardContent>
+      </Card>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/aspect-ratio/FlexAspectRatio.tsx b/docs/data/joy/components/aspect-ratio/FlexAspectRatio.tsx
new file mode 100644
index 00000000000000..77231380c14406
--- /dev/null
+++ b/docs/data/joy/components/aspect-ratio/FlexAspectRatio.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Button from '@mui/joy/Button';
+import Card from '@mui/joy/Card';
+import CardContent from '@mui/joy/CardContent';
+import CardActions from '@mui/joy/CardActions';
+import Typography from '@mui/joy/Typography';
+import Stack from '@mui/joy/Stack';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Switch from '@mui/joy/Switch';
+
+export default function FlexAspectRatio() {
+  const [flex, setFlex] = React.useState(false);
+  return (
+    <Stack spacing={2} alignItems="center">
+      <FormControl orientation="horizontal">
+        <FormLabel>Flex</FormLabel>
+        <Switch checked={flex} onChange={(event) => setFlex(event.target.checked)} />
+      </FormControl>
+      <Card
+        orientation="horizontal"
+        variant="outlined"
+        sx={{ boxShadow: 'none', resize: 'horizontal', overflow: 'auto' }}
+      >
+        <AspectRatio ratio="21/9" flex={flex} sx={{ flexBasis: 200 }}>
+          <Typography level="h1" component="div">
+            21 / 9
+          </Typography>
+        </AspectRatio>
+        <CardContent>
+          <Typography level="body-xs">20 APR 2023</Typography>
+          <Typography level="title-lg" component="div">
+            Widget Title
+          </Typography>
+          <Typography level="body-lg">
+            Lorem ipsum is placeholder text commonly used in the graphic.
+          </Typography>
+          <CardActions buttonFlex="none">
+            <Button variant="outlined" color="neutral" size="sm">
+              See details
+            </Button>
+            <Button variant="solid" color="neutral" size="sm">
+              Learn more
+            </Button>
+          </CardActions>
+        </CardContent>
+      </Card>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/aspect-ratio/FlexRowRatio.js b/docs/data/joy/components/aspect-ratio/FlexRowRatio.js
index f49c7fedcb5fd5..7b9a3b58e00f42 100644
--- a/docs/data/joy/components/aspect-ratio/FlexRowRatio.js
+++ b/docs/data/joy/components/aspect-ratio/FlexRowRatio.js
@@ -11,7 +11,12 @@ export default function FlexRowRatio() {
   const [flexBasis, setFlexBasis] = React.useState(200);
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-      <Card variant="outlined" orientation="horizontal" sx={{ minWidth: 300 }}>
+      <Card
+        variant="outlined"
+        size="sm"
+        orientation="horizontal"
+        sx={{ gap: 2, minWidth: 300 }}
+      >
         <AspectRatio
           sx={{
             flexBasis: flexBasis ? `${flexBasis}px` : undefined,
diff --git a/docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx b/docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx
index f49c7fedcb5fd5..7b9a3b58e00f42 100644
--- a/docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx
+++ b/docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx
@@ -11,7 +11,12 @@ export default function FlexRowRatio() {
   const [flexBasis, setFlexBasis] = React.useState(200);
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-      <Card variant="outlined" orientation="horizontal" sx={{ minWidth: 300 }}>
+      <Card
+        variant="outlined"
+        size="sm"
+        orientation="horizontal"
+        sx={{ gap: 2, minWidth: 300 }}
+      >
         <AspectRatio
           sx={{
             flexBasis: flexBasis ? `${flexBasis}px` : undefined,
diff --git a/docs/data/joy/components/aspect-ratio/aspect-ratio.md b/docs/data/joy/components/aspect-ratio/aspect-ratio.md
index e6f36128fdc389..34100ef498a493 100644
--- a/docs/data/joy/components/aspect-ratio/aspect-ratio.md
+++ b/docs/data/joy/components/aspect-ratio/aspect-ratio.md
@@ -82,6 +82,10 @@ When the Aspect Ratio component is a child of a flexbox `row` container, use `fl
 
 {{"demo": "FlexRowRatio.js"}}
 
+By default, the Aspect Ratio component will retain the provided aspect ratio. If you want the Aspect Ratio component to fill the vertical space, set the `flex` prop to `true`:
+
+{{"demo": "FlexAspectRatio.js"}}
+
 ## Using with Next.js Image
 
 The Aspect Ratio component can be used with a [Next.js Image](https://nextjs.org/docs/app/building-your-application/optimizing/images) component as a child.
diff --git a/docs/data/joy/components/button/ButtonDisabled.js b/docs/data/joy/components/button/ButtonDisabled.js
index a7ca9574d455ad..d9906283713ba0 100644
--- a/docs/data/joy/components/button/ButtonDisabled.js
+++ b/docs/data/joy/components/button/ButtonDisabled.js
@@ -1,20 +1,21 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
+import Add from '@mui/icons-material/Add';
 
 export default function ButtonDisabled() {
   return (
     <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      <Button disabled variant="solid">
+      <Button disabled variant="solid" startDecorator={<Add />}>
         Solid
       </Button>
-      <Button disabled variant="soft">
+      <Button disabled color="neutral" variant="soft" startDecorator={<Add />}>
         Soft
       </Button>
-      <Button disabled variant="outlined">
+      <Button disabled color="success" variant="outlined" startDecorator={<Add />}>
         Outlined
       </Button>
-      <Button disabled variant="plain">
+      <Button disabled color="danger" variant="plain" startDecorator={<Add />}>
         Plain
       </Button>
     </Box>
diff --git a/docs/data/joy/components/button/ButtonDisabled.tsx b/docs/data/joy/components/button/ButtonDisabled.tsx
index a7ca9574d455ad..d9906283713ba0 100644
--- a/docs/data/joy/components/button/ButtonDisabled.tsx
+++ b/docs/data/joy/components/button/ButtonDisabled.tsx
@@ -1,20 +1,21 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
+import Add from '@mui/icons-material/Add';
 
 export default function ButtonDisabled() {
   return (
     <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      <Button disabled variant="solid">
+      <Button disabled variant="solid" startDecorator={<Add />}>
         Solid
       </Button>
-      <Button disabled variant="soft">
+      <Button disabled color="neutral" variant="soft" startDecorator={<Add />}>
         Soft
       </Button>
-      <Button disabled variant="outlined">
+      <Button disabled color="success" variant="outlined" startDecorator={<Add />}>
         Outlined
       </Button>
-      <Button disabled variant="plain">
+      <Button disabled color="danger" variant="plain" startDecorator={<Add />}>
         Plain
       </Button>
     </Box>
diff --git a/docs/data/joy/components/button/ButtonDisabled.tsx.preview b/docs/data/joy/components/button/ButtonDisabled.tsx.preview
index 581633010eb3c6..13ea946ce28f36 100644
--- a/docs/data/joy/components/button/ButtonDisabled.tsx.preview
+++ b/docs/data/joy/components/button/ButtonDisabled.tsx.preview
@@ -1,12 +1,12 @@
-<Button disabled variant="solid">
+<Button disabled variant="solid" startDecorator={<Add />}>
   Solid
 </Button>
-<Button disabled variant="soft">
+<Button disabled color="neutral" variant="soft" startDecorator={<Add />}>
   Soft
 </Button>
-<Button disabled variant="outlined">
+<Button disabled color="success" variant="outlined" startDecorator={<Add />}>
   Outlined
 </Button>
-<Button disabled variant="plain">
+<Button disabled color="danger" variant="plain" startDecorator={<Add />}>
   Plain
 </Button>
\ No newline at end of file
diff --git a/docs/data/joy/components/button/IconButtons.js b/docs/data/joy/components/button/IconButtons.js
index 289bba347eb90d..c9c2c292866683 100644
--- a/docs/data/joy/components/button/IconButtons.js
+++ b/docs/data/joy/components/button/IconButtons.js
@@ -1,23 +1,37 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
 import IconButton from '@mui/joy/IconButton';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Stack from '@mui/joy/Stack';
+import Switch from '@mui/joy/Switch';
 import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
 
 export default function IconButtons() {
+  const [disabled, setDisabled] = React.useState(false);
   return (
-    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
-      <IconButton variant="solid">
-        <FavoriteBorder />
-      </IconButton>
-      <IconButton variant="soft">
-        <FavoriteBorder />
-      </IconButton>
-      <IconButton variant="outlined">
-        <FavoriteBorder />
-      </IconButton>
-      <IconButton variant="plain">
-        <FavoriteBorder />
-      </IconButton>
-    </Box>
+    <Stack spacing={3} alignItems="center">
+      <FormControl orientation="horizontal">
+        <FormLabel>Disabled</FormLabel>
+        <Switch
+          checked={disabled}
+          onChange={(event) => setDisabled(event.target.checked)}
+        />
+      </FormControl>
+      <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
+        <IconButton disabled={disabled} variant="solid">
+          <FavoriteBorder />
+        </IconButton>
+        <IconButton disabled={disabled} variant="soft">
+          <FavoriteBorder />
+        </IconButton>
+        <IconButton disabled={disabled} variant="outlined">
+          <FavoriteBorder />
+        </IconButton>
+        <IconButton disabled={disabled} variant="plain">
+          <FavoriteBorder />
+        </IconButton>
+      </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/joy/components/button/IconButtons.tsx b/docs/data/joy/components/button/IconButtons.tsx
index 289bba347eb90d..c9c2c292866683 100644
--- a/docs/data/joy/components/button/IconButtons.tsx
+++ b/docs/data/joy/components/button/IconButtons.tsx
@@ -1,23 +1,37 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
 import IconButton from '@mui/joy/IconButton';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Stack from '@mui/joy/Stack';
+import Switch from '@mui/joy/Switch';
 import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
 
 export default function IconButtons() {
+  const [disabled, setDisabled] = React.useState(false);
   return (
-    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
-      <IconButton variant="solid">
-        <FavoriteBorder />
-      </IconButton>
-      <IconButton variant="soft">
-        <FavoriteBorder />
-      </IconButton>
-      <IconButton variant="outlined">
-        <FavoriteBorder />
-      </IconButton>
-      <IconButton variant="plain">
-        <FavoriteBorder />
-      </IconButton>
-    </Box>
+    <Stack spacing={3} alignItems="center">
+      <FormControl orientation="horizontal">
+        <FormLabel>Disabled</FormLabel>
+        <Switch
+          checked={disabled}
+          onChange={(event) => setDisabled(event.target.checked)}
+        />
+      </FormControl>
+      <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
+        <IconButton disabled={disabled} variant="solid">
+          <FavoriteBorder />
+        </IconButton>
+        <IconButton disabled={disabled} variant="soft">
+          <FavoriteBorder />
+        </IconButton>
+        <IconButton disabled={disabled} variant="outlined">
+          <FavoriteBorder />
+        </IconButton>
+        <IconButton disabled={disabled} variant="plain">
+          <FavoriteBorder />
+        </IconButton>
+      </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/joy/components/button/IconButtons.tsx.preview b/docs/data/joy/components/button/IconButtons.tsx.preview
deleted file mode 100644
index c647fee803de2c..00000000000000
--- a/docs/data/joy/components/button/IconButtons.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-<IconButton variant="solid">
-  <FavoriteBorder />
-</IconButton>
-<IconButton variant="soft">
-  <FavoriteBorder />
-</IconButton>
-<IconButton variant="outlined">
-  <FavoriteBorder />
-</IconButton>
-<IconButton variant="plain">
-  <FavoriteBorder />
-</IconButton>
\ No newline at end of file
diff --git a/docs/data/joy/components/card/CardUsage.js b/docs/data/joy/components/card/CardUsage.js
index dc8bd35863185e..ba42e3bf0d369f 100644
--- a/docs/data/joy/components/card/CardUsage.js
+++ b/docs/data/joy/components/card/CardUsage.js
@@ -13,7 +13,7 @@ export default function CardUsage() {
       data={[
         {
           propName: 'variant',
-          knob: 'select',
+          knob: 'radio',
           defaultValue: 'plain',
           options: ['plain', 'outlined', 'soft', 'solid'],
         },
@@ -42,9 +42,10 @@ export default function CardUsage() {
           sx={{
             m: 1,
             mb: 4,
+            maxWidth: 350,
           }}
         >
-          <AspectRatio ratio="16/9" sx={{ width: 160 }}>
+          <AspectRatio ratio="16/9">
             <img
               src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=286"
               srcSet="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=286&dpr=2 2x"
@@ -53,11 +54,21 @@ export default function CardUsage() {
             />
           </AspectRatio>
           <CardContent>
-            <Typography fontWeight="lg" textColor="inherit">
-              Yosemite
+            <Typography level="body-xs">NATIONAL PARK</Typography>
+            <Typography
+              level="title-lg"
+              component="div"
+              sx={{ textWrap: 'balance' }}
+            >
+              Yosemite - Your Next Adventure
+            </Typography>
+            <Typography>
+              Yosemite National Park is in California’s Sierra Nevada mountains.
             </Typography>
-            <Typography level="body-sm">April 24 to May 02, 2021</Typography>
             <CardActions>
+              <Button variant="outlined" size="sm">
+                Add to list
+              </Button>
               <Button size="sm">Explore</Button>
             </CardActions>
           </CardContent>
diff --git a/docs/data/joy/components/card/CardVariables.js b/docs/data/joy/components/card/CardVariables.js
index 0092a7a16f8c5f..b9ec0bce435847 100644
--- a/docs/data/joy/components/card/CardVariables.js
+++ b/docs/data/joy/components/card/CardVariables.js
@@ -143,7 +143,7 @@ export default function CardVariables() {
               backdropFilter: 'blur(4px)',
             }}
           />
-          <CardContent sx={{ textAlign: 'center' }}>
+          <CardContent>
             <CircularProgress
               determinate
               value={70}
@@ -156,6 +156,8 @@ export default function CardVariables() {
             >
               <Typography>70%</Typography>
             </CircularProgress>
+          </CardContent>
+          <CardContent sx={{ textAlign: 'center', justifyContent: 'center' }}>
             <Typography fontWeight="lg" textColor="#fff">
               Card title
             </Typography>
diff --git a/docs/data/joy/components/card/DribbbleShot.js b/docs/data/joy/components/card/DribbbleShot.js
index 183c013ecb5c2e..e0e19cbbec429a 100644
--- a/docs/data/joy/components/card/DribbbleShot.js
+++ b/docs/data/joy/components/card/DribbbleShot.js
@@ -72,10 +72,20 @@ export default function DribbbleShot() {
                   Yosemite
                 </Link>
               </Typography>
-              <IconButton size="sm" color="neutral" sx={{ ml: 'auto' }}>
+              <IconButton
+                size="sm"
+                variant="solid"
+                color="neutral"
+                sx={{ ml: 'auto', bgcolor: 'rgba(0 0 0 / 0.2)' }}
+              >
                 <CreateNewFolder />
               </IconButton>
-              <IconButton size="sm" color="neutral">
+              <IconButton
+                size="sm"
+                variant="solid"
+                color="neutral"
+                sx={{ bgcolor: 'rgba(0 0 0 / 0.2)' }}
+              >
                 <Favorite />
               </IconButton>
             </Box>
diff --git a/docs/data/joy/components/card/DribbbleShot.tsx b/docs/data/joy/components/card/DribbbleShot.tsx
index 183c013ecb5c2e..e0e19cbbec429a 100644
--- a/docs/data/joy/components/card/DribbbleShot.tsx
+++ b/docs/data/joy/components/card/DribbbleShot.tsx
@@ -72,10 +72,20 @@ export default function DribbbleShot() {
                   Yosemite
                 </Link>
               </Typography>
-              <IconButton size="sm" color="neutral" sx={{ ml: 'auto' }}>
+              <IconButton
+                size="sm"
+                variant="solid"
+                color="neutral"
+                sx={{ ml: 'auto', bgcolor: 'rgba(0 0 0 / 0.2)' }}
+              >
                 <CreateNewFolder />
               </IconButton>
-              <IconButton size="sm" color="neutral">
+              <IconButton
+                size="sm"
+                variant="solid"
+                color="neutral"
+                sx={{ bgcolor: 'rgba(0 0 0 / 0.2)' }}
+              >
                 <Favorite />
               </IconButton>
             </Box>
diff --git a/docs/data/joy/components/card/GradientCover.js b/docs/data/joy/components/card/GradientCover.js
index c053fe11476ebb..d901e363ad64d5 100644
--- a/docs/data/joy/components/card/GradientCover.js
+++ b/docs/data/joy/components/card/GradientCover.js
@@ -23,7 +23,7 @@ export default function GradientCover() {
         }}
       />
       <CardContent sx={{ justifyContent: 'flex-end' }}>
-        <Typography level="title-lg" textColor="#fff" mb={1}>
+        <Typography level="title-lg" textColor="#fff">
           Yosemite National Park
         </Typography>
         <Typography
diff --git a/docs/data/joy/components/card/GradientCover.tsx b/docs/data/joy/components/card/GradientCover.tsx
index c053fe11476ebb..d901e363ad64d5 100644
--- a/docs/data/joy/components/card/GradientCover.tsx
+++ b/docs/data/joy/components/card/GradientCover.tsx
@@ -23,7 +23,7 @@ export default function GradientCover() {
         }}
       />
       <CardContent sx={{ justifyContent: 'flex-end' }}>
-        <Typography level="title-lg" textColor="#fff" mb={1}>
+        <Typography level="title-lg" textColor="#fff">
           Yosemite National Park
         </Typography>
         <Typography
diff --git a/docs/data/joy/components/card/InstagramPost.js b/docs/data/joy/components/card/InstagramPost.js
index 67897411e48e69..6ae581bd1edeab 100644
--- a/docs/data/joy/components/card/InstagramPost.js
+++ b/docs/data/joy/components/card/InstagramPost.js
@@ -130,7 +130,7 @@ export default function InstagramPost() {
           2 DAYS AGO
         </Link>
       </CardContent>
-      <CardOverflow sx={{ pb: 'var(--Card-padding)', display: 'flex' }}>
+      <CardContent orientation="horizontal" sx={{ gap: 1 }}>
         <IconButton size="sm" variant="plain" color="neutral" sx={{ ml: -1 }}>
           <Face />
         </IconButton>
@@ -138,12 +138,12 @@ export default function InstagramPost() {
           variant="plain"
           size="sm"
           placeholder="Add a comment…"
-          sx={{ flexGrow: 1, mr: 1, '--Input-focusedThickness': '0px' }}
+          sx={{ flex: 1, px: 0, '--Input-focusedThickness': '0px' }}
         />
         <Link disabled underline="none" role="button">
           Post
         </Link>
-      </CardOverflow>
+      </CardContent>
     </Card>
   );
 }
diff --git a/docs/data/joy/components/card/InstagramPost.tsx b/docs/data/joy/components/card/InstagramPost.tsx
index 67897411e48e69..6ae581bd1edeab 100644
--- a/docs/data/joy/components/card/InstagramPost.tsx
+++ b/docs/data/joy/components/card/InstagramPost.tsx
@@ -130,7 +130,7 @@ export default function InstagramPost() {
           2 DAYS AGO
         </Link>
       </CardContent>
-      <CardOverflow sx={{ pb: 'var(--Card-padding)', display: 'flex' }}>
+      <CardContent orientation="horizontal" sx={{ gap: 1 }}>
         <IconButton size="sm" variant="plain" color="neutral" sx={{ ml: -1 }}>
           <Face />
         </IconButton>
@@ -138,12 +138,12 @@ export default function InstagramPost() {
           variant="plain"
           size="sm"
           placeholder="Add a comment…"
-          sx={{ flexGrow: 1, mr: 1, '--Input-focusedThickness': '0px' }}
+          sx={{ flex: 1, px: 0, '--Input-focusedThickness': '0px' }}
         />
         <Link disabled underline="none" role="button">
           Post
         </Link>
-      </CardOverflow>
+      </CardContent>
     </Card>
   );
 }
diff --git a/docs/data/joy/components/card/LicenseCard.js b/docs/data/joy/components/card/LicenseCard.js
index 768fc3e65476d1..8a04284841e7c0 100644
--- a/docs/data/joy/components/card/LicenseCard.js
+++ b/docs/data/joy/components/card/LicenseCard.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import Card from '@mui/joy/Card';
+import CardContent from '@mui/joy/CardContent';
 import CardActions from '@mui/joy/CardActions';
 import Chip from '@mui/joy/Chip';
 import Typography from '@mui/joy/Typography';
@@ -37,13 +38,13 @@ export default function LicenseCard() {
           </Typography>
         </Typography>
       </div>
-      <div>
+      <CardContent>
         <Typography level="title-lg">Individual License</Typography>
         <Typography level="body-md">
           This license allows you to use the Symbol System Design with unlimited
           amount of personal and commercial projects.
         </Typography>
-      </div>
+      </CardContent>
       <CardActions>
         <Button variant="solid">Purchase Now</Button>
       </CardActions>
diff --git a/docs/data/joy/components/card/LicenseCard.tsx b/docs/data/joy/components/card/LicenseCard.tsx
index 768fc3e65476d1..8a04284841e7c0 100644
--- a/docs/data/joy/components/card/LicenseCard.tsx
+++ b/docs/data/joy/components/card/LicenseCard.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import Card from '@mui/joy/Card';
+import CardContent from '@mui/joy/CardContent';
 import CardActions from '@mui/joy/CardActions';
 import Chip from '@mui/joy/Chip';
 import Typography from '@mui/joy/Typography';
@@ -37,13 +38,13 @@ export default function LicenseCard() {
           </Typography>
         </Typography>
       </div>
-      <div>
+      <CardContent>
         <Typography level="title-lg">Individual License</Typography>
         <Typography level="body-md">
           This license allows you to use the Symbol System Design with unlimited
           amount of personal and commercial projects.
         </Typography>
-      </div>
+      </CardContent>
       <CardActions>
         <Button variant="solid">Purchase Now</Button>
       </CardActions>
diff --git a/docs/data/joy/components/card/MultipleInteractionCard.js b/docs/data/joy/components/card/MultipleInteractionCard.js
index 768d7a305b8706..93d4107f7548bc 100644
--- a/docs/data/joy/components/card/MultipleInteractionCard.js
+++ b/docs/data/joy/components/card/MultipleInteractionCard.js
@@ -44,26 +44,16 @@ export default function MultipleInteractionCard() {
             Yosemite National Park
           </Link>
         </Typography>
-        <Typography level="body-sm" sx={{ mt: 0.5 }}>
+        <Typography level="body-sm">
           <Link href="#multiple-actions">California</Link>
         </Typography>
       </CardContent>
-      <CardOverflow variant="soft" sx={{ bgcolor: 'background.level1' }}>
+      <CardOverflow variant="soft">
         <Divider inset="context" />
         <CardContent orientation="horizontal">
-          <Typography
-            level="body-xs"
-            sx={{ fontWeight: 'md', color: 'text.secondary' }}
-          >
-            6.3k views
-          </Typography>
+          <Typography level="body-xs">6.3k views</Typography>
           <Divider orientation="vertical" />
-          <Typography
-            level="body-xs"
-            sx={{ fontWeight: 'md', color: 'text.secondary' }}
-          >
-            1 hour ago
-          </Typography>
+          <Typography level="body-xs">1 hour ago</Typography>
         </CardContent>
       </CardOverflow>
     </Card>
diff --git a/docs/data/joy/components/card/MultipleInteractionCard.tsx b/docs/data/joy/components/card/MultipleInteractionCard.tsx
index 768d7a305b8706..93d4107f7548bc 100644
--- a/docs/data/joy/components/card/MultipleInteractionCard.tsx
+++ b/docs/data/joy/components/card/MultipleInteractionCard.tsx
@@ -44,26 +44,16 @@ export default function MultipleInteractionCard() {
             Yosemite National Park
           </Link>
         </Typography>
-        <Typography level="body-sm" sx={{ mt: 0.5 }}>
+        <Typography level="body-sm">
           <Link href="#multiple-actions">California</Link>
         </Typography>
       </CardContent>
-      <CardOverflow variant="soft" sx={{ bgcolor: 'background.level1' }}>
+      <CardOverflow variant="soft">
         <Divider inset="context" />
         <CardContent orientation="horizontal">
-          <Typography
-            level="body-xs"
-            sx={{ fontWeight: 'md', color: 'text.secondary' }}
-          >
-            6.3k views
-          </Typography>
+          <Typography level="body-xs">6.3k views</Typography>
           <Divider orientation="vertical" />
-          <Typography
-            level="body-xs"
-            sx={{ fontWeight: 'md', color: 'text.secondary' }}
-          >
-            1 hour ago
-          </Typography>
+          <Typography level="body-xs">1 hour ago</Typography>
         </CardContent>
       </CardOverflow>
     </Card>
diff --git a/docs/data/joy/components/card/RowCard.js b/docs/data/joy/components/card/RowCard.js
index 2c19ee4c1ae8c5..d4440673a4db8d 100644
--- a/docs/data/joy/components/card/RowCard.js
+++ b/docs/data/joy/components/card/RowCard.js
@@ -19,7 +19,7 @@ export default function RowCard() {
         </AspectRatio>
       </CardOverflow>
       <CardContent>
-        <Typography fontWeight="md" textColor="success.plainColor" mb={0.5}>
+        <Typography fontWeight="md" textColor="success.plainColor">
           Yosemite Park
         </Typography>
         <Typography level="body-sm">California, USA</Typography>
diff --git a/docs/data/joy/components/card/RowCard.tsx b/docs/data/joy/components/card/RowCard.tsx
index 2c19ee4c1ae8c5..d4440673a4db8d 100644
--- a/docs/data/joy/components/card/RowCard.tsx
+++ b/docs/data/joy/components/card/RowCard.tsx
@@ -19,7 +19,7 @@ export default function RowCard() {
         </AspectRatio>
       </CardOverflow>
       <CardContent>
-        <Typography fontWeight="md" textColor="success.plainColor" mb={0.5}>
+        <Typography fontWeight="md" textColor="success.plainColor">
           Yosemite Park
         </Typography>
         <Typography level="body-sm">California, USA</Typography>
diff --git a/docs/data/joy/components/card/UserCard.js b/docs/data/joy/components/card/UserCard.js
index 27d4bf82ac6686..bf1818fa71e9b6 100644
--- a/docs/data/joy/components/card/UserCard.js
+++ b/docs/data/joy/components/card/UserCard.js
@@ -62,7 +62,7 @@ export default function UserCard() {
           resize: 'horizontal',
         }}
       >
-        <AspectRatio ratio="1" maxHeight={182} sx={{ minWidth: 182, flex: 1 }}>
+        <AspectRatio flex ratio="1" maxHeight={182} sx={{ minWidth: 182 }}>
           <img
             src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=286"
             srcSet="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=286&dpr=2 2x"
diff --git a/docs/data/joy/components/card/UserCard.tsx b/docs/data/joy/components/card/UserCard.tsx
index 27d4bf82ac6686..bf1818fa71e9b6 100644
--- a/docs/data/joy/components/card/UserCard.tsx
+++ b/docs/data/joy/components/card/UserCard.tsx
@@ -62,7 +62,7 @@ export default function UserCard() {
           resize: 'horizontal',
         }}
       >
-        <AspectRatio ratio="1" maxHeight={182} sx={{ minWidth: 182, flex: 1 }}>
+        <AspectRatio flex ratio="1" maxHeight={182} sx={{ minWidth: 182 }}>
           <img
             src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=286"
             srcSet="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=286&dpr=2 2x"
diff --git a/docs/data/joy/components/skeleton/AnimationSkeleton.js b/docs/data/joy/components/skeleton/AnimationSkeleton.js
index 4f9151906408b7..6c7e980c832804 100644
--- a/docs/data/joy/components/skeleton/AnimationSkeleton.js
+++ b/docs/data/joy/components/skeleton/AnimationSkeleton.js
@@ -31,7 +31,7 @@ export default function AnimationSkeleton() {
             />
           </Skeleton>
         </AspectRatio>
-        <Typography>
+        <Typography sx={{ overflow: 'hidden' }}>
           <Skeleton animation="wave">
             Lorem ipsum is placeholder text commonly used in the graphic, print, and
             publishing industries.
diff --git a/docs/data/joy/components/skeleton/AnimationSkeleton.tsx b/docs/data/joy/components/skeleton/AnimationSkeleton.tsx
index 4f9151906408b7..6c7e980c832804 100644
--- a/docs/data/joy/components/skeleton/AnimationSkeleton.tsx
+++ b/docs/data/joy/components/skeleton/AnimationSkeleton.tsx
@@ -31,7 +31,7 @@ export default function AnimationSkeleton() {
             />
           </Skeleton>
         </AspectRatio>
-        <Typography>
+        <Typography sx={{ overflow: 'hidden' }}>
           <Skeleton animation="wave">
             Lorem ipsum is placeholder text commonly used in the graphic, print, and
             publishing industries.
diff --git a/docs/data/joy/components/typography/DecoratorExamples.js b/docs/data/joy/components/typography/DecoratorExamples.js
index cb5523cd99aee8..7761b27048c3a1 100644
--- a/docs/data/joy/components/typography/DecoratorExamples.js
+++ b/docs/data/joy/components/typography/DecoratorExamples.js
@@ -56,28 +56,24 @@ export default function DecoratorExamples() {
         Simple alert using only Typography.
       </Typography>
 
-      <Typography
-        color="success"
-        startDecorator={
-          <SvgIcon fontSize="md" color="inherit">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={1.5}
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18"
-              />
-            </svg>
-          </SvgIcon>
-        }
-      >
-        +8.2%{' '}
-        <Typography level="body-xs" sx={{ alignSelf: 'last baseline', ml: 1 }}>
+      <Typography color="success">
+        <SvgIcon fontSize="md" sx={{ m: '-2px', mr: '2px' }}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18"
+            />
+          </svg>
+        </SvgIcon>
+        +8.2%
+        <Typography level="body-xs" sx={{ ml: 1 }}>
           Since last month
         </Typography>
       </Typography>
diff --git a/docs/data/joy/components/typography/DecoratorExamples.tsx b/docs/data/joy/components/typography/DecoratorExamples.tsx
index cb5523cd99aee8..7761b27048c3a1 100644
--- a/docs/data/joy/components/typography/DecoratorExamples.tsx
+++ b/docs/data/joy/components/typography/DecoratorExamples.tsx
@@ -56,28 +56,24 @@ export default function DecoratorExamples() {
         Simple alert using only Typography.
       </Typography>
 
-      <Typography
-        color="success"
-        startDecorator={
-          <SvgIcon fontSize="md" color="inherit">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={1.5}
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18"
-              />
-            </svg>
-          </SvgIcon>
-        }
-      >
-        +8.2%{' '}
-        <Typography level="body-xs" sx={{ alignSelf: 'last baseline', ml: 1 }}>
+      <Typography color="success">
+        <SvgIcon fontSize="md" sx={{ m: '-2px', mr: '2px' }}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18"
+            />
+          </svg>
+        </SvgIcon>
+        +8.2%
+        <Typography level="body-xs" sx={{ ml: 1 }}>
           Since last month
         </Typography>
       </Typography>
diff --git a/docs/data/joy/components/typography/TypographyUsage.js b/docs/data/joy/components/typography/TypographyUsage.js
index d254c02349f780..c3ef3f423b3e87 100644
--- a/docs/data/joy/components/typography/TypographyUsage.js
+++ b/docs/data/joy/components/typography/TypographyUsage.js
@@ -41,7 +41,8 @@ export default function TypographyUsage() {
         {
           propName: 'children',
           knob: 'input',
-          defaultValue: 'Typography',
+          defaultValue:
+            'Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.',
         },
 
         {
@@ -52,7 +53,19 @@ export default function TypographyUsage() {
       ]}
       renderDemo={(props) => (
         <Box sx={{ maxWidth: '400px' }}>
-          <Typography {...props}>{props.children}</Typography>
+          <Typography
+            {...props}
+            sx={
+              !props.noWrap && {
+                overflow: 'hidden',
+                display: '-webkit-box',
+                '-webkit-line-clamp': '3',
+                '-webkit-box-orient': 'vertical',
+              }
+            }
+          >
+            {props.children}
+          </Typography>
         </Box>
       )}
     />
diff --git a/docs/pages/joy-ui/api/aspect-ratio.json b/docs/pages/joy-ui/api/aspect-ratio.json
index a862ebb15f37bf..d7156fcb05f1d0 100644
--- a/docs/pages/joy-ui/api/aspect-ratio.json
+++ b/docs/pages/joy-ui/api/aspect-ratio.json
@@ -10,6 +10,7 @@
       "additionalInfo": { "joy-color": true }
     },
     "component": { "type": { "name": "elementType" } },
+    "flex": { "type": { "name": "bool" }, "default": "false" },
     "maxHeight": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
     "minHeight": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
     "objectFit": {
diff --git a/docs/pages/joy-ui/api/tab.json b/docs/pages/joy-ui/api/tab.json
index 3e65aa62b764d2..43cf0eca137669 100644
--- a/docs/pages/joy-ui/api/tab.json
+++ b/docs/pages/joy-ui/api/tab.json
@@ -17,7 +17,7 @@
     "component": { "type": { "name": "elementType" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "disableIndicator": { "type": { "name": "bool" }, "default": "false" },
-    "indicatorInset": { "type": { "name": "bool" } },
+    "indicatorInset": { "type": { "name": "bool" }, "default": "false" },
     "indicatorPlacement": {
       "type": {
         "name": "enum",
diff --git a/docs/translations/api-docs-joy/aspect-ratio/aspect-ratio.json b/docs/translations/api-docs-joy/aspect-ratio/aspect-ratio.json
index 72d1490f7454be..7bbb6b7fe8f4b6 100644
--- a/docs/translations/api-docs-joy/aspect-ratio/aspect-ratio.json
+++ b/docs/translations/api-docs-joy/aspect-ratio/aspect-ratio.json
@@ -10,6 +10,9 @@
     "component": {
       "description": "The component used for the root node. Either a string to use a HTML element or a component."
     },
+    "flex": {
+      "description": "By default, the AspectRatio will maintain the aspect ratio of its content. Set this prop to <code>true</code> when the container is a flex row and you want the AspectRatio to fill the height of its container."
+    },
     "maxHeight": {
       "description": "The maximum calculated height of the element (not the CSS height)."
     },
diff --git a/examples/joy-ui-cra-ts/public/index.html b/examples/joy-ui-cra-ts/public/index.html
index a14995814b20f7..84a86e0fe30bf6 100644
--- a/examples/joy-ui-cra-ts/public/index.html
+++ b/examples/joy-ui-cra-ts/public/index.html
@@ -10,7 +10,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
     />
   </head>
   <body>
diff --git a/examples/joy-ui-nextjs/src/components/ThemeRegistry/theme.js b/examples/joy-ui-nextjs/src/components/ThemeRegistry/theme.js
index 8dd36fef01d811..18f316a884095e 100644
--- a/examples/joy-ui-nextjs/src/components/ThemeRegistry/theme.js
+++ b/examples/joy-ui-nextjs/src/components/ThemeRegistry/theme.js
@@ -1,15 +1,12 @@
-import { Public_Sans } from 'next/font/google';
+import { Inter } from 'next/font/google';
 import { extendTheme } from '@mui/joy/styles';
 
-const publicSans = Public_Sans({
+Inter({
   subsets: ['latin'],
   display: 'swap',
 });
 
 const theme = extendTheme({
-  fontFamily: {
-    body: publicSans.style.fontFamily,
-  },
   components: {
     JoyButton: {
       styleOverrides: {
diff --git a/examples/joy-ui-vite-ts/index.html b/examples/joy-ui-vite-ts/index.html
index 4c897a34c14538..0396aa17470c55 100644
--- a/examples/joy-ui-vite-ts/index.html
+++ b/examples/joy-ui-vite-ts/index.html
@@ -10,7 +10,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
     />
   </head>
   <body>
diff --git a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
index c5aadf95b810f8..7d0323b1529abc 100644
--- a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
+++ b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
@@ -45,6 +45,8 @@ const AspectRatioRoot = styled('div', {
         ? 'currentColor'
         : theme.vars.palette.text.icon,
     borderRadius: 'var(--AspectRatio-radius)',
+    display: ownerState.flex ? 'flex' : 'block',
+    flex: ownerState.flex ? 1 : 'initial',
     flexDirection: 'column',
     margin: 'var(--AspectRatio-margin)',
   };
@@ -112,6 +114,7 @@ const AspectRatio = React.forwardRef(function AspectRatio(inProps, ref) {
     color: colorProp = 'neutral',
     variant = 'soft',
     component,
+    flex = false,
     slots = {},
     slotProps = {},
     ...other
@@ -121,6 +124,7 @@ const AspectRatio = React.forwardRef(function AspectRatio(inProps, ref) {
 
   const ownerState = {
     ...props,
+    flex,
     minHeight,
     maxHeight,
     objectFit,
@@ -180,6 +184,12 @@ AspectRatio.propTypes /* remove-proptypes */ = {
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
+  /**
+   * By default, the AspectRatio will maintain the aspect ratio of its content.
+   * Set this prop to `true` when the container is a flex row and you want the AspectRatio to fill the height of its container.
+   * @default false
+   */
+  flex: PropTypes.bool,
   /**
    * The maximum calculated height of the element (not the CSS height).
    */
diff --git a/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts b/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts
index 90be05d28e0f2d..121e6de62c4299 100644
--- a/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts
+++ b/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts
@@ -42,6 +42,12 @@ export interface AspectRatioTypeMap<P = {}, D extends React.ElementType = 'div'>
        * This can be an element, or just a string.
        */
       children?: React.ReactNode;
+      /**
+       * By default, the AspectRatio will maintain the aspect ratio of its content.
+       * Set this prop to `true` when the container is a flex row and you want the AspectRatio to fill the height of its container.
+       * @default false
+       */
+      flex?: boolean;
       /**
        * The minimum calculated height of the element (not the CSS height).
        */
diff --git a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx
index e228d46a9bf6ad..597feaa781c1db 100644
--- a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx
@@ -35,14 +35,17 @@ const BreadcrumbsRoot = styled('nav', {
 })<{ ownerState: BreadcrumbsOwnerState }>(({ theme, ownerState }) => ({
   ...(ownerState.size === 'sm' && {
     '--Breadcrumbs-gap': '0.25rem',
+    '--Icon-fontSize': theme.vars.fontSize.lg,
     padding: '0.5rem',
   }),
   ...(ownerState.size === 'md' && {
     '--Breadcrumbs-gap': '0.375rem',
+    '--Icon-fontSize': theme.vars.fontSize.xl,
     padding: '0.75rem',
   }),
   ...(ownerState.size === 'lg' && {
     '--Breadcrumbs-gap': '0.5rem',
+    '--Icon-fontSize': theme.vars.fontSize.xl2,
     padding: '1rem',
   }),
   ...theme.typography[`body-${ownerState.size!}`],
diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx
index ec05cc6cacbb93..c4caf13ebad36a 100644
--- a/packages/mui-joy/src/Card/Card.tsx
+++ b/packages/mui-joy/src/Card/Card.tsx
@@ -66,8 +66,8 @@ const CardRoot = styled('div', {
       '--Divider-inset': 'calc(-1 * var(--Card-padding))',
       ...(ownerState.size === 'sm' && {
         '--Card-radius': theme.vars.radius.sm,
-        '--Card-padding': '0.5rem',
-        gap: '0.375rem 0.5rem',
+        '--Card-padding': '0.625rem',
+        gap: '0.5rem',
       }),
       ...(ownerState.size === 'md' && {
         '--Card-radius': theme.vars.radius.md,
diff --git a/packages/mui-joy/src/CardContent/CardContent.tsx b/packages/mui-joy/src/CardContent/CardContent.tsx
index 251ce36b32c143..d047e8b8200ed7 100644
--- a/packages/mui-joy/src/CardContent/CardContent.tsx
+++ b/packages/mui-joy/src/CardContent/CardContent.tsx
@@ -26,9 +26,10 @@ const CardContentRoot = styled('div', {
 })<{ ownerState: CardContentProps }>(({ ownerState }) => ({
   display: 'flex',
   flexDirection: ownerState.orientation === 'horizontal' ? 'row' : 'column',
-  flex: 1, // fill the available space in the Card and also shrink if needed
+  flex: 9999, // fill the available space in the Card and also shrink if needed
   zIndex: 1,
   columnGap: 'var(--Card-padding)',
+  rowGap: 'max(2px, calc(0.1875 * var(--Card-padding)))',
   padding: 'var(--unstable_padding)',
   [`.${cardOverflowClasses.root} > &`]: {
     '--unstable_padding': 'calc(var(--Card-padding) * 0.75) 0px',
diff --git a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx
index dd994e27c57118..17ed565de6d0dd 100644
--- a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx
+++ b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx
@@ -46,6 +46,7 @@ const CardOverflowRoot = styled('div', {
     alignSelf: 'stretch', // prevent shrinking if parent's align-items is not initial
     borderRadius: 'var(--CardOverflow-radius)',
     position: 'relative',
+    display: 'flex',
     ...(ownerState['data-parent'] === 'Card-horizontal' && {
       '--AspectRatio-margin': 'calc(-1 * var(--Card-padding)) 0px',
       marginTop: 'var(--CardOverflow-offset)',
@@ -76,6 +77,7 @@ const CardOverflowRoot = styled('div', {
     }),
     ...(ownerState['data-parent'] === 'Card-vertical' && {
       '--AspectRatio-margin': '0px calc(-1 * var(--Card-padding))',
+      flexDirection: 'column', // required to make AspectRatio works
       marginLeft: 'var(--CardOverflow-offset)',
       marginRight: 'var(--CardOverflow-offset)',
       padding: '0px var(--Card-padding)',
diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
index 172cc4e886d7db..02964cb2752023 100644
--- a/packages/mui-joy/src/IconButton/IconButton.tsx
+++ b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -100,10 +100,7 @@ export const StyledIconButton = styled('button')<{ ownerState: IconButtonOwnerSt
         '--Icon-color': 'currentColor',
         ...theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!],
       },
-      '&:disabled': {
-        '--Icon-color': 'currentColor',
-        ...theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
-      },
+      '&:disabled': theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
     },
   ],
 );
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
index 386494e577a9ab..c4e390afeaf8f0 100644
--- a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
+++ b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
@@ -12,6 +12,7 @@ import {
   ExtendListItemButton,
   ListItemButtonTypeMap,
 } from './ListItemButtonProps';
+import listItemClasses from '../ListItem/listItemClasses';
 import listItemButtonClasses, { getListItemButtonUtilityClass } from './listItemButtonClasses';
 import ListItemButtonOrientationContext from './ListItemButtonOrientationContext';
 import RowListContext from '../List/RowListContext';
@@ -50,6 +51,7 @@ export const StyledListItemButton = styled('div')<{ ownerState: ListItemButtonOw
     WebkitTapHighlightColor: 'transparent',
     boxSizing: 'border-box',
     position: 'relative',
+    font: 'inherit',
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
@@ -79,9 +81,7 @@ export const StyledListItemButton = styled('div')<{ ownerState: ListItemButtonOw
     minBlockSize: 'var(--ListItem-minHeight)',
     border: '1px solid transparent', // use `transparent` as a placeholder to prevent the button from jumping when switching to `outlined` variant
     borderRadius: 'var(--ListItem-radius)',
-    flexGrow: ownerState.row ? 0 : 1,
-    flexBasis: ownerState.row ? 'auto' : '0%', // for long text (in vertical), displays in multiple lines.
-    flexShrink: 0,
+    flex: 'var(--unstable_ListItem-flex, none)', // prevent children from shrinking when the List's height is limited.
     fontSize: 'inherit', // prevent user agent style when component="button"
     lineHeight: 'inherit', // prevent user agent style when component="button"
     minInlineSize: 0,
@@ -90,6 +90,9 @@ export const StyledListItemButton = styled('div')<{ ownerState: ListItemButtonOw
       zIndex: 1, // to be above of the next element. For example, the first Tab item should be above the second so that the outline is above the second Tab.
     },
     ...theme.variants[ownerState.variant!]?.[ownerState.color!],
+    [`.${listItemClasses.root} > &`]: {
+      '--unstable_ListItem-flex': '1 0 0%', // grow to fill the available space of ListItem
+    },
     [`&.${listItemButtonClasses.selected}`]: {
       ...theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!],
       '--Icon-color': 'currentColor',
diff --git a/packages/mui-joy/src/ModalClose/ModalClose.tsx b/packages/mui-joy/src/ModalClose/ModalClose.tsx
index eaff60f72b60f4..9a351bca5503e0 100644
--- a/packages/mui-joy/src/ModalClose/ModalClose.tsx
+++ b/packages/mui-joy/src/ModalClose/ModalClose.tsx
@@ -48,6 +48,7 @@ export const ModalCloseRoot = styled(StyledIconButton, {
     '--IconButton-size': '40px',
   }),
   position: 'absolute',
+  zIndex: 1, // stay on top of the title in case it is positioned relatively
   top: `var(--ModalClose-inset, ${theme.spacing(1)})`,
   right: `var(--ModalClose-inset, ${theme.spacing(1)})`,
   borderRadius: `var(--ModalClose-radius, ${theme.vars.radius.sm})`,
diff --git a/packages/mui-joy/src/Tab/Tab.tsx b/packages/mui-joy/src/Tab/Tab.tsx
index 2f1758ef5bc7c0..c9d8342d03b361 100644
--- a/packages/mui-joy/src/Tab/Tab.tsx
+++ b/packages/mui-joy/src/Tab/Tab.tsx
@@ -145,6 +145,7 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
     color: colorProp = 'neutral',
     disableIndicator = false,
     indicatorPlacement = row ? 'bottom' : 'right',
+    indicatorInset = false,
     slots = {},
     slotProps = {},
     ...other
@@ -175,6 +176,7 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
     ...props,
     disableIndicator,
     indicatorPlacement,
+    indicatorInset,
     orientation,
     row,
     active,
@@ -250,6 +252,7 @@ Tab.propTypes /* remove-proptypes */ = {
   disableIndicator: PropTypes.bool,
   /**
    * If `true`, the indicator stay within the padding based on the `Tabs` orientation.
+   * @default false
    */
   indicatorInset: PropTypes.bool,
   /**
diff --git a/packages/mui-joy/src/Tab/TabProps.ts b/packages/mui-joy/src/Tab/TabProps.ts
index fe2687c5d3d3e2..733a049f9941df 100644
--- a/packages/mui-joy/src/Tab/TabProps.ts
+++ b/packages/mui-joy/src/Tab/TabProps.ts
@@ -53,6 +53,7 @@ export interface TabTypeMap<P = {}, D extends React.ElementType = 'button'> {
     indicatorPlacement?: 'top' | 'bottom' | 'left' | 'right';
     /**
      * If `true`, the indicator stay within the padding based on the `Tabs` orientation.
+     * @default false
      */
     indicatorInset?: boolean;
     /**
diff --git a/packages/mui-joy/src/TabList/TabList.tsx b/packages/mui-joy/src/TabList/TabList.tsx
index a2ddecfeb89b7e..0deee34964e486 100644
--- a/packages/mui-joy/src/TabList/TabList.tsx
+++ b/packages/mui-joy/src/TabList/TabList.tsx
@@ -117,6 +117,7 @@ const TabList = React.forwardRef(function TabList(inProps, ref) {
     size: sizeProp,
     disableUnderline = false,
     underlinePlacement = orientation === 'horizontal' ? 'bottom' : 'right',
+    tabFlex,
     sticky,
     slots = {},
     slotProps = {},
@@ -135,6 +136,7 @@ const TabList = React.forwardRef(function TabList(inProps, ref) {
     color,
     size,
     sticky,
+    tabFlex,
     nesting: false,
     disableUnderline,
     underlinePlacement,
diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx
index 679c7884d2cd19..6001aa8e639ad8 100644
--- a/packages/mui-joy/src/Typography/Typography.tsx
+++ b/packages/mui-joy/src/Typography/Typography.tsx
@@ -87,6 +87,7 @@ const TypographyRoot = styled('span', {
         }
       : {
           display: 'block', // don't rely on user agent, always `block`.
+          position: 'relative',
         }),
     ...((ownerState.startDecorator || ownerState.endDecorator) && {
       display: 'flex',
diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts
index 48a021a05f236c..d7d6eed4aabe89 100644
--- a/packages/mui-joy/src/styles/extendTheme.ts
+++ b/packages/mui-joy/src/styles/extendTheme.ts
@@ -447,7 +447,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
         fontFamily: getCssVar(`fontFamily-display, ${fontFamily.display}`),
         fontWeight: getCssVar(`fontWeight-lg, ${fontWeight.lg}`),
         fontSize: getCssVar(`fontSize-xl2, ${fontSize.xl2}`),
-        lineHeight: getCssVar(`lineHeight-md, ${lineHeight.md}`),
+        lineHeight: getCssVar(`lineHeight-xs, ${lineHeight.xs}`),
         letterSpacing: '-0.025em',
         color: getCssVar(`palette-text-primary, ${lightColorSystem.palette.text.primary}`),
       },
@@ -456,7 +456,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
         fontFamily: getCssVar(`fontFamily-display, ${fontFamily.display}`),
         fontWeight: getCssVar(`fontWeight-lg, ${fontWeight.lg}`),
         fontSize: getCssVar(`fontSize-xl, ${fontSize.xl}`),
-        lineHeight: getCssVar(`lineHeight-lg, ${lineHeight.lg}`),
+        lineHeight: getCssVar(`lineHeight-md, ${lineHeight.md}`),
         letterSpacing: '-0.025em',
         color: getCssVar(`palette-text-primary, ${lightColorSystem.palette.text.primary}`),
       },
@@ -465,7 +465,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
         fontFamily: getCssVar(`fontFamily-body, ${fontFamily.body}`),
         fontWeight: getCssVar(`fontWeight-lg, ${fontWeight.lg}`),
         fontSize: getCssVar(`fontSize-lg, ${fontSize.lg}`),
-        lineHeight: getCssVar(`lineHeight-xl, ${lineHeight.xl}`),
+        lineHeight: getCssVar(`lineHeight-xs, ${lineHeight.xs}`),
         color: getCssVar(`palette-text-primary, ${lightColorSystem.palette.text.primary}`),
       },
 
@@ -488,7 +488,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
       'body-lg': {
         fontFamily: getCssVar(`fontFamily-body, ${fontFamily.body}`),
         fontSize: getCssVar(`fontSize-lg, ${fontSize.lg}`),
-        lineHeight: getCssVar(`lineHeight-lg, ${lineHeight.lg}`),
+        lineHeight: getCssVar(`lineHeight-md, ${lineHeight.md}`),
         color: getCssVar(`palette-text-secondary, ${lightColorSystem.palette.text.secondary}`),
       },
 
@@ -502,7 +502,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
       'body-sm': {
         fontFamily: getCssVar(`fontFamily-body, ${fontFamily.body}`),
         fontSize: getCssVar(`fontSize-sm, ${fontSize.sm}`),
-        lineHeight: getCssVar(`lineHeight-sm, ${lineHeight.sm}`),
+        lineHeight: getCssVar(`lineHeight-md, ${lineHeight.md}`),
         color: getCssVar(`palette-text-tertiary, ${lightColorSystem.palette.text.tertiary}`),
       },
 
@@ -510,7 +510,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
         fontFamily: getCssVar(`fontFamily-body, ${fontFamily.body}`),
         fontWeight: getCssVar(`fontWeight-md, ${fontWeight.md}`),
         fontSize: getCssVar(`fontSize-xs, ${fontSize.xs}`),
-        lineHeight: getCssVar(`lineHeight-xl, ${lineHeight.xl}`),
+        lineHeight: getCssVar(`lineHeight-md, ${lineHeight.md}`),
         color: getCssVar(`palette-text-tertiary, ${lightColorSystem.palette.text.tertiary}`),
       },
     },
diff --git a/packages/mui-joy/src/styles/variantUtils.test.js b/packages/mui-joy/src/styles/variantUtils.test.js
index 1f790a0239a73f..3d02f0452bf10c 100644
--- a/packages/mui-joy/src/styles/variantUtils.test.js
+++ b/packages/mui-joy/src/styles/variantUtils.test.js
@@ -240,6 +240,7 @@ describe('variant utils', () => {
       },
       outlinedDisabled: {
         primary: {
+          '--Icon-color': 'currentColor',
           color: 'var(--any-token)',
           borderColor: 'var(--any-token)',
           backgroundColor: 'var(--any-token)',
diff --git a/packages/mui-joy/src/styles/variantUtils.ts b/packages/mui-joy/src/styles/variantUtils.ts
index b96a85b75f632e..6d8f512b530a2b 100644
--- a/packages/mui-joy/src/styles/variantUtils.ts
+++ b/packages/mui-joy/src/styles/variantUtils.ts
@@ -67,6 +67,7 @@ export const createVariantStyle = (
         if (variantVar.includes('Disabled')) {
           result.pointerEvents = 'none';
           result.cursor = 'default';
+          result['--Icon-color'] = 'currentColor';
         }
         if (variantVar.match(/(Hover|Active|Disabled)/)) {
           assignCss(result as any, variantVar, cssVar);
@@ -280,7 +281,7 @@ export const createSoftInversion = (
           [prefixVar('--palette-text-tertiary')]: `rgba(${getCssVar(
             `palette-${color}-darkChannel`,
           )} / 0.68)`,
-          [prefixVar('--palette-text-icon')]: getCssVar(`palette-${color}-400`),
+          [prefixVar('--palette-text-icon')]: getCssVar(`palette-${color}-500`),
           [prefixVar('--palette-divider')]: `rgba(${getCssVar(
             `palette-${color}-mainChannel`,
           )} / 0.32)`,