Alert

.talos-alert is the inline status callout. It’s a 3-column grid (icon · title+body · close) wrapped in a chamfered cut: the host paints the edge colour, a ::before insets 1px with the fill, and a ::after lays a 2px status bar down the inner-left. The status modifier rebinds one channel (--_status-hsl) and the icon, title, edge, and bar all recolour from it — form encodes function.

Default (neutral)

<div class="talos-alert">
  <span class="talos-alert__icon">◆</span>
  <div class="talos-alert__title">Notice</div>
  <div class="talos-alert__body">No status modifier — edge and bar fall back to the foreground channel.</div>
  <button class="talos-alert__close" aria-label="Dismiss">×</button>
</div>

The __close button is optional; drop it and the grid collapses the close column. __title and __body can each stand alone.

Status — info, success, warning, danger

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

Each modifier rebinds --_status-hsl to --talos-info-hsl / --talos-success-hsl / --talos-warning-hsl / --talos-danger-hsl. The hairline edge, the 2px left bar, the icon, and the title all read that one channel.

Bare

<div class="talos-alert talos-alert--bare talos-alert--danger">
  <span class="talos-alert__icon">✕</span>
  <div class="talos-alert__title">Gate failed</div>
  <div class="talos-alert__body">A plain left-border variant — no chamfer machinery.</div>
</div>

--bare drops the clip-path and the two pseudo-element layers, leaving a flat surface with a 2px left status border. Cheaper to render and good for dense stacks.

Classes

Same status vocabulary as .talos-badge and .talos-toast.