@expressivecss/expressive 0.16.0 → 0.17.0

package/src/sass/components/_dialog.scss

@@ -40,6 +40,13 @@ dialog {
   @include z-depth("3");
   @include glass(var(--md-comp-basic-dialog-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;
+  }
+
   &::backdrop {
     background-color: var(--md-comp-scrim-color);
     backdrop-filter: blur(var(--md-comp-basic-dialog-scrim-blur));
@@ -96,10 +103,7 @@ dialog > #{$icon}:first-child {
   flex: 0 0 auto;
   align-self: center;
   margin: 24px 24px 0;
-  font-size: rem(24px);
-  width: rem(24px);
-  height: rem(24px);
-  line-height: rem(24px);
+  @include icon-size(rem(24px));
   color: var(--md-sys-color-secondary);
 }
 
@@ -204,26 +208,14 @@ dialog.max {
   }
 
   > header {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    flex: 0 0 auto;
-    box-sizing: border-box;
-    min-height: 64px;
-    margin: 0;
+    @include header-bar(4px);
     padding: 8px 4px;
-    background: none;
-    box-shadow: none;
   }
 
   > header > :is(h1, h2, h3, h4, h5, h6) {
-    flex: 1 1 auto;
-    min-width: 0;
-    margin: 0;
+    @include header-bar-headline;
     padding: 0 12px;
     text-align: start;
-    color: var(--md-sys-color-on-surface);
-    @include typescale("title-large");
   }
 
   > header > form {

package/src/sass/components/_expanding-card.scss

@@ -166,11 +166,7 @@ dialog.expanding-card-dialog.expanded > .expanding-card-content {
 }
 
 .expanding-card-detail-header > :is(h1, h2, h3, h4, h5, h6) {
-  flex: 1 1 auto;
-  min-width: 0;
-  margin: 0;
-  color: var(--md-sys-color-on-surface);
-  @include typescale("title-large");
+  @include header-bar-headline;
 }
 
 .expanding-card-actions {

package/src/sass/components/_fab-menu.scss

@@ -78,9 +78,7 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
     flex-direction: column;
     align-items: flex-end;
     gap: var(--md-comp-fab-menu-menu-item-between-space);
-    margin: 0;
-    padding: 0;
-    list-style: none;
+    @include list-reset;
     width: max-content;
     max-inline-size: calc(100vw - 2 * var(--md-comp-fab-menu-offset));
     visibility: hidden;
@@ -129,10 +127,7 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
       @include focus-visible;
 
       > #{$icon} {
-        font-size: var(--md-comp-fab-menu-menu-item-icon-size);
-        width: var(--md-comp-fab-menu-menu-item-icon-size);
-        height: var(--md-comp-fab-menu-menu-item-icon-size);
-        line-height: var(--md-comp-fab-menu-menu-item-icon-size);
+        @include icon-size(var(--md-comp-fab-menu-menu-item-icon-size));
         color: inherit;
       }
 
@@ -239,8 +234,5 @@ $_fab-menu-roles: ("primary", "secondary", "tertiary");
   }
 }
 
-// A floating menu would print over the content. Important so a size or state rule that sets
-// `display` cannot bring it back; see base/_print.scss for the page itself.
-@media print {
-  .fab-menu { display: none !important; }
-}
+// A floating menu would print over the content.
+.fab-menu { @include print-hidden; }

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

@@ -18,46 +18,10 @@
 //   --md-comp-funnel-chart-shape         4px, the stage's corner radius
 //   --md-comp-funnel-chart-color-1       primary, every stage's color
 
-@include chart("funnel-chart");
+@include chart("funnel-chart", $grid: false, $rows: true, $cursor: band);
 
 .funnel-chart {
-  --md-comp-funnel-chart-row-height: #{rem(40px)};
   --md-comp-funnel-chart-stage-height: 60%;
-  --md-comp-funnel-chart-shape: var(--md-sys-shape-corner-extra-small);
-
-  // 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.
-  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;
-  }
-
-  > .funnel-chart-plot {
-    grid-column: 2;
-  }
-
-  > .funnel-chart-labels {
-    grid-column: 1;
-  }
-}
-
-.funnel-chart-plot {
-  isolation: isolate;
-  height: calc(var(--rows, 1) * var(--md-comp-funnel-chart-row-height));
-  border-block-end: 0;
-  background: none;
-}
-
-.funnel-chart-labels {
-  grid-auto-rows: minmax(0, 1fr);
-  grid-auto-flow: row;
-  align-items: center;
-  text-align: end;
 }
 
 .funnel-chart-stages {
@@ -92,33 +56,8 @@
   }
 }
 
-// A band behind the highlighted row's stage.
-.funnel-chart-cursor {
-  z-index: -1;
-  inset-block: auto;
-  inset-inline: 0;
-  height: calc(100% / var(--rows, 1));
-  border-radius: var(--md-comp-funnel-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.
-.funnel-chart-tooltip {
-  left: 50%;
-  translate: -50% calc(var(--md-comp-funnel-chart-row-height) / 2);
-
-  &.end {
-    translate: -50% calc(-100% - var(--md-comp-funnel-chart-row-height) / 2);
-  }
-}
-
 @media (forced-colors: active) {
   .funnel-chart-stages > div > span {
     forced-color-adjust: none;
   }
-
-  .funnel-chart-cursor {
-    outline: 1px solid CanvasText;
-  }
 }

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

@@ -28,7 +28,7 @@
 //   --md-comp-heatmap-chart-empty-color     surface-container-highest, the
 //                                           lowest, or the midpoint
 
-@include chart("heatmap-chart");
+@include chart("heatmap-chart", $grid: false);
 
 // A level's color: the color above 0, the low color below it, both mixed
 // into the empty color, so one formula serves both kinds of scale.
@@ -62,8 +62,6 @@
 
 .heatmap-chart-plot {
   height: auto;
-  border: 0;
-  background: none;
 }
 
 // The row labels, then the cells beside them. Row labels take up to 40% of
@@ -104,9 +102,7 @@
 
 .heatmap-chart-row,
 .heatmap-chart-column {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  @include ellipsis;
 }
 
 .heatmap-chart-row {

package/src/sass/components/_icon-buttons.scss

@@ -73,10 +73,7 @@
 
   > #{$icon} {
     flex: 0 0 auto;
-    font-size: var(--md-comp-icon-button-icon-size);
-    width: var(--md-comp-icon-button-icon-size);
-    height: var(--md-comp-icon-button-icon-size);
-    line-height: var(--md-comp-icon-button-icon-size);
+    @include icon-size(var(--md-comp-icon-button-icon-size));
     color: inherit;
     overflow: hidden;
   }

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

@@ -27,47 +27,14 @@
 //   --md-comp-line-chart-color-1..4   primary, tertiary, secondary,
 //                                     on-surface-variant
 
-@include chart("line-chart");
+@include chart("line-chart", $cursor: line, $lines: true);
 @include chart-axis("line-chart");
 
-.line-chart {
-  --md-comp-line-chart-line-width: 3px;
-
-  &.sparkline {
-    --md-comp-line-chart-line-width: 2px;
-  }
-}
-
 .line-chart-plot > svg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
+  @include fill-parent;
   overflow: visible;
 }
 
-.line-chart-line {
-  fill: none;
-  stroke: var(--line-chart-color);
-  stroke-width: var(--md-comp-line-chart-line-width);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  vector-effect: non-scaling-stroke;
-}
-
-.line-chart-series.dashed .line-chart-line {
-  stroke-dasharray: 2 8;
-}
-
-// Round caps on zero-length lines: dots that keep their size at any scale.
-.line-chart-points {
-  fill: none;
-  stroke: var(--line-chart-color);
-  stroke-width: calc(var(--md-comp-line-chart-line-width) * 3);
-  stroke-linecap: round;
-  vector-effect: non-scaling-stroke;
-}
-
 .line-chart-area {
   display: none;
 
@@ -76,41 +43,6 @@
   }
 }
 
-.line-chart-series stop {
-  stop-color: var(--line-chart-color);
-  stop-opacity: 0;
-
-  &:first-child {
-    stop-opacity: 0.24;
-  }
-}
-
 .line-chart.fade .line-chart-plot > svg {
   mask-image: linear-gradient(to right, transparent, #000 15% 85%, transparent);
 }
-
-.line-chart-cursor {
-  width: 1px;
-  background-color: var(--md-sys-color-outline);
-
-  > span {
-    position: absolute;
-    left: 0;
-    width: 10px;
-    height: 10px;
-    border: 2px solid var(--md-sys-color-surface);
-    border-radius: 50%;
-    background-color: var(--line-chart-color);
-    translate: -50% -50%;
-  }
-}
-
-@media (forced-colors: active) {
-  .line-chart-cursor {
-    background-color: CanvasText;
-  }
-
-  .line-chart-cursor > span {
-    forced-color-adjust: none;
-  }
-}

package/src/sass/components/_map.scss

@@ -192,6 +192,10 @@
   &.bottom-left { inset: auto auto var(--md-comp-map-control-offset) var(--md-comp-map-control-offset); }
   &.bottom-right { inset: auto var(--md-comp-map-control-offset) var(--md-comp-map-control-offset) auto; }
 
+  // .icon-button's display beats the UA [hidden] rule, and MapView hides
+  // the fullscreen button where fullscreen is unavailable.
+  [hidden] { display: none; }
+
   > .icon-button,
   > .map-control-group {
     border-radius: var(--md-sys-shape-corner-full);

package/src/sass/components/_marquee.scss

@@ -1,3 +1,5 @@
+@use "../abstracts" as *;
+
 // Marquee. A strip of logos, images or text that scrolls without end:
 // <div class="marquee"> holding two identical <ul class="marquee-content">
 // groups. The second is a copy that fills the gap as the first scrolls
@@ -61,9 +63,7 @@
   justify-content: space-around;
   gap: var(--md-comp-marquee-gap);
   min-width: 100%;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  @include list-reset;
   animation: marquee-x var(--md-comp-marquee-duration) linear infinite;
 
   // Its own box-sizing, not the reset's inherit, so each frame of the

package/src/sass/components/_mega-menu.scss

@@ -44,16 +44,7 @@
     cursor: pointer;
     @include typescale("label-large");
     @include focus-visible;
-
-    &:hover {
-      background-color: state-layer(var(--md-sys-color-on-surface), "hover");
-    }
-
-    &[aria-current="page"] {
-      background-color: var(--md-sys-color-secondary-container);
-      color: var(--md-sys-color-on-secondary-container);
-      @include forced-colors-selected;
-    }
+    @include text-action('[aria-current="page"]');
   }
 
   // A trailing chevron turns while the button's panel is open.
@@ -64,6 +55,11 @@
     background-color: currentColor;
     mask: $caret-down center / 18px no-repeat;
     transition: transform var(--md-sys-motion-duration-short3) ease-out;
+    @include forced-colors-fill;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   > button:has(+ .mega-menu-panel:popover-open)::after {
@@ -104,9 +100,7 @@
     }
 
     > ul {
-      margin: 0;
-      padding: 0;
-      list-style: none;
+      @include list-reset;
     }
 
     a {
@@ -118,10 +112,7 @@
       text-decoration: none;
       @include typescale("body-large");
       @include focus-visible;
-
-      &:hover {
-        background-color: state-layer(var(--md-sys-color-on-surface), "hover");
-      }
+      @include text-action;
 
       > small {
         display: block;

package/src/sass/components/_menu.scss

@@ -131,10 +131,15 @@ menu[id] li > menu,
   transition: border-radius var(--md-sys-motion-duration-short4) ease;
   @include glass(var(--md-comp-menu-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;
+  }
+
   > li > ul[role="group"] {
-    margin: 0;
-    padding: 0;
-    list-style: none;
+    @include list-reset;
   }
 
   #{$_rows} {
@@ -197,10 +202,7 @@ menu[id] li > menu,
     > button > #{$icon},
     > #{$icon} {
       flex: 0 0 var(--md-comp-menu-item-icon-size);
-      font-size: var(--md-comp-menu-item-icon-size);
-      width: var(--md-comp-menu-item-icon-size);
-      height: var(--md-comp-menu-item-icon-size);
-      line-height: var(--md-comp-menu-item-icon-size);
+      @include icon-size(var(--md-comp-menu-item-icon-size));
       color: var(--md-comp-menu-item-leading-icon-color);
     }
 
@@ -310,10 +312,7 @@ menu[id] li > menu,
       background-color: state-layer(var(--md-comp-menu-item-selected-label-text-color), "pressed", var(--md-comp-menu-item-selected-container-color));
     }
 
-    &:focus-visible {
-      outline: 3px solid var(--md-sys-color-secondary);
-      outline-offset: -3px;
-    }
+    @include focus-visible(-3px);
 
     &:is(.disabled, [aria-disabled="true"]) {
       pointer-events: none;

package/src/sass/components/_menubar.scss

@@ -38,22 +38,10 @@
     cursor: pointer;
     @include typescale("label-large");
     @include focus-visible;
-
-    &:hover {
-      background-color: state-layer(var(--md-sys-color-on-surface), "hover");
-    }
-
-    &[aria-expanded="true"] {
-      background-color: var(--md-sys-color-secondary-container);
-      color: var(--md-sys-color-on-secondary-container);
-    }
+    @include text-action('[aria-expanded="true"]');
   }
 
   @media (forced-colors: active) {
     border: 1px solid CanvasText;
-
-    > .menu-trigger[aria-expanded="true"] {
-      outline: 2px solid Highlight;
-    }
   }
 }

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

@@ -26,17 +26,12 @@
 //   --md-comp-mixed-chart-color-1..4     primary, tertiary, secondary,
 //                                        on-surface-variant
 
-@include chart("mixed-chart");
+@include chart("mixed-chart", $lines: true);
 @include chart-axis("mixed-chart");
 
 .mixed-chart {
   --md-comp-mixed-chart-column-width: 50%;
   --md-comp-mixed-chart-shape: var(--md-sys-shape-corner-extra-small);
-  --md-comp-mixed-chart-line-width: 3px;
-
-  &.sparkline {
-    --md-comp-mixed-chart-line-width: 2px;
-  }
 }
 
 .mixed-chart-plot {
@@ -105,41 +100,10 @@
   }
 }
 
-.mixed-chart-line {
-  fill: none;
-  stroke: var(--mixed-chart-color);
-  stroke-width: var(--md-comp-mixed-chart-line-width);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  vector-effect: non-scaling-stroke;
-}
-
-.mixed-chart-series.dashed .mixed-chart-line {
-  stroke-dasharray: 2 8;
-}
-
-// Round caps on zero-length lines: dots that keep their size at any scale.
-.mixed-chart-points {
-  fill: none;
-  stroke: var(--mixed-chart-color);
-  stroke-width: calc(var(--md-comp-mixed-chart-line-width) * 3);
-  stroke-linecap: round;
-  vector-effect: non-scaling-stroke;
-}
-
 .mixed-chart-series:not(.area) .mixed-chart-area {
   display: none;
 }
 
-.mixed-chart-series stop {
-  stop-color: var(--mixed-chart-color);
-  stop-opacity: 0;
-
-  &:first-child {
-    stop-opacity: 0.24;
-  }
-}
-
 // A band behind the highlighted row, with a point over each line. The
 // cursor makes no stacking context, so the band can go behind the marks
 // and the points in front of them.

package/src/sass/components/_navbar.scss

@@ -113,9 +113,7 @@ header:has(> #{$_bar}) {
     &:first-child {
       padding-inline-start: 12px;
     }
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    @include ellipsis;
     color: inherit;
   }
 
@@ -170,10 +168,7 @@ header:has(> #{$_bar}) {
 
     > #{$icon} {
       display: block;
-      font-size: var(--md-comp-top-app-bar-leading-icon-size);
-      width: var(--md-comp-top-app-bar-leading-icon-size);
-      height: var(--md-comp-top-app-bar-leading-icon-size);
-      line-height: var(--md-comp-top-app-bar-leading-icon-size);
+      @include icon-size(var(--md-comp-top-app-bar-leading-icon-size));
     }
 
     &:hover {
@@ -202,9 +197,7 @@ header:has(> #{$_bar}) {
     display: flex;
     align-items: stretch;
     align-self: stretch;
-    list-style: none;
-    margin: 0;
-    padding: 0;
+    @include list-reset;
 
     > li {
       display: flex;
@@ -242,6 +235,12 @@ header:has(> #{$_bar}) {
     min-width: 0;
     margin: 0;
 
+    // The input clears its own ring, so the form shows it, inset to stay
+    // inside the bar.
+    &:has(input:focus-visible) {
+      @include focus-ring(-3px);
+    }
+
     input {
       flex: 1 1 auto;
       min-width: 0;
@@ -441,9 +440,7 @@ header.large.collapsed:has(> #{$_bar}) > #{$_bar} {
   > #{$_title} {
     order: 0;
     flex: 1 1 auto;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis;
   }
 
   > #{$_title} + * {
@@ -456,9 +453,7 @@ header.large.collapsed:has(> #{$_bar}) > #{$_bar} {
     padding: 0;
     -webkit-line-clamp: unset;
     line-clamp: unset;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis;
     @include typescale("title-large");
   }
 

package/src/sass/components/_navigation-bar.scss

@@ -108,8 +108,5 @@
   }
 }
 
-// Navigation does nothing on paper. Important so a size or state rule that sets
-// `display` cannot bring it back; see base/_print.scss for the page itself.
-@media print {
-  .navigation-bar { display: none !important; }
-}
+// Navigation does nothing on paper.
+.navigation-bar { @include print-hidden; }

package/src/sass/components/_navigation-rail.scss

@@ -55,6 +55,23 @@
     background-color: var(--md-comp-scrim-color);
     z-index: -1;
   }
+
+  // The rail's z-index makes it the stacking context, which paints its own
+  // background under the -1 scrim, so the scrim would dim the rail too. This
+  // later layer repaints the surface over the scrim and under the content.
+  // Fixed, not absolute, so it stays put while the rail scrolls.
+  &::after {
+    content: "";
+    box-sizing: border-box;
+    position: fixed;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: inherit;
+    z-index: -1;
+    background: inherit;
+    border-radius: inherit;
+    pointer-events: none;
+  }
 }
 
 .navigation-rail {
@@ -311,16 +328,11 @@
     cursor: pointer;
     @include typescale("label-large");
     @include focus-visible;
-
-    &:hover:not([aria-current]) {
-      background-color: state-layer(var(--md-sys-color-on-surface), "hover");
-    }
-
-    &[aria-current] {
-      background-color: var(--md-comp-nav-rail-active-indicator-color);
-      color: var(--md-comp-nav-rail-active-color);
-      @include forced-colors-selected;
-    }
+    @include text-action(
+      "[aria-current]",
+      var(--md-comp-nav-rail-active-indicator-color),
+      var(--md-comp-nav-rail-active-color)
+    );
   }
 
   summary {
@@ -339,6 +351,7 @@
       background-color: currentColor;
       mask: $caret-down center / 18px no-repeat;
       transition: transform var(--md-sys-motion-duration-short3) ease-out;
+      @include forced-colors-fill;
     }
   }
 
@@ -368,8 +381,5 @@
   }
 }
 
-// Navigation does nothing on paper. Important so a size or state rule that sets
-// `display` cannot bring it back; see base/_print.scss for the page itself.
-@media print {
-  .navigation-rail { display: none !important; }
-}
+// Navigation does nothing on paper.
+.navigation-rail { @include print-hidden; }

package/src/sass/components/_page-footer.scss

@@ -51,9 +51,7 @@ $_footer: "footer:not(:has(> .navigation-bar:only-child))";
   }
 
   ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
+    @include list-reset;
   }
 }