import { LuxenElement } from '../../shared/luxen-element.js';
/**
 * @summary An avatar component for displaying user images, initials, or a default icon.
 * @customElement l-avatar
 *
 * @cssproperty [--size=40px] - Box size (any length). Set it inline (e.g. `style="--size: 20px"`) for an arbitrary size beyond the `size` token scale; the font then follows proportionally. The `size` attribute sets it to the matching token.
 * @cssproperty --color - Background fill color for initials and the default icon.
 * @cssproperty --text-color - Initials/icon color over `--color`. Defaults to an auto-derived readable color; set it to enforce a specific brand color (overrides the automatic choice).
 * @cssproperty --appearance - Set to `circle` for a fully circular avatar (default is a rounded square).
 *
 * @csspart base - The avatar container that paints `--color`; style it (e.g. `color`) to override the auto-derived text color.
 *
 * @cssClass .l-avatar-group - Flex wrapper that overlaps a row of stacked avatars.
 */
export declare class Avatar extends LuxenElement {
    static styles: import("lit").CSSResult[];
    /** Image URL. Falls back to initials (then the default icon) if it fails to load. */
    src: string;
    /** Name used as the accessible label and to derive the initials fallback. */
    name: string;
    /** Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`. */
    size: string;
    /** Count shown in the corner badge. `0` hides the badge. */
    badge: number;
    /** Render as a `<button>` with focus ring and hover states. */
    interactive: boolean;
    private _hasError;
    willUpdate(changed: Map<string, unknown>): void;
    connectedCallback(): void;
    updated(): void;
    private get _tag();
    render(): import("lit").TemplateResult;
    private _onError;
}
//# sourceMappingURL=avatar.d.ts.map