trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
asw/site/content/docs/components/accordion-dialog.md
Ludo dd810f5a63
feat: auto-generated docs sidebar, Decap CMS, content migration infra 
Docs restructure:
- Move flat docs into section subdirs (getting-started/, core/,
  components/, reference/) with _index.md for each
- Sidebar auto-generates from content structure — no manual menu entries
- New doc pages appear automatically when created in a section

Decap CMS:
- admin/index.html + config.yml for browser-based editing
- Local mode (npx decap-server) — no OAuth needed
- Collections for all content types: docs, articles, essays, notes, pages

Hugo head.html updated for new CSS layer filenames.
decap-server added as devDependency.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-11 18:02:34 +02:00

3.3 KiB
Raw Blame History

title description layout weight type date tags ai-disclosure ai-model ai-provider
Accordion & Dialog Native disclosure and modal patterns. No JavaScript required for accordion; dialog uses the native showModal() API. docs 45 docs 2026-04-09
components
interactive
reference
generated claude-sonnet-4-5 Anthropic

Accordion

Style native <details>/<summary> elements. No JS needed — the browser handles open/close state.

<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:

What is agentic HTML?

Agentic HTML is structured markup generated by AI agents — semantic, predictable, and styled without classes.

Why no classes?

Language models reliably produce semantic HTML. Class names require memorisation and drift. Data-attributes are explicit and grep-friendly.

Grouped Accordion

Wrap in <div data-role="accordion"> for flush connected borders.

<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:

Reset layer

Normalises browser defaults without imposing opinions.

Token layer

Open Props foundation plus ASW semantic aliases.

Components layer

Buttons, forms, accordion, dialog — all zero-class.

Dialog

Native <dialog> element. Use dialog.showModal() for a modal with backdrop, or dialog.show() for a non-modal popover.

<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:

Confirm action

Are you sure you want to proceed? This cannot be undone.

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.