material-inspired-component-library 8.1.1 → 9.0.0

package/components/progressindicator/index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright © 2025 Hermana AS
+// Copyright © 2026 Hermana AS
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
 // of this software and associated documentation files (the "Software"), to deal
@@ -19,207 +19,657 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations';
 @use '../../styles/motion';
 
-@include motion.duration('long2');
-@include motion.duration('extra-long4');
+$track-color: var(--md-comp-linear-progress-track-color, var(--md-sys-color-secondary-container));
+$active-color: var(--md-comp-linear-progress-active-indicator-color, var(--md-sys-color-primary));
+$stop-dot: radial-gradient(circle closest-side,
+    var(--md-comp-linear-progress-stop-color, var(--md-sys-color-primary)) calc(100% - 0.75px),
+    transparent);
 
-// Registered so determinate updates from the JS handler interpolate smoothly.
-// Never keyframe-animated.
-@property --md-comp-progress-fraction {
-    syntax: '<number>';
-    initial-value: 0;
-    inherits: true;
+@property --micl-progress-tail {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 0%;
+}
+@property --micl-progress-stop-color {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+@property --micl-progress-size {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 0%;
 }
+@property --micl-progress-space {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 4px;
+}
+@property --micl-progress-track-color {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+$carve-stops: "var(--micl-progress-track-color) calc(var(--micl-progress-tail) - var(--micl-progress-space)), transparent 0, transparent calc(var(--micl-progress-tail) + var(--micl-progress-size) + var(--micl-progress-space)), var(--micl-progress-track-color) 0";
 
-// Non-themed defaults. Declared on :root so they can be overridden on :root or
-// any parent element (consistent with the other MICL components). The colour
-// roles are resolved per the M3 progress-indicator spec at the point of use
-// (see $active/$track/$stop) because the theme palette is scoped to the
-// .light/.dark window class and is therefore NOT in scope at :root.
-:root {
-    --md-comp-progress-thickness: 4px;
-    --md-comp-progress-track-gap: 4px;
-    --md-comp-progress-stop-size: 4px;
-    --md-comp-progress-linear-width: 100%;
-    --md-comp-progress-wave-wavelength: 40px;
-    --md-comp-progress-wave-amplitude: 3px;
-    --md-comp-progress-indeterminate-duration: var(--md-sys-motion-duration-extra-long4);
-    --md-comp-progress-circular-size: 48px;
-    --md-comp-progress-amplitude-scale: 1;
-
-    // One wavelength of a sine ribbon, stroked at a constant width, used as a
-    // static mask so the active indicator takes a wavy shape. Painted once —
-    // no animation, no per-frame cost. The stroke is WHITE so it reveals
-    // correctly whether the browser treats the SVG mask as alpha (white =
-    // opaque) or luminance (white = 1).
-    --md-comp-progress-wave-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q10 -1 20 5 T40 5' fill='none' stroke='white' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
-}
-
-// M3 progress-indicator colour mapping. Resolved on the component element so
-// the system palette (scoped to the themed window ancestor) is in scope; a
-// consumer-supplied --md-comp-progress-*-color on any ancestor still wins.
-$active: var(--md-comp-progress-active-color, var(--md-sys-color-primary));
-$track:  var(--md-comp-progress-track-color, var(--md-sys-color-secondary-container));
-$stop:   var(--md-comp-progress-stop-color, var(--md-sys-color-primary));
-
-%progress-reset {
-    -webkit-appearance: none;
-            appearance: none;
-    border: none;
-    margin: 0;
-    background-color: transparent;
-    color: $active;
-    vertical-align: middle;
+@property --micl-progress-thickness {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 4px;
 }
+$det-dot: radial-gradient(circle closest-side,
+    var(--micl-progress-stop-color) calc(100% - 0.75px), transparent);
+$det-carve: "calc(var(--micl-progress-tail) + min(var(--micl-progress-tail), var(--micl-progress-space)))";
+$det-bar-end: "calc(var(--micl-progress-tail) - var(--micl-progress-thickness) / 2)";
+$det-bar-body: linear-gradient(to right,
+    var(--micl-progress-active-color) 0 #{$det-bar-end}, transparent 0);
+$det-bar-body-rtl: linear-gradient(to left,
+    var(--micl-progress-active-color) 0 #{$det-bar-end}, transparent 0);
+$det-bar-cap: radial-gradient(circle calc(var(--micl-progress-thickness) / 2) at #{$det-bar-end} 50%,
+    var(--micl-progress-active-color) calc(100% - 0.75px), transparent);
+$det-bar-cap-rtl: radial-gradient(circle calc(var(--micl-progress-thickness) / 2) at calc(100% - #{$det-bar-end}) 50%,
+    var(--micl-progress-active-color) calc(100% - 0.75px), transparent);
 
-// Static wavy active indicator. No animation: the mask is rasterised once and
-// never sampled again, so a screen full of determinate indicators costs
-// nothing per frame.
-@mixin wave {
-    background-color: $active;
-    -webkit-mask-image: var(--md-comp-progress-wave-image);
-            mask-image: var(--md-comp-progress-wave-image);
-    -webkit-mask-repeat: repeat-x;
-            mask-repeat: repeat-x;
-    -webkit-mask-position: 0 center;
-            mask-position: 0 center;
-    -webkit-mask-size: var(--md-comp-progress-wave-wavelength)
-        calc(var(--md-comp-progress-thickness) + 2 * var(--md-comp-progress-wave-amplitude) * var(--md-comp-progress-amplitude-scale, 1));
-            mask-size: var(--md-comp-progress-wave-wavelength)
-        calc(var(--md-comp-progress-thickness) + 2 * var(--md-comp-progress-wave-amplitude) * var(--md-comp-progress-amplitude-scale, 1));
+@property --micl-progress-sweep {
+    syntax: '<angle>';
+    inherits: false;
+    initial-value: 0deg;
+}
+@property --micl-progress-gap {
+    syntax: '<angle>';
+    inherits: false;
+    initial-value: 0deg;
+}
+@property --micl-progress-radius {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+}
+@property --micl-progress-active-color {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
 }
+$circ-track: var(--md-comp-circular-progress-track-color, var(--md-sys-color-secondary-container));
+$circ-active: var(--md-comp-circular-progress-active-indicator-color, var(--md-sys-color-primary));
+$circ-cap-active: radial-gradient(circle closest-side,
+    var(--micl-progress-active-color) calc(100% - 0.75px), transparent);
+$circ-cap-track: radial-gradient(circle closest-side,
+    var(--micl-progress-track-color) calc(100% - 0.75px), transparent);
+$circ-gap: "min(var(--micl-progress-sweep), var(--micl-progress-gap))";
 
-//
-// Linear progress indicator
-//
-progress.micl-progress-linear {
-    @extend %progress-reset;
+progress.micl-linear-progress {
+    --_track-thickness: var(--md-comp-linear-progress-track-thickness, 4px);
+    --_active-thickness: var(--md-comp-linear-progress-active-thickness, 4px);
+    --_gap-color: var(--_card-background-color, var(--md-sys-color-surface-container-low));
+    --_padding: calc((var(--_track-thickness) - var(--_active-thickness)) / 2);
+    --_space: var(--md-comp-linear-progress-track-active-space, 4px);
 
-    display: inline-block;
-    inline-size: var(--md-comp-progress-linear-width);
-    block-size: calc(var(--md-comp-progress-thickness) + 2 * var(--md-comp-progress-wave-amplitude));
-
-    // Track (remaining portion) + end stop indicator. Starts one track-gap
-    // after the active indicator, clipped to --thickness tall and centred.
-    @mixin track {
-        background-color: transparent;
-        background-image:
-            radial-gradient(circle, #{$stop} 0 50%, transparent 50%),
-            linear-gradient(90deg,
-                transparent 0 calc(var(--md-comp-progress-fraction, 0) * 100% + var(--md-comp-progress-track-gap)),
-                #{$track} calc(var(--md-comp-progress-fraction, 0) * 100% + var(--md-comp-progress-track-gap)) 100%);
+    appearance: none;
+    box-sizing: border-box;
+    block-size: max(var(--_track-thickness), var(--_active-thickness));
+    inline-size: 100%;
+    padding-block: max(var(--_padding), 0px);
+    border: none;
+    border-radius: calc(max(var(--_track-thickness), var(--_active-thickness)) / 2);
+    // the track is a vertically centered BAND so the active bar may be the
+    // thicker of the two; when the track is thicker (or equal) the band fills
+    // the box and renders exactly like a plain background fill
+    background-image: linear-gradient(#{$track-color}, #{$track-color});
+    background-position: 0 center;
+    background-size: 100% var(--_track-thickness);
+    background-repeat: no-repeat;
+    overflow: hidden;
+
+    &:not(:indeterminate) {
+        --_size: var(--md-comp-linear-progress-stop-size, 4px);
+        background-image: $stop-dot, linear-gradient(#{$track-color}, #{$track-color});
+        background-position: calc(100% - var(--md-comp-linear-progress-stop-trailing-space, 0px)) center, 0 center;
+        background-size: var(--_size) var(--_size), 100% var(--_track-thickness);
         background-repeat: no-repeat;
-        background-position: right center, left center;
-        background-size:
-            var(--md-comp-progress-stop-size) var(--md-comp-progress-stop-size),
-            100% var(--md-comp-progress-thickness);
-        border-radius: calc(var(--md-comp-progress-thickness) / 2);
+
+        &:dir(rtl) {
+            background-position-x: var(--md-comp-linear-progress-stop-trailing-space, 0px), 0;
+        }
+
+        &::-webkit-progress-value {
+            box-shadow: var(--_space) 0 0 0 var(--_gap-color), calc(-1 * var(--_space)) 0 0 0 var(--_gap-color);
+        }
+        &::-moz-progress-bar {
+            box-shadow: var(--_space) 0 0 0 var(--_gap-color), calc(-1 * var(--_space)) 0 0 0 var(--_gap-color);
+        }
+
+        @supports (inline-size: attr(value type(<number>))) {
+            --_fraction: min(calc(attr(value type(<number>), 0) / max(attr(max type(<number>), 1), 0.001)), 1);
+            --micl-progress-tail: calc(var(--_fraction) * 100%);
+            --micl-progress-space: var(--md-comp-linear-progress-track-active-space, 4px);
+            --micl-progress-thickness: var(--_active-thickness);
+            --micl-progress-track-color: #{$track-color};
+            --micl-progress-active-color: #{$active-color};
+            --micl-progress-stop-color: var(--md-comp-linear-progress-stop-color, var(--md-sys-color-primary));
+            transition: --micl-progress-tail motion.$md-sys-motion-duration-long2 linear;
+            background-color: transparent;
+            background-image: $det-dot, $det-bar-cap, $det-bar-body,
+                linear-gradient(to right, transparent #{$det-carve}, var(--micl-progress-track-color) #{$det-carve});
+            background-position: calc(100% - var(--md-comp-linear-progress-stop-trailing-space, 0px)) center,
+                left center, left center, 0 center;
+            background-size: var(--_size) var(--_size),
+                100% var(--micl-progress-thickness), 100% var(--micl-progress-thickness), 100% var(--_track-thickness);
+
+            &:dir(rtl) {
+                background-image: $det-dot, $det-bar-cap-rtl, $det-bar-body-rtl,
+                    linear-gradient(to left, transparent #{$det-carve}, var(--micl-progress-track-color) #{$det-carve});
+                background-position: var(--md-comp-linear-progress-stop-trailing-space, 0px) center,
+                    left center, left center, 0 center;
+            }
+            &::-webkit-progress-value {
+                box-shadow: none;
+                background: none;
+            }
+            &::-moz-progress-bar {
+                box-shadow: none;
+                background: none;
+            }
+        }
+    }
+    &::-webkit-progress-bar {
+        background: none;
+    }
+    &::-webkit-progress-value {
+        block-size: var(--_active-thickness) !important;
+        border-radius: calc(var(--_active-thickness) / 2);
+        background-color: $active-color;
+    }
+    &::-moz-progress-bar {
+        block-size: var(--_active-thickness) !important;
+        border-radius: calc(var(--_active-thickness) / 2);
+        background-color: $active-color;
+    }
+    &:indeterminate {
+        --micl-progress-space: var(--md-comp-linear-progress-track-active-space, 4px);
+        --micl-progress-track-color: #{$track-color};
+        background: linear-gradient(to right, #{$carve-stops}) 0 center / 100% var(--_track-thickness) no-repeat;
+        animation: indettrack 1750ms motion.$md-sys-motion-easing-emphasized-accelerate infinite;
+
+        &:dir(rtl) {
+            background-image: linear-gradient(to left, #{$carve-stops});
+        }
+    }
+    @supports selector(::-moz-progress-bar) {
+        &:indeterminate:dir(rtl) {
+            background-image: linear-gradient(to right, #{$carve-stops});
+            animation-name: indettrackrtl;
+        }
+    }
+    &:indeterminate::-webkit-progress-value {
+        animation: indet 1750ms motion.$md-sys-motion-easing-emphasized-accelerate infinite;
+    }
+    &:indeterminate::-moz-progress-bar {
+        animation: indet 1750ms motion.$md-sys-motion-easing-emphasized-accelerate infinite;
+    }
+    &:indeterminate:dir(rtl)::-moz-progress-bar {
+        animation-name: indetrtl;
+    }
+}
+@keyframes indet {
+    0% {
+        margin-inline-start: 0%;
+        inline-size: 0%;
+    }
+    14.3% { // the tail waits out the spec's 250ms delay before chasing the head
+        margin-inline-start: 0%;
+    }
+    100% {
+        margin-inline-start: 100%;
+        inline-size: 80%;
+    }
+}
+@keyframes indetrtl {
+    0% {
+        margin-inline-end: 100%;
+        inline-size: 0%;
+    }
+    14.3% {
+        margin-inline-end: 100%;
+    }
+    100% {
+        margin-inline-end: -80%;
+        inline-size: 80%;
+    }
+}
+@keyframes indettrack {
+    0% {
+        --micl-progress-tail: 0%;
+        --micl-progress-size: 0%;
+    }
+    14.3% {
+        --micl-progress-tail: 0%;
+    }
+    100% {
+        --micl-progress-tail: 100%;
+        --micl-progress-size: 80%;
+    }
+}
+@keyframes indettrackrtl {
+    0% {
+        --micl-progress-tail: 100%;
+        --micl-progress-size: 0%;
+    }
+    14.3% {
+        --micl-progress-tail: 100%;
+    }
+    100% {
+        --micl-progress-tail: -80%;
+        --micl-progress-size: 80%;
+    }
+}
+
+progress.micl-circular-progress {
+    --_size: var(--md-comp-circular-progress-size, 40px);
+    --_thickness: var(--md-comp-circular-progress-active-thickness, 4px);
+    --_space: var(--md-comp-circular-progress-track-active-space, 4px);
+    --micl-progress-radius: calc((var(--_size) - var(--_thickness)) / 2);
+    --micl-progress-gap: atan2(calc(var(--_space) + var(--_thickness)), var(--micl-progress-radius));
+    --micl-progress-active-color: #{$circ-active};
+    --micl-progress-track-color: #{$circ-track};
+
+    appearance: none;
+    box-sizing: border-box;
+    display: inline-block;
+    vertical-align: middle;
+    inline-size: var(--_size);
+    block-size: var(--_size);
+    border: none;
+    background-color: transparent;
+    background-image: $circ-cap-active, $circ-cap-active,
+        conic-gradient(
+            var(--micl-progress-active-color) 0 var(--micl-progress-sweep),
+            transparent 0 calc(var(--micl-progress-sweep) + #{$circ-gap}),
+            var(--micl-progress-track-color) 0 calc(360deg - #{$circ-gap}),
+            transparent 0),
+        $circ-cap-track, $circ-cap-track;
+    background-position: 50% calc(50% - var(--micl-progress-radius)),
+        calc(50% + var(--micl-progress-radius) * sin(var(--micl-progress-sweep)))
+            calc(50% - var(--micl-progress-radius) * cos(var(--micl-progress-sweep))),
+        0 0,
+        calc(50% + var(--micl-progress-radius) * sin(calc(var(--micl-progress-sweep) + #{$circ-gap})))
+            calc(50% - var(--micl-progress-radius) * cos(calc(var(--micl-progress-sweep) + #{$circ-gap}))),
+        calc(50% - var(--micl-progress-radius) * sin(#{$circ-gap}))
+            calc(50% - var(--micl-progress-radius) * cos(#{$circ-gap}));
+    background-size: var(--_thickness) var(--_thickness), var(--_thickness) var(--_thickness),
+        100% 100%, var(--_thickness) var(--_thickness), var(--_thickness) var(--_thickness);
+    background-repeat: no-repeat;
+    mask-image: radial-gradient(circle closest-side,
+        transparent calc(100% - var(--_thickness) - 0.5px),
+        #fff calc(100% - var(--_thickness) + 0.5px) calc(100% - 0.5px),
+        transparent);
+
+    @supports (clip-path: shape(from 0px 0px, arc to 1px 1px of 1px)) {
+        mask-image: none;
+        clip-path: shape(evenodd from 50% 0%,
+            arc to 50% 100% of calc(var(--_size) / 2),
+            arc to 50% 0% of calc(var(--_size) / 2),
+            move to 50% var(--_thickness),
+            arc to 50% calc(100% - var(--_thickness)) of calc(var(--_size) / 2 - var(--_thickness)),
+            arc to 50% var(--_thickness) of calc(var(--_size) / 2 - var(--_thickness)),
+            close);
     }
 
-    &::-webkit-progress-bar  { @include track; }
-    &::-webkit-progress-value { @include wave; }
-    &::-moz-progress-bar      { @include wave; }
+    &::-webkit-progress-bar {
+        background: none;
+    }
+    &::-webkit-progress-value {
+        background: none;
+    }
+    &::-moz-progress-bar {
+        background: none;
+    }
 
-    // Firefox renders the track on the element itself.
-    @-moz-document url-prefix() {
-        @include track;
+    @supports (inline-size: attr(value type(<number>))) {
+        &:not(:indeterminate) {
+            --micl-progress-sweep: calc(min(calc(attr(value type(<number>), 0) / max(attr(max type(<number>), 1), 0.001)), 1) * 360deg);
+            transition: --micl-progress-sweep motion.$md-sys-motion-duration-long2 motion.$md-sys-motion-easing-standard;
+        }
     }
 
-    // Indeterminate: a comet sweeping a transparent track. Only this transient
-    // state animates; the move is a single small repainted strip.
     &:indeterminate {
-        background-image:
-            linear-gradient(90deg, transparent, #{$active}, transparent),
-            linear-gradient(#{$track}, #{$track});
+        animation: circglobal 6000ms linear infinite,
+            circstep 6000ms linear infinite,
+            circsweep 6000ms infinite;
+    }
+}
+@keyframes circglobal {
+    to {
+        rotate: 1080deg;
+    }
+}
+@keyframes circstep {
+    0% {
+        transform: rotate(0deg);
+    }
+    5% { // 300ms
+        transform: rotate(90deg);
+    }
+    25% { // hold till 1500ms
+        transform: rotate(90deg);
+    }
+    30% { // 1800ms
+        transform: rotate(180deg);
+    }
+    50% { // hold till 3000ms
+        transform: rotate(180deg);
+    }
+    55% { // 3300ms
+        transform: rotate(270deg);
+    }
+    75% { // hold till 4500ms
+        transform: rotate(270deg);
+    }
+    80% { // 4800ms
+        transform: rotate(360deg);
+    }
+    100% { // hold till 6000ms - without this frame CSS fills in the underlying
+           // transform (0deg) and the last fifth of the cycle spins backwards
+        transform: rotate(360deg);
+    }
+}
+@keyframes circsweep {
+    0% { // the arc grows linearly...
+        --micl-progress-sweep: 36deg;
+        animation-timing-function: linear;
+    }
+    50% { // ...and shrinks with standard easing
+        --micl-progress-sweep: 313.2deg;
+        animation-timing-function: motion.$md-sys-motion-easing-standard;
+    }
+    100% {
+        --micl-progress-sweep: 36deg;
+    }
+}
+
+@property --micl-progress-amplitude {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0;
+}
+@property --micl-progress-fraction {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0;
+}
+@property --micl-progress-cap {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+}
+@property --micl-progress-crawl {
+    syntax: '<angle>';
+    inherits: false;
+    initial-value: 0deg;
+}
+
+.micl-linear-progress:not(progress) {
+    --_wavelength: var(--md-comp-linear-progress-active-wave-wavelength, 40px);
+    --_wave-gap: var(--md-comp-linear-progress-track-active-space, 4px);
+    --_max-amplitude: var(--md-comp-linear-progress-active-wave-amplitude, 3px);
+    --_track-thickness: var(--md-comp-linear-progress-track-thickness, 4px);
+    --_active-thickness: var(--md-comp-linear-progress-active-thickness, 4px);
+    --_fraction: min(calc(attr(aria-valuenow type(<number>), 0) / max(attr(aria-valuemax type(<number>), 1), 0.001)), 1);
+    --micl-progress-fraction: var(--_fraction);
+    --micl-progress-amplitude: clamp(0, min(calc(var(--micl-progress-fraction) / 0.1), calc((1 - var(--micl-progress-fraction)) / 0.05)), 1);
+    transition: --micl-progress-fraction motion.$md-sys-motion-duration-long2 linear;
+
+    --_wave-image: var(--md-comp-linear-progress-wave-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 6.283 60' preserveAspectRatio='none'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='4' stroke-linecap='round' fill='none' stroke='black' d='M0,0 C.512,.512 1.002,1 1.571,1 S2.629,.512 3.142,0 S4.144,-1 4.712,-1 S5.771,-.512 6.283,0'/%3E%3C/svg%3E"));
+    --_amplitude: calc(var(--micl-progress-amplitude) * var(--_max-amplitude));
+    --_wave-mask-size: var(--_wavelength) max(calc(var(--_active-thickness) + 1px), calc(var(--_amplitude) * 60));
+
+    position: relative;
+    inline-size: 100%;
+    block-size: max(var(--_track-thickness), calc(2 * var(--_max-amplitude) + var(--_active-thickness)));
+    overflow: clip;
+
+    $wave-carve: "calc(var(--micl-progress-fraction) * 100% + min(var(--micl-progress-fraction) * 100%, var(--_wave-gap)))";
+
+    &::before {
+        --_stop-size: var(--md-comp-linear-progress-stop-size, 4px);
+
+        content: "";
+        position: absolute;
+        inset: 0;
+        inline-size: 100%;
+        block-size: var(--_track-thickness);
+        inset-block-start: calc(50% - (var(--_track-thickness) / 2));
+        border-radius: calc(var(--_track-thickness) / 2);
+        background-image: $stop-dot,
+            linear-gradient(to right, transparent #{$wave-carve}, $track-color 0);
+        background-position: calc(100% - var(--md-comp-linear-progress-stop-trailing-space, 0px)) center, 0 0;
+        background-size: var(--_stop-size) var(--_stop-size), 100% 100%;
         background-repeat: no-repeat;
-        background-position: -40% center, left center;
-        background-size: 40% var(--md-comp-progress-thickness), 100% var(--md-comp-progress-thickness);
-        border-radius: calc(var(--md-comp-progress-thickness) / 2);
-        animation: micl-progress-linear-indeterminate var(--md-comp-progress-indeterminate-duration) var(--md-sys-motion-easing-standard, ease-in-out) infinite;
+    }
+    .micl-linear-progress__wave {
+        inline-size: calc(var(--micl-progress-fraction) * 100%);
+        block-size: 100%;
+        background-color: $active-color;
+        border-radius: calc(var(--_max-amplitude) + var(--_active-thickness) / 2);
+        mask-image: var(--_wave-image);
+        mask-repeat: repeat-x;
+        mask-size: var(--_wave-mask-size);
+        mask-position: left center;
+
+        @container style(--micl-progress-amplitude: 0) {
+            position: relative;
+            inset-block-start: calc(50% - var(--_active-thickness) / 2);
+            block-size: var(--_active-thickness);
+            border-radius: calc(var(--_active-thickness) / 2);
+            mask-image: none;
+        }
+    }
+    &:dir(rtl) {
+        &::before {
+            background-image: $stop-dot,
+                linear-gradient(to left, transparent #{$wave-carve}, $track-color 0);
+            background-position: var(--md-comp-linear-progress-stop-trailing-space, 0px) center, 0 0;
+        }
+        .micl-linear-progress__wave {
+            mask-position: right center;
+        }
+    }
+    &.micl-linear-progress--indeterminate {
+        --_wavelength: var(--md-comp-linear-progress-indeterminate-active-wave-wavelength, 20px);
+        --_fraction: 1;
+        --micl-progress-amplitude: 1;
+
+        $comet-head: "min(var(--micl-progress-tail) + var(--micl-progress-size), 100%)";
 
-        &::-webkit-progress-bar,
-        &::-webkit-progress-value { background: transparent; }
-        &::-moz-progress-bar      { background: transparent; }
+        &::before {
+            --micl-progress-space: var(--md-comp-linear-progress-track-active-space, 4px);
+            --micl-progress-track-color: #{$track-color};
+
+            background: linear-gradient(to right, #{$carve-stops});
+            animation: indettrack 1750ms motion.$md-sys-motion-easing-emphasized-accelerate infinite;
+        }
+        .micl-linear-progress__wave {
+            --micl-progress-cap: calc(var(--_max-amplitude) + var(--_active-thickness) / 2);
+
+            background: none;
+            mask-image: none;
+            clip-path: inset(0 calc(100% - #{$comet-head}) 0 var(--micl-progress-tail) round var(--micl-progress-cap));
+            animation: indettrack 1750ms motion.$md-sys-motion-easing-emphasized-accelerate infinite;
+
+            &::before {
+                content: "";
+                position: absolute;
+                inset-block: 0;
+                inset-inline-start: 0;
+                inline-size: calc(100% + var(--_wavelength));
+                background-color: $active-color;
+                mask-image: var(--_wave-image);
+                mask-repeat: repeat-x;
+                mask-size: var(--_wave-mask-size);
+                mask-position: left center;
+                animation: crawl-wave 1000ms linear infinite;
+
+                @media (prefers-reduced-motion: reduce) {
+                    animation-play-state: paused;
+                }
+            }
+        }
+        &:dir(rtl) {
+            &::before {
+                background-image: linear-gradient(to left, #{$carve-stops});
+            }
+            .micl-linear-progress__wave {
+                clip-path: inset(0 var(--micl-progress-tail) 0 calc(100% - #{$comet-head}) round var(--micl-progress-cap));
+
+                &::before {
+                    mask-position: right center;
+                    animation-name: crawl-wave-rtl;
+                }
+            }
+        }
     }
 }
 
-@keyframes micl-progress-linear-indeterminate {
-    0%   { background-position: -40% center, left center; }
-    100% { background-position: 140% center, left center; }
+@keyframes crawl-wave {
+    to { translate: calc(-1 * var(--_wavelength)) 0; }
+}
+@keyframes crawl-wave-rtl {
+    to { translate: var(--_wavelength) 0; }
 }
 
-//
-// Circular progress indicator
-//
-// Determinate: a static conic-gradient ring punched by a radial mask (white =
-// kept under both alpha and luminance masking). It is painted once and never
-// animated, so it costs nothing per frame.
-//
-progress.micl-progress-circular {
-    @extend %progress-reset;
+.micl-circular-progress:not(progress) {
+    $wave-ring: var(--md-comp-circular-progress-wave-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='4' fill='none' stroke='black' d='M24,6C25.18,5.16 26.57,4.53 27.82,4.78C29.08,5.03 30.12,6.15 30.89,7.37C31.66,8.59 32.22,9.77 33.11,10.36C34,10.96 35.3,11.03 36.73,11.27C38.15,11.51 39.58,12.04 40.3,13.11C41.01,14.18 40.95,15.7 40.63,17.11C40.31,18.52 39.88,19.75 40.08,20.8C40.29,21.85 41.16,22.82 42,24C42.84,25.18 43.47,26.57 43.22,27.82C42.97,29.08 41.85,30.12 40.63,30.89C39.41,31.66 38.23,32.22 37.64,33.11C37.04,34 36.97,35.3 36.73,36.73C36.49,38.15 35.96,39.58 34.89,40.3C33.82,41.01 32.3,40.95 30.89,40.63C29.48,40.31 28.25,39.88 27.2,40.08C26.15,40.29 25.18,41.16 24,42C22.82,42.84 21.43,43.47 20.18,43.22C18.92,42.97 17.88,41.85 17.11,40.63C16.34,39.41 15.78,38.23 14.89,37.64C14,37.04 12.7,36.97 11.27,36.73C9.85,36.49 8.42,35.96 7.7,34.89C6.99,33.82 7.05,32.3 7.37,30.89C7.69,29.48 8.12,28.25 7.92,27.2C7.71,26.15 6.84,25.18 6,24C5.16,22.82 4.53,21.43 4.78,20.18C5.03,18.92 6.15,17.88 7.37,17.11C8.59,16.34 9.77,15.78 10.36,14.89C10.96,14 11.03,12.7 11.27,11.27C11.51,9.85 12.04,8.42 13.11,7.7C14.18,6.99 15.7,7.05 17.11,7.37C18.52,7.69 19.75,8.12 20.8,7.92C21.85,7.71 22.82,6.84 24,6Z'/%3E%3C/svg%3E"));
+    // the flat-ring mask for the track and the zero-amplitude arc (0.5px ramps
+    // for full-pixel gradient antialiasing); 75% of closest-side = the 0.375 *
+    // box ring radius
+    $flat-ring: radial-gradient(circle closest-side,
+        transparent calc(75% - var(--micl-progress-thickness) / 2 - 0.5px),
+        #fff calc(75% - var(--micl-progress-thickness) / 2 + 0.5px) calc(75% + var(--micl-progress-thickness) / 2 - 0.5px),
+        transparent calc(75% + var(--micl-progress-thickness) / 2 + 0.5px));
+    $wave-cap-r: "(var(--micl-progress-radius) + 1.6px * var(--micl-progress-amplitude) * sin(8 * (var(--micl-progress-sweep) + var(--micl-progress-crawl))))";
 
-    --md-comp-progress-circular-gap-deg: 12deg;
+    --_size: var(--md-comp-circular-progress-size, 40px);
+    --_thickness: var(--md-comp-circular-progress-active-thickness, 4px);
+    --_space: var(--md-comp-circular-progress-track-active-space, 4px);
+    --_box: calc(var(--_size) * 1.2);
+    --_fraction: min(calc(attr(aria-valuenow type(<number>), 0) / max(attr(aria-valuemax type(<number>), 1), 0.001)), 1);
+    --micl-progress-fraction: var(--_fraction);
+    --micl-progress-amplitude: clamp(0, min(calc((var(--micl-progress-fraction) - 0.1) * 1000), calc((0.95 - var(--micl-progress-fraction)) * 1000)), 1);
+    transition: --micl-progress-fraction motion.$md-sys-motion-duration-long2 motion.$md-sys-motion-easing-standard;
 
+    position: relative;
     display: inline-block;
-    box-sizing: border-box;
-    inline-size: var(--md-comp-progress-circular-size);
-    block-size: var(--md-comp-progress-circular-size);
-    border-radius: 50%;
-    background-image: conic-gradient(
-        #{$active} 0
-            max(0deg, calc(var(--md-comp-progress-fraction, 0) * 360deg - var(--md-comp-progress-circular-gap-deg))),
-        transparent
-            max(0deg, calc(var(--md-comp-progress-fraction, 0) * 360deg - var(--md-comp-progress-circular-gap-deg)))
-            calc(var(--md-comp-progress-fraction, 0) * 360deg),
-        #{$track} calc(var(--md-comp-progress-fraction, 0) * 360deg) 360deg);
-    -webkit-mask: radial-gradient(farthest-side,
-        transparent calc(100% - var(--md-comp-progress-thickness)),
-        #fff calc(100% - var(--md-comp-progress-thickness)));
-            mask: radial-gradient(farthest-side,
-        transparent calc(100% - var(--md-comp-progress-thickness)),
-        #fff calc(100% - var(--md-comp-progress-thickness)));
-
-    &::-webkit-progress-bar,
-    &::-webkit-progress-value { background: transparent; }
-    &::-moz-progress-bar      { background: transparent; }
-
-    &.micl-progress-circular--s { --md-comp-progress-circular-size: 28px; }
-    &.micl-progress-circular--m { --md-comp-progress-circular-size: 48px; }
-    &.micl-progress-circular--l { --md-comp-progress-circular-size: 64px; }
-
-    // Indeterminate: the canonical lightweight CSS spinner — a plain bordered
-    // ring (no gradient, no mask) rotated by transform. Chrome promotes this to
-    // a compositor layer, rasterises it once, and spins the texture on the GPU,
-    // so it is essentially free per frame regardless of how many are visible.
-    &:indeterminate {
-        background-image: none;
-        -webkit-mask: none;
-                mask: none;
-        border: var(--md-comp-progress-thickness) solid #{$track};
-        border-block-start-color: $active;
-        animation: micl-progress-circular-spin var(--md-comp-progress-indeterminate-duration) linear infinite;
+    vertical-align: middle;
+    inline-size: var(--_box);
+    block-size: var(--_box);
+
+    &::before,
+    &::after {
+        --micl-progress-sweep: calc(var(--micl-progress-fraction) * 360deg);
+        --micl-progress-radius: calc(var(--_box) * 0.375);
+        --micl-progress-gap: atan2(calc(var(--_space) + var(--_thickness)), var(--micl-progress-radius));
+        --micl-progress-thickness: var(--_thickness);
+
+        content: "";
+        position: absolute;
+        inset: 0;
+        background-repeat: no-repeat;
+        mask-image: $flat-ring;
     }
-}
+    &::before {
+        --micl-progress-track-color: #{$circ-track};
 
-@keyframes micl-progress-circular-spin {
-    to { transform: rotate(360deg); }
-}
+        background-image: $circ-cap-track, $circ-cap-track,
+            conic-gradient(
+                transparent 0 calc(var(--micl-progress-sweep) + #{$circ-gap}),
+                var(--micl-progress-track-color) 0 calc(360deg - #{$circ-gap}),
+                transparent 0);
+        background-position:
+            calc(50% + var(--micl-progress-radius) * sin(calc(var(--micl-progress-sweep) + #{$circ-gap})))
+                calc(50% - var(--micl-progress-radius) * cos(calc(var(--micl-progress-sweep) + #{$circ-gap}))),
+            calc(50% - var(--micl-progress-radius) * sin(#{$circ-gap}))
+                calc(50% - var(--micl-progress-radius) * cos(#{$circ-gap})),
+            0 0;
+        background-size: var(--_thickness) var(--_thickness), var(--_thickness) var(--_thickness), 100% 100%;
+    }
+    &::after {
+        --micl-progress-active-color: #{$circ-active};
 
-//
-// Right-to-left: mirror the linear sweep direction.
-//
-[dir=rtl] progress.micl-progress-linear {
-    transform: scaleX(-1);
-}
+        opacity: calc(1 - var(--micl-progress-amplitude));
+        transition: opacity motion.$md-sys-motion-duration-long2 motion.$md-sys-motion-easing-standard;
+        background-image: $circ-cap-active, $circ-cap-active,
+            conic-gradient(var(--micl-progress-active-color) 0 var(--micl-progress-sweep), transparent 0);
+        background-position: 50% calc(50% - var(--micl-progress-radius)),
+            calc(50% + var(--micl-progress-radius) * sin(var(--micl-progress-sweep)))
+                calc(50% - var(--micl-progress-radius) * cos(var(--micl-progress-sweep))),
+            0 0;
+        background-size: var(--_thickness) var(--_thickness), var(--_thickness) var(--_thickness), 100% 100%;
+    }
+    .micl-circular-progress__wave {
+        position: absolute;
+        inset: 0;
+        opacity: var(--micl-progress-amplitude);
+        transition: opacity motion.$md-sys-motion-duration-long2 motion.$md-sys-motion-easing-standard;
+        mask-image: $wave-ring;
+        mask-size: 100% 100%;
 
-//
-// Honour reduced-motion: stop the only two animated (loading) states.
-//
-@media (prefers-reduced-motion: reduce) {
-    progress.micl-progress-linear:indeterminate,
-    progress.micl-progress-circular:indeterminate {
-        animation: none;
+        &::before {
+            --micl-progress-sweep: calc(var(--micl-progress-fraction) * 360deg);
+            --micl-progress-radius: calc(var(--_box) * 0.375);
+            --micl-progress-thickness: var(--_thickness);
+            --micl-progress-active-color: #{$circ-active};
+
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-repeat: no-repeat;
+            background-image: $circ-cap-active, $circ-cap-active,
+                conic-gradient(var(--micl-progress-active-color) 0 var(--micl-progress-sweep), transparent 0);
+            background-position: 50% calc(50% - var(--micl-progress-radius)),
+                calc(50% + #{$wave-cap-r} * sin(var(--micl-progress-sweep)))
+                    calc(50% - #{$wave-cap-r} * cos(var(--micl-progress-sweep))),
+                0 0;
+            background-size: var(--_thickness) var(--_thickness), var(--_thickness) var(--_thickness), 100% 100%;
+        }
+    }
+    &.micl-circular-progress--indeterminate {
+        --micl-progress-amplitude: 1;
+
+        animation: circglobal 6000ms linear infinite,
+            circstep 6000ms linear infinite;
+
+        &::before {
+            animation: circsweep 6000ms infinite;
+        }
+        &::after {
+            animation: circsweep 6000ms infinite;
+        }
+        .micl-circular-progress__wave {
+            animation: circcrawl 8000ms linear infinite;
+
+            &::before {
+                animation: circsweep 6000ms infinite,
+                    circcrawlcounter 8000ms linear infinite;
+            }
+
+            @media (prefers-reduced-motion: reduce) {
+                animation-play-state: paused;
+
+                &::before {
+                    animation-play-state: running, paused;
+                }
+            }
+        }
+    }
+}
+@keyframes circcrawl {
+    to { rotate: -360deg; }
+}
+@keyframes circcrawlcounter {
+    to {
+        rotate: 360deg;
+        --micl-progress-crawl: 360deg;
     }
 }