Badge
Six tones, plus .ago-badge__dot (currentcolor, with a measured
glow on the success tone only) and the mono variant used for identifiers.
Alert
Three tones, each with a glyph, a title and body text —
.ago-alert__title/__body/__glyph. The icon is
decorative in the real component (aria-hidden); the tone and the text carry
the meaning.
Dialog
Rendered as a real <dialog open> element so it shows open
without JavaScript — ago-console opens the same element with
showModal(), which additionally paints the real ::backdrop; this
page fakes that dimming with its own .dialog-stage wrapper so the open state
is visible without a click. The drawer variant (--drawer) is shown the same
way, constrained to its own stage instead of the real viewport edge.
Field & Input
A label, an optional description, an optional error — the field never uses
colour alone for "this is wrong": the invalid border is always paired with
.ago-field__error text.
Select
Native <select>, restyled with the same control shell as
Input and Textarea so a 40px control is a 40px control regardless of which one it is.
Textarea
Same control shell as Input, taller and vertically resizable.
Panel
The default surface every screen is built from — a head (title,
description, actions) and a body. --quiet drops the shadow onto the raised
surface, for a panel that sits inside another panel.
Applied automatically and by operators; AI-suggested tags are marked.
Table
A sunken header row, a numeric column right-aligned with tabular figures
(.ago-table__cell--end), and a hover state on the body rows.
| Visitor | Channel | Status | Messages |
|---|---|---|---|
| Мария К. | Telegram | Live | 14 |
| Игорь П. (row hover, simulated) | Closed | 6 | |
| Анна В. | MAX | Escalated | 21 |
Spinner & Skeleton
A spinner is always beside a real text label (aria-live carries
the state, not the animation). A skeleton stack stands in for content that has not
arrived yet.
Tooltip
A 24px round trigger (the WCAG 2.5.8 target-size floor) beside a section title — a sibling, never a descendant, so the title's accessible name never picks up the trigger's own label. Normally revealed on hover/focus; shown open below so it's visible without one.