Data & navigation

The data-display and navigation classes — all CSS layer. Pair with the instruments for live values; these carry the static structure around them.

Table

<div class="talos-table-wrap">
  <table class="talos-table talos-table--zebra">
    <thead><tr><th><span class="talos-table__sort">Txn</span></th><th class="talos-table__num">Load %</th></tr></thead>
    <tbody><tr><td>TX-9043</td><td class="talos-table__num">62.4</td></tr></tbody>
  </table>
</div>

--zebra, --dense. Right-align numbers with __num; wrap sortable headers in __sort and set aria-sort on the <th> to rotate the chevron.

Stat

<div class="talos-stat">
  <span class="talos-stat__label">Throughput</span>
  <span class="talos-stat__value">14.2k</span>
  <span class="talos-stat__delta talos-stat__delta--up">8.4% vs last hr</span>
</div>

Chamfered card. __delta--up / --down render a ▲/▼ and recolour.

Readout (CSS) & dot

The CSS readout is a static metrics panel; for the decode-on-change instrument see <talos-readout>. The __live dot is the same pulsing .talos-dot.

<div class="talos-readout">
  <div class="talos-readout__head"><span class="talos-readout__live"></span> System status</div>
  <div class="talos-readout__rows">
    <div class="talos-readout__row"><span>cpu</span><span>42%</span></div>
  </div>
</div>

Code block

<Button variant=“ghost”>Engage</Button>

<div class="talos-code">
  <div class="talos-code__bar"><span>button.astro</span><button class="talos-code__copy">copy</button></div>
  <pre class="talos-code__body">…</pre>
</div>

Avatar

<span class="talos-avatar">KP<span class="talos-avatar__status talos-avatar__status--online"></span></span>

Sizes --sm --lg, --ring. Status: __status--online --warning --offline.

Tabs

<div class="talos-tabs" role="tablist">
  <button class="talos-tab" role="tab" aria-selected="true">Overview</button>
</div>

Base tabs underline the active item; --segmented boxes them with a filled active state. Toggle aria-selected in JS to switch.

Breadcrumbs & pagination

<nav class="talos-breadcrumbs">
  <a class="talos-breadcrumb" href="#">Home</a>
  <span class="talos-breadcrumb" aria-current="page">atlas-01</span>
</nav>

<div class="talos-pagination">
  <button class="talos-page talos-page--active">1</button>
  <span class="talos-page talos-page--ellipsis">…</span>
</div>

aria-current="page" marks the current crumb. Pagination: --active, --nav, --ellipsis.

Stepper

<div class="talos-steps">
  <div class="talos-step talos-step--done"><span class="talos-step__index">✓</span><span class="talos-step__label">Plan</span></div>
  <div class="talos-step talos-step--current"><span class="talos-step__index">2</span><span class="talos-step__label">Build</span></div>
</div>

--done fills the connector; --current outlines the index with an accent glow.

Menu & toolbar

<div class="talos-menu">
  <div class="talos-menu__label">Actions</div>
  <button class="talos-menu__item">Restart node <span class="talos-menu__shortcut">⌘R</span></button>
  <hr class="talos-menu__sep" />
  <button class="talos-menu__item talos-menu__item--danger">Terminate</button>
</div>

Menu items push __shortcut to the right and support --danger. Toolbar __sep divides groups; __spacer pushes the rest to the far edge.