import { LitElement } from 'lit';
/**
 * Generic box with configured css styling
 * [docs](https://pyrojs.com/el/badge)
 *
 * ```html
 * <pyro-box style="width: 600px"><p>Box contents</p></pyro-box>
 * ```
 *
 * @tag pyro-box
 *
 * @slot - Contents of the box
 *
 * @cssprop [--pyro-box-text-color=var(--pyro-text-color)] - `color`
 * @cssprop [--pyro-box-background=var(--pyro-surface-color)] - `background`
 * @cssprop [--pyro-box-surface-color=var(--pyro-surface-color)] - `background`
 * @cssprop [--pyro-box-foreground-color=var(--pyro-foreground-color)] - `background`
 *
 */
export declare class PyroBox extends LitElement {
    static styles: import('lit').CSSResult;
    /** Background color of the box */
    variant?: 'foreground' | 'surface' | 'transparent' | '';
    render(): import('lit-html').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'pyro-box': PyroBox;
    }
}