Recipes

The instruments below are web components — import the wc entry once to register them, then use the tags. Each demo shows representative band values; the home page drives the same components live from one sim loop. All bind colour to warn / crit bands and degrade honestly under reduced motion (see form encodes function).

<script type="module">import "@shelfwood/talos-ui/wc";</script>

Gauge — <talos-gauge>

A value’s meaning: needle angle = value, colour = band.

<talos-gauge value="30" min="0" max="100" warn="70" crit="90"
             label="CPU" unit="%" size="150"></talos-gauge>

Trend — <talos-trend>

A moving window over a stream — the shape is the rate.

<talos-trend value="40" points="60" warn="70" crit="90"
             label="Throughput" unit="%" width="380" height="80" fill></talos-trend>

Prefer the imperative API for streams: el.push(value).

Meter — <talos-meter>

Linear level; thresholds drawn as ticks on the scale.

<talos-meter value="30" warn="70" crit="90"
             label="Disk" unit="%" width="300"></talos-meter>

Flow — <talos-flow>

Throughput as motion; dash speed = rate, 0 = idle.

<talos-flow rate="30" max="100" warn="70" crit="90" width="180" height="36"></talos-flow>

Orbital — <talos-orbital>

A radial system: nodes orbit a core, and the motion is the telemetry — orbit speed = throughput rate, node size = load, colour = band. At rate 0 a node parks.

<talos-orbital rings="3" warn="70" crit="90" size="260" core-label="CORE"></talos-orbital>
<script type="module">
  const el = document.querySelector("talos-orbital");
  el.nodes = [
    { id: "api",   ring: 1, value: 40, load: 60, rate: 50, label: "API" },
    { id: "db",    ring: 2, value: 82, load: 90, rate: 20, label: "DB" },
    { id: "cache", ring: 3, value: 12, load: 30, rate: 80, label: "CACHE" },
  ];
</script>

Nodes are set as a property (el.nodes = [...]), not an attribute. Re-assigning preserves each node’s orbit angle by id, so a data update never resets the system.

Readout — <talos-readout>

A value that decodes when it changes: a brief glyph-scramble resolves into the new value, marking the arrival of fresh telemetry. A stable value is stable text — the motion is an event, not decoration. Under reduced motion the value snaps in.

<talos-readout value="1042" unit="req/s" label="Ingest"
               warn="2000" crit="4000"></talos-readout>
<script type="module">
  // changing the attribute fires the decode; a same-value write is a no-op
  el.setAttribute("value", "1180");
</script>

Console shell

A non-document layout: zoned, fixed-viewport, scrolls within zones. Compose the instruments above inside .console-scope and .console-aside.

<link rel="stylesheet" href=".../talos-ui/talos-console.css" />

<div class="talos-console talos-console--viewport">
  <header class="console-rail">…</header>
  <main class="console-scope">
    <div class="console-cell">
      <span class="console-cell__title">CPU</span>
      <talos-gauge value="30" warn="70" crit="90" unit="%"></talos-gauge>
    </div>
  </main>
  <aside class="console-aside">
    <span class="console-aside__label">// Telemetry</span>
    <talos-meter value="30" warn="70" crit="90" label="Disk" unit="%"></talos-meter>
  </aside>
  <footer class="console-status">
    <span class="console-status__stat" style="--_status:var(--talos-success-hsl)">NOMINAL</span>
  </footer>
</div>

The home page is a full example of this shell with all four instruments driven by one sim loop.