import { Cre8Element } from '../cre8-element';
/**
 * Skeleton Loader allows for the ability to create placeholder UI loading states.
 * Developers are encouraged to pass into the Skeleton Loader their own parameters
 * to create simple (or complex) loading screens.
 *
 * ## How to Use
 * Skeleton states are simplified versions of components used on an initial page load
 * to indicate that the information on the page has not fully loaded yet.
 * They only appear for only a few seconds, disappearing once components and content populate the page.
 * These loaders use motion to convey that the page is not stuck and that data is still being loaded.
 * This can help to reduce user uncertainty. Skeleton objects should generally be visualized
 * by simple primitives which mimic the original content in a recognizable way.
 * It is recommended to use a more elaborate form if that is needed to make the component recognizable.
 *
 * Never represent toast notifications, overflow menus, dropdown items, modals, and loaders with skeleton states.
 * Elements inside a modal may have a skeleton state, but the modal itself should not.
 *
 * **IMPORTANT!** This is not a loading element and will provide no value to a screen reader user,
 * this is a decorative element only!
 */
export declare class Cre8SkeletonLoader extends Cre8Element {
    static styles: import("lit").CSSResult[];
    /**
     * Style variant
     * - **rectangle** renders a featureless rectangle as a placeholder for loading elements
     * - **square** renders a featureless square as a placeholder for loading elements
     * - **circle** renders a featureless circle as a placeholder for loading elements
     * @type {"rectangle" | "square" | "circle"}
     * @attr {string}
     */
    variant?: 'rectangle' | 'square' | 'circle';
    /**
     * Height inline style
     * 1. Used to set a height on the skeleton if specific size is needed
     * @attr {string}
     */
    height?: string;
    /**
     * Width inline style
     * 1. Used to set a width on the skeleton if specific size is needed
     * @attr {string}
     */
    width?: string;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cre8-skeleton-loader': Cre8SkeletonLoader;
    }
}
export default Cre8SkeletonLoader;
//# sourceMappingURL=skeleton-loader.d.ts.map