import { DdsElement } from '../../internal/dds-hu-element'; declare const ProgressBaseWithSized: typeof DdsElement & { new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface; prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface; }; export type ProgressVariant = 'linear' | 'circular'; export type ProgressColor = 'neutral' | 'brand' | 'negative' | 'positive' | 'inverted'; /** * `dap-ds-progress` * @summary Progress indicator component with linear and circular variants. * @element dap-ds-progress * @title - Progress * * @csspart base - The main progress container. * @csspart track - The progress track (background). * @csspart fill - The progress fill (bar for linear, circle for circular). * @csspart label - The progress label text. * @csspart percentage - The percentage text (circular variant only). * @csspart background - The background circle (circular variant only). * * @slot label - Custom label content for the progress indicator. * * @cssprop --dds-progress-track-color - Background color of the progress track (default: var(--dds-neutral-200)) * @cssprop --dds-progress-fill-color-neutral - Fill color for neutral variant (default: var(--dds-icon-neutral-base)) * @cssprop --dds-progress-fill-color-brand - Fill color for brand variant (default: var(--dds-icon-brand-subtle)) * @cssprop --dds-progress-fill-color-negative - Fill color for negative variant (default: var(--dds-icon-negative-subtle)) * @cssprop --dds-progress-fill-color-positive - Fill color for positive variant (default: var(--dds-icon-positive-subtle)) * @cssprop --dds-progress-fill-color-inverted - Fill color for inverted variant (default: var(--dds-icon-neutral-inverted)) * @cssprop --dds-progress-height-xs - Height for extra small linear progress (default: var(--dds-spacing-50)) * @cssprop --dds-progress-height-sm - Height for small linear progress (default: var(--dds-spacing-100)) * @cssprop --dds-progress-height-md - Height for medium linear progress (default: var(--dds-spacing-150)) * @cssprop --dds-progress-height-lg - Height for large linear progress (default: var(--dds-spacing-200)) * @cssprop --dds-progress-height-xl - Height for extra large linear progress (default: var(--dds-spacing-300)) * @cssprop --dds-progress-height-xxl - Height for extra extra large linear progress (default: var(--dds-spacing-400)) * @cssprop --dds-progress-diameter-xs - Diameter for extra small circular progress (default: var(--dds-spacing-600)) * @cssprop --dds-progress-diameter-sm - Diameter for small circular progress (default: var(--dds-spacing-800)) * @cssprop --dds-progress-diameter-md - Diameter for medium circular progress (default: var(--dds-spacing-1200)) * @cssprop --dds-progress-diameter-lg - Diameter for large circular progress (default: var(--dds-spacing-1600)) * @cssprop --dds-progress-diameter-xl - Diameter for extra large circular progress (default: var(--dds-spacing-2000)) * @cssprop --dds-progress-diameter-xxl - Diameter for extra extra large circular progress (default: var(--dds-spacing-2400)) * @cssprop --dds-progress-stroke-width - Stroke width for circular progress (default: var(--dds-spacing-200)) * @cssprop --dds-progress-animation-duration - Duration of indeterminate animation (default: 1.5s) * * @property { 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' } size - The size of the progress indicator. Default is `sm`. See SizedMixin. * @property {string} sizeMap - Responsive size map (e.g. "md:lg"); see SizedMixin. */ export default class DapDSProgress extends ProgressBaseWithSized { /** * The variant of the progress indicator. * @type {"linear" | "circular"} */ variant: ProgressVariant; /** * The color variant of the progress indicator. * @type {"neutral" | "brand" | "negative" | "positive" | "inverted"} */ color: ProgressColor; /** * Current progress value (0-100 for percentage, or 0-max). */ value?: number; /** * Maximum value for the progress indicator. */ max: number; /** * Whether to show the progress as indeterminate (loading animation). */ indeterminate: boolean; /** * Whether to show percentage text in the center (circular variant only). */ showPercentage: boolean; /** * Label text for the progress indicator. */ label?: string; /** * The aria-live politeness level for screen readers. * @type {"polite" | "assertive" | "off"} */ ariaLive: 'polite' | 'assertive' | 'off'; static readonly styles: import('lit').CSSResult; /** Maps effectiveSize from SizedMixin to progress visual size class (xs–lg; xxs maps to xs). */ private get progressSize(); /** * Calculate the percentage value (0-100). */ private get percentage(); /** * Calculate the stroke-dashoffset for circular progress. * Circle circumference = 2πr where r = 45 (radius of circle with center at 50,50 in viewBox 0 0 100 100) */ private get circleOffset(); /** * Render the linear progress variant. */ private renderLinear; /** * Render the circular progress variant. */ private renderCircular; render(): import('lit-html').TemplateResult<1>; } export {};