# Source: `components/velin-live-dot.js` ## Minimal working example Copy-paste starter (load CSS + `velinstyle-components` / `bootFromDOM` as needed): ```html Realtime ``` _Example from curated docgen starter map._ ## Description Realtime Tiny status indicator: a coloured dot with an optional concentric pulse (driven by the velin-live-pulse keyframe in chart-animation.css). Slot children render after the dot for an inline "Live - Streaming" label. Attributes: status "live" (default) | "paused" | "warning" | "error" | "muted" Determines dot colour via the CSS custom prop --velin-live-color. pulse "true" (default) | "false" Disables the looped pulse. ## Accessibility WCAG contract status: **pass** (framework target: AAA). - **Roles:** `status` - **Notes:** Status exposed via aria-label on host, not color alone. ## Attributes | Attribute | Notes | | --- | --- | | `status` | Observed — triggers `attributeChangedCallback` when changed | | `pulse` | Observed — triggers `attributeChangedCallback` when changed | ## Events _None._ ## CSS parts _None._ ## Slots - `(default)` ## Public API _No public methods detected._ ## Related resources - Generated API docs (canonical): [`velin-live-dot.md`](./velin-live-dot.md) - Generated index: [README.md](./README.md) - CLI API: `npx velinstyle wc api velin-live-dot` - Human docs EN (tutorial): `docs/components/live-dot.html` - Human docs DE (tutorial, lang-map): `docs/components/live-punkt.html` - Atelier library (showcases — **not** a 1:1 Component map): `atelier/library/index.html`