@expressivecss/expressive 0.14.1 → 0.16.0

package/src/sass/components/_pagination.scss

@@ -84,17 +84,17 @@
     text-decoration: none;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    transition: background-color 0.2s ease-out;
+    transition: background-color var(--md-sys-motion-duration-short4) ease-out;
     @include focus-visible;
 
     &: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");
     }
 
     // The pressed layer is the only feedback a touch tap gets: hover never
     // fires there and the tap highlight is suppressed above.
     &:active {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("pressed"), transparent);
+      background-color: state-layer(var(--md-sys-color-on-surface), "pressed");
     }
 
     // "Does this control carry a text label?" - the icon is a <span>, so a
@@ -116,21 +116,14 @@
   li:has(> [aria-current="page"]) > :is(a, button) {
     background-color: var(--md-comp-pagination-selected-color);
     color: var(--md-comp-pagination-selected-on-color);
+    @include forced-colors-selected;
 
     &:hover {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-pagination-selected-on-color) state-opacity("hover"),
-        var(--md-comp-pagination-selected-color)
-      );
+      background-color: state-layer(var(--md-comp-pagination-selected-on-color), "hover", var(--md-comp-pagination-selected-color));
     }
 
     &:active {
-      background-color: color-mix(
-        in oklab,
-        var(--md-comp-pagination-selected-on-color) state-opacity("pressed"),
-        var(--md-comp-pagination-selected-color)
-      );
+      background-color: state-layer(var(--md-comp-pagination-selected-on-color), "pressed", var(--md-comp-pagination-selected-color));
     }
   }
 

package/src/sass/components/_panes.scss

@@ -150,6 +150,35 @@
   --_pane-wide-columns: var(--md-comp-pane-list-width) 1fr var(--md-comp-pane-supporting-width);
 }
 
+// ---------------------------------------------------------------------------
+// Resizable panes
+// ---------------------------------------------------------------------------
+// A <button class="drag-handle"> between the two panes of a list-detail or
+// supporting layout takes the spacer's place as its own column, and the
+// PaneResize behavior writes the list or supporting width token as it moves.
+// Below 840px only one pane shows, so the handle hides with the others.
+// Equal and three-pane layouts have no width token to move, so they keep
+// their own columns.
+:is(.panes, .pane-layout, .list-detail, .supporting-pane-layout):not(.equal, .three-pane):has(> button.drag-handle) {
+  --_pane-expanded-columns: var(--md-comp-pane-list-width) auto minmax(0, 1fr);
+  column-gap: 0;
+
+  > button.drag-handle {
+    display: var(--_pane-display);
+    align-self: center;
+    cursor: col-resize;
+    touch-action: none;
+  }
+}
+
+:is(.panes.supporting, .supporting-pane-layout):has(> button.drag-handle) {
+  --_pane-expanded-columns: minmax(0, 1fr) auto var(--md-comp-pane-supporting-width);
+
+  &:is(.start, .left) {
+    --_pane-expanded-columns: var(--md-comp-pane-supporting-width) auto minmax(0, 1fr);
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Separated / Floating Appearance
 // ---------------------------------------------------------------------------
@@ -157,7 +186,7 @@
 .panes.floating,
 .pane-layout.separated,
 .pane-layout.floating {
-  --md-comp-pane-container-shape: 16px;
+  --md-comp-pane-container-shape: var(--md-sys-shape-corner-large);
   --md-comp-pane-container-color: transparent;
   gap: var(--md-comp-pane-gap);
   padding: var(--md-comp-pane-gap);
@@ -169,7 +198,6 @@
     @include z-depth("0");
 
     &.elevated {
-      background-color: var(--md-sys-color-surface-container-low);
       @include z-depth("1");
     }
 
@@ -184,7 +212,7 @@
 // Coplanar / Docked Dividers (Default)
 // ---------------------------------------------------------------------------
 :is(.panes, .pane-layout, .list-detail, .supporting-pane-layout):not(.separated, .floating) {
-  > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):not(:last-child) {
+  > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):not(:last-child, :has(+ button.drag-handle)) {
     border-inline-end: var(--_pane-divider) solid var(--md-comp-pane-divider-color);
   }
 }
@@ -232,33 +260,7 @@
     // See _dialog: `:only-child` cannot see a text-node label, so `.button`
     // is the opt-out for an icon action that also carries one.
     > :is(button:not(.button, .icon-button), a.button):has(> #{$icon}:only-child) {
-      flex: 0 0 48px;
-      box-sizing: border-box;
-      width: 48px;
-      height: 48px;
-      min-width: 48px;
-      padding: 0;
-      border: none;
-      border-radius: 50%;
-      background-color: transparent;
-      color: var(--md-sys-color-on-surface-variant);
-      box-shadow: none;
-
-      > #{$icon} {
-        font-size: 24px;
-        width: 24px;
-        height: 24px;
-        line-height: 24px;
-      }
-
-      &:hover {
-        background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
-      }
-
-      &:focus-visible {
-        outline: 3px solid var(--md-sys-color-secondary);
-        outline-offset: 2px;
-      }
+      @include header-icon-action;
     }
   }
 
@@ -281,7 +283,7 @@
   }
 
   // Footer / Action Bar
-  > footer:not(:has(> nav:only-child)),
+  > footer:not(:has(> .navigation-bar:only-child)),
   > :is(footer, .pane-footer, nav:last-child) {
     display: flex;
     flex-wrap: wrap;

package/src/sass/components/_particles.scss

@@ -1,5 +1,3 @@
-@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`.

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

@@ -12,39 +12,50 @@
 // --turn PieChart sets, a fraction of a turn clockwise from the top.
 //
 // Modifiers: .donut cuts a hole and shows a <tfoot> total in it, .values
-// writes each slice's share on it, .sparkline is a small pie with no
-// legend or tooltip.
+// writes each slice's share on it, .labels writes each slice's name
+// outside it with a leader line, .sparkline is a small pie with no
+// legend, tooltip or names.
 //
 // Tokens:
 //   --md-comp-pie-chart-height       240px, the pie's diameter (sparkline 48px)
 //   --md-comp-pie-chart-hole         0.6, the donut hole's share of the diameter
+//   --md-comp-pie-chart-label-width  96px, the room each side of the pie for
+//                                    .labels, at most a quarter of the figure
 //   --md-comp-pie-chart-gap          1.5, the gap between slices in hundredths
 //                                    of the plot's width
 //   --md-comp-pie-chart-color-1..6   primary, tertiary, secondary,
-//                                    on-surface-variant, primary-container,
-//                                    tertiary-container
+//                                    on-surface-variant, then primary- and
+//                                    tertiary-container deepened toward
+//                                    on-surface
 //   --md-comp-pie-chart-on-color-1..6  on-primary, on-tertiary, on-secondary,
-//                                      surface, on-primary-container,
-//                                      on-tertiary-container; .values text
+//                                      surface, surface, surface; .values text
 
 @include chart("pie-chart");
 
 .pie-chart {
   --md-comp-pie-chart-hole: 0.6;
   --md-comp-pie-chart-gap: 1.5;
-  --md-comp-pie-chart-color-5: var(--md-sys-color-primary-container);
-  --md-comp-pie-chart-color-6: var(--md-sys-color-tertiary-container);
+  // 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-on-primary-container);
-  --md-comp-pie-chart-on-color-6: var(--md-sys-color-on-tertiary-container);
+  --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;
 
   gap: 16px;
 
+  &.labels {
+    --md-comp-pie-chart-label-width: #{rem(96px)};
+  }
+
   &.donut {
     // The middle of the ring.
     --pie-chart-label-at: calc((1 + var(--md-comp-pie-chart-hole)) / 2);
@@ -101,7 +112,7 @@
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), opacity 400ms cubic-bezier(0.2, 0, 0, 1);
+    transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), opacity var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
 
     @starting-style {
       opacity: 0;
@@ -127,6 +138,75 @@
   white-space: nowrap;
 }
 
+.pie-chart.labels:not(.sparkline) .pie-chart-plot {
+  // A narrow figure keeps at least half its width for the pie.
+  width: min(100% - 2 * min(var(--md-comp-pie-chart-label-width), 25%), var(--md-comp-pie-chart-height));
+  margin-block: 24px;
+}
+
+// One unit of the names' places is 1cqw, a hundredth of the pie, so the
+// leader lines can measure from it as well as the names.
+.pie-chart.labels .pie-chart-pie {
+  container-type: size;
+}
+
+// PieChart sets each name's --pie-chart-name-top, pushed apart from its
+// neighbours.
+.pie-chart-names > span {
+  // The middle of the name's near edge, 8px past the grown active slice.
+  --pie-chart-name-at: calc(50cqw + 8px);
+  --pie-chart-name-step: 1.25lh;
+  --pie-chart-angle: calc(var(--turn, 0) * 1turn);
+  // 1 for a name running rightwards, -1 for one running leftwards.
+  --pie-chart-side: 1;
+
+  position: absolute;
+  left: calc(50cqw + sin(var(--pie-chart-angle)) * var(--pie-chart-name-at));
+  top: var(--pie-chart-name-top, 50cqw);
+  translate: 0 -50%;
+  color: var(--md-sys-color-on-surface-variant);
+  @include typescale("label-medium");
+  white-space: nowrap;
+
+  &.end {
+    --pie-chart-side: -1;
+
+    translate: -100% -50%;
+  }
+
+  // No wider than the room beside the pie, which is at least half the pie's
+  // width when the plot rule above caps it at a quarter of the figure.
+  > span {
+    display: block;
+    max-width: calc(min(var(--md-comp-pie-chart-label-width), 50cqw) - 8px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // The leader line runs from 4px before the name to the slice's edge on its
+  // middle, so a name pushed up or down still points at its slice. The drop
+  // is how far the name sits below that edge; it adds the top because
+  // Chromium gets x - max(…) wrong when max() has one argument.
+  &::before {
+    --pie-chart-dx: calc(sin(var(--pie-chart-angle)) * (46cqw - var(--pie-chart-name-at)) + var(--pie-chart-side) * 4px);
+    --pie-chart-drop: calc(var(--pie-chart-name-top, 50cqw) + cos(var(--pie-chart-angle)) * 46cqw - 50cqw);
+
+    content: "";
+    position: absolute;
+    top: calc(50% - 0.5px);
+    left: -4px;
+    width: hypot(var(--pie-chart-dx), var(--pie-chart-drop));
+    height: 1px;
+    transform-origin: 0 50%;
+    rotate: calc(-1 * atan2(var(--pie-chart-drop), var(--pie-chart-dx)));
+    background: var(--md-sys-color-outline-variant);
+  }
+
+  &.end::before {
+    left: calc(100% + 4px);
+  }
+}
+
 .pie-chart-tooltip {
   translate: 12px -50%;
 

package/src/sass/components/_popover.scss

@@ -10,7 +10,8 @@
 // press, stays open while the user reads or acts, and can hold links and
 // buttons. A small one behind an info button is a toggletip.
 //
-// Placement (the panel flips to the other side when it would not fit):
+// Placement (the panel flips to the other side when it would not fit, and
+// is centered in the viewport where anchor positioning is missing):
 //   (default)  below, start edges aligned
 //   .top       above, start edges aligned
 //   .start     before the button, centered on it
@@ -25,7 +26,7 @@
 
 .popover {
   --md-comp-popover-container-color: var(--md-sys-color-surface-container);
-  --md-comp-popover-shape: 12px;
+  --md-comp-popover-shape: var(--md-sys-shape-corner-medium);
   --md-comp-popover-padding: 12px 16px;
   --md-comp-popover-max-width: 320px;
   --md-comp-popover-gap: 4px;
@@ -49,9 +50,9 @@
 
   opacity: 0;
   transition:
-    opacity 150ms ease-out,
-    display 150ms allow-discrete,
-    overlay 150ms allow-discrete;
+    opacity var(--md-sys-motion-duration-short3) ease-out,
+    display var(--md-sys-motion-duration-short3) allow-discrete,
+    overlay var(--md-sys-motion-duration-short3) allow-discrete;
   @include glass(var(--md-comp-popover-container-color));
 
   &:popover-open {
@@ -110,3 +111,15 @@
     border: 1px solid CanvasText;
   }
 }
+
+// Without anchor positioning the browser ignores position-area, and the
+// panel would sit in the viewport's top-left corner, far from its button.
+// Centered instead, as a native popover is, it stays in view. :is() matches
+// .start and .end too, which set their own margin.
+@supports not (anchor-name: --a) {
+  .popover:is(*, .start, .end) {
+    inset: 0;
+    height: fit-content;
+    margin: auto;
+  }
+}

package/src/sass/components/_progress.scss

@@ -1,31 +1,39 @@
+@use "sass:math";
 @use "../abstracts" as *;
 
 // Progress. Anatomy is the HTML:
 //   <progress class="progress" value="70" max="100">   determinate bar
 //   <progress class="progress">                        indeterminate bar
-//   <span class="preloader" role="status">             circular spinner
+//   <span class="progress circular" role="status">     circular spinner
 //
 // Linear aliases: .progress > .determinate / .indeterminate, and
 // --md-comp-progress-value on a bare div.progress.
 //
+// Linear modifiers, from M3 Expressive: .stop puts a dot in the indicator
+// colour at the track's end, so the end still reads where the track's own
+// contrast falls short; .wavy draws the indicator as a wave over a thin
+// track. A circular indicator takes .wavy too.
+//
 // Tokens:
 //   --md-comp-progress-track
 //   --md-comp-progress-indicator
 //   --md-comp-progress-thickness        4px
 //   --md-comp-progress-shape            4px
 //   --md-comp-progress-value            determinate fill (optional)
+//   --md-comp-progress-stop-size        4px, the .stop dot
+//   --md-comp-progress-wavelength       40px, the .wavy indicator's wavelength
 //   --md-comp-progress-circular-size    48px
 //   --md-comp-progress-circular-thickness  4px
 
 // M3 names this component "Progress indicators", linear and circular. The
-// class is `.progress`; `.preloader` is the older name for the circular
-// one and stays as an alias, as does `.progress.circular`.
-.progress,
-.preloader {
+// class is `.progress`, and `.progress.circular` is the circular one.
+.progress {
   --md-comp-progress-track: var(--md-sys-color-secondary-container);
   --md-comp-progress-indicator: var(--md-sys-color-primary);
   --md-comp-progress-thickness: 4px;
-  --md-comp-progress-shape: 4px;
+  --md-comp-progress-shape: var(--md-sys-shape-corner-extra-small);
+  --md-comp-progress-stop-size: 4px;
+  --md-comp-progress-wavelength: 40px;
   --md-comp-progress-circular-size: 48px;
   --md-comp-progress-circular-thickness: 4px;
 }
@@ -44,9 +52,10 @@
   overflow: hidden;
   border: 0;
   border-radius: var(--md-comp-progress-shape);
-  background-color: var(--md-comp-progress-track);
+  // The track, under the .stop dot when there is one. .wavy narrows the track
+  // to a stripe; the layers are custom properties so the two combine.
+  background: var(--_progress-stop, none), var(--_progress-track, var(--md-comp-progress-track));
   appearance: none;
-  -webkit-appearance: none;
 }
 
 .progress:not(.circular) {
@@ -57,7 +66,7 @@ progress.progress {
   vertical-align: baseline;
 
   &::-webkit-progress-bar {
-    background-color: var(--md-comp-progress-track);
+    background: var(--_progress-stop, none), var(--_progress-track, var(--md-comp-progress-track));
     border-radius: var(--md-comp-progress-shape);
   }
 
@@ -84,6 +93,47 @@ progress.progress {
   }
 }
 
+// The end stop, at the inline end of the track.
+.progress.stop:not(.circular) {
+  --_progress-stop-at: calc(100% - var(--md-comp-progress-thickness) / 2);
+  --_progress-stop: radial-gradient(
+    circle at var(--_progress-stop-at) 50%,
+    var(--md-comp-progress-indicator) calc(var(--md-comp-progress-stop-size) / 2),
+    transparent calc(var(--md-comp-progress-stop-size) / 2 + 0.5px)
+  ) no-repeat;
+
+  &:dir(rtl) {
+    --_progress-stop-at: calc(var(--md-comp-progress-thickness) / 2);
+  }
+}
+
+// The wavy indicator: a 4px wave, 3px either side of the track's middle,
+// drawn by masking the indicator with one wavelength repeated along it.
+$_wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cpath d='M0 7C6.67 3 13.33 3 20 7S33.33 11 40 7' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
+
+.progress.wavy:not(.circular) {
+  --_progress-track: linear-gradient(var(--md-comp-progress-track) 0 0) center / 100% var(--md-comp-progress-thickness) no-repeat;
+  --_progress-wave: #{$_wave} repeat-x 0 50% / var(--md-comp-progress-wavelength) 14px;
+
+  height: 14px;
+  border-radius: 0;
+}
+
+.progress.wavy:not(.circular) > .determinate,
+.progress.wavy:not(.circular) > .indeterminate::before,
+.progress.wavy:not(.circular) > .indeterminate::after,
+progress.progress.wavy::-webkit-progress-value,
+progress.progress.wavy:indeterminate::before,
+progress.progress.wavy:indeterminate::after {
+  mask: var(--_progress-wave);
+}
+
+// Firefox's own pseudo-element, kept out of the list above: Chromium drops a
+// list naming a pseudo-element it does not know.
+progress.progress.wavy::-moz-progress-bar {
+  mask: var(--_progress-wave);
+}
+
 @keyframes progress-indeterminate-moz {
   from { margin-inline-start: -40%; margin-inline-end: 100%; }
   to   { margin-inline-start: 100%; margin-inline-end: -40%; }
@@ -95,14 +145,16 @@ progress.progress {
   inset-inline: 0 auto;
   width: var(--md-comp-progress-value, 0%);
   background-color: var(--md-comp-progress-indicator);
-  transition: width 0.3s linear;
+  transition: width var(--md-sys-motion-duration-medium2) linear;
 }
 
 // Bare div.progress with a value token, no child. :not(.circular) because a
 // `<span class="progress circular">` is not a <progress>, has no determinate
 // child, and so matched this too - drawing a linear fill on top of the conic
 // circular indicator.
-.progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)) {
+$_bare: ".progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate))";
+
+#{$_bare} {
   &::after {
     content: "";
     position: absolute;
@@ -110,7 +162,7 @@ progress.progress {
     inset-inline: 0 auto;
     width: var(--md-comp-progress-value, 0%);
     background-color: var(--md-comp-progress-indicator);
-    transition: width 0.3s linear;
+    transition: width var(--md-sys-motion-duration-medium2) linear;
   }
 
   &:not([style*="--md-comp-progress-value"])::after {
@@ -119,6 +171,10 @@ progress.progress {
   }
 }
 
+#{$_bare}.wavy::after {
+  mask: var(--_progress-wave);
+}
+
 .progress > .indeterminate {
   background-color: transparent;
 }
@@ -160,9 +216,8 @@ progress.progress:indeterminate {
 // Circular — one element
 // ---------------------------------------------------------------------------
 
-// The circular indicator. `.progress.circular` is the M3-aligned name;
-// `.preloader` remains a compatibility alias.
-:is(.preloader, .progress.circular) {
+// The circular indicator.
+.progress.circular {
   box-sizing: border-box;
   display: inline-block;
   width: var(--md-comp-progress-circular-size);
@@ -178,11 +233,6 @@ progress.progress:indeterminate {
     transparent calc(100% - var(--md-comp-progress-circular-thickness)),
     #000 0
   );
-  -webkit-mask: radial-gradient(
-    farthest-side,
-    transparent calc(100% - var(--md-comp-progress-circular-thickness)),
-    #000 0
-  );
   animation: preloader-rotate 1.4s linear infinite;
   vertical-align: middle;
 
@@ -200,13 +250,66 @@ progress.progress:indeterminate {
   }
 }
 
+// Wavy circular: the indicator is a wave round the ring, 10 waves of 1.5
+// units in a 48-unit box, over a thin plain track. The element draws
+// nothing itself; ::before is the indicator and ::after the determinate
+// track, each masked to its own ring.
+@function _wave-ring($waves: 10, $amplitude: 1.5, $radius: 20, $steps: 80) {
+  $path: "";
+  @for $i from 0 through $steps {
+    $angle: math.div($i, $steps) * 2 * math.$pi;
+    $r: $radius + $amplitude * math.sin($waves * $angle);
+    $x: math.div(math.round((24 + $r * math.cos($angle)) * 10), 10);
+    $y: math.div(math.round((24 + $r * math.sin($angle)) * 10), 10);
+    $command: "L";
+    @if $i == 0 {
+      $command: "M";
+    }
+    $path: "#{$path}#{$command}#{$x} #{$y}";
+  }
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='#{$path}Z' fill='none' stroke='%23000' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.progress.circular.wavy {
+  position: relative;
+  // The pseudo-elements carry their own masks; a rounded clip as well
+  // leaves a hairline at the edge in WebKit.
+  overflow: visible;
+  background: none;
+  mask: none;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  &::before {
+    background: conic-gradient(var(--md-comp-progress-indicator) 0 90deg, transparent 0);
+    mask: _wave-ring() center / 100% 100% no-repeat;
+  }
+
+  &.determinate::before {
+    background: conic-gradient(var(--md-comp-progress-indicator) 0 var(--md-comp-progress-value, 0%), transparent 0);
+  }
+
+  // The track: a 2-unit ring through the middle of the wave, after the fill.
+  &.determinate::after {
+    background: conic-gradient(
+      transparent 0 var(--md-comp-progress-value, 0%),
+      color-mix(in oklab, var(--md-comp-progress-indicator) 20%, transparent) 0
+    );
+    mask: radial-gradient(farthest-side, transparent 79%, #000 79.5% 87%, transparent 87.5% 100%);
+  }
+}
+
 @keyframes preloader-rotate {
   to { transform: rotate(1turn); }
 }
 
 @media (forced-colors: active) {
-  .progress,
-  .preloader {
+  .progress {
     forced-color-adjust: none;
   }
 
@@ -219,7 +322,7 @@ progress.progress:indeterminate {
   .progress > .determinate,
   .progress > .indeterminate::before,
   .progress > .indeterminate::after,
-  .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate))::after,
+  #{$_bare}::after,
   progress.progress:indeterminate::before,
   progress.progress:indeterminate::after {
     background-color: CanvasText;
@@ -235,16 +338,40 @@ progress.progress:indeterminate {
     animation: none;
   }
 
-  :is(.preloader, .progress.circular) {
+  .progress.circular.wavy::before {
+    background: conic-gradient(CanvasText 0 90deg, transparent 0);
+  }
+
+  .progress.circular.wavy.determinate::before {
+    background: conic-gradient(CanvasText 0 var(--md-comp-progress-value, 0%), transparent 0);
+  }
+
+  .progress.circular.wavy.determinate::after {
+    background: conic-gradient(transparent 0 var(--md-comp-progress-value, 0%), GrayText 0);
+  }
+
+  .progress.circular {
     background: conic-gradient(CanvasText 0 90deg, transparent 90deg 360deg);
 
+    // The value fills the ring and the track is a 2px line through its
+    // middle, so the two differ in shape and not only in GrayText against
+    // CanvasText, which a theme can set close together.
     &.determinate {
-      background: conic-gradient(
-        CanvasText 0 var(--md-comp-progress-value, 0%),
-        GrayText var(--md-comp-progress-value, 0%)
-      );
+      background:
+        conic-gradient(CanvasText 0 var(--md-comp-progress-value, 0%), transparent 0),
+        radial-gradient(
+          farthest-side,
+          transparent calc(100% - var(--md-comp-progress-circular-thickness) / 2 - 1px),
+          GrayText 0 calc(100% - var(--md-comp-progress-circular-thickness) / 2 + 1px),
+          transparent 0
+        );
     }
   }
+
+  // A wavy ring draws on its pseudo-elements, so the element stays empty here too.
+  .progress.circular.wavy {
+    background: none;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -253,8 +380,8 @@ progress.progress:indeterminate {
   .progress::after,
   progress.progress:indeterminate::before,
   progress.progress:indeterminate::after,
-  .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"])::after,
-  :is(.preloader, .progress.circular) {
+  #{$_bare}:not([style*="--md-comp-progress-value"])::after,
+  .progress.circular {
     animation: none;
   }
 
@@ -262,14 +389,10 @@ progress.progress:indeterminate {
   .progress > .indeterminate::after,
   progress.progress:indeterminate::before,
   progress.progress:indeterminate::after,
-  .progress:not(:is(progress)):not(.circular):not(:has(> .determinate, > .indeterminate)):not([style*="--md-comp-progress-value"])::after {
+  #{$_bare}:not([style*="--md-comp-progress-value"])::after {
     width: 40%;
   }
 
-  .preloader {
-    transform: none;
-  }
-
   progress.progress:indeterminate::-moz-progress-bar {
     animation: none;
   }