@expressivecss/expressive 0.7.0 → 0.9.0

package/src/sass/components/_cards.scss

@@ -3,16 +3,16 @@
 // Cards.
 //
 // Anatomy is the HTML. An <article> is an elevated card. A heading is the
-// headline, a <p> is supporting text, a direct <nav> (not .tabs) is the
-// action row,
-// <img> / <figure> is media. Helpers switch the M3 variant (filled, outlined)
-// or the layout (horizontal).
+// headline, .subhead is the subhead, a <p> is supporting text, direct media
+// is <img> / <picture> / <figure>, and direct .actions is the action row.
+// Helpers switch the M3 variant (filled, outlined) or the layout
+// (horizontal).
 //
 // Tokens follow https://m3.material.io/components/cards/specs
 //   container  surface-container-low, 12dp corners
-//   elevated   level 1, hover level 2
-//   filled     surface-container-highest, level 0
-//   outlined   surface + 1dp outline, level 0
+//   elevated   level 1; interactive hover level 2
+//   filled     surface-container-highest, level 0; interactive hover level 1
+//   outlined   surface + 1dp outline, level 0; interactive hover level 1
 //   headline   title-medium / on-surface
 //   body       body-medium / on-surface-variant
 //   padding    16dp
@@ -21,65 +21,240 @@ $_card: "article";
 
 :where(#{$_card}) {
   --md-comp-elevated-card-container-color: var(--md-sys-color-surface-container-low);
-  --md-comp-elevated-card-container-shape: 12px;
+  --md-comp-filled-card-container-color: var(--md-sys-color-surface-container-highest);
+  --md-comp-outlined-card-container-color: var(--md-sys-color-surface);
+  --md-comp-outlined-card-outline-color: var(--md-sys-color-outline-variant);
+  --md-comp-outlined-card-disabled-outline-color: var(--md-sys-color-outline);
+  --md-comp-card-container-color: var(--md-comp-elevated-card-container-color);
+  --md-comp-card-container-shape: 12px;
+  --md-comp-card-media-shape: var(--md-comp-card-container-shape);
+  --md-comp-card-media-overlay-container-color: var(--md-sys-color-surface);
+  --md-comp-card-media-overlay-ink-color: var(--md-sys-color-on-surface);
+  --md-comp-card-media-overlay-shape: 8px;
+  --md-comp-card-headline-color: var(--md-sys-color-on-surface);
+  --md-comp-card-subhead-color: var(--md-sys-color-on-surface);
+  --md-comp-card-supporting-text-color: var(--md-sys-color-on-surface-variant);
+  --md-comp-card-content-padding: 16px;
+  --md-comp-card-between-space: 8px;
+  --md-comp-card-icon-color: var(--md-sys-color-primary);
+  --md-comp-card-icon-size: 24px;
+  --md-comp-card-state-layer-color: var(--md-sys-color-on-surface);
+  --md-comp-card-hover-state-layer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+  --md-comp-card-focus-state-layer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+  --md-comp-card-pressed-state-layer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+  --md-comp-card-dragged-state-layer-opacity: var(--md-sys-state-dragged-state-layer-opacity);
+  --md-comp-card-disabled-container-opacity: 38%;
+  --md-comp-outlined-card-disabled-outline-opacity: 12%;
+  --md-comp-card-focus-indicator-color: var(--md-sys-color-secondary);
+  --md-comp-card-focus-indicator-thickness: 3px;
+  --md-comp-card-focus-indicator-offset: 2px;
+  --md-comp-card-horizontal-media-width: 40%;
+  --md-comp-card-horizontal-min-height: 240px;
 
   position: relative;
   box-sizing: border-box;
-  background-color: var(--md-comp-elevated-card-container-color);
+  background-color: var(--md-comp-card-container-color);
   color: var(--md-sys-color-on-surface);
-  border-radius: var(--md-comp-elevated-card-container-shape);
+  border-radius: var(--md-comp-card-container-shape);
   overflow: hidden;
-  transition: box-shadow .2s ease-out;
+  transition: background-color .2s ease-out, box-shadow .2s ease-out;
+}
+
+// M3 state layers belong only to an interactive card. A direct
+// `.primary-action` link supplies the card's large action area without making
+// secondary buttons invalid nested controls.
+:where(#{$_card})::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border-radius: inherit;
+  background-color: var(--md-comp-card-state-layer-color);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .2s ease-out;
+}
+
+:where(#{$_card}) > .primary-action {
+  display: block;
+  color: inherit;
+  border-radius: inherit;
+  outline: 0;
 }
 
 // Default is elevated. :where() keeps specificity at zero so .outlined wins.
 :where(#{$_card}):not(.filled, .outlined, .border) {
   @include z-depth("1");
-
-  &:hover {
-    @include z-depth("2");
-  }
 }
 
 :where(#{$_card}).filled {
-  @include z-depth("0");
-  background-color: var(--md-sys-color-surface-container-highest);
+  --md-comp-card-container-color: var(--md-comp-filled-card-container-color);
+  box-shadow: none;
 }
 
 :where(#{$_card}).outlined,
 :where(#{$_card}).border {
+  --md-comp-card-container-color: var(--md-comp-outlined-card-container-color);
+  box-shadow: none;
+  border: 1px solid var(--md-comp-outlined-card-outline-color);
+}
+
+// Hovered cards lift one level and apply an 8% on-surface state layer. Dragged
+// and picked-up states take precedence over retained pointer state.
+:where(#{$_card}):not(.dragged, .picked-up):not(.filled, .outlined, .border):has(> .primary-action:hover) {
+  @include z-depth("2");
+}
+
+:where(#{$_card}):not(.dragged, .picked-up):is(.filled, .outlined, .border):has(> .primary-action:hover) {
+  @include z-depth("1");
+}
+
+:where(#{$_card}):not(.dragged, .picked-up):has(> .primary-action:hover)::after {
+  opacity: var(--md-comp-card-hover-state-layer-opacity);
+}
+
+// Focus and press retain their variant elevation. Focus gets M3's external
+// 3dp indicator at a 2dp offset; the outlined variant also darkens its stroke.
+:where(#{$_card}):has(> .primary-action:focus-visible) {
+  outline: var(--md-comp-card-focus-indicator-thickness) solid var(--md-comp-card-focus-indicator-color);
+  outline-offset: var(--md-comp-card-focus-indicator-offset);
+}
+
+:where(#{$_card}):not(.dragged, .picked-up):has(> .primary-action:focus-visible)::after {
+  opacity: var(--md-comp-card-focus-state-layer-opacity);
+}
+
+:where(#{$_card}):is(.outlined, .border):has(> .primary-action:focus-visible) {
+  border-color: var(--md-sys-color-on-surface);
+}
+
+:where(#{$_card}):not(.dragged, .picked-up):has(> .primary-action:active)::after {
+  opacity: var(--md-comp-card-pressed-state-layer-opacity);
+}
+
+:where(#{$_card}):not(.dragged, .picked-up):not(.filled, .outlined, .border):has(> .primary-action:active) {
+  @include z-depth("1");
+}
+
+:where(#{$_card}):not(.dragged, .picked-up):is(.filled, .outlined, .border):has(> .primary-action:active) {
   @include z-depth("0");
-  border: 1px solid var(--md-sys-color-outline-variant);
+}
+
+// A reorder interaction toggles `.dragged` or `.picked-up`. The elevated
+// variant rises to level 4; filled and outlined variants rise to level 3.
+:where(#{$_card}):not(.filled, .outlined, .border):is(.dragged, .picked-up) {
+  z-index: 4;
+  @include z-depth("4");
+}
+
+:where(#{$_card}):is(.filled, .outlined, .border):is(.dragged, .picked-up) {
+  z-index: 4;
+  @include z-depth("3");
+}
+
+:where(#{$_card}):is(.dragged, .picked-up)::after {
+  opacity: var(--md-comp-card-dragged-state-layer-opacity);
+}
+
+// Disabled tokens differ by variant in M3. `aria-disabled` belongs on the
+// primary action; `.disabled` / article[aria-disabled] cover app-controlled
+// cards that do not use a link.
+:where(#{$_card}):is(.disabled, [aria-disabled="true"]),
+:where(#{$_card}):has(> .primary-action[aria-disabled="true"]) {
+  outline: 0;
+}
+
+:where(#{$_card}):not(.filled, .outlined, .border):is(.disabled, [aria-disabled="true"]),
+:where(#{$_card}):not(.filled, .outlined, .border):has(> .primary-action[aria-disabled="true"]) {
+  @include z-depth("1");
+  background-color: color-mix(
+    in oklab,
+    var(--md-sys-color-surface) var(--md-comp-card-disabled-container-opacity),
+    transparent
+  );
+}
+
+:where(#{$_card}).filled:is(.disabled, [aria-disabled="true"]),
+:where(#{$_card}).filled:has(> .primary-action[aria-disabled="true"]) {
+  @include z-depth("0");
+  background-color: color-mix(
+    in oklab,
+    var(--md-sys-color-surface-variant) var(--md-comp-card-disabled-container-opacity),
+    transparent
+  );
+}
+
+:where(#{$_card}):is(.outlined, .border):is(.disabled, [aria-disabled="true"]),
+:where(#{$_card}):is(.outlined, .border):has(> .primary-action[aria-disabled="true"]) {
+  @include z-depth("0");
+  background-color: var(--md-comp-outlined-card-container-color);
+  border-color: color-mix(
+    in oklab,
+    var(--md-comp-outlined-card-disabled-outline-color) var(--md-comp-outlined-card-disabled-outline-opacity),
+    transparent
+  );
+}
+
+:where(#{$_card}):is(.disabled, [aria-disabled="true"])::after,
+:where(#{$_card}):has(> .primary-action[aria-disabled="true"])::after {
+  opacity: 0;
+}
+
+:where(#{$_card}).disabled,
+:where(#{$_card})[aria-disabled="true"],
+:where(#{$_card}) > .primary-action[aria-disabled="true"] {
+  pointer-events: none;
+}
+
+:where(#{$_card}) .card-icon {
+  width: var(--md-comp-card-icon-size);
+  height: var(--md-comp-card-icon-size);
+  color: var(--md-comp-card-icon-color);
+  font-size: var(--md-comp-card-icon-size);
 }
 
 // --- Semantic children ----------------------------------------------------
 
 article > :is(h1, h2, h3, h4, h5, h6),
-article > header > :is(h1, h2, h3, h4, h5, h6) {
+article > :is(header, .primary-action) > :is(h1, h2, h3, h4, h5, h6) {
   margin: 0;
-  padding: 16px 16px 0;
+  padding: var(--md-comp-card-content-padding) var(--md-comp-card-content-padding) 0;
   font-family: var(--md-sys-typescale-title-medium-font-family-name);
   font-size: var(--md-sys-typescale-title-medium-font-size);
   font-weight: var(--md-sys-typescale-title-medium-font-weight);
   line-height: var(--md-sys-typescale-title-medium-line-height);
   letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
-  color: var(--md-sys-color-on-surface);
+  color: var(--md-comp-card-headline-color);
 }
 
 article > p,
-article > header > p {
+article > :is(header, .primary-action) > p {
   margin: 0;
-  padding: 8px 16px 16px;
+  padding: var(--md-comp-card-between-space) var(--md-comp-card-content-padding) var(--md-comp-card-content-padding);
   font-family: var(--md-sys-typescale-body-medium-font-family-name);
   font-size: var(--md-sys-typescale-body-medium-font-size);
   font-weight: var(--md-sys-typescale-body-medium-font-weight);
   line-height: var(--md-sys-typescale-body-medium-line-height);
   letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
-  color: color-mix(in oklab, currentColor 72%, transparent);
+  color: var(--md-comp-card-supporting-text-color);
+}
+
+// Optional subhead between the headline and supporting copy. Keep the class
+// on a paragraph so the document retains useful reading semantics.
+article > p.subhead,
+article > :is(header, .primary-action) > p.subhead {
+  margin: 0;
+  padding: 4px var(--md-comp-card-content-padding) 0;
+  font-family: var(--md-sys-typescale-title-small-font-family-name);
+  font-size: var(--md-sys-typescale-title-small-font-size);
+  font-weight: var(--md-sys-typescale-title-small-font-weight);
+  line-height: var(--md-sys-typescale-title-small-line-height);
+  letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
+  color: var(--md-comp-card-subhead-color);
 }
 
 article > :is(h1, h2, h3, h4, h5, h6) + p,
-article > header > :is(h1, h2, h3, h4, h5, h6) + p {
+article > :is(header, .primary-action) > :is(h1, h2, h3, h4, h5, h6) + p {
   padding-top: 0;
 }
 
@@ -89,63 +264,189 @@ article > header {
   color: inherit;
 }
 
-// Action row. nav.tabs is a tab bar, not actions — leave it to _tabs.scss.
-article > nav:not(.tabs) {
+// Action row. A row of buttons, not destinations.
+article > .actions {
+  position: relative;
+  z-index: 3;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 8px;
+  gap: var(--md-comp-card-between-space);
   padding: 4px 8px 8px 8px;
   margin: 0;
 }
 
 article > img,
 article > picture,
-article > figure {
+article > figure,
+article > .primary-action > img,
+article > .primary-action > picture,
+article > .primary-action > figure {
   display: block;
   width: 100%;
   margin: 0;
+  border-radius: var(--md-comp-card-media-shape);
+  overflow: hidden;
 }
 
 article > img,
 article > picture img,
-article > figure img {
+article > figure img,
+article > .primary-action > img,
+article > .primary-action > picture img,
+article > .primary-action > figure img {
   display: block;
   width: 100%;
   object-fit: cover;
+  border-radius: var(--md-comp-card-media-shape);
 }
 
 article > figure {
   position: relative;
 }
 
-article > figure > figcaption {
+article > .primary-action > figure {
+  position: relative;
+}
+
+article > figure > figcaption,
+article > .primary-action > figure > figcaption {
   position: absolute;
-  inset-inline: 0;
-  bottom: 0;
+  inset-inline-start: var(--md-comp-card-content-padding);
+  inset-inline-end: auto;
+  bottom: var(--md-comp-card-content-padding);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--md-comp-card-between-space);
+  box-sizing: border-box;
+  width: fit-content;
+  max-width: calc(100% - (2 * var(--md-comp-card-content-padding)));
   margin: 0;
-  padding: 16px;
-  color: var(--md-sys-color-on-surface);
-  background: color-mix(in oklab, var(--md-sys-color-surface) 72%, transparent);
+  padding: 8px 12px;
+  color: var(--md-comp-card-media-overlay-ink-color);
+  background-color: var(--md-comp-card-media-overlay-container-color);
+  border-radius: var(--md-comp-card-media-overlay-shape);
   font-family: var(--md-sys-typescale-title-medium-font-family-name);
   font-size: var(--md-sys-typescale-title-medium-font-size);
   font-weight: var(--md-sys-typescale-title-medium-font-weight);
   line-height: var(--md-sys-typescale-title-medium-line-height);
 }
 
-// Horizontal: media on the start, body stacked beside it.
-article.horizontal {
-  display: flex;
-  flex-direction: row;
+// Keep meaningful icons on the same opaque role pair as caption text. The
+// surface/on-surface pairing isolates both from unpredictable image colors.
+article > figure > figcaption > :is(.material-symbols, .card-icon, svg),
+article > .primary-action > figure > figcaption > :is(.material-symbols, .card-icon, svg) {
+  flex: 0 0 auto;
+  color: inherit;
+  font-size: var(--md-comp-card-icon-size);
+  line-height: 1;
+}
+
+article > figure > figcaption > svg,
+article > .primary-action > figure > figcaption > svg {
+  fill: currentColor;
+}
+
+// Collections are a grid by default. The full track definition is a token so
+// applications can supply fixed, responsive, or asymmetric columns without
+// fighting component selectors. Each card keeps its variant-specific resting
+// elevation; picked-up / dragged state raises each variant above its rest.
+:where(.card-collection) {
+  --md-comp-card-collection-gap: 8px;
+  --md-comp-card-collection-min-card-width: 240px;
+  --md-comp-card-collection-grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, var(--md-comp-card-collection-min-card-width)), 1fr)
+  );
+  --md-comp-card-collection-mosaic-row-size: 80px;
+  --md-comp-card-collection-carousel-height: 320px;
+  --md-comp-card-collection-carousel-card-width: min(82%, 360px);
+
+  display: grid;
+  grid-template-columns: var(--md-comp-card-collection-grid-template-columns);
+  gap: var(--md-comp-card-collection-gap);
   align-items: stretch;
+  margin: 0;
+  padding: 0;
+}
+
+:where(.card-collection article):not(.horizontal) {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+:where(.card-collection article):not(.horizontal) > .actions {
+  margin-block-start: auto;
+}
+
+// A list is the same collection with one column. The cards retain their own
+// vertical / horizontal orientation.
+.card-collection.list {
+  --md-comp-card-collection-grid-template-columns: minmax(0, 1fr);
+
+  margin: 0;
+}
+
+// Staggered uses multicolumn flow for masonry-like intrinsic card heights.
+:where(.card-collection.staggered) {
+  display: block;
+  columns: var(
+    --md-comp-card-collection-staggered-column-width,
+    var(--md-comp-card-collection-min-card-width)
+  );
+  column-gap: var(--md-comp-card-collection-gap);
+}
+
+:where(.card-collection.staggered) > article {
+  break-inside: avoid;
+  width: 100%;
+  margin-block: 0 var(--md-comp-card-collection-gap);
+}
+
+// Mosaic keeps source order in a dense grid. Per-card custom properties make
+// spans data-driven instead of baking a decorative nth-child pattern into the
+// framework.
+:where(.card-collection.mosaic) {
+  grid-auto-flow: dense;
+  grid-auto-rows: var(--md-comp-card-collection-mosaic-row-size);
+}
+
+:where(.card-collection.mosaic) > article {
+  grid-column: span var(--md-comp-card-collection-column-span, 1);
+  grid-row: span var(--md-comp-card-collection-row-span, 2);
+}
+
+// Reuse the M3 uncontained Carousel for a horizontally scrolling collection.
+// Carousel.Init()/AutoInit() supplies the track and interaction behavior.
+.card-collection.carousel {
+  --carousel-height: var(--md-comp-card-collection-carousel-height);
+  --md-comp-carousel-gap: var(--md-comp-card-collection-gap);
+  --md-comp-carousel-uncontained-item-width: var(
+    --md-comp-card-collection-carousel-card-width
+  );
+
+  display: block;
+}
+
+// Horizontal uses the same semantic slots as the vertical card. They may be
+// direct children or children of the direct primary-action link.
+@mixin horizontal-card-layout($with-actions: true) {
+  display: grid;
+  grid-template-columns:
+    minmax(0, var(--md-comp-card-horizontal-media-width))
+    minmax(0, 1fr);
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  min-height: var(--md-comp-card-horizontal-min-height);
   overflow: hidden;
 
   > img,
   > picture,
   > figure {
-    flex: 0 0 40%;
-    max-width: 40%;
-    width: 40%;
+    grid-column: 1;
+    grid-row: 1 / -1;
+    width: 100%;
+    height: 100%;
     align-self: stretch;
   }
 
@@ -156,12 +457,45 @@ article.horizontal {
     object-fit: cover;
   }
 
-  > div {
-    flex: 1 1 auto;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
+  > :is(h1, h2, h3, h4, h5, h6),
+  > header {
+    grid-column: 2;
+    grid-row: 1;
   }
+
+  > p.subhead {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  > p:not(.subhead) {
+    grid-column: 2;
+    grid-row: 3;
+  }
+
+  @if $with-actions {
+    > .actions {
+      grid-column: 2;
+      grid-row: 4;
+      align-self: end;
+      justify-content: flex-end;
+    }
+  }
+}
+
+article.horizontal {
+  @include horizontal-card-layout;
+}
+
+article.horizontal:has(> .primary-action) {
+  display: block;
+}
+
+article.horizontal > .primary-action {
+  @include horizontal-card-layout(false);
+
+  width: 100%;
+  min-height: inherit;
 }
 
 // Fixed heights for uniform grids.
@@ -179,7 +513,7 @@ article.small, article.medium, article.large {
     overflow: hidden;
   }
 
-  > img, > figure img {
+  > img, > picture img, > figure img {
     height: 100%;
   }
 
@@ -189,7 +523,7 @@ article.small, article.medium, article.large {
     overflow: hidden;
   }
 
-  > nav:not(.tabs) {
+  > .actions {
     margin-top: auto;
   }
 }
@@ -197,59 +531,161 @@ article.small, article.medium, article.large {
 article.horizontal.small,
 article.horizontal.medium,
 article.horizontal.large {
-  flex-direction: row;
+  display: grid;
 
   > img, > picture, > figure {
-    flex: 0 0 40%;
     max-height: none;
   }
 }
 
-// Reveal overlay. aside is the panel. Parked under the card (translateY 100%)
-// and clipped by overflow:hidden. Open is aria-expanded="true" → slide up
-// to cover. Do not use inset:0 as the closed geometry and then
-// translateY(-100%): that slides the panel *off* the card, and isOpen stays
-// true so a second click is a no-op.
-article > aside {
-  --md-comp-card-reveal-duration: 300ms;
-  --md-comp-card-reveal-easing: ease;
+article.horizontal:is(.small, .medium, .large):has(> .primary-action) {
+  display: block;
+}
 
-  position: absolute;
-  inset: 0;
-  z-index: 3;
+article.horizontal:is(.small, .medium, .large) > .primary-action {
+  height: 100%;
+}
+
+// Compact windows use the vertical spelling. This keeps media and controls
+// large enough to scan and operate without changing their source order.
+@include bp-down("medium") {
+  article.horizontal,
+  article.horizontal.small,
+  article.horizontal.medium,
+  article.horizontal.large {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    min-height: auto;
+  }
+
+  article.horizontal > .primary-action,
+  article.horizontal:is(.small, .medium, .large) > .primary-action {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    min-height: auto;
+  }
+}
+
+// Reveal panel. Panels stay available until Cards confirms the disclosure
+// contract and adds its runtime marker. The summary and media remain in place
+// while the initialized card grows downward to expose additional actions.
+// `interpolate-size` lets intrinsic content height animate without a fixed cap;
+// the @supports fallback keeps the interaction functional.
+:where(#{$_card}.card-reveal-initialized) {
+  interpolate-size: allow-keywords;
+}
+
+article.card-reveal-initialized > aside {
+  --md-comp-card-reveal-duration: 500ms;
+  --md-comp-card-reveal-easing: cubic-bezier(0.2, 0, 0, 1);
+
+  position: relative;
+  inset: auto;
+  z-index: 1;
   box-sizing: border-box;
-  padding: 16px;
-  overflow-y: auto;
-  background-color: var(--md-sys-color-surface);
+  height: 0;
+  min-height: 0;
+  padding: 0 var(--md-comp-card-content-padding);
+  overflow: clip;
+  background-color: inherit;
   color: var(--md-sys-color-on-surface);
-  transform: translateY(100%);
+  opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition:
-    transform var(--md-comp-card-reveal-duration) var(--md-comp-card-reveal-easing),
+    height var(--md-comp-card-reveal-duration) var(--md-comp-card-reveal-easing),
+    padding-block var(--md-comp-card-reveal-duration) var(--md-comp-card-reveal-easing),
+    opacity 150ms ease-out,
     visibility 0s var(--md-comp-card-reveal-duration);
 }
 
-article > aside[aria-expanded="true"] {
-  transform: translateY(0);
+article.card-reveal-initialized > aside.open {
+  height: auto;
+  padding-block: 0 var(--md-comp-card-content-padding);
+  opacity: 1;
   visibility: visible;
   pointer-events: auto;
-  transition: transform var(--md-comp-card-reveal-duration) var(--md-comp-card-reveal-easing);
+  transition:
+    height var(--md-comp-card-reveal-duration) var(--md-comp-card-reveal-easing),
+    padding-block var(--md-comp-card-reveal-duration) var(--md-comp-card-reveal-easing),
+    opacity 200ms 100ms ease-out,
+    visibility 0s;
+}
+
+@supports not (interpolate-size: allow-keywords) {
+  article.card-reveal-initialized > aside {
+    display: none;
+    height: auto;
+    transition: none;
+  }
+
+  article.card-reveal-initialized > aside.open {
+    display: block;
+  }
+}
+
+// A media-sized button supplies the repeated open/close target and carries the
+// state layer for the tap feedback shown by the M3 example.
+article > figure > .card-reveal-trigger {
+  @include card-media-trigger;
+}
+
+article > header.card-reveal-summary {
+  padding-bottom: var(--md-comp-card-content-padding);
+}
+
+article > aside > .reveal-actions {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  font-style: normal;
+}
+
+article > aside > .reveal-actions > .reveal-action {
+  display: grid;
+  grid-template-columns: var(--md-comp-card-icon-size) minmax(0, 1fr);
+  align-items: center;
+  gap: var(--md-comp-card-content-padding);
+  min-height: 48px;
+  padding-inline: 0;
+  color: var(--md-sys-color-on-surface);
+  border-radius: 8px;
+  font-family: var(--md-sys-typescale-body-medium-font-family-name);
+  font-size: var(--md-sys-typescale-body-medium-font-size);
+  font-weight: var(--md-sys-typescale-body-medium-font-weight);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
+}
+
+article > aside > .reveal-actions > .reveal-action:hover {
+  background-color: color-mix(
+    in oklab,
+    var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%),
+    transparent
+  );
+}
+
+article > aside > .reveal-actions > .reveal-action > :is(.material-symbols, .card-icon, svg) {
+  width: var(--md-comp-card-icon-size);
+  height: var(--md-comp-card-icon-size);
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: var(--md-comp-card-icon-size);
+  fill: currentColor;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  article > aside {
+  :where(#{$_card}),
+  :where(#{$_card})::after,
+  article > figure > .card-reveal-trigger,
+  article.card-reveal-initialized > aside {
     transition: none;
   }
 }
 
-article.sticky > nav {
+article.sticky > .actions {
   position: relative;
   z-index: 4;
   background-color: inherit;
 }
-
-article.sticky > aside {
-  bottom: auto;
-  height: calc(100% - 52px);
-}