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/accordion-dialog.md

@@ -0,0 +1,117 @@
+---
+title: "Accordion & Dialog"
+description: "Native disclosure and modal patterns. No JavaScript required for accordion; dialog uses the native showModal() API."
+layout: docs
+weight: 45
+type: docs
+date: 2026-04-09
+tags: ["components", "interactive", "reference"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-5"
+ai-provider: "Anthropic"
+
+---
+
+## Accordion
+
+Style native `<details>`/`<summary>` elements. No JS needed — the browser handles open/close state.
+
+```html
+<details>
+  <summary>What is agentic HTML?</summary>
+  <p>Agentic HTML is structured markup generated by AI agents — semantic, predictable, and styled without classes.</p>
+</details>
+```
+
+**Live example:**
+
+<details>
+  <summary>What is agentic HTML?</summary>
+  <p>Agentic HTML is structured markup generated by AI agents — semantic, predictable, and styled without classes.</p>
+</details>
+
+<details>
+  <summary>Why no classes?</summary>
+  <p>Language models reliably produce semantic HTML. Class names require memorisation and drift. Data-attributes are explicit and grep-friendly.</p>
+</details>
+
+---
+
+## Grouped Accordion
+
+Wrap in `<div data-role="accordion">` for flush connected borders.
+
+```html
+<div data-role="accordion">
+  <details>
+    <summary>Reset layer</summary>
+    <p>Normalises browser defaults without imposing opinions.</p>
+  </details>
+  <details>
+    <summary>Token layer</summary>
+    <p>Open Props foundation plus ASW semantic aliases.</p>
+  </details>
+  <details open>
+    <summary>Components layer</summary>
+    <p>Buttons, forms, accordion, dialog — all zero-class.</p>
+  </details>
+</div>
+```
+
+**Live example:**
+
+<div data-role="accordion">
+  <details>
+    <summary>Reset layer</summary>
+    <p>Normalises browser defaults without imposing opinions.</p>
+  </details>
+  <details>
+    <summary>Token layer</summary>
+    <p>Open Props foundation plus ASW semantic aliases.</p>
+  </details>
+  <details open>
+    <summary>Components layer</summary>
+    <p>Buttons, forms, accordion, dialog — all zero-class.</p>
+  </details>
+</div>
+
+---
+
+## Dialog
+
+Native `<dialog>` element. Use `dialog.showModal()` for a modal with backdrop, or `dialog.show()` for a non-modal popover.
+
+```html
+<dialog id="demo-dialog">
+  <header><h2>Confirm action</h2></header>
+  <p>Are you sure you want to proceed? This cannot be undone.</p>
+  <footer>
+    <button onclick="document.getElementById('demo-dialog').close()">Cancel</button>
+    <button onclick="document.getElementById('demo-dialog').close()">Confirm</button>
+  </footer>
+</dialog>
+
+<button onclick="document.getElementById('demo-dialog').showModal()">Open dialog</button>
+```
+
+**Live example:**
+
+<dialog id="demo-dialog">
+  <header><h2>Confirm action</h2></header>
+  <p>Are you sure you want to proceed? This cannot be undone.</p>
+  <footer>
+    <button onclick="document.getElementById('demo-dialog').close()">Cancel</button>
+    <button onclick="document.getElementById('demo-dialog').close()">Confirm</button>
+  </footer>
+</dialog>
+
+<button onclick="document.getElementById('demo-dialog').showModal()">Open dialog</button>
+
+---
+
+## Notes
+
+- Accordion uses `:not(nav details)` scoping so nav dropdowns are unaffected.
+- Dialog backdrop uses `color-mix()` for transparency — no hardcoded rgba values.
+- All spacing uses Open Props / ASW tokens (`--space-*`, `--radius-*`, `--shadow-*`).
+- `dialog::backdrop` uses `backdrop-filter: blur(4px)` for frosted glass effect.