- content/vault/: _index.md, diff.md, session.md, status.md, tasks.md, wikilinks.md - content/docs/: _index.md, introduction, tokens, reset, semantic-html, components, data-attributes, navigation, layouts, charts, chroma, accordion-dialog 96 pages build clean (was 36). Docs use sidebar nav + TOC layout. Vault uses sidebar with section fallback (no vault menu configured yet). URLs fixed: playground refs → asw.trentuna.com. Closes: asw#12, asw#9
1.5 KiB
1.5 KiB
| title | description | section | prev-url | prev-title | next-url | next-title | type | date | tags | ai-disclosure | ai-model | ai-provider | |||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Status | Render operational state with data-status — online, degraded, offline, unknown. | vault | wikilinks/ | Wikilinks | diff/ | Diff | vault | 2026-04-09 |
|
generated | claude-sonnet-4-5 | Anthropic |
Overview
Use data-status on any element to convey operational state. ASW renders a coloured indicator — no CSS classes required.
<span data-status="online">API Gateway</span>
<span data-status="degraded">Search Index</span>
<span data-status="offline">Legacy Auth</span>
<span data-status="unknown">Webhook Relay</span>
Values
| Value | Meaning | Indicator |
|---|---|---|
online |
Fully operational | Green dot |
degraded |
Reduced capacity or elevated errors | Amber dot |
offline |
Not reachable or deliberately down | Red dot |
unknown |
State not yet determined | Grey dot |
Status Dashboard Pattern
Combine with a <dl> for a compact service health panel:
<dl>
<dt>API Gateway</dt> <dd data-status="online">online</dd>
<dt>Search Index</dt> <dd data-status="degraded">degraded</dd>
<dt>Webhook Relay</dt> <dd data-status="offline">offline</dd>
<dt>Analytics</dt> <dd data-status="unknown">unknown</dd>
</dl>
Usage Notes
data-status is intentionally display-only — it carries no ARIA role. For accessibility, pair with visible text (as shown above) rather than relying on the colour dot alone.