Port vault section (5 pages) and docs section (11 pages)

- content/vault/: _index.md, diff.md, session.md, status.md, tasks.md, wikilinks.md
- content/docs/: _index.md, introduction, tokens, reset, semantic-html,
  components, data-attributes, navigation, layouts, charts, chroma, accordion-dialog

96 pages build clean (was 36). Docs use sidebar nav + TOC layout.
Vault uses sidebar with section fallback (no vault menu configured yet).
URLs fixed: playground refs → asw.trentuna.com.

Closes: asw#12, asw#9

content/docs/navigation.md

@@ -0,0 +1,105 @@
+---
+title: "Navigation"
+description: "Breadcrumb trails and step sequences for orienting users in docs and agentic workflows."
+type: docs
+weight: 35
+date: 2026-04-09
+tags: ["navigation", "components", "reference"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-5"
+ai-provider: "Anthropic"
+
+---
+
+ASW provides two navigation components for orientation and workflow sequencing: `breadcrumb` for hierarchical location, and `steps` for pipeline progress.
+
+---
+
+## Breadcrumb
+
+Shows the current page's position in a site hierarchy. Uses `<nav data-role="breadcrumb">` with a plain `<ol>` — no classes needed.
+
+```html
+<nav data-role="breadcrumb" aria-label="breadcrumb">
+  <ol>
+    <li><a href="/">Home</a></li>
+    <li><a href="/docs/">Docs</a></li>
+    <li aria-current="page">Token System</li>
+  </ol>
+</nav>
+```
+
+- Separators (`/`) are drawn by CSS `::before` — no markup needed.
+- The current page item gets `aria-current="page"`. It renders as plain text (no link), full colour, slightly bolder.
+- Wraps on narrow viewports.
+
+### Longer trail
+
+```html
+<nav data-role="breadcrumb" aria-label="breadcrumb">
+  <ol>
+    <li><a href="/">Home</a></li>
+    <li><a href="/docs/">Docs</a></li>
+    <li><a href="/docs/components/">Components</a></li>
+    <li aria-current="page">Navigation</li>
+  </ol>
+</nav>
+```
+
+---
+
+## Steps
+
+A horizontal workflow sequence. Apply `data-role="steps"` to an `<ol>`. Each `<li>` takes a `data-status` attribute.
+
+| `data-status` | Node | Label | Use |
+|--------------|------|-------|-----|
+| `complete` | ✓ (accent) | `var(--text-2)` | Finished step |
+| `active` | number (filled) | bold, full colour | Current step |
+| `pending` | number (dim) | `var(--text-3)` | Future step |
+
+```html
+<ol data-role="steps">
+  <li data-status="complete"><span>Plan</span></li>
+  <li data-status="complete"><span>Scaffold</span></li>
+  <li data-status="active"><span>Build</span></li>
+  <li data-status="pending"><span>Review</span></li>
+  <li data-status="pending"><span>Deploy</span></li>
+</ol>
+```
+
+Steps distribute evenly across the available width. Connector lines between steps turn accent-coloured once the preceding step is `complete`.
+
+### Agentic task pipeline
+
+```html
+<ol data-role="steps">
+  <li data-status="complete"><span>Wake</span></li>
+  <li data-status="complete"><span>Orient</span></li>
+  <li data-status="active"><span>Work</span></li>
+  <li data-status="pending"><span>Record</span></li>
+  <li data-status="pending"><span>Sleep</span></li>
+</ol>
+```
+
+### Vertical layout
+
+Add `data-layout="vertical"` for a top-down flow — useful in sidebars or narrow containers.
+
+```html
+<ol data-role="steps" data-layout="vertical">
+  <li data-status="complete"><span>Fetch task file</span></li>
+  <li data-status="complete"><span>Read source CSS</span></li>
+  <li data-status="active"><span>Implement components</span></li>
+  <li data-status="pending"><span>Build and verify</span></li>
+  <li data-status="pending"><span>Signal done</span></li>
+</ol>
+```
+
+---
+
+## Related
+
+- [Data Attributes](/docs/data-attributes/) — `data-role`, `data-status`, and the full attribute vocabulary
+- [Layouts](/docs/layouts/) — `data-layout` values including `vertical`
+- [Components](/docs/components/) — callouts, tasks, and other component patterns