Presence
Presence stacks overlapping avatars (`<pura-avatar>`), derives how many people are online from each one's `status`, and shows a subtle live pulse. Use it to indicate who is present in a document, room, or collaboration; when the number of avatars exceeds `max`, the overflow collapses into a "+N" bubble that opens a popover with the remaining roster. It is agent-native: it exposes `role="group"`, a count region with `aria-live`, stable `data-*` attributes (`data-total`, `data-online`, `data-overflow`) on the host and the inner group, plus a global registry in `window.__puraPresence` by instance id for agent reading.
Preview
<pura-presence max="4" size="md" label="People in the document">
<pura-avatar initials="AS" status="online"></pura-avatar>
<pura-avatar initials="BL" status="online"></pura-avatar>
<pura-avatar initials="CR" status="busy"></pura-avatar>
<pura-avatar initials="DM" status="online"></pura-avatar>
<pura-avatar initials="EF" status="offline"></pura-avatar>
<pura-avatar initials="GP" status="online"></pura-avatar>
</pura-presence>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
max | number | 0 (all) | Maximum avatars shown before collapsing into a "+N" bubble. 0, absent, or non-positive shows all. When collapsing, it reserves a slot for the bubble. |
size | "sm" | "md" | "lg" | md | Passed down to each child <pura-avatar> and adjusts the stack overlap (sm tighter, lg wider). |
label | string | Online presence | Accessible name (aria-label) of the presence stack. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/presence.js"></script>import "./pura/lib/presence.js";