import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
export declare const ASPECT_RATIO_ELEMENT_TAG_NAME = "vds-aspect-ratio";
/**
 * This element creates a container that will hold the dimensions of the desired aspect ratio. This
 * container is useful for reserving space for media (img, video, etc.) as it loads over the
 * network.
 *
 * 💡 By default it respects the browser's default width and height for media. This is not specific
 * to the loaded media but instead a general setting of `1:2`.
 *
 * @tagname vds-aspect-ratio
 * @cssprop --vds-min-height - The minimum height of the container (defaults to `150px`).
 * @cssprop --vds-max-height - The maximum height of the container (defaults to `100vh`).
 * @cssprop --vds-aspect-ratio - The desired aspect ratio (defaults to `calc(150 / 300)`).
 * @example
 * ```html
 * <vds-aspect-ratio ratio="16:9">
 *   <vds-video-player>
 *     <!-- ... -->
 *   </vds-video-player>
 * </vds-aspect-ratio>
 * ```
 */
export declare class AspectRatioElement extends LitElement {
    static get styles(): CSSResultGroup;
    /**
     * The minimum height of the container.
     */
    minHeight: string;
    /**
     * The maximum height of the container.
     */
    maxHeight: string;
    /**
     * The desired aspect ratio setting given as `'width:height'` (eg: `'16:9'`).
     */
    ratio: string;
    /**
     * Whether the current `ratio` is a valid aspect ratio setting in the form `width:height`.
     */
    get isValidRatio(): boolean;
    protected update(changedProperties: PropertyValues): void;
    render(): TemplateResult;
    protected _updateAspectRatio(): void;
    protected _parseAspectRatio(): [number, number];
}