diff --git a/.agents/skills/accessibility/SKILL.md b/.agents/skills/accessibility/SKILL.md
new file mode 100644
index 00000000..a91ec53a
--- /dev/null
+++ b/.agents/skills/accessibility/SKILL.md
@@ -0,0 +1,115 @@
+---
+name: accessibility
+description: >-
+  Guides frontend accessibility using Curve personas and WCAG-oriented rules:
+  semantic HTML, accessible names, keyboard access, focus, and persona-based
+  review. Use when writing or reviewing React, Angular, HTML, or CSS UI, or when
+  the user mentions a11y, accessibility, WCAG, toegankelijkheid, personas,
+  keyboard navigation, screenreader, or accessible names.
+---
+
+# Web accessibility (Curve)
+
+Apply this skill whenever you **write, edit, or review** UI. Do not wait for the user to mention a11y.
+
+Read [personas.md](personas.md) for the seven user perspectives. Read [reference.md](reference.md) for
+detailed HTML, keyboard, and naming rules.
+
+## When to use which mode
+
+| Situation | Mode |
+| --------- | ---- |
+| Writing or editing UI | Baseline workflow (below) + relevant persona checks |
+| "Review for accessibility" / PR review | **Full persona review** |
+| "Review as [persona]" | **Single persona review** |
+| Quick sanity check | Baseline workflow only |
+
+## Baseline workflow (always)
+
+When changing UI, run in order:
+
+1. **Semantics** — correct HTML element (see [reference.md](reference.md)).
+2. **Names** — every control has a visible label or accessible name.
+3. **Structure** — one `h1`, no skipped heading levels, landmarks present.
+4. **Keyboard** — Tab reaches every control; focus is visible.
+5. **Skip links** — repeated chrome can be skipped on full pages.
+
+Prefer native HTML before ARIA. If Curve components exist, use them instead of rebuilding primitives.
+
+## Persona review workflow
+
+Use this when reviewing a component, page, or story.
+
+1. Read the code (and story/demo if present). Identify interactive elements, status feedback, media, and layout constraints.
+2. Walk **each persona** in [personas.md](personas.md). For each one, ask that persona's review questions against the actual markup and behaviour.
+3. Map findings to severity:
+   - **Must fix** — blocks a persona from using the UI (no name, keyboard trap, colour-only status, hover-only content)
+   - **Should fix** — friction or WCAG risk (weak contrast, small targets, vague errors)
+   - **Note** — improvement, not a blocker
+4. End with **cross-cutting fixes** — changes that help multiple personas.
+
+Do not answer "is this accessible?" with a single yes/no. Report concrete, verifiable findings.
+
+### Full review output template
+
+```markdown
+# Accessibility review: [Component or page name]
+
+## Blind, screenreadergebruiker
+- [Must fix] …
+- [Should fix] …
+
+## Slechtziend, vergroting
+- …
+
+## Kleurenblind
+- …
+
+## Doof of slechthorend
+- …
+
+## Beperkte motoriek
+- …
+
+## Cognitief of neurodivergent
+- …
+
+## Tijdelijk of situationeel
+- …
+
+## Cross-cutting fixes
+1. …
+2. …
+```
+
+Omit empty persona sections. If a persona has no issues, write "Geen bevindingen" for that section.
+
+### Single persona output
+
+When the user names one persona, use the same severity labels but only that section plus cross-cutting fixes.
+
+## Good prompts (for the user)
+
+These produce verifiable answers:
+
+- "Welk element krijgt focus als dit opengaat, en wat leest een screenreader voor?"
+- "Kun je de foutstatus begrijpen zonder kleur te zien?"
+- "Is elke actie bereikbaar met alleen het toetsenbord?"
+- "Welk native element maakt dit ARIA-attribuut overbodig?"
+
+Avoid accepting a bare "yes, accessible" without mechanism.
+
+## Limits
+
+This skill does not replace manual testing with VoiceOver/NVDA or `@storybook/addon-a11y`. Treat output
+like a linter: fast and useful, but not a substitute for real assistive-tech checks.
+
+## Installation (for humans)
+
+| Tool | Path |
+| ---- | ---- |
+| Cursor | `.cursor/skills/accessibility/` (this folder) |
+| Claude Code | `.claude/skills/accessibility/` |
+| Other agents | `.agents/skills/accessibility/` |
+
+Download the full folder from Curve Storybook: **Curve → Voor developers → Je werk testen → Wanneer je gebruik maakt van AI**.
diff --git a/.agents/skills/accessibility/personas.md b/.agents/skills/accessibility/personas.md
new file mode 100644
index 00000000..668325f9
--- /dev/null
+++ b/.agents/skills/accessibility/personas.md
@@ -0,0 +1,122 @@
+# Accessibility personas (Curve)
+
+"Toegankelijk" gaat niet over één doelgroep. De persona's hieronder dekken de behoeften die de
+WCAG-criteria daadwerkelijk sturen, en ze lopen elk op andere fouten vast. Gebruik ze om te
+voorspellen welk criterium een ontwerp breekt door je voor te stellen wie er niet langs komt.
+
+| Persona                      | Hoe diegene jouw website gebruikt                        | Waar het misgaat                                                      |
+| ---------------------------- | ------------------------------------------------------ | --------------------------------------------------------------------- |
+| Blind, screenreadergebruiker | Alleen toetsenbord, luistert; navigeert via koppen en links | Naamloze knoppen, `div`-knoppen, betekenis die alleen zichtbaar is    |
+| Slechtziend, vergroting      | 200–400% zoom, hoog contrast, grote letters            | Vaste breedtes, te licht contrast, tekst in afbeeldingen              |
+| Kleurenblind                 | Ziet de opmaak, niet het kleurverschil                 | Status alleen in kleur, rood/groen-combinaties, ongelabelde grafieken |
+| Doof of slechthorend         | Leest in plaats van luistert                           | Video zonder ondertiteling, geluidssignalen, geen transcript          |
+| Beperkte motoriek            | Toetsenbord, switch, spraak of oogbesturing            | Kleine klikdoelen, alleen slepen, hover-menu's, korte time-outs       |
+| Cognitief of neurodivergent  | Heeft rust, voorspelbaarheid en eenvoud nodig          | Jargon, automatische beweging, tijdsdruk, vage foutmeldingen          |
+| Tijdelijk of situationeel    | Van alles, kort en onhandig                            | Alles hierboven, op het slechtst denkbare moment                      |
+
+## Blind, screenreadergebruiker
+
+Gebruikt NVDA, JAWS, VoiceOver of TalkBack en ziet de opmaak nooit. De pagina wordt als structuur
+opgenomen: een lijst met koppen, een lijst met links, landmarks, en dan pas inhoud. Visuele groepering
+betekent niets als die niet in de opmaak zit.
+
+**Wat dit van je vraagt:** echte koppen in de juiste volgorde, één `h1`, landmarks (`main`, `nav`,
+`header`) in plaats van anonieme `div`s, een toegankelijke naam op elk bedienbaar element, en
+alternatieve tekst die vertelt wat een afbeelding overbrengt in plaats van wat erop staat. Een
+icoonknop die wordt voorgelezen als "knop" is een doodlopende weg.
+
+**Review-vragen:**
+
+- Wat leest een screenreader voor elk interactief element?
+- Is de kopstructuur een logische inhoudsopgave?
+- Zit essentiële informatie alleen in visuele opmaak (kleur, positie, icoon zonder label)?
+
+## Slechtziend, vergroting
+
+Zoomt tot 200% of verder, of zet het besturingssysteem op grote letters. Bij 400% zoom op een viewport
+van 1280px is jouw desktoplayout nog ongeveer 320px breed — het WCAG-criterium Reflow zegt dat de
+inhoud daar moet blijven werken, in één scrollrichting, zonder dat er iets wegvalt.
+
+**Wat dit van je vraagt:** layouts die meebewegen in plaats van horizontaal scrollen, tekst die 200%
+vergroting overleeft zonder over elkaar te vallen, contrast van minimaal 4,5:1 voor lopende tekst en
+3:1 voor interface-elementen en iconen, en geen essentiële tekst die in een afbeelding zit.
+
+**Review-vragen:**
+
+- Blijft de layout bruikbaar bij 200–400% zoom?
+- Is contrast voldoende voor tekst én UI-elementen?
+- Val essential content weg of wordt afgesneden?
+
+## Kleurenblind
+
+Ongeveer 8% van de mannen en 0,5% van de vrouwen heeft een vorm van kleurenblindheid, meestal
+rood/groen. Zij zien jouw opmaak prima; wat wegvalt is het onderscheid dat je in kleur hebt gestopt.
+
+**Wat dit van je vraagt:** laat kleur nooit de enige manier zijn waarop je informatie communiceert. Combineer het met een icoon, een label,
+een patroon of een positie. Een invoerveld dat rood kleurt is onzichtbaar; een veld dat rood kleurt,
+een waarschuwingsicoon krijgt en de zin "Vul een geldig e-mailadres in" toont, werkt voor iedereen.
+
+**Review-vragen:**
+
+- Kun je status (fout, succes, geselecteerd) begrijpen zonder kleur te zien?
+- Zijn grafieken en diagrammen ook zonder kleur te onderscheiden?
+
+## Doof of slechthorend
+
+Leest in plaats van luistert. Beschrijft ook iedereen in een kantoortuin zonder koptelefoon.
+
+**Wat dit van je vraagt:** ondertiteling bij alles waarin gesproken wordt, transcripten bij audio, en geen
+statuswijziging die alleen met geluid wordt aangekondigd.
+
+**Review-vragen:**
+
+- Is alle audio/video-inhoud ook leesbaar?
+- Worden statuswijzigingen ook visueel of tekstueel aangekondigd?
+
+## Beperkte motoriek
+
+Een brede groep: tremor, RSI, bediening met één hand, een switch, spraakbesturing, oogbesturing. Wat ze
+delen is dat nauwkeurig aanwijzen duur of onmogelijk is.
+
+**Wat dit van je vraagt:** alles moet bereikbaar en bedienbaar zijn met het toetsenbord, in een volgorde
+die overeenkomt met de opmaak, met focus die altijd zichtbaar is. Klikdoelen zijn minimaal 24×24
+CSS-pixels (44×44 is comfortabel). Alles wat je met slepen kunt doen, moet ook met één klik of met het
+toetsenbord kunnen. Inhoud die alleen bij hover verschijnt is onbereikbaar — koppel die ook aan focus,
+en zorg dat je hem kunt wegklikken zonder de muis te verplaatsen.
+
+**Review-vragen:**
+
+- Is elke actie bereikbaar met Tab/Enter/Spatie?
+- Zijn klikdoelen groot genoeg?
+- Zijn er hover-only of drag-only interacties?
+
+## Cognitief of neurodivergent
+
+Dyslexie, ADHD, autisme, verschillen in geheugen of verwerkingssnelheid, angst — en iedereen onder
+druk. Dit is de grootste groep en de groep die het minst geholpen wordt door automatische controles,
+omdat niets ervan in de opmaak te zien is.
+
+**Wat dit van je vraagt:** gewone taal in plaats of slimme taal, navigatie en knoppen die steeds op
+dezelfde plek staan, geen onverwachte beweging of automatisch afspelen, respect voor
+`prefers-reduced-motion`, ruime of verlengbare tijdslimieten, foutmeldingen die het probleem én de
+oplossing noemen, en niets dat afhangt van wat iemand zich uit een vorige stap herinnert.
+
+**Review-vragen:**
+
+- Zijn foutmeldingen concreet en oplossingsgericht?
+- Is de flow voorspelbaar, zonder verrassende animaties of time-outs?
+- Is de taal eenvoudig genoeg?
+
+## Tijdelijk of situationeel
+
+Een gebroken arm, een ooginfectie, een kind op de arm, een gebarsten scherm, fel zonlicht, een tunnel.
+Niemand hiervan noemt zichzelf beperkt, en ze lopen allemaal tegen dezelfde drempels aan.
+
+Dit is het curb-cut-effect: ondertiteling wordt gebruikt in stille kantoren, sneltoetsen door ervaren
+gebruikers, hoog contrast door mensen buiten. Werk dat je voor de persona's hierboven doet, is zelden
+alleen voor hen.
+
+**Review-vragen:**
+
+- Welke persona's raken het hardst getroffen door dit ontwerp?
+- Lost een fix voor één persona vaak meerdere problemen tegelijk op?
diff --git a/.agents/skills/accessibility/reference.md b/.agents/skills/accessibility/reference.md
new file mode 100644
index 00000000..96b7cf75
--- /dev/null
+++ b/.agents/skills/accessibility/reference.md
@@ -0,0 +1,131 @@
+# Web accessibility reference
+
+Detailed rules for semantic HTML, keyboard access, and accessible names. The agent applies these
+when writing or reviewing UI (React, Angular, HTML, CSS).
+
+Prefer native HTML before ARIA. Do not "fix" accessibility with `role="button"` + `tabindex="0"` +
+a click handler on a `div` when a native `<button>` or `<a href>` works.
+
+## Baseline workflow
+
+When changing UI, run this in order:
+
+1. **Semantics** — correct HTML element for the job (see Link vs button).
+2. **Names** — every control has a visible label or an accessible name.
+3. **Structure** — heading outline is a single logical tree (one `h1`, no skipped levels).
+4. **Keyboard** — Tab reaches every interactive control; focus is always visible.
+5. **Skip links** — repeated chrome can be skipped; targets are focusable.
+
+When reviewing, report findings as:
+
+- **Must fix** — keyboard trap, missing name, wrong element, outline removed, skipped heading level
+- **Should fix** — missing hover/focus styles, `cursor: pointer` on a non-control, skip link missing
+- **Note** — improvement, not a blocker
+
+## Link vs button
+
+| User intent                                                                             | Element                                                            |
+| --------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
+| Go to another page, view, or URL (including in-app routes)                              | `<a href="...">`                                                   |
+| Do something on this page: open a panel, open a dialog, submit, toggle, delete, capture | `<button type="button">` or `<button type="submit">` inside a form |
+
+Rules:
+
+- In-app navigation is still a link. Calling the router from a `<div onClick>` / `(click)` / `@click` or from a `<button>` is wrong when the destination is a route.
+- The router helper must still render a real `<a href>`:
+  - **React:** `<Link>` / `<NavLink>` (React Router, Next.js). Do not replace the anchor with a `<span>` or `<div>`.
+  - **Angular:** `routerLink` on an `<a>`, not on a `<div>` or `<button>`.
+- Mark the current page with `aria-current="page"` on the **link**, not on a wrapper.
+- A button that looks like a link is still a `<button>`.
+- A link that looks like a button is still an `<a href>`.
+
+## Semantic HTML
+
+Use native elements before ARIA:
+
+- Headings (`h1`–`h6`) for titles, not bold `div`s
+- `<button>` / `<a href>` for interaction, not clickable `div`/`span`
+- `<label>` + form control, not placeholder-as-label
+- `<nav>`, `<main>`, `<header>`, `<footer>`, `<aside>` for landmarks
+- `<ul>`/`<ol>` for lists of links or findings
+- Native `<dialog>`, or the design-system Dialog/Sheet primitive (keep its Title)
+- Decorative images: `alt=""` and `aria-hidden="true"`
+
+If you feel you must set `cursor: pointer` on a custom element, stop. Native `<a>` and `<button>` are already interactive. `cursor: pointer` on a `div`/`span`/`li` is a smell that the wrong element was used.
+
+Allowed exceptions: `label` wrapping a control, `summary` in `<details>`, and components whose root is already a native control (design-system Button, etc.).
+
+When the project has a design system (for example Curve), use its components instead of restyling generic elements. They already provide roles, keyboard behaviour, and focus rings.
+
+## Headings
+
+- Exactly one `h1` per view.
+- Do not skip levels (`h1` → `h3`).
+- Heading level follows **document structure**, not font size. Style with CSS.
+- Use a visually hidden heading (`.sr-only` / `sr-only`) when a visual heading is missing but the section needs one (for example a sidebar labelled only by an icon).
+
+Verify in Chrome DevTools: **Elements → Accessibility pane → Headings**. The map must read as a table of contents.
+
+## Labels and accessible names
+
+Every `input`, `select`, `textarea`, `button`, and `a` needs an accessible name.
+
+Preferred order:
+
+1. Visible `<label for="id">` matching the control's `id` (or wrap the control in `<label>`)
+2. Visible text inside `<button>` / `<a>`
+3. `aria-labelledby` pointing at existing visible text
+4. `aria-label` only when a visible label would be redundant (icon-only controls)
+
+Check in DevTools: **Elements → Accessibility pane → Name**. If Name is missing, the control is unnamed.
+
+Do not rely on `placeholder` as the only name. Use a visually hidden label when the design has no visible label.
+
+Translate user-facing strings, including `aria-label` and skip-link text.
+
+## Keyboard
+
+After building a view, walk it with **Tab** (and **Shift+Tab**):
+
+- Every link, button, and input is reachable
+- Order matches visual order
+- No surprise tab stops on non-interactive text
+- Focus is never lost when opening/closing a panel or dialog
+- `tabindex` > 0 is forbidden
+- `tabindex="-1"` is only for programmatic focus targets (skip-link targets, dialogs)
+
+## Hover and focus
+
+Every interactive element needs a `:hover` style **and** a `:focus` / `:focus-visible` style.
+
+- **Never** remove the outline (`outline: none` / `outline: 0`) unless you replace it with an equally visible focus indicator.
+- Prefer `:focus-visible` when the ring should appear for keyboard focus, not mouse clicks.
+- `:focus` matches **any** focus (mouse, keyboard, script). `:focus-visible` matches when the browser judges a ring is needed (typically keyboard).
+- If you use Curve, keep the component `focus-visible:ring-*` classes. Do not strip them to "clean up" the design.
+
+## Skip links
+
+Skip links are the first focusable links on a page. They let keyboard users jump past repeated chrome (sidebar, nav) to main content.
+
+```html
+<a class="skip-link" href="#main">Skip to main content</a>
+<!-- site chrome -->
+<main id="main" tabindex="-1">
+  <!-- page content -->
+</main>
+```
+
+Rules:
+
+- Put skip links near the start of the document (or the start of the sidebar/nav).
+- `href` must point at a real `id`.
+- The target must be focusable (`tabindex="-1"` on `<main>` / footer if it is not natively focusable).
+- The link is visually hidden until focused — never `display: none` (that removes it from the tab order).
+
+## Live status
+
+Do not fail silently with a visual-only error. Announce status and errors with `aria-live` (or `role="status"` / `role="alert"`), or the design-system equivalent.
+
+## Dialogs
+
+Use a real dialog primitive (native `<dialog>`, or the design-system Dialog/Sheet). Always include a visible title; if the design hides it, keep the title in the DOM and hide it visually. Focus must move into the dialog when it opens and restore when it closes. Escape and a close control are required.
diff --git a/AGENTS.md b/AGENTS.md
index 09e9243f..22063288 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -50,8 +50,9 @@ pnpm install                                   # whole workspace
 pnpm build                                     # turbo: build both libraries
 pnpm lint                                      # turbo: type-check
 pnpm format                                    # prettier --write across the repo
-pnpm --filter @surfnet/curve-react storybook         # React Storybook (port 6006)
-pnpm --filter @surfnet/curve-angular storybook       # Angular Storybook (port 6007)
+pnpm storybook                                       # both Storybooks (React :6006, Angular :6007)
+pnpm storybook:react                                 # React Storybook (port 6006)
+pnpm storybook:angular                               # Angular Storybook (port 6007)
 ```
 
 Always run `pnpm lint` and `pnpm format` before considering a change done, and rebuild
@@ -194,6 +195,11 @@ Task-specific playbooks live in `.agents/skills/` (symlinked to `.claude/skills`
 - **add-component** — (repo-authored) add a component to `@surfnet/curve-react`,
   `@surfnet/curve-angular`, or both in parity. The `SKILL.md` index routes to the per-framework
   playbooks `react.md` and `angular.md`.
+- **accessibility** — (repo-authored) persona-based a11y review for agents. Canonical source:
+  `.agents/skills/accessibility/` (`SKILL.md`, `personas.md`, `reference.md`). Storybook serves
+  the same files under `/downloads/accessibility/` and ships a zip at
+  `packages/storybook-config/static/accessibility.zip`. Regenerate the zip after editing the skill:
+  `pnpm --filter @surfnet/curve-storybook-config bundle:accessibility-skill`.
 - **shadcn** — (upstream, from `shadcn/ui`) deep reference for shadcn components, registries,
   presets, and Base-vs-Radix.
 - **spartan** — (upstream, from `spartan-ng/spartan`) deep reference for spartan/ui, the
diff --git a/README.md b/README.md
index 0caa6dd6..56542736 100644
--- a/README.md
+++ b/README.md
@@ -61,9 +61,10 @@ pnpm build            # build both libraries (Turborepo)
 pnpm lint             # type-check
 pnpm format           # format everything with Prettier
 
-# Storybook (run per package)
-pnpm --filter @surfnet/curve-react storybook     # http://localhost:6006
-pnpm --filter @surfnet/curve-angular storybook   # http://localhost:6007
+# Storybook
+pnpm storybook              # both (React :6006, Angular :6007)
+pnpm storybook:react        # http://localhost:6006
+pnpm storybook:angular      # http://localhost:6007
 ```
 
 Each component ships a Storybook story covering its full surface (variants, sizes,
diff --git a/Untitled-1 b/Untitled-1
new file mode 100644
index 00000000..618e33e1
--- /dev/null
+++ b/Untitled-1
@@ -0,0 +1,120 @@
+Onderwerp ideëen:
+
+inleiding en onderwerpen die aan bod gaan komen
+  [LINK naar Storybook] Toegankelijkheid / Introductie / Overzicht
+        packages/storybook-config/docs/accessibility/01-introductie-overzicht.mdx
+
+Voor wie maken we onze producten digitaal toegankelijk?
+  [LINK naar Storybook] Toegankelijkheid / Introductie / Verschillende beperkingen (persona's)
+        packages/storybook-config/docs/accessibility/02-introductie-beperkingen.mdx
+
+Wat is het doel van team toegankelijkheid?
+bewustzijn: zorgen dat producten gebruiksvriendelijk en drempelvrij maken bij iedereen in de genen zit
+  [LINK naar Storybook] Toegankelijkheid / Introductie / Overzicht — "Waarom het ertoe doet"
+        packages/storybook-config/docs/accessibility/01-introductie-overzicht.mdx
+  [LINK naar Storybook] Toegankelijkheid / Introductie / Verschillende beperkingen (persona's) — curb-cut / tijdelijk of situationeel
+        packages/storybook-config/docs/accessibility/02-introductie-beperkingen.mdx
+
+kwaliteitsbewaking van het eindresultaat
+  [LINK naar Storybook] Toegankelijkheid / Je werk testen / Overzicht
+        packages/storybook-config/docs/accessibility/04-testen-overzicht.mdx
+  [LINK naar Storybook] Toegankelijkheid / Je werk testen / Handmatig testen
+        packages/storybook-config/docs/accessibility/05-testen-handmatig.mdx
+  [LINK naar Storybook] Toegankelijkheid / Je werk testen / Geautomatiseerd testen
+        packages/storybook-config/docs/accessibility/06-testen-geautomatiseerd.mdx
+
+"lees meer" teksten
+  [LINK naar Storybook] Toegankelijkheid / Inhoud en bediening / Voor tekstschrijvers — "Links die los van hun context kloppen"
+        packages/storybook-config/docs/accessibility/13-inhoud-tekstschrijvers.mdx
+  [LINK naar Storybook] Toegankelijkheid / Do's en don'ts / Overzicht
+        packages/storybook-config/docs/accessibility/07-dos-en-donts-overzicht.mdx
+  [LINK naar Storybook] Toegankelijkheid / Je werk testen / Handmatig testen — "Structuur en namen"
+        packages/storybook-config/docs/accessibility/05-testen-handmatig.mdx
+
+gebruik van toetsenbord (focus volgorde, focus rings)
+  [LINK naar Storybook] Toegankelijkheid / Je werk testen / Handmatig testen — "De toetsenbordronde"
+        packages/storybook-config/docs/accessibility/05-testen-handmatig.mdx
+  [LINK naar Storybook] Toegankelijkheid / Do's en don'ts / Overzicht
+        packages/storybook-config/docs/accessibility/07-dos-en-donts-overzicht.mdx
+
+in kunnen zoomen op een pagina of afbeelding
+  [LINK naar Storybook] Toegankelijkheid / Inhoud en bediening / Touch en vergroting — "De pagina vergroten", "Inzoomen op een afbeelding"
+        packages/storybook-config/docs/accessibility/16-inhoud-touch-en-vergroting.mdx
+  [LINK naar Storybook] Toegankelijkheid / Introductie / Verschillende beperkingen (persona's) — slechtziend / vergroting
+        packages/storybook-config/docs/accessibility/02-introductie-beperkingen.mdx
+  [LINK naar Storybook] Toegankelijkheid / Je werk testen / Handmatig testen — "Zoomen en meebewegen"
+        packages/storybook-config/docs/accessibility/05-testen-handmatig.mdx
+
+gebruik op een telefoon (touch areas)
+  [LINK naar Storybook] Toegankelijkheid / Inhoud en bediening / Touch en vergroting — "Aanraakdoelen", "Gebruik op een telefoon"
+        packages/storybook-config/docs/accessibility/16-inhoud-touch-en-vergroting.mdx
+
+gebruikers toestaan om fouten te maken / affordance
+  [LINK naar Storybook] Toegankelijkheid / Inhoud en bediening / Voor tekstschrijvers — "Fouten toestaan"
+        packages/storybook-config/docs/accessibility/13-inhoud-tekstschrijvers.mdx
+  [LINK naar Storybook] Toegankelijkheid / Inhoud en bediening / Touch en vergroting — "Affordance op een klein oppervlak"
+        packages/storybook-config/docs/accessibility/16-inhoud-touch-en-vergroting.mdx
+  [LINK naar Storybook] Toegankelijkheid / Je werk testen / Handmatig testen — "Formulieren in het bijzonder"
+        packages/storybook-config/docs/accessibility/05-testen-handmatig.mdx
+  [LINK naar Storybook] Toegankelijkheid / Do's en don'ts / Overzicht — fouttekst, `disabled`
+        packages/storybook-config/docs/accessibility/07-dos-en-donts-overzicht.mdx
+
+belang van semantische elementen in de HTML die je maakt
+  [LINK naar Storybook] Toegankelijkheid / Do's en don'ts / Overzicht
+        packages/storybook-config/docs/accessibility/07-dos-en-donts-overzicht.mdx
+  [LINK naar Storybook] Toegankelijkheid / Do's en don'ts / De eerste regel van ARIA
+        packages/storybook-config/docs/accessibility/08-dos-en-donts-eerste-regel-aria.mdx
+  [LINK naar Storybook] Toegankelijkheid / Introductie / Verschillende beperkingen (persona's) — koppen en landmarks
+        packages/storybook-config/docs/accessibility/02-introductie-beperkingen.mdx
+
+Wat is een "skiplink" en hoe maakt dat het gebruik van de website of -app gemakkelijker?
+  [LINK naar Storybook] Toegankelijkheid / Inhoud en bediening / Skiplinks
+        packages/storybook-config/docs/accessibility/15-inhoud-skiplinks.mdx
+
+duidelijke foutmeldingen
+  [LINK naar Storybook] Toegankelijkheid / Inhoud en bediening / Voor tekstschrijvers — "Foutmeldingen die verder helpen"
+        packages/storybook-config/docs/accessibility/13-inhoud-tekstschrijvers.mdx
+  [LINK naar Storybook] Toegankelijkheid / Je werk testen / Handmatig testen — "Formulieren in het bijzonder"
+        packages/storybook-config/docs/accessibility/05-testen-handmatig.mdx
+  [LINK naar Storybook] Toegankelijkheid / Do's en don'ts / Overzicht
+        packages/storybook-config/docs/accessibility/07-dos-en-donts-overzicht.mdx
+  [LINK naar Storybook] Toegankelijkheid / Do's en don'ts / ARIA correct gebruiken — `aria-describedby` / live regions
+        packages/storybook-config/docs/accessibility/09-dos-en-donts-aria-gebruiken.mdx
+
+hoe schrijf je een beschrijvende tekst van een afbeelding
+  [LINK naar Storybook] Toegankelijkheid / Inhoud en bediening / Voor tekstschrijvers — "Alt-tekst"
+        packages/storybook-config/docs/accessibility/13-inhoud-tekstschrijvers.mdx
+  [LINK naar Storybook] Toegankelijkheid / Je werk testen / Handmatig testen — "Structuur en namen" (afbeeldingen)
+        packages/storybook-config/docs/accessibility/05-testen-handmatig.mdx
+  [LINK naar Storybook] Toegankelijkheid / Do's en don'ts / Overzicht
+        packages/storybook-config/docs/accessibility/07-dos-en-donts-overzicht.mdx
+
+hoe foefjes met CSS kunnen beinvloeden hoe de website werkt
+  [LINK naar Storybook] Toegankelijkheid / Do's en don'ts / Overzicht — `outline: none`, DOM vs CSS-volgorde, hover, vaste `px`
+        packages/storybook-config/docs/accessibility/07-dos-en-donts-overzicht.mdx
+  [LINK naar Storybook] Toegankelijkheid / Je werk testen / Handmatig testen — zoom / reflow
+        packages/storybook-config/docs/accessibility/05-testen-handmatig.mdx
+  [LINK naar Storybook] Toegankelijkheid / Do's en don'ts / ARIA correct gebruiken — `display: none` vs visueel verbergen
+        packages/storybook-config/docs/accessibility/09-dos-en-donts-aria-gebruiken.mdx
+  [LINK naar Storybook] Toegankelijkheid / Inhoud en bediening / Skiplinks — skiplink niet verbergen met `display: none`
+        packages/storybook-config/docs/accessibility/15-inhoud-skiplinks.mdx
+  [LINK naar Storybook] Toegankelijkheid / Inhoud en bediening / Touch en vergroting — viewport / `user-scalable`, `touch-action`
+        packages/storybook-config/docs/accessibility/16-inhoud-touch-en-vergroting.mdx
+
+filmpjes toegankelijk maken voor iedereen
+  [LINK naar Storybook] Toegankelijkheid / Inhoud en bediening / Video en audio
+        packages/storybook-config/docs/accessibility/14-inhoud-video.mdx
+
+Op welke manieren kan een tekstschrijver impact hebben op de toegankelijkheid van een website?
+  [LINK naar Storybook] Toegankelijkheid / Inhoud en bediening / Voor tekstschrijvers
+        packages/storybook-config/docs/accessibility/13-inhoud-tekstschrijvers.mdx
+
+Hoe gaat Curve design systeem helpen om websites toegankelijk te maken?
+  [LINK naar Storybook] Toegankelijkheid / Introductie / Overzicht — "Wat Curve je geeft, en wat niet"
+        packages/storybook-config/docs/accessibility/01-introductie-overzicht.mdx
+  [LINK naar Storybook] Toegankelijkheid / Introductie / Toegankelijkheid in andere design systems — "Waar Curve nu staat"
+        packages/storybook-config/docs/accessibility/03-introductie-andere-design-systems.mdx
+  [LINK naar Storybook] Toegankelijkheid / Do's en don'ts / Overzicht — eerst een Curve-component gebruiken
+        packages/storybook-config/docs/accessibility/07-dos-en-donts-overzicht.mdx
+  [LINK naar Storybook] Toegankelijkheid / Inhoud en bediening / Overzicht — wat Curve níet levert (tekst, media, skiplink)
+        packages/storybook-config/docs/accessibility/12-inhoud-overzicht.mdx
diff --git a/docs/release-process.md b/docs/release-process.md
new file mode 100644
index 00000000..b8c2d3b6
--- /dev/null
+++ b/docs/release-process.md
@@ -0,0 +1,11 @@
+# Release process
+
+Don’t run `pnpm changeset`.
+Make a new branch from `main` (don’t commit on `main`).
+Commit your changes.
+Push the branch and open a PR.
+Wait for CI to go green, then merge to `main`.
+Open **Actions → Release** and confirm the new run.
+If this run only opens or updates `chore: version packages`, merge that PR next.
+Watch the Release run after that merge — that one should publish.
+Confirm on npm that `@surfnet/curve-react` and `@surfnet/curve-angular` exist at the new version.
diff --git a/package.json b/package.json
index 0cccfc8b..c9b8cd4c 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
     "sync:figma": "jiti scripts/sync-figma.ts",
     "dev": "turbo run dev",
     "storybook": "turbo run storybook",
+    "storybook:react": "pnpm --filter @surfnet/curve-react storybook",
+    "storybook:angular": "pnpm --filter @surfnet/curve-angular storybook",
     "build-storybook": "turbo run build-storybook",
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx,js,mjs,cjs,json,md,css,html}\"",
diff --git a/packages/angular/.storybook/main.ts b/packages/angular/.storybook/main.ts
index 8720f18d..555569db 100644
--- a/packages/angular/.storybook/main.ts
+++ b/packages/angular/.storybook/main.ts
@@ -1,8 +1,34 @@
 import type { StorybookConfig } from '@storybook/angular';
+import remarkGfm from 'remark-gfm';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(ts|mdx)'],
-  addons: ['@storybook/addon-a11y', '@storybook/addon-docs'],
+  stories: [
+    '../src/**/*.stories.@(ts|mdx)',
+    '../src/**/*.mdx',
+    // Framework-agnostic Foundations prose, shared with the React Storybook so
+    // both stay in sync and story ids match for the framework switcher.
+    '../../storybook-config/docs/**/*.mdx',
+  ],
+  addons: [
+    '@storybook/addon-a11y',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        // MDX 3 has no GitHub-flavoured markdown, so pipe tables in .mdx render
+        // as literal text without this. Keep in sync with the React config.
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  staticDirs: [
+    { from: '../../storybook-config/static', to: 'downloads' },
+    // Persona-based accessibility skill — canonical source in .agents/skills/accessibility
+    { from: '../../../.agents/skills/accessibility', to: 'downloads/accessibility' },
+  ],
   framework: '@storybook/angular',
 };
 
diff --git a/packages/angular/.storybook/preview.ts b/packages/angular/.storybook/preview.ts
index e4bb95dd..180e531b 100644
--- a/packages/angular/.storybook/preview.ts
+++ b/packages/angular/.storybook/preview.ts
@@ -20,8 +20,79 @@ export default {
     // execution). Keep in sync with packages/react/.storybook/preview.ts.
     options: {
       storySort: {
-        method: 'alphabetical',
-        order: ['Foundations', 'Components'],
+        // `includeNames` is required: without it Storybook sorts on title only,
+        // so a page whose title has no subgroup always sorts before the groups,
+        // whatever `order` says.
+        // `configure` leaves anything not listed below in file order, which
+        // keeps each component's stories in the sequence they were authored.
+        method: 'configure',
+        includeNames: true,
+        order: [
+          'Curve',
+          [
+            'Overzicht',
+            'Voor designers',
+            [
+              'Overzicht',
+              'Robuust ontwerpen',
+              'Microcopy',
+              'Validatie van formulieren',
+              'Touch en vergroting',
+              'Meer leren',
+              ['Overzicht', 'Toegankelijkheid in andere design systems'],
+            ],
+            'Voor developers',
+            [
+              'Curve gebruiken',
+              'Robuust bouwen',
+              'Je werk testen',
+              [
+                'Overzicht',
+                'Handmatig testen',
+                'Geautomatiseerd testen',
+                'Wanneer je gebruik maakt van AI',
+              ],
+              'Wat vaak mis gaat',
+              [
+                'Naamloze knoppen',
+                'Teveel ARIA',
+                'Verkeerde ARIA',
+                'Ontbrekende pagina-structuur',
+                'Ontbrekende skiplinks',
+                'Ontbreken van unieke pagina-titel',
+                'Tabellen zonder koppen',
+                'Afbeeldingen zonder beschrijving',
+                'Slechte alt-tekst',
+                'Ontbrekende bijschriften',
+                'Video die automatisch afspeelt',
+                'Vaste breedtes',
+                'Te licht contrast',
+                'Tekst in afbeeldingen',
+                'Taalwissels zonder markering',
+                'Status alleen in kleur',
+                'Rood/groen-combinaties',
+                'Ongelabelde grafieken',
+                'Video zonder ondertiteling',
+                'Geen transcript',
+                'Kleine klikdoelen',
+                'Alleen slepen',
+                "Hover-menu's",
+                'Korte time-outs',
+                'Automatische beweging',
+                'Tijdsdruk',
+                'Vage foutmeldingen',
+                'Onduidelijke validatie',
+                'Op het slechtst denkbare moment',
+              ],
+              'Meer leren',
+            ],
+            'Toegankelijkheid',
+            'Updates en releases',
+            'Changelog en beslissingen',
+          ],
+          'Foundations',
+          'Components',
+        ],
       },
     },
   },
diff --git a/packages/angular/.storybook/storybook-docs.css b/packages/angular/.storybook/storybook-docs.css
new file mode 100644
index 00000000..f0c77ab2
--- /dev/null
+++ b/packages/angular/.storybook/storybook-docs.css
@@ -0,0 +1,63 @@
+/* Restore list markers inside docs prose; Tailwind preflight strips them globally. */
+
+.sbdocs-content ul,
+.sbdocs-content ol {
+  list-style: revert;
+  font-size: inherit;
+  padding-inline-start: 1.5rem;
+}
+.sbdocs-content ul {
+  list-style-type: disc;
+}
+.sbdocs-content ol {
+  list-style-type: decimal;
+}
+.sbdocs-content ul ul {
+  list-style-type: circle;
+}
+.sbdocs-content ul ul ul {
+  list-style-type: square;
+}
+.sbdocs-content ol li,
+.sbdocs-content ul li {
+  font-size: inherit;
+}
+.sbdocs-content.sbdocs-content dl {
+  margin-block: 1em;
+}
+.sbdocs-content.sbdocs-content dt {
+  font-weight: 600;
+  font-size: inherit;
+}
+.sbdocs-content.sbdocs-content dd {
+  margin-inline-start: 1.5rem;
+  margin-block-end: 0.75em;
+  font-size: inherit;
+}
+.sbdocs-content dd:last-child {
+  margin-block-end: 0;
+}
+.sbdocs-content,
+.sbdocs-content p {
+  font-size: 1rem;
+}
+.sbdocs-content table :where(th, td) {
+  font-size: 1rem;
+  vertical-align: top;
+  text-align: left;
+}
+.sbdocs-content.sbdocs-content h2 {
+  margin-block-start: 2rem;
+}
+.sbdocs-content.sbdocs-content h3 {
+  margin-block-start: 1.5rem;
+}
+.sbdocs-content.sbdocs-content h4 {
+  margin-block-start: 1rem;
+}
+.sbdocs-content.sbdocs-content h5 {
+  margin-block-start: 0.5rem;
+}
+.sbdocs-a.sbdocs-a {
+  color: rgb(0 85 182);
+}
diff --git a/packages/angular/angular.json b/packages/angular/angular.json
index 75f1583a..1a46d532 100644
--- a/packages/angular/angular.json
+++ b/packages/angular/angular.json
@@ -31,7 +31,7 @@
             "browserTarget": "angular:build",
             "tsConfig": ".storybook/tsconfig.json",
             "compodoc": false,
-            "styles": ["src/styles.css"],
+            "styles": ["src/styles.css", ".storybook/storybook-docs.css"],
             "port": 6007
           }
         },
@@ -42,7 +42,7 @@
             "browserTarget": "angular:build",
             "tsConfig": ".storybook/tsconfig.json",
             "compodoc": false,
-            "styles": ["src/styles.css"],
+            "styles": ["src/styles.css", ".storybook/storybook-docs.css"],
             "outputDir": "storybook-static"
           }
         }
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 6baae443..fc29216a 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -66,6 +66,7 @@
     "@tailwindcss/postcss": "4.3.1",
     "jiti": "2.7.0",
     "ng-packagr": "22.0.0",
+    "remark-gfm": "^4.0.1",
     "rxjs": "7.8.2",
     "storybook": "10.4.5",
     "tailwindcss": "4.3.1",
diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts
index b8948c71..73be6aa7 100644
--- a/packages/react/.storybook/main.ts
+++ b/packages/react/.storybook/main.ts
@@ -1,8 +1,34 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import remarkGfm from 'remark-gfm';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(ts|tsx)'],
-  addons: ['@storybook/addon-a11y', '@storybook/addon-docs'],
+  stories: [
+    '../src/**/*.stories.@(ts|tsx)',
+    '../src/**/*.mdx',
+    // Framework-agnostic Foundations prose, shared with the Angular Storybook so
+    // both stay in sync and story ids match for the framework switcher.
+    '../../storybook-config/docs/**/*.mdx',
+  ],
+  addons: [
+    '@storybook/addon-a11y',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        // MDX 3 has no GitHub-flavoured markdown, so pipe tables in .mdx render
+        // as literal text without this. Keep in sync with the Angular config.
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  staticDirs: [
+    { from: '../../storybook-config/static', to: 'downloads' },
+    // Persona-based accessibility skill — canonical source in .agents/skills/accessibility
+    { from: '../../../.agents/skills/accessibility', to: 'downloads/accessibility' },
+  ],
   framework: {
     name: '@storybook/react-vite',
     options: {},
diff --git a/packages/react/.storybook/preview.ts b/packages/react/.storybook/preview.ts
index b4943e05..480535f7 100644
--- a/packages/react/.storybook/preview.ts
+++ b/packages/react/.storybook/preview.ts
@@ -9,6 +9,7 @@ import {
 
 // Pull in Tailwind + the design tokens so stories render with the real styles.
 import '../src/index.css';
+import './storybook-docs.css';
 
 // Keep this a literal object so Storybook's static analyzer can read `tags`
 // (project-level autodocs) — a factory call can't be parsed statically.
@@ -28,8 +29,79 @@ export default {
     // execution). Keep in sync with packages/angular/.storybook/preview.ts.
     options: {
       storySort: {
-        method: 'alphabetical',
-        order: ['Foundations', 'Components'],
+        // `includeNames` is required: without it Storybook sorts on title only,
+        // so a page whose title has no subgroup always sorts before the groups,
+        // whatever `order` says.
+        // `configure` leaves anything not listed below in file order, which
+        // keeps each component's stories in the sequence they were authored.
+        method: 'configure',
+        includeNames: true,
+        order: [
+          'Curve',
+          [
+            'Overzicht',
+            'Voor designers',
+            [
+              'Overzicht',
+              'Robuust ontwerpen',
+              'Microcopy',
+              'Validatie van formulieren',
+              'Touch en vergroting',
+              'Meer leren',
+              ['Overzicht', 'Toegankelijkheid in andere design systems'],
+            ],
+            'Voor developers',
+            [
+              'Curve gebruiken',
+              'Robuust bouwen',
+              'Je werk testen',
+              [
+                'Overzicht',
+                'Handmatig testen',
+                'Geautomatiseerd testen',
+                'Wanneer je gebruik maakt van AI',
+              ],
+              'Wat vaak mis gaat',
+              [
+                'Naamloze knoppen',
+                'Teveel ARIA',
+                'Verkeerde ARIA',
+                'Ontbrekende pagina-structuur',
+                'Ontbrekende skiplinks',
+                'Ontbreken van unieke pagina-titel',
+                'Tabellen zonder koppen',
+                'Afbeeldingen zonder beschrijving',
+                'Slechte alt-tekst',
+                'Ontbrekende bijschriften',
+                'Video die automatisch afspeelt',
+                'Vaste breedtes',
+                'Te licht contrast',
+                'Tekst in afbeeldingen',
+                'Taalwissels zonder markering',
+                'Status alleen in kleur',
+                'Rood/groen-combinaties',
+                'Ongelabelde grafieken',
+                'Video zonder ondertiteling',
+                'Geen transcript',
+                'Kleine klikdoelen',
+                'Alleen slepen',
+                "Hover-menu's",
+                'Korte time-outs',
+                'Automatische beweging',
+                'Tijdsdruk',
+                'Vage foutmeldingen',
+                'Onduidelijke validatie',
+                'Op het slechtst denkbare moment',
+              ],
+              'Meer leren',
+            ],
+            'Toegankelijkheid',
+            'Updates en releases',
+            'Changelog en beslissingen',
+          ],
+          'Foundations',
+          'Components',
+        ],
       },
     },
   },
diff --git a/packages/react/.storybook/storybook-docs.css b/packages/react/.storybook/storybook-docs.css
new file mode 100644
index 00000000..f0c77ab2
--- /dev/null
+++ b/packages/react/.storybook/storybook-docs.css
@@ -0,0 +1,63 @@
+/* Restore list markers inside docs prose; Tailwind preflight strips them globally. */
+
+.sbdocs-content ul,
+.sbdocs-content ol {
+  list-style: revert;
+  font-size: inherit;
+  padding-inline-start: 1.5rem;
+}
+.sbdocs-content ul {
+  list-style-type: disc;
+}
+.sbdocs-content ol {
+  list-style-type: decimal;
+}
+.sbdocs-content ul ul {
+  list-style-type: circle;
+}
+.sbdocs-content ul ul ul {
+  list-style-type: square;
+}
+.sbdocs-content ol li,
+.sbdocs-content ul li {
+  font-size: inherit;
+}
+.sbdocs-content.sbdocs-content dl {
+  margin-block: 1em;
+}
+.sbdocs-content.sbdocs-content dt {
+  font-weight: 600;
+  font-size: inherit;
+}
+.sbdocs-content.sbdocs-content dd {
+  margin-inline-start: 1.5rem;
+  margin-block-end: 0.75em;
+  font-size: inherit;
+}
+.sbdocs-content dd:last-child {
+  margin-block-end: 0;
+}
+.sbdocs-content,
+.sbdocs-content p {
+  font-size: 1rem;
+}
+.sbdocs-content table :where(th, td) {
+  font-size: 1rem;
+  vertical-align: top;
+  text-align: left;
+}
+.sbdocs-content.sbdocs-content h2 {
+  margin-block-start: 2rem;
+}
+.sbdocs-content.sbdocs-content h3 {
+  margin-block-start: 1.5rem;
+}
+.sbdocs-content.sbdocs-content h4 {
+  margin-block-start: 1rem;
+}
+.sbdocs-content.sbdocs-content h5 {
+  margin-block-start: 0.5rem;
+}
+.sbdocs-a.sbdocs-a {
+  color: rgb(0 85 182);
+}
diff --git a/packages/react/package.json b/packages/react/package.json
index 134b3f0e..e9872dcf 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -62,6 +62,7 @@
     "@vitejs/plugin-react": "6.0.2",
     "react": "19.2.7",
     "react-dom": "19.2.7",
+    "remark-gfm": "^4.0.1",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "shadcn": "4.11.0",
     "storybook": "10.4.5",
diff --git a/packages/storybook-config/docs/curve/01-overzicht.mdx b/packages/storybook-config/docs/curve/01-overzicht.mdx
new file mode 100644
index 00000000..fd922317
--- /dev/null
+++ b/packages/storybook-config/docs/curve/01-overzicht.mdx
@@ -0,0 +1,66 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve" name="Overzicht" />
+
+# Curve
+
+Curve is het design system van SURF. Eén verzameling componenten, kleuren, typografie en richtlijnen
+die alle SURF-producten delen, zodat je niet in elk project opnieuw een knop, een dialoog of een
+formulier hoeft te bedenken.
+
+Deze Storybook is de plek waar je ziet wat er is, hoe het eruitziet en hoe je het gebruikt.
+
+## Waarom een design system
+
+- **Consistentie.** Een gebruiker die van het ene SURF-product naar het andere gaat, herkent de
+  interface. Dezelfde knop doet hetzelfde en ziet er hetzelfde uit.
+- **Snelheid.** Componenten zijn al ontworpen, gebouwd en getest. Je begint niet vanaf nul.
+- **[Toegankelijkheid](?path=/docs/curve--toegankelijkheid).** Toetsenbordgebruik, focus-indicatoren
+  en juiste rollen zitten in de componenten ingebouwd. Dat scheelt werk en voorkomt fouten die
+  anders pas laat opvallen.
+- **Onderhoud op één plek.** Een verbetering in een component komt in alle producten terecht die de
+  nieuwe versie installeren.
+
+## Waaruit bestaat Curve
+
+| Onderdeel                | Wat het is                                            | Voor wie                |
+| ------------------------ | ----------------------------------------------------- | ----------------------- |
+| `@surfnet/curve-react`   | De componenten voor React-projecten                   | Developers              |
+| `@surfnet/curve-angular` | Dezelfde componenten voor Angular-projecten           | Developers              |
+| Design tokens            | Kleuren, typografie, spacing en radius als variabelen | Designers en developers |
+| Deze Storybook           | Documentatie, voorbeelden en richtlijnen              | Iedereen                |
+
+De twee component-packages zijn bewust gescheiden: elk project gebruikt de versie die bij zijn
+framework past. Ze zien er hetzelfde uit en heten hetzelfde, omdat ze dezelfde design tokens en
+dezelfde afspraken over varianten gebruiken.
+
+## Twee frameworks, dezelfde componenten
+
+Een knop in React en een knop in Angular hebben dezelfde varianten (`default`, `outline`, `secondary`,
+`ghost`, `destructive`, `link`) en dezelfde maten. Dat wordt tijdens het bouwen automatisch gecontroleerd: staat er in het ene framework
+een variant die het andere niet heeft, dan faalt de build. Zo kunnen de twee packages niet stilletjes
+uit elkaar groeien.
+
+Rechtsboven in de werkbalk staat een **Framework**-schakelaar. Daarmee spring je naar dezelfde
+component in de Storybook van het andere framework.
+
+## Waar vind je wat
+
+- **Curve** — deze sectie: wat het design system is, hoe toegankelijkheid zit ingebouwd, hoe je het
+  gebruikt, en hoe updates werken.
+- **Voor designers** — Figma, microcopy, video, touch en vergroting.
+- **Voor developers** — installeren, thema's, en wat je zelf nog moet doen om toegankelijk te bouwen.
+- **Foundations** — de basis: design tokens (kleur, typografie, spacing).
+- **Components** — elk component met zijn varianten, states en voorbeelden. Op elke component-pagina
+  vind je onder **Docs** de eigenschappen die je kunt instellen.
+
+## Meedoen
+
+- Ben je **designer**? Begin bij [Voor designers](?path=/docs/curve-voor-designers--overzicht).
+- Ben je **developer**? Begin bij [Voor developers](?path=/docs/curve-voor-developers--curve-gebruiken).
+- Wil je weten hoe Curve toegankelijkheid aanpakt? Zie
+  [Toegankelijkheid](?path=/docs/curve--toegankelijkheid).
+- Wil je weten hoe nieuwe versies verschijnen? Zie
+  [Updates en releases](?path=/docs/curve--updates-en-releases).
+- Wil je weten hoe de changelog eruit ziet? Zie
+  [Changelog en beslissingen](?path=/docs/curve--changelog-en-beslissingen).
diff --git a/packages/storybook-config/docs/curve/02-voor-designers/01-overzicht.mdx b/packages/storybook-config/docs/curve/02-voor-designers/01-overzicht.mdx
new file mode 100644
index 00000000..4b853cd0
--- /dev/null
+++ b/packages/storybook-config/docs/curve/02-voor-designers/01-overzicht.mdx
@@ -0,0 +1,80 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor designers" name="Overzicht" />
+
+# Voor designers
+
+Deze pagina beschrijft hoe een ontwerpwijziging in Curve terechtkomt: waar je hem maakt, hoe hij in de
+code belandt en wat er van je verwacht wordt zodat een developer er direct mee verder kan.
+
+## Figma is de bron
+
+Alle kleuren, typografie, spacing en hoekafrondingen staan als **variabelen in Figma**. Die variabelen
+zijn de officiële bron: de code haalt de waarden daaruit op, niet omgekeerd.
+
+Dat betekent één belangrijke afspraak: **pas kleuren nooit direct in de code aan.** Wijzig je een
+kleur alleen in de code, dan verdwijnt die wijziging bij de volgende synchronisatie met Figma. Wijzig
+je hem in Figma, dan komt hij overal terecht.
+
+## Van Figma naar code, stap voor stap
+
+1. Je past een variabele aan in Figma, of voegt een nieuwe toe.
+2. Een developer haalt de variabelen op met één commando (`pnpm sync:figma`). De waarden worden
+   opgeslagen als tekstbestanden in de repository.
+3. Uit die bestanden wordt automatisch de stylesheet gebouwd die de componenten gebruiken.
+4. De wijziging krijgt een versienummer en wordt gepubliceerd — zie
+   [Updates en releases](?path=/docs/curve--updates-en-releases).
+5. Projecten die de nieuwe versie installeren, hebben je wijziging binnen.
+
+Stap 2 en 3 gebeuren niet automatisch bij elke Figma-wijziging. Laat dus even weten dat er iets klaar
+staat, anders blijft het in Figma hangen.
+
+## Wat loopt via tokens en wat niet
+
+| Wat je wijzigt                                      | Hoe het werkt                                      |
+| --------------------------------------------------- | -------------------------------------------------- |
+| Kleur, typografie, spacing, hoekafronding, schaduw  | Via een Figma-variabele: synchroniseren en klaar   |
+| Een nieuwe variant van een bestaand component       | Kleine codewijziging, in overleg met een developer |
+| Gedrag: wat gebeurt er bij klikken, openen, sluiten | Altijd code, niet in te stellen via tokens         |
+| Een compleet nieuw component                        | Ontwerp plus afstemming, zie hieronder             |
+
+Vuistregel: **hoe iets eruitziet** loopt meestal via tokens, **wat iets doet** is altijd code.
+
+## Thema's
+
+Curve ondersteunt meerdere thema's (bijvoorbeeld een donkere modus en varianten met een andere
+accentkleur). Een thema is een set variabelen die bepaalde waarden overschrijft.
+
+Ontwerp je iets nieuws, controleer het dan in minimaal licht én donker. Gebruik daarvoor de
+**Theme**-schakelaar in de werkbalk van deze Storybook. Kies altijd een token in plaats van een vaste
+kleurcode, dan werkt je ontwerp automatisch in alle thema's.
+
+## Een nieuw component of variant voorstellen
+
+1. **Kijk eerst of het al bestaat.** Zoek in **Components**. Vaak is wat je nodig hebt een bestaand
+   component met andere inhoud, of een combinatie van twee componenten.
+2. **Beschrijf waarvoor het is.** In welk product, welke taak van de gebruiker, hoe vaak. Componenten
+   die maar op één plek voorkomen horen meestal niet in het design system.
+3. **Lever alle states.** Standaard, hover, focus, actief, uitgeschakeld, met foutmelding, leeg, en aan
+   het laden. Een ontwerp zonder states wordt door iemand anders verzonnen.
+4. **Geef aan wat er gebeurt bij weinig en veel inhoud.** Lange labels, twee regels tekst, een lege
+   lijst.
+5. **Gebruik bestaande tokens.** Heb je echt een nieuwe waarde nodig, benoem dat expliciet — het is
+   een beslissing, geen detail.
+
+## Checklist: is dit ontwerp klaar voor implementatie?
+
+- Alle states zijn getekend.
+- Kleuren komen uit variabelen, niet uit losse hex-codes.
+- Getest in licht en donker.
+- Tekstcontrast is minimaal 4,5:1 voor normale tekst en 3:1 voor iconen en randen.
+- De focus-indicator is zichtbaar en niet weggehaald.
+- Duidelijk welke elementen aanklikbaar zijn, ook zonder kleurverschil.
+- Interactieve elementen zijn minimaal 24×24 pixels (44×44 is comfortabel).
+- Betekenis zit nooit alleen in kleur — zie
+  [Robuust ontwerpen](?path=/docs/curve-voor-designers--robuust-ontwerpen).
+
+## Waar beslissingen worden vastgelegd
+
+Grotere keuzes — waarom een component zo werkt, waarom een token zo heet — worden apart
+gedocumenteerd. Zie [Changelog en beslissingen](?path=/docs/curve--changelog-en-beslissingen).
diff --git a/packages/storybook-config/docs/curve/02-voor-designers/02-robuust-ontwerpen.mdx b/packages/storybook-config/docs/curve/02-voor-designers/02-robuust-ontwerpen.mdx
new file mode 100644
index 00000000..bd10d200
--- /dev/null
+++ b/packages/storybook-config/docs/curve/02-voor-designers/02-robuust-ontwerpen.mdx
@@ -0,0 +1,113 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor designers" name="Robuust ontwerpen" />
+
+# Robuust ontwerpen
+
+De meeste toegankelijkheidsfouten zijn niet bijzonder. Een handvol terugkerende missers verklaart het
+overgrote deel van wat audits vinden, en ze zijn allemaal niet zo moeilijk te voorkomen als je weet waar je op
+moet letten. Veel daarvan ontstaan in het ontwerp, nog voordat er een regel code is.
+
+Uitwerking van tekst, media en vergroting staat bij
+[Microcopy](?path=/docs/curve-voor-designers--microcopy),
+[Validatie van formulieren](?path=/docs/curve-voor-designers--validatie-van-formulieren),
+[Video en audio](?path=/docs/curve-voor-designers--video-en-audio)
+en
+[Touch en vergroting](?path=/docs/curve-voor-designers--touch-en-vergroting).
+
+## Persona's
+
+Dit is een lijst met verschillende beperkingen die je moet overwegen wanneer je een website ontwerpt. Het is geen volledige lijst, en van sommige beperkingen wordt een beeld geschetst van hoe diegene gebruik _kan_ maken van je website.
+
+| Persona                      | Hoe diegene jouw website gebruikt                      | Waar het misgaat in het ontwerp                                                                  |
+| ---------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
+| Blind, screenreadergebruiker | Alleen toetsenbord, luistert; navigeert via koppen en links | Icoonknoppen zonder naam, formuliervelden zonder label, alleen "Lees meer" links |
+| Slechtziend, vergroting      | 200–400% zoom, hoog contrast, grote letters            | Vaste breedtes, te licht contrast, tekst in afbeeldingen                                         |
+| Kleurenblind                 | Ziet de opmaak, niet het kleurverschil                 | Status alleen in kleur, rood/groen-combinaties, grafieken zonder beschrijving                           |
+| Doof of slechthorend         | Leest in plaats van luistert                           | Video zonder ondertiteling, geen transcript                                                      |
+| Beperkte motoriek            | Toetsenbord, switch, spraak of oogbesturing            | Kleine klikdoelen, objecten die alleen gesleept kunnen worden, hover-menu's                                                   |
+| Cognitief of neurodivergent  | Heeft rust, voorspelbaarheid en eenvoud nodig          | Jargon, veel animaties, tijdsdruk, vage foutmeldingen                                     |
+| Tijdelijk of situationeel    | Van alles, kort en onhandig                            | Alles hierboven, op het slechtst denkbare moment                                                 |
+
+## Blind, screenreadergebruiker
+
+Gebruikt NVDA, JAWS, VoiceOver of TalkBack en ziet de opmaak nooit. De pagina wordt als structuur
+opgenomen: een lijst met koppen, een lijst met links, en dan pas inhoud. Visuele groepering
+betekent niets als die niet in de hiërarchie van het ontwerp zit.
+
+Wat dit van je vraagt: koppen in een logische volgorde, niet omdat het formaat klopt. Elk bedienbaar
+element een zichtbaar tekstlabel. Icoonknoppen die in het ontwerp al een naam meekrijgen, anders
+wordt er "knop" voorgelezen. Alternatieve tekst die vertelt wat een afbeelding overbrengt, niet wat
+erop staat. Hoe je labels schrijft, staat bij
+[Microcopy](?path=/docs/curve-voor-designers--microcopy).
+Hoe je alt-tekst schrijft, staat bij
+[Slechte alt-tekst](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--slechte-alt-tekst).
+
+## Slechtziend, vergroting
+
+Zoomt tot 200% of verder, of zet het besturingssysteem op grote letters. Bij 400% zoom op een viewport
+van 1280px is jouw desktoplayout nog ongeveer 320px breed: het WCAG-criterium Reflow zegt dat de
+inhoud daar moet blijven werken, in één scrollrichting, zonder dat er iets wegvalt.
+
+Wat dit van je vraagt: layouts die meebewegen in plaats van horizontaal scrollen, tekst die 200%
+vergroting overleeft zonder over elkaar te vallen, contrast van minimaal 4,5:1 voor lopende tekst en
+3:1 voor interface-elementen en iconen, en geen essentiële tekst die in een afbeelding zit. Hoe je
+zoom en informatieve afbeeldingen aanpakt, staat bij
+[Touch en vergroting](?path=/docs/curve-voor-designers--touch-en-vergroting).
+
+## Kleurenblind
+
+Ongeveer 8% van de mannen en 0,5% van de vrouwen heeft een vorm van kleurenblindheid, meestal
+rood/groen. Zij zien jouw opmaak prima; wat wegvalt is het onderscheid dat je in kleur hebt gestopt.
+
+Wat dit van je vraagt: laat kleur nooit de enige manier zijn waarop je informatie communiceert. Combineer het met een icoon, een label,
+een patroon of een positie. Een invoerveld dat rood kleurt is onzichtbaar; een veld dat rood kleurt,
+een waarschuwingsicoon krijgt en de zin "Vul een geldig e-mailadres in" toont, werkt voor iedereen.
+
+## Doof of slechthorend
+
+Leest in plaats van luistert. Beschrijft ook iedereen in een kantoortuin zonder koptelefoon.
+
+Wat dit van je vraagt: ondertiteling bij alles waarin gesproken wordt, transcripten bij audio, en geen
+statuswijziging die alleen met geluid wordt aangekondigd. Uitwerking staat bij
+[Video en audio](?path=/docs/curve-voor-designers--video-en-audio).
+
+## Beperkte motoriek
+
+Een brede groep: tremor, RSI, bediening met één hand, een switch, spraakbesturing, oogbesturing. Wat ze
+delen is dat nauwkeurig aanwijzen duur of onmogelijk is.
+
+Wat dit van je vraagt: klikdoelen van minimaal 24×24 CSS-pixels (44×44 is comfortabel). Alles wat je
+met slepen kunt doen, moet ook met één klik kunnen. Inhoud die alleen bij hover verschijnt is
+onbereikbaar: toon die ook bij focus, en zorg dat je hem kunt wegklikken zonder de muis te verplaatsen.
+Ontwerp een zichtbare focusring, en haal hem niet weg omdat hij niet bij het ontwerp past. De visuele
+volgorde moet gelijk zijn aan de leesvolgorde. Maten, telefoon en gebaren staan bij
+[Touch en vergroting](?path=/docs/curve-voor-designers--touch-en-vergroting).
+
+## Cognitief of neurodivergent
+
+Dyslexie, ADHD, autisme, verschillen in geheugen of verwerkingssnelheid, angst: en iedereen onder
+druk. Dit is de grootste groep, en niets ervan is in de pixels te zien.
+
+Wat dit van je vraagt: gewone taal in plaats van slimme taal, navigatie en knoppen die steeds op
+dezelfde plek staan, geen onverwachte beweging of automatisch afspelen, ruime of verlengbare
+tijdslimieten, foutmeldingen die het probleem én de oplossing noemen, en niets dat afhangt van wat
+iemand zich uit een vorige stap herinnert. Hoe je die teksten schrijft, staat bij
+[Microcopy](?path=/docs/curve-voor-designers--microcopy)
+en
+[Validatie van formulieren](?path=/docs/curve-voor-designers--validatie-van-formulieren).
+
+## Tijdelijk of situationeel
+
+Een gebroken arm, een ooginfectie, een kind op de arm, een gebarsten scherm, fel zonlicht, een tunnel.
+Niemand hiervan noemt zichzelf beperkt, en ze lopen allemaal tegen dezelfde drempels aan.
+
+Dit is het curb-cut-effect: ondertiteling wordt gebruikt in stille kantoren, groot lettertype door
+mensen buiten, grote klikdoelen met één hand op een perron. Werk dat je voor de persona's hierboven
+doet, is zelden alleen voor hen.
+
+Toets een scherm tegen een situationele vraag, niet alleen tegen een diagnose:
+
+- Kan ik dit met één hand, op een telefoon, in fel licht?
+- Kan ik dit zonder geluid, zonder muis, zonder kleur?
+- Kan ik dit als ik de vorige stap alweer ben vergeten?
diff --git a/packages/storybook-config/docs/curve/02-voor-designers/03-microcopy.mdx b/packages/storybook-config/docs/curve/02-voor-designers/03-microcopy.mdx
new file mode 100644
index 00000000..395e167b
--- /dev/null
+++ b/packages/storybook-config/docs/curve/02-voor-designers/03-microcopy.mdx
@@ -0,0 +1,57 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor designers" name="Microcopy" />
+
+# Microcopy
+
+Toegankelijkheid is geen ontwikkelaarsklus die ná de tekst komt. De woorden die je schrijft bepalen of
+iemand een pagina kan volgen of een link kan kiezen. Een screenreader leest precies wat jij hebt
+geschreven: niet wat je bedoelde, en niet wat ernaast in het ontwerp staat.
+
+## Gewone taal
+
+Schrijf alsof de lezer haast heeft, de term voor het eerst ziet, of de vorige stap alweer is
+vergeten. Dat is de [cognitieve persona](?path=/docs/curve-voor-designers--robuust-ontwerpen), en het is de grootste groep.
+
+- Korte zinnen.
+- Het gewone woord als het de lading dekt. "Aanvragen" in plaats van "initiëren". Gebruik bijvoorbeeld [ishetb1.nl](https://ishetb1.nl) voor alternatieven.
+- Koppen die een inhoudsopgave vormen als je de rest wegdenkt. "Factuur downloaden", niet "Overig".
+- Geen woordgrap, metafoor of interne afkorting als de zin zonder die grap ook werkt.
+
+Jargon is toegestaan als je lezer het vak spreekt. Leg het één keer uit als je niet zeker weet dat
+iedereen het kent.
+
+## Links die los van hun context kloppen
+
+Een screenreadergebruiker springt tussen interactieve elementen op de pagina, of vraagt een lijst met alle links op de pagina. "Lees meer", "Klik hier" en "Hier" zeggen dan niets over wat de link doet.
+
+| In plaats van                    | Schrijf                                           |
+| -------------------------------- | ------------------------------------------------- |
+| Lees meer                        | Lees het onderzoeksrapport over hybride onderwijs |
+| Klik hier                        | Download de handleiding (pdf)                     |
+| Hier / Meer info                 | Naar de inschrijfpagina                           |
+| De handleiding vind je [hier](#) | [Handleiding aanvragen](#)                        |
+
+De zichtbare tekst ís de toegankelijke naam. Stop de bestemming niet in een `title` of in een zin
+ernaast waarop de link niet staat.
+
+Een uitzondering: als dezelfde bestemming vlakbij al een beschrijvende kop of knop heeft, mag een
+korte link: maar nooit als enige toegang.
+
+
+## Validatie van formulieren
+
+"Ongeldige invoer" zegt dat er iets mis is, niet wát, en niet hoe het wél moet. De lezer heeft het
+probleem én de oplossing nodig, in gewone taal, bij het veld waar het misging.
+
+## Foutmeldingen die verder helpen
+
+| In plaats van       | Schrijf                                                                  |
+| ------------------- | ------------------------------------------------------------------------ |
+| Ongeldige invoer    | Vul een datum in als DD-MM-JJJJ, bijvoorbeeld 04-09-2026                 |
+| Verplicht veld      | Vul een e-mailadres in                                                   |
+| Fout                | Dit wachtwoord is te kort. Gebruik minimaal 12 tekens                    |
+| Probeer het opnieuw | We konden niet opslaan. Controleer je verbinding en probeer het nog eens |
+
+Zeg wat er wél mag, niet alleen wat er fout is. Verwijs niet naar "het rode veld" of "hierboven":
+die aanwijzing verdwijnt voor wie geen kleur ziet of de pagina beluistert.
diff --git a/packages/storybook-config/docs/curve/02-voor-designers/04-validatie-van-formulieren.mdx b/packages/storybook-config/docs/curve/02-voor-designers/04-validatie-van-formulieren.mdx
new file mode 100644
index 00000000..cc0ddd88
--- /dev/null
+++ b/packages/storybook-config/docs/curve/02-voor-designers/04-validatie-van-formulieren.mdx
@@ -0,0 +1,14 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor designers" name="Validatie van formulieren" />
+
+
+# Fouten toestaan
+
+Mensen maken typefouten, kiezen de verkeerde optie, of sturen een formulier te vroeg in. Een
+toegankelijk product straft dat niet af.
+
+- Toon de eisen _vóór_ het versturen: het datumformaat, de minimale lengte, wat niet verplicht is (maak standaard velden verplicht).
+- Houd de verzendknop bruikbaar. Een `disabled` knop zonder uitleg is een doodlopende weg.
+- Laat iemand een destructieve actie bevestigen ("Factuur 2026-104 verwijderen?"), en bied daarna een manier om terug te gaan als dat nog kan.
+- Bewaar wat er al is ingevuld als er iets misgaat. "Begin opnieuw" is geen herstel, het is straf.
diff --git a/packages/storybook-config/docs/curve/02-voor-designers/05-video-en-audio.mdx b/packages/storybook-config/docs/curve/02-voor-designers/05-video-en-audio.mdx
new file mode 100644
index 00000000..4de153dd
--- /dev/null
+++ b/packages/storybook-config/docs/curve/02-voor-designers/05-video-en-audio.mdx
@@ -0,0 +1,65 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+{/* Tijdelijk uit de sidebar tot de tekst is nagekeken. Verwijder tags={['!dev']} om hem weer te tonen. */}
+<Meta title="Curve/Voor designers" name="Video en audio" tags={['!dev']} />
+
+# Video en audio
+
+Een filmpje zonder tekstalternatief sluit iedereen uit die niet (goed) kan horen, die het geluid
+niet aan mag, of die de beelden niet kan zien. De
+[dove of slechthorende persona](?path=/docs/curve-voor-designers--robuust-ontwerpen)
+is het scherpst, maar ondertiteling gebruikt ook iedereen in een stille trein of een kantoortuin.
+
+## Wat erbij hoort
+
+| Soort media                        | Minimaal nodig                                      | Waarom                                              |
+| ---------------------------------- | --------------------------------------------------- | --------------------------------------------------- |
+| Video met gesproken woord          | Ondertiteling (dovenondertiteling)                  | Wie niet hoort, moet het gesprek én de geluiden kunnen lezen |
+| Video waarin beeld de betekenis is | Audiodescriptie, of een tekst die hetzelfde vertelt | Wie niet ziet, mist anders de handeling             |
+| Alleen audio (podcast, interview)  | Transcript                                          | Zonder geluid blijft er anders niets over           |
+| Live video met spraak              | Ondertiteling terwijl het loopt, of zo snel als kan | Zelfde eis, lastiger te organiseren                 |
+
+**Dovenondertiteling** is meer dan de vertaling van het gesproken woord. Je neemt ook de geluiden
+mee die je nodig hebt om het filmpje te volgen: wie er praat als dat niet zichtbaar is, applaus,
+een deurbel, muziek die de sfeer draagt. `(Applaus.)` hoort erbij; de songtekst van de achtergrond
+meestal niet.
+
+Een **transcript** is de hele inhoud als tekst, op dezelfde pagina of direct ernaast. Bij audio is
+dat het enige alternatief. Bij video is het een extra: je kunt erin zoeken, citeren, en het lezen
+op je eigen tempo.
+
+**Audiodescriptie** beschrijft wat er in beeld gebeurt als dat niet uit de dialoog blijkt: wie
+binnenkomt, wat er op het scherm verschijnt, welke knop iemand indrukt. Als de spreker dat al
+hardop doet ("op de knop Opslaan, linksonder"), heb je geen aparte track nodig.
+
+## Wat je niet doet
+
+- **Niet automatisch afspelen**, en al helemaal niet met geluid. Wie het niet kan pauzeren, of wie
+  een screenreader gebruikt, raakt het spoor kwijt.
+- **Geen status die alleen een piepje is.** Een upload die "klaar" klinkt en verder niets toont,
+  bestaat niet voor wie het geluid mist. Zet er tekst of een icoon met naam bij.
+- **Geen essentiële informatie alleen in het beeld**, zonder die ook te zeggen of te ondertitelen
+  : een QR-code, een URL, een deadline op een slide.
+- **Geen speler die alleen met de muis werkt.** Play, pauze, ondertiteling aan/uit en het volume
+  horen met het toetsenbord bereikbaar te zijn, met een zichtbare focus.
+
+## Ondertiteling aanleveren
+
+Lever ondertitels als een apart bestand aan (WebVTT of wat jouw speler eist), niet ingebrand in het
+beeld. Ingebrande tekst schaalt niet mee, heeft vaak te weinig contrast, en kan niet uit. Een apart
+bestand kan de gebruiker aan- of uitzetten, en een screenreader kan het als tekst behandelen.
+
+Controleer de ondertiteling. Automatische herkenning is een concept, geen oplevering: namen,
+vaktaal en wie-spreekt-wanneer gaan stelselmatig mis.
+
+## Hoe je weet dat het klopt
+
+Zet het geluid uit en kijk het filmpje. Mis je een grap, een instructie of een wending, dan is de
+ondertiteling te dun.
+
+Zet daarna het beeld uit: of lees alleen het transcript. Mis je een handeling, een schema of een
+resultaat dat alleen getoond werd, dan ontbreekt audiodescriptie of een tekstalternatief.
+
+Dit is geen werk dat axe vindt. Het is dezelfde tien minuten als de
+[handmatige ronde](?path=/docs/curve-voor-developers-je-werk-testen--handmatig-testen), maar dan voor
+media.
diff --git a/packages/storybook-config/docs/curve/02-voor-designers/06-touch-en-vergroting.mdx b/packages/storybook-config/docs/curve/02-voor-designers/06-touch-en-vergroting.mdx
new file mode 100644
index 00000000..18c3329e
--- /dev/null
+++ b/packages/storybook-config/docs/curve/02-voor-designers/06-touch-en-vergroting.mdx
@@ -0,0 +1,101 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor designers" name="Touch en vergroting" />
+
+# Touch en vergroting
+
+Op een telefoon zijn de doelen kleiner, de vingers onnauwkeuriger, en is zoom de enige manier om tekst te lezen. Dezelfde drempels gelden voor mensen met [beperkte motoriek](?path=/docs/curve-voor-designers--robuust-ontwerpen) en voor mensen met [slechtziendheid](?path=/docs/curve-voor-designers--robuust-ontwerpen).
+
+## Aanraakdoelen
+
+WCAG 2.2 vraagt minimaal **24×24 CSS-pixels** voor elk bedienbaar element (2.5.8). **44×44** is
+comfortabel: dat is wat je duim haalt zonder te mikken, en wat Apple en Android al jaren als
+richtlijn geven.
+
+Dat geldt voor knoppen, links, selectievakjes, icoontjes in een toolbar, en de sluitknop van een
+dialoog. Een tekstlink in een alinea mag kleiner, omdat de regel ernaast per ongeluk tikken
+ondervangt. Losse icoonknoppen hebben die ruimte niet.
+
+- Zet ruimte _tussen_ doelen, niet alleen grotere iconen. Twee 24-pixel-iconen tegen elkaar aan
+  zijn één verkeerde tik.
+- Het klikvlak mag groter zijn dan de tekening. Padding telt; een 16-pixel-icoon in een
+  44-pixel-knop is in orde.
+- Curve-componenten zitten aan de ruime kant. Maak ze niet kleiner om een toolbar "strakker" te krijgen.
+
+Alles wat je sleept: een slider, een kaart, een rangschiklijst: heeft een alternatief met één tik of met het toetsenbord nodig. Sleep is als een 'progressive enhancement' voor wie het kan, niet de enige manier om een doel te bereiken.
+
+## Gebruik op een telefoon
+
+- **Geen hover-menu's als enige toegang.** Een telefoon heeft geen hover. Zorg dat dezelfde inhoud
+  ook met een tik te openen is, en weer weg te tikken zonder de vinger te verplaatsen.
+- **Blokkeer zoomen niet.** Wie de tekst niet kan vergroten, kan de pagina niet gebruiken. Zoom
+  uitzetten om te voorkomen dat invoervelden "raar" inzoomen, is geen oplossing: het is verboden.
+- **Invoervelden niet kleiner dan 16px.** iOS zoomt anders de hele pagina in zodra je het veld
+  aantikt: hinderlijk, en een signaal dat het veld te klein was.
+- **Geen actie die alleen een gebaar is** (swipe om te verwijderen, pinch om te openen) zonder een
+  zichtbare knop die hetzelfde doet.
+
+Test op een echt toestel, met je vinger in plaats van de precisie van een muis. Tik de sluitknop,
+de secundaire actie, de checkbox in een lijst. Wat je mist, mist iedereen in de trein.
+
+## De pagina vergroten
+
+Vergroten is geen extra functie: mensen gebruiken de zoom van hun browser. Jouw layout moet dat
+overleven.
+
+- Bij **200% zoom** blijft alles leesbaar: geen overlapping, geen afgesneden labels, geen tekst
+  die in zijn kader verdwijnt.
+- Bij **400% zoom** (of een venster van 320px breed) vouwt de opmaak terug naar één kolom. Eén
+  scrollrichting. Horizontaal scrollen door de hele pagina is niet toegestaan (WCAG 1.4.10).
+- Vaste breedtes, tekst die niet mag afbreken, en kaders met een vaste hoogte die overlopende
+  inhoud afsnijden, zijn de drie oorzaken die je bijna altijd vindt.
+
+De stappen om dit na te lopen staan in
+[Handmatig testen](?path=/docs/curve-voor-developers-je-werk-testen--handmatig-testen). Doe ze op het
+scherm dat je net hebt ontworpen, niet alleen op de homepage.
+
+## Inzoomen op een afbeelding
+
+Pagina-zoom helpt niet als de informatie in een plaatje zit dat zelf niet groter wordt, of dat
+bij vergroting een onleesbare brij van pixels is. Denk aan een schema, een kaart, een screenshot
+van een interface, een poster, een tabel die als plaatje is aangeleverd.
+
+Wat je dan doet:
+
+- **Zet de informatie óók als tekst** als dat kan. Een grafiek met één boodschap hoort die
+  boodschap in de lopende tekst of in de
+  [alt-tekst](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--slechte-alt-tekst).
+- **Lever een grotere versie.** Een vector schaalt mee. Een foto of screenshot heeft een bestand
+  nodig dat 200–400% zoom overleeft, of een link naar de originele, grotere versie.
+- **Geef een expliciete vergroot-actie** als de afbeelding in een klein kader staat: "Open de
+  figuur groter", of een pagina met alleen die afbeelding. Inzoomen met twee vingers op een
+  thumbnail in een carrousel is geen betrouwbare route: die vangt de pagina of de carrousel vaak
+  af.
+- **Laat inzoomen met twee vingers werken**, ook in een overlay. Een pop-up die alle gebaren
+  opeist, maakt de afbeelding erin onleesbaar.
+
+Een sfeerfoto hoeft niet vergroot te kunnen. Een afbeelding waar iemand een beslissing aan
+ontleent, wel.
+
+## Affordance op een klein oppervlak
+
+Iets dat eruitziet als een knop moet een knop zijn, en groot genoeg om die knop te _zijn_. Een
+onderstreepte zin is een link. Een grijs veld is invoer. Als het ontwerp die signalen wegpoetst
+om "rustig" te ogen, weet niemand wat tikt: met muis niet, met duim niet, met spraak niet.
+
+Knoppen zonder zichtbaar label, en extra's die alleen bij hover verschijnen, vallen op een
+telefoon harder door de mand dan op een desktop.
+
+## Checklist: is dit ontwerp toegankelijk op een telefoon of sterk ingezoomed?
+
+- Elk tikdoel is minimaal 24×24 pixels (44×44 is comfortabel), met ruimte ertussen.
+- Icoonknoppen hebben een klikvlak dat groter is dan het icoon zelf.
+- Alles wat je sleept of swipet, kan ook met één tik.
+- Hover-menu's zijn ook met een tik te openen en te sluiten.
+- Zoomen is niet geblokkeerd.
+- Invoervelden zijn minimaal 16px.
+- Bij 200% zoom overlapt niets en wordt geen tekst afgesneden.
+- Bij 400% zoom (of 320px breed) is er één kolom en één scrollrichting.
+- Tekst mag afbreken; kaders knippen geen inhoud af bij een vaste hoogte.
+- Informatie in een afbeelding staat óók als tekst, of de afbeelding is te vergroten.
+- Knoppen, links en invoervelden zien eruit zoals ze werken, met een zichtbaar label.
diff --git a/packages/storybook-config/docs/curve/02-voor-designers/07-meer-leren/01-overzicht.mdx b/packages/storybook-config/docs/curve/02-voor-designers/07-meer-leren/01-overzicht.mdx
new file mode 100644
index 00000000..197e268c
--- /dev/null
+++ b/packages/storybook-config/docs/curve/02-voor-designers/07-meer-leren/01-overzicht.mdx
@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor designers/Meer leren" name="Overzicht" />
+
+# Meer leren
+
+## Begin hier
+
+- [Learn Accessibility (web.dev)](https://web.dev/learn/accessibility/): een cursus die bij het begin
+  begint. Het beste startpunt als je dit nooit bewust hebt gedaan.
+- [Practical Accessibility](https://practical-accessibility.today/) van Sara Soueidan: een cursus die bij het begin begint met veel videomateriaal (betaald, Engelstalig).
+- [De checklist van The A11Y Project](https://www.a11yproject.com/checklist/): WCAG herschreven als
+  dingen die je echt kunt nalopen, in gewone taal.
+- [WCAG uitgelegd](https://digitaaltoegankelijk.nl/wcag-uitgelegd/): WCAG 2.2 in gewone taal, met de
+  niveaus A, AA en AAA en een checklist.
+- [WebAIM-artikelen](https://webaim.org/articles/): de standaarduitleg over alt-teksten, formulieren,
+  contrast en screenreaders. Twintig jaar opgebouwde helderheid.
+
+## De normen zelf
+
+- [WCAG 2.2 quick reference](https://www.w3.org/WAI/WCAG22/quickref/): filterbaar op niveau. Dit is het
+  document waar je in een review naar verwijst.
+- [Understanding WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/): de bedoeling en uitgewerkte
+  voorbeelden per criterium. Lees dit wanneer een criterium onredelijk lijkt.
+- [EN 301 549](https://www.etsi.org/deliver/etsi_en/301500_301599/301549/): de Europese norm waaraan
+  aanbestedingen en toegankelijkheidsverklaringen worden getoetst.
+
+## Ontwerp- en codepatronen
+
+Wat we van andere design systems overnemen, staat bij
+[Toegankelijkheid in andere design systems](?path=/docs/curve-voor-designers-meer-leren--toegankelijkheid-in-andere-design-systems).
+
+- [Inclusive Components](https://inclusive-components.design/): Heydon Pickering die veelgebruikte
+  componenten tot op de bodem uitwerkt. Lees het hoofdstuk over wat je nu bouwt.
+- [NL Design System](https://nldesignsystem.nl/): Nederlands overheidsdesignsysteem met richtlijnen per
+  component; handig voor een gedeelde woordenschat met partnerinstellingen.
+- [GOV.UK Design System](https://design-system.service.gov.uk/): op onderzoek gebaseerde componenten met
+  gepubliceerde acceptatiecriteria en bekende problemen.
+- [IBM Carbon](https://carbondesignsystem.com/): per component een tabblad met volledige tabellen voor
+  toetsenbordbediening.
+- [MDN over toegankelijkheid](https://developer.mozilla.org/en-US/docs/Web/Accessibility): de
+  naslagdocumentatie voor rollen, statussen en eigenschappen.
+
+## Voor designers en tekstschrijvers
+
+- [Inclusief communiceren over mensen met beperking: 8 tips](https://www.movisie.nl/artikel/inclusief-communiceren-over-mensen-beperking-8-tips)
diff --git a/packages/storybook-config/docs/curve/02-voor-designers/07-meer-leren/02-toegankelijkheid-in-andere-design-systems.mdx b/packages/storybook-config/docs/curve/02-voor-designers/07-meer-leren/02-toegankelijkheid-in-andere-design-systems.mdx
new file mode 100644
index 00000000..6f8eddfd
--- /dev/null
+++ b/packages/storybook-config/docs/curve/02-voor-designers/07-meer-leren/02-toegankelijkheid-in-andere-design-systems.mdx
@@ -0,0 +1,56 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor designers/Meer leren" name="Toegankelijkheid in andere design systems" />
+
+# Toegankelijkheid in andere design systems
+
+Elk volwassen design system heeft dezelfde vraag moeten beantwoorden: hoe voorkom je dat kennis over
+toegankelijkheid in het hoofd van één specialist blijft zitten? Hun antwoorden zijn openbaar, en het is
+verstandiger om ervan te lenen dan het opnieuw te bedenken.
+
+| Design system                | Hoe toegankelijkheid er terugkomt                                                                       |
+| ---------------------------- | ------------------------------------------------------------------------------------------------------- |
+| GOV.UK Design System         | Acceptatiecriteria per component, gepubliceerd gebruikersonderzoek, openlijk vermelde bekende problemen |
+| NL Design System             | Door de community onderhouden richtlijnen per component, met het WCAG-criterium erbij vermeld           |
+| U.S. Web Design System       | Een toegankelijkheidsparagraaf bij elk component, gekoppeld aan de verplichtingen uit Section 508       |
+| IBM Carbon                   | Een apart tabblad per component met volledige tabellen voor toetsenbordbediening                        |
+| Adobe Spectrum / React Aria  | Gedrag ondergebracht in getoetste headless hooks, getest op een matrix van echte screenreaders          |
+| Atlassian Design System      | Richtlijnen per component plus een definition of done op teamniveau                                     |
+| Shopify Polaris              | Toegankelijkheid als expliciet fundament, met do's en don'ts per component                              |
+| W3C ARIA Authoring Practices | Geen design system: de referentie-implementatie voor elk widgetpatroon                                  |
+
+## Wat de moeite waard is om over te nemen
+
+**Leg de criteria per component vast, niet per systeem.** Het sterkste idee van GOV.UK zijn de
+acceptatiecriteria voor toegankelijkheid: een korte lijst, gekoppeld aan het component, van wat waar
+moet zijn voordat het af is. Daarmee wordt "is dit toegankelijk?" van een inschatting een checklist die
+iemand zonder specialistische kennis kan aflopen.
+
+**Documenteer het toetsenbordcontract.** Zowel Carbon als de ARIA Authoring Practices Guide publiceren
+een tabel met elke toets waarop een component reageert. Dat is het nuttigste dat de documentatie van een
+component kan bevatten: het is in tien seconden te testen, en het is het eerste dat misgaat wanneer
+iemand het component zelf namaakt.
+
+**Publiceer bekende problemen in plaats van ze te verbergen.** GOV.UK vermeldt per component welke
+toegankelijkheidsproblemen nog niet zijn opgelost. Dat is ongemakkelijk en enorm bruikbaar: gebruikers
+kunnen een geïnformeerde keuze maken in plaats van aan te nemen dat het systeem alles heeft afgedekt.
+
+**Stop gedrag in een getoetste laag.** React Aria van Adobe en de Brain-laag van Spartan delen hetzelfde
+uitgangspunt: interactielogica is te subtiel om per product opnieuw te bouwen, dus hoort die in een
+primitief dat tegen echte hulpsoftware is getest. Curve maakt dezelfde scheiding: Base UI in React,
+Brain in Angular: en daarom gaan deze richtlijnen vooral over samenstellen en niet over het bouwen van
+widgets.
+
+**Noem het WCAG-criterium waar een regel bij hoort.** Het NL Design System is hier goed in, en het
+verandert hoe richtlijnen overkomen: "geef het invoerveld een label" is een mening, terwijl "1.3.1 Info
+en relaties" een eis is met een bijbehorende test.
+
+## Waar Curve nu staat
+
+Curve erft zijn componentgedrag van Base UI en Spartan Brain, en zijn kleurcombinaties van design
+tokens waarvan het contrast is gecontroleerd. Wat nog ontbreekt is de laag per component waar de
+systemen hierboven naartoe zijn gegroeid: toetsenbordtabellen, acceptatiecriteria voor toegankelijkheid,
+en een eerlijke lijst met bekende problemen op de documentatiepagina van elk component.
+
+Voeg je een component toe of beoordeel je er een, dan is dat de waardevolste documentatie die je kunt
+achterlaten: waardevoller dan nog een gebruiksvoorbeeld.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/01-curve-gebruiken.mdx b/packages/storybook-config/docs/curve/03-voor-developers/01-curve-gebruiken.mdx
new file mode 100644
index 00000000..02e35004
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/01-curve-gebruiken.mdx
@@ -0,0 +1,152 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers" name="Curve gebruiken" />
+
+# Curve gebruiken
+
+Van niets naar een werkende Curve-knop, stap voor stap. Kies onderweg de blokken van jouw framework en
+negeer de andere.
+
+## Stap 1 — Kies je package
+
+| Jouw project | Installeer               |
+| ------------ | ------------------------ |
+| React        | `@surfnet/curve-react`   |
+| Angular      | `@surfnet/curve-angular` |
+
+Beide bevatten dezelfde componenten met dezelfde namen en varianten. Je hebt er dus maar één nodig.
+
+## Stap 2 — Installeren
+
+**React:**
+
+```bash
+pnpm add @surfnet/curve-react
+pnpm add @phosphor-icons/react   # alleen als je iconen gebruikt
+```
+
+**Angular:**
+
+```bash
+pnpm add @surfnet/curve-angular
+pnpm add @ng-icons/core @ng-icons/phosphor-icons   # alleen als je iconen gebruikt
+```
+
+De iconen zijn een aparte installatie omdat niet elk project ze nodig heeft. Laat je ze weg en gebruik
+je toch een icoon, dan krijg je een foutmelding dat het package ontbreekt.
+
+## Stap 3 — Importeer de stylesheet, één keer
+
+Zonder deze regel heb je componenten zonder opmaak. Zet hem op de hoogste plek in je applicatie, en
+importeer hem precies één keer.
+
+**React** (bijvoorbeeld in `main.tsx`, of in `app/layout.tsx` bij Next.js):
+
+```ts
+import '@surfnet/curve-react/styles.css';
+```
+
+**Angular** (in `angular.json` onder `styles`, of in je globale `styles.css`):
+
+```css
+@import '@surfnet/curve-angular/styles.css';
+```
+
+In dit bestand zitten drie dingen: de basisopmaak, alle design tokens als CSS-variabelen, en de
+opmaak van de componenten zelf.
+
+## Stap 4 — Je eerste component
+
+**React:**
+
+```tsx
+import { Button } from '@surfnet/curve-react';
+
+export function Voorbeeld() {
+  return (
+    <>
+      <Button>Opslaan</Button>
+      <Button variant="outline">Annuleren</Button>
+    </>
+  );
+}
+```
+
+**Angular:**
+
+```ts
+import { Component } from '@angular/core';
+import { HlmButton } from '@surfnet/curve-angular';
+
+@Component({
+  selector: 'app-voorbeeld',
+  imports: [HlmButton],
+  template: `
+    <button hlmBtn>Opslaan</button>
+    <button hlmBtn variant="outline">Annuleren</button>
+  `,
+})
+export class VoorbeeldComponent {}
+```
+
+De knop heeft zes varianten — `default`, `outline`, `secondary`, `ghost`, `destructive` en `link` — en
+acht maten. Laat je `variant` weg, dan krijg je `default`.
+
+Twee dingen om te weten over Angular: componenten zijn _standalone_, dus je zet ze in `imports` van je
+eigen component in plaats van in een module. En de meeste Curve-componenten zijn directives — je zet
+`hlmBtn` op een echt `<button>`-element in plaats van een eigen tag te gebruiken.
+
+Welke varianten en maten een component heeft, staat op zijn eigen pagina onder **Components**. Open
+daar het tabblad **Docs** en scroll naar de tabel met eigenschappen.
+
+## Stap 5 — Donkere modus en thema's
+
+Thema's zet je aan met een class op het `<html>`-element. Er is niets te importeren en niets te
+configureren.
+
+```html
+<html class="dark">
+  <!-- alles binnen de pagina gebruikt nu de donkere kleuren -->
+</html>
+
+<html class="dark theme-surf-green">
+  <!-- donker, met een andere accentkleur -->
+</html>
+```
+
+Wil je een schakelaar bouwen, dan zet of haal je die class weg met JavaScript. De componenten hebben
+verder geen instelling nodig: ze gebruiken de CSS-variabelen die bij de actieve class horen.
+
+## Stap 6 — Eigen styling
+
+De componenten zijn met Tailwind opgemaakt en gebruiken de design tokens. Je kunt ze aanvullen:
+
+```tsx
+<Button className="w-full">Opslaan</Button>
+```
+
+Houd je daarbij aan twee regels:
+
+- **Gebruik tokens, geen vaste kleurcodes.** Schrijf `bg-primary` of `text-muted-foreground` in plaats
+  van `bg-[#1a73e8]`. Alleen dan blijft je werk goed in alle thema's.
+- **Vecht niet met een component.** Moet je met `!important` of hele hoge specificiteit werken om iets
+  voor elkaar te krijgen, dan is dat een signaal. Vaak bestaat er een variant voor, en anders is het
+  een goed onderwerp voor een issue.
+
+## Stap 7 — Zo vind je je weg in deze Storybook
+
+- **Curve** — documentatie over het Curve design system.
+- Verder in deze sectie — wat je zelf nog moet doen om toegankelijk te bouwen.
+- **Components** — elk component, met een voorbeeld per variant en state.
+- Het tabblad **Docs** van een component — alle eigenschappen met hun standaardwaarden.
+- **Foundations → Design Tokens** — welke kleuren, tekststijlen en maten er zijn.
+- De **Framework**-schakelaar in de werkbalk — springt naar hetzelfde component in het andere
+  framework.
+
+## Stap 8 — Mis je iets, of klopt iets niet?
+
+Meld het, ook als je het zelf omzeilt: iemand anders loopt tegen hetzelfde aan. Zet erbij welke versie je gebruikt, welk framework, en wat je verwachtte. Heb je github? Maak dan een issue aan op de [Curve GitHub repository](https://github.com/SURFnet/DesignSystem/issues). Bedankt!
+
+Wil je zelf een component toevoegen, doe dat dan niet met de hand: er is een generator per framework
+en een vaste plek in de mappenstructuur. Vraag ernaar voordat je begint, dan hoeft het achteraf niet
+opnieuw.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/03-robuust-bouwen.mdx b/packages/storybook-config/docs/curve/03-voor-developers/03-robuust-bouwen.mdx
new file mode 100644
index 00000000..5c50360f
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/03-robuust-bouwen.mdx
@@ -0,0 +1,124 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers" name="Robuust bouwen" />
+
+# Robuust bouwen
+
+## Persona's
+
+Dit is een lijst voorbeelden van verschillende beperkingen die iemand kan hebben, en hoe dat beinvloedt hoe ze je website gebruiken. Het is geen volledige lijst. Ook betekent het niet dat iemand met bijvoorbeeld blindheid een toetsenbord gebruikt. Mensen zijn allemaal verschillend!
+
+Elk voorbeeld onder **Waar het misgaat** heeft een eigen pagina onder
+[Wat vaak mis gaat](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--naamloze-knoppen):
+wat er gebeurt, en hoe je het oplost.
+
+| Persona                                                      | Hoe diegene jouw website gebruikt                      | Waar het misgaat                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ------------------------------------------------------------ | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [Blind, screenreadergebruiker](#blind-screenreadergebruiker) | Alleen toetsenbord, luistert; navigeert via koppen en links | [Naamloze knoppen](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--naamloze-knoppen), [Teveel ARIA](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--teveel-aria), [Verkeerde ARIA](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--verkeerde-aria), [ontbrekende pagina-structuur](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--ontbrekende-pagina-structuur), [ontbreken van unieke pagina-titel](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--ontbreken-van-unieke-pagina-titel), [tabellen zonder koppen](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--tabellen-zonder-koppen), [afbeeldingen zonder beschrijving](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--afbeeldingen-zonder-beschrijving), [slechte alt-tekst](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--slechte-alt-tekst), [ontbrekende bijschriften](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--ontbrekende-bijschriften), [video die automatisch afspeelt](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--video-die-automatisch-afspeelt) |
+| [Slechtziend, vergroting](#slechtziend-vergroting)           | 200–400% zoom, hoog contrast, grote letters            | [Vaste breedtes](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--vaste-breedtes), [te licht contrast](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--te-licht-contrast), [tekst in afbeeldingen](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--tekst-in-afbeeldingen), [taalwissels zonder markering](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--taalwissels-zonder-markering)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| [Kleurenblind](#kleurenblind)                                | Ziet de opmaak, niet het kleurverschil                 | [Status alleen in kleur](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--status-alleen-in-kleur), [rood/groen-combinaties](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--rood-groen-combinaties), [ongelabelde grafieken](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--ongelabelde-grafieken)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| [Doof of slechthorend](#doof-of-slechthorend)                | Leest in plaats van luistert                           | [Video zonder ondertiteling](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--video-zonder-ondertiteling), [geen transcript](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--geen-transcript)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| [Beperkte motoriek](#beperkte-motoriek)                      | Toetsenbord, switch, spraak of oogbesturing            | [Kleine klikdoelen](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--kleine-klikdoelen), [alleen slepen](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--alleen-slepen), [hover-menu's](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--hover-menu-s), [korte time-outs](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--korte-time-outs)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| [Cognitief of neurodivergent](#cognitief-of-neurodivergent)  | Heeft rust, voorspelbaarheid en eenvoud nodig          | [automatische beweging](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--automatische-beweging), [tijdsdruk](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--tijdsdruk), [vage foutmeldingen](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--vage-foutmeldingen), [onduidelijke validatie](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--onduidelijke-validatie)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| [Tijdelijk of situationeel](#tijdelijk-of-situationeel)      | Van alles, kort en onhandig                            | [Alles hierboven, op het slechtst denkbare moment](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--op-het-slechtst-denkbare-moment)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+
+## Blind, screenreadergebruiker
+
+Gebruikt NVDA, JAWS, VoiceOver of TalkBack en ziet de opmaak nooit. De pagina wordt als structuur
+opgenomen: een lijst met koppen, een lijst met links, landmarks, en dan pas inhoud. Visuele groepering
+betekent niets als die niet in de opmaak zit.
+
+Wat dit van je vraagt: echte koppen in de juiste volgorde, één `h1`, landmarks (`main`, `nav`,
+`header`) in plaats van anonieme `div`s, een toegankelijke naam op elk bedienbaar element, en
+alternatieve tekst die vertelt wat een afbeelding overbrengt in plaats van wat erop staat. Een
+icoonknop die wordt voorgelezen als "knop" is een doodlopende weg. Een `div` met een klikafhandelaar
+is geen knop: dat staat bij
+[Teveel ARIA](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--teveel-aria).
+Hoe je namen, status en live regions zet, bij
+[Verkeerde ARIA](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--verkeerde-aria).
+Hoe je alt-tekst schrijft, bij
+[Slechte alt-tekst](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--slechte-alt-tekst).
+Een bijschrift is extra uitleg voor iedereen, geen vervanging van die alt-tekst: zie
+[Ontbrekende bijschriften](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--ontbrekende-bijschriften).
+De [paginatitel](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--ontbreken-van-unieke-pagina-titel)
+is het eerste dat wordt voorgelezen.
+[Tabellen](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--tabellen-zonder-koppen)
+horen kopcellen te hebben, en zijn geen layoutgereedschap.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/dEbl5jvLKGQ?si=SvXMz_SLK4EGtT5t" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+## Slechtziend, vergroting
+
+Zoomt tot 200% of verder, of zet het besturingssysteem op grote letters. Bij 400% zoom op een viewport
+van 1280px is jouw desktoplayout nog ongeveer 320px breed: het WCAG-criterium Reflow zegt dat de
+inhoud daar moet blijven werken, in één scrollrichting, zonder dat er iets wegvalt.
+
+Wat dit van je vraagt: layouts die meebewegen in plaats van horizontaal scrollen, tekst die 200%
+vergroting overleeft zonder over elkaar te vallen, contrast van minimaal 4,5:1 voor lopende tekst en
+3:1 voor interface-elementen en iconen, en geen essentiële tekst die in een afbeelding zit. Hoe je
+zoom en informatieve afbeeldingen aanpakt, staat bij
+[Touch en vergroting](?path=/docs/curve-voor-designers--touch-en-vergroting).
+Zonder `lang` is vergroting mét voorlezen onverstaanbaar: zie
+[Taalwissels zonder markering](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--taalwissels-zonder-markering).
+
+## Kleurenblind
+
+Ongeveer 8% van de mannen en 0,5% van de vrouwen heeft een vorm van kleurenblindheid, meestal
+rood/groen. Zij zien jouw opmaak prima; wat wegvalt is het onderscheid dat je in kleur hebt gestopt.
+
+Wat dit van je vraagt: laat kleur nooit de enige manier zijn waarop je informatie communiceert. Combineer het met een icoon, een label,
+een patroon of een positie. Een invoerveld dat rood kleurt is onzichtbaar; een veld dat rood kleurt,
+een waarschuwingsicoon krijgt en de zin "Vul een geldig e-mailadres in" toont, werkt voor iedereen.
+Hoe je die melding koppelt, staat bij
+[Onduidelijke validatie](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--onduidelijke-validatie).
+
+## Doof of slechthorend
+
+Leest in plaats van luistert. Beschrijft ook iedereen in een kantoortuin zonder koptelefoon.
+
+Wat dit van je vraagt: ondertiteling bij alles waarin gesproken wordt, transcripten bij audio, en geen
+statuswijziging die alleen met geluid wordt aangekondigd. Uitwerking staat bij
+[Video en audio](?path=/docs/curve-voor-designers--video-en-audio).
+
+## Beperkte motoriek
+
+Een brede groep: tremor, RSI, bediening met één hand, een switch, spraakbesturing, oogbesturing. Wat ze
+delen is dat nauwkeurig aanwijzen duur of onmogelijk is.
+
+Wat dit van je vraagt: alles moet bereikbaar en bedienbaar zijn met het toetsenbord, in een volgorde
+die overeenkomt met de opmaak, met focus die altijd zichtbaar is. Klikdoelen zijn minimaal 24×24
+CSS-pixels (44×44 is comfortabel). Alles wat je met slepen kunt doen, moet ook met één klik of met het
+toetsenbord kunnen. Inhoud die alleen bij hover verschijnt is onbereikbaar: koppel die ook aan focus,
+en zorg dat je hem kunt wegklikken zonder de muis te verplaatsen. Maten, telefoon en gebaren staan bij
+[Touch en vergroting](?path=/docs/curve-voor-designers--touch-en-vergroting).
+
+## Cognitief of neurodivergent
+
+Dyslexie, ADHD, autisme, verschillen in geheugen of verwerkingssnelheid, angst: en iedereen onder
+druk. Dit is de grootste groep en de groep die het minst geholpen wordt door automatische controles,
+omdat niets ervan in de opmaak te zien is.
+
+Wat dit van je vraagt: gewone taal in plaats van slimme taal, navigatie en knoppen die steeds op
+dezelfde plek staan, geen onverwachte beweging of automatisch afspelen, respect voor
+`prefers-reduced-motion`, ruime of verlengbare tijdslimieten, foutmeldingen die het probleem én de
+oplossing noemen, en niets dat afhangt van wat iemand zich uit een vorige stap herinnert. Hoe je die
+teksten schrijft, staat bij
+[Microcopy](?path=/docs/curve-voor-designers--microcopy).
+Hoe je fouten koppelt en aankondigt, bij
+[Onduidelijke validatie](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--onduidelijke-validatie).
+
+## Tijdelijk of situationeel
+
+Een gebroken arm, een ooginfectie, een kind op de arm, een gebarsten scherm, fel zonlicht, een tunnel.
+Niemand hiervan noemt zichzelf beperkt, en ze lopen allemaal tegen dezelfde drempels aan.
+
+Dit is het curb-cut-effect: ondertiteling wordt gebruikt in stille kantoren, sneltoetsen door ervaren
+gebruikers, hoog contrast door mensen buiten. Werk dat je voor de persona's hierboven doet, is zelden
+alleen voor hen. Zie
+[Op het slechtst denkbare moment](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--op-het-slechtst-denkbare-moment).
+
+## Gebruik met een coding agent
+
+Deze persona's zitten ook in de [accessibility skill voor AI](?path=/docs/curve-voor-developers-je-werk-testen--wanneer-je-gebruik-maakt-van-ai).
+Download de skill en vraag je agent om UI te beoordelen vanuit elk perspectief: bijvoorbeeld: "Wat zou een
+screenreadergebruiker missen in dit component?"
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/01-overzicht.mdx b/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/01-overzicht.mdx
new file mode 100644
index 00000000..767f8abf
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/01-overzicht.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Je werk testen" name="Overzicht" />
+
+# Je werk testen
+
+Eén tool dekt toegankelijkheid niet af. Automatische controle vindt ongeveer 40% van de echte WCAG-fouten. In dat deel dat wordt gemist zitten de meeste problemen die iemand daadwerkelijk in de weg zitten. Een pagina kan nul AXE-meldingen geven of een perfecte Lighthouse score, en toch onbruikbaar zijn. Maar daarom blijft het ook mensenwerk! Maar hoe fijn is het als het laaghangend fruit vroeg opgespoord wordt, zodat je je de rest van de tijd kunt focussen op het maken van een goede gebruiksvriendelijke website?
+
+## Automatische controle
+
+| Wanneer                                | Hulpmiddel                                                                | Wat het opmerkt                                                                   |
+| -------------------------------------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+| Tijdens het schrijven en reviewen      | Agent skill (voor wie LLM's gebruikt)                                     | Verkeerd element, ontbrekende naam, overgeslagen koppen, weggehaalde focusstijlen |
+| Bij opslaan en in pull requests        | Linter                                                                    | Ontbrekende labels en alt-teksten, klikafhandelaars op niet-knoppen, ARIA-fouten  |
+| Bij elke pull request                  | Geautomatiseerde tests + CI voor wie CI gebruikt                          | Terugval op belangrijke flows (formulieren, navigatie, dialogen)                  |
+| Vlak voor je een nieuw scherm oplevert | Toetsenbord en screenreader voor wie toetsenbord en screenreader gebruikt | Focusvolgorde, skiplinks, koplogica, echt gebruik: dingen die axe niet ziet       |
+
+## Waar je begint als je nog geen werkwijze hebt
+
+1. Installeer
+   [de agent skill](?path=/docs/curve-voor-developers-je-werk-testen--wanneer-je-gebruik-maakt-van-ai) zodat nieuwe
+   code dichter bij goed begint.
+2. Zet de toegankelijkheidsregels van je linter aan.
+   [Axe accessibility linter for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter)
+   [React's accessibility code linter](https://www.24a11y.com/2017/reacts-accessibility-code-linter/)
+   [Jetbrains IDE's Accessibility Linter](https://plugins.jetbrains.com/plugin/19498-accessibility-linter)
+   [How to lint HTML using CSS](https://dev.to/believer/how-to-lint-html-using-css-5dc)
+3. [Loop de feature die je bouwt één keer met het toetsenbord door.](?path=/docs/curve-voor-developers-je-werk-testen--handmatig-testen)
+4. Hang axe pas daarna in CI, zodat je niet begint met een muur aan bestaande meldingen.
+   [Axe accessibility linter for GitHub Actions](https://github.com/marketplace/axe-linter)
+   [AccessLint](https://accesslint.com/)
+   [accessibility-check](https://github.com/GoogleChrome/accessibility-check)
+   [Using GitHub Actions to automate accessibility tests](https://bolonio.medium.com/automating-the-accessibility-tests-of-your-source-code-with-github-actions-63590cdc6860#:~:text=Using%20GitHub%20Actions%20to%20automate%20accessibility%20tests&text=The%20first%20thing%20is%20to,main%20branch%20has%20that%20name)
+
+Allerlei hulpmiddelen tegelijk invoeren op een bestaand product levert een lijst op die niemand leest. In deze volgorde toevoegen betekent dat elke nieuwe pull request iets beter is dan de vorige.
+
+## Tips
+
+- **Behandel meldingen als bugs, niet als ruis.** Een toegankelijkheidspaneel dat altijd rood staat, leert het team om het te negeren. Dat is erger dan het niet hebben. Komt het team er niet goed uit? Neem dan contact op met het toegankelijkheidsteam!
+- **Laat de build niet struikelen over je bestaande achterstand.** Laat hem falen op nieuwe fouten in de code die wordt aangeraakt, en houd bekende problemen apart bij. Een geblokkeerde pipeline die iedereen omzeilt, beschermt niemand.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/02-handmatig-testen.mdx b/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/02-handmatig-testen.mdx
new file mode 100644
index 00000000..5fbcc3da
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/02-handmatig-testen.mdx
@@ -0,0 +1,113 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Je werk testen" name="Handmatig testen" />
+
+# Handmatig testen
+
+axe en linters weten niet of een kopstructuur ergens op slaat, of iets een link had moeten zijn, of de
+tabvolgorde overeenkomt met wat je ziet. Loop een scherm daarom zelf na nadat je het gebouwd hebt. De
+hele ronde hieronder duurt ongeveer tien minuten en vraagt geen software die je nog niet hebt.
+
+## De toetsenbordronde
+
+Laat de muis los. Klik één keer in de adresbalk en druk op <kbd>Tab</kbd>.
+
+- Elk bedienbaar element is bereikbaar, en verder niets.
+- De volgorde volgt de opmaak. Springt de focus van de header naar een link in de footer en weer terug,
+  dan lopen de DOM-volgorde en de visuele volgorde uiteen.
+- De focus is **altijd zichtbaar**. Raak jij het spoor kwijt, dan iedereen.
+- <kbd>Shift</kbd> + <kbd>Tab</kbd> loopt dezelfde route terug.
+- <kbd>Enter</kbd> activeert links en knoppen; <kbd>Spatie</kbd> activeert knoppen en schakelaars.
+- Binnen een samengesteld component: tabs, menu, keuzelijst, radiogroep: verplaatsen de pijltoetsen de
+  selectie en verlaat <kbd>Tab</kbd> het geheel. Eén stop voor het hele component, niet één per item.
+- <kbd>Esc</kbd> sluit elke dialoog, popover of menu, en de focus keert terug naar het element dat
+  het opende.
+- Je kunt nergens vast komen te zitten. Blijft <kbd>Tab</kbd> eindeloos rondgaan in iets dat geen modale
+  dialoog is, dan heb je een focusval.
+- De [skiplink](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--ontbrekende-skiplinks) verschijnt bij de eerste
+  <kbd>Tab</kbd> en verplaatst de focus daadwerkelijk naar de hoofdinhoud.
+
+## Zoomen en meebewegen
+
+Zie [Touch en vergroting](?path=/docs/curve-voor-designers--touch-en-vergroting)
+voor klikdoelen, telefoon en inzoomen op een afbeelding.
+
+- Zoom naar **200%**. Niets overlapt, niets valt weg, geen tekst wordt onleesbaar.
+- Zoom naar **400%** (of maak het venster 320px smal). De opmaak vouwt terug naar één kolom en scrollt
+  alleen verticaal. Horizontaal scrollen is hier een Reflow-fout.
+- Vergroot alleen de tekst (Firefox doet dat netjes). Containers met een vaste hoogte die hun tekst
+  afknippen, vallen meteen op.
+
+## Structuur en namen
+
+Open DevTools → **Elements** → het paneel **Accessibility**, of gebruik een browserextensie die de
+structuur toont. [HeadingsMap voor Chrome](https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdhlhhdbkfpafnacnmjoh?hl=en) of [HeadingsMap voor Firefox](https://addons.mozilla.org/nl/firefox/addon/headingsmap/), of [HeadingsMap voor Edge](https://microsoftedge.microsoft.com/addons/detail/headingsmap/bokekiiaddinealohkmhjcgfanndmcgo).
+
+<iframe width="451" height="802" src="https://www.youtube.com/embed/LzyAFWquzxY" title="This Experimental Chrome Accessibility Feature Is A Game Changer" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+
+<dl>
+  <dt>Koppen</dt>
+  <dd>
+    Precies één <code>h1</code>, geen overgeslagen niveaus, en als je alleen de koppen leest krijg
+    je een inhoudsopgave die klopt. Een kopniveau is structuur, nooit een keuze voor lettergrootte.
+  </dd>
+  <dt>Toegankelijke namen</dt>
+  <dd>
+    Elk invoerveld, elke knop en elke link heeft er één. Een placeholder is geen naam: die verdwijnt
+    zodra iemand begint te typen. Een icoonknop heeft een label nodig. Zes keer "Lees meer" op één
+    pagina zegt een screenreadergebruiker niets. Hoe je die teksten schrijft, staat bij{' '}
+    <a href="?path=/docs/curve-voor-designers--microcopy">Microcopy</a>.
+  </dd>
+  <dt>Landmarks</dt>
+  <dd>
+    <code>header</code>, <code>nav</code>, <code>main</code> en <code>footer</code> bestaan, en er
+    is precies één <code>main</code>.
+  </dd>
+  <dt>Afbeeldingen</dt>
+  <dd>
+    Decoratieve hebben <code>alt=""</code> zodat ze worden overgeslagen; betekenisvolle beschrijven
+    wat ze overbrengen, niet hoe ze eruitzien. Voorbeelden staan bij{' '}
+    <a href="?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--slechte-alt-tekst">Slechte alt-tekst</a>.
+  </dd>
+</dl>
+
+## Kleur en beweging
+
+- Controleer het contrast van tekst én interface-elementen: 4,5:1 voor lopende tekst, 3:1 voor grote
+  tekst, iconen en randen. Elke kleurkiezer in DevTools laat dit zien.
+- Maak een schermafbeelding en bekijk hem in grijstinten. Alles wat je dan niet meer kunt onderscheiden,
+  leunde op kleur alleen.
+- Zet **Verminder beweging** aan in je systeeminstellingen en herlaad. Animaties horen korter te worden
+  of te stoppen, niet gewoon door te gaan.
+
+## Formulieren in het bijzonder
+
+Bij formulieren kost een toegankelijkheidsfout echt geld, dus loop die een tweede keer na.
+
+- Klikken op het label zet de focus in het veld (dat bewijst dat het label gekoppeld is en niet alleen
+  ernaast staat).
+- Fouten worden voorgelezen, niet alleen gekleurd. Na een mislukte verzending gaat de focus naar een
+  zinnige plek en is de melding bereikbaar vanaf het veld waar hij bij hoort.
+- De fouttekst zegt wat je moet doen: "Vul een datum in als DD-MM-JJJJ", niet "Ongeldige invoer".
+- Verplichte velden zijn in tekst gemarkeerd, niet met kleur of een onverklaarde asterisk.
+- Niets hangt af van hoveren, en er gaat niets verloren als iemand er twintig minuten over doet.
+
+## Een steekproef met een screenreader
+
+Je hoeft er niet vloeiend in te zijn. Vijf minuten luisteren zegt meer dan een uur opmaak lezen, omdat
+je hoort wat de browser werkelijk doorgeeft in plaats van wat jij bedoelde.
+
+| Screenreader           | Starten                                     | Basis                                                                                                  |
+| ---------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| VoiceOver (macOS)      | <kbd>Cmd</kbd> + <kbd>F5</kbd>              | <kbd>Ctrl</kbd>+<kbd>Option</kbd>+pijltjes om te lezen, +<kbd>U</kbd> voor de rotor                    |
+| NVDA (Windows, gratis) | <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>N</kbd> | Pijltjes om te lezen, <kbd>H</kbd> voor koppen, <kbd>Insert</kbd>+<kbd>F7</kbd> voor de elementenlijst |
+| TalkBack (Android)     | Instellingen voor toegankelijkheid          | Veeg naar rechts om verder te gaan, dubbeltik om te activeren                                          |
+
+Waar je op let: noemt elk element een naam, een rol en zijn status ("Filters, knop, ingeklapt")? Komt de
+koppenlijst overeen met de pagina? Wordt er bij het openen van een dialoog gezegd dat het een dialoog is,
+en gaat de focus naar binnen? Word je op de hoogte gebracht als er iets verandert zonder dat de pagina
+herlaadt?
+
+Zet hem uit met dezelfde toetsencombinatie. Doe dit één keer per nieuw scherm en je vindt dingen die geen
+enkele tool meldt.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/03-geautomatiseerd-testen.mdx b/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/03-geautomatiseerd-testen.mdx
new file mode 100644
index 00000000..d0da46b5
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/03-geautomatiseerd-testen.mdx
@@ -0,0 +1,148 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Je werk testen" name="Geautomatiseerd testen" />
+
+# Geautomatiseerd testen
+
+Automatisering bestaat om te voorkomen dat je dezelfde fout steeds opnieuw ontdekt. Het vertelt je niet
+of je interface ergens op slaat, maar het vindt wél elke keer, op elke branch en gratis het ontbrekende
+label, de tekst met 3:1 contrast en de dubbele `id`.
+
+Vier lagen, van goedkoop naar duur.
+
+## 1. Linten tijdens het typen
+
+Een linter vangt een hele categorie fouten op bij de cursor, nog voordat er een browser aan te pas komt.
+Zet de regelset aan die bij jouw templatetaal hoort, en schakel regels niet uit zonder een benoemde,
+beoordeelde uitzondering.
+
+<dl>
+  <dt>React / JSX</dt>
+  <dd>
+    <a href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y">eslint-plugin-jsx-a11y</a>,{' '}
+    <code>recommended</code> of <code>strict</code>.
+  </dd>
+  <dt>Angular</dt>
+  <dd>
+    De templateregels van{' '}
+    <a href="https://github.com/angular-eslint/angular-eslint">angular-eslint</a> (
+    <code>@angular-eslint/template-accessibility-*</code>).
+  </dd>
+  <dt>Editor</dt>
+  <dd>
+    De axe Accessibility Linter-extensie voor VS Code / Cursor markeert problemen in HTML en JSX
+    terwijl je typt.
+  </dd>
+</dl>
+
+Linters zien alleen statische opmaak, dus ze kunnen niet weten dat bij `role="tab"` het bijbehorende
+`tabpanel` ontbreekt. Het blijft het waardevolste uur dat je eraan besteedt.
+
+## 2. De Storybook-addon voor toegankelijkheid
+
+Beide Curve-Storybooks bevatten
+[`@storybook/addon-a11y`](https://storybook.js.org/docs/writing-tests/accessibility-testing), die
+axe-core loslaat op de weergegeven story. Open het paneel **Accessibility** in de addonbalk terwijl je
+een component bekijkt.
+
+Dit is de beste plek om contrast- en naamgevingsproblemen te vinden, omdat een story het component
+isoleert van de ruis van een volledige pagina. Projecten die Curve gebruiken, doen er goed aan dezelfde
+addon in hun eigen Storybook te zetten.
+
+Een component los bekijken legt bovendien iets bloot dat een volledige pagina verbergt: een component
+dat alleen toegankelijk is dankzij opmaak die zijn ouder toevallig meelevert.
+
+## 3. Component- en end-to-endtests
+
+Laat axe los op weergegeven UI in je tests. Probeer niet elke pixel van de applicatie te scannen: dek de
+routes af die ertoe doen: inloggen, de belangrijkste formulieren, navigatie, en elke dialoog of overlay.
+
+<dl>
+  <dt>Componenttests</dt>
+  <dd>
+    <a href="https://github.com/nickcolley/jest-axe">jest-axe</a> of <code>vitest-axe</code> op een
+    weergegeven component.
+  </dd>
+  <dt>End-to-end</dt>
+  <dd>
+    <a href="https://github.com/dequelabs/axe-core-npm/tree/develop/packages/playwright">
+      @axe-core/playwright
+    </a>{' '}
+    of <code>cypress-axe</code> op de belangrijkste gebruikersroutes.
+  </dd>
+  <dt>Storybook</dt>
+  <dd>
+    De test runner kan de a11y-controles voor elke story in CI uitvoeren, wat je met nauwelijks
+    schrijfwerk brede dekking oplevert.
+  </dd>
+</dl>
+
+Test op meer dan axe wanneer het gedrag specifiek is. axe kan niet vaststellen dat de focus in de dialoog
+belandde, dat <kbd>Esc</kbd> hem sloot en dat de focus terugkeerde naar de knop: een test wel:
+
+```ts
+await userEvent.click(screen.getByRole('button', { name: 'Instellingen openen' }));
+const dialog = screen.getByRole('dialog', { name: 'Instellingen' });
+expect(dialog).toContainElement(document.activeElement);
+
+await userEvent.keyboard('{Escape}');
+expect(dialog).not.toBeInTheDocument();
+expect(screen.getByRole('button', { name: 'Instellingen openen' })).toHaveFocus();
+```
+
+Zoeken op rol en toegankelijke naam, zoals hierboven, is zelf al een toegankelijkheidstest: kan
+`getByRole('button', { name: ... })` jouw knop niet vinden, dan een screenreader ook niet.
+
+## 4. Continuous integration
+
+Controles die alleen lokaal draaien, worden overgeslagen zodra de druk oploopt. Zet een dunne, betrouwbare
+selectie op elke pull request en laat de tragere scans op `main` of 's nachts draaien.
+
+<dl>
+  <dt>Elke pull request</dt>
+  <dd>Linten inclusief a11y-regels, plus unittests met axe-asserties.</dd>
+  <dd>Een korte Playwright- of Cypress-run met axe op de belangrijkste routes.</dd>
+  <dt>
+    's Nachts of op <code>main</code>
+  </dt>
+  <dd>
+    De toegankelijkheidscategorie van{' '}
+    <a href="https://github.com/GoogleChrome/lighthouse-ci">Lighthouse CI</a>,{' '}
+    <a href="https://github.com/pa11y/pa11y-ci">pa11y-ci</a>, of een volledige run van de Storybook
+    test runner.
+  </dd>
+</dl>
+
+Laat de build falen op nieuwe fouten in de code die wordt aangeraakt. Houd bekende problemen bij als
+issues met een eigenaar, niet als een permanent rode pipeline die iedereen heeft leren negeren.
+
+## Wat hier allemaal niet uit komt
+
+Alles wat een afweging vraagt: of de kopstructuur een verhaal vertelt, of iets een link had moeten zijn,
+of de tabvolgorde het ontwerp volgt, of de foutmelding helpt, of de flow werkt met een screenreader.
+Automatisering verkleint de handmatige ronde: zie
+[Handmatig testen](?path=/docs/curve-voor-developers-je-werk-testen--handmatig-testen): maar
+schaft hem nooit af.
+
+
+## Gereedschap
+
+- [axe DevTools](https://www.deque.com/axe/devtools/): browserextensie; dezelfde motor als de
+  Storybook-addon en de CI-packages.
+- [Accessibility Insights](https://accessibilityinsights.io/): begeleide handmatige controles, met een
+  visualisatie van de tabvolgorde die focusproblemen meteen zichtbaar maakt.
+- [WAVE](https://wave.webaim.org/extension/): zet de bevindingen op de pagina zelf; handig om iemand
+  zonder technische achtergrond te laten zien wat er mis is.
+- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/): om een ontwerp te
+  controleren voordat het gebouwd wordt.
+- [NVDA](https://www.nvaccess.org/download/): gratis screenreader voor Windows; na JAWS de meest
+  gebruikte.
+- [VoiceOver-handleiding (WebAIM)](https://webaim.org/articles/voiceover/): hoe je de screenreader
+  bedient die al op je Mac staat.
+
+## Testen en CI
+
+- [axe-core](https://github.com/dequelabs/axe-core): de regelmotor, inclusief welke regels bestaan en wat
+  ze niet kunnen zien.
+- [WebAIM Million](https://webaim.org/projects/million/): het jaarlijkse onderzoek naar een miljoen
+  homepages. Ontnuchterend, en bruikbaar als je moet onderbouwen waarom hier tijd naartoe gaat.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/04-wanneer-je-gebruik-maakt-van-ai.mdx b/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/04-wanneer-je-gebruik-maakt-van-ai.mdx
new file mode 100644
index 00000000..8451f2b8
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/04-wanneer-je-gebruik-maakt-van-ai.mdx
@@ -0,0 +1,85 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Je werk testen" name="Wanneer je gebruik maakt van AI" />
+
+# Wanneer je gebruik maakt van AI
+
+Coding agents produceren opmaak die er goed uitziet en verkeerd wordt voorgelezen: een `div` met een
+klikafhandelaar in plaats van een knop, een placeholder in plaats van een label, `aria-label`
+uitgestrooid over elementen die helemaal geen rol hebben om te benoemen. De code compileert, rendert en
+komt door de review, want het gebrek is onzichtbaar totdat iemand er met een toetsenbord of een
+screenreader langskomt.
+
+De goedkoopste oplossing is de agent de regels vooraf meegeven. Feedback over toegankelijkheid op het
+moment dat de code geschreven wordt kost een zin; dezelfde feedback in een pull request kost een
+herschrijving.
+
+## De accessibility skill
+
+Een map met markdown-bestanden die je in Cursor, Claude Code of een andere agent zet. De skill leert de
+agent semantische HTML, toegankelijke namen, toetsenbordtoegang en focusstijlen toe te passen: en
+beoordeelt UI vanuit de [zeven persona's](?path=/docs/curve-voor-developers--robuust-bouwen)
+(blind/screenreader, slechtziend, kleurenblind, doof, beperkte motoriek, cognitief, situationeel).
+
+### Download
+
+<p>
+  <a href="./downloads/accessibility.zip" download="accessibility.zip">
+    Download de accessibility skill (accessibility.zip)
+  </a>
+</p>
+
+Of download losse bestanden:
+
+| Bestand                                                | Doel                                         |
+| ------------------------------------------------------ | -------------------------------------------- |
+| [SKILL.md](./downloads/accessibility/SKILL.md)         | Workflow, persona-review, output-sjabloon    |
+| [personas.md](./downloads/accessibility/personas.md)   | Persona-definities en review-vragen          |
+| [reference.md](./downloads/accessibility/reference.md) | Semantische HTML, toetsenbord, labels, focus |
+
+### Installeren
+
+Pak `accessibility.zip` uit in de skills-map van je agent. De map moet `accessibility/` heten en
+`SKILL.md` plus de andere bestanden bevatten. De YAML-frontmatter in `SKILL.md` is verplicht: agents
+lezen `name` en `description` om te bepalen wanneer ze de skill laden.
+
+| Tool                  | Opslaan als                     |
+| --------------------- | ------------------------------- |
+| Cursor                | `.cursor/skills/accessibility/` |
+| Claude Code           | `.claude/skills/accessibility/` |
+| Codex / andere agents | `.agents/skills/accessibility/` |
+
+Zodra de skill geïnstalleerd is, geldt hij telkens wanneer de agent UI schrijft of beoordeelt. Voorbeelden:
+
+- "Beoordeel dit component op toegankelijkheid vanuit elke persona"
+- "Wat zou een screenreadergebruiker missen in deze dialoog?"
+- "Welk element krijgt focus als dit opengaat?"
+
+## Hoe je bruikbaar werk uit een agent krijgt
+
+**Vraag naar het mechanisme, niet naar het oordeel.** "Is dit toegankelijk?" nodigt uit tot een
+zelfverzekerd ja. "Welk element krijgt focus als dit opengaat, en wat leest een screenreader voor?"
+levert iets op dat je kunt controleren.
+
+**Laat ARIA verantwoorden.** Agents grijpen uit gewoonte naar ARIA-attributen. Vraag welk native element
+het attribuut overbodig zou maken, en het meeste verdwijnt: zie
+[Teveel ARIA](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--teveel-aria).
+
+**Geef het component mee, niet de klassenaam.** Een agent die weet dat Curve bestaat, stelt Button,
+Dialog en Field samen. Een agent die vanaf een screenshot werkt, bouwt ze na uit `div`s en verliest elke
+garantie die die primitieven bieden.
+
+**Laat hem de toetsenbordtest schrijven.** Agents zijn goed in het omzetten van een interactie naar een
+Playwright- of Vitest-assertie. Focusvolgorde, Escape die een dialoog sluit, focus die terugkeert naar
+de knop: precies de controles die zonder test langzaam wegroesten.
+
+## Wat een agent niet voor je kan doen
+
+Hij kan niet beoordelen of een kopstructuur klopt voor iemand die hem voor het eerst hoort, of iets een
+link had moeten zijn in plaats van een knop, of jouw foutmelding iets uitlegt, of de flow werkt met
+VoiceOver. Hij heeft jouw product nog nooit met een screenreader gebruikt.
+
+Behandel de output van een agent zoals je een linter behandelt: snel, onvermoeibaar, beperkt, en vaak
+genoeg zelfverzekerd fout om
+[de handmatige controle](?path=/docs/curve-voor-developers-je-werk-testen--handmatig-testen)
+niet te vervangen.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/01-naamloze-knoppen.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/01-naamloze-knoppen.mdx
new file mode 100644
index 00000000..2e29dcec
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/01-naamloze-knoppen.mdx
@@ -0,0 +1,51 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Naamloze knoppen" />
+
+# Naamloze knoppen
+
+Een [screenreadergebruiker](?path=/docs/curve-voor-developers--robuust-bouwen)
+navigeert onder meer via een lijst met knoppen. Zonder toegankelijke naam blijft daar alleen de rol
+over: "knop".
+
+## Het probleem
+
+Een icoonknop is visueel volstrekt duidelijk: een prullenbak, een kruis, een potlood. Voor wie de
+pagina beluistert, is er geen prullenbak. Er is een bedienbaar element zonder naam.
+
+Hetzelfde gebeurt bij een invoerveld zonder `<label>`, een link die alleen een icoon is, of een knop
+waarvan de tekst in een `svg` of achtergrondafbeelding zit. De toegankelijke naam is leeg, en de
+gebruiker moet gokken.
+
+Een `div` met een klikafhandelaar is nóg erger: hij staat niet eens in die knoppenlijst. Dat staat
+bij [Teveel ARIA](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--teveel-aria).
+
+## De oplossing
+
+Elk bedienbaar element heeft een naam nodig. De zichtbare tekst ís de beste naam. Alleen als die er
+niet is, voeg je er een toe.
+
+```html
+<!-- Niet doen: voorgelezen als "knop" -->
+<button>
+  <svg><!-- prullenbak --></svg>
+</button>
+
+<!-- Wel doen: benoem de knop, verberg de decoratie -->
+<button type="button" aria-label="Factuur verwijderen">
+  <svg aria-hidden="true" focusable="false"><!-- prullenbak --></svg>
+</button>
+```
+
+Voorkeursvolgorde:
+
+1. Zichtbare tekst in de knop of link.
+2. Een `<label>` dat aan het veld gekoppeld is.
+3. `aria-labelledby` naar tekst die al op het scherm staat.
+4. `aria-label` alleen bij icoon-only bediening.
+
+Controleer in DevTools → **Elements** → **Accessibility** → **Name**. Is Name leeg, dan is het
+element naamloos. Hoe je die teksten schrijft, staat bij
+[Microcopy](?path=/docs/curve-voor-designers--microcopy).
+Meer over benoemen bij
+[Verkeerde ARIA](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--verkeerde-aria).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/02-de-eerste-regel-van-aria.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/02-de-eerste-regel-van-aria.mdx
new file mode 100644
index 00000000..70453d27
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/02-de-eerste-regel-van-aria.mdx
@@ -0,0 +1,92 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Teveel ARIA" />
+
+# Teveel ARIA
+
+> Geen ARIA is beter dan slechte ARIA.
+
+Dat is de eerste regel van ARIA, in de woorden van het W3C zelf. Wie de pagina
+[beluistert](?path=/docs/curve-voor-developers--robuust-bouwen)
+krijgt beloftes die jij in JavaScript moet nakomen. Native HTML komt die beloftes al na.
+
+## Het probleem
+
+Grootschalige scans laten stelselmatig zien dat pagina's mét ARIA gemiddeld _méér_ aantoonbare
+toegankelijkheidsfouten bevatten dan pagina's zonder: niet omdat de attributen op zichzelf
+schadelijk zijn, maar omdat ernaar grijpen een symptoom is van het verkeerde element bouwen.
+
+ARIA verandert wat hulpsoftware over een element te horen krijgt. Meer niet. Het voegt **geen
+gedrag** toe: `role="button"` maakt een element niet focusbaar, niet activeerbaar met
+
+<kbd>Enter</kbd> en niet indrukbaar met <kbd>Spatie</kbd>. Het voegt **geen opmaak** toe:
+`aria-expanded="true"` opent niets.
+
+Een `div` met `role="button"` staat niet betrouwbaar in de knoppenlijst van een screenreader, werkt
+niet met spraakbesturing, en mist het toetsenbordcontract. Dat is erger dan
+[een knop zonder naam](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--naamloze-knoppen):
+het element liegt over wat het is.
+
+## De oplossing
+
+**Geeft een bestaand HTML-element of -attribuut je de semantiek en het gedrag dat je nodig hebt,
+gebruik dat dan in plaats van een element te herbestemmen en er ARIA op te plakken.**
+
+```html
+<!-- Niet doen: drie attributen, een toetsafhandelaar, en nog steeds geen knop -->
+<div role="button" tabindex="0" onclick="opslaan()" onkeydown="...">Opslaan</div>
+
+<!-- Wel doen -->
+<button type="button" onclick="opslaan()">Opslaan</button>
+```
+
+De native variant is focusbaar, staat in de tabvolgorde, reageert op <kbd>Enter</kbd> en
+
+<kbd>Spatie</kbd>, wordt aangekondigd als knop, werkt met spraakbesturing, respecteert de
+hoog-contrastmodus van het besturingssysteem, en verschijnt wanneer een screenreadergebruiker om een
+lijst met knoppen vraagt.
+
+De vijf regels van het W3C dekken de fouten die volgen zodra ARIA onvermijdelijk is.
+
+**2. Verander de native semantiek niet, tenzij het echt moet.** Heb je een kop nodig die als tab
+werkt, zet de tab dan in de kop in plaats van de rol van de kop te overschrijven.
+
+```html
+<!-- Niet doen -->
+<h2 role="tab">Facturatie</h2>
+
+<!-- Wel doen -->
+<h2><div role="tab">Facturatie</div></h2>
+```
+
+**3. Alle bedienbare ARIA-elementen moeten met het toetsenbord werken.** Geef je iets
+`role="slider"`, dan ben je pijltoetsen, <kbd>Home</kbd> en <kbd>End</kbd> verschuldigd. Een rol
+zonder het bijbehorende toetsenbordcontract is een leugen.
+
+**4. Zet nooit `role="presentation"` of `aria-hidden="true"` op een focusbaar element.** Dat levert
+een element op dat een toetsenbordgebruiker wel kan bereiken en een screenreader niet kan
+beschrijven: de focus landt op niets.
+
+```html
+<!-- Niet doen: bereikbaar met Tab, onzichtbaar voor een screenreader -->
+<button aria-hidden="true">Sluiten</button>
+
+<!-- Wel doen: verberg het icoon, benoem de knop -->
+<button type="button" aria-label="Sluiten">
+  <svg aria-hidden="true">...</svg>
+</button>
+```
+
+**5. Elk bedienbaar element heeft een toegankelijke naam nodig.** Uit de eigen tekst, een `label`,
+`aria-label` of `aria-labelledby`. Zie
+[Naamloze knoppen](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--naamloze-knoppen).
+
+Vrijwel alle ARIA die je anders zou schrijven, is in Curve al geregeld. Base UI (React) en de
+Brain-laag van Spartan (Angular) implementeren het WAI-ARIA-patroon per component. Betrap je
+jezelf erop dat je `role`, `aria-expanded` of `aria-selected` aan een Curve-component toevoegt,
+stop dan: of het component zet het al, of je gebruikt het verkeerde component.
+
+Bouw je iets dat Curve niet heeft, gebruik dan het patroon uit de
+[ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/). Wat er legitiem
+overblijft — benoemen, beschrijven, live regions en status — staat in
+[Verkeerde ARIA](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--verkeerde-aria).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/03-aria-correct-gebruiken.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/03-aria-correct-gebruiken.mdx
new file mode 100644
index 00000000..83073fd5
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/03-aria-correct-gebruiken.mdx
@@ -0,0 +1,142 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Verkeerde ARIA" />
+
+# Verkeerde ARIA
+
+Als je native HTML echt hebt uitgeput, is ARIA het juiste gereedschap. Wie de pagina
+[beluistert](?path=/docs/curve-voor-developers--robuust-bouwen)
+hoort dan een naam, een beschrijving, een status of een verandering. Zonder die vier blijft een
+visuele wijziging stil.
+
+Heb je het native element nog niet uitgeput, begin dan bij
+[Teveel ARIA](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--teveel-aria).
+
+## Het probleem
+
+ARIA wordt het vaakst verkeerd ingezet op plekken waar het wél nodig is. Een `aria-label` op een
+`div` zonder rol doet niets. `aria-labelledby` overschrijft de zichtbare tekst, en de knop zegt
+dan "Annuleren" terwijl er "Opslaan" op staat. `aria-expanded` zit op het paneel in plaats van op
+de knop. Een live region wordt pas in de DOM gezet als de melding er al in staat, en kondigt
+daardoor niets aan.
+
+De visuele status verandert, het attribuut niet. Een screenreadergebruiker hoort een ingeklapte
+knop die open is, of mist de foutmelding die naast het veld staat.
+
+## De oplossing
+
+Vier taken, en verder niets: benoemen, beschrijven, status doorgeven, verandering aankondigen.
+
+### Benoemen
+
+Een toegankelijke naam is wat een screenreader voorleest bij een element. HTML biedt meerdere
+manieren om die te zetten, en ze verdringen elkaar in een vaste volgorde:
+
+**`aria-labelledby` → `aria-label` → de eigen inhoud → `title`**
+
+`aria-labelledby` wint van alles, ook van zichtbare tekst: en dat is de meest voorkomende oorzaak
+van "er staat Opslaan maar hij zegt Annuleren". Gebruik bij voorkeur zichtbare tekst die je niet
+hoefde te verdubbelen:
+
+```html
+<!-- Het beste: de zichtbare tekst ís de naam -->
+<button type="button">Factuur verwijderen</button>
+
+<!-- Alleen een icoon: benoem de knop, verberg de decoratie -->
+<button type="button" aria-label="Factuur verwijderen">
+  <svg aria-hidden="true" focusable="false">...</svg>
+</button>
+
+<!-- Verwijs naar tekst die al op het scherm staat -->
+<section aria-labelledby="totalen-kop">
+  <h2 id="totalen-kop">Totalen</h2>
+</section>
+```
+
+Twee regels die veel zoekwerk schelen: `aria-label` wordt genegeerd op elementen zonder rol — op
+een `div` of `span` doet het niets — en de tekst van een zichtbaar label moet in de toegankelijke
+naam voorkomen, anders kunnen gebruikers van spraakbesturing niet uitspreken wat ze zien.
+
+Bij formuliervelden wint een echt `<label>` van dit alles. Dat geeft je de naam én een groter
+klikgebied. Zie
+[Naamloze knoppen](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--naamloze-knoppen).
+
+### Beschrijven
+
+`aria-describedby` voegt aanvullende informatie toe die ná de naam wordt voorgelezen: hulptekst,
+formaateisen, foutmeldingen. Anders dan bij benoemen mag je hier meerdere id's opgeven.
+
+```html
+<label for="ww">Wachtwoord</label>
+<input id="ww" type="password" aria-describedby="ww-hint ww-fout" aria-invalid="true" />
+<p id="ww-hint">Minimaal 12 tekens.</p>
+<p id="ww-fout">Dit wachtwoord is te kort.</p>
+```
+
+`aria-invalid` markeert het veld als afgekeurd; de melding zelf moet nog steeds echte tekst zijn,
+gekoppeld aan het veld, en zichtbaar. Het koppelen van fouten staat bij
+[Onduidelijke validatie](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--onduidelijke-validatie).
+
+### Status
+
+Statusattributen vertellen hulpsoftware wat je CSS visueel al laat zien. Je werkt ze bij op
+dezelfde plek waar je de class bijwerkt.
+
+| Attribuut       | Waarvoor                                            | Let op                                                |
+| --------------- | --------------------------------------------------- | ----------------------------------------------------- |
+| `aria-expanded` | Uitklappers, accordions, comboboxen, menu's         | Hoort op de **knop**, niet op het paneel              |
+| `aria-current`  | De actieve pagina in een navigatie, de huidige stap | `aria-current="page"`: niet `aria-selected`           |
+| `aria-selected` | Tabs, opties in een listbox                         | Alleen geldig binnen die patronen                     |
+| `aria-checked`  | Eigen checkboxen, radio's, switches                 | Native invoervelden regelen dit zelf                  |
+| `aria-disabled` | Elementen die focusbaar moeten blijven              | Je moet de actie zelf blokkeren                       |
+| `aria-pressed`  | Schakelknoppen                                      | Een knop die aan blijft staan, niet een die navigeert |
+
+De fout is altijd dezelfde: de visuele status verandert en het attribuut niet. Betrap je jezelf
+erop dat je `aria-expanded` met de hand op een Curve-component zet, dan beheert het component dat
+allang.
+
+### Verandering aankondigen
+
+Verandert er iets zonder dat de pagina herlaadt — een aantal zoekresultaten, een
+opgeslagen-melding, een foutsamenvatting — dan ziet een ziende gebruiker dat en hoort een
+screenreadergebruiker niets. Live regions lossen dat op.
+
+```html
+<!-- Moet in de DOM staan vóórdat de tekst verandert -->
+<p role="status" aria-live="polite">3 resultaten</p>
+```
+
+- `role="status"` (impliciet `aria-live="polite"`) wacht op een pauze. Gebruik dit vrijwel altijd.
+- `role="alert"` (impliciet `assertive`) onderbreekt meteen. Bewaar dat voor fouten die je
+  tegenhouden; meer dan dat is vijandig.
+- De container moet aanwezig en leeg zijn _voordat_ je hem vult. Een element toevoegen dat de
+  melding al bevat, kondigt meestal niets aan.
+- Houd het kort, en zet nooit een live region op iets dat continu verandert.
+
+### Dingen verbergen
+
+`aria-hidden="true"` haalt een element uit de toegankelijkheidsboom terwijl het zichtbaar blijft.
+Dat klopt voor decoratieve iconen en gedupliceerde tekst; het is een fout op alles wat focusbaar
+is, of op de enige versie van een stuk informatie.
+
+Voor het omgekeerde — wel voor screenreaders, niet op het scherm — gebruik je een utility-class
+die het element visueel verbergt, en niet `display: none`, want dat verbergt het voor iedereen.
+
+### Controleer het in de toegankelijkheidsboom
+
+Je eigen opmaak lezen bewijst niets, want browsers berekenen namen en rollen met regels die
+makkelijk tegenvallen. Open DevTools → **Elements** → **Accessibility** en lees de berekende naam,
+rol en status. Of schrijf de assertie:
+
+```ts
+// Faalt als de toegankelijke naam ontbreekt, fout is of overschreven wordt
+screen.getByRole('button', { name: 'Factuur verwijderen' });
+```
+
+Kan een zoekopdracht op rol en naam jouw element niet vinden, dan vindt geen enkele
+screenreadergebruiker het. De stappen staan bij
+[Handmatig testen](?path=/docs/curve-voor-developers-je-werk-testen--handmatig-testen).
+
+Bouw je iets nieuws, gebruik dan de
+[ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/). Elk patroon vermeldt
+de rollen, de statussen en het volledige toetsenbordcontract.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/04-ontbrekende-pagina-structuur.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/04-ontbrekende-pagina-structuur.mdx
new file mode 100644
index 00000000..cbbe1345
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/04-ontbrekende-pagina-structuur.mdx
@@ -0,0 +1,45 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta
+  title="Curve/Voor developers/Wat vaak mis gaat"
+  name="Ontbrekende pagina-structuur"
+/>
+
+# Ontbrekende pagina-structuur
+
+Een [screenreadergebruiker](?path=/docs/curve-voor-developers--robuust-bouwen)
+leest de pagina niet van boven naar beneden. Eerst de koppen, dan de landmarks, dan de links. Als ziende gebruiker doe je dit tenslotte ook: je kijkt eerst naar de koppen, dan naar de inhoud.
+
+Als je een screenreader gebruikt, kun je dit ook doen, als de structuur van de pagina goed is opgezet. Een beetje op dezelfde manier als wanneer je een Word-document maakt en automatisch een inhoudsopgave aanmaakt. Als je de juiste kopjes hebt gebruikt, krijg je een inhoudsopgave die klopt.
+
+## Het probleem
+
+Wanneer je een pagina maakt, kijk je vooral naar de visuele structuur. Een vette regel, witruimte, een kaart: betekent niets als die niet in de opmaak zit. Een `div` die eruitziet als een kop is geen kop. Een pagina zonder `main` heeft geen hoofdinhoud om naartoe te springen. Overgeslagen kopniveaus (`h1` → `h3`) suggereren een onderdeel (met een `h2` als kopniveau) dat er niet is.
+
+Wie de rotor (die 'inhoudsopgave' die een screenreader aanmaakt) of de elementenlijst opent, krijgt dan geen inhoudsopgave maar een lijst die nergens op
+slaat, of helemaal geen koppen. De enige route die overblijft is lineair luisteren: onbruikbaar op
+een lange pagina.
+
+## De oplossing
+
+Bouw de structuur in HTML, niet in CSS.
+
+- Precies één `h1` per weergave.
+- Kopniveaus volgen de documentstructuur, nooit de lettergrootte. Style met CSS.
+- Sla geen niveaus over.
+- Gebruik landmarks: `header`, `nav`, `main`, `footer`. Precies één `main`.
+- Lijsten van links of bevindingen zijn een `ul` of `ol`, geen reeks `div`s.
+
+```html
+<!-- Niet doen: visueel een kop, voor een screenreader een zin -->
+<div class="text-2xl font-bold">Facturen</div>
+
+<!-- Wel doen -->
+<h1>Facturen</h1>
+```
+
+Controleer in DevTools → **Elements** → **Accessibility** → **Headings**. Die lijst moet lezen als
+een inhoudsopgave. De stappen staan bij
+[Handmatig testen](?path=/docs/curve-voor-developers-je-werk-testen--handmatig-testen).
+Op een volledige pagina hoort daar een
+[skiplink](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--ontbrekende-skiplinks) bij.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/05-skiplinks.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/05-skiplinks.mdx
new file mode 100644
index 00000000..8b83282b
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/05-skiplinks.mdx
@@ -0,0 +1,98 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Ontbrekende skiplinks" />
+
+# Ontbrekende skiplinks
+
+Een skiplink is de eerste focusbare link op een pagina. Hij slaat de herhaalde schil over: logo,
+navigatie, zoekveld: en zet de focus op de hoofdinhoud. Zonder die sprong tabt iemand die geen
+muis gebruikt op iedere pagina opnieuw door hetzelfde menu.
+
+Dat is WCAG 2.4.1 (Blokken omzeilen). Het is ook gewoon beleefd: de chrome is voor wie hem nodig
+heeft, niet voor wie hem al twintig keer is gepasseerd.
+
+## Voor wie het verschil maakt
+
+<dl>
+  <dt>Toetsenbord</dt>
+  <dd>
+    Elke <kbd>Tab</kbd> is werk. Twintig stops vóór het artikel is twintig stops te veel, op elke
+    pagina opnieuw.
+  </dd>
+  <dt>Screenreader</dt>
+  <dd>
+    Landmarks (<code>main</code>, <code>nav</code>) helpen, maar een skiplink is de kortste route en
+    werkt ook als de landmarks ontbreken of dubbel zijn.
+  </dd>
+  <dt>Beperkte motoriek</dt>
+  <dd>Minder toetsaanslagen is minder pijn, minder tremor, minder tijd.</dd>
+</dl>
+
+Op een component in isolatie: een knop, een veld, een dialoog: heb je geen skiplink nodig. Op
+een volledige pagina of applicatiescherm met herhaalde navigatie wel. Curve levert hem niet: hij
+hoort in de schil van het product.
+
+## Hoe je hem maakt
+
+```html
+<a class="skip-link" href="#main">Ga naar de inhoud</a>
+<header>…logo, navigatie, zoekveld…</header>
+<main id="main" tabindex="-1">
+  <!-- de unieke inhoud van deze pagina -->
+</main>
+```
+
+Vier regels, allemaal nodig:
+
+1. **Eerste focusbare element.** Zet de link bovenaan in de DOM, vóór de navigatie. Niet visueel
+   "ergens links", terwijl er al drie andere links aan voorafgaan.
+2. **Een echt doel.** `href="#main"` wijst naar een `id` die bestaat. Een dode anker is erger dan
+   geen skiplink: de focus blijft waar hij was en de gebruiker denkt dat het product kapot is.
+3. **Het doel kan focus krijgen.** `<main>` is van nature niet focusbaar. Zonder
+   `tabindex="-1"` springt de pagina wel, maar de volgende <kbd>Tab</kbd> begint opnieuw bovenin,
+   of de screenreader leest niet vanaf de inhoud. `tabindex="-1"` maakt het doel programmeerbaar
+   focusbaar zonder het in de tabvolgorde te zetten.
+4. **Verberg hem tot hij focus heeft.** `display: none` of `visibility: hidden` haalt hem uit de
+   tabvolgorde: dan bestaat hij niet. Gebruik een visueel-verborgen patroon dat bij `:focus`
+   weer zichtbaar wordt (een utility als `sr-only` die je bij focus ongedaan maakt), of laat hem
+   altijd staan.
+
+```css
+.skip-link {
+  position: absolute;
+  left: 0.5rem;
+  top: 0.5rem;
+  transform: translateY(-200%);
+}
+
+.skip-link:focus {
+  transform: none;
+}
+```
+
+De zichtbare tekst is gewoon Nederlands: "Ga naar de inhoud". Niet "Skip to main content" op een
+Nederlandse pagina, en niet "Klik hier".
+
+## Meer dan één
+
+Eén skiplink naar `main` is het minimum. Heeft de pagina een groot zoekveld of een tweede
+navigatie die op iedere view terugkomt, dan mag je er twee of drie zetten: naar de inhoud, naar
+de zoekfunctie, naar het menu: zolang ze vooraan staan en hun doel halen.
+
+Zet geen skiplink naar iets dat niet herhaald wordt. Een sprong naar "paragraaf 4" is geen
+skiplink, dat is een inhoudsopgave.
+
+## Hoe je hem test
+
+De test staat ook in de
+[toetsenbordronde](?path=/docs/curve-voor-developers-je-werk-testen--handmatig-testen). Hij duurt tien
+seconden:
+
+1. Herlaad de pagina.
+2. Klik in de adresbalk en druk op <kbd>Tab</kbd>.
+3. De skiplink is het eerste wat focus krijgt, en hij is nu zichtbaar.
+4. Druk op <kbd>Enter</kbd>. De focus staat in de hoofdinhoud; de volgende <kbd>Tab</kbd> landt op
+   het eerste bedienbare element _in_ die inhoud, niet opnieuw in de header.
+
+Faalt stap 3, dan is hij te laat in de DOM of met `display: none` weggestopt. Faalt stap 4, dan
+mist het doel een `id` of `tabindex="-1"`.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/06-paginatitel.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/06-paginatitel.mdx
new file mode 100644
index 00000000..27b0ab10
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/06-paginatitel.mdx
@@ -0,0 +1,45 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Ontbreken van unieke pagina-titel" />
+
+# Ontbreken van unieke pagina-titel
+
+De paginatitel is het eerste dat een
+[screenreader](?path=/docs/curve-voor-developers--robuust-bouwen)
+voorleest, en wat in het tabblad staat. Zonder unieke titel is elke pagina dezelfde pagina.
+
+## Het probleem
+
+Elk tabblad zegt "Mijn SURF". Wie vijf tabbladen open heeft, moet ze allemaal openen om de juiste
+te vinden. Een screenreadergebruiker hoort bij elke navigatie opnieuw de productnaam, niet waar
+die terecht is gekomen. In een single-page-app blijft de titel vaak hangen op de eerste view:
+na drie stappen in een wizard zegt het tabblad nog "Aanvragen".
+
+WCAG 2.4.2 (Page Titled) eist een titel die het onderwerp of doel beschrijft. Dit is geen
+Curve-component. Het is een eigenschap van het document, en het moet kloppen voordat de pagina
+"af" is.
+
+## De oplossing
+
+Maak de titel uniek, met het onderwerp eerst. Werk hem bij bij iedere route.
+
+```html
+<!-- Niet doen: elke pagina hetzelfde -->
+<title>Mijn SURF</title>
+
+<!-- Wel doen: onderwerp eerst, product daarna -->
+<title>Factuur 2026-104 - Mijn SURF</title>
+```
+
+- Eén titel per weergave, niet per layout.
+- Het unieke deel vooraan: "Facturen - Mijn SURF", niet "Mijn SURF - Facturen". In een tabblad
+  is de staart het eerst afgekapt.
+- Bij een wizard of een gefilterde lijst hoort de stap of de filter in de titel: "Stap 2 van 4:
+  Controleer je gegevens - Aanvragen".
+- Verandert de view zonder herladen, dan verandert `document.title` mee. Anders blijft de
+  screenreader de oude pagina aankondigen.
+
+Controleer het door drie pagina's in tabbladen te openen. Kun je ze uit elkaar houden zonder ze
+te activeren, dan klopt de titel. De rest van de
+[pagina-structuur](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--ontbrekende-pagina-structuur)
+is de inhoudsopgave; de titel is de naam op de kaft.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/07-tabellen.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/07-tabellen.mdx
new file mode 100644
index 00000000..ae46761b
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/07-tabellen.mdx
@@ -0,0 +1,76 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Tabellen zonder koppen" />
+
+# Tabellen zonder koppen
+
+Een [screenreadergebruiker](?path=/docs/curve-voor-developers--robuust-bouwen)
+navigeert een tabel per cel, en hoort bij elke cel de bijbehorende kop. Zonder kopcellen is een
+tabel een reeks losse woorden. Met een tabel als layout is de pagina een doolhof.
+
+## Het probleem
+
+Een `table` om twee kolommen naast elkaar te zetten, een raster van `div`s dat eruitziet als een
+tabel, of een gegevensoverzicht waarvan de eerste rij visueel vet is maar uit `td`s bestaat: de
+relatie tussen rij, kolom en waarde zit dan alleen in de pixels.
+
+Wie de tabel beluistert, hoort "104, 2026, betaald" zonder te weten wat die getallen zijn. Wie
+vergroot, krijgt bij een layout-tabel horizontale scroll of cellen die hun inhoud afsnijden.
+Samengevoegde cellen zonder `headers` of `scope` maken de route nog korter stuk.
+
+WCAG 1.3.1 (Info and Relationships) eist dat die relaties in de opmaak zitten. Dit is geen
+Curve-component. Het is een keuze in de HTML, en die moet kloppen voordat de pagina "af" is.
+
+## De oplossing
+
+Gebruik een tabel alleen als rijen en kolommen bij elkaar horen. Niet om iets mooi naast elkaar
+te zetten.
+
+```html
+<!-- Niet doen: layout, geen kopcellen -->
+<table>
+  <tr>
+    <td><strong>Nummer</strong></td>
+    <td><strong>Status</strong></td>
+  </tr>
+  <tr>
+    <td>2026-104</td>
+    <td>Betaald</td>
+  </tr>
+</table>
+
+<!-- Wel doen: gegevens, kopcellen, bijschrift -->
+<table>
+  <caption>
+    Openstaande facturen
+  </caption>
+  <thead>
+    <tr>
+      <th scope="col">Nummer</th>
+      <th scope="col">Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">2026-104</th>
+      <td>Betaald</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+- Layout is CSS (`flex`, `grid`), nooit `<table>`.
+- Elke kolom (en bij een complexe tabel elke rij) heeft een `<th>` met `scope`.
+- Een `<caption>` zegt waar de tabel over gaat. Die vervangt de paginakop niet. Bijschriften bij
+  afbeeldingen zijn `<figcaption>`: zie
+  [Ontbrekende bijschriften](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--ontbrekende-bijschriften).
+- Zet de conclusie ook in de lopende tekst als de tabel een grafiek ondersteunt: zie
+  [Ongelabelde grafieken](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--ongelabelde-grafieken).
+- Lever een gegevens-tabel niet aan als plaatje. Wie vergroot of beluistert, komt er dan niet
+  bij — zie
+  [Tekst in afbeeldingen](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--tekst-in-afbeeldingen).
+
+Controleer in DevTools → **Elements** → **Accessibility**: elke cel moet een naam hebben die de
+kop meeneemt. De rest van de
+[pagina-structuur](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--ontbrekende-pagina-structuur)
+is koppen en landmarks; een tabel is alleen het raster daarbinnen.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/08-afbeeldingen-zonder-beschrijving.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/08-afbeeldingen-zonder-beschrijving.mdx
new file mode 100644
index 00000000..1d6aabf4
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/08-afbeeldingen-zonder-beschrijving.mdx
@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Afbeeldingen zonder beschrijving" />
+
+# Afbeeldingen zonder beschrijving
+
+Wie de pagina [beluistert](?path=/docs/curve-voor-developers--robuust-bouwen)
+ziet de afbeelding nooit. De alt-tekst ís de afbeelding.
+
+## Het probleem
+
+Zonder `alt` leest een screenreader vaak de bestandsnaam voor: "grafiek-q3-final-v2.png". Met
+`alt="afbeelding"` of `alt="icoon"` weet de luisteraar dat er iets is, niet wat het betekent. Een
+informatieve grafiek zonder beschrijving valt gewoon weg.
+
+Het omgekeerde is ook een probleem: een sfeerfoto of een decoratief scheidingslijntje mét een
+uitgebreide alt-tekst onderbreekt de inhoud met iets dat niets toevoegt.
+
+## De oplossing
+
+Beschrijf wat de afbeelding in deze context overbrengt, niet de pixels. Is er niets over te brengen,
+dan is de afbeelding decoratief.
+
+```html
+<!-- Decoratief: wordt overgeslagen -->
+<img src="golf.svg" alt="" />
+
+<!-- Informatief: de conclusie, niet de kleuren -->
+<img src="aanmeldingen.svg" alt="Aanmeldingen stegen van 120 in januari naar 340 in juni" />
+
+<!-- Icoonknop: de actie, niet het icoon -->
+<button type="button" aria-label="Factuur verwijderen">
+  <img src="trash.svg" alt="" />
+</button>
+```
+
+| Situatie                         | Alt-tekst                    |
+| -------------------------------- | ---------------------------- |
+| Sfeer, scheiding, herhaald icoon | Leeg: `alt=""`               |
+| Grafiek of infographic           | De conclusie in één zin      |
+| Screenshot in een handleiding    | Wat je eruit moet halen      |
+| Logo in de header                | De organisatienaam, één keer |
+
+Niet doen: `alt="afbeelding"`, een bestandsnaam, of de alinea ernaast herhalen. Meer voorbeelden
+staan bij
+[Slechte alt-tekst](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--slechte-alt-tekst).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/09-alt-tekst.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/09-alt-tekst.mdx
new file mode 100644
index 00000000..72d85115
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/09-alt-tekst.mdx
@@ -0,0 +1,63 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Slechte alt-tekst" />
+
+# Slechte alt-tekst
+
+Een alt-tekst is geen bijschrift voor wie de afbeelding wél ziet. Het is de afbeelding, voor wie
+de pagina [beluistert](?path=/docs/curve-voor-developers--robuust-bouwen).
+Beschrijf de betekenis in deze context, niet de pixels.
+
+## Het probleem
+
+Zonder `alt` leest een screenreader vaak de bestandsnaam voor: "grafiek-q3-final-v2.png". Met
+`alt="afbeelding"` of `alt="icoon"` weet de luisteraar dat er iets is, niet wat het betekent.
+Het omgekeerde is ook een probleem: een sfeerfoto mét een uitgebreide beschrijving onderbreekt
+de inhoud met iets dat niets toevoegt, of herhaalt de alinea ernaast.
+
+Tekst _in_ een afbeelding (een poster, een meme, een scan) zit vast in pixels. Wie vergroot of
+een eigen lettertype gebruikt, komt er niet bij — zie
+[Tekst in afbeeldingen](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--tekst-in-afbeeldingen).
+
+## De oplossing
+
+Beschrijf wat de afbeelding in deze context overbrengt. Is er niets over te brengen, dan is de
+afbeelding decoratief.
+
+```html
+<!-- Decoratief: wordt overgeslagen -->
+<img src="golf.svg" alt="" />
+
+<!-- Informatief: de conclusie, niet de kleuren -->
+<img src="aanmeldingen.svg" alt="Aanmeldingen stegen van 120 in januari naar 340 in juni" />
+
+<!-- Icoonknop: de actie, niet het icoon. De alt-tekst in dit voorbeeld wordt de "tekst" van de knop. -->
+<button type="button">
+  <img src="trash.svg" alt="Factuur verwijderen" />
+</button>
+
+<!-- Logo van de organisatie in de header geeft aan welke actie de gebruiker kan verwachten als de link wordt geactiveerd -->
+<a href="https://www.surf.nl">
+    <img src="surf-logo.svg" alt="Logo SURF, ga naar de homepage" />
+ </a>
+```
+
+| Situatie                                      | Alt-tekst                                                |
+| --------------------------------------------- | -------------------------------------------------------- |
+| Decoratief (sfeer, scheiding, herhaald icoon) | Leeg: `alt=""`. De afbeelding wordt overgeslagen         |
+| Foto die sfeer toevoegt, geen informatie      | Leeg, of één korte zin als de foto wél iets beweert      |
+| Knop of link die alleen een icoon is          | De actie: "Factuur verwijderen", niet "prullenbak-icoon" |
+| Grafiek of infographic                        | De conclusie: "Aanmeldingen stegen van 120 naar 340", met aanvullende data in een tabel vlakbij de grafiek     |
+| Screenshot in een handleiding                 | Wat je eruit moet halen, niet "screenshot van stap 3"    |
+| Logo van de organisatie in de header          | De organisatienaam, één keer                             |
+
+Niet doen: `alt="afbeelding"`, `alt="icoon"`, een bestandsnaam, of de eerste alinea van het
+artikel ernaast herhalen. Staat de informatie al in de lopende tekst, dan is de afbeelding
+decoratief.
+
+Een bijschrift is extra uitleg voor iedereen. Die vervangt de alt-tekst niet: zie
+[Ontbrekende bijschriften](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--ontbrekende-bijschriften).
+Hoe je een informatieve afbeelding zelf laat vergroten, staat bij
+[Touch en vergroting](?path=/docs/curve-voor-designers--touch-en-vergroting).
+Ontbreekt het attribuut helemaal, dan is dat
+[Afbeeldingen zonder beschrijving](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--afbeeldingen-zonder-beschrijving).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/10-bijschriften.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/10-bijschriften.mdx
new file mode 100644
index 00000000..14130141
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/10-bijschriften.mdx
@@ -0,0 +1,52 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Ontbrekende bijschriften" />
+
+# Ontbrekende bijschriften
+
+Een bijschrift is extra uitleg voor iedereen: wie ziet én wie
+[beluistert](?path=/docs/curve-voor-developers--robuust-bouwen).
+Het vervangt de alt-tekst niet, en de alt-tekst herhaalt het bijschrift niet.
+
+## Het probleem
+
+Een zin onder een afbeelding in een gewone `<p>` hoort visueel bij het plaatje, maar niet in de
+opmaak. Een screenreader leest hem als de volgende alinea, niet als toelichting bij de figuur.
+Het omgekeerde: de hele uitleg in de alt-tekst stoppen. Wie de afbeelding wél ziet, mist die
+context, en wie beluistert hoort een alinea waar een korte beschrijving hoort.
+
+Nog een valkuil: alt en bijschrift dezelfde zin. Dan hoort de luisteraar twee keer "Aanmeldingen
+stegen van 120 naar 340". WCAG 1.3.1 (Info and Relationships) eist dat de relatie in de HTML zit,
+niet alleen in de pixels.
+
+## De oplossing
+
+Zet de afbeelding in een `<figure>` met een `<figcaption>`. De alt-tekst beschrijft wat de
+afbeelding overbrengt; het bijschrift geeft context die iedereen nodig heeft: periode, bron,
+een extra conclusie.
+
+```html
+<!-- Niet doen: visueel eronder, niet gekoppeld, of alles in de alt -->
+<img src="aanmeldingen.svg" alt="Aanmeldingen 2026 per maand. WO steeg het sterkst." />
+<p>Bron: CROHO, juni 2026.</p>
+
+<!-- Wel doen: alt voor wie beluistert, bijschrift voor iedereen -->
+<figure>
+  <img src="aanmeldingen.svg" alt="Aanmeldingen stegen van 120 in januari naar 340 in juni" />
+  <figcaption>Aanmeldingen 2026, per maand. Bron: CROHO.</figcaption>
+</figure>
+```
+
+- Een bijschrift hoort in `<figcaption>` binnen `<figure>`, niet in een losse `<p>` of een
+  `div` ernaast.
+- De alt-tekst is kort en specifiek voor wie de afbeelding niet ziet. Het bijschrift mag langer,
+  want het is extra, niet de afbeelding zelf.
+- Herhaal de alt-tekst niet in het bijschrift.
+- Een sfeerfoto zonder informatie heeft geen bijschrift nodig, en ook geen alt: `alt=""`.
+- Tabellen hebben een eigen `<caption>`, geen `<figcaption>`. Dat staat bij
+  [Tabellen zonder koppen](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--tabellen-zonder-koppen).
+
+Hoe je de afbeelding zelf beschrijft, staat bij
+[Slechte alt-tekst](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--slechte-alt-tekst).
+Een grafiek die zonder kleur of bijschrift onleesbaar is, staat bij
+[Ongelabelde grafieken](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--ongelabelde-grafieken).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/11-video-die-automatisch-afspeelt.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/11-video-die-automatisch-afspeelt.mdx
new file mode 100644
index 00000000..460e5f17
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/11-video-die-automatisch-afspeelt.mdx
@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta
+  title="Curve/Voor developers/Wat vaak mis gaat"
+  name="Video die automatisch afspeelt"
+/>
+
+# Video die automatisch afspeelt
+
+Een [screenreadergebruiker](?path=/docs/curve-voor-developers--robuust-bouwen)
+luistert naar de pagina. Een video die vanzelf begint, praat daaroverheen.
+
+## Het probleem
+
+Automatisch geluid vecht met de spraak van de screenreader. De gebruiker hoort twee stemmen
+tegelijk, kwijt de plek in de pagina, en moet eerst een pauzeknop vinden die hij niet kan zien.
+
+Hetzelfde geldt voor achtergrondvideo met geluid, een hero-loop, of een chatbot die ongevraagd
+begint te praten. Wie het geluid niet kan pauzeren binnen een paar seconden, kan de rest van de
+pagina niet gebruiken. WCAG 1.4.2 (Audio Control) eist dat je dat geluid kunt stoppen.
+
+Bewegend beeld zonder geluid is minder luid, maar nog steeds een afleiding. Dat raakt vooral de
+[cognitieve persona](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--automatische-beweging).
+
+## De oplossing
+
+Speel niets af totdat iemand erom vraagt. Geen `autoplay`, en al helemaal niet met geluid.
+
+```html
+<!-- Niet doen -->
+<video src="intro.mp4" autoplay muted loop></video>
+
+<!-- Wel doen: stilstaand beeld, gebruiker start zelf -->
+<video src="intro.mp4" controls poster="intro.jpg">
+  <track kind="captions" src="intro.nl.vtt" srclang="nl" label="Nederlands" />
+</video>
+```
+
+Moet iets wél vanzelf lopen (een stille sfeerloop), dan: zonder geluid, pauzeerbaar, en stil bij
+`prefers-reduced-motion`. De pauzeknop moet met het toetsenbord bereikbaar zijn en een naam hebben.
+
+Ondertiteling, transcript en audiodescriptie staan bij
+[Video en audio](?path=/docs/curve-voor-designers--video-en-audio).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/12-vaste-breedtes.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/12-vaste-breedtes.mdx
new file mode 100644
index 00000000..8e97a79a
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/12-vaste-breedtes.mdx
@@ -0,0 +1,49 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Vaste breedtes" />
+
+# Vaste breedtes
+
+Wie [vergroot tot 200 of 400%](?path=/docs/curve-voor-developers--robuust-bouwen)
+krijgt jouw desktoplayout in een venster van grofweg 320px breed. Vaste breedtes passen daar niet in.
+
+## Het probleem
+
+Een container van `width: 1200px`, een tabel die niet mag wrappen, of `white-space: nowrap` op
+lopende tekst dwingt tot horizontaal scrollen. Bij 400% zoom moet je dan in twee richtingen scrollen
+om één zin te lezen: eerst naar rechts voor het einde, dan naar beneden voor de volgende regel.
+
+WCAG 1.4.10 (Reflow) zegt: bij een viewport van 320 CSS-pixels blijft de inhoud werken in één
+scrollrichting, zonder dat er iets wegvalt. Vaste hoogtes met `overflow: hidden` knippen tekst af
+zodra iemand de lettergrootte van het systeem vergroot.
+
+## De oplossing
+
+Laat de layout meebewegen. Gebruik `max-width` in plaats van `width`, relatieve eenheden, en een
+omslag naar één kolom.
+
+```css
+/* Niet doen */
+.layout {
+  width: 1200px;
+}
+.cell {
+  white-space: nowrap;
+}
+
+/* Wel doen */
+.layout {
+  max-width: 75rem;
+  width: 100%;
+}
+```
+
+- Bij **200% zoom** blijft alles leesbaar: geen overlapping, geen afgesneden labels.
+- Bij **400% zoom** (of 320px breed) vouwt de opmaak terug naar één kolom.
+- Vermijd vaste hoogtes die tekst afknippen. `overflow: auto` is beter dan `hidden` als er geen
+  andere weg is.
+
+De teststappen staan bij
+[Touch en vergroting](?path=/docs/curve-voor-designers--touch-en-vergroting)
+en in de
+[handmatige ronde](?path=/docs/curve-voor-developers-je-werk-testen--handmatig-testen).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/13-te-licht-contrast.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/13-te-licht-contrast.mdx
new file mode 100644
index 00000000..e5ab488d
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/13-te-licht-contrast.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Te licht contrast" />
+
+# Te licht contrast
+
+Wie [slechtziend is](?path=/docs/curve-voor-developers--robuust-bouwen),
+buiten in de zon werkt, of een mat scherm heeft, leest jouw grijze tekst op een bijna-witte
+achtergrond niet.
+
+## Het probleem
+
+Lichtgrijs op wit oogt rustig in een ontwerp op een gekalibreerd scherm. Op een laptop in de trein
+is het onleesbaar. Hetzelfde geldt voor placeholders, disabled-tekst die de enige uitleg is, iconen
+zonder extra signaal, en randen van invoervelden die je alleen ziet als je weet dat ze er zijn.
+
+WCAG vraagt **4,5:1** voor lopende tekst en **3:1** voor grote tekst, iconen en componenten
+(1.4.3 Contrast Minimum, 1.4.11 Non-text Contrast). Curve-tokens zijn daarop gebouwd. Een
+handmatige `text-gray-400` op `bg-white` haalt dat er zo weer af.
+
+## De oplossing
+
+Gebruik de semantische kleurtokens van Curve, niet een grijs dat "zachter" oogt. Controleer het
+contrast in DevTools: klik de kleur, de verhouding staat erbij.
+
+| Wat                            | Minimum |
+| ------------------------------ | ------- |
+| Lopende tekst, tot 18px        | 4,5:1   |
+| Grote tekst (18px bold / 24px) | 3:1     |
+| Iconen, randen, focusring      | 3:1     |
+
+Placeholder-tekst telt als tekst als het de enige naam van het veld is: gebruik een zichtbaar
+label. Uitgeschakelde knoppen mogen lichter, maar zet er dan in gewone tekst bij waarom ze niet
+werken. Zie
+[Onduidelijke validatie](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--onduidelijke-validatie).
+
+Contrast is niet hetzelfde als
+[kleur als enig signaal](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--status-alleen-in-kleur):
+een foutmelding kan wél rood zijn, als de tekst zelf het contrast haalt én het probleem in woorden
+staat.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/14-tekst-in-afbeeldingen.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/14-tekst-in-afbeeldingen.mdx
new file mode 100644
index 00000000..3e6ebadf
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/14-tekst-in-afbeeldingen.mdx
@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Tekst in afbeeldingen" />
+
+# Tekst in afbeeldingen
+
+Wie [vergroot](?path=/docs/curve-voor-developers--robuust-bouwen)
+of een eigen lettertype gebruikt, komt niet bij tekst die in pixels is vastgezet.
+
+## Het probleem
+
+Een poster, een meme, een gescande brief, een knop waarvan het label in een PNG zit, een
+infographic met de boodschap in het plaatje: pagina-zoom maakt de pixels groter, niet scherper.
+Bij 400% is de zin een brij. Wie een dyslexielettertype of hoog contrast van het systeem gebruikt,
+krijgt die tekst nooit in dat lettertype.
+
+WCAG 1.4.5 (Images of Text) vraagt echte tekst, behalve als de weergave essentieel is (een logo,
+een screenshot van een historische pagina).
+
+## De oplossing
+
+Zet de informatie als tekst in de pagina. De afbeelding mag ter illustratie blijven.
+
+- **Knoppen en labels** zijn HTML, nooit een plaatje van een knop.
+- **Infographics** herhalen de conclusie in de lopende tekst of in de
+  [alt-tekst](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--afbeeldingen-zonder-beschrijving).
+- **SVG** schaalt; een bitmap heeft een bron nodig die 200–400% zoom overleeft.
+- Staat de tekst in een klein kader, geef dan een actie: "Open de figuur groter".
+
+Ingebrande ondertiteling in video heeft hetzelfde probleem: die schaalt niet mee en kan niet uit.
+Lever ondertitels als apart bestand, zie
+[Video zonder ondertiteling](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--video-zonder-ondertiteling).
+
+Hoe je een informatieve afbeelding zelf laat vergroten, staat bij
+[Touch en vergroting](?path=/docs/curve-voor-designers--touch-en-vergroting).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/16-taal.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/16-taal.mdx
new file mode 100644
index 00000000..1f93358c
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/16-taal.mdx
@@ -0,0 +1,52 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Taalwissels zonder markering" />
+
+# Taalwissels zonder markering
+
+Voorleessoftware, vertaaltools en de browser moeten weten in welke taal de tekst staat. Zonder
+markering spreekt een Nederlandse stem Engels fonetisch uit, of andersom — ook voor wie
+[vergroot of laat voorlezen](?path=/docs/curve-voor-developers--robuust-bouwen).
+
+## Het probleem
+
+Een citaat, een knoplabel, een `aria-label` of een vakterm in een andere taal midden in een
+Nederlandse zin: zonder `lang` blijft de stem op Nederlands staan. "Submit" wordt "submit" met
+een Nederlandse u, "SURFconext" een onverstaanbare klank. Wisselt het product van taal via een
+taalselector, maar blijft `lang="nl"` op `<html>` staan, dan is de hele Engelstalige pagina
+onverstaanbaar.
+
+Hetzelfde geldt voor toegankelijke namen. Een Nederlandse pagina met `aria-label="Close"` of
+`alt="Search"` leest die woorden Nederlands voor. Ontbreekt `lang` op `<html>` helemaal, dan
+raadt de software de taal, en raadt ze het vaak mis. WCAG 3.1.1 eist een taal op de pagina,
+3.1.2 op delen die afwijken.
+
+## De oplossing
+
+Zet de taal van het document, markeer afwijkingen, en houd toegankelijke namen in dezelfde taal.
+
+```html
+<html lang="nl">
+  <body>
+    <p>
+      Log in via
+      <span lang="en">SURFconext</span>.
+    </p>
+    <blockquote lang="en">
+      <p>The service will be unavailable on Sunday.</p>
+    </blockquote>
+    <button type="button" aria-label="Zoeken">
+      <svg aria-hidden="true"><!-- vergrootglas --></svg>
+    </button>
+  </body>
+</html>
+```
+
+- Eén `lang` op `<html>` die overeenkomt met de hoofdtaal van de pagina.
+- Een citaat, UI-string of vakterm in een andere taal krijgt een eigen `lang`.
+- Wisselt het product van taal, dan verandert `lang` op `<html>` mee.
+- `aria-label`, skiplinktekst en alt-tekst horen in dezelfde taal als de pagina, tenzij je die
+  ook markeert.
+
+Dit is geen werk dat je aan een component uit Curve overlaat. Het is een eigenschap van het
+document.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/17-status-alleen-in-kleur.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/17-status-alleen-in-kleur.mdx
new file mode 100644
index 00000000..2122f747
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/17-status-alleen-in-kleur.mdx
@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Status alleen in kleur" />
+
+# Status alleen in kleur
+
+Wie [geen kleurverschil ziet](?path=/docs/curve-voor-developers--robuust-bouwen)
+ziet jouw opmaak prima. Wat wegvalt is het onderscheid dat je in kleur hebt gestopt.
+
+## Het probleem
+
+Een invoerveld dat rood omrand wordt bij een fout, een groene stip voor "beschikbaar", een geselecteerde
+tab die alleen een andere kleur krijgt: in grijstinten is dat hetzelfde element. Ongeveer 8% van de
+mannen heeft een vorm van kleurenblindheid. WCAG 1.4.1 (Use of Color) verbiedt kleur als enig
+signaal.
+
+Dit is niet hetzelfde als
+[te licht contrast](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--te-licht-contrast).
+Het contrast kan prima zijn, en de betekenis toch alleen in de tint zitten.
+
+## De oplossing
+
+Combineer kleur altijd met iets dat zonder kleur overeind blijft: tekst, een icoon met naam, een
+patroon, of een positie.
+
+```html
+<!-- Niet doen: alleen een rode rand -->
+<input type="email" aria-invalid="true" class="border-red-600" />
+
+<!-- Wel doen: kleur + icoon + zin -->
+<label for="email">E-mailadres</label>
+<input id="email" type="email" aria-invalid="true" aria-describedby="email-fout" />
+<p id="email-fout">
+  <span aria-hidden="true">⚠</span>
+  Vul een geldig e-mailadres in, bijvoorbeeld naam@instelling.nl
+</p>
+```
+
+Maak een schermafbeelding en bekijk hem in grijstinten. Alles wat je dan niet meer kunt
+onderscheiden, leunde op kleur alleen. Foutteksten zelf staan bij
+[Vage foutmeldingen](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--vage-foutmeldingen)
+en
+[Onduidelijke validatie](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--onduidelijke-validatie).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/18-rood-groen-combinaties.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/18-rood-groen-combinaties.mdx
new file mode 100644
index 00000000..33e77680
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/18-rood-groen-combinaties.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Rood/groen-combinaties" />
+
+# Rood/groen-combinaties
+
+Rood versus groen is het meest voorkomende kleuronderscheid in interfaces, en het onderscheid dat
+het vaakst [wegvalt](?path=/docs/curve-voor-developers--robuust-bouwen).
+
+## Het probleem
+
+De meeste kleurenblindheid is rood/groen (deuteranomalie of protanomalie). Een groene "succes"-knop
+naast een rode "verwijder"-knop, een stoplichtstatus in een tabel, of een diff die alleen in rood en
+groen is gezet: die twee kleuren vallen voor een deel van de gebruikers samen tot één bruinige tint.
+
+Zelfs met voldoende contrast tegen de achtergrond blijft het _verschil tussen_ rood en groen klein.
+Kleur als enige as in een grafiek heeft hetzelfde probleem; dat staat bij
+[Ongelabelde grafieken](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--ongelabelde-grafieken).
+
+## De oplossing
+
+Gebruik rood en groen niet als het enige verschil dat twee staten uit elkaar houdt.
+
+- Voeg een icoon toe: vink versus kruis, pijl omhoog versus omlaag.
+- Zet er een woord bij: "Opgeslagen", "Mislukt", niet alleen een bolletje.
+- Geef een andere vorm: vorm, patroon, dikte van de lijn, positie.
+- In tabellen: tekst in de cel ("actief" / "verlopen") in plaats van alleen een gekleurde badge.
+
+```html
+<!-- Niet doen: twee even grote knoppen, alleen de kleur verschilt -->
+<button class="bg-green-600">Bevestigen</button>
+<button class="bg-red-600">Verwijderen</button>
+
+<!-- Wel doen: label + icoon, destructieve actie visueel én tekstueel anders -->
+<button type="button">Bevestigen</button>
+<button type="button">Factuur verwijderen</button>
+```
+
+Test met een kleurenblindheidsfilter in DevTools of een
+grijstinten-screenshot.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/19-ongelabelde-grafieken.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/19-ongelabelde-grafieken.mdx
new file mode 100644
index 00000000..33d60c0b
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/19-ongelabelde-grafieken.mdx
@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Ongelabelde grafieken" />
+
+# Ongelabelde grafieken
+
+Een grafiek die series alleen in kleur onderscheidt, is voor
+[wie geen kleurverschil ziet](?path=/docs/curve-voor-developers--robuust-bouwen)
+één lijn. Voor wie de pagina beluistert, is er helemaal geen grafiek.
+
+## Het probleem
+
+Een legenda met gekleurde vlakjes, lijnen zonder patroon, taartpunten zonder naam in de slice:
+de betekenis zit in de tint. In grijstinten vallen de series samen. Een screenreader krijgt
+hooguit `alt="grafiek"` of de bestandsnaam, niet de conclusie.
+
+Dat is twee persona's tegelijk: kleurenblind én
+[blind](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--afbeeldingen-zonder-beschrijving).
+Wie vergroot, loopt bovendien tegen
+[tekst in de afbeelding](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--tekst-in-afbeeldingen)
+aan als de assen in pixels zitten.
+
+## De oplossing
+
+Maak de grafiek leesbaar zonder kleur, en geef de boodschap ook als tekst.
+
+- Direct label op de lijn of staaf ("WO 2024"), niet alleen een gekleurde legenda.
+- Patroon of vorm per serie: stippellijn, driehoek, arcering.
+- De conclusie in de lopende tekst: "Aanmeldingen stegen van 120 naar 340."
+- Een data-tabel ernaast of achter een "Toon tabel"-knop, met kopcellen.
+- Alt-tekst of een
+  [bijschrift](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--ontbrekende-bijschriften)
+  die de conclusie noemt, niet "staafdiagram van aanmeldingen".
+
+```html
+<figure>
+  <img src="aanmeldingen.svg" alt="Aanmeldingen stegen van 120 in januari naar 340 in juni" />
+  <figcaption>
+    Aanmeldingen 2026, per maand. WO steeg het sterkst; HBO bleef nagenoeg gelijk.
+  </figcaption>
+</figure>
+```
+
+Een interactieve grafiek (SVG, canvas) heeft dezelfde eisen: elke serie een naam, toetsenbordtoegang
+tot datapunt of tabel, geen betekenis alleen in kleur. Zie ook
+[Status alleen in kleur](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--status-alleen-in-kleur).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/20-video-zonder-ondertiteling.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/20-video-zonder-ondertiteling.mdx
new file mode 100644
index 00000000..329e8f36
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/20-video-zonder-ondertiteling.mdx
@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta
+  title="Curve/Voor developers/Wat vaak mis gaat"
+  name="Video zonder ondertiteling"
+/>
+
+# Video zonder ondertiteling
+
+Wie [doof of slechthorend is](?path=/docs/curve-voor-developers--robuust-bouwen)
+leest in plaats van luistert. Zonder ondertiteling valt het gesproken woord weg, en daarmee vaak de
+hele inhoud.
+
+## Het probleem
+
+Een uitlegvideo, een opname van een webinar, een producttour: alles waarin iemand praat, is zonder
+ondertiteling ontoegankelijk. Dat geldt ook voor wie in een stille trein zit, in een kantoortuin
+zonder koptelefoon, of het geluid niet aan mag.
+
+Automatische ondertiteling is een concept, geen oplevering: namen, vaktaal en wie-spreekt-wanneer
+gaan stelselmatig mis. Ingebrande tekst in het beeld schaalt niet mee en kan niet uit: dat raakt
+ook wie [vergroot](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--tekst-in-afbeeldingen).
+
+WCAG 1.2.2 eist ondertiteling bij vooraf opgenomen video met geluid.
+
+## De oplossing
+
+Lever dovenondertiteling als apart bestand (WebVTT of wat jouw speler eist), niet ingebrand.
+
+Dovenondertiteling is meer dan de vertaling van het gesproken woord. Je neemt ook de geluiden mee
+die je nodig hebt om het filmpje te volgen: wie er praat als dat niet zichtbaar is, applaus, een
+deurbel. `(Applaus.)` hoort erbij; de songtekst van de achtergrond meestal niet.
+
+```html
+<video src="uitleg.mp4" controls>
+  <track kind="captions" src="uitleg.nl.vtt" srclang="nl" label="Nederlands" default />
+</video>
+```
+
+Zet het geluid uit en kijk het filmpje. Mis je een grap, een instructie of een wending, dan is de
+ondertiteling te dun. De rest van media (transcript, audiodescriptie, geen autoplay) staat bij
+[Video en audio](?path=/docs/curve-voor-designers--video-en-audio).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/21-geen-transcript.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/21-geen-transcript.mdx
new file mode 100644
index 00000000..fbf09d4e
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/21-geen-transcript.mdx
@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Geen transcript" />
+
+# Geen transcript
+
+Een podcast, een interview, een gesproken toelichting: zonder tekst blijft er voor wie
+[niet hoort](?path=/docs/curve-voor-developers--robuust-bouwen)
+niets over.
+
+## Het probleem
+
+Ondertiteling helpt bij video, omdat je het beeld nog hebt. Bij alleen audio is er geen beeld.
+Zonder transcript is de opname ontoegankelijk, en onbruikbaar voor iedereen die wil zoeken, citeren
+of op eigen tempo lezen.
+
+Een status die alleen een piepje is ("upload klaar") heeft hetzelfde gat: wie het geluid mist, merkt
+niets. WCAG 1.2.1 eist een tekstalternatief voor vooraf opgenomen audio.
+
+## De oplossing
+
+Zet de hele inhoud als tekst op dezelfde pagina, of direct ernaast achter een duidelijke link
+("Lees het transcript").
+
+- Bij **alleen audio** is het transcript het enige alternatief.
+- Bij **video** is het een extra: doorzoekbaar, citeerbaar, leesbaar zonder de speler.
+- Een **geluidssignaal** voor status hoort altijd een zichtbare tekst of een icoon met naam naast
+  zich te hebben.
+
+```html
+<audio src="interview.mp3" controls></audio>
+<p><a href="#transcript">Lees het transcript</a></p>
+<section id="transcript">
+  <h2>Transcript</h2>
+  <p>Interviewer: Wanneer gaat de nieuwe inschrijfperiode open?</p>
+  <p>Gast: Op 1 september, om 09:00.</p>
+</section>
+```
+
+Controle: zet het geluid uit en lees alleen het transcript. Mis je een handeling, een schema of een
+resultaat dat alleen getoond of gezegd werd, dan is de tekst te dun. Uitwerking staat bij
+[Video en audio](?path=/docs/curve-voor-designers--video-en-audio).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/22-kleine-klikdoelen.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/22-kleine-klikdoelen.mdx
new file mode 100644
index 00000000..7ae82663
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/22-kleine-klikdoelen.mdx
@@ -0,0 +1,45 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Kleine klikdoelen" />
+
+# Kleine klikdoelen
+
+Wie [niet nauwkeurig kan aanwijzen](?path=/docs/curve-voor-developers--robuust-bouwen)
+— tremor, RSI, één hand, een switch, een duim in de trein — mist een doel van 16 pixels, of raakt
+het doel ernaast.
+
+## Het probleem
+
+Icoonknoppen in een toolbar, een sluitkruis in een hoek, checkboxes zonder ruime hit-area, links die
+tegen elkaar aan staan: het klikvlak is kleiner dan de motoriek toelaat. Per ongeluk tikken is dan
+geen slordigheid, het is het ontwerp.
+
+WCAG 2.2 vraagt minimaal **24×24 CSS-pixels** (2.5.8). **44×44** is comfortabel: wat je duim haalt
+zonder te mikken, en wat Apple en Android al jaren als richtlijn geven. Twee 24-pixel-iconen tegen
+elkaar aan zijn nog steeds één verkeerde tik.
+
+## De oplossing
+
+Maak het klikvlak groot genoeg, en houd ruimte tussen doelen.
+
+- Padding telt. Een 16-pixel-icoon in een 44-pixel-knop is in orde.
+- Zet ruimte _tussen_ knoppen, niet alleen grotere iconen.
+- Curve-componenten zitten aan de ruime kant. Knijp ze niet in met `p-0` of een vaste `h-6`.
+- Een tekstlink in een alinea mag kleiner, omdat de regel ernaast per ongeluk tikken ondervangt.
+  Losse icoonknoppen hebben die ruimte niet.
+
+```html
+<!-- Niet doen: icoon is het hele doel -->
+<button type="button" class="size-4" aria-label="Sluiten">
+  <svg><!-- kruis --></svg>
+</button>
+
+<!-- Wel doen: het klikvlak is groter dan de tekening -->
+<button type="button" class="size-11" aria-label="Sluiten">
+  <svg aria-hidden="true"><!-- kruis --></svg>
+</button>
+```
+
+Test op een echt toestel, of in de apparaatmodus met je vinger in plaats van een muis. Tik de
+sluitknop, de secundaire actie, de checkbox in een lijst. Uitwerking staat bij
+[Touch en vergroting](?path=/docs/curve-voor-designers--touch-en-vergroting).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/23-alleen-slepen.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/23-alleen-slepen.mdx
new file mode 100644
index 00000000..d009b9a7
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/23-alleen-slepen.mdx
@@ -0,0 +1,38 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Alleen slepen" />
+
+# Alleen slepen
+
+Slepen vraagt aanhoudend contact, een stabiele hand, en een muis of precisie-gebaar. Voor wie
+[beperkte motoriek heeft](?path=/docs/curve-voor-developers--robuust-bouwen)
+is dat vaak de ene route die niet werkt.
+
+## Het probleem
+
+Een slider die je alleen kunt slepen, een kanban-bord zonder knoppen, "sleep om te rangschikken",
+swipe-om-te-verwijderen: wie met het toetsenbord, een switch of spraak werkt, komt er niet in.
+Ook een gebroken arm of een trackpad in een hobbelige trein maakt slepen onbruikbaar.
+
+WCAG 2.5.7 (Dragging Movements) eist dat alles wat je sleept, ook met één klik of met het
+toetsenbord kan.
+
+## De oplossing
+
+Slepen mag een versnelling zijn, nooit de enige weg.
+
+- Een slider: ook klikken op de balk, pijltoetsen, en bij voorkeur een getalveld ernaast.
+- Rangschikken: "Omhoog" / "Omlaag"-knoppen per item, of een keuzelijst met positie.
+- Swipe-om-te-verwijderen: een zichtbare knop "Verwijderen" die hetzelfde doet.
+- Kaarten verslepen: een menu "Verplaats naar…" met dezelfde bestemmingen.
+
+```html
+<label for="volume">Volume</label>
+<input id="volume" type="range" min="0" max="100" value="40" />
+<input type="number" min="0" max="100" value="40" aria-label="Volume in procenten" />
+```
+
+De native `<input type="range">` is al met pijltoetsen te bedienen. Bouw je zelf een slider,
+dan ben je dat contract plus een niet-sleep-alternatief verschuldigd. Zelfde regel als bij
+[Hover-menu's](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--hover-menu-s):
+een gebaar is extra, geen poort.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/24-hover-menus.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/24-hover-menus.mdx
new file mode 100644
index 00000000..1b594c68
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/24-hover-menus.mdx
@@ -0,0 +1,48 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Hover-menu's" />
+
+# Hover-menu's
+
+Inhoud die alleen verschijnt als de muis erop blijft staan, is onbereikbaar voor wie
+[geen muis gebruikt](?path=/docs/curve-voor-developers--robuust-bouwen):
+toetsenbord, switch, touch, spraak.
+
+## Het probleem
+
+Een megamenu dat opent bij hover, een tooltip met de enige uitleg, een actieknop die pas verschijnt
+als je over een rij gaat: op een telefoon is er geen hover. Met het toetsenbord verschijnt het
+niet, tenzij je dezelfde staat ook aan focus koppelt. Wie tremor heeft, verliest het menu zodra de
+aanwijzer een pixel wegglijdt.
+
+WCAG 1.4.13 (Content on Hover or Focus) eist: de inhoud is ook bij toetsenbordfocus te zien, blijft
+staan tot je hem wegstuurt, en is weg te klikken zonder de muis te verplaatsen (meestal
+
+<kbd>Esc</kbd>).
+
+## De oplossing
+
+Koppel dezelfde inhoud aan een klik of aan focus, en laat hem bewust sluiten.
+
+```html
+<!-- Niet doen: alleen zichtbaar bij hover -->
+<style>
+  .menu:hover .submenu {
+    display: block;
+  }
+</style>
+
+<!-- Wel doen: openen met knop, sluiten met Esc of een tweede klik -->
+<button type="button" aria-expanded="false" aria-controls="submenu">Producten</button>
+<ul id="submenu" hidden>
+  <li><a href="/curve">Curve</a></li>
+</ul>
+```
+
+- Tooltips met essentiële informatie horen zichtbare tekst te zijn, of een knop die de uitleg opent.
+- Acties in een tabelrij: altijd zichtbaar, of beschikbaar in een menu-knop op die rij.
+- Curve-componenten (Dropdown, Tooltip, Popover) koppelen hover al aan focus. Bouw ze niet na met
+  alleen `:hover`.
+
+Op een telefoon bestaat hover niet. Test daar. Zie
+[Touch en vergroting](?path=/docs/curve-voor-designers--touch-en-vergroting).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/25-korte-time-outs.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/25-korte-time-outs.mdx
new file mode 100644
index 00000000..15a43511
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/25-korte-time-outs.mdx
@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Korte time-outs" />
+
+# Korte time-outs
+
+Wie [langzamer navigeert](?path=/docs/curve-voor-developers--robuust-bouwen)
+— switch, oogbesturing, toetsenbord, een pauze om te lezen — loopt vast op een sessie of een
+carrousel die vanzelf verdergaat.
+
+## Het probleem
+
+Een inlog die na twee minuten verloopt, een melding die na drie seconden verdwijnt, een
+cookie-banner die zichzelf sluit, een quiz met een countdown: de gebruiker was nog bezig. Met een
+switch kan één keuze tientallen seconden duren. Met een screenreader duurt voorlezen langer dan
+overzien.
+
+WCAG 2.2.1 (Timing Adjustable) eist dat je tijdslimieten kunt uitzetten, aanpassen of verlengen,
+tenzij de limiet essentieel is (een veiling, een realtime-toets). Een sessie om beveiligingsredenen
+mag verlopen, maar niet zonder waarschuwing en een manier om te verlengen.
+
+Dit raakt ook de
+[cognitieve persona](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--tijdsdruk):
+tijdsdruk zelf is het probleem, niet alleen de motoriek.
+
+## De oplossing
+
+Geef tijd, of geef controle over de tijd.
+
+- Sessie: waarschuw vóór het verlopen, met een knop "Blijf ingelogd". Bewaar wat al is ingevuld.
+- Toasts en banners: blijven staan tot iemand ze sluit, of minstens lang genoeg om te lezen én te
+  handelen. Geen informatie die alleen in een verdwijnende melding zit.
+- Carrousels: niet automatisch doorschuiven, of pauzeren bij focus/hover en een pauze-knop.
+- Formulieren: geen countdown. Als die er toch moet zijn, minstens 20 uur of verlengbaar.
+
+```html
+<dialog aria-labelledby="sessie-titel">
+  <h2 id="sessie-titel">Je sessie verloopt over 2 minuten</h2>
+  <p>Je voortgang blijft bewaard als je ingelogd blijft.</p>
+  <button type="button">Blijf ingelogd</button>
+</dialog>
+```
+
+Niets mag afhangen van hoe snel iemand de muis haalt. Dezelfde tien minuten als de
+[handmatige ronde](?path=/docs/curve-voor-developers-je-werk-testen--handmatig-testen):
+wacht eens twintig seconden op een scherm, en kijk wat er vanzelf gebeurt.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/27-automatische-beweging.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/27-automatische-beweging.mdx
new file mode 100644
index 00000000..358889dc
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/27-automatische-beweging.mdx
@@ -0,0 +1,45 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Automatische beweging" />
+
+# Automatische beweging
+
+Onverwachte beweging eist aandacht op. Voor wie
+[ADHD heeft, snel overprikkeld raakt, of vestibulaire klachten heeft](?path=/docs/curve-voor-developers--robuust-bouwen)
+is dat geen sfeer, het is een blokkade.
+
+## Het probleem
+
+Een carrousel die vanzelf doorschuift, een parallax-header, een loader die pulseert, een video die
+[automatisch afspeelt](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--video-die-automatisch-afspeelt),
+confetti bij een succesmelding: de pagina beweegt terwijl iemand probeert te lezen of een veld in
+te vullen.
+
+WCAG 2.2.2 (Pause, Stop, Hide) eist dat beweging die langer dan vijf seconden duurt, te pauzeren of
+uit te zetten is. Flitsen kunnen een aanval uitlokken (2.3.1). `prefers-reduced-motion` is het
+signaal van het besturingssysteem dat iemand minder beweging wil: het negeren is een keuze.
+
+## De oplossing
+
+Geen beweging die de gebruiker niet heeft gevraagd. Respecteer `prefers-reduced-motion`.
+
+```css
+.carousel {
+  animation: slide 12s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel {
+    animation: none;
+  }
+}
+```
+
+- Carrousels starten niet vanzelf, of pauzeren bij focus en hebben een pauze-knop.
+- Succes mag een korte, kleine overgang zijn, geen confetti-explosie.
+- Loaders mogen bewegen; ze horen te stoppen of stiller te worden bij reduced motion.
+- Curve-componenten volgen dit token al. Voeg geen eigen `animate-*` toe zonder de media query.
+
+Zet **Verminder beweging** aan in je systeeminstellingen en herlaad. Blijft alles bewegen, dan is
+het niet af. Zie
+[Handmatig testen](?path=/docs/curve-voor-developers-je-werk-testen--handmatig-testen).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/28-tijdsdruk.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/28-tijdsdruk.mdx
new file mode 100644
index 00000000..c2ea8ca6
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/28-tijdsdruk.mdx
@@ -0,0 +1,38 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Tijdsdruk" />
+
+# Tijdsdruk
+
+Een countdown maakt van lezen een race. Voor wie
+[meer tijd nodig heeft om te verwerken](?path=/docs/curve-voor-developers--robuust-bouwen)
+— of gewoon even wordt weggeroepen — is dat genoeg om de taak te verliezen.
+
+## Het probleem
+
+"Nog 30 seconden om te bevestigen", een inschrijving die sluit terwijl je de voorwaarden leest, een
+wizard die na inactiviteit opnieuw begint: de gebruiker was niet klaar. Angst en tijdsdruk maken
+fouten waarschijnlijker, en vage foutmeldingen daarna erger.
+
+Dit overlapt met
+[korte time-outs](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--korte-time-outs)
+bij beperkte motoriek. Daar is de limiet te kort om te _bedienen_. Hier is de limiet te kort om te
+_begrijpen_. De oplossing is dezelfde: controle over de tijd, of geen limiet.
+
+WCAG 2.2.1 en 2.2.6 dekken beide. Een echte deadline (een inschrijving die om 17:00 sluit) mag: zeg
+dat in tekst, niet alleen met een tikkende klok.
+
+## De oplossing
+
+Haal de klok weg tenzij hij essentieel is. Als hij blijft, maak hem ruim en verlengbaar.
+
+- Geen countdown op een formulier of een bevestiging.
+- Sessie: waarschuwen en verlengen, ingevulde gegevens bewaren. "Begin opnieuw" is straf.
+- Een echte deadline: datum en tijd in tekst, plus ruimte om te lezen.
+- Carrousels en toasts: zie
+  [Automatische beweging](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--automatische-beweging)
+  en
+  [Korte time-outs](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--korte-time-outs).
+
+Niets in de flow mag afhangen van wat iemand zich uit een vorige stap herinnert onder tijdsdruk.
+Zet de context op het scherm: waar je bent, wat er al is ingevuld, wat de volgende knop doet.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/29-vage-foutmeldingen.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/29-vage-foutmeldingen.mdx
new file mode 100644
index 00000000..15cbd66c
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/29-vage-foutmeldingen.mdx
@@ -0,0 +1,41 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Vage foutmeldingen" />
+
+# Vage foutmeldingen
+
+"Ongeldige invoer" zegt dat er iets mis is, niet wát, en niet hoe het wél moet. Wie
+[onder druk staat of de vorige stap is vergeten](?path=/docs/curve-voor-developers--robuust-bouwen)
+heeft beide nodig.
+
+## Het probleem
+
+Een rood veld zonder zin, "Fout", "Probeer het opnieuw", of een melding bovenin de pagina terwijl de
+fout onderin zit: de gebruiker moet gokken. Verwijzen naar "het rode veld" of "hierboven" valt weg
+voor wie
+[geen kleur ziet](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--status-alleen-in-kleur)
+of de pagina beluistert.
+
+Een `disabled` verzendknop zonder uitleg is dezelfde valkuil: je kunt niet versturen en je weet niet
+waarom. WCAG 3.3.1 en 3.3.3 vragen dat fouten geïdentificeerd worden en dat je een suggestie krijgt.
+
+## De oplossing
+
+Noem het probleem én de oplossing, in gewone taal, bij het veld waar het misging.
+
+| In plaats van       | Schrijf                                                                  |
+| ------------------- | ------------------------------------------------------------------------ |
+| Ongeldige invoer    | Vul een datum in als DD-MM-JJJJ, bijvoorbeeld 04-09-2026                 |
+| Verplicht veld      | Vul een e-mailadres in                                                   |
+| Fout                | Dit wachtwoord is te kort. Gebruik minimaal 12 tekens                    |
+| Probeer het opnieuw | We konden niet opslaan. Controleer je verbinding en probeer het nog eens |
+
+Technisch: koppel de melding aan het veld (`aria-describedby`), markeer `aria-invalid`, en verplaats
+de focus na een mislukte verzending naar een zinnige plek. Kleur mag, nooit alleen: zie
+[Status alleen in kleur](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--status-alleen-in-kleur).
+
+Toon eisen _vóór_ het versturen. Houd de verzendknop bruikbaar. Bewaar wat al is ingevuld. De zinnen
+zelf staan bij
+[Onduidelijke validatie](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--onduidelijke-validatie);
+het koppelen bij
+[Verkeerde ARIA](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--verkeerde-aria).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/30-validatie-van-formulieren.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/30-validatie-van-formulieren.mdx
new file mode 100644
index 00000000..57146c82
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/30-validatie-van-formulieren.mdx
@@ -0,0 +1,71 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers/Wat vaak mis gaat" name="Onduidelijke validatie" />
+
+# Onduidelijke validatie
+
+"Ongeldige invoer" zegt dat er iets mis is, niet wát, en niet hoe het wél moet. Wie
+[onder druk staat of de vorige stap is vergeten](?path=/docs/curve-voor-developers--robuust-bouwen)
+heeft beide nodig, bij het veld waar het misging, in een vorm die ook voorgelezen wordt.
+
+## Het probleem
+
+Een rood veld zonder zin, een `disabled` verzendknop zonder uitleg, of een melding bovenin de
+pagina terwijl de fout onderin zit: de gebruiker moet gokken. Verwijzen naar "het rode veld" of
+"hierboven" valt weg voor wie
+[geen kleur ziet](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--status-alleen-in-kleur)
+of de pagina beluistert.
+
+Technisch gaat het nóg vaker mis. De melding staat ernaast maar is niet gekoppeld, dus een
+screenreader leest het veld voor als geldig. Na een mislukte verzending blijft de focus op de
+knop. Wat al was ingevuld, is weg. WCAG 3.3.1 en 3.3.3 vragen dat fouten geïdentificeerd worden
+én dat je een suggestie krijgt.
+
+## De oplossing
+
+Noem het probleem én de oplossing, in gewone taal, bij het veld. Koppel de melding, markeer het
+veld, en verplaats de focus.
+
+```html
+<!-- Niet doen: alleen een rode rand, knop uitgeschakeld, niks gekoppeld -->
+<input type="email" class="border-red-600" />
+<button type="submit" disabled>Versturen</button>
+
+<!-- Wel doen: label, melding, invalid, beschrijving -->
+<label for="email">E-mailadres</label>
+<input id="email" type="email" aria-invalid="true" aria-describedby="email-fout" />
+<p id="email-fout">Vul een geldig e-mailadres in, bijvoorbeeld naam@instelling.nl</p>
+<button type="submit">Versturen</button>
+```
+
+| In plaats van       | Schrijf                                                                  |
+| ------------------- | ------------------------------------------------------------------------ |
+| Ongeldige invoer    | Vul een datum in als DD-MM-JJJJ, bijvoorbeeld 04-09-2026                 |
+| Verplicht veld      | Vul een e-mailadres in                                                   |
+| Fout                | Dit wachtwoord is te kort. Gebruik minimaal 12 tekens                    |
+| Probeer het opnieuw | We konden niet opslaan. Controleer je verbinding en probeer het nog eens |
+
+Zeg wat er wél mag, niet alleen wat er fout is. Kleur mag, nooit alleen. De zinnen zelf zijn
+copywerk: zie
+[Vage foutmeldingen](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--vage-foutmeldingen)
+en, voor wie de teksten schrijft,
+[Validatie van formulieren](?path=/docs/curve-voor-designers--validatie-van-formulieren).
+
+Technisch, allemaal nodig:
+
+- Een `<label>` dat aan het veld gekoppeld is.
+- `aria-invalid="true"` op het afgekeurde veld.
+- `aria-describedby` naar de zichtbare melding (en eventueel naar de hulptekst).
+- Na een mislukte verzending de focus naar een zinnige plek: de samenvatting of het eerste
+  veld met een fout.
+- Een live region als de melding verschijnt zonder herladen. Hoe je die zet, staat bij
+  [Verkeerde ARIA](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--verkeerde-aria).
+
+Mensen maken typefouten, kiezen de verkeerde optie, of sturen een formulier te vroeg in. Een
+toegankelijk product straft dat niet af.
+
+- Toon de eisen _vóór_ het versturen: het datumformaat, de minimale lengte, wat verplicht is.
+- Houd de verzendknop bruikbaar. Een `disabled` knop zonder uitleg is een doodlopende weg.
+- Laat iemand een destructieve actie bevestigen ("Factuur 2026-104 verwijderen?"), en bied
+  daarna een manier om terug te gaan als dat nog kan.
+- Bewaar wat al is ingevuld als er iets misgaat. "Begin opnieuw" is geen herstel, het is straf.
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/31-op-het-slechtst-denkbare-moment.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/31-op-het-slechtst-denkbare-moment.mdx
new file mode 100644
index 00000000..92fd3f51
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/31-op-het-slechtst-denkbare-moment.mdx
@@ -0,0 +1,45 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta
+  title="Curve/Voor developers/Wat vaak mis gaat"
+  name="Op het slechtst denkbare moment"
+/>
+
+# Op het slechtst denkbare moment
+
+Een gebroken arm, een ooginfectie, een kind op de arm, een gebarsten scherm, fel zonlicht, een
+tunnel. Niemand hiervan noemt zichzelf beperkt, en ze lopen allemaal tegen dezelfde drempels aan
+als de andere persona's.
+
+## Het probleem
+
+Tijdelijke en situationele beperkingen zijn kort, onvoorspelbaar, en stapelen. Je hebt één hand
+vrij _en_ de zon op het scherm. Je zit in een stille coupé _en_ de video speelt vanzelf. Je hebt
+vier minuten op een perron _en_ de foutmelding zegt "ongeldige invoer".
+
+Alles uit de kolom **Waar het misgaat** wordt erger op het slechtst denkbare moment. Een kleine
+klikdoel is hinderlijk met een muis en onmogelijk met een arm in het gips. Licht contrast is
+lelijk op kantoor en onleesbaar buiten. Een hover-menu bestaat niet op een telefoon in de regen.
+
+## De oplossing
+
+Bouw niet voor een extra doelgroep. Los de voorbeelden bij de andere persona's op: dat werk is
+het curb-cut-effect. Ondertiteling wordt gebruikt in stille kantoren, sneltoetsen door ervaren
+gebruikers, hoog contrast door mensen buiten.
+
+Toets een scherm tegen een situationele vraag, niet alleen tegen een diagnose:
+
+- Kan ik dit met één hand, op een telefoon, in fel licht?
+- Kan ik dit zonder geluid, zonder muis, zonder kleur?
+- Kan ik dit als ik de vorige stap alweer ben vergeten?
+
+Elk "ja" dat je hier afdwingt, is hetzelfde "ja" als bij
+[blind](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--naamloze-knoppen),
+[slechtziend](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--vaste-breedtes),
+[kleurenblind](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--status-alleen-in-kleur),
+[doof](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--video-zonder-ondertiteling),
+[beperkte motoriek](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--kleine-klikdoelen)
+en
+[cognitief](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--automatische-beweging).
+Terug naar het
+[overzicht](?path=/docs/curve-voor-developers--robuust-bouwen).
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/06-meer-leren.mdx b/packages/storybook-config/docs/curve/03-voor-developers/06-meer-leren.mdx
new file mode 100644
index 00000000..a4e97d24
--- /dev/null
+++ b/packages/storybook-config/docs/curve/03-voor-developers/06-meer-leren.mdx
@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor developers" name="Meer leren" />
+
+# Meer leren
+
+## Begin hier
+
+- [Learn Accessibility (web.dev)](https://web.dev/learn/accessibility/): een cursus die bij het begin
+  begint. Het beste startpunt als je dit nooit bewust hebt gedaan.
+- [Practical Accessibility](https://practical-accessibility.today/) van Sara Soueidan: een cursus die bij het begin begint met veel videomateriaal (betaald, Engelstalig).
+- [De checklist van The A11Y Project](https://www.a11yproject.com/checklist/): WCAG herschreven als
+  dingen die je echt kunt nalopen, in gewone taal.
+- [WCAG uitgelegd](https://digitaaltoegankelijk.nl/wcag-uitgelegd/): WCAG 2.2 in gewone taal, met de
+  niveaus A, AA en AAA en een checklist.
+- [WebAIM-artikelen](https://webaim.org/articles/): de standaarduitleg over alt-teksten, formulieren,
+  contrast en screenreaders. Twintig jaar opgebouwde helderheid.
+
+## De normen zelf
+
+- [WCAG 2.2 quick reference](https://www.w3.org/WAI/WCAG22/quickref/): filterbaar op niveau. Dit is het
+  document waar je in een review naar verwijst.
+- [Understanding WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/): de bedoeling en uitgewerkte
+  voorbeelden per criterium. Lees dit wanneer een criterium onredelijk lijkt.
+- [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/): de referentie-implementatie
+  en het toetsenbordcontract voor elk widgetpatroon.
+- [Using ARIA](https://www.w3.org/TR/using-aria/): de vijf regels, uit de eerste hand.
+- [EN 301 549](https://www.etsi.org/deliver/etsi_en/301500_301599/301549/): de Europese norm waaraan
+  aanbestedingen en toegankelijkheidsverklaringen worden getoetst.
+- [Digitoegankelijk.nl](https://www.digitoegankelijk.nl/): wat Nederlandse overheidsorganisaties
+  daadwerkelijk moeten publiceren.
+
+## Ontwerp- en codepatronen
+
+- [Inclusive Components](https://inclusive-components.design/): Heydon Pickering die veelgebruikte componenten tot op de bodem uitwerkt. Lees het hoofdstuk over wat je nu bouwt.
+- [MDN over toegankelijkheid](https://developer.mozilla.org/en-US/docs/Web/Accessibility): de naslagdocumentatie voor rollen, statussen en eigenschappen.
+
+## Voor designers en tekstschrijvers
+
+- [Inclusief communiceren over mensen met beperking: 8 tips](https://www.movisie.nl/artikel/inclusief-communiceren-over-mensen-beperking-8-tips)
diff --git a/packages/storybook-config/docs/curve/04-updates-en-releases.mdx b/packages/storybook-config/docs/curve/04-updates-en-releases.mdx
new file mode 100644
index 00000000..9dcf973d
--- /dev/null
+++ b/packages/storybook-config/docs/curve/04-updates-en-releases.mdx
@@ -0,0 +1,73 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve" name="Updates en releases" />
+
+# Updates en releases
+
+Curve wordt gepubliceerd als npm-package. Elke wijziging krijgt een versienummer, en projecten bepalen
+zelf wanneer ze meegaan naar een nieuwe versie. Deze pagina legt uit hoe dat werkt — zowel als je aan
+Curve meewerkt als wanneer je Curve gebruikt.
+
+## Versienummers lezen
+
+Een versie bestaat uit drie getallen, bijvoorbeeld `0.2.2`. Van rechts naar links:
+
+| Verandert         | Heet  | Wat het betekent                                                   | Wat jij moet doen                       |
+| ----------------- | ----- | ------------------------------------------------------------------ | --------------------------------------- |
+| `0.2.2` → `0.2.3` | patch | Een reparatie. Gedrag blijft gelijk, er is iets stuk dat nu werkt. | Bijwerken, verder niets                 |
+| `0.2.2` → `0.3.0` | minor | Iets nieuws: een component, een variant, een extra instelling.     | Bijwerken; bestaande code blijft werken |
+| `0.2.2` → `1.0.0` | major | Iets is veranderd op een manier die je code kan breken.            | Changelog lezen vóór je bijwerkt        |
+
+Deze afspraak heet [semver](https://semver.org). De belangrijkste regel: alleen bij een **major**
+kan er iets omvallen. Patch en minor zijn veilig.
+
+## Hoe een wijziging een release wordt
+
+Wij publiceren niet met de hand. Het gaat zo:
+
+1. **Iemand maakt een wijziging** en beschrijft in de pull request wat er verandert en of het een
+   patch, minor of major is. Die beschrijving is de latere changelog-tekst, dus die wordt geschreven
+   voor de mensen die Curve gebruiken.
+2. **De pull request wordt gemerged** naar `main`. Er is dan nog niets gepubliceerd.
+3. **Automatisch verschijnt een "Version Packages" pull request.** Daarin staan de nieuwe
+   versienummers en de bijgewerkte changelog, verzameld uit alle wijzigingen die nog niet uit zijn.
+4. **Die pull request mergen is het moment van publiceren.** Dan pas gaat de nieuwe versie naar npm.
+
+Stap 3 en 4 betekenen dat je kunt sparen: meerdere wijzigingen komen samen in één release, en je kiest
+zelf wanneer dat is.
+
+> Werk je mee aan Curve? Voer `pnpm version-packages` en `pnpm release` nooit zelf uit, en pas geen
+> versienummers of changelog-bestanden met de hand aan. Dat doet de automatisering voor ons.
+
+## Curve bijwerken in je eigen project
+
+```bash
+# kijk eerst wat er nieuw is
+pnpm outdated @surfnet/curve-react
+
+# werk bij naar de nieuwste versie
+pnpm update @surfnet/curve-react
+```
+
+Vervang `curve-react` door `curve-angular` als je Angular gebruikt.
+
+Praktische tips:
+
+- **Lees de changelog voordat je een major installeert.** Daar staat precies wat er is veranderd en wat
+  je moet aanpassen.
+- **Werk bij in een aparte pull request**, los van je eigen functionaliteit. Gaat er iets mis, dan weet
+  je direct waar het aan ligt.
+- **Kijk daarna naar je eigen aanpassingen.** Heb je componenten overschreven met eigen CSS, dan is dat
+  het eerste dat na een update opvalt.
+- **Vergeet de stylesheet niet.** Die zit in dezelfde package en wordt automatisch meegenomen, maar
+  controleer of je hem nog importeert zoals beschreven bij
+  [Curve gebruiken](?path=/docs/curve-voor-developers--curve-gebruiken).
+
+## Wat wel en niet wordt gepubliceerd
+
+De twee component-packages (`@surfnet/curve-react` en `@surfnet/curve-angular`) staan op npm en kun je
+installeren. De onderdelen daarachter — de design tokens, de interne afspraken over varianten en de
+gedeelde configuratie — zijn intern. Ze krijgen wel een versienummer, maar worden niet gepubliceerd:
+hun inhoud zit al ingebakken in de twee packages die je installeert.
+
+Je hebt ze dus niet nodig, en je hoeft er ook niets voor te installeren.
diff --git a/packages/storybook-config/docs/curve/05-changelog-en-beslissingen.mdx b/packages/storybook-config/docs/curve/05-changelog-en-beslissingen.mdx
new file mode 100644
index 00000000..178f4129
--- /dev/null
+++ b/packages/storybook-config/docs/curve/05-changelog-en-beslissingen.mdx
@@ -0,0 +1,54 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve" name="Changelog en beslissingen" />
+
+# Changelog en beslissingen
+
+Verzamelpagina met de plekken buiten deze Storybook: wat er per versie is veranderd, waarom bepaalde
+keuzes zijn gemaakt, en waar je terechtkomt met een vraag of een probleem.
+
+## Changelog
+
+Wat er per versie is gewijzigd, met per regel of het een reparatie, een toevoeging of een
+niet-terugwaarts-compatibele wijziging is.
+
+{/* TODO: vervang door de definitieve URL van de changelog */}
+
+- **Changelog** — _link volgt_
+
+Lees dit altijd voordat je naar een nieuwe **major** versie bijwerkt. Hoe je versienummers leest en
+wanneer bijwerken risicovol is, staat bij
+[Updates en releases](?path=/docs/curve--updates-en-releases).
+
+## Beslissingen
+
+De grotere keuzes achter Curve: waarom een component werkt zoals hij werkt, waarom een token zo heet,
+waarom een bepaalde techniek is gekozen. Handig als je je afvraagt of iets bewust zo is, of per
+ongeluk.
+
+{/* TODO: vervang door de definitieve URL van de beslissingen-documentatie */}
+
+- **Beslissingen** — _link volgt_
+
+Neem je zelf een beslissing die anderen raakt, leg hem daar dan vast. Een keuze die alleen in een pull
+request staat, is over een half jaar niet meer te vinden.
+
+## Deze Storybook
+
+Beide varianten worden automatisch bijgewerkt bij iedere wijziging op `main`:
+
+- [Curve voor React](https://surfnet.github.io/DesignSystem/react/)
+- [Curve voor Angular](https://surfnet.github.io/DesignSystem/angular/)
+
+## Vragen, bugs en verzoeken
+
+{/* TODO: vervang door de definitieve URL(s) voor issues en/of het overlegkanaal */}
+
+- **Issues en verzoeken** — _link volgt_
+
+Wat je erbij zet, maakt het verschil tussen een issue die opgepakt wordt en een die blijft liggen:
+
+- Welke versie van Curve, en React of Angular.
+- Wat je verwachtte en wat er gebeurde.
+- Een klein voorbeeld, of een verwijzing naar de pagina in deze Storybook.
+- Of je het zelf omzeild hebt, en hoe. Dan weten anderen wat ze intussen kunnen doen.
diff --git a/packages/storybook-config/docs/curve/06-toegankelijkheid.mdx b/packages/storybook-config/docs/curve/06-toegankelijkheid.mdx
new file mode 100644
index 00000000..7e8df45f
--- /dev/null
+++ b/packages/storybook-config/docs/curve/06-toegankelijkheid.mdx
@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve" name="Toegankelijkheid" />
+
+# Toegankelijkheid
+
+Ongeveer één op de zes mensen heeft een beperking, en veel meer mensen hebben er tijdelijk of
+situationeel mee te maken: een gebroken pols, een ooginfectie, fel zonlicht op een perron. Werken aan
+toegankelijkheid is zelden werk voor een kleine minderheid: het is hetzelfde werk dat een interface
+bruikbaar maakt met één hand, op een slechte verbinding, of aan het eind van een lange dag.
+
+Jij maakt als designer of developer dagelijks keuzes die grote invloed hebben op het leven en werk van andere mensen. Door je bewust te zijn van de [grote verscheidenheid van mensen](?path=/docs/curve-voor-developers--robuust-bouwen) die straks gebruik maken van wat je bouwt, kun je er voor zorgen dat zo min mogelijk mensen worden buitengesloten.
+
+Om dat makkelijker te maken, hebben we Curve ontworpen. Curve is een design systeem dat componenten aanbiedt, die zoveel mogelijk out-of-the-box rekening houden met de toegankelijkheidsnormen.
+
+## Hoe helpt Curve ervoor zorgen dat SURF toegankelijke websites bouwt?
+
+Curve is een design systeem dat componenten aanbiedt, die gebouwd zijn op toegankelijke principes. Door met Curve te werken, kun je er voor zorgen dat je componenten op zichzelf toegankelijk zijn, mits goed gebruikt.
+
+### Pas op!
+
+De juiste rollen, werkende toetsenbordbediening en een zichtbare focusring. Die zijn noodzakelijk, maar niet genoeg. De schermen die jij als designer of developer samenstelt hebben nog steeds een logische structuur nodig, toegankelijke namen, en een werkwijze die fouten opmerkt vóórdat ze in productie staan.
+
+De terugkerende missers — van ARIA tot alt-tekst, bijschriften, paginatitel, taal, tabellen en formuliervalidatie — staan onder
+[Wat vaak mis gaat](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--naamloze-knoppen).
diff --git a/packages/storybook-config/package.json b/packages/storybook-config/package.json
index 418f6d2d..d4584fc9 100644
--- a/packages/storybook-config/package.json
+++ b/packages/storybook-config/package.json
@@ -20,6 +20,7 @@
   ],
   "scripts": {
     "build": "tsc -p tsconfig.json",
+    "bundle:accessibility-skill": "rm -f static/accessibility.zip && cd ../../.agents/skills && zip -r ../../packages/storybook-config/static/accessibility.zip accessibility",
     "dev": "tsc -p tsconfig.json --watch",
     "lint": "tsc --noEmit -p tsconfig.json"
   },
diff --git a/packages/storybook-config/src/index.ts b/packages/storybook-config/src/index.ts
index ad051ae6..5e3e4ec8 100644
--- a/packages/storybook-config/src/index.ts
+++ b/packages/storybook-config/src/index.ts
@@ -1,3 +1,6 @@
+// Shared MDX docs (Curve, accessibility) are framework-agnostic prose, so they
+// live in `docs/` and are pulled into both Storybooks via their `stories`
+// globs — no copy is exported from here.
 export { FRAMEWORKS, frameworkGlobalTypes, frameworkSwitcher } from './frameworks.js';
 export type { Framework, FrameworkTarget } from './frameworks.js';
 export { THEME_NAMES, themeGlobalTypes, themeInitialGlobals, themeSwitcher } from './themes.js';
diff --git a/packages/storybook-config/src/manager.tsx b/packages/storybook-config/src/manager.tsx
index b9d2a9d7..c93c71d8 100644
--- a/packages/storybook-config/src/manager.tsx
+++ b/packages/storybook-config/src/manager.tsx
@@ -30,6 +30,7 @@ export function registerManager(framework: Framework): void {
     base: 'light',
     brandTitle: brandMarkup(framework),
     brandUrl: 'https://www.surf.nl',
+    barBg: '#f5f5f5',
   });
 
   addons.setConfig({ theme });
diff --git a/packages/storybook-config/static/accessibility.skill.md b/packages/storybook-config/static/accessibility.skill.md
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/storybook-config/static/accessibility.zip b/packages/storybook-config/static/accessibility.zip
new file mode 100644
index 00000000..b270bfe9
Binary files /dev/null and b/packages/storybook-config/static/accessibility.zip differ
diff --git a/packages/storybook-config/static/storybook-docs.css b/packages/storybook-config/static/storybook-docs.css
new file mode 100644
index 00000000..f0c77ab2
--- /dev/null
+++ b/packages/storybook-config/static/storybook-docs.css
@@ -0,0 +1,63 @@
+/* Restore list markers inside docs prose; Tailwind preflight strips them globally. */
+
+.sbdocs-content ul,
+.sbdocs-content ol {
+  list-style: revert;
+  font-size: inherit;
+  padding-inline-start: 1.5rem;
+}
+.sbdocs-content ul {
+  list-style-type: disc;
+}
+.sbdocs-content ol {
+  list-style-type: decimal;
+}
+.sbdocs-content ul ul {
+  list-style-type: circle;
+}
+.sbdocs-content ul ul ul {
+  list-style-type: square;
+}
+.sbdocs-content ol li,
+.sbdocs-content ul li {
+  font-size: inherit;
+}
+.sbdocs-content.sbdocs-content dl {
+  margin-block: 1em;
+}
+.sbdocs-content.sbdocs-content dt {
+  font-weight: 600;
+  font-size: inherit;
+}
+.sbdocs-content.sbdocs-content dd {
+  margin-inline-start: 1.5rem;
+  margin-block-end: 0.75em;
+  font-size: inherit;
+}
+.sbdocs-content dd:last-child {
+  margin-block-end: 0;
+}
+.sbdocs-content,
+.sbdocs-content p {
+  font-size: 1rem;
+}
+.sbdocs-content table :where(th, td) {
+  font-size: 1rem;
+  vertical-align: top;
+  text-align: left;
+}
+.sbdocs-content.sbdocs-content h2 {
+  margin-block-start: 2rem;
+}
+.sbdocs-content.sbdocs-content h3 {
+  margin-block-start: 1.5rem;
+}
+.sbdocs-content.sbdocs-content h4 {
+  margin-block-start: 1rem;
+}
+.sbdocs-content.sbdocs-content h5 {
+  margin-block-start: 0.5rem;
+}
+.sbdocs-a.sbdocs-a {
+  color: rgb(0 85 182);
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 248a6f3d..ed6e1900 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -244,7 +244,7 @@ importers:
         version: 33.3.0(@angular-devkit/schematics@22.0.3(chokidar@5.0.0))(@angular/common@22.0.2(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2))(rxjs@7.8.2))(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2))(@schematics/angular@22.0.3(chokidar@5.0.0))(rxjs@7.8.2)
       '@spartan-ng/cli':
         specifier: 0.0.1-alpha.715
-        version: 0.0.1-alpha.715(4bcd6c11dc90323135faf665973b2472)
+        version: 0.0.1-alpha.715(92f327bd62163d3f4882283d952090f3)
       '@storybook/addon-a11y':
         specifier: 10.4.5
         version: 10.4.5(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.4)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))
@@ -253,7 +253,7 @@ importers:
         version: 10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(rollup@4.62.0)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.8.4)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(vite@7.3.2(@types/node@24.13.2)(jiti@2.7.0)(less@4.6.6)(lightningcss@1.32.0)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.46.0)(yaml@2.9.0))(webpack@5.107.2(esbuild@0.28.1)(lightningcss@1.32.0)(postcss@8.5.15))
       '@storybook/angular':
         specifier: 10.4.5
-        version: 10.4.5(ae0516f600dad4410f04f46ac43b0188)
+        version: 10.4.5(319aab9dc3374b5e4fa1983730e32401)
       '@surfnet/curve-contracts':
         specifier: workspace:*
         version: link:../contracts
@@ -278,6 +278,9 @@ importers:
       ng-packagr:
         specifier: 22.0.0
         version: 22.0.0(@angular/compiler-cli@22.0.2(@angular/compiler@22.0.2)(typescript@6.0.3))(tailwindcss@4.3.1)(tslib@2.8.1)(typescript@6.0.3)
+      remark-gfm:
+        specifier: ^4.0.1
+        version: 4.0.1
       rxjs:
         specifier: 7.8.2
         version: 7.8.2
@@ -396,6 +399,9 @@ importers:
       react-dom:
         specifier: 19.2.7
         version: 19.2.7(react@19.2.7)
+      remark-gfm:
+        specifier: ^4.0.1
+        version: 4.0.1
       rollup-plugin-preserve-directives:
         specifier: ^0.4.0
         version: 0.4.0(rollup@4.62.0)
@@ -5064,6 +5070,9 @@ packages:
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
+  '@types/debug@4.1.13':
+    resolution: {integrity: sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==}
+
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
@@ -5118,12 +5127,18 @@ packages:
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
   '@types/mdx@2.0.14':
     resolution: {integrity: sha512-T48PeuJtvLosNTPVhfnIp3i/n3a4g4Bad7YCq5k64D4u7NwDrAotikQ+5+sjtUvBmxCMlbo3dVL+C2dP0rWHzg==}
 
   '@types/mime@1.3.5':
     resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
 
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
   '@types/node-forge@1.3.14':
     resolution: {integrity: sha512-mhVF2BnD4BO+jtOp7z1CdzaK4mbuK0LLQYAvdOLqHTavxFNq4zA1EmYkpnFjP8HOUzedfQkRnp0E2ulSAYSzAw==}
 
@@ -5177,6 +5192,9 @@ packages:
   '@types/sockjs@0.3.36':
     resolution: {integrity: sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==}
 
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
   '@types/validate-npm-package-name@4.0.2':
     resolution: {integrity: sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw==}
 
@@ -5844,6 +5862,9 @@ packages:
       '@babel/traverse':
         optional: true
 
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -5978,6 +5999,9 @@ packages:
     resolution: {integrity: sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==}
     engines: {node: '>=4'}
 
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
   chai@5.3.3:
     resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
     engines: {node: '>=18'}
@@ -5997,6 +6021,9 @@ packages:
   change-case@5.4.4:
     resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
 
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
   chardet@2.1.1:
     resolution: {integrity: sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==}
 
@@ -6443,6 +6470,9 @@ packages:
   decimal.js@10.6.0:
     resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
 
+  decode-named-character-reference@1.3.0:
+    resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==}
+
   dedent@1.7.2:
     resolution: {integrity: sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==}
     peerDependencies:
@@ -6537,6 +6567,9 @@ packages:
     engines: {node: '>= 16.0.0'}
     hasBin: true
 
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
   diff@8.0.4:
     resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
     engines: {node: '>=0.3.1'}
@@ -6808,6 +6841,10 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
   eslint-config-next@16.2.9:
     resolution: {integrity: sha512-olGtBrs07bQchpaJWeqbk9GaMoU0oGmN/pYNEBXSbfgKngb5uHnPe37X6tVeh6DJfaWFQildvinGEOrolo5fmw==}
     peerDependencies:
@@ -7027,6 +7064,9 @@ packages:
   exsolve@1.0.8:
     resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
 
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
   extendable-error@0.1.7:
     resolution: {integrity: sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg==}
 
@@ -8251,6 +8291,9 @@ packages:
   long-timeout@0.1.1:
     resolution: {integrity: sha512-BFRuQUqc7x2NWxfJBCyUrN8iYUYznzL9JROmRz1gZ6KlOIgmoD+njPVbb+VNn2nGMKggMsK79iUNErillsrx7w==}
 
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
@@ -8298,10 +8341,46 @@ packages:
     resolution: {integrity: sha512-Je0fLJ0F5atA7F+eIlLzk+Wkcl57JDf4kf+EW8xiP5E31xOQxkIxTbgf1Oi1Lw9tRI9UEMRdI5Vz2xTzoNU1Jw==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
+
+  mdast-util-from-markdown@2.0.3:
+    resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==}
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
   mdn-data@2.0.28:
     resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
 
@@ -8343,6 +8422,90 @@ packages:
     resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
     engines: {node: '>= 0.6'}
 
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -9498,6 +9661,15 @@ packages:
     resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
     engines: {node: '>= 0.10'}
 
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
   renderkid@3.0.0:
     resolution: {integrity: sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==}
 
@@ -10439,6 +10611,9 @@ packages:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
 
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
   ts-api-utils@2.5.0:
     resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
     engines: {node: '>=18.12'}
@@ -10607,10 +10782,25 @@ packages:
     resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
     engines: {node: '>=18'}
 
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
   union@0.5.0:
     resolution: {integrity: sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==}
     engines: {node: '>= 0.8.0'}
 
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
+
+  unist-util-visit@5.1.0:
+    resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
+
   universalify@0.1.2:
     resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
     engines: {node: '>= 4.0.0'}
@@ -10737,6 +10927,12 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
   vite-plugin-dts@5.0.2:
     resolution: {integrity: sha512-lNeHS+dwGju6eRmNvZQt8Shwv9j3m98hbHse/lIbLq9q3yE2DcIOBBYQEVUF6tS0kOmv+VA9Z5FqmzFnGe4U8g==}
     peerDependencies:
@@ -11249,6 +11445,9 @@ packages:
   zone.js@0.16.2:
     resolution: {integrity: sha512-Eky7p2Z1Ig3NnbfodSPoARCjKBSTFMnE/ACsP1L/XJEfY4SdOFce19BsUCWVwL6K5ABZFy5J3bjcMWffX+YM3Q==}
 
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
 snapshots:
 
   '@adobe/css-tools@4.5.0': {}
@@ -11365,13 +11564,13 @@ snapshots:
     transitivePeerDependencies:
       - chokidar
 
-  '@angular-devkit/build-angular@21.2.15(39796bd1a9a68092a33c58471f6f6d12)':
+  '@angular-devkit/build-angular@21.2.15(b647a59da74a6ade3911ee6c634b0739)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.2102.15(chokidar@5.0.0)
       '@angular-devkit/build-webpack': 0.2102.15(chokidar@5.0.0)(webpack-dev-server@5.2.3(tslib@2.8.1)(webpack@5.105.2(esbuild@0.27.3)(lightningcss@1.32.0)(postcss@8.5.12)))(webpack@5.105.2(esbuild@0.27.3)(lightningcss@1.32.0)(postcss@8.5.12))
       '@angular-devkit/core': 21.2.15(chokidar@5.0.0)
-      '@angular/build': 21.2.15(@angular/compiler-cli@22.0.2(@angular/compiler@22.0.2)(typescript@6.0.3))(@angular/compiler@22.0.2)(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2))(@angular/platform-browser@22.0.2(@angular/common@22.0.2(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2))(rxjs@7.8.2))(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2)))(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(@types/node@24.13.2)(chokidar@5.0.0)(jiti@2.7.0)(less@4.4.2)(lightningcss@1.32.0)(ng-packagr@22.0.0(@angular/compiler-cli@22.0.2(@angular/compiler@22.0.2)(typescript@6.0.3))(tailwindcss@4.3.1)(tslib@2.8.1)(typescript@6.0.3))(postcss@8.5.12)(sass-embedded@1.100.0)(tailwindcss@4.3.1)(terser@5.46.0)(tslib@2.8.1)(typescript@6.0.3)(vitest@4.1.9(@types/node@24.13.2)(jsdom@29.1.1(@noble/hashes@1.8.0))(vite@7.3.2(@types/node@24.13.2)(jiti@2.7.0)(less@4.6.6)(lightningcss@1.32.0)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.46.0)(yaml@2.9.0)))(yaml@2.9.0)
+      '@angular/build': 21.2.15(@angular/compiler-cli@22.0.2(@angular/compiler@22.0.2)(typescript@6.0.3))(@angular/compiler@22.0.2)(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2))(@angular/platform-browser@22.0.2(@angular/common@22.0.2(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2))(rxjs@7.8.2))(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2)))(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@types/node@24.13.2)(chokidar@5.0.0)(jiti@2.7.0)(less@4.4.2)(lightningcss@1.32.0)(ng-packagr@22.0.0(@angular/compiler-cli@22.0.2(@angular/compiler@22.0.2)(typescript@6.0.3))(tailwindcss@4.3.1)(tslib@2.8.1)(typescript@6.0.3))(postcss@8.5.12)(sass-embedded@1.100.0)(tailwindcss@4.3.1)(terser@5.46.0)(tslib@2.8.1)(typescript@6.0.3)(vitest@4.1.9(@types/node@24.13.2)(jsdom@29.1.1(@noble/hashes@1.8.0))(vite@7.3.2(@types/node@24.13.2)(jiti@2.7.0)(less@4.6.6)(lightningcss@1.32.0)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.46.0)(yaml@2.9.0)))(yaml@2.9.0)
       '@angular/compiler-cli': 22.0.2(@angular/compiler@22.0.2)(typescript@6.0.3)
       '@babel/core': 7.29.0
       '@babel/generator': 7.29.1
@@ -11544,7 +11743,7 @@ snapshots:
     transitivePeerDependencies:
       - chokidar
 
-  '@angular/build@21.2.15(@angular/compiler-cli@22.0.2(@angular/compiler@22.0.2)(typescript@6.0.3))(@angular/compiler@22.0.2)(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2))(@angular/platform-browser@22.0.2(@angular/common@22.0.2(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2))(rxjs@7.8.2))(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2)))(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(@types/node@24.13.2)(chokidar@5.0.0)(jiti@2.7.0)(less@4.4.2)(lightningcss@1.32.0)(ng-packagr@22.0.0(@angular/compiler-cli@22.0.2(@angular/compiler@22.0.2)(typescript@6.0.3))(tailwindcss@4.3.1)(tslib@2.8.1)(typescript@6.0.3))(postcss@8.5.12)(sass-embedded@1.100.0)(tailwindcss@4.3.1)(terser@5.46.0)(tslib@2.8.1)(typescript@6.0.3)(vitest@4.1.9(@types/node@24.13.2)(jsdom@29.1.1(@noble/hashes@1.8.0))(vite@7.3.2(@types/node@24.13.2)(jiti@2.7.0)(less@4.6.6)(lightningcss@1.32.0)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.46.0)(yaml@2.9.0)))(yaml@2.9.0)':
+  '@angular/build@21.2.15(@angular/compiler-cli@22.0.2(@angular/compiler@22.0.2)(typescript@6.0.3))(@angular/compiler@22.0.2)(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2))(@angular/platform-browser@22.0.2(@angular/common@22.0.2(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2))(rxjs@7.8.2))(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2)))(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@types/node@24.13.2)(chokidar@5.0.0)(jiti@2.7.0)(less@4.4.2)(lightningcss@1.32.0)(ng-packagr@22.0.0(@angular/compiler-cli@22.0.2(@angular/compiler@22.0.2)(typescript@6.0.3))(tailwindcss@4.3.1)(tslib@2.8.1)(typescript@6.0.3))(postcss@8.5.12)(sass-embedded@1.100.0)(tailwindcss@4.3.1)(terser@5.46.0)(tslib@2.8.1)(typescript@6.0.3)(vitest@4.1.9(@types/node@24.13.2)(jsdom@29.1.1(@noble/hashes@1.8.0))(vite@7.3.2(@types/node@24.13.2)(jiti@2.7.0)(less@4.6.6)(lightningcss@1.32.0)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.46.0)(yaml@2.9.0)))(yaml@2.9.0)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.2102.15(chokidar@5.0.0)
@@ -11567,7 +11766,7 @@ snapshots:
       parse5-html-rewriting-stream: 8.0.0
       picomatch: 4.0.4
       piscina: 5.1.4
-      rolldown: 1.0.0-rc.4(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
+      rolldown: 1.0.0-rc.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
       sass: 1.97.3
       semver: 7.7.4
       source-map-support: 0.5.21
@@ -14724,13 +14923,6 @@ snapshots:
       '@tybys/wasm-util': 0.10.2
     optional: true
 
-  '@napi-rs/wasm-runtime@1.1.5(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
-    dependencies:
-      '@emnapi/core': 1.11.1
-      '@emnapi/runtime': 1.11.1
-      '@tybys/wasm-util': 0.10.2
-    optional: true
-
   '@napi-rs/wasm-runtime@1.1.5(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
     dependencies:
       '@emnapi/core': 1.9.2
@@ -14867,7 +15059,7 @@ snapshots:
       node-gyp: 12.4.0
       proc-log: 6.1.0
 
-  '@nx/angular@22.7.5(3638acb9af353bc176ec30d03a9a012f)':
+  '@nx/angular@22.7.5(44d685919cd77d379fe69f9418065307)':
     dependencies:
       '@angular-devkit/core': 22.0.3(chokidar@5.0.0)
       '@angular-devkit/schematics': 22.0.3(chokidar@5.0.0)
@@ -14891,7 +15083,7 @@ snapshots:
       tslib: 2.8.1
       webpack-merge: 5.10.0
     optionalDependencies:
-      '@angular-devkit/build-angular': 21.2.15(39796bd1a9a68092a33c58471f6f6d12)
+      '@angular-devkit/build-angular': 21.2.15(b647a59da74a6ade3911ee6c634b0739)
       '@angular/build': 22.0.2(@angular/compiler-cli@22.0.2(@angular/compiler@22.0.2)(typescript@6.0.3))(@angular/compiler@22.0.2)(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2))(@angular/platform-browser@22.0.2(@angular/common@22.0.2(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2))(rxjs@7.8.2))(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2)))(@types/node@24.13.2)(chokidar@5.0.0)(istanbul-lib-instrument@6.0.3)(jiti@2.7.0)(less@4.6.6)(lightningcss@1.32.0)(ng-packagr@22.0.0(@angular/compiler-cli@22.0.2(@angular/compiler@22.0.2)(typescript@6.0.3))(tailwindcss@4.3.1)(tslib@2.8.1)(typescript@6.0.3))(postcss@8.5.15)(sass-embedded@1.100.0)(tailwindcss@4.3.1)(terser@5.46.0)(tslib@2.8.1)(typescript@6.0.3)(vitest@4.1.9(@types/node@24.13.2)(jsdom@29.1.1(@noble/hashes@1.8.0))(vite@7.3.2(@types/node@24.13.2)(jiti@2.7.0)(less@4.6.6)(lightningcss@1.32.0)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.46.0)(yaml@2.9.0)))(yaml@2.9.0)
       ng-packagr: 22.0.0(@angular/compiler-cli@22.0.2(@angular/compiler@22.0.2)(typescript@6.0.3))(tailwindcss@4.3.1)(tslib@2.8.1)(typescript@6.0.3)
     transitivePeerDependencies:
@@ -15814,9 +16006,9 @@ snapshots:
   '@rolldown/binding-openharmony-arm64@1.0.3':
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-rc.4(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
+  '@rolldown/binding-wasm32-wasi@1.0.0-rc.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.5(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
+      '@napi-rs/wasm-runtime': 1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     transitivePeerDependencies:
       - '@emnapi/core'
       - '@emnapi/runtime'
@@ -16212,10 +16404,10 @@ snapshots:
     optionalDependencies:
       luxon: 3.7.2
 
-  '@spartan-ng/cli@0.0.1-alpha.715(4bcd6c11dc90323135faf665973b2472)':
+  '@spartan-ng/cli@0.0.1-alpha.715(92f327bd62163d3f4882283d952090f3)':
     dependencies:
       '@angular/core': 22.0.1(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2)
-      '@nx/angular': 22.7.5(3638acb9af353bc176ec30d03a9a012f)
+      '@nx/angular': 22.7.5(44d685919cd77d379fe69f9418065307)
       '@nx/devkit': 22.7.5(nx@22.7.5(debug@4.4.3))
       '@nx/js': 22.7.5(@babel/traverse@7.29.7)(nx@22.7.5(debug@4.4.3))
       '@nx/workspace': 22.7.5
@@ -16329,10 +16521,10 @@ snapshots:
       - vite
       - webpack
 
-  '@storybook/angular@10.4.5(ae0516f600dad4410f04f46ac43b0188)':
+  '@storybook/angular@10.4.5(319aab9dc3374b5e4fa1983730e32401)':
     dependencies:
       '@angular-devkit/architect': 0.2200.3(chokidar@5.0.0)
-      '@angular-devkit/build-angular': 21.2.15(39796bd1a9a68092a33c58471f6f6d12)
+      '@angular-devkit/build-angular': 21.2.15(b647a59da74a6ade3911ee6c634b0739)
       '@angular-devkit/core': 22.0.3(chokidar@5.0.0)
       '@angular/common': 22.0.2(@angular/core@22.0.2(@angular/compiler@22.0.2)(rxjs@7.8.2)(zone.js@0.16.2))(rxjs@7.8.2)
       '@angular/compiler': 22.0.2
@@ -16716,6 +16908,10 @@ snapshots:
     dependencies:
       '@types/node': 24.13.2
 
+  '@types/debug@4.1.13':
+    dependencies:
+      '@types/ms': 2.1.0
+
   '@types/deep-eql@4.0.2': {}
 
   '@types/doctrine@0.0.9': {}
@@ -16776,10 +16972,16 @@ snapshots:
 
   '@types/json5@0.0.29': {}
 
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/mdx@2.0.14': {}
 
   '@types/mime@1.3.5': {}
 
+  '@types/ms@2.1.0': {}
+
   '@types/node-forge@1.3.14':
     dependencies:
       '@types/node': 24.13.2
@@ -16837,6 +17039,8 @@ snapshots:
     dependencies:
       '@types/node': 24.13.2
 
+  '@types/unist@3.0.3': {}
+
   '@types/validate-npm-package-name@4.0.2': {}
 
   '@types/ws@8.18.1':
@@ -17633,6 +17837,8 @@ snapshots:
     optionalDependencies:
       '@babel/traverse': 7.29.7
 
+  bail@2.0.2: {}
+
   balanced-match@1.0.2: {}
 
   balanced-match@4.0.3: {}
@@ -17820,6 +18026,8 @@ snapshots:
 
   case-sensitive-paths-webpack-plugin@2.4.0: {}
 
+  ccount@2.0.1: {}
+
   chai@5.3.3:
     dependencies:
       assertion-error: 2.0.1
@@ -17839,6 +18047,8 @@ snapshots:
 
   change-case@5.4.4: {}
 
+  character-entities@2.0.2: {}
+
   chardet@2.1.1: {}
 
   check-error@2.1.3: {}
@@ -18290,6 +18500,10 @@ snapshots:
 
   decimal.js@10.6.0: {}
 
+  decode-named-character-reference@1.3.0:
+    dependencies:
+      character-entities: 2.0.2
+
   dedent@1.7.2(babel-plugin-macros@3.1.0):
     optionalDependencies:
       babel-plugin-macros: 3.1.0
@@ -18353,6 +18567,10 @@ snapshots:
     dependencies:
       address: 2.0.3
 
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
   diff@8.0.4: {}
 
   dir-glob@3.0.1:
@@ -18748,6 +18966,8 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
+  escape-string-regexp@5.0.0: {}
+
   eslint-config-next@16.2.9(@typescript-eslint/parser@8.62.0(eslint@9.39.4(jiti@2.7.0))(typescript@6.0.3))(eslint@9.39.4(jiti@2.7.0))(typescript@6.0.3):
     dependencies:
       '@next/eslint-plugin-next': 16.2.9
@@ -19149,6 +19369,8 @@ snapshots:
 
   exsolve@1.0.8: {}
 
+  extend@3.0.2: {}
+
   extendable-error@0.1.7: {}
 
   fast-deep-equal@3.1.3: {}
@@ -20452,6 +20674,8 @@ snapshots:
 
   long-timeout@0.1.1: {}
 
+  longest-streak@3.1.0: {}
+
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
@@ -20508,8 +20732,112 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  markdown-table@3.0.4: {}
+
   math-intrinsics@1.1.0: {}
 
+  mdast-util-find-and-replace@3.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
+  mdast-util-from-markdown@2.0.3:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
+
+  mdast-util-gfm-footnote@2.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-table@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm@3.1.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.1
+
+  mdast-util-to-markdown@2.1.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.1.0
+      zwitch: 2.0.4
+
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
   mdn-data@2.0.28: {}
 
   mdn-data@2.27.1: {}
@@ -20549,6 +20877,197 @@ snapshots:
 
   methods@1.1.2: {}
 
+  micromark-core-commonmark@2.0.3:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-footnote@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-table@2.1.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm@3.0.0:
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-space@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-html-tag-name@2.0.1: {}
+
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
+  micromark@4.0.2:
+    dependencies:
+      '@types/debug': 4.1.13
+      debug: 4.4.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -21946,6 +22465,32 @@ snapshots:
 
   relateurl@0.2.7: {}
 
+  remark-gfm@4.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-gfm: 3.1.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.3
+      micromark-util-types: 2.0.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-stringify@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.1.2
+      unified: 11.0.5
+
   renderkid@3.0.0:
     dependencies:
       css-select: 4.3.0
@@ -22021,7 +22566,7 @@ snapshots:
 
   rfdc@1.4.1: {}
 
-  rolldown@1.0.0-rc.4(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1):
+  rolldown@1.0.0-rc.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0):
     dependencies:
       '@oxc-project/types': 0.113.0
       '@rolldown/pluginutils': 1.0.0-rc.4
@@ -22036,7 +22581,7 @@ snapshots:
       '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.4
       '@rolldown/binding-linux-x64-musl': 1.0.0-rc.4
       '@rolldown/binding-openharmony-arm64': 1.0.0-rc.4
-      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.4(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
+      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
       '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.4
       '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.4
     transitivePeerDependencies:
@@ -23089,6 +23634,8 @@ snapshots:
 
   tree-kill@1.2.2: {}
 
+  trough@2.2.0: {}
+
   ts-api-utils@2.5.0(typescript@6.0.3):
     dependencies:
       typescript: 6.0.3
@@ -23275,10 +23822,39 @@ snapshots:
 
   unicorn-magic@0.3.0: {}
 
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
   union@0.5.0:
     dependencies:
       qs: 6.15.2
 
+  unist-util-is@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-visit@5.1.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
   universalify@0.1.2: {}
 
   universalify@2.0.1: {}
@@ -23404,6 +23980,16 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
   vite-plugin-dts@5.0.2(@rspack/core@1.6.8(@swc/helpers@0.5.15))(esbuild@0.28.1)(rolldown@1.0.3)(rollup@4.62.0)(typescript@6.0.3)(vite@8.0.16(@types/node@24.13.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.6)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.48.0)(yaml@2.9.0))(webpack@5.107.2(esbuild@0.28.1)):
     dependencies:
       unplugin-dts: 1.0.2(@rspack/core@1.6.8(@swc/helpers@0.5.15))(esbuild@0.28.1)(rolldown@1.0.3)(rollup@4.62.0)(typescript@6.0.3)(vite@8.0.16(@types/node@24.13.2)(esbuild@0.28.1)(jiti@2.7.0)(less@4.6.6)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.48.0)(yaml@2.9.0))(webpack@5.107.2(esbuild@0.28.1))
@@ -24079,3 +24665,5 @@ snapshots:
   zod@4.4.3: {}
 
   zone.js@0.16.2: {}
+
+  zwitch@2.0.4: {}