@sandlada/mdc/build/components/progress-indicator/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-progress-indicator` — Material Design 3 progress indicator.
 *
 * Two layout variants via the `variant` attribute:
 * - **linear** (default): a horizontal bar with a track and an active
 *   indicator. Determinate scales the active bar with `transform: scaleX()`
 *   (the @material/web approach); indeterminate animates two bars with
 *   translateX + scaleX keyframes.
 * - **circular**: SVG circle (determinate) or div-based spinner
 *   (indeterminate) with four size presets. The indeterminate spinner uses
 *   three composed CSS animations (expand-arc, rotate-arc, linear-rotate)
 *   matching the @material/web circular implementation for performance
 *   (4.5× better FPS than SVG on Chrome).
 *
 * @link https://m3.material.io/components/progress-indicator/specs
 */
import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
import { type IProgressIndicator, type ProgressIndicatorCircularSize, type ProgressIndicatorVariant } from './progress-indicator.interface';
declare global {
    interface HTMLElementTagNameMap {
        'mdc-progress-indicator': MDCProgressIndicator;
    }
}
declare const MDCProgressIndicator_base: Omit<typeof LitElement, "prototype"> & (new () => LitElement & object);
export declare class MDCProgressIndicator extends MDCProgressIndicator_base implements IProgressIndicator {
    static styles: import("lit").CSSResult;
    static shadowRootOptions: ShadowRootInit;
    variant: ProgressIndicatorVariant;
    value: number;
    max: number;
    indeterminate: boolean;
    circularSize: ProgressIndicatorCircularSize;
    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
    protected render(): TemplateResult;
    protected getRenderClasses(): {
        indeterminate: boolean;
        linear: boolean;
        circular: boolean;
    };
    /**
     * Determinate: `transform: scaleX(value / max)` on the active bar (no
     * clip-path — the @material/web approach). Indeterminate: the primary /
     * secondary bars are shifted by `inset-inline-start` and animated purely
     * with CSS keyframes; the full-width track stays visible underneath.
     */
    protected renderLinear(): TemplateResult;
    protected renderCircular(): TemplateResult;
    /**
     * Determinate circular: SVG with two circles using pathLength=100 and
     * stroke-dashoffset. The track circle is transparent — MD3 circular has
     * no track. The 4800px viewBox compensates for Chrome's pathLength
     * rendering inaccuracy (matches @material/web).
     */
    protected renderCircularDeterminate(): TemplateResult;
    /**
     * Indeterminate circular: div-based spinner (no SVG — 4.5× better FPS
     * on Chrome). Uses three composed CSS animations:
     * 1. expand-arc: arc expands/contracts (1333ms)
     * 2. rotate-arc: arc rotates in 135° increments (5332ms)
     * 3. linear-rotate: container rotates 360° (~1568ms)
     */
    protected renderCircularIndeterminate(): TemplateResult;
    private setupAria;
}
export {};
//# sourceMappingURL=progress-indicator.d.ts.map