# Media Use when you show images or people. ## Index - [`avatar`](#avatar) — Image with initials fallback and optional status dot - [`avatar-group`](#avatar-group) — Overlapping avatar stack with +N overflow - [`gallery`](#gallery) — Image lightbox with navigation and keyboard control - [`image-viewer`](#image-viewer) — Zoomable, pannable image with zoom controls --- ## avatar Image with automatic fallback to initials + optional status dot. ```html

``` ```ts import { Avatar } from '@42/core/avatar'; new Avatar(root, { name: 'Jane Doe', status: 'online' }); ``` Options: `name` (derives initials), `status` ('online'|'offline'|'busy'|'away'|null) Methods: `setStatus(s)`, `setSrc(url)` Events: `avatar:load`, `avatar:error`, `avatar:statuschange` → `{ status }` --- ## avatar-group Overlapping stack of avatars with optional `+N` overflow collapsing. Headless: the controller reflects `data-stacked` / `data-spacing` and caps visible avatars; the overlap visuals live in CSS. ```html

…

``` ```ts import { AvatarGroup } from '@42/core/avatar-group'; const group = new AvatarGroup(root, { stacked: true, spacing: 'md', max: 4, label: 'Members' }); group.setMax(2); ``` Options: `stacked` (default true), `spacing` ('sm'|'md'|'lg', default 'md'), `max` (0 = no limit), `label` (aria-label) Methods: `setStacked(boolean)`, `setSpacing('sm'|'md'|'lg')`, `setMax(number)`, `refresh()` Events: `avatar-group:change` → `{ total, visible, overflow }` --- ## gallery Image lightbox with navigation, loop, keyboard, scroll lock. ```html

``` ```ts import { Gallery } from '@42/core/gallery'; new Gallery(root, { loop: true, closeOnEscape: true, lockScroll: true }); ``` Options: `loop`, `closeOnEscape`, `lockScroll` Events: `gallery:open`, `gallery:close`, `gallery:change` → `{ index, src }` --- ## image-viewer Zoomable image with pan, expand/collapse, zoom controls. ```html

``` ```ts import { ImageViewer } from '@42/core/image-viewer'; new ImageViewer(root, { minZoom: 0, maxZoom: 7, expanded: false }); ``` Options: `minZoom`, `maxZoom`, `expanded` Events: `image-viewer:zoom` → `{ zoom, scale, expanded }`