import { LitElement } from 'lit';
export interface AvatarProps {
    src?: string;
    alt?: string;
    fallback?: string;
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
}
declare const Avatar_base: (new (...args: any[]) => import("../../util/TooltipMixin.js").TooltipMixinInterface) & (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
/**
 * An avatar component for displaying user profile images with fallback support.
 *
 * Avatars display user profile images with automatic fallback to initials when
 * the image fails to load or is not provided.
 *
 * @element btu-avatar
 *
 * @fires {CustomEvent} btu-avatar-ready - Fired after first render and initialization
 * @fires {CustomEvent<{src: string}>} btu-avatar-image-loaded - Fired when image successfully loads
 * @fires {CustomEvent<{src: string, error: Event}>} btu-avatar-image-error - Fired when image fails to load
 *
 * @cssprop --avatar-size - Custom size (overrides size prop)
 * @cssprop --avatar-bg-color - Fallback background color (default: purple-600)
 * @cssprop --avatar-corner-rounding - How rounded is the avatar (default: circle)
 * @cssprop --avatar-ring-color - Optional ring border color
 * @cssprop --avatar-ring-width - Ring border width (default: 2px)
 *
 * @example
 * ```html
 * <!-- Avatar with image -->
 * <btu-avatar src="#" alt="John Doe" fallback="JD"></btu-avatar>
 *
 * <!-- Avatar with fallback only -->
 * <btu-avatar fallback="JD" size="lg"></btu-avatar>
 * ```
 */
export default class Avatar extends Avatar_base {
    /**
     * Image source URL
     * @attr
     */
    src: string;
    /**
     * Alt text for the image
     * @attr
     */
    alt: string;
    /**
     * Fallback text (typically user initials)
     * @attr
     */
    fallback: string;
    /**
     * Size variant.
     * - 'xs': Extra small (1.5rem)
     * - 'sm': Small (2.25rem)
     * - 'md': Medium (2.5rem) - default
     * - 'lg': Large (3rem)
     * - 'xl': Extra large (3.5rem)
     * - 'xxl': Extra extra large (4rem)
     * @attr
     */
    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
    /** @internal */
    private initialClasses;
    /** @internal */
    private imageLoaded;
    /** @internal */
    private imageError;
    connectedCallback(): void;
    createRenderRoot(): this;
    willUpdate(): void;
    firstUpdated(): void;
    updated(changedProperties: Map<string, any>): void;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'btu-avatar': Avatar;
    }
}
export {};
//# sourceMappingURL=Avatar.d.ts.map