# Avatar

Rounded image with an automatic text fallback when the image fails to load.

This Angular implementation follows the shadcn Avatar information architecture while adapting it to standalone Angular imports, signal-friendly inputs, and local menu primitives.

## Import

```ts
import {
  AvatarBadgeComponent,
  AvatarComponent,
  AvatarFallbackComponent,
  AvatarGroupComponent,
  AvatarGroupCountComponent,
  AvatarImageComponent,
} from '@edsis/component/avatar';
```

## Usage

```html
<Avatar size="lg">
  <AvatarImage src="/me.jpg" alt="Ada Lovelace" />
  <AvatarFallback>AL</AvatarFallback>
  <AvatarBadge class="bg-emerald-600" aria-hidden="true"></AvatarBadge>
</Avatar>
```

If `src` fails to load, the `<img>` is removed and the fallback becomes visible.

## Composition

```text
Avatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadge

AvatarGroup
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
└── AvatarGroupCount
```

## Common patterns

### Basic avatar

```html
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" class="grayscale" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>
```

### Presence badge

Use `AvatarBadge` for online status, synced state, or a compact icon action.

```html
<Avatar>
  <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
  <AvatarFallback>ER</AvatarFallback>
  <AvatarBadge class="bg-emerald-600" aria-hidden="true"></AvatarBadge>
</Avatar>
```

### Avatar group

`AvatarGroup` applies the overlapping stack treatment, while `AvatarGroupCount` handles the overflow counter.

```html
<AvatarGroup class="grayscale">
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
    <AvatarFallback>ML</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
    <AvatarFallback>ER</AvatarFallback>
  </Avatar>
  <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>
```

### Size variants

Use the root `size` input instead of repeating manual width and height classes.

```html
<div class="flex items-center gap-3">
  <Avatar size="sm">...</Avatar>
  <Avatar>...</Avatar>
  <Avatar size="lg">...</Avatar>
</div>
```

### Dropdown trigger composition

Avatar stays presentational. When it opens a menu, wrap it in a button and let the button or menu trigger own focus and keyboard handling.

```html
<button
  Button
  variant="ghost"
  size="icon"
  class="h-10 w-10 rounded-full p-0"
  [MenuTrigger]="accountMenu"
>
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="Ada Lovelace" />
    <AvatarFallback>AL</AvatarFallback>
  </Avatar>
</button>
```

### RTL

Avatar itself does not need different markup in right-to-left layouts. Set `dir="rtl"` on the surrounding surface.

```html
<section dir="rtl" lang="ar" class="flex items-center gap-4 text-right">
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" class="grayscale" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</section>
```

## API reference

| Primitive                   | Input(s)                         |
| --------------------------- | -------------------------------- |
| `AvatarComponent`           | `size`, `class`                  |
| `AvatarImageComponent`      | `src` (required), `alt`, `class` |
| `AvatarFallbackComponent`   | `class`                          |
| `AvatarBadgeComponent`      | `class`                          |
| `AvatarGroupComponent`      | `class`                          |
| `AvatarGroupCountComponent` | `class`                          |

`AvatarComponent.size` accepts `'default' | 'sm' | 'lg'` and defaults to `'default'`.

## Styling and theming

Tokens consumed: `--muted`, `--muted-foreground`, `--background`, `--primary`, and `--primary-foreground`.

The default avatar size is `h-10 w-10`. Use the `size` input for the common variants and pass `class` for brand-specific overrides such as grayscale, custom borders, or alternate badge colors.

`AvatarBadge` is the right place for presence color overrides. The avatar keeps its image layer clipped to its radius while allowing the badge to extend beyond the lower-right edge, so presence dots remain fully visible. `AvatarGroupCount` can be restyled when overflow counters should match a specific product palette.

## Accessibility

Always pass a meaningful `alt` to `<AvatarImage>`. If the avatar is purely
decorative (user's name already shown), use `alt=""`. The fallback text is
readable by screen readers.

Keep fallback text short, typically initials, so it remains legible in smaller sizes.

## Keyboard interactions

Avatar itself is not interactive. If it is used to open a menu, dialog, or popover, wrap it in a native button or another focusable trigger primitive so Tab, Enter, and Space behavior stays with the interactive host.

## Angular notes

- `size` is exposed as a typed Angular input on `Avatar`.
- Grouping is handled by dedicated primitives instead of utility-only composition, which keeps Angular templates explicit and reusable.
- Image fallback is handled internally by hiding the `<img>` after its `error` event.

## Source parity

This Angular implementation follows the shadcn Avatar concepts, examples, and API shape while adapting menu composition to the local `Button` plus menu primitives and Angular standalone imports.