mtrl 0.8.0-next.8 → 0.8.0

package/dist/components/progress/features/canvas.js

@@ -0,0 +1,300 @@
+import { PROGRESS_CLASSES, PROGRESS_VARIANTS, PROGRESS_SHAPES, PROGRESS_MEASUREMENTS, PROGRESS_MOTION, PROGRESS_THICKNESS, PROGRESS_WAVE, } from "../constants.js";
+import { observeCanvasResize } from "../../../core/canvas/resize.js";
+import { createColors } from "./colors.js";
+import { drawCircularProgress } from "./circular.js";
+import { drawLinearProgress } from "./linear.js";
+import { waveAmplitudeAt, waveAmplitudeTarget } from "./motion.js";
+export const getStrokeWidth = (thickness = "thin") => {
+    if (typeof thickness === "number")
+        return thickness;
+    return thickness === "thick" ? PROGRESS_THICKNESS.THICK : PROGRESS_THICKNESS.THIN;
+};
+export const getWaveAmplitude = (isCircular, strokeWidth, size) => isCircular
+    ? PROGRESS_WAVE.CIRCULAR.AMPLITUDE * (size / PROGRESS_MEASUREMENTS.CIRCULAR.SIZE)
+    : PROGRESS_WAVE.LINEAR.AMPLITUDE * (strokeWidth / PROGRESS_THICKNESS.THIN);
+export const getCircularSize = (config) => {
+    const fallback = config.shape === PROGRESS_SHAPES.WAVY
+        ? PROGRESS_MEASUREMENTS.CIRCULAR.WAVE_SIZE
+        : PROGRESS_MEASUREMENTS.CIRCULAR.SIZE;
+    return Math.max(PROGRESS_MEASUREMENTS.CIRCULAR.MIN_SIZE, Math.min(config.size ?? fallback, PROGRESS_MEASUREMENTS.CIRCULAR.MAX_SIZE));
+};
+export const getLinearHeight = (strokeWidth, isWavy) => isWavy ? strokeWidth + 2 * getWaveAmplitude(false, strokeWidth, 0) : strokeWidth;
+export const withCanvas = (config) => (component) => {
+    const isCircular = config.variant === PROGRESS_VARIANTS.CIRCULAR;
+    const view = component.element.ownerDocument?.defaultView ?? null;
+    const canvas = document.createElement("canvas");
+    canvas.className = `${component.getClass(PROGRESS_CLASSES.CONTAINER)}-canvas`;
+    canvas.setAttribute("aria-hidden", "true");
+    component.element.appendChild(canvas);
+    let context = null;
+    let currentThickness = config.thickness ?? "thin";
+    let currentShape = config.shape ?? PROGRESS_SHAPES.FLAT;
+    let currentSize = getCircularSize(config);
+    let animatedValue = config.value ?? 0;
+    let targetValue = animatedValue;
+    let valueAnimationId = null;
+    let lastSetValueTime = 0;
+    let amplitudeFrom = 0;
+    let amplitudeTarget = 0;
+    let amplitudeStarted = 0;
+    let animationId = null;
+    let animationTime = 0;
+    let animationStart = 0;
+    const reducedMotion = view?.matchMedia?.("(prefers-reduced-motion: reduce)") ?? null;
+    const isWavy = () => currentShape === PROGRESS_SHAPES.WAVY;
+    const strokeWidth = () => getStrokeWidth(currentThickness);
+    const max = () => component.state?.max ?? config.max ?? 100;
+    const isIndeterminate = () => component.state?.indeterminate ?? config.indeterminate ?? false;
+    const colors = createColors(() => draw(animationTime));
+    const measure = () => {
+        if (!context)
+            return;
+        const ratio = view?.devicePixelRatio || 1;
+        let width;
+        let height;
+        if (isCircular) {
+            width = height = currentSize;
+        }
+        else {
+            const rect = component.element.getBoundingClientRect?.();
+            width = Math.max(rect?.width || component.element.offsetWidth || 0, 0);
+            height = getLinearHeight(strokeWidth(), isWavy());
+        }
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+        canvas.width = Math.round(width * ratio);
+        canvas.height = Math.round(height * ratio);
+        context.width = width;
+        context.height = height;
+        context.pixelRatio = ratio;
+        context.ctx.setTransform(1, 0, 0, 1, 0, 0);
+        context.ctx.scale(ratio, ratio);
+    };
+    const initialize = () => {
+        if (typeof canvas.getContext !== "function")
+            return false;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return false;
+        context = { canvas, ctx, width: 0, height: 0, pixelRatio: view?.devicePixelRatio || 1 };
+        measure();
+        component.ctx = ctx;
+        return true;
+    };
+    const currentAmplitude = () => {
+        if (!isWavy())
+            return 0;
+        const full = getWaveAmplitude(isCircular, strokeWidth(), currentSize);
+        if (isIndeterminate())
+            return full;
+        const fraction = waveAmplitudeAt(amplitudeFrom, amplitudeTarget, (view?.performance ?? performance).now() - amplitudeStarted);
+        return full * fraction;
+    };
+    const draw = (time = animationTime) => {
+        if (!context || context.width <= 0 || context.height <= 0)
+            return;
+        const indeterminate = isIndeterminate();
+        const value = indeterminate ? 0 : animatedValue / max();
+        if (isCircular) {
+            drawCircularProgress(context, {
+                progress: value,
+                indeterminate,
+                strokeWidth: strokeWidth(),
+                time,
+                waveAmplitude: currentAmplitude(),
+                colors: colors.get(),
+            });
+        }
+        else {
+            const rtl = view?.getComputedStyle?.(component.element)?.direction === "rtl";
+            drawLinearProgress(context, {
+                progress: value,
+                buffer: (component.state?.buffer ?? config.buffer ?? 0) / max(),
+                indeterminate,
+                strokeWidth: strokeWidth(),
+                time,
+                waveAmplitude: currentAmplitude(),
+                rtl,
+                colors: colors.get(),
+                showStopIndicator: !indeterminate && config.showStopIndicator !== false,
+            });
+        }
+    };
+    const needsAnimation = () => !reducedMotion?.matches && (isIndeterminate() || isWavy());
+    const startAnimation = (offset = 0) => {
+        stopAnimation();
+        if (!needsAnimation()) {
+            draw(0);
+            return;
+        }
+        animationStart = 0;
+        const step = (timestamp) => {
+            if (animationStart === 0)
+                animationStart = timestamp - offset;
+            animationTime = timestamp - animationStart;
+            draw(animationTime);
+            animationId = needsAnimation() ? requestAnimationFrame(step) : null;
+        };
+        animationId = requestAnimationFrame(step);
+    };
+    const stopAnimation = () => {
+        if (animationId !== null) {
+            cancelAnimationFrame(animationId);
+            animationId = null;
+        }
+    };
+    const stopValueAnimation = () => {
+        if (valueAnimationId !== null) {
+            cancelAnimationFrame(valueAnimationId);
+            valueAnimationId = null;
+        }
+    };
+    const retargetAmplitude = (progress) => {
+        const next = waveAmplitudeTarget(progress);
+        if (next === amplitudeTarget)
+            return;
+        amplitudeFrom = waveAmplitudeAt(amplitudeFrom, amplitudeTarget, (view?.performance ?? performance).now() - amplitudeStarted);
+        amplitudeTarget = next;
+        amplitudeStarted = (view?.performance ?? performance).now();
+    };
+    const complete = (value) => {
+        component.element.dispatchEvent(new CustomEvent("complete", { detail: { value, max: max() } }));
+    };
+    component.setValue = (value, animate = true) => {
+        targetValue = Math.max(0, Math.min(max(), value));
+        retargetAmplitude(targetValue / max());
+        if (valueAnimationId !== null && animate)
+            return;
+        stopValueAnimation();
+        if (!animate || reducedMotion?.matches) {
+            animatedValue = targetValue;
+            draw();
+            if (targetValue >= max())
+                complete(targetValue);
+            return;
+        }
+        const startValue = animatedValue;
+        const startTime = (view?.performance ?? performance).now();
+        const sinceLast = startTime - lastSetValueTime;
+        const duration = lastSetValueTime > 0 && sinceLast < PROGRESS_MOTION.VALUE_DURATION
+            ? Math.max(100, sinceLast * 0.9)
+            : PROGRESS_MOTION.VALUE_DURATION;
+        lastSetValueTime = startTime;
+        const step = (now) => {
+            const fraction = Math.min((now - startTime) / duration, 1);
+            animatedValue = startValue + (targetValue - startValue) * fraction;
+            if (animationId === null)
+                draw();
+            if (fraction < 1) {
+                valueAnimationId = requestAnimationFrame(step);
+            }
+            else {
+                valueAnimationId = null;
+                animatedValue = targetValue;
+                if (animationId === null)
+                    draw();
+                if (targetValue >= max())
+                    complete(targetValue);
+            }
+        };
+        valueAnimationId = requestAnimationFrame(step);
+    };
+    component.setIndeterminate = (indeterminate) => {
+        if (component.state)
+            component.state.indeterminate = indeterminate;
+        stopValueAnimation();
+        animatedValue = component.state?.value ?? animatedValue;
+        if (!indeterminate)
+            retargetAmplitude(animatedValue / max());
+        startAnimation();
+        if (!needsAnimation())
+            draw(0);
+    };
+    component.setThickness = (thickness) => {
+        currentThickness = thickness;
+        measure();
+        draw();
+    };
+    component.setShape = (shape) => {
+        if (currentShape === shape)
+            return;
+        currentShape = shape;
+        component.currentShape = shape;
+        if (component.state)
+            component.state.shape = shape;
+        if (isCircular && config.size === undefined)
+            currentSize = getCircularSize({ ...config, shape });
+        if (shape === PROGRESS_SHAPES.WAVY) {
+            amplitudeFrom = 0;
+            amplitudeTarget = 0;
+            amplitudeStarted = (view?.performance ?? performance).now();
+            retargetAmplitude(animatedValue / max());
+        }
+        measure();
+        startAnimation(animationTime);
+        if (!needsAnimation())
+            draw(0);
+    };
+    component.setSize = (size) => {
+        if (!isCircular)
+            return;
+        currentSize = Math.max(PROGRESS_MEASUREMENTS.CIRCULAR.MIN_SIZE, Math.min(size, PROGRESS_MEASUREMENTS.CIRCULAR.MAX_SIZE));
+        measure();
+        draw();
+    };
+    component.getSize = () => (isCircular ? currentSize : undefined);
+    component.hide = () => {
+        component.element.classList.add(component.getClass(PROGRESS_CLASSES.TRANSITION));
+        component.element.setAttribute("hidden", "");
+        stopAnimation();
+        stopValueAnimation();
+        return component;
+    };
+    component.show = () => {
+        component.element.classList.add(component.getClass(PROGRESS_CLASSES.TRANSITION));
+        component.element.removeAttribute("hidden");
+        measure();
+        startAnimation(animationTime);
+        if (!needsAnimation())
+            draw(0);
+        return component;
+    };
+    component.isVisible = () => !component.element.hasAttribute("hidden");
+    const resize = () => {
+        measure();
+        draw();
+    };
+    if (!initialize()) {
+        requestAnimationFrame(() => {
+            if (initialize()) {
+                startAnimation();
+                draw();
+            }
+        });
+    }
+    const resizeCleanup = observeCanvasResize(component.element, canvas, resize);
+    if (isWavy() && !isIndeterminate()) {
+        amplitudeStarted = (view?.performance ?? performance).now();
+        retargetAmplitude(animatedValue / max());
+    }
+    draw();
+    startAnimation();
+    const originalDestroy = component.lifecycle?.destroy;
+    component.lifecycle = {
+        ...(component.lifecycle ?? {}),
+        destroy: () => {
+            resizeCleanup();
+            colors.destroy();
+            stopAnimation();
+            stopValueAnimation();
+            originalDestroy?.();
+        },
+    };
+    return {
+        ...component,
+        canvas,
+        ctx: context?.ctx,
+        draw,
+        resize,
+    };
+};

package/dist/components/progress/features/circular.d.ts

@@ -1,9 +1,19 @@
+import { CanvasContext } from "./canvas.js";
+import { ProgressColors } from "./colors.js";
+/** What a frame of the circular indicator needs */
+export interface CircularFrame {
+    /** Progress from 0 to 1; ignored when indeterminate */
+    progress: number;
+    indeterminate: boolean;
+    /** Arc thickness in pixels */
+    strokeWidth: number;
+    /** Milliseconds since the animation started */
+    time: number;
+    /** Wave height in pixels; 0 draws a flat arc */
+    waveAmplitude: number;
+    colors: ProgressColors;
+}
 /**
- * Circular progress drawing functionality
+ * Draws one frame of the circular indicator.
  */
-import { ProgressConfig, ProgressShape } from "../types";
-import { CanvasContext } from "./canvas";
-/**
- * Draws circular progress on canvas
- */
-export declare const drawCircularProgress: (context: CanvasContext, config: ProgressConfig, value: number, max: number, isIndeterminate: boolean, animationTime?: number, currentShape?: ProgressShape) => void;
+export declare const drawCircularProgress: (context: CanvasContext, frame: CircularFrame) => void;

package/dist/components/progress/features/circular.js

@@ -0,0 +1,71 @@
+import { circularIndeterminateFrame } from "./motion.js";
+import { PROGRESS_MEASUREMENTS, PROGRESS_WAVE } from "../constants.js";
+const TWO_PI = Math.PI * 2;
+const START_ANGLE = -Math.PI / 2;
+const drawArc = (ctx, centerX, centerY, radius, from, sweep, color, strokeWidth, wave) => {
+    if (sweep <= 0 || radius <= 0)
+        return;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = strokeWidth;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    if (!wave || wave.amplitude <= 0) {
+        ctx.arc(centerX, centerY, radius, from, from + sweep);
+        ctx.stroke();
+        return;
+    }
+    const arcLength = sweep * radius;
+    const steps = Math.max(8, Math.ceil(arcLength / Math.max(1, wave.wavelength / 24)));
+    for (let i = 0; i <= steps; i++) {
+        const t = i / steps;
+        const angle = from + sweep * t;
+        const along = t * arcLength;
+        const r = radius + wave.amplitude * Math.sin((TWO_PI * (along - wave.phase)) / wave.wavelength);
+        const x = centerX + Math.cos(angle) * r;
+        const y = centerY + Math.sin(angle) * r;
+        if (i === 0)
+            ctx.moveTo(x, y);
+        else
+            ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+};
+export const drawCircularProgress = (context, frame) => {
+    const { ctx, width, height } = context;
+    const { strokeWidth, colors, indeterminate, waveAmplitude } = frame;
+    if (width <= 0 || height <= 0)
+        return;
+    const size = Math.min(width, height);
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const radius = size / 2 - strokeWidth / 2 - waveAmplitude;
+    if (radius <= 0)
+        return;
+    ctx.clearRect(0, 0, width, height);
+    const scale = size / PROGRESS_MEASUREMENTS.CIRCULAR.SIZE;
+    const wavelength = PROGRESS_WAVE.CIRCULAR.WAVELENGTH * scale;
+    const wave = waveAmplitude > 0
+        ? {
+            amplitude: waveAmplitude,
+            wavelength,
+            phase: ((frame.time / 1000) * PROGRESS_WAVE.SPEED * wavelength) % wavelength,
+        }
+        : undefined;
+    const gapPx = PROGRESS_MEASUREMENTS.CIRCULAR.GAP + strokeWidth;
+    const gapSweep = size > 0 ? (gapPx / (Math.PI * size)) * TWO_PI : 0;
+    if (indeterminate) {
+        const { rotation, sweep } = circularIndeterminateFrame(frame.time);
+        const start = (rotation * Math.PI) / 180;
+        drawArc(ctx, centerX, centerY, radius, start, sweep * TWO_PI, colors.indicator, strokeWidth, wave);
+        return;
+    }
+    const progress = Math.min(1, Math.max(0, frame.progress));
+    const sweep = progress * TWO_PI;
+    const gap = Math.min(sweep, gapSweep);
+    const trackSweep = TWO_PI - sweep - gap * 2;
+    if (trackSweep > 0) {
+        drawArc(ctx, centerX, centerY, radius, START_ANGLE + sweep + gap, trackSweep, colors.track, strokeWidth);
+    }
+    drawArc(ctx, centerX, centerY, radius, START_ANGLE, sweep, colors.indicator, strokeWidth, wave);
+};

package/dist/components/progress/features/colors.d.ts

@@ -0,0 +1,16 @@
+export interface ProgressColors {
+    indicator: string;
+    track: string;
+    stop: string;
+    buffer: string;
+}
+/**
+ * Keeps the palette for one indicator, refreshed when the theme changes.
+ * @param onChange - called after the colours change, to redraw
+ * @returns the palette getter and a cleanup function
+ */
+export declare const createColors: (onChange: () => void) => {
+    get: () => ProgressColors;
+    refresh: () => void;
+    destroy: () => void;
+};

package/dist/components/progress/features/colors.js

@@ -0,0 +1,40 @@
+import { getThemeColor } from "../../../core/utils/index.js";
+import { onThemeChange } from "../../../core/utils/theme.js";
+import { PROGRESS_COLORS } from "../constants.js";
+const FALLBACKS = {
+    indicator: "#6750A4",
+    track: "#E8DEF8",
+    stop: "#6750A4",
+    buffer: "#EADDFF",
+};
+const read = () => ({
+    indicator: getThemeColor(PROGRESS_COLORS.INDICATOR, { fallback: FALLBACKS.indicator }),
+    track: getThemeColor(PROGRESS_COLORS.TRACK, { fallback: FALLBACKS.track }),
+    stop: getThemeColor(PROGRESS_COLORS.STOP, { fallback: FALLBACKS.stop }),
+    buffer: getThemeColor(PROGRESS_COLORS.BUFFER, { fallback: FALLBACKS.buffer }),
+});
+export const createColors = (onChange) => {
+    let colors = FALLBACKS;
+    let read_ = false;
+    const refresh = () => {
+        try {
+            colors = read();
+            read_ = true;
+        }
+        catch {
+        }
+    };
+    const offThemeChange = onThemeChange(() => {
+        refresh();
+        onChange();
+    });
+    return {
+        get: () => {
+            if (!read_)
+                refresh();
+            return colors;
+        },
+        refresh,
+        destroy: offThemeChange,
+    };
+};

package/dist/components/progress/features/index.d.ts

@@ -2,7 +2,7 @@
  * Progress component features
  * Exports all features used by the progress component
  */
-export { withCanvas } from './canvas';
-export { withState } from './state';
-export { drawCircularProgress } from './circular';
-export { drawLinearProgress } from './linear';
+export { withCanvas } from "./canvas.js";
+export { withState } from "./state.js";
+export { drawCircularProgress } from "./circular.js";
+export { drawLinearProgress } from "./linear.js";

package/dist/components/progress/features/index.js

@@ -0,0 +1,4 @@
+export { withCanvas } from "./canvas.js";
+export { withState } from "./state.js";
+export { drawCircularProgress } from "./circular.js";
+export { drawLinearProgress } from "./linear.js";

package/dist/components/progress/features/linear.d.ts

@@ -1,9 +1,25 @@
+import { CanvasContext } from "./canvas.js";
+import { ProgressColors } from "./colors.js";
+/** What a frame of the linear indicator needs */
+export interface LinearFrame {
+    /** Progress from 0 to 1; ignored when indeterminate */
+    progress: number;
+    /** Buffer from 0 to 1, this library's own extension; 0 for none */
+    buffer: number;
+    indeterminate: boolean;
+    /** Track and indicator thickness in pixels */
+    strokeWidth: number;
+    /** Milliseconds since the animation started */
+    time: number;
+    /** Wave height in pixels; 0 draws a flat indicator */
+    waveAmplitude: number;
+    /** Right to left, in which case the indicator runs from the right */
+    rtl: boolean;
+    colors: ProgressColors;
+    /** Whether to mark the end of the track with a dot */
+    showStopIndicator: boolean;
+}
 /**
- * Linear progress drawing functionality
+ * Draws one frame of the linear indicator.
  */
-import { ProgressConfig, ProgressShape } from "../types";
-import { CanvasContext } from "./canvas";
-/**
- * Draws linear progress on canvas with shape support
- */
-export declare const drawLinearProgress: (context: CanvasContext, config: ProgressConfig, value: number, max: number, buffer: number, isIndeterminate: boolean, animationTime?: number, showStopIndicator?: boolean, currentShape?: ProgressShape) => void;
+export declare const drawLinearProgress: (context: CanvasContext, frame: LinearFrame) => void;

package/dist/components/progress/features/linear.js

@@ -0,0 +1,104 @@
+import { linearIndeterminateFrame } from "./motion.js";
+import { PROGRESS_MEASUREMENTS, PROGRESS_WAVE } from "../constants.js";
+const drawBar = (ctx, width, centerY, strokeWidth, from, to, color, rtl, wave) => {
+    const start = Math.min(from, to);
+    const end = Math.max(from, to);
+    if (end - start <= 0)
+        return;
+    const cap = strokeWidth / 2;
+    const toX = (fraction) => {
+        const f = rtl ? 1 - fraction : fraction;
+        return Math.min(Math.max(f * width, cap), width - cap);
+    };
+    const x0 = toX(start);
+    const x1 = toX(end);
+    if (Math.abs(x1 - x0) < 1e-6 && start !== end)
+        return;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = strokeWidth;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    if (!wave || wave.amplitude <= 0) {
+        ctx.moveTo(Math.min(x0, x1), centerY);
+        ctx.lineTo(Math.max(x0, x1), centerY);
+        ctx.stroke();
+        return;
+    }
+    const left = Math.min(x0, x1);
+    const right = Math.max(x0, x1);
+    const step = Math.max(1, wave.wavelength / 24);
+    for (let x = left; x <= right; x += step) {
+        const y = centerY + wave.amplitude * Math.sin((2 * Math.PI * (x - wave.phase)) / wave.wavelength);
+        if (x === left)
+            ctx.moveTo(x, y);
+        else
+            ctx.lineTo(x, y);
+    }
+    const endY = centerY + wave.amplitude * Math.sin((2 * Math.PI * (right - wave.phase)) / wave.wavelength);
+    ctx.lineTo(right, endY);
+    ctx.stroke();
+};
+const drawStopIndicator = (ctx, width, height, color, rtl) => {
+    const size = Math.min(PROGRESS_MEASUREMENTS.LINEAR.STOP_INDICATOR, height);
+    const offset = Math.min((height - size) / 2, PROGRESS_MEASUREMENTS.LINEAR.STOP_TRAILING_SPACE);
+    const x = rtl ? size / 2 + offset : width - size / 2 - offset;
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(x, height / 2, size / 2, 0, 2 * Math.PI);
+    ctx.fill();
+};
+export const drawLinearProgress = (context, frame) => {
+    const { ctx, width, height } = context;
+    const { strokeWidth, colors, rtl, indeterminate, waveAmplitude } = frame;
+    if (width <= 0 || height <= 0)
+        return;
+    const centerY = height / 2;
+    ctx.clearRect(0, 0, width, height);
+    const gapPx = PROGRESS_MEASUREMENTS.LINEAR.GAP + strokeWidth;
+    const gap = width > 0 ? gapPx / width : 0;
+    const wavelength = indeterminate
+        ? PROGRESS_WAVE.LINEAR.INDETERMINATE_WAVELENGTH
+        : PROGRESS_WAVE.LINEAR.WAVELENGTH;
+    const wave = waveAmplitude > 0
+        ? {
+            amplitude: waveAmplitude,
+            wavelength,
+            phase: ((frame.time / 1000) * PROGRESS_WAVE.SPEED * wavelength) % wavelength,
+        }
+        : undefined;
+    const bar = (from, to, color, wavy = false) => drawBar(ctx, width, centerY, strokeWidth, from, to, color, rtl, wavy ? wave : undefined);
+    if (indeterminate) {
+        const { firstHead, firstTail, secondHead, secondTail } = linearIndeterminateFrame(frame.time);
+        if (firstHead < 1 - gap) {
+            bar(firstHead > 0 ? firstHead + gap : 0, 1, colors.track);
+        }
+        if (firstHead - firstTail > 0) {
+            bar(firstTail, firstHead, colors.indicator, true);
+        }
+        if (firstTail > gap) {
+            bar(secondHead > 0 ? secondHead + gap : 0, firstTail < 1 ? firstTail - gap : 1, colors.track);
+        }
+        if (secondHead - secondTail > 0) {
+            bar(secondTail, secondHead, colors.indicator, true);
+        }
+        if (secondTail > gap) {
+            bar(0, secondTail - gap, colors.track);
+        }
+        return;
+    }
+    const progress = Math.min(1, Math.max(0, frame.progress));
+    const trackStart = progress + Math.min(progress, gap);
+    if (trackStart <= 1) {
+        bar(trackStart, 1, colors.track);
+    }
+    if (frame.buffer > progress) {
+        const bufferEnd = Math.min(1, frame.buffer);
+        if (bufferEnd > trackStart)
+            bar(trackStart, bufferEnd, colors.buffer);
+    }
+    bar(0, progress, colors.indicator, true);
+    if (frame.showStopIndicator) {
+        drawStopIndicator(ctx, width, height, colors.stop, rtl);
+    }
+};

package/dist/components/progress/features/motion.d.ts

@@ -0,0 +1,43 @@
+/**
+ * A cubic Bézier easing, as CSS and Compose define it: the curve through
+ * (0,0), (x1,y1), (x2,y2), (1,1), solved for y at a given x.
+ */
+export declare const cubicBezier: (x1: number, y1: number, x2: number, y2: number) => ((t: number) => number);
+export declare const emphasizedAccelerate: (t: number) => number;
+export declare const emphasizedDecelerate: (t: number) => number;
+export declare const standardEasing: (t: number) => number;
+/** Where the two indeterminate bars are, as fractions of the track */
+export interface LinearIndeterminateFrame {
+    firstHead: number;
+    firstTail: number;
+    secondHead: number;
+    secondTail: number;
+}
+/**
+ * The linear indeterminate frame at `elapsed` milliseconds: two bars, each
+ * from its tail to its head, on the Compose keyframes over a 1750ms cycle.
+ */
+export declare const linearIndeterminateFrame: (elapsed: number) => LinearIndeterminateFrame;
+/** How far round the arc has turned, and how much of the circle it covers */
+export interface CircularIndeterminateFrame {
+    /** Rotation of the arc's start, in degrees clockwise from 3 o'clock */
+    rotation: number;
+    /** Length of the arc as a fraction of the circle */
+    sweep: number;
+}
+/**
+ * The circular indeterminate frame at `elapsed` milliseconds: a 1080 degree
+ * linear turn over the 6 second cycle, four 90 degree kicks on top of it, and
+ * an arc that grows to 87% by half way and shrinks back to 10%.
+ */
+export declare const circularIndeterminateFrame: (elapsed: number) => CircularIndeterminateFrame;
+/**
+ * How tall the wave is for a determinate value: flat at both ends of the
+ * range, full in between (WavyProgressIndicatorDefaults.indicatorAmplitude).
+ */
+export declare const waveAmplitudeTarget: (progress: number) => number;
+/**
+ * The wave's height part way through a change: standard easing on the way in,
+ * emphasized accelerate on the way out, over 500ms either way.
+ */
+export declare const waveAmplitudeAt: (from: number, target: number, elapsed: number) => number;