material-inspired-component-library 7.0.2 → 8.0.1

package/components/navigationrail/index.scss

@@ -27,6 +27,23 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include elevation.level(0);
+@include elevation.level(2);
+
+@include shapes.corner('large');
+
+@include statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('focus-state-layer-opacity');
+@include statelayer.token('pressed-state-layer-opacity');
+@include statelayer.token('backdrop-opacity');
+@include statelayer.token('ripple-opacity-factor');
+@include statelayer.token('ripple-duration');
+@include statelayer.property;
+@include statelayer.keyframes;
+
+@include typography.scale('label-large');
+@include typography.scale('label-medium');
+
 .micl-navigationrail {
     --md-comp-nav-rail-spring-buffer: 100px;
     --md-comp-nav-rail-divider-thickness: 0px;
@@ -36,19 +53,18 @@
     --md-comp-nav-rail-morph-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
     --md-comp-nav-rail-morph-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
 
-    --_current-max-width: var(--md-comp-nav-rail-collapsed-container-width, 96px);
-    --_current-min-width: var(--md-comp-nav-rail-collapsed-container-width, 96px);
-    --_item-direction: column;
-    --_item-width: var(--md-comp-nav-rail-item-short-container-height, 56px);
-
-    --_item-target-height: var(--_item-base-height);
+    --_navigationrail-current-max-width: var(--md-comp-nav-rail-collapsed-container-width, 96px);
+    --_navigationrail-current-min-width: var(--md-comp-nav-rail-collapsed-container-width, 96px);
+    --_navigationrail-item-direction: column;
+    --_navigationrail-item-width: var(--md-comp-nav-rail-item-short-container-height, 56px);
+    --_navigationrail-item-target-height: var(--_navigationrail-item-base-height);
 
-    --_content-gap: var(--md-comp-nav-rail-item-container-vertical-space, 6px);
-    --_morph-speed: var(--md-comp-nav-rail-morph-duration-reverse);
-    --_container-delay: calc(var(--_morph-speed) / 2);
-    --_item-delay: 0ms;
-    --_text-animation: none;
-    --_expanded-text-margin: calc(var(--md-comp-nav-rail-item-active-indicator-icon-label-space, 8px) - 16px);
+    --_navigationrail-content-gap: var(--md-comp-nav-rail-item-container-vertical-space, 6px);
+    --_navigationrail-morph-speed: var(--md-comp-nav-rail-morph-duration-reverse);
+    --_navigationrail-container-delay: calc(var(--_navigationrail-morph-speed) / 2);
+    --_navigationrail-item-delay: 0ms;
+    --_navigationrail-text-animation: none;
+    --_navigationrail-expanded-text-margin: calc(var(--md-comp-nav-rail-item-active-indicator-icon-label-space, 8px) - 16px);
 
     box-sizing: border-box;
     display: flex;
@@ -70,11 +86,11 @@
     interpolate-size: allow-keywords;
 
     transition:
-        min-inline-size var(--_morph-speed) var(--_container-delay) linear,
-        max-inline-size var(--_morph-speed) var(--_container-delay) linear,
-        padding-block-start var(--_morph-speed) var(--_container-delay) linear;
-    min-inline-size: var(--_current-min-width);
-    max-inline-size: var(--_current-max-width);
+        min-inline-size var(--_navigationrail-morph-speed) var(--_navigationrail-container-delay) linear,
+        max-inline-size var(--_navigationrail-morph-speed) var(--_navigationrail-container-delay) linear,
+        padding-block-start var(--_navigationrail-morph-speed) var(--_navigationrail-container-delay) linear;
+    min-inline-size: var(--_navigationrail-current-min-width);
+    max-inline-size: var(--_navigationrail-current-max-width);
 
     &> .micl-navigationrail__headline {
         padding-inline-start: 28px;
@@ -87,12 +103,12 @@
         flex: 1 1 auto;
         align-items: flex-start;
         inline-size: 100%;
-        row-gap: var(--_content-gap);
+        row-gap: var(--_navigationrail-content-gap);
         padding-block: var(--md-comp-nav-rail-item-header-space-minimum, 40px) 16px;
         padding-inline: 20px 0;
 
         overflow: hidden auto;
-        transition: row-gap var(--_morph-speed) linear;
+        transition: row-gap var(--_navigationrail-morph-speed) linear;
 
         &> a.micl-navigationrail__item:focus-visible {
             --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
@@ -101,9 +117,9 @@
         &> a.micl-navigationrail__item {
             --micl-ripple: 1;
             --statelayer-color: var(--md-sys-color-on-secondary-container);
-            --_item-base-height: var(--md-comp-nav-rail-item-short-container-height, 56px);
-            --_item-margin-bottom: 0px;
-            --_item-padding-block: 12px;
+            --_navigationrail-item-base-height: var(--md-comp-nav-rail-item-short-container-height, 56px);
+            --_navigationrail-item-margin-bottom: 0px;
+            --_navigationrail-item-padding-block: 12px;
 
             box-sizing: border-box;
             display: flex;
@@ -117,20 +133,25 @@
             overflow: visible;
             background-color: transparent;
             background-image:
-                radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)) 10%, transparent 10%),
+                radial-gradient(
+                    circle at var(--micl-x, center) var(--micl-y, center),
+                    transparent 0%,
+                    rgb(from var(--statelayer-color) r g b / calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%,
+                    transparent 10%
+                ),
                 linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
             background-repeat: no-repeat;
-            background-size: 10000%, 100%;
+            background-size: 0%, 100%;
 
             &:has(.micl-navigationrail__text) {
-                --_item-base-height: var(--md-comp-nav-rail-item-vertical-active-indicator-height, 32px);
-                --_item-margin-bottom: 40px;
-                --_item-padding-block: 0px;
+                --_navigationrail-item-base-height: var(--md-comp-nav-rail-item-vertical-active-indicator-height, 32px);
+                --_navigationrail-item-margin-bottom: 40px;
+                --_navigationrail-item-padding-block: 0px;
             }
             &:not(:has(.micl-navigationrail__icon)) {
-                --_item-base-height: var(--md-comp-nav-rail-item-short-container-height, 56px);
-                --_item-margin-bottom: 0px;
-                --_item-padding-block: 0px;
+                --_navigationrail-item-base-height: var(--md-comp-nav-rail-item-short-container-height, 56px);
+                --_navigationrail-item-margin-bottom: 0px;
+                --_navigationrail-item-padding-block: 0px;
 
                 justify-content: center;
 
@@ -146,28 +167,28 @@
                     animation: none !important;
 
                     transition:
-                        padding-inline calc(var(--_morph-speed) / 2) var(--_item-delay) linear,
-                        margin-inline calc(var(--_morph-speed) / 2) var(--_item-delay) linear;
+                        padding-inline calc(var(--_navigationrail-morph-speed) / 2) var(--_navigationrail-item-delay) linear,
+                        margin-inline calc(var(--_navigationrail-morph-speed) / 2) var(--_navigationrail-item-delay) linear;
                 }
             }
 
-            inline-size: var(--_item-width);
-            block-size: var(--_item-target-height, var(--_item-base-height));
-            margin-block-end: var(--_item-target-margin, var(--_item-margin-bottom));
-            padding-block: var(--_item-target-padding, var(--_item-padding-block));
-            flex-direction: var(--_item-direction);
+            inline-size: var(--_navigationrail-item-width);
+            block-size: var(--_navigationrail-item-target-height, var(--_navigationrail-item-base-height));
+            margin-block-end: var(--_navigationrail-item-target-margin, var(--_navigationrail-item-margin-bottom));
+            padding-block: var(--_navigationrail-item-target-padding, var(--_navigationrail-item-padding-block));
+            flex-direction: var(--_navigationrail-item-direction);
 
-            border-radius: calc(var(--_item-target-height, var(--_item-base-height)) / 2);
+            border-radius: calc(var(--_navigationrail-item-target-height, var(--_navigationrail-item-base-height)) / 2);
 
             transition:
-                inline-size calc(var(--_morph-speed) / 2) var(--_item-delay) linear,
-                block-size calc(var(--_morph-speed) / 2) var(--_item-delay) linear,
-                margin-block-end calc(var(--_morph-speed) / 2) var(--_item-delay) linear,
-                padding-block calc(var(--_morph-speed) / 2) var(--_item-delay) linear,
-                border-radius calc(var(--_morph-speed) / 2) var(--_item-delay) linear,
-                flex-direction 0s calc(var(--_morph-speed) / 2) linear allow-discrete,
-                background-color calc(var(--_morph-speed) / 2) linear,
-                background-size 3000ms linear,
+                inline-size calc(var(--_navigationrail-morph-speed) / 2) var(--_navigationrail-item-delay) linear,
+                block-size calc(var(--_navigationrail-morph-speed) / 2) var(--_navigationrail-item-delay) linear,
+                margin-block-end calc(var(--_navigationrail-morph-speed) / 2) var(--_navigationrail-item-delay) linear,
+                padding-block calc(var(--_navigationrail-morph-speed) / 2) var(--_navigationrail-item-delay) linear,
+                border-radius calc(var(--_navigationrail-morph-speed) / 2) var(--_navigationrail-item-delay) linear,
+                flex-direction 0s calc(var(--_navigationrail-morph-speed) / 2) linear allow-discrete,
+                background-color calc(var(--_navigationrail-morph-speed) / 2) linear,
+                background-size 0ms,
                 --statelayer-opacity var(--md-comp-nav-rail-motion-duration) linear;
 
             .micl-navigationrail__icon {
@@ -185,7 +206,7 @@
                 margin: 4px 0px 0px 0px;
                 color: var(--md-sys-color-on-surface-variant);
                 overflow: hidden;
-                animation: var(--_text-animation);
+                animation: var(--_navigationrail-text-animation);
             }
 
             &:hover {
@@ -193,8 +214,10 @@
             }
             &:active {
                 --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
-                background-size: 0%, 100%;
-                transition-duration: 0ms, 0ms, 0ms, calc(var(--_morph-speed) / 2), 0ms, var(--md-comp-nav-rail-motion-duration);
+                transition-duration: 0ms, 0ms, 0ms, calc(var(--_navigationrail-morph-speed) / 2), 0ms, var(--md-comp-nav-rail-motion-duration);
+            }
+            &.micl-rippling {
+                animation: micl-ripple var(--md-sys-state-ripple-duration) motion.$md-sys-motion-easing-standard;
             }
         }
 
@@ -239,20 +262,20 @@
 
 dialog.micl-navigationrail,
 nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--selected) {
-    --_current-max-width: var(--md-comp-nav-rail-expanded-container-width-maximum, 360px);
-    --_current-min-width: var(--md-comp-nav-rail-expanded-container-width-minimum, 220px);
-    --_item-direction: row;
-    --_item-width: fit-content;
+    --_navigationrail-current-max-width: var(--md-comp-nav-rail-expanded-container-width-maximum, 360px);
+    --_navigationrail-current-min-width: var(--md-comp-nav-rail-expanded-container-width-minimum, 220px);
+    --_navigationrail-item-direction: row;
+    --_navigationrail-item-width: fit-content;
 
-    --_item-target-height: var(--md-comp-nav-rail-item-short-container-height, 56px);
-    --_item-target-margin: 0px;
-    --_item-target-padding: 16px;
+    --_navigationrail-item-target-height: var(--md-comp-nav-rail-item-short-container-height, 56px);
+    --_navigationrail-item-target-margin: 0px;
+    --_navigationrail-item-target-padding: 16px;
 
-    --_content-gap: 0px;
-    --_morph-speed: var(--md-comp-nav-rail-morph-duration);
-    --_container-delay: 0ms;
-    --_item-delay: calc(var(--_morph-speed) / 2);
-    --_text-animation: var(--_morph-speed) linear forwards navigationrail-text-to-expanded;
+    --_navigationrail-content-gap: 0px;
+    --_navigationrail-morph-speed: var(--md-comp-nav-rail-morph-duration);
+    --_navigationrail-container-delay: 0ms;
+    --_navigationrail-item-delay: calc(var(--_navigationrail-morph-speed) / 2);
+    --_navigationrail-text-animation: var(--_navigationrail-morph-speed) linear forwards navigationrail-text-to-expanded;
 
     padding-block: var(--md-comp-nav-rail-expanded-top-space, 44px) 0;
     border-radius: var(--md-comp-nav-rail-expanded-container-shape, 0px);
@@ -269,7 +292,7 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
         }
         .micl-navigationrail__text {
             @include typography.label-large;
-            margin-inline-start: var(--_expanded-text-margin);
+            margin-inline-start: var(--_navigationrail-expanded-text-margin);
             padding-inline-end: 16px;
         }
 
@@ -281,8 +304,8 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
 }
 
 nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--toggled:not(.micl-button--selected)) {
-    --_morph-speed: var(--md-comp-nav-rail-morph-duration-reverse);
-    --_text-animation: var(--_morph-speed) linear forwards navigationrail-text-to-collapsed;
+    --_navigationrail-morph-speed: var(--md-comp-nav-rail-morph-duration-reverse);
+    --_navigationrail-text-animation: var(--_navigationrail-morph-speed) linear forwards navigationrail-text-to-collapsed;
 }
 
 nav.micl-navigationrail {
@@ -324,14 +347,14 @@ dialog.micl-navigationrail {
     0% {
         @include typography.label-large;
         margin-block-start: 0;
-        margin-inline-start: var(--_expanded-text-margin);
+        margin-inline-start: var(--_navigationrail-expanded-text-margin);
         padding-inline-end: 16px;
         opacity: 100%
     }
     49.9% {
         @include typography.label-large;
         margin-block-start: 0;
-        margin-inline-start: var(--_expanded-text-margin);
+        margin-inline-start: var(--_navigationrail-expanded-text-margin);
         padding-inline-end: 16px;
         opacity: 0%;
     }
@@ -373,14 +396,14 @@ dialog.micl-navigationrail {
     50.1% {
         @include typography.label-large;
         margin-block-start: 0px;
-        margin-inline-start: var(--_expanded-text-margin);
+        margin-inline-start: var(--_navigationrail-expanded-text-margin);
         padding-inline-end: 16px;
         opacity: 0%;
     }
     100% {
         @include typography.label-large;
         margin-block-start: 0px;
-        margin-inline-start: var(--_expanded-text-margin);
+        margin-inline-start: var(--_navigationrail-expanded-text-margin);
         padding-inline-end: 16px;
         opacity: 100%;
     }

package/components/progressindicator/README.md

@@ -0,0 +1,88 @@
+# Progress Indicator
+This component implements the [Material Design 3 Expressive Progress indicators](https://m3.material.io/components/progress-indicators/overview) design. Progress indicators show the status of a process in real time, either as a determinate value or as an indeterminate, looping animation.
+
+## Basic Usage
+
+### HTML
+Progress indicators use the native `<progress>` element. Add the `micl-progress-linear` class for the linear (bar) variant or `micl-progress-circular` for the circular (ring) variant.
+
+A **determinate** indicator has a known value. Provide the `value` and (optionally) `max` attributes:
+
+```HTML
+<progress class="micl-progress-linear" value="0.6" max="1"></progress>
+<progress class="micl-progress-circular" value="60" max="100"></progress>
+```
+
+An **indeterminate** indicator has an unknown value. Omit the `value` attribute entirely:
+
+```HTML
+<progress class="micl-progress-linear"></progress>
+<progress class="micl-progress-circular"></progress>
+```
+
+### CSS
+Import the progress indicator styles into your project:
+
+```CSS
+@use "material-inspired-component-library/dist/progressindicator";
+```
+
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
+### JavaScript
+No custom JavaScript is required for indeterminate indicators — the looping animation is driven entirely by CSS via the native `:indeterminate` state.
+
+For determinate indicators, the bundled handler mirrors the `value` and `max` attributes into the CSS custom properties that drive the fill, the active/track gap and the Expressive wave amplitude. It also flattens the wave into a straight line over the final 10% of progress.
+
+> **Updating progress at runtime:** the handler observes the `value` and `max` *attributes*. When you update progress dynamically, set the attribute (`element.setAttribute('value', 0.7)`) rather than only the IDL property (`element.value = 0.7`), so the indicator stays in sync. Alternatively, you may set the `--md-comp-progress-fraction` custom property (a number between `0` and `1`) directly for pure-CSS control without the handler.
+
+### Live Demo
+A live example of the [Progress Indicator component](https://henkpb.github.io/micl/progressindicator.html) is available to interact with.
+
+## Variants
+The Progress Indicator component offers the following variants:
+
+| CSS class | Description |
+| --------- | ----------- |
+| micl-progress-linear | A horizontal linear progress bar |
+| micl-progress-circular | A circular progress ring |
+| micl-progress-circular--s | Small circular ring (28px) |
+| micl-progress-circular--m | Medium circular ring (48px, default) |
+| micl-progress-circular--l | Large circular ring (64px) |
+
+Each variant is **determinate** when a `value` attribute is present and **indeterminate** when it is omitted.
+
+The signature Expressive *wavy active indicator* is applied to the linear variant as a static shape (rasterised once, so any number of determinate indicators cost nothing per frame). Its amplitude eases to zero as the indicator reaches completion, and setting `--md-comp-progress-wave-amplitude` to `0` produces a flat (pre-Expressive) active indicator. Only the transient loading states animate: the linear indeterminate comet, and the circular indeterminate spinner (a GPU-composited rotation). The circular variant renders a smooth ring.
+
+The component respects the `dir` global attribute, automatically mirroring the linear sweep direction for right-to-left (RTL) languages when `dir="rtl"` is applied to an ancestor element. It also honours the user's `prefers-reduced-motion` setting by disabling the travelling wave and looping animations.
+
+## Customizations
+You can customize the appearance of the Progress Indicator component by overriding its global CSS variables. Following the MICL convention, these `--md-comp-progress-*` variables can be set on `:root` or on any appropriate parent element to affect its child progress indicators. The colour roles default to the Material Design system colour tokens per the M3 progress-indicator specification.
+
+| Variable name | Default Value | Description |
+| ------------- | ------------- | ----------- |
+| --md-comp-progress-active-color | var(--md-sys-color-primary) | Colour of the active (filled) indicator |
+| --md-comp-progress-track-color | var(--md-sys-color-secondary-container) | Colour of the remaining track |
+| --md-comp-progress-stop-color | var(--md-sys-color-primary) | Colour of the linear end stop indicator dot |
+| --md-comp-progress-thickness | 4px | Thickness of the linear track and circular ring stroke |
+| --md-comp-progress-track-gap | 4px | Gap between the active indicator and the remaining track (linear) |
+| --md-comp-progress-stop-size | 4px | Diameter of the linear end stop indicator dot |
+| --md-comp-progress-linear-width | 100% | Default width of the linear indicator |
+| --md-comp-progress-wave-wavelength | 40px | Wavelength of the Expressive active wave |
+| --md-comp-progress-wave-amplitude | 3px | Amplitude of the Expressive active wave (set to `0` to disable) |
+| --md-comp-progress-indeterminate-duration | var(--md-sys-motion-duration-extra-long4) | Period of the indeterminate loop |
+| --md-comp-progress-circular-size | 48px | Diameter of the circular indicator |
+| --md-comp-progress-wave-image | (inline SVG) | The sine-ribbon mask used for the wavy active indicator |
+
+**Example: A thicker linear indicator with a calmer wave**
+
+```HTML
+<progress class="micl-progress-linear" value="0.4"
+  style="--md-comp-progress-thickness:8px;--md-comp-progress-wave-amplitude:2px"></progress>
+```
+
+## Compatibility
+This component utilizes relative RGB color values, CSS `mask`, `conic-gradient` and registered `@property` custom properties, which may not be fully supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility) for details.

package/components/progressindicator/index.scss

@@ -0,0 +1,225 @@
+//
+// Copyright © 2025 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
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// 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');
+
+// 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;
+}
+
+// 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;
+}
+
+// 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));
+}
+
+//
+// Linear progress indicator
+//
+progress.micl-progress-linear {
+    @extend %progress-reset;
+
+    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%);
+        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);
+    }
+
+    &::-webkit-progress-bar  { @include track; }
+    &::-webkit-progress-value { @include wave; }
+    &::-moz-progress-bar      { @include wave; }
+
+    // Firefox renders the track on the element itself.
+    @-moz-document url-prefix() {
+        @include track;
+    }
+
+    // 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});
+        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;
+
+        &::-webkit-progress-bar,
+        &::-webkit-progress-value { background: transparent; }
+        &::-moz-progress-bar      { background: transparent; }
+    }
+}
+
+@keyframes micl-progress-linear-indeterminate {
+    0%   { background-position: -40% center, left center; }
+    100% { background-position: 140% center, left center; }
+}
+
+//
+// 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;
+
+    --md-comp-progress-circular-gap-deg: 12deg;
+
+    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;
+    }
+}
+
+@keyframes micl-progress-circular-spin {
+    to { transform: rotate(360deg); }
+}
+
+//
+// Right-to-left: mirror the linear sweep direction.
+//
+[dir=rtl] progress.micl-progress-linear {
+    transform: scaleX(-1);
+}
+
+//
+// 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;
+    }
+}