@expressivecss/expressive 0.16.0 → 0.17.0

package/src/sass/abstracts/_variables.scss

@@ -20,6 +20,9 @@ $icon-label: "span:not(.material-symbols):not(.material-symbols-outlined):not(.m
 $trend-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 20V7.8l-5.6 5.6L4 12l8-8 8 8-1.4 1.4L13 7.8V20z'/%3E%3C/svg%3E") !default;
 // The drop-down chevron: a select's caret and a mega menu button's trailing icon.
 $caret-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !default;
+// The expand chevron: an accordion header's trailing icon, and a tree branch's
+// (turned to point at the end edge while closed).
+$expand-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.4 6 9.4 7.4 8l4.6 4.6L16.6 8 18 9.4z'/%3E%3C/svg%3E") !default;
 
 // Mist Iris is the default seed for the generated ramps. Primary, secondary,
 // tertiary and neutral colors derive from it; the error ramp stays fixed. It
@@ -155,6 +158,28 @@ $icon-button-sizes: (
   "xlarge": (height: 136px, icon: 40px, space: 48px, narrow: 32px, wide: 72px, square: 28px, pressed: 16px, outline: 3px),
 );
 
+// Toggle colors from md.comp.button.<style>.{unselected, selected}, keyed by
+// the pressed state, as (container, label) pairs. Toggle buttons and button
+// group items both read it. Text buttons do not toggle.
+$button-toggle-colors: (
+  "filled": (
+    false: (var(--md-sys-color-surface-container), var(--md-sys-color-on-surface-variant)),
+    true: (var(--md-sys-color-primary), var(--md-sys-color-on-primary)),
+  ),
+  "tonal": (
+    false: (var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container)),
+    true: (var(--md-sys-color-secondary), var(--md-sys-color-on-secondary)),
+  ),
+  "outlined": (
+    false: (transparent, var(--md-sys-color-on-surface-variant)),
+    true: (var(--md-sys-color-inverse-surface), var(--md-sys-color-inverse-on-surface)),
+  ),
+  "elevated": (
+    false: (var(--md-sys-color-surface-container-low), var(--md-sys-color-primary)),
+    true: (var(--md-sys-color-primary), var(--md-sys-color-on-primary)),
+  ),
+);
+
 // Material's fast-spatial spring (damping .9, stiffness 1400), sampled into a
 // CSS linear easing over a fixed window. Superseded by spring(0.9, 1400) and
 // the --md-sys-motion-spring-fast-spatial token, which button groups and the

package/src/sass/components/_accordion.scss

@@ -18,8 +18,6 @@
 //   --md-comp-accordion-header-height    56px
 //   --md-comp-accordion-padding          16px
 
-$_accordion-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.4 6 9.4 7.4 8l4.6 4.6L16.6 8 18 9.4z'/%3E%3C/svg%3E");
-
 .accordion {
   --md-comp-accordion-container-color: var(--md-sys-color-surface-container);
   --md-comp-accordion-shape: var(--md-sys-shape-corner-large-increased);
@@ -84,7 +82,7 @@ $_accordion-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/200
       height: 24px;
       margin-inline-start: auto;
       background-color: var(--md-sys-color-on-surface-variant);
-      mask: $_accordion-chevron center / 24px no-repeat;
+      mask: $expand-more center / 24px no-repeat;
       transition: transform var(--md-sys-motion-duration-short4) ease-out;
     }
 

package/src/sass/components/_aura.scss

@@ -105,6 +105,7 @@
   // solid ring.
   @media (forced-colors: active) {
     &.aura::before {
+      animation: none;
       forced-color-adjust: none;
       background: Highlight;
       mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);

package/src/sass/components/_back-to-top.scss

@@ -1,3 +1,5 @@
+@use "../abstracts" as *;
+
 // Back-to-top link. Pair it with the FAB classes, `button circle extra`, for
 // the look: this partial only places the link and hides it. `inert` is the
 // framework's. BackToTop sets it while the page is above the threshold, so
@@ -33,6 +35,4 @@
 }
 
 // A floating link would print over the content, as the FAB menu would.
-@media print {
-  .back-to-top { display: none !important; }
-}
+.back-to-top { @include print-hidden; }

package/src/sass/components/_bar-chart.scss

@@ -28,39 +28,12 @@
 //   --md-comp-bar-chart-on-color-1..4  on-primary, on-tertiary,
 //                                      on-secondary, surface; .values text
 
-@include chart("bar-chart");
+@include chart("bar-chart", $on-colors: true, $rows: true, $cursor: band);
 @include chart-axis("bar-chart", $beside: false);
 
 .bar-chart {
-  --md-comp-bar-chart-row-height: #{rem(40px)};
   --md-comp-bar-chart-bar-height: 60%;
-  --md-comp-bar-chart-shape: var(--md-sys-shape-corner-extra-small);
   --md-comp-bar-chart-track-color: var(--md-sys-color-surface-container-highest);
-  --md-comp-bar-chart-on-color-1: var(--md-sys-color-on-primary);
-  --md-comp-bar-chart-on-color-2: var(--md-sys-color-on-tertiary);
-  --md-comp-bar-chart-on-color-3: var(--md-sys-color-on-secondary);
-  --md-comp-bar-chart-on-color-4: var(--md-sys-color-surface);
-
-  // Labels beside the plot, up to 40% of the width; everything else spans
-  // both columns. Dense flow puts the labels in the plot's row.
-  // A stretched figure, as in a grid of cards, keeps its rows at their size.
-  display: grid;
-  grid-template-columns: fit-content(40%) minmax(0, 1fr);
-  grid-auto-flow: row dense;
-  align-content: start;
-  column-gap: 12px;
-
-  > * {
-    grid-column: 1 / -1;
-  }
-
-  > .bar-chart-plot {
-    grid-column: 2;
-  }
-
-  > .bar-chart-labels {
-    grid-column: 1;
-  }
 
   &.sparkline {
     --md-comp-bar-chart-row-height: #{rem(24px)};
@@ -74,21 +47,6 @@
   }
 }
 
-@for $i from 1 through 4 {
-  .bar-chart [data-series="#{$i}"] {
-    --bar-chart-on-color: var(--md-comp-bar-chart-on-color-#{$i});
-  }
-}
-
-// Grid lines run down the plot at each quarter of the value axis.
-.bar-chart-plot {
-  isolation: isolate;
-  height: calc(var(--rows, 1) * var(--md-comp-bar-chart-row-height));
-  border-block-end: 0;
-  border-right: 1px solid var(--md-comp-bar-chart-grid-color);
-  background: linear-gradient(to right, var(--md-comp-bar-chart-grid-color) 1px, transparent 0) 0 0 / 25% 100%;
-}
-
 // .axis labels the value axis under the plot, with a grid line up from
 // each label. The row labels keep the plot's height.
 .bar-chart.axis > :is(.bar-chart-plot, .bar-chart-labels) {
@@ -110,13 +68,6 @@
   translate: -50% 0;
 }
 
-.bar-chart-labels {
-  grid-auto-rows: minmax(0, 1fr);
-  grid-auto-flow: row;
-  align-items: center;
-  text-align: end;
-}
-
 // .values adds a copy of the bars for their text; both share the geometry.
 .bar-chart-layers {
   display: contents;
@@ -221,7 +172,7 @@
   > div > span {
     --bar-chart-text-color: var(--md-sys-color-on-surface);
 
-    overflow: hidden;
+    @include ellipsis;
     align-content: center;
     padding: 0 8px 0 calc(var(--bar-chart-left) + 8px);
     background: linear-gradient(to right, var(--bar-chart-text-color) var(--bar-chart-left), var(--bar-chart-on-color) 0 calc(100% - var(--bar-chart-right)), var(--bar-chart-text-color) 0);
@@ -231,8 +182,6 @@
     @include typescale("label-medium");
     font-variant-numeric: tabular-nums;
     text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   // The base on the right: a bar below zero, or above it in RTL.
@@ -259,33 +208,7 @@
   clip-path: inset(0 var(--bar-chart-right) 0 var(--bar-chart-left));
 }
 
-// A band behind the highlighted row's bars.
-.bar-chart-cursor {
-  z-index: -1;
-  inset-block: auto;
-  inset-inline: 0;
-  height: calc(100% / var(--rows, 1));
-  border-radius: var(--md-comp-bar-chart-shape);
-  background-color: state-layer(var(--md-sys-color-on-surface), "hover");
-  translate: 0 -50%;
-}
-
-// Below the highlighted row, or above it in the lower half.
-.bar-chart-tooltip {
-  left: 50%;
-  translate: -50% calc(var(--md-comp-bar-chart-row-height) / 2);
-
-  &.end {
-    translate: -50% calc(-100% - var(--md-comp-bar-chart-row-height) / 2);
-  }
-}
-
 @media (forced-colors: active) {
-  // The mixin clears the grid, but this partial's plot rule comes later.
-  .bar-chart-plot {
-    background: none;
-  }
-
   .bar-chart-bars > div > span,
   .bar-chart-values > div > span {
     forced-color-adjust: none;
@@ -295,10 +218,6 @@
     --bar-chart-text-color: CanvasText;
   }
 
-  .bar-chart-cursor {
-    outline: 1px solid CanvasText;
-  }
-
   // The track is a fill, which forced colors paint as Canvas.
   .bar-chart.track .bar-chart-bars > div {
     outline: 1px solid CanvasText;

package/src/sass/components/_bottom-sheet.scss

@@ -67,6 +67,13 @@ dialog.bottom-sheet {
   transition: translate var(--md-comp-bottom-sheet-motion-duration) var(--md-comp-bottom-sheet-motion);
   @include glass(var(--md-comp-bottom-sheet-container-color));
 
+  // Forced colors paint the fill as Canvas and drop the shadow, so the
+  // surface would blend into the page without an edge.
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+
   // Non-modal `show()` is not in the top layer — sit above page content
   // and below tooltips and snackbars (tokens/_stacking.scss).
   &:not(:modal) {

package/src/sass/components/_breadcrumb.scss

@@ -40,20 +40,14 @@ nav:has(> .breadcrumb),
     }
 
     scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
   }
 
   > ol {
     display: flex;
     flex-wrap: inherit;
     align-items: center;
-    list-style: none;
     min-width: 0;
-    margin: 0;
-    padding: 0;
+    @include list-reset;
 
     > li {
       display: inline-flex;

package/src/sass/components/_button-groups.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "sass:map";
 @use "../abstracts" as *;
 
@@ -166,44 +167,20 @@ $_connected-corners: (
     --_corner: var(--md-comp-button-group-item-shape-round);
   }
 
-  // Toggle-button colors come from md.comp.button.<style>.{unselected,selected}.
-  // Shape and the filled icon below provide two non-color selection cues.
-  > #{$_label-item}#{$_filled-item}[aria-pressed=false],
-  > .icon-button.filled[aria-pressed=false] {
-    @include _toggle-colors(var(--md-sys-color-surface-container), var(--md-sys-color-on-surface-variant));
-  }
-
-  > #{$_label-item}#{$_filled-item}[aria-pressed=true],
-  > .icon-button.filled[aria-pressed=true] {
-    @include _toggle-colors(var(--md-sys-color-primary), var(--md-sys-color-on-primary));
-  }
-
-  > #{$_label-item}.tonal[aria-pressed=false],
-  > .icon-button.tonal[aria-pressed=false] {
-    @include _toggle-colors(var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container));
-  }
-
-  > #{$_label-item}.tonal[aria-pressed=true],
-  > .icon-button.tonal[aria-pressed=true] {
-    @include _toggle-colors(var(--md-sys-color-secondary), var(--md-sys-color-on-secondary));
-  }
-
-  > #{$_label-item}.outlined[aria-pressed=false],
-  > .icon-button.outlined[aria-pressed=false] {
-    @include _toggle-colors(transparent, var(--md-sys-color-on-surface-variant));
-  }
-
-  > #{$_label-item}.outlined[aria-pressed=true],
-  > .icon-button.outlined[aria-pressed=true] {
-    @include _toggle-colors(var(--md-sys-color-inverse-surface), var(--md-sys-color-inverse-on-surface));
-  }
-
-  > #{$_label-item}.elevated[aria-pressed=false] {
-    @include _toggle-colors(var(--md-sys-color-surface-container-low), var(--md-sys-color-primary));
-  }
-
-  > #{$_label-item}.elevated[aria-pressed=true] {
-    @include _toggle-colors(var(--md-sys-color-primary), var(--md-sys-color-on-primary));
+  // Toggle-button colors, from `$button-toggle-colors`. Shape and the filled
+  // icon below provide two non-color selection cues. Icon buttons have no
+  // elevated style.
+  @each $style, $states in $button-toggle-colors {
+    @each $pressed, $colors in $states {
+      $label: ".#{$style}";
+      @if $style == "filled" { $label: $_filled-item; }
+      $icon-item: ", > .icon-button.#{$style}[aria-pressed=#{$pressed}]";
+      @if $style == "elevated" { $icon-item: ""; }
+
+      > #{$_label-item}#{$label}[aria-pressed=#{$pressed}]#{$icon-item} {
+        @include _toggle-colors(list.nth($colors, 1), list.nth($colors, 2));
+      }
+    }
   }
 
   > #{$_toggle-item}[aria-pressed]:hover {

package/src/sass/components/_buttons.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "sass:map";
 @use "../abstracts" as *;
 
@@ -71,10 +72,7 @@ $_btn: "button:not(#{$_not-btn}), a.button, label.button";
 
   > #{$icon} {
     flex: 0 0 auto;
-    font-size: var(--md-comp-filled-button-icon-size);
-    width: var(--md-comp-filled-button-icon-size);
-    height: var(--md-comp-filled-button-icon-size);
-    line-height: var(--md-comp-filled-button-icon-size);
+    @include icon-size(var(--md-comp-filled-button-icon-size));
     overflow: hidden;
   }
 
@@ -182,24 +180,10 @@ $_extend-sizes: (
   color: var(--md-comp-extended-fab-label-text-color);
   background-color: var(--md-comp-extended-fab-container-color);
   @include z-depth("3");
-
-  &:hover {
-    @include z-depth("4");
-    background-color: state-layer(var(--md-comp-extended-fab-label-text-color), "hover", var(--md-comp-extended-fab-container-color));
-  }
-
-  &:active,
-  &:focus {
-    background-color: state-layer(var(--md-comp-extended-fab-label-text-color), "focus", var(--md-comp-extended-fab-container-color));
-  }
-
-  @include focus-visible;
+  @include btn-states(var(--md-comp-extended-fab-label-text-color), var(--md-comp-extended-fab-container-color), "4");
 
   > #{$icon} {
-    font-size: var(--md-comp-extended-fab-icon-size);
-    width: var(--md-comp-extended-fab-icon-size);
-    height: var(--md-comp-extended-fab-icon-size);
-    line-height: var(--md-comp-extended-fab-icon-size);
+    @include icon-size(var(--md-comp-extended-fab-icon-size));
   }
 
   // The size axis. Every size sets the same six tokens and its type role -
@@ -262,26 +246,13 @@ $_extend-sizes: (
   appearance: none;
   vertical-align: middle;
   @include z-depth("3");
-  @include focus-visible;
+  @include btn-states(var(--md-sys-color-on-primary-container), var(--md-sys-color-primary-container), "4");
 
   > #{$icon} {
-    font-size: var(--md-comp-fab-icon-size);
-    width: var(--md-comp-fab-icon-size);
-    height: var(--md-comp-fab-icon-size);
-    line-height: var(--md-comp-fab-icon-size);
+    @include icon-size(var(--md-comp-fab-icon-size));
     color: inherit;
   }
 
-  &:hover {
-    @include z-depth("4");
-    background-color: state-layer(var(--md-sys-color-on-primary-container), "hover", var(--md-sys-color-primary-container));
-  }
-
-  &:active,
-  &:focus {
-    background-color: state-layer(var(--md-sys-color-on-primary-container), "focus", var(--md-sys-color-primary-container));
-  }
-
   // Medium FAB: 80dp container, 26dp icon. The corner continues the size
   // ladder - 16dp default, 20dp here (corner.large-increased).
   &.medium {
@@ -399,45 +370,24 @@ $_shaped: ":where(#{$_btn}):where(:not(#{$_fixed}))";
   border-radius: var(--md-comp-filled-button-pressed-container-shape);
 }
 
-// Toggle colours, from md.comp.button.<style>.{unselected, selected}. Text
-// buttons do not toggle. A disabled toggle takes the disabled colours below.
-@mixin _toggle($container, $state) {
-  --_toggle-container: #{$container};
-  --_toggle-state: #{$state};
-}
-
-#{$_shaped}[aria-pressed]:not(.tonal, .outlined, .elevated, .text) {
-  @include _toggle(var(--md-sys-color-surface-container), var(--md-sys-color-on-surface-variant));
-}
-
-#{$_shaped}[aria-pressed="true"]:not(.tonal, .outlined, .elevated, .text) {
-  @include _toggle(var(--md-sys-color-primary), var(--md-sys-color-on-primary));
-}
-
-#{$_shaped}.tonal[aria-pressed] {
-  @include _toggle(var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container));
-}
-
-#{$_shaped}.tonal[aria-pressed="true"] {
-  @include _toggle(var(--md-sys-color-secondary), var(--md-sys-color-on-secondary));
-}
-
-#{$_shaped}.outlined[aria-pressed] {
-  @include _toggle(transparent, var(--md-sys-color-on-surface-variant));
-}
-
-#{$_shaped}.outlined[aria-pressed="true"] {
-  @include _toggle(var(--md-sys-color-inverse-surface), var(--md-sys-color-inverse-on-surface));
-
-  border-color: transparent;
-}
-
-#{$_shaped}.elevated[aria-pressed] {
-  @include _toggle(var(--md-sys-color-surface-container-low), var(--md-sys-color-primary));
-}
-
-#{$_shaped}.elevated[aria-pressed="true"] {
-  @include _toggle(var(--md-sys-color-primary), var(--md-sys-color-on-primary));
+// Toggle colours, from `$button-toggle-colors`. Text buttons do not toggle. A
+// disabled toggle takes the disabled colours below.
+@each $style, $states in $button-toggle-colors {
+  @each $pressed, $colors in $states {
+    $attr: "[aria-pressed]";
+    @if $pressed { $attr: '[aria-pressed="true"]'; }
+    $toggle: ".#{$style}#{$attr}";
+    @if $style == "filled" { $toggle: "#{$attr}:not(.tonal, .outlined, .elevated, .text)"; }
+
+    #{$_shaped}#{$toggle} {
+      --_toggle-container: #{list.nth($colors, 1)};
+      --_toggle-state: #{list.nth($colors, 2)};
+
+      @if $style == "outlined" and $pressed {
+        border-color: transparent;
+      }
+    }
+  }
 }
 
 #{$_shaped}[aria-pressed]:not(.text, :disabled, [disabled], .disabled) {

package/src/sass/components/_calendar.scss

@@ -107,13 +107,11 @@ table.calendar {
     list-style: none;
 
     > li {
-      overflow: hidden;
+      @include ellipsis;
       padding: 2px 6px;
       border-radius: var(--md-sys-shape-corner-extra-small);
       background-color: var(--md-comp-calendar-event-container-color);
       color: var(--md-comp-calendar-event-color);
-      white-space: nowrap;
-      text-overflow: ellipsis;
       @include typescale("label-small");
 
       > a {

package/src/sass/components/_carousel.scss

@@ -75,10 +75,6 @@
     overscroll-behavior-inline: contain;
     scrollbar-width: none;
 
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
     img,
     video {
       -webkit-user-drag: none;
@@ -212,26 +208,29 @@
     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%,
@@ -247,7 +246,8 @@
         @include forced-colors-fill;
       }
 
-      @include focus-visible;
+      // Inset to ring the dot as it did, not the whole target.
+      @include focus-visible(-6px);
     }
   }
 

package/src/sass/components/_cascader.scss

@@ -99,20 +99,9 @@ $_chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' vie
     cursor: pointer;
     @include typescale("label-large");
 
-    &:hover {
-      background-color: state-layer(var(--md-sys-color-on-surface), "hover");
-    }
-
-    &[aria-selected="true"] {
-      background-color: var(--md-comp-cascader-selected-container-color);
-      color: var(--md-sys-color-on-secondary-container);
-      @include forced-colors-selected;
-    }
-
-    &:focus-visible {
-      outline: 3px solid var(--md-sys-color-secondary);
-      outline-offset: -3px;
-    }
+    @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 {

package/src/sass/components/_column-chart.scss

@@ -26,12 +26,11 @@
 //   --md-comp-column-chart-color-1..4     primary, tertiary, secondary,
 //                                         on-surface-variant
 
-@include chart("column-chart");
+@include chart("column-chart", $cursor: band);
 @include chart-axis("column-chart");
 
 .column-chart {
   --md-comp-column-chart-column-width: 60%;
-  --md-comp-column-chart-shape: var(--md-sys-shape-corner-extra-small);
   --md-comp-column-chart-track-color: var(--md-sys-color-surface-container-highest);
 }
 
@@ -111,28 +110,11 @@
   }
 }
 
-// A band behind the highlighted row's columns.
-.column-chart-plot {
-  isolation: isolate;
-}
-
-.column-chart-cursor {
-  z-index: -1;
-  width: calc(100% / var(--rows, 1));
-  border-radius: var(--md-comp-column-chart-shape);
-  background-color: state-layer(var(--md-sys-color-on-surface), "hover");
-  translate: -50% 0;
-}
-
 @media (forced-colors: active) {
   .column-chart-columns > div > span {
     forced-color-adjust: none;
   }
 
-  .column-chart-cursor {
-    outline: 1px solid CanvasText;
-  }
-
   // The track is a fill, which forced colors paint as Canvas.
   .column-chart.track .column-chart-columns > div {
     outline: 1px solid CanvasText;

package/src/sass/components/_confetti.scss

@@ -1,12 +1,11 @@
+@use "../abstracts" as *;
+
 // Confetti. A <canvas class="confetti"> covers its nearest positioned
 // ancestor and lets clicks through to what is under it. The Confetti script
 // draws on it. A burst over the whole viewport needs no markup; the script
 // styles its own canvas inline.
 
 canvas.confetti {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
+  @include fill-parent;
   pointer-events: none;
 }

package/src/sass/components/_data-table.scss

@@ -160,6 +160,12 @@
 
   td button[aria-expanded]:not([aria-haspopup]) > #{$icon} {
     transition: transform var(--md-sys-motion-duration-short4) ease-out;
+
+    // Its own reset: an author's motion duration override outlasts the
+    // layered token zeroing.
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   td button[aria-expanded="true"]:not([aria-haspopup]) > #{$icon} {
@@ -250,6 +256,10 @@
       @include trend-arrow;
       opacity: 0;
       transition: opacity var(--md-sys-motion-duration-short4) ease-out, transform var(--md-sys-motion-duration-short4) ease-out;
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     &:hover::after {