Toolbar

.talos-toolbar is a flex strip of grouped controls on a --talos-surface-1 band with a single hairline border — no fill per control. It holds whatever you put in it (usually .talos-button --sm --ghost); the layout primitives are a 1px __sep divider between groups and a __spacer that eats the remaining width so the rest is flushed right.

Default

<div class="talos-toolbar">
  <button class="talos-button talos-button--sm talos-button--ghost">Bold</button>
  <button class="talos-button talos-button--sm talos-button--ghost">Italic</button>
  <button class="talos-button talos-button--sm talos-button--ghost">Underline</button>
</div>

Centre-aligned row, --talos-space-2 gap. The strip carries the band colour and border; the controls inside it stay ghost so the toolbar reads as one chrome.

Separator

<div class="talos-toolbar">
  <button class="talos-button talos-button--sm talos-button--ghost">Cut</button>
  <button class="talos-button talos-button--sm talos-button--ghost">Copy</button>
  <span class="talos-toolbar__sep"></span>
  <button class="talos-button talos-button--sm talos-button--ghost">Paste</button>
</div>

__sep is a 1px full-height hairline that divides logical groups of controls.

Spacer

<div class="talos-toolbar">
  <button class="talos-button talos-button--sm talos-button--ghost">Bold</button>
  <button class="talos-button talos-button--sm talos-button--ghost">Italic</button>
  <span class="talos-toolbar__sep"></span>
  <span class="talos-toolbar__spacer"></span>
  <button class="talos-button talos-button--sm talos-button--ghost">Export</button>
</div>

__spacer is flex: 1 — it absorbs the slack and pushes everything after it to the far edge.

Classes

Fill it with .talos-button (--sm --ghost reads best). For a dropdown of grouped actions instead, see .talos-menu.