@expressivecss/expressive 0.15.0 → 0.17.0

package/src/sass/components/_cards.scss

@@ -20,7 +20,7 @@
 $_card: "article";
 // A direct <figure> is media, unless it is a chart. :where() keeps the
 // selectors at their old specificity.
-$_media-figure: "figure:where(:not(.line-chart, .column-chart, .bar-chart, .pie-chart, .heatmap-chart, .radar-chart, .radial-chart, .mixed-chart))";
+$_media-figure: "figure:where(:not(.line-chart, .column-chart, .bar-chart, .pie-chart, .heatmap-chart, .radar-chart, .radial-chart, .mixed-chart, .scatter-chart, .sankey-chart, .funnel-chart, .treemap-chart))";
 
 :where(#{$_card}) {
   --md-comp-elevated-card-container-color: var(--md-sys-color-surface-container-low);
@@ -29,18 +29,18 @@ $_media-figure: "figure:where(:not(.line-chart, .column-chart, .bar-chart, .pie-
   --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-container-shape: var(--md-sys-shape-corner-medium);
   --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-media-overlay-shape: var(--md-sys-shape-corner-small);
   --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-icon-size: #{rem(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);
@@ -52,7 +52,7 @@ $_media-figure: "figure:where(:not(.line-chart, .column-chart, .bar-chart, .pie-
   --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;
+  --md-comp-card-horizontal-min-height: #{rem(240px)};
 
   position: relative;
   box-sizing: border-box;
@@ -60,7 +60,7 @@ $_media-figure: "figure:where(:not(.line-chart, .column-chart, .bar-chart, .pie-
   color: var(--md-sys-color-on-surface);
   border-radius: var(--md-comp-card-container-shape);
   overflow: hidden;
-  transition: background-color .2s ease-out, box-shadow .2s ease-out;
+  transition: background-color var(--md-sys-motion-duration-short4) ease-out, box-shadow var(--md-sys-motion-duration-short4) ease-out;
 }
 
 // M3 state layers belong only to an interactive card. A direct
@@ -75,7 +75,7 @@ $_media-figure: "figure:where(:not(.line-chart, .column-chart, .bar-chart, .pie-
   background-color: var(--md-comp-card-state-layer-color);
   opacity: 0;
   pointer-events: none;
-  transition: opacity .2s ease-out;
+  transition: opacity var(--md-sys-motion-duration-short4) ease-out;
 }
 
 :where(#{$_card}) > .primary-action {
@@ -182,7 +182,7 @@ $_media-figure: "figure:where(:not(.line-chart, .column-chart, .bar-chart, .pie-
   @include z-depth("0");
   background-color: color-mix(
     in oklab,
-    var(--md-sys-color-surface-variant) var(--md-comp-card-disabled-container-opacity),
+    var(--md-sys-color-surface-container-highest) var(--md-comp-card-disabled-container-opacity),
     transparent
   );
 }
@@ -314,10 +314,7 @@ article > .primary-action > #{$_media-figure} > figcaption {
   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);
+  @include typescale("title-medium");
 }
 
 // Keep meaningful icons on the same opaque role pair as caption text. The
@@ -341,13 +338,13 @@ article > .primary-action > #{$_media-figure} > figcaption > svg {
 // 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-min-card-width: #{rem(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-mosaic-row-size: #{rem(80px)};
+  --md-comp-card-collection-carousel-height: #{rem(320px)};
   --md-comp-card-collection-carousel-card-width: min(82%, 360px);
 
   display: grid;
@@ -419,7 +416,8 @@ article > .primary-action > #{$_media-figure} > figcaption > svg {
 
 // 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) {
+article.horizontal,
+article.horizontal > .primary-action {
   display: grid;
   grid-template-columns:
     minmax(0, var(--md-comp-card-horizontal-media-width))
@@ -460,19 +458,13 @@ article > .primary-action > #{$_media-figure} > figcaption > svg {
     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 > .actions {
+  grid-column: 2;
+  grid-row: 4;
+  align-self: end;
+  justify-content: flex-end;
 }
 
 article.horizontal:has(> .primary-action) {
@@ -480,16 +472,14 @@ article.horizontal:has(> .primary-action) {
 }
 
 article.horizontal > .primary-action {
-  @include horizontal-card-layout(false);
-
   width: 100%;
   min-height: inherit;
 }
 
 // Fixed heights for uniform grids.
-article.small { height: 300px; }
-article.medium { height: 400px; }
-article.large { height: 500px; }
+article.small { height: rem(300px); }
+article.medium { height: rem(400px); }
+article.large { height: rem(500px); }
 
 article.small, article.medium, article.large {
   display: flex;
@@ -536,7 +526,9 @@ article.horizontal:is(.small, .medium, .large) > .primary-action {
 
 // 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") {
+// A query container narrower than Compact does the same, so a horizontal
+// card in a narrow pane or sidebar stacks even on a wide window.
+@mixin _stacked-horizontal {
   article.horizontal,
   article.horizontal.small,
   article.horizontal.medium,
@@ -556,6 +548,9 @@ article.horizontal:is(.small, .medium, .large) > .primary-action {
   }
 }
 
+@include bp-down("medium") { @include _stacked-horizontal; }
+@container (width < 600px) { @include _stacked-horizontal; }
+
 // 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.
@@ -566,8 +561,8 @@ article.horizontal:is(.small, .medium, .large) > .primary-action {
 }
 
 article.card-reveal-initialized > aside {
-  --md-comp-card-reveal-duration: 500ms;
-  --md-comp-card-reveal-easing: cubic-bezier(0.2, 0, 0, 1);
+  --md-comp-card-reveal-duration: var(--md-sys-motion-duration-long2);
+  --md-comp-card-reveal-easing: var(--md-sys-motion-easing-standard);
 
   position: relative;
   inset: auto;
@@ -585,7 +580,7 @@ article.card-reveal-initialized > aside {
   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 150ms ease-out,
+    opacity var(--md-sys-motion-duration-short3) ease-out,
     visibility 0s var(--md-comp-card-reveal-duration);
 }
 
@@ -598,7 +593,7 @@ article.card-reveal-initialized > aside.open {
   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,
+    opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-duration-short2) ease-out,
     visibility 0s;
 }
 
@@ -639,16 +634,12 @@ article > aside > .reveal-actions > .reveal-action {
   min-height: 48px;
   padding-inline: 0;
   color: var(--md-sys-color-on-surface);
-  border-radius: 8px;
+  border-radius: var(--md-sys-shape-corner-small);
   @include typescale("body-medium");
 }
 
 article > aside > .reveal-actions > .reveal-action:hover {
-  background-color: color-mix(
-    in oklab,
-    var(--md-sys-color-on-surface) state-opacity("hover"),
-    transparent
-  );
+  background-color: state-layer(var(--md-sys-color-on-surface), "hover");
 }
 
 article > aside > .reveal-actions > .reveal-action > :is(.material-symbols, .card-icon, svg) {
@@ -663,7 +654,8 @@ article > aside > .reveal-actions > .reveal-action > :is(.material-symbols, .car
   :where(#{$_card}),
   :where(#{$_card})::after,
   article > figure > .card-reveal-trigger,
-  article.card-reveal-initialized > aside {
+  article.card-reveal-initialized > aside,
+  article.card-reveal-initialized > aside.open {
     transition: none;
   }
 }

package/src/sass/components/_carousel.scss

@@ -10,9 +10,6 @@
 //   .hero.center-aligned     one centered large item and two small previews
 //   .full-screen             vertical, edge-to-edge, mandatory snap
 //
-// `.flat` remains a full-width compatibility layout for swipeable tabs and
-// older integrations.
-//
 // Material measurements:
 //   inline padding      16dp (0 for full-screen)
 //   block padding        8dp (0 for full-screen)
@@ -25,26 +22,21 @@
   @return clamp(var(--md-comp-carousel-small-item-min-width), $share, var(--md-comp-carousel-small-item-max-width));
 }
 
+// The medium item takes what $n large items, one small item at $share and
+// the $n + 1 gaps of 8px leave of the track, held between 64px and 240px.
+@function _medium-item-width($n, $share) {
+  @return clamp(64px, calc(100% - #{$n} * var(--md-comp-carousel-large-item-width) - #{_small-item-width($share)} - #{($n + 1) * 8px}), 240px);
+}
+
 .carousel {
   --md-comp-carousel-height: 240px;
-  --md-comp-carousel-shape: 28px;
-  --md-comp-carousel-pressed-shape: 20px;
+  --md-comp-carousel-shape: var(--md-sys-shape-corner-extra-large);
+  --md-comp-carousel-pressed-shape: var(--md-sys-shape-corner-large-increased);
   --md-comp-carousel-gap: 8px;
   --md-comp-carousel-inline-padding: 16px;
   --md-comp-carousel-block-padding: 8px;
   --md-comp-carousel-large-item-width: clamp(150px, 52%, 480px);
-  --md-comp-carousel-medium-item-width: clamp(
-    64px,
-    calc(
-      100% - var(--md-comp-carousel-large-item-width) - clamp(
-          var(--md-comp-carousel-small-item-min-width),
-          12%,
-          var(--md-comp-carousel-small-item-max-width)
-        ) -
-        16px
-    ),
-    240px
-  );
+  --md-comp-carousel-medium-item-width: #{_medium-item-width(1, 12%)};
   --md-comp-carousel-small-item-min-width: 40px;
   --md-comp-carousel-small-item-max-width: 56px;
   --md-comp-carousel-uncontained-item-width: min(78%, 320px);
@@ -83,10 +75,6 @@
     overscroll-behavior-inline: contain;
     scrollbar-width: none;
 
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
     img,
     video {
       -webkit-user-drag: none;
@@ -105,9 +93,9 @@
     scroll-snap-align: start;
     scroll-snap-stop: always;
     transition:
-      flex-basis 300ms cubic-bezier(0.2, 0, 0, 1),
-      width 300ms cubic-bezier(0.2, 0, 0, 1),
-      border-radius 200ms cubic-bezier(0.2, 0, 0, 1);
+      flex-basis var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
+      width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
+      border-radius var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
 
     &[data-carousel-size="medium"] {
       flex-basis: var(--md-comp-carousel-medium-item-width);
@@ -137,7 +125,7 @@
       height: 100%;
       object-fit: cover;
       transform: translateX(var(--md-comp-carousel-item-parallax, 0px));
-      transition: transform 100ms linear;
+      transition: transform var(--md-sys-motion-duration-short2) linear;
     }
 
     > .carousel-item-content {
@@ -147,7 +135,7 @@
       width: fit-content;
       max-width: calc(100% - 24px);
       padding: 8px 12px;
-      border-radius: 12px;
+      border-radius: var(--md-sys-shape-corner-medium);
       background-color: var(--md-sys-color-surface);
       color: var(--md-sys-color-on-surface);
 
@@ -182,7 +170,7 @@
       background-color: var(--md-comp-carousel-state-layer-color);
       opacity: 0;
       pointer-events: none;
-      transition: opacity 200ms ease-out;
+      transition: opacity var(--md-sys-motion-duration-short4) ease-out;
     }
 
     &:not(article):hover::after {
@@ -220,39 +208,46 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 8px;
     list-style: none;
     position: absolute;
     inset: auto 0 0;
     z-index: 4;
     margin: 0;
-    padding: 8px 0;
+    padding: 0;
     border: 0;
     background: none;
 
+    // Each dot is a 24px button with the 8px dot painted in its content box,
+    // so the targets meet WCAG 2.5.8 without overlapping. They touch, which
+    // keeps the row the height it had and puts the dots 24px apart.
     .indicator-item {
       appearance: none;
       box-sizing: border-box;
       display: block;
-      width: 8px;
-      height: 8px;
+      width: 24px;
+      height: 24px;
       margin: 0;
-      padding: 0;
+      padding: 8px;
       border: 0;
       border-radius: 50%;
+      background-clip: content-box;
       background-color: color-mix(
         in oklab,
         var(--md-sys-color-on-surface) 45%,
         transparent
       );
       cursor: pointer;
-      transition: background-color 200ms ease-out;
+      transition: background-color var(--md-sys-motion-duration-short4) ease-out;
+
+      @include forced-colors-fill(GrayText);
 
       &:is(.active, [aria-current="true"]) {
         background-color: var(--md-sys-color-primary);
+        @include forced-colors-fill;
       }
 
-      @include focus-visible;
+      // Inset to ring the dot as it did, not the whole target.
+      @include focus-visible(-6px);
     }
   }
 
@@ -277,8 +272,8 @@
 
 // Contained layouts keep every visible item complete. These surface guards
 // reserve the 16dp edge padding so the following item cannot peek through it.
-.carousel:not(.uncontained, .full-screen, .flat)::before,
-.carousel:not(.uncontained, .full-screen, .flat)::after,
+.carousel:not(.uncontained, .full-screen)::before,
+.carousel:not(.uncontained, .full-screen)::after,
 .carousel.full-screen-horizontal::before,
 .carousel.full-screen-horizontal::after {
   content: "";
@@ -290,12 +285,12 @@
   pointer-events: none;
 }
 
-.carousel:not(.uncontained, .full-screen, .flat)::before,
+.carousel:not(.uncontained, .full-screen)::before,
 .carousel.full-screen-horizontal::before {
   inset-inline-start: 0;
 }
 
-.carousel:not(.uncontained, .full-screen, .flat)::after,
+.carousel:not(.uncontained, .full-screen)::after,
 .carousel.full-screen-horizontal::after {
   inset-inline-end: 0;
 }
@@ -304,22 +299,7 @@
 // medium width is solved from the container so every visible item is complete.
 .carousel.multi-wide {
   --md-comp-carousel-large-item-width: clamp(180px, 36%, 480px);
-  --md-comp-carousel-medium-item-width: min(
-    240px,
-    max(
-      64px,
-      calc(
-        100% - var(--md-comp-carousel-large-item-width) - var(
-            --md-comp-carousel-large-item-width
-          ) - clamp(
-            var(--md-comp-carousel-small-item-min-width),
-            8%,
-            var(--md-comp-carousel-small-item-max-width)
-          ) -
-          24px
-      )
-    )
-  );
+  --md-comp-carousel-medium-item-width: #{_medium-item-width(2, 8%)};
 
   .carousel-track > .carousel-item[data-carousel-size="small"] {
     flex-basis: _small-item-width(8%);
@@ -331,22 +311,7 @@
 // the medium item smaller than its large neighbours and the final item whole.
 .carousel.multi-large {
   --md-comp-carousel-large-item-width: clamp(180px, 27%, 480px);
-  --md-comp-carousel-medium-item-width: min(
-    240px,
-    max(
-      64px,
-      calc(
-        100% - var(--md-comp-carousel-large-item-width) - var(
-            --md-comp-carousel-large-item-width
-          ) - var(--md-comp-carousel-large-item-width) - clamp(
-            var(--md-comp-carousel-small-item-min-width),
-            6%,
-            var(--md-comp-carousel-small-item-max-width)
-          ) -
-          32px
-      )
-    )
-  );
+  --md-comp-carousel-medium-item-width: #{_medium-item-width(3, 6%)};
 
   .carousel-track > .carousel-item[data-carousel-size="small"] {
     flex-basis: _small-item-width(6%);
@@ -356,24 +321,7 @@
 
 .carousel.multi-extra-large {
   --md-comp-carousel-large-item-width: clamp(180px, 22%, 480px);
-  --md-comp-carousel-medium-item-width: min(
-    240px,
-    max(
-      64px,
-      calc(
-        100% - var(--md-comp-carousel-large-item-width) - var(
-            --md-comp-carousel-large-item-width
-          ) - var(--md-comp-carousel-large-item-width) - var(
-            --md-comp-carousel-large-item-width
-          ) - clamp(
-            var(--md-comp-carousel-small-item-min-width),
-            4%,
-            var(--md-comp-carousel-small-item-max-width)
-          ) -
-          40px
-      )
-    )
-  );
+  --md-comp-carousel-medium-item-width: #{_medium-item-width(4, 4%)};
 
   .carousel-track > .carousel-item[data-carousel-size="small"] {
     flex-basis: _small-item-width(4%);
@@ -478,7 +426,7 @@
   --md-comp-carousel-gap: 8px;
   --md-comp-carousel-inline-padding: 16px;
   --md-comp-carousel-block-padding: 8px;
-  --md-comp-carousel-shape: 28px;
+  --md-comp-carousel-shape: var(--md-sys-shape-corner-extra-large);
   // Fill the content box with one large item, one 8dp gap, and one 56dp
   // preview. Track padding sits outside the percentage basis.
   --md-comp-carousel-large-item-width: calc(100% - 64px);
@@ -542,30 +490,6 @@
   }
 }
 
-// Full-width compatibility mode for tabs and existing integrations.
-.carousel.flat {
-  --md-comp-carousel-gap: 0px;
-  --md-comp-carousel-inline-padding: 0px;
-  --md-comp-carousel-block-padding: 0px;
-  --md-comp-carousel-shape: 0px;
-
-  .carousel-track > .carousel-item {
-    flex: 0 0 100%;
-    width: 100%;
-    height: 100%;
-  }
-
-  .carousel-fixed-item {
-    position: absolute;
-    inset: auto 0 20px;
-    z-index: 4;
-
-    &.with-indicators {
-      bottom: 68px;
-    }
-  }
-}
-
 @include bp-up("medium") {
   .carousel {
     --md-comp-carousel-height: 320px;

package/src/sass/components/_cascader.scss

@@ -0,0 +1,131 @@
+@use "../abstracts" as *;
+
+// Cascader. A .field holding a text input, its label and a ul.cascader-options
+// of nested lists, one <li data-value> per option. The script builds the
+// columns from those lists in a .cascader-popover, so the lists never show.
+//
+// The popover is a manual [popover] opened with the input as its source, so
+// CSS anchor positioning places it below the field and flips it where it
+// would not fit. Each column is a listbox; the options on the open path are
+// aria-selected, and a branch ends in a chevron.
+//
+// Tokens:
+//   --md-comp-cascader-container-color           surface-container
+//   --md-comp-cascader-container-shape           large (16px)
+//   --md-comp-cascader-column-width              rem(176px), the minimum
+//   --md-comp-cascader-max-height                rem(320px)
+//   --md-comp-cascader-option-height             rem(44px)
+//   --md-comp-cascader-selected-container-color  secondary-container
+
+$_chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 18 8 16.6l4.6-4.6L8 7.4 9.4 6l6 6z'/%3E%3C/svg%3E");
+
+.cascader-options {
+  display: none;
+}
+
+// The form control wraps the input with display: contents, so the field's
+// `input + label` rules no longer reach the label. The label floats here
+// instead while the input is focused, open or holds a path.
+.field.cascader {
+  &:has(> expressive-cascader-control > input:is(:focus, [aria-expanded="true"], :not([placeholder=" "]), :not(:placeholder-shown))) > label {
+    transform: scale(calc(12 / 16));
+    top: rem(8px);
+  }
+
+  &:has(> expressive-cascader-control > input:is(:focus, [aria-expanded="true"])) > label {
+    color: var(--input-color);
+  }
+}
+
+.cascader-popover {
+  --md-comp-cascader-container-color: var(--md-sys-color-surface-container);
+  --md-comp-cascader-container-shape: var(--md-sys-shape-corner-large);
+  --md-comp-cascader-column-width: #{rem(176px)};
+  --md-comp-cascader-max-height: #{rem(320px)};
+  --md-comp-cascader-option-height: #{rem(44px)};
+  --md-comp-cascader-selected-container-color: var(--md-sys-color-secondary-container);
+
+  box-sizing: border-box;
+  max-width: calc(100vw - 16px);
+  max-height: min(var(--md-comp-cascader-max-height), calc(100vh - 16px));
+  inset: auto;
+  margin: 4px 0;
+  padding: 0;
+  overflow-x: auto;
+  border: 0;
+  border-radius: var(--md-comp-cascader-container-shape);
+  background-color: var(--md-comp-cascader-container-color);
+  color: var(--md-sys-color-on-surface);
+  @include z-depth("2");
+  @include glass(var(--md-comp-cascader-container-color));
+
+  position-area: block-end span-inline-end;
+  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+
+  &:popover-open {
+    display: flex;
+  }
+
+  // Forced colors drop the shadow, so the surface keeps an edge.
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+
+  > [role="listbox"] {
+    box-sizing: border-box;
+    flex: none;
+    min-width: var(--md-comp-cascader-column-width);
+    max-height: inherit;
+    margin: 0;
+    padding: 8px 0;
+    overflow-y: auto;
+    list-style: none;
+
+    + [role="listbox"] {
+      border-inline-start: 1px solid var(--md-sys-color-outline-variant);
+    }
+  }
+
+  [role="option"] {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    box-sizing: border-box;
+    min-height: var(--md-comp-cascader-option-height);
+    margin: 0 4px;
+    padding: 8px 12px 8px 16px;
+    border-radius: var(--md-sys-shape-corner-medium);
+    cursor: pointer;
+    @include typescale("label-large");
+
+    @include text-action('[aria-selected="true"]', var(--md-comp-cascader-selected-container-color));
+    // After the selected arm, so the ring beats its forced-colors outline.
+    @include focus-visible(-3px);
+  }
+
+  .cascader-chevron {
+    flex: none;
+    width: rem(20px);
+    height: rem(20px);
+    margin-inline-start: auto;
+    background-color: currentColor;
+    mask: $_chevron center / contain no-repeat;
+    @include forced-colors-fill;
+
+    &:dir(rtl) {
+      scale: -1 1;
+    }
+  }
+}
+
+// Without anchor positioning the browser ignores position-area, so the
+// popover is centered in the viewport, as a native popover is.
+@supports not (anchor-name: --a) {
+  .cascader-popover {
+    inset: 0;
+    width: fit-content;
+    height: fit-content;
+    margin: auto;
+  }
+}