# `src/components/avatar/Avatar.ts`:

## class: `Avatar`, `btu-avatar`

### Superclass

| Name         | Module | Package |
| ------------ | ------ | ------- |
| `LitElement` |        | lit     |

### Mixins

| Name                | Module                         | Package |
| ------------------- | ------------------------------ | ------- |
| `TooltipMixin`      | /src/util/TooltipMixin.js      |         |
| `EventEmitterMixin` | /src/util/EventEmitterMixin.js |         |
| `ReadyMixin`        | /src/util/ReadyMixin.js        |         |

### Fields

| Name               | Privacy | Type                                            | Default         | Description                                                                                                                                                                                                      | Inherited From |
| ------------------ | ------- | ----------------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `src`              |         | `string`                                        | `''`            | Image source URL                                                                                                                                                                                                 |                |
| `alt`              |         | `string`                                        | `''`            | Alt text for the image                                                                                                                                                                                           |                |
| `fallback`         |         | `string`                                        | `''`            | Fallback text (typically user initials)                                                                                                                                                                          |                |
| `size`             |         | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'` | `'md'`          | Size variant.&#xA;- 'xs': Extra small (1.5rem)&#xA;- 'sm': Small (2.25rem)&#xA;- 'md': Medium (2.5rem) - default&#xA;- 'lg': Large (3rem)&#xA;- 'xl': Extra large (3.5rem)&#xA;- 'xxl': Extra extra large (4rem) |                |
| `tooltip`          |         | `string`                                        | `''`            | Tooltip text content. Set to empty string to remove the tooltip.                                                                                                                                                 | TooltipMixin   |
| `tooltipPosition`  |         | `'top' \| 'bottom' \| 'left' \| 'right'`        | `'top'`         | Position relative to the host element. Auto-flips when constrained by the viewport.                                                                                                                              | TooltipMixin   |
| `tooltipDelay`     |         | `number`                                        | `300`           | Show delay in milliseconds (hover trigger only).                                                                                                                                                                 | TooltipMixin   |
| `tooltipOffset`    |         | `TooltipOffset \| null`                         | `null`          | Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px).                                                                                                                                                 | TooltipMixin   |
| `tooltipNoArrow`   |         | `boolean`                                       | `false`         | Hide the arrow pseudo-element.                                                                                                                                                                                   | TooltipMixin   |
| `tooltipTrigger`   |         | `string`                                        | `'hover focus'` | Space-separated trigger types: 'hover', 'focus', 'click'.                                                                                                                                                        | TooltipMixin   |
| `_onMouseLeave`    | private |                                                 |                 |                                                                                                                                                                                                                  | TooltipMixin   |
| `_onFocusIn`       | private |                                                 |                 |                                                                                                                                                                                                                  | TooltipMixin   |
| `_onFocusOut`      | private |                                                 |                 |                                                                                                                                                                                                                  | TooltipMixin   |
| `_onClick`         | private |                                                 |                 |                                                                                                                                                                                                                  | TooltipMixin   |
| `_onNativeToggle`  | private |                                                 |                 |                                                                                                                                                                                                                  | TooltipMixin   |
| `_onKeyDown`       | private |                                                 |                 |                                                                                                                                                                                                                  | TooltipMixin   |
| `_onDocumentClick` | private | `((e: MouseEvent) => void) \| null`             | `null`          |                                                                                                                                                                                                                  | TooltipMixin   |

### Methods

| Name   | Privacy | Description                                                                                                                                                                                                                                                                        | Parameters                                              | Return    | Inherited From    |
| ------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------- | ----------------- |
| `emit` |         | Dispatches a type-safe CustomEvent with standardized configuration.&#xA;&#xA;All events are configured with:&#xA;- bubbles: true (event propagates up the DOM tree)&#xA;- cancelable: false (event cannot be cancelled)&#xA;- composed: true (event crosses shadow DOM boundaries) | `type: K, detail: UnpackCustomEvent<CustomEventMap[K]>` | `boolean` | EventEmitterMixin |

### Events

| Name                      | Type                                       | Description                                 | Inherited From |
| ------------------------- | ------------------------------------------ | ------------------------------------------- | -------------- |
| `btu-avatar-ready`        | `CustomEvent`                              | Fired after first render and initialization |                |
| `btu-avatar-image-loaded` | `CustomEvent<{src: string}>`               | Fired when image successfully loads         |                |
| `btu-avatar-image-error`  | `CustomEvent<{src: string, error: Event}>` | Fired when image fails to load              |                |

### Attributes

| Name               | Field           | Inherited From |
| ------------------ | --------------- | -------------- |
| `src`              | src             |                |
| `alt`              | alt             |                |
| `fallback`         | fallback        |                |
| `size`             | size            |                |
| `tooltip`          | tooltip         | TooltipMixin   |
| `tooltipPosition`  | tooltipPosition | TooltipMixin   |
| `tooltipDelay`     | tooltipDelay    | TooltipMixin   |
| `tooltipOffset`    | tooltipOffset   | TooltipMixin   |
| `tooltipNoArrow`   | tooltipNoArrow  | TooltipMixin   |
| `tooltipTrigger`   | tooltipTrigger  | TooltipMixin   |
| `tooltip-position` | tooltipPosition | TooltipMixin   |
| `tooltip-delay`    | tooltipDelay    | TooltipMixin   |
| `tooltip-offset`   | tooltipOffset   | TooltipMixin   |
| `tooltip-no-arrow` | tooltipNoArrow  | TooltipMixin   |
| `tooltip-trigger`  | tooltipTrigger  | TooltipMixin   |

### CSS Properties

| Name                       | Default | Description                                     |
| -------------------------- | ------- | ----------------------------------------------- |
| `--avatar-size`            |         | Custom size (overrides size prop)               |
| `--avatar-bg-color`        |         | Fallback background color (default: purple-600) |
| `--avatar-corner-rounding` |         | How rounded is the avatar (default: circle)     |
| `--avatar-ring-color`      |         | Optional ring border color                      |
| `--avatar-ring-width`      |         | Ring border width (default: 2px)                |

<hr/>

## Exports

| Kind                        | Name         | Declaration | Module                          | Package |
| --------------------------- | ------------ | ----------- | ------------------------------- | ------- |
| `js`                        | `default`    | Avatar      | src/components/avatar/Avatar.ts |         |
| `custom-element-definition` | `btu-avatar` | Avatar      | src/components/avatar/Avatar.ts |         |
