asw/content/vault/status.md
Vigilio Desto da1d02ccd1
Port vault section (5 pages) and docs section (11 pages)
- 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
2026-04-10 18:40:50 +02:00

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
vault
status
reference
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.