status-wc

Visual state indicator: live, recording, streaming, presence (online/away/busy/offline), system state (running/paused/stopped/error). Variant drives color + animation.

Overview

<status-wc> is a presentational primitive that shows the current ongoing state of an entity — a stream, a user, a process, a service. The variant attribute drives color and animation; CSS handles all rendering; prefers-reduced-motion collapses pulse to a steady dot.

When to use which primitive

Three adjacent VB primitives sit in this neighborhood. Pick the one that matches the shape of what you're showing.

Use this	When
`<status-wc>`	Steady visual indication of an ongoing state — live/recording/online/offline/error. A dot you'd leave on screen indefinitely.
`<status-message>`	One-shot prose announcement: Form submitted. Saved. Inline text, not a persistent badge.
`<notification-wc>`	Action-bearing banner or panel with stewardship, dismissal, history.
`<toast-msg>`	Transient feedback that dismisses on its own.

Built-in variants

Eleven variants ship out of the box, grouped by intent:

Variant	Color	Animation	Intent
`live`, `recording`, `error`	error / red	pulse	Active broadcast / recording / failed.
`streaming`	warning / amber	pulse	In-flight stream.
`online`	success / green	steady	Available / reachable.
`running`	success / green	pulse	Active process.
`away`, `paused`	warning / amber	steady	Idle / suspended.
`busy`	error / red	steady	Reachable, do not disturb.
`offline`, `stopped`	muted / gray	steady	Unreachable / halted.

Sizes

Position

data-position controls where the dot sits relative to the label.

Bare dot: data-position="only" visually hides the label but keeps it for screen readers. Required: aria-label or slot text content.

Pulse override

Force or suppress the pulse independent of the variant's default.

Custom variants (CSS-only)

Add a CSS rule. No JS change needed — the component reflects data-variant to CSS and any matching rule wins.

Composition

Compose with other VB primitives rather than baking layouts into the component.

Accessibility

Default role="status" with aria-live="polite" — screen readers announce variant changes.
Set data-live="off" for decorative use (e.g., dashboards with many static indicators) — this removes the role and live-region.
prefers-reduced-motion: reduce collapses pulse to a steady dot; color still conveys state.
Never color-only: every variant ships with a default text label. Use data-position="only" with aria-label for bare-dot situations.

Attributes

Attribute	Type	Default	Description
`data-variant`	string	—	Built-in variant name or custom (see above).
`data-size`	string	`md`	`xs` \| `sm` \| `md` \| `lg`
`data-position`	string	`before`	`before` \| `after` \| `only`
`data-pulse`	string	variant default	`on` \| `off`
`data-live`	string	polite	Set to `off` to suppress announcements.
`aria-label`	string	—	Required when slot has no text.

CSS properties

Property	Default	Purpose
`--status-dot-size`	0.625rem	Dot diameter (overrides `data-size`).
`--status-dot-color`	variant-default	Dot color (overrides variant default).
`--status-pulse-duration`	2s	Pulse cycle duration.
`--status-animation`	variant-default	Direct animation shorthand override.
`--status-gap`	`--size-2xs`	Gap between dot and label.

Events

Event	Bubbles	When
`status-wc:change`	yes	`data-variant` mutates. `detail: { variant, previousVariant }`.

Welcome to Vanilla Breeze