material-inspired-component-library 8.0.0 → 8.0.1

package/.claude/settings.local.json

@@ -0,0 +1,14 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(node *)",
+      "WebSearch",
+      "Bash(npm run *)",
+      "WebFetch(domain:raw.githubusercontent.com)",
+      "WebFetch(domain:android.googlesource.com)",
+      "WebFetch(domain:m3.material.io)",
+      "WebFetch(domain:github.com)",
+      "Bash(xargs grep -l \"body\\\\|html\")"
+    ]
+  }
+}

package/CLAUDE.md

@@ -4,7 +4,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-MICL is a Material Design 3 UI component library written in TypeScript and Sass. It compiles to a UMD bundle (`dist/micl.js`) and a CSS file (`dist/micl.css`) with zero runtime dependencies.
+MICL is a Material Design 3 (M3 Expressive) UI component library written in Sass and TypeScript.
 
 ## Commands
 
@@ -32,11 +32,22 @@ Each component lives in `components/<name>/` and exports:
 ### Styling System
 
 - Sass uses `@use` (not `@import`); partials are namespaced.
-- Theming is done entirely via CSS custom properties with `--md-sys-*` prefixes.
+- Theming is done entirely via CSS custom properties with `--md-comp-*` prefixes.
 - `themes/` contains 11 colour themes, each with light, dark, and high-contrast variants.
 - `styles/` contains Material Design tokens: typography, shapes, elevation, motion, state layers.
 - `foundations/` contains the responsive layout system (breakpoints: compact ≤599 px, medium 600–839 px, expanded 840–1199 px, large 1200–1599 px, extra-large ≥1600 px).
 
+### Coding
+
+- The amount of TypeScript code should be minimized. Necessary functionality should be solved using SCSS only.
+– The SCSS code can be verbose, but the compiled CSS code must be as small as possible.
+
+### Documentation
+
+- Component documentation is stored with the SCSS and JavaScript files. Always check if the documentation is up to date with regards to the implementation.
+
 ### Build
 
 `webpack.config.js` produces two identical outputs: one to `/dist/` (npm distribution) and one to `/docs/` (live demo). TypeScript target is ES2022 with strict mode and declaration-file generation enabled.
+
+The library compiles to a UMD bundle (`dist/micl.js`) and a CSS file (`dist/micl.css`) with zero runtime dependencies. In addition, a CSS and JavaScript pair of compiled files is created, so that a consumer may load only a subset of components.

package/components/alert/index.scss

@@ -23,6 +23,11 @@
 @use '../../styles/shapes';
 @use '../../styles/typography';
 
+@include shapes.corner('small');
+
+@include typography.scale('title-medium');
+@include typography.scale('body-medium');
+
 :root {
     --md-sys-alert-padding: 16px;
     --md-sys-alert-space: 16px;

package/components/appbar/index.scss

@@ -26,6 +26,18 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include elevation.level(0);
+@include elevation.level(2);
+
+@include shapes.corner('none');
+
+@include typography.scale('display-small');
+@include typography.scale('headline-medium');
+@include typography.scale('title-large');
+@include typography.scale('title-medium');
+@include typography.scale('title-small');
+@include typography.scale('label-medium');
+
 @mixin appbar-sticky() {
     position: sticky;
     inset: unset;

package/components/badge/index.scss

@@ -22,6 +22,8 @@
 @use '../../foundations';
 @use '../../styles/typography';
 
+@include typography.scale('label-small');
+
 :root {
     --md-sys-badge-small-size: 6px;
     --md-sys-badge-large-size: 16px;

package/components/bottomsheet/index.scss

@@ -25,6 +25,15 @@
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
 
+@include elevation.level(1);
+
+@include shapes.corner('extra-large');
+@include shapes.corner('small');
+
+@include statelayer.token('focus-indicator-thickness');
+@include statelayer.token('focus-indicator-outer-offset');
+@include statelayer.token('backdrop-opacity');
+
 dialog.micl-bottomsheet {
     --md-sys-bottomsheet-height: max-content;
     --md-sys-bottomsheet-margin: 56px;

package/components/button/index.scss

@@ -26,6 +26,29 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include elevation.level(0);
+@include elevation.level(1);
+
+@include shapes.corner('small');
+@include shapes.corner('medium');
+@include shapes.corner('large');
+@include shapes.corner('extra-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('disabled-state-layer-opacity');
+@include statelayer.token('focus-indicator-thickness');
+@include statelayer.token('ripple-opacity-factor');
+@include statelayer.token('ripple-duration');
+@include statelayer.property;
+@include statelayer.keyframes;
+
+@include typography.scale('headline-large');
+@include typography.scale('headline-small');
+@include typography.scale('title-medium');
+@include typography.scale('label-large');
+
 button.micl-button-text-xs,
 a.micl-button-text-xs,
 button.micl-button-text-s,

package/components/card/index.scss

@@ -27,6 +27,29 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include elevation.level(0);
+@include elevation.level(1);
+@include elevation.level(2);
+@include elevation.level(3);
+@include elevation.level(4);
+
+@include shapes.corner('medium');
+
+@include statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('focus-state-layer-opacity');
+@include statelayer.token('pressed-state-layer-opacity');
+@include statelayer.token('dragged-state-layer-opacity');
+@include statelayer.token('disabled-state-layer-opacity');
+@include statelayer.token('focus-indicator-thickness');
+@include statelayer.token('focus-indicator-outer-offset');
+@include statelayer.token('ripple-opacity-factor');
+@include statelayer.token('ripple-duration');
+@include statelayer.property;
+@include statelayer.keyframes;
+
+@include typography.scale('title-medium');
+@include typography.scale('body-smallmedium');
+
 @mixin card-variant(
     $name,
     $bg-default,

package/components/checkbox/index.scss

@@ -21,9 +21,26 @@
 
 @use '../../foundations';
 @use '../../styles/motion';
+@use '../../styles/shapes';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include shapes.corner('full');
+
+@include statelayer.token('layer-size');
+@include statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('focus-state-layer-opacity');
+@include statelayer.token('pressed-state-layer-opacity');
+@include statelayer.token('disabled-state-layer-opacity');
+@include statelayer.token('focus-indicator-thickness');
+@include statelayer.token('ripple-opacity-factor');
+@include statelayer.token('ripple-duration');
+@include statelayer.property;
+@include statelayer.keyframes;
+
+@include motion.duration('short3');
+@include motion.duration('long4');
+
 :root {
     --md-sys-checkbox-border-width: 2px;
     --md-sys-checkbox-check-thickness: 2px;

package/components/datepicker/index.scss

@@ -25,6 +25,19 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include shapes.corner('large');
+@include shapes.corner('full');
+
+@include statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('focus-state-layer-opacity');
+@include statelayer.token('pressed-state-layer-opacity');
+@include statelayer.token('disabled-state-layer-opacity');
+@include statelayer.property;
+
+@include typography.scale('headline-large');
+@include typography.scale('body-large');
+@include typography.scale('label-large');
+
 :root {
     --md-comp-date-picker-docked-container-width: 360px;
     --md-comp-date-picker-modal-container-width: 360px;

package/components/dialog/index.scss

@@ -26,6 +26,22 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include elevation.level(0);
+@include elevation.level(2);
+@include elevation.level(3);
+
+@include shapes.corner('none');
+@include shapes.corner('extra-large');
+
+@include statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('backdrop-opacity');
+@include statelayer.property;
+
+@include typography.scale('headline-small');
+@include typography.scale('title-large');
+@include typography.scale('title-medium');
+@include typography.scale('body-medium');
+
 :root {
     --md-sys-dialog-min-width: 280px;
     --md-sys-dialog-max-width: 560px;

package/components/iconbutton/index.scss

@@ -25,6 +25,24 @@
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
 
+@include elevation.level(0);
+
+@include shapes.corner('small');
+@include shapes.corner('medium');
+@include shapes.corner('large');
+@include shapes.corner('extra-large');
+@include shapes.corner('full');
+
+@include statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('focus-state-layer-opacity');
+@include statelayer.token('pressed-state-layer-opacity');
+@include statelayer.token('disabled-state-layer-opacity');
+@include statelayer.token('focus-indicator-thickness');
+@include statelayer.token('ripple-opacity-factor');
+@include statelayer.token('ripple-duration');
+@include statelayer.property;
+@include statelayer.keyframes;
+
 button.micl-iconbutton-standard-xs,
 a.micl-iconbutton-standard-xs,
 button.micl-iconbutton-standard-s,

package/components/list/index.scss

@@ -26,6 +26,31 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include elevation.level(4);
+
+@include shapes.corner('extra-small');
+@include shapes.corner('small');
+@include shapes.corner('medium');
+@include shapes.corner('large');
+@include shapes.corner('full');
+
+@include statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('focus-state-layer-opacity');
+@include statelayer.token('pressed-state-layer-opacity');
+@include statelayer.token('dragged-state-layer-opacity');
+@include statelayer.token('disabled-state-layer-opacity');
+@include statelayer.token('focus-indicator-thickness');
+@include statelayer.token('focus-indicator-inner-offset');
+@include statelayer.token('ripple-opacity-factor');
+@include statelayer.token('ripple-duration');
+@include statelayer.property;
+@include statelayer.keyframes;
+
+@include typography.scale('title-medium');
+@include typography.scale('body-large');
+@include typography.scale('body-medium');
+@include typography.scale('label-small');
+
 :root {
     --md-comp-accordion-item-space: 0px;
 }

package/components/menu/index.scss

@@ -23,8 +23,26 @@
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shapes';
+@use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include elevation.level(2);
+
+@include shapes.corner('small');
+@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('disabled-state-layer-opacity');
+@include statelayer.token('focus-indicator-thickness');
+@include statelayer.token('focus-indicator-inner-offset');
+@include statelayer.token('backdrop-opacity');
+
+@include typography.scale('label-large');
+@include typography.scale('label-small');
+@include typography.scale('body-small');
+
 :root {
     --md-comp-menu-width-max: 320px;
     --md-comp-menu-width-min: 112px;

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;

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;
+    }
+}