import { PropertyValueMap } from 'lit';
import { DdsElement } from '../../internal/dds-hu-element';
export type SkeletonVariant = 'text' | 'circular' | 'rectangular';
export type SkeletonAnimation = 'wave' | 'pulse' | 'custom';
/**
 * `dap-ds-skeleton`
 * @summary A skeleton loader component for displaying placeholder content while loading.
 * @element dap-ds-skeleton
 * @title - Skeleton
 *
 * @example Basic Usage
 * ```html
 * <dap-ds-skeleton></dap-ds-skeleton>
 * <dap-ds-skeleton variant="circular"></dap-ds-skeleton>
 * <dap-ds-skeleton variant="rectangular" width="200px" height="100px"></dap-ds-skeleton>
 * <dap-ds-skeleton animation="custom" custom-keyframes="0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }"></dap-ds-skeleton>
 * ```
 *
 * @csspart base - The main skeleton container.
 *
 * @cssprop --dds-skeleton-base-color - Solid background color always visible (default: rgb(0 0 0 / 11%)); shown as a static block when prefers-reduced-motion is active
 * @cssprop --dds-skeleton-color - The shimmer overlay gradient (default: linear-gradient(90deg, transparent, rgb(0 0 0 / 10%), transparent))
 * @cssprop --dds-skeleton-animation-duration - Duration of the loading animation (default: 1.5s)
 * @cssprop --dds-skeleton-border-radius - Border radius for rectangular skeletons (default: var(--dds-radius-small))
 * @cssprop --dds-skeleton-text-spacing - Spacing between text lines in text variant (default: var(--dds-spacing-100))
 * @cssprop --dds-skeleton-animation-timing-function - Timing function for the loading animation (default: ease-in-out)
 */
export default class DapDSSkeleton extends DdsElement {
    static tagName: string;
    /**
     * The variant of the skeleton.
     * @type {"text" | "circular" | "rectangular"}
     */
    variant: SkeletonVariant;
    /**
     * The width of the skeleton. Can be any valid CSS width value.
     */
    width?: string;
    /**
     * The height of the skeleton. Can be any valid CSS height value.
     */
    height?: string;
    /**
     * Whether to animate the skeleton.
     */
    noAnimation: boolean;
    /**
     * The animation type for the skeleton.
     * @type {"wave" | "pulse" | "custom"}
     */
    animation: SkeletonAnimation;
    /**
     * Custom keyframes for the animation when animation="custom".
     * Should be a valid CSS keyframes string without the @keyframes wrapper.
     * @example "0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }"
     */
    customKeyframes?: string;
    static readonly styles: import('lit').CSSResult;
    private _userCustomStyles?;
    private _generateKeyframesCSS;
    private _updateMergedStyles;
    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    render(): import('lit-html').TemplateResult<1>;
}