import type { AvatarSize, AvatarType } from './mud-avatar.types'; /** * Avatar — represents a user via a photo, initials, or a generic person icon. * * Pattern A (atom-display): wraps a single piece of slottable content (an * optional notification badge) and otherwise renders its own internal DOM. * * The component picks its visual mode from the `type` prop: * - `photo` — renders `` from `src`; if the image fails to load, falls * back to initials (when `name`/`initials` is set) or the person icon. * - `initials` — renders 1–2 uppercase letters derived from `initials` or * `name`. If neither is set, the icon fallback kicks in. * - `icon` — renders a `mud-icon` (default `person`). * * @element mud-avatar * * @slot badge - Optional notification badge composed on the top-right edge * (e.g. ``), sized to the * avatar's rung. */ export declare class MudAvatar { /** * Visual mode. `photo` renders `src`, `initials` renders 1–2 letters, * `icon` renders the person glyph. * @default 'initials' */ type: AvatarType; /** * Visual size rung. Matches the Figma scale (xs=24, sm=32, md=40, * lg=48, xl=72). * @default 'md' */ size: AvatarSize; /** * Source URL for `type="photo"`. Ignored otherwise. */ src?: string; /** * Alt text for the underlying `` when `type="photo"`. Falls back to * `name` so screen readers always get a description; pass an empty string * to mark the photo as purely decorative. */ alt?: string; /** * Pre-computed initials. When omitted, `name` is used to derive them. * Trimmed to two characters and uppercased before rendering. */ initials?: string; /** * Full name of the represented person. Used to (a) derive `initials` when * none are provided and (b) seed `alt` for the photo so the avatar is * always announced. */ name?: string; /** * Icon glyph for `type="icon"`. Defaults to the generic `person` symbol. * @default 'person' */ iconName: string; /** * Accessible label override. When set, becomes the host's `aria-label` and * the avatar is exposed to AT as a single labelled element. When omitted * the component picks a sensible default (the name, the initials, or * "User avatar"). * * No `attribute: 'aria-label'` mapping — the Host writes `aria-label` on * every render with a derived value, and an explicit attribute observer * would map that write back into this prop mid-render (Stencil warns * "state/prop changed during rendering"). Stencil's implicit kebab→camel * mapping still lets consumers set `aria-label="…"` from HTML. */ ariaLabel?: string; private imageFailed; host: HTMLMudAvatarElement; onSrcChange(): void; syncAccessibleLabel(): void; componentWillLoad(): void; private handleImageError; private get resolvedInitials(); private get resolvedType(); private get accessibleName(); render(): any; }