@expressivecss/expressive 0.16.0 → 0.17.0

package/src/sass/components/_pagination.scss

@@ -42,9 +42,7 @@
     flex-wrap: wrap;
     align-items: center;
     gap: var(--md-comp-pagination-gap);
-    list-style: none;
-    margin: 0;
-    padding: 0;
+    @include list-reset;
   }
 
   &.nowrap,
@@ -53,10 +51,6 @@
     min-width: 0;
     overflow-x: auto;
     scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
   }
 
   li {
@@ -104,10 +98,7 @@
     }
 
     > #{$icon} {
-      font-size: var(--md-comp-pagination-icon-size);
-      width: var(--md-comp-pagination-icon-size);
-      height: var(--md-comp-pagination-icon-size);
-      line-height: 1;
+      @include icon-size(var(--md-comp-pagination-icon-size), 1);
     }
   }
 
@@ -154,10 +145,8 @@
       flex-wrap: inherit;
       align-items: center;
       gap: var(--md-comp-pagination-gap);
-      list-style: none;
       min-width: 0;
-      margin: 0;
-      padding: 0;
+      @include list-reset;
     }
   }
 }

package/src/sass/components/_panes.scss

@@ -235,26 +235,13 @@
 
   // Header Bar (64dp height, Title Large, action icons)
   > :is(header, .pane-header) {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    flex: 0 0 auto;
-    box-sizing: border-box;
-    min-height: 64px;
-    margin: 0;
+    @include header-bar(12px);
     padding: 8px 16px;
-    background: none;
 
     > :is(h1, h2, h3, h4, h5, h6, .pane-title) {
-      flex: 1 1 auto;
-      min-width: 0;
-      margin: 0;
+      @include header-bar-headline;
       padding: 0;
-      color: var(--md-sys-color-on-surface);
-      @include typescale("title-large");
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      @include ellipsis;
     }
 
     // See _dialog: `:only-child` cannot see a text-node label, so `.button`

package/src/sass/components/_particles.scss

@@ -1,12 +1,11 @@
+@use "../abstracts" as *;
+
 // Particles. A <canvas class="particles"> covers its nearest positioned
 // ancestor and lets clicks through to what is under it. The Particles script
 // paints the dots in the canvas's `color`.
 
 canvas.particles {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
+  @include fill-parent;
   color: var(--md-sys-color-on-surface);
   pointer-events: none;
 }

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

@@ -30,23 +30,18 @@
 //   --md-comp-pie-chart-on-color-1..6  on-primary, on-tertiary, on-secondary,
 //                                      surface, surface, surface; .values text
 
-@include chart("pie-chart");
+@include chart(
+  "pie-chart",
+  $colors: 6,
+  $on-colors: true,
+  $round: true,
+  $tooltip: middle,
+  $legend-columns: 4
+);
 
 .pie-chart {
   --md-comp-pie-chart-hole: 0.6;
   --md-comp-pie-chart-gap: 1.5;
-  // The container roles alone are 1.3:1 on the surface in light mode and
-  // 2:1 in dark. Mixed 45% with on-surface, they keep their hue and reach
-  // 5:1 and 6.8:1, past the 3:1 a slice needs (WCAG 1.4.11), and surface
-  // text on them passes too.
-  --md-comp-pie-chart-color-5: color-mix(in oklab, var(--md-sys-color-primary-container) 45%, var(--md-sys-color-on-surface));
-  --md-comp-pie-chart-color-6: color-mix(in oklab, var(--md-sys-color-tertiary-container) 45%, var(--md-sys-color-on-surface));
-  --md-comp-pie-chart-on-color-1: var(--md-sys-color-on-primary);
-  --md-comp-pie-chart-on-color-2: var(--md-sys-color-on-tertiary);
-  --md-comp-pie-chart-on-color-3: var(--md-sys-color-on-secondary);
-  --md-comp-pie-chart-on-color-4: var(--md-sys-color-surface);
-  --md-comp-pie-chart-on-color-5: var(--md-sys-color-surface);
-  --md-comp-pie-chart-on-color-6: var(--md-sys-color-surface);
   // Where labels and the tooltip sit, as a share of the radius.
   --pie-chart-label-at: 0.62;
 
@@ -62,23 +57,6 @@
   }
 }
 
-@for $i from 1 through 6 {
-  .pie-chart [data-series="#{$i}"] {
-    --pie-chart-color: var(--md-comp-pie-chart-color-#{$i});
-    --pie-chart-on-color: var(--md-comp-pie-chart-on-color-#{$i});
-  }
-}
-
-.pie-chart-plot {
-  width: min(100%, var(--md-comp-pie-chart-height));
-  height: auto;
-  aspect-ratio: 1;
-  margin-inline: auto;
-  border: 0;
-  border-radius: 50%;
-  background: none;
-}
-
 .pie-chart-pie {
   position: absolute;
   inset: 0;
@@ -207,14 +185,6 @@
   }
 }
 
-.pie-chart-tooltip {
-  translate: 12px -50%;
-
-  &.end {
-    translate: calc(-100% - 12px) -50%;
-  }
-}
-
 .pie-chart-total {
   position: absolute;
   inset: 0;
@@ -244,38 +214,6 @@
   display: flex;
 }
 
-// One row per slice: swatch, name, cell and share in aligned columns.
-.pie-chart-legend {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto auto;
-  align-items: center;
-  gap: 8px;
-
-  > li {
-    display: contents;
-  }
-
-  > li > span:first-child {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  > li > span:not(:first-child) {
-    text-align: end;
-    font-variant-numeric: tabular-nums;
-  }
-
-  > li > span:nth-child(2) {
-    color: var(--md-sys-color-on-surface);
-    font-weight: 500;
-  }
-}
-
-.pie-chart.sparkline .pie-chart-plot {
-  margin-inline: 0;
-}
-
 @media (forced-colors: active) {
   .pie-chart-pie {
     forced-color-adjust: none;

package/src/sass/components/_progress.scss

@@ -62,6 +62,18 @@
   writing-mode: horizontal-tb;
 }
 
+// Two mirrored segments on a triple-width fill. Logical positioning shows
+// the first third in LTR and the last in RTL, including CSS direction overrides.
+// The middle third keeps the returning segments outside the visible track.
+@function _progress-segments($start, $end) {
+  $start: math.div($start, 3);
+  $end: math.div($end, 3);
+  @return polygon(
+    $start 0, $start 100%, $end 100%, $end 0,
+    (100% - $end) 0, (100% - $end) 100%, (100% - $start) 100%, (100% - $start) 0
+  );
+}
+
 progress.progress {
   vertical-align: baseline;
 
@@ -83,12 +95,12 @@ progress.progress {
   // Firefox draws no ::before/::after on <progress> and paints the track as the
   // element's own background, so its indeterminate bar is the native one. It
   // places that bar from the physical left and reads only margin-left, which is
-  // margin-inline-end in RTL, so both inline margins move. Keep this out of any
-  // -webkit- selector list: Chromium drops a list naming a pseudo-element it
-  // does not know.
+  // margin-inline-end in RTL. Offset the fixed fill to show its last third.
+  // Keep this out of any -webkit- selector list: Chromium drops a list naming
+  // a pseudo-element it does not know.
   &:indeterminate::-moz-progress-bar {
-    width: 40%;
-    margin-inline-end: 60%;
+    width: 300%;
+    margin-inline-end: -200%;
     animation: progress-indeterminate-moz 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   }
 }
@@ -135,8 +147,8 @@ progress.progress.wavy::-moz-progress-bar {
 }
 
 @keyframes progress-indeterminate-moz {
-  from { margin-inline-start: -40%; margin-inline-end: 100%; }
-  to   { margin-inline-start: 100%; margin-inline-end: -40%; }
+  from { clip-path: _progress-segments(-40%, 0%); }
+  to   { clip-path: _progress-segments(100%, 140%); }
 }
 
 .progress > .determinate {
@@ -166,7 +178,9 @@ $_bare: ".progress:not(:is(progress)):not(.circular):not(:has(> .determinate, >
   }
 
   &:not([style*="--md-comp-progress-value"])::after {
+    // Auto width prevents a transition from the oversized fill to a known value.
     width: auto;
+    inset-inline-end: -200%;
     animation: preloader-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   }
 }
@@ -187,6 +201,8 @@ progress.progress:indeterminate {
     position: absolute;
     inset-block: 0;
     inset-inline: 0 auto;
+    width: 300%;
+    clip-path: inset(50%);
     background-color: var(--md-comp-progress-indicator);
   }
 
@@ -201,15 +217,13 @@ progress.progress:indeterminate {
 }
 
 @keyframes preloader-indeterminate {
-  0%   { inset-inline-start: -35%; inset-inline-end: 100%; }
-  60%  { inset-inline-start: 100%; inset-inline-end: -90%; }
-  100% { inset-inline-start: 100%; inset-inline-end: -90%; }
+  0% { clip-path: _progress-segments(-35%, 0%); }
+  60%, 100% { clip-path: _progress-segments(100%, 190%); }
 }
 
 @keyframes preloader-indeterminate-short {
-  0%   { inset-inline-start: -200%; inset-inline-end: 100%; }
-  60%  { inset-inline-start: 107%; inset-inline-end: -8%; }
-  100% { inset-inline-start: 107%; inset-inline-end: -8%; }
+  0% { clip-path: _progress-segments(-200%, 0%); }
+  60%, 100% { clip-path: _progress-segments(107%, 108%); }
 }
 
 // ---------------------------------------------------------------------------
@@ -335,6 +349,7 @@ progress.progress:indeterminate {
   progress.progress:indeterminate::-moz-progress-bar {
     background-color: CanvasText;
     width: 40%;
+    margin-inline-end: 60%;
     animation: none;
   }
 
@@ -391,9 +406,12 @@ progress.progress:indeterminate {
   progress.progress:indeterminate::after,
   #{$_bare}:not([style*="--md-comp-progress-value"])::after {
     width: 40%;
+    clip-path: none;
   }
 
   progress.progress:indeterminate::-moz-progress-bar {
+    width: 40%;
+    margin-inline-end: 60%;
     animation: none;
   }
 }

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

@@ -28,7 +28,7 @@
 //   --md-comp-radar-chart-color-1..4    primary, tertiary, secondary,
 //                                       on-surface-variant
 
-@include chart("radar-chart");
+@include chart("radar-chart", $grid: false, $tooltip: middle, $cursor: line);
 @include chart-axis("radar-chart", $beside: false);
 
 .radar-chart {
@@ -58,9 +58,7 @@
       2 * var(--md-sys-typescale-body-small-line-height) + var(--radar-chart-label-offset)
     )
     auto;
-  border: 0;
   border-radius: 50%;
-  background: none;
 }
 
 // .axis rings the grid at round values and labels each ring up the top
@@ -144,9 +142,7 @@
 // Each label sits just past its spoke's tip and leans away from the middle:
 // right of a spoke on the right, above the top one, and so on.
 .radar-chart-axes {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  @include list-reset;
   color: var(--md-sys-color-on-surface-variant);
   @include typescale("body-small");
 
@@ -169,22 +165,9 @@
 // places the points on it by their share of its length from the rim.
 .radar-chart-cursor {
   inset: auto auto 50% 50%;
-  width: 1px;
   height: 50%;
-  background-color: var(--md-sys-color-outline);
   transform-origin: bottom;
   rotate: calc(var(--turn, 0) * 1turn);
-
-  > span {
-    position: absolute;
-    left: 0;
-    width: 10px;
-    height: 10px;
-    border: 2px solid var(--md-sys-color-surface);
-    border-radius: 50%;
-    background-color: var(--radar-chart-color);
-    translate: -50% -50%;
-  }
 }
 
 // Past the spoke's tip, on the side away from the middle.
@@ -193,11 +176,6 @@
 
   left: calc(50% + sin(var(--radar-chart-angle)) * 50%);
   top: calc(50% - cos(var(--radar-chart-angle)) * 50%);
-  translate: 12px -50%;
-
-  &.end {
-    translate: calc(-100% - 12px) -50%;
-  }
 }
 
 .radar-chart-legend {
@@ -222,12 +200,4 @@
   .radar-chart-axes {
     forced-color-adjust: auto;
   }
-
-  .radar-chart-cursor {
-    background-color: CanvasText;
-  }
-
-  .radar-chart-cursor > span {
-    forced-color-adjust: none;
-  }
 }

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

@@ -31,7 +31,7 @@
 //   --md-comp-radial-chart-color-1..4   primary, tertiary, secondary,
 //                                       on-surface-variant
 
-@include chart("radial-chart");
+@include chart("radial-chart", $round: true, $tooltip: middle, $legend-columns: 3);
 
 .radial-chart {
   --md-comp-radial-chart-thickness: 8;
@@ -41,16 +41,6 @@
   gap: 16px;
 }
 
-.radial-chart-plot {
-  width: min(100%, var(--md-comp-radial-chart-height));
-  height: auto;
-  aspect-ratio: 1;
-  margin-inline: auto;
-  border: 0;
-  border-radius: 50%;
-  background: none;
-}
-
 .radial-chart.gauge .radial-chart-plot {
   aspect-ratio: 2;
   border-radius: 50% 50% 0 0 / 100% 100% 0 0;
@@ -175,14 +165,12 @@
   top: var(--radial-chart-at, 50%);
   right: calc(50% + 4px);
   max-width: calc(50% - 8px);
-  overflow: hidden;
+  @include ellipsis;
   translate: 0 -50%;
   color: var(--md-sys-color-on-surface-variant);
   @include typescale("label-medium");
   font-size: min(var(--md-sys-typescale-label-medium-font-size), var(--radial-chart-step, 10) * 0.6cqw);
   line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 // A gauge's names hang under its base line, a row each with the innermost
@@ -206,14 +194,6 @@
   line-height: var(--md-sys-typescale-label-medium-line-height);
 }
 
-.radial-chart-tooltip {
-  translate: 12px -50%;
-
-  &.end {
-    translate: calc(-100% - 12px) -50%;
-  }
-}
-
 // The middle, inside the innermost ring; a gauge's sits on its base line.
 .radial-chart-total {
   position: absolute;
@@ -244,35 +224,9 @@
   justify-content: end;
 }
 
-// One row per ring: swatch, name and cell in aligned columns.
-.radial-chart-legend {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 8px;
-
-  > li {
-    display: contents;
-  }
-
-  > li > span:first-child {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  > li > span:last-child {
-    text-align: end;
-    color: var(--md-sys-color-on-surface);
-    font-weight: 500;
-    font-variant-numeric: tabular-nums;
-  }
-}
-
 .radial-chart.sparkline .radial-chart-plot {
   // A set width, so the chart keeps its size as a flex item.
   width: var(--md-comp-radial-chart-height);
-  margin-inline: 0;
 }
 
 @media (forced-colors: active) {

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

@@ -25,33 +25,16 @@
 //                                        and tertiary-container deepened
 //                                        toward on-surface, as the pie chart's
 
-@include chart("sankey-chart");
+// No grid lines or baseline: the nodes and links have no value axis.
+@include chart("sankey-chart", $colors: 6, $grid: false, $tooltip: middle);
 
 .sankey-chart {
   --md-comp-sankey-chart-link-opacity: 0.4;
-  --md-comp-sankey-chart-color-5: color-mix(in oklab, var(--md-sys-color-primary-container) 45%, var(--md-sys-color-on-surface));
-  --md-comp-sankey-chart-color-6: color-mix(in oklab, var(--md-sys-color-tertiary-container) 45%, var(--md-sys-color-on-surface));
 }
 
-// chart() sets colors 1 to 4.
-@for $i from 5 through 6 {
-  .sankey-chart [data-series="#{$i}"] {
-    --sankey-chart-color: var(--md-comp-sankey-chart-color-#{$i});
-  }
-}
-
-// No grid lines or baseline: the nodes and links have no value axis.
-.sankey-chart-plot {
-  border: 0;
-  background: none;
-
-  > svg {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    overflow: visible;
-  }
+.sankey-chart-plot > svg {
+  @include fill-parent;
+  overflow: visible;
 }
 
 .sankey-chart-node {
@@ -70,12 +53,6 @@
 
 // Level with the link's middle.
 .sankey-chart-tooltip {
-  translate: 12px -50%;
-
-  &.end {
-    translate: calc(-100% - 12px) -50%;
-  }
-
   // The value header names a column, not a node, so it has no swatch.
   > span.value::before {
     content: none;

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

@@ -32,7 +32,7 @@
   initial-value: 1;
 }
 
-@include chart("scatter-chart");
+@include chart("scatter-chart", $tooltip: middle);
 @include chart-axis("scatter-chart");
 
 .scatter-chart {
@@ -41,10 +41,7 @@
 }
 
 .scatter-chart-plot > svg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
+  @include fill-parent;
   overflow: visible;
 }
 
@@ -130,12 +127,6 @@
 }
 
 .scatter-chart-tooltip {
-  translate: 12px -50%;
-
-  &.end {
-    translate: calc(-100% - 12px) -50%;
-  }
-
   // The x header names the axis, not a series, so it has no swatch.
   > span.x::before {
     content: none;

package/src/sass/components/_search.scss

@@ -102,10 +102,7 @@ $_bar: ".search-bar";
 
   > #{$icon} {
     flex: 0 0 auto;
-    font-size: var(--md-comp-search-bar-icon-size);
-    width: var(--md-comp-search-bar-icon-size);
-    height: var(--md-comp-search-bar-icon-size);
-    line-height: var(--md-comp-search-bar-icon-size);
+    @include icon-size(var(--md-comp-search-bar-icon-size));
     color: var(--md-sys-color-on-surface);
   }
 

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

@@ -58,6 +58,13 @@ $_sheet: "dialog.side-sheet";
   transition: translate var(--md-comp-side-sheet-motion-duration) var(--md-comp-side-sheet-motion), border-radius var(--md-sys-motion-duration-short4) ease;
   @include glass(var(--md-comp-side-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;
+  }
+
   &:not(:modal) {
     z-index: var(--expressive-z-sheet);
     border-radius: 0;
@@ -98,17 +105,9 @@ $_sheet: "dialog.side-sheet";
   }
 
   > header {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    flex: 0 0 auto;
-    box-sizing: border-box;
-    min-height: 64px;
-    margin: 0;
+    @include header-bar(12px);
     padding-block: 8px;
     padding-inline: 24px 12px;
-    background: none;
-    box-shadow: none;
     // A horizontal touch drag here dismisses the sheet; the browser would
     // otherwise take it as a pan and cancel the pointer.
     touch-action: pan-y;
@@ -119,12 +118,8 @@ $_sheet: "dialog.side-sheet";
   }
 
   > header > :is(h1, h2, h3, h4, h5, h6) {
-    flex: 1 1 auto;
-    min-width: 0;
-    margin: 0;
+    @include header-bar-headline;
     padding: 0;
-    color: var(--md-sys-color-on-surface);
-    @include typescale("title-large");
   }
 
   > header > form {

package/src/sass/components/_skeleton.scss

@@ -27,20 +27,27 @@
   --md-comp-skeleton-circle-size: 40px;
 
   display: block;
+  position: relative;
+  overflow: clip;
   box-sizing: border-box;
   border-radius: var(--md-comp-skeleton-shape);
   background-color: var(--md-comp-skeleton-color);
-  background-image: linear-gradient(
-    90deg,
-    transparent 0%,
-    var(--md-comp-skeleton-shimmer-color) 50%,
-    transparent 100%
-  );
-  background-repeat: no-repeat;
-  background-size: 50% 100%;
-  animation: skeleton-shimmer 1.5s linear infinite;
+  // Transforming the gradient lets the compositor move it without repainting the fill.
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 50%;
+    background-image: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--md-comp-skeleton-shimmer-color) 50%,
+      transparent 100%
+    );
+    animation: skeleton-shimmer 1.5s linear infinite;
+  }
 
-  &:dir(rtl) {
+  &:dir(rtl)::before {
     animation-direction: reverse;
   }
 
@@ -63,9 +70,11 @@
     border-radius: 50%;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-    background-image: none;
+  @media (prefers-reduced-motion: reduce), (forced-colors: active) {
+    &::before {
+      animation: none;
+      background-image: none;
+    }
   }
 
   @media (forced-colors: active) {
@@ -74,6 +83,6 @@
 }
 
 @keyframes skeleton-shimmer {
-  from { background-position: -100% 0; }
-  to { background-position: 200% 0; }
+  from { transform: translateX(-100%); }
+  to { transform: translateX(200%); }
 }