@expressivecss/expressive 0.14.1 → 0.16.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
   );
 }
@@ -222,11 +222,7 @@ article > :is(h1, h2, h3, h4, h5, h6),
 article > :is(header, .primary-action) > :is(h1, h2, h3, h4, h5, h6) {
   margin: 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);
+  @include typescale("title-medium");
   color: var(--md-comp-card-headline-color);
 }
 
@@ -234,11 +230,7 @@ article > p,
 article > :is(header, .primary-action) > p {
   margin: 0;
   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);
+  @include typescale("body-medium");
   color: var(--md-comp-card-supporting-text-color);
 }
 
@@ -248,11 +240,7 @@ 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);
+  @include typescale("title-small");
   color: var(--md-comp-card-subhead-color);
 }
 
@@ -304,10 +292,7 @@ article > .primary-action > figure img {
   border-radius: var(--md-comp-card-media-shape);
 }
 
-article > #{$_media-figure} {
-  position: relative;
-}
-
+article > #{$_media-figure},
 article > .primary-action > #{$_media-figure} {
   position: relative;
 }
@@ -329,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
@@ -356,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;
@@ -434,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))
@@ -475,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) {
@@ -495,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;
@@ -551,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,
@@ -571,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.
@@ -581,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;
@@ -600,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);
 }
 
@@ -613,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;
 }
 
@@ -654,20 +634,12 @@ article > aside > .reveal-actions > .reveal-action {
   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);
+  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) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%),
-    transparent
-  );
+  background-color: state-layer(var(--md-sys-color-on-surface), "hover");
 }
 
 article > aside > .reveal-actions > .reveal-action > :is(.material-symbols, .card-icon, svg) {
@@ -682,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)
@@ -20,26 +17,26 @@
 //   item shape          28dp
 //   small item width 40–56dp
 
+// A small item's width: $share of the track, held between the min and max tokens.
+@function _small-item-width($share) {
+  @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);
@@ -100,9 +97,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);
@@ -110,16 +107,8 @@
     }
 
     &[data-carousel-size="small"] {
-      flex-basis: clamp(
-        var(--md-comp-carousel-small-item-min-width),
-        12%,
-        var(--md-comp-carousel-small-item-max-width)
-      );
-      width: clamp(
-        var(--md-comp-carousel-small-item-min-width),
-        12%,
-        var(--md-comp-carousel-small-item-max-width)
-      );
+      flex-basis: _small-item-width(12%);
+      width: _small-item-width(12%);
     }
 
     &[data-carousel-size="small"] > .carousel-item-content {
@@ -140,7 +129,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 {
@@ -150,7 +139,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);
 
@@ -185,7 +174,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 {
@@ -249,10 +238,13 @@
         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;
@@ -280,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: "";
@@ -293,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;
 }
@@ -307,34 +299,11 @@
 // 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: clamp(
-      var(--md-comp-carousel-small-item-min-width),
-      8%,
-      var(--md-comp-carousel-small-item-max-width)
-    );
-    width: clamp(
-      var(--md-comp-carousel-small-item-min-width),
-      8%,
-      var(--md-comp-carousel-small-item-max-width)
-    );
+    flex-basis: _small-item-width(8%);
+    width: _small-item-width(8%);
   }
 }
 
@@ -342,69 +311,21 @@
 // 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: clamp(
-      var(--md-comp-carousel-small-item-min-width),
-      6%,
-      var(--md-comp-carousel-small-item-max-width)
-    );
-    width: clamp(
-      var(--md-comp-carousel-small-item-min-width),
-      6%,
-      var(--md-comp-carousel-small-item-max-width)
-    );
+    flex-basis: _small-item-width(6%);
+    width: _small-item-width(6%);
   }
 }
 
 .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: clamp(
-      var(--md-comp-carousel-small-item-min-width),
-      4%,
-      var(--md-comp-carousel-small-item-max-width)
-    );
-    width: clamp(
-      var(--md-comp-carousel-small-item-min-width),
-      4%,
-      var(--md-comp-carousel-small-item-max-width)
-    );
+    flex-basis: _small-item-width(4%);
+    width: _small-item-width(4%);
   }
 }
 
@@ -445,11 +366,7 @@
   --md-comp-carousel-large-item-width: min(calc(100% - 96px), 720px);
 
   .carousel-track > .carousel-item[data-carousel-size="small"] {
-    flex-basis: clamp(
-      var(--md-comp-carousel-small-item-min-width),
-      12%,
-      var(--md-comp-carousel-small-item-max-width)
-    );
+    flex-basis: _small-item-width(12%);
   }
 
   &.center-aligned {
@@ -509,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);
@@ -534,16 +451,8 @@
     border-radius: var(--md-comp-carousel-shape);
 
     &[data-carousel-size="small"] {
-      flex-basis: clamp(
-        var(--md-comp-carousel-small-item-min-width),
-        12%,
-        var(--md-comp-carousel-small-item-max-width)
-      );
-      width: clamp(
-        var(--md-comp-carousel-small-item-min-width),
-        12%,
-        var(--md-comp-carousel-small-item-max-width)
-      );
+      flex-basis: _small-item-width(12%);
+      width: _small-item-width(12%);
     }
 
     > img,
@@ -581,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;