Status dot
One 14px status slot for chat rows: idle, unread, attention, error, draft or running.
import { StatusDot } from "@arcadia/ui"One 14×14 slot for chat rows and lists: a 6px dot, a hollow ring or the running pine, so a row never shifts as its chat changes state. Idle draws nothing. attention is the only lit status: waiting on you is the one moment that is literally a light. unread is the same light without the halo, which rootStyle can tint with a product's own colour.
Statuses
idleDone and seen. Draws nothing (the slot keeps the indent), so a long list stays quiet.unreadFinished while you were away. The light without its halo, which a product may tint.attentionWaiting on you: a question or an approval. The beacon with a steady halo.errorThe last turn failed.draftNever sent. A hollow ring.runningLive. Renders the Pine Sweep.rootStyle takes layout and these knobs, each a palette token. The status sets them; set them yourself for a status the kit doesn't have, or to tint a mark with a product's own colour.
| Knob | Takes | Default | Sets |
|---|---|---|---|
Paint | var(--status-idle) | The dot's fill. | |
Paint | transparent | A 1px ring inside the dot (a draft's hollow ring). | |
Paint | color-mix(in srgb, ${Ref<Palette>} ${number}%, transparent)`` | transparent | A steady 2px halo around the dot (needs-you). |
Decorative unless given a label, which makes it an img with that name. Colour alone never carries the status: say it in the row's text, its aria-label, or the dot's label ("Needs your answer"). The attention halo holds steady and never blinks.
StatusDot
status- "idle" | "unread" | "attention" | "error" | "draft" | "running"Default"idle"
idle: done and seen (draws nothing; the slot keeps the indent).unread: done while away (a monochrome mark; tint it throughrootStyle).attention: waiting on the user (the beacon with a steady halo).error: the last turn failed (red).draft: never sent (a hollow ring).running: live (renders the PineSweep).label- string
- Accessible name ("Needs your answer"). Omit when the status is also stated in text.
rootStyle- RootStyle<StatusDotKnobs>
- Typed StyleX override: layout and the
--status-dot-*knobs.
Rest props go to <span> props and render.