trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: restructure repo into src/ site/ dist/ vendor/ packs/

Browse source 
Separate framework source from website:
- src/layers/ + src/main.css: CSS framework source (was assets/css/)
- site/: Hugo website (content/, layouts/, hugo.toml)
- dist/: built output (asw.css, asw.min.css)
- vendor/open-props/: vendored dependency with version tracking
- Hugo module mounts: dist/ → static, site runs from site/

Build: hugo --source site/ passes (105 pages).
npm run build produces dist/asw.css.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ludo 2026-04-11 15:12:42 +02:00
parent 5bf233348d
commit 910b0e42a6
Signed by: ludo
GPG key ID: F6E479DEFAB84D6E
71 changed files with 76 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

117
content/docs/accordion-dialog.md
View file

@ -1,117 +0,0 @@
---
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.