Live-Punkt 1.2.0

The <velin-live-dot> Web Komponente renders a tiny status dot with a concentric pulse animation. Pair it with realtime feeds, websocket counters, or "online" indicators next to Nutzer names. English: Live Dot

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Grundlage wo entsprechend angegeben.

Wann verwenden

Presence / live indicators with <velin-live-dot> next to a short label.
When a pulsing dot communicates “online” or “live” without a full badge.

Wann nicht verwenden

Detailed status messages — use Badge or Alerts.
Loading busy states — use Spinners.

Grundlagen

Echtzeit-Feed

Verzögerung erkannt

Getrennt

Pausiert

<velin-live-dot status="live">Realtime feed</velin-live-dot>
<velin-live-dot status="warning">Lag detected</velin-live-dot>
<velin-live-dot status="error">Disconnected</velin-live-dot>
<velin-live-dot status="paused" pulse="false">Paused</velin-live-dot>

Attribut

Attribut	Standard	Hinweise
`status`	`live`	`live` / `paused` / `warning` / `error` / `muted`
`pulse`	`true`	`false` disables the looped ring

Styling

Die Komponente nutzt die --velin-live-color Custom Property, um den Punkt einzufürben. Pro Instanz überschreiben:

<velin-live-dot style="--velin-live-color: hotpink">Custom</velin-live-dot>

The label sits in a slot, so it's read by Screenreader as plain text alongside the dot (which is aria-verborgen).
Pulses respect prefers-reduced-motion: reduce and freeze.