COMPLETED: Card sub-components

HOTFIX: In all cards add CSS rule : if card media subcomponent are first, or first any of subcomponents contain on first place media component - applying a zero-padding and border-radius exclude a default padding value

app/page.tsx

@@ -20,7 +20,7 @@ export default function Page() {
                     padding: '8px',
                 }}
             >
-                <div style={{ display: 'flex', gap: '8px', maxWidth: 1024 }}>
+                <div style={{ display: 'flex', gap: '8px', maxWidth: '90vw' }}>
                     <Card variant={'outlined'}>
                         <CardHeader>
                             <h1>Header</h1>
@@ -76,6 +76,32 @@ export default function Page() {
                             <Button>label</Button>
                         </CardFooter>
                     </Card>
+                    <Card variant={'elevated'}>
+                        <CardActionArea>
+                            <CardMedia src={testImage1.src} type={'img'} />
+                            <CardBody>
+                                <h4>
+                                    <strong>Sub-header</strong>
+                                </h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consecrate
+                                    adipiscing elit, sed do eiusmod tempor
+                                    incididunt ut labore et dolore magna aliqua.
+                                    Ut enim ad minim veniam, quis nostrud
+                                    exercitation ullamco laboris nisi ut aliquip
+                                    ex ea commodo consequat. Duis aute irure
+                                    dolor in reprehenderit in voluptate velit
+                                    esse cillum dolore eu fugiat nulla pariatur.
+                                    Excepteur sint occaecat cupidatat non
+                                    proident, sunt in culpa qui officia deserunt
+                                    mollit anim id est laborum.
+                                </p>
+                            </CardBody>
+                        </CardActionArea>
+                        <CardFooter>
+                            <Button>label</Button>
+                        </CardFooter>
+                    </Card>
                     <Card variant={'elevated'}>
                         <CardHeader>
                             <h1>Header</h1>

src/styles/card.sass

@@ -8,11 +8,18 @@ $padding: 16px
     @else
         @return 0px
 
-div.m3.m3-card > .m3-card-media:first-child
+div.m3.m3-card
+    & > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child,
+    & > .m3-card-media:first-child,
+    & > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child
         padding: padding-calculating(false)
         border-radius: 12px !important
 
-:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body, img.m3-card-media).m3
+div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child
+    padding: padding-calculating(false)
+    border-radius: 12px !important
+
+:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media).m3
     padding: padding-calculating(true)
     display: block
     box-sizing: border-box

src/styles/generics.css

@@ -3,12 +3,17 @@
 @import "./themes/typography.module.css";
 @import "./themes/theme.dark.css" (prefers-color-scheme: dark);
 @import "./themes/theme.light.css" (prefers-color-scheme: light);
-div.m3.m3-card > .m3-card-media:first-child {
+div.m3.m3-card > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child, div.m3.m3-card > .m3-card-media:first-child, div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child {
   padding: 0px;
   border-radius: 12px !important;
 }
 
-:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body, img.m3-card-media).m3 {
+div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child {
+  padding: 0px;
+  border-radius: 12px !important;
+}
+
+:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media).m3 {
   padding: 16px;
   display: block;
   box-sizing: border-box;

src/styles/themes/tokens.css

@@ -104,4 +104,25 @@
   --md-sys-typescale-title-small-font-size: 14px;
   --md-sys-typescale-title-small-line-height: 20px;
   --md-sys-typescale-title-small-letter-spacing: 0.1px;
+  /* shape - extra large top rounding */
+  --md-sys-shape-extra-large-top-rounding: 28px 28px 0 0;
+  /* shape - extra large rounding */
+  --md-sys-shape-extra-large-rounding: 28px;
+  /* shape - large top rounding */
+  --md-sys-shape-large-top-rounding: 16px 16px 0 0;
+  /* shape - large end rounding */
+  --md-sys-shape-large-end-rounding: 0 16px 16px 0;
+  /* shape - large start rounding */
+  --md-sys-shape-large-start-rounding: 16px 0 0 16px;
+  /* shape - large rounding */
+  --md-sys-shape-large-rounding: 16px;
+  /* shape - medium rounding */
+  --md-sys-shape-medium-rounding: 12px;
+  /* shape - small rounding */
+  --md-sys-shape-small-rounding: 8px;
+  /* shape - extra small top rounding */
+  --md-sys-shape-extra-small-top-rounding: 4px 4px 0 0;
+  /* shape - extra small rounding */
+  --md-sys-shape-extra-small-rounding: 4px;
+
 }