import { PropertyValueMap } from "lit";
import { FRoot } from "../../mixins/components/f-root/f-root";
import { FDiv } from "../f-div/f-div";
export type FProgressBarState = "primary" | "default" | "success" | "warning" | "danger" | `custom, ${string}`;
export type FProgressBarWidthProp = "fill-container" | `${number}px`;
export type FProgressBarValueProp = `${number}%`;
export declare class FProgressBar extends FRoot {
    /**
     * css loaded from scss file
     */
    static styles: import("lit").CSSResult[];
    /**
     * @attribute value of the fill section in progress-bar
     */
    value?: FProgressBarValueProp;
    /**
     * @attribute Variants are visual representations of progress bar. A progress bar can be round or block.

     */
    variant?: "block" | "curved";
    /**
     * @attribute The medium size is the default and recommended option.
     */
    size?: "large" | "medium" | "small" | "x-small";
    /**
     * @attribute States are used to communicate purpose and it’s connotation. For example, a red color connotes danger, whereas a green color connotes success and so on.
     */
    state?: FProgressBarState;
    /**
     * @attribute By default progress bar takes full width of the parent container. User can change it using width property.
     */
    width?: FProgressBarWidthProp;
    /**
     * progress-bar fill query selector
     */
    fProgressBarFill?: FDiv;
    /**
     * compyr height of the progress-bar
     */
    get computedHeight(): "4px" | "16px" | "12px" | "8px";
    /**
     * compute width of fill in the track
     */
    get computedWidth(): `${number}px` | "100%" | undefined;
    /**
     * validation for all atrributes
     */
    validateProperties(): void;
    fill: string;
    render(): import("lit-html").TemplateResult<1>;
    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
}
/**
 * Required for typescript
 */
declare global {
    interface HTMLElementTagNameMap {
        "f-progress-bar": FProgressBar;
    }
}