Toast

.talos-toast is the transient notification. It shares the alert’s two-layer chamfer hairline and 2px left status bar, but lives in a fixed .talos-toast-region and enters on a pure-CSS keyframe — you add or remove the node, CSS slides + fades it in. The status colour is the only chroma: it paints the chamfered edge, the icon, the title, and the left bar at once.

Default — neutral

<div class="talos-toast">
  <span class="talos-toast__icon">◆</span>
  <div class="talos-toast__title">Snapshot saved</div>
  <div class="talos-toast__body">Checkpoint atlas-01 written to cold store.</div>
  <button class="talos-toast__close" aria-label="Dismiss">×</button>
</div>

A 3-column grid (icon · title+body · close) on --talos-surface-3 with the float shadow. With no status modifier the edge + accents read as neutral foreground.

Status variants

<div class="talos-toast talos-toast--success">…</div>
<div class="talos-toast talos-toast--info">…</div>
<div class="talos-toast talos-toast--warning">…</div>
<div class="talos-toast talos-toast--danger">…</div>

Each modifier rebinds one channel triplet (--_status-hsl); the base rules build the edge, icon, title, and left bar from it. Four colours, one source of truth per toast.

In the region

<div class="talos-toast-region">
  <div class="talos-toast talos-toast--success">…</div>
  <div class="talos-toast talos-toast--info">…</div>
</div>

.talos-toast-region is position: fixed bottom-right and stacks toasts in a column. The region is pointer-events: none (inert); each toast re-enables its own pointer events so only the cards are clickable. (The demo above pins it position: static so it sits inline.)

Animation

Every .talos-toast runs the talos-toast-in keyframe on mount — slide from the right edge + fade to opaque, on --talos-dur-slow / --talos-ease-liquid. It is suppressed under prefers-reduced-motion: reduce. There is no exit keyframe; removal is up to the consumer.

Classes

Shares the status vocabulary with .talos-alert and .talos-badge.