## class: `WyAvatar`, `wy-avatar`

Base component to render an avatar. If no `src` is provided, it uses `name` to construct an avatar from initials.

**Used sub components**

*   [`<wy-presence>`](./wy-presence)
*   [`<wy-icon>`](./wy-icon)

### Fields

| Name          | Type                        | Default | Description                                                                                      | Inherited From |
| ------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------ | -------------- |
| `size`        | `number`                    | `32`    | The size of the avatar in pixels. The pixels are translated to rem size with a base of 16px/rem. |                |
| `src`         | `string \| undefined`       | `""`    | Source URL string for the avatar image.                                                          |                |
| `name`        | `string \| undefined`       | `""`    | Name for the avatar. Used as title and for generating initials when \`src\` is not provided.     |                |
| `description` | `string \| undefined`       | `""`    | Description for the avatar. This is appended to the title.                                       |                |
| `isAgent`     | `boolean \| undefined`      | `false` | Whether the avatar represents an agent.                                                          |                |
| `presence`    | `PresenceType \| undefined` |         | Presence status for the avatar.                                                                  |                |

### Attributes

| Name          | Field       | Inherited From |
| ------------- | ----------- | -------------- |
| `size`        | size        |                |
| `src`         | src         |                |
| `name`        | name        |                |
| `description` | description |                |
| `isAgent`     | isAgent     |                |
| `presence`    | presence    |                |

### CSS Parts

| Name                      | Description                                       |
| ------------------------- | ------------------------------------------------- |
| `wy-avatar`               | The avatar component itself.                      |
| `wy-avatar-shape`         | The general styling shape for the avatar.         |
| `wy-avatar-img`           | Any provided avatar image.                        |
| `wy-avatar-initials`      | Avatar initials when no avatar image is provided. |
| `wy-avatar-initials-text` | The text for avatar initials.                     |
| `wy-avatar-type-icon`     | Type overlay icon.                                |
| `wy-avatar-presence`      | Presence indicator.                               |
| `wy-presence-mask`        | Masking for presence indicator.                   |

<details><summary>Private API</summary>

### Fields

| Name          | Privacy   | Type | Default                           | Description | Inherited From |
| ------------- | --------- | ---- | --------------------------------- | ----------- | -------------- |
| `exportParts` | protected |      | `new ShadowPartsController(this)` |             |                |

</details>

<hr/>

## class: `WyAvatarGroup`, `wy-avatar-group`

Group of two or more avatars displayed together.

### Used sub components

*   [`<wy-avatar>`](./wy-avatar)

### Fields

| Name      | Type                        | Default | Description                          | Inherited From |
| --------- | --------------------------- | ------- | ------------------------------------ | -------------- |
| `size`    | `number`                    | `32`    | The overall size of the avatar group |                |
| `members` | `MemberType[] \| undefined` |         | Array of members that can be shown.  |                |

### Attributes

| Name   | Field | Inherited From |
| ------ | ----- | -------------- |
| `size` | size  |                |

### CSS Parts

| Name                     | Description                          |
| ------------------------ | ------------------------------------ |
| `wy-avatar-back`         | The avatar in the back               |
| `wy-avatar-front`        | The avatar in the front              |
| `wy-avatar-back-mask-bg` | Background for the back avatar mask. |
| `wy-avatar-back-mask`    | Cutout mask for the back avatar.     |

<details><summary>Private API</summary>

### Fields

| Name          | Privacy   | Type | Default                           | Description | Inherited From |
| ------------- | --------- | ---- | --------------------------------- | ----------- | -------------- |
| `exportParts` | protected |      | `new ShadowPartsController(this)` |             |                |
| `uniqueId`    | protected |      | `` `wy-avatar-${S4()}` ``         |             |                |

</details>

<hr/>

## class: `WyAvatarHeader`, `wy-avatar-header`

Wrapper for displaying a description under an avatar.

### Fields

| Name          | Type                  | Default | Description                 | Inherited From |
| ------------- | --------------------- | ------- | --------------------------- | -------------- |
| `description` | `string \| undefined` |         | Any description to display. |                |

### Attributes

| Name          | Field       | Inherited From |
| ------------- | ----------- | -------------- |
| `description` | description |                |

### CSS Parts

| Name                    | Description                        |
| ----------------------- | ---------------------------------- |
| `wy-avatar-header`      | The avatar header component itself |
| `wy-avatar-description` |                                    |

### Slots

| Name       | Description                     |
| ---------- | ------------------------------- |
| `Standard` | slot for any avatar to display. |

<details><summary>Private API</summary>

### Fields

| Name          | Privacy   | Type | Default                           | Description | Inherited From |
| ------------- | --------- | ---- | --------------------------------- | ----------- | -------------- |
| `exportParts` | protected |      | `new ShadowPartsController(this)` |             |                |

</details>

<hr/>

## Exports

| Kind                        | Name               | Declaration    | Module                         | Package |
| --------------------------- | ------------------ | -------------- | ------------------------------ | ------- |
| `js`                        | `WyAvatar`         | WyAvatar       | lib/components/ui/wy-avatar.ts |         |
| `custom-element-definition` | `wy-avatar`        | WyAvatar       | lib/components/ui/wy-avatar.ts |         |
| `js`                        | `WyAvatarGroup`    | WyAvatarGroup  | lib/components/ui/wy-avatar.ts |         |
| `custom-element-definition` | `wy-avatar-group`  | WyAvatarGroup  | lib/components/ui/wy-avatar.ts |         |
| `js`                        | `WyAvatarHeader`   | WyAvatarHeader | lib/components/ui/wy-avatar.ts |         |
| `custom-element-definition` | `wy-avatar-header` | WyAvatarHeader | lib/components/ui/wy-avatar.ts |         |
