@sandlada/mdc/build/components/expressive-progress-indicator/expressive-progress-indicator.d.ts

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

/**
 * @license
 * Copyright 2026 Kai-Orion & Sandlada
 * SPDX-License-Identifier: MIT
 *
 * @fileoverview
 * `mdc-expressive-progress-indicator` — Material Design 3 Expressive progress
 * indicator.
 *
 * Follows the MD3E spec as implemented by Flutter (year2024) and Jetpack
 * Compose:
 *
 * **Linear**:
 * - The active indicator and the track use round caps (pill-shaped) with a
 *   `secondaryContainer` track separated by a visual gap.
 * - A round stop indicator (primary) sits at the trailing edge of the track
 *   while determinate.
 * - Determinate resizes the active bar with a springy, non-overshooting
 *   settle approximating Compose's `SpringSpec(NoBouncy, VeryLow)`.
 * - Indeterminate animates two bars with translateX + scaleX keyframes at
 *   Compose's `LinearAnimationDuration = 1750ms`.
 *
 * **Circular**:
 * - Determinate draws a primary arc plus a `secondaryContainer` track arc,
 *   each with round stroke caps, separated by the same gap (Compose gap
 *   formula).
 * - Indeterminate uses an SVG arc spinner rotating 1440deg over 6000ms while
 *   sweeping between 0.1 and 0.87 of the circle (Compose
 *   `CircularAnimationDuration` + `EasingStandardCubicBezier`).
 *
 * @link https://m3.material.io/components/progress-indicator/specs
 */
import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
import { type ExpressiveProgressIndicatorCircularSize, type ExpressiveProgressIndicatorVariant, type IExpressiveProgressIndicator } from './expressive-progress-indicator.interface';
declare global {
    interface HTMLElementTagNameMap {
        'mdc-expressive-progress-indicator': MDCExpressiveProgressIndicator;
    }
}
declare const MDCExpressiveProgressIndicator_base: Omit<typeof LitElement, "prototype"> & (new () => LitElement & object);
export declare class MDCExpressiveProgressIndicator extends MDCExpressiveProgressIndicator_base implements IExpressiveProgressIndicator {
    static styles: import("lit").CSSResult;
    static shadowRootOptions: ShadowRootInit;
    variant: ExpressiveProgressIndicatorVariant;
    value: number;
    max: number;
    indeterminate: boolean;
    circularSize: ExpressiveProgressIndicatorCircularSize;
    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
    protected render(): TemplateResult;
    protected getRenderClasses(): {
        indeterminate: boolean;
        linear: boolean;
        circular: boolean;
    };
    protected renderLinear(): TemplateResult;
    /**
     * Determinate linear — DOM order matches the Compose draw order so the
     * stop indicator paints on top of the track: track → active → stop.
     */
    protected renderLinearDeterminate(): TemplateResult;
    /**
     * Indeterminate linear — full-width `secondaryContainer` track stays
     * visible (Flutter shows it) while two bars sweep across via CSS
     * keyframes at Compose's 1750ms duration.
     */
    protected renderLinearIndeterminate(): TemplateResult;
    protected renderCircular(): TemplateResult;
    /**
     * Determinate circular — a primary arc plus a `secondaryContainer` track
     * arc separated by the Compose gap: the track starts after the active arc
     * plus `min(sweep, gapSweep)` and sweeps `360 - sweep - 2*gap`. The gap is
     * inflated by one stroke width because the round stroke caps intrude
     * strokeWidth/2 past each dash end, exactly as Compose's
     * `adjustedGapSize = gapSize + strokeWidth`.
     *
     * The 4800px viewBox compensates for Chrome's pathLength rendering
     * inaccuracy (matches @material/web).
     */
    protected renderCircularDeterminate(): TemplateResult;
    /**
     * Indeterminate circular — an SVG arc spinner: the wrapper rotates
     * 1440deg (Compose's 1080 global + 360 additional) while the arc sweeps
     * between 0.1 and 0.87 of the circle with `EasingStandardCubicBezier`.
     */
    protected renderCircularIndeterminate(): TemplateResult;
    /**
     * Reads the resolved circular geometry (size, stroke width, track gap)
     * from the CSS custom properties so the gap math uses the same values the
     * stylesheet renders with. `boxSize` is the SVG canvas size — the host
     * diameter minus the 4px `.progress` margin on each side.
     */
    private getCircularMetrics;
    private setupAria;
}
export {};
//# sourceMappingURL=expressive-progress-indicator.d.ts.map