Toolbar

`pura-toolbar` arranges slotted controls (buttons, toggles, links, inputs, separators) with consistent spacing and keyboard navigation: only one item stays in the tab order and the arrow keys move focus within the bar (Home/End go to the ends). Use it to group related actions such as a formatting or command bar. The agent-native layer exposes `role="toolbar"` and mirrors the live state in `data-pura-toolbar-*` attributes on the host, and registers each toolbar in `window.__puraToolbars` by `data-pura-id`, allowing agents to enumerate and read all toolbars without touching the shadow DOM.

Preview

<pura-toolbar orientation="horizontal" aria-label="Formatting">
  <pura-button>Bold</pura-button>
  <pura-button>Italic</pura-button>
  <pura-button>Underline</pura-button>
  <pura-separator></pura-separator>
  <pura-button>Align left</pura-button>
  <pura-button>Center</pura-button>
  <pura-button>Align right</pura-button>
</pura-toolbar>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/toolbar.js"></script>

import "./pura/lib/toolbar.js";