docs: synchroniseer documentatie voor Card component en fixes (v5.13.0)

- README.md: versie 5.13.0, datum 23 maart 2026, tests 1125/54, componenttelling
- 03-components.md: Card hover/background/transition gedrag bijgewerkt
- changelog.md: v5.13.0 uitgebreid met fixes (border-radius, focus, gelijke hoogte)
- Card.docs.md: token tabel — background-hover toegevoegd, beschrijvingen gecorrigeerd

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Jeffrey Lauwers

docs/03-components.md

@@ -782,9 +782,10 @@ Brengt consistente verticale ruimte aan tussen directe child-elementen via `flex
 - `CardHeading` ontvangt `href` via React context van parent `Card` en wraps children in een `<a class="dsn-card-heading__link">`
 - Footer-kinderen staan boven de stretched link via `z-index: 2` in CSS
 - `CardGroup` rendert als `<ul role="list">` (standaard) of `<div>` via `as` prop
-- Hover: box-shadow verhoogd naar `md`; focus: focus-ring rondom de gehele card via CSS `:has()`
+- Standaard geen box-shadow (`none`); hover verhoogt achtergrond naar `bg-elevated` + box-shadow `md` — overgang via CSS `transition` (background-color + box-shadow)
+- Focus: focus-ring rondom de gehele card via CSS `:has(.dsn-card-heading__link:focus-visible)` — zelfde tokens als Button en Link
 - Alle spacing via component-tokens (`dsn.card.body.padding-*`, `dsn.card.footer.padding-*`)
-- Dark mode: `background: bg-elevated` zorgt voor correct elevatie-contrast
+- Standaard `background: bg-document`; hover `background: bg-elevated` voor elevatie-effect
 
 **CSS klassen:**
 

docs/README.md

@@ -1,7 +1,7 @@
 # Design System Documentation
 
-**Version:** 5.7.0
-**Last Updated:** March 13, 2026
+**Version:** 5.13.0
+**Last Updated:** March 23, 2026
 
 Complete documentation voor het Design System Starter Kit.
 
@@ -91,8 +91,8 @@ Complete documentation voor het Design System Starter Kit.
 
 - **Tokens per configuration:** ~1100 (400 semantic + 700 component)
 - **Configurations:** 8 (2 themes × 2 modes × 2 project types)
-- **Components:** 44 (5 layout + 9 content + 5 display/feedback + 1 navigation + 25 form; HTML/CSS + React)
-- **Tests:** 1033 across 50 test suites
+- **Components:** 44 (4 layout + 9 content + 7 display/feedback + 25 form; HTML/CSS + React)
+- **Tests:** 1125 across 54 test suites
 - **Storybook stories:** 130+
 
 ---

docs/changelog.md

@@ -18,11 +18,18 @@ All notable changes to this project are documented in this file.
 - `dsn-card__image-placeholder` — automatische placeholder bij `CardHeader` zonder children (`aspect-ratio: 16 / 9`, `aria-hidden="true"`)
 - Stretched-link techniek: `dsn-card-heading__link::before` met `position: absolute; inset: 0; z-index: 1` dekt de volledige card
 - `CardHeading` ontvangt `href` automatisch via React context van parent `Card`
-- `CardGroup` als `<ul role="list">` (standaard) of `<div>` via `as` prop — gelijke hoogte via `flex: 1 1 var(--dsn-card-group-item-min-width)`
-- Hover/focus-stijlen via CSS `:has(.dsn-card-heading__link:hover/focus-visible)` — focus-ring rondom de gehele card
-- Componenttokens: `--dsn-card-background`, `--dsn-card-border-*`, `--dsn-card-box-shadow`, `--dsn-card-box-shadow-hover`, `--dsn-card-body-padding-*`, `--dsn-card-footer-padding-*`, `--dsn-card-image-placeholder-*`, `--dsn-card-heading-*`, `--dsn-card-group-*`
+- `CardGroup` als `<ul role="list">` (standaard) of `<div>` via `as` prop — gelijke hoogte via `display: flex` op list-items + `flex: 1` op `dsn-card`
+- Hover/focus-stijlen via CSS `:has(.dsn-card-heading__link:hover/focus-visible)` — focus-ring rondom de gehele card (zelfde tokens als Button en Link)
+- CSS `transition` op `background-color` en `box-shadow` — vloeiende hover-overgang (tokens `--dsn-transition-duration-normal` + `--dsn-transition-easing-default`)
+- Componenttokens: `--dsn-card-background`, `--dsn-card-background-hover`, `--dsn-card-border-*`, `--dsn-card-box-shadow`, `--dsn-card-box-shadow-hover`, `--dsn-card-body-padding-*`, `--dsn-card-footer-padding-*`, `--dsn-card-image-placeholder-*`, `--dsn-card-heading-*`, `--dsn-card-group-*`
 - 43 nieuwe React tests
 
+#### Fixed
+
+- **Afbeelding border-radius onderkant** — border-radius-selector gecorrigeerd naar `.dsn-card__header > .dsn-image .dsn-image__img` zodat alleen de bovenhoeken afgerond zijn en de onderkant recht blijft
+- **Focus state** — was hardcoded kleur; nu via `--dsn-focus-outline-*` tokens, consistent met Button en Link
+- **CardGroup gelijke hoogte** — `display: flex` toegevoegd aan list-items zodat cards in een rij altijd dezelfde hoogte hebben
+
 ---
 
 ## Version 5.12.0 (March 21, 2026)

packages/storybook/src/Card.docs.md

@@ -49,28 +49,29 @@ Het Card component presenteert een zelfstandig inhoudsblok — doorgaans een afb
 
 ## Design tokens
 
-| Token                                     | Beschrijving                                           |
-| ----------------------------------------- | ------------------------------------------------------ |
-| `--dsn-card-background`                   | Achtergrondkleur (bg-elevated voor dark mode elevatie) |
-| `--dsn-card-border-radius`                | Afgeronde hoeken (8px)                                 |
-| `--dsn-card-border-width`                 | Randbreedte                                            |
-| `--dsn-card-border-color`                 | Randkleur (neutral.border-subtle)                      |
-| `--dsn-card-box-shadow`                   | Standaard schaduw (sm-elevatie)                        |
-| `--dsn-card-box-shadow-hover`             | Schaduw bij hover (md-elevatie)                        |
-| `--dsn-card-body-padding-block`           | Verticale padding van de body (16px)                   |
-| `--dsn-card-body-padding-inline`          | Horizontale padding van de body (16px)                 |
-| `--dsn-card-footer-padding-block-end`     | Onderkant padding van de footer (16px)                 |
-| `--dsn-card-footer-padding-inline`        | Horizontale padding van de footer (16px)               |
-| `--dsn-card-image-placeholder-background` | Achtergrond van de afbeeldingsplaceholder              |
-| `--dsn-card-image-placeholder-color`      | Kleur van het icoon in de placeholder                  |
-| `--dsn-card-heading-font-family`          | Lettertype van de card heading                         |
-| `--dsn-card-heading-font-size`            | Tekstgrootte van de card heading                       |
-| `--dsn-card-heading-font-weight`          | Vetgedrukt van de card heading                         |
-| `--dsn-card-heading-line-height`          | Regelafstand van de card heading                       |
-| `--dsn-card-heading-color`                | Kleur van de card heading                              |
-| `--dsn-card-heading-margin-block-end`     | Afstand onder de card heading (12px)                   |
-| `--dsn-card-group-gap`                    | Ruimte tussen cards in een groep (16px)                |
-| `--dsn-card-group-item-min-width`         | Minimale breedte per card (17.5rem)                    |
+| Token                                     | Beschrijving                              |
+| ----------------------------------------- | ----------------------------------------- |
+| `--dsn-card-background`                   | Achtergrondkleur standaard (bg-document)  |
+| `--dsn-card-background-hover`             | Achtergrondkleur bij hover (bg-elevated)  |
+| `--dsn-card-border-radius`                | Afgeronde hoeken (8px)                    |
+| `--dsn-card-border-width`                 | Randbreedte                               |
+| `--dsn-card-border-color`                 | Randkleur (neutral.border-subtle)         |
+| `--dsn-card-box-shadow`                   | Standaard schaduw (none)                  |
+| `--dsn-card-box-shadow-hover`             | Schaduw bij hover (md-elevatie)           |
+| `--dsn-card-body-padding-block`           | Verticale padding van de body (16px)      |
+| `--dsn-card-body-padding-inline`          | Horizontale padding van de body (16px)    |
+| `--dsn-card-footer-padding-block-end`     | Onderkant padding van de footer (24px)    |
+| `--dsn-card-footer-padding-inline`        | Horizontale padding van de footer (16px)  |
+| `--dsn-card-image-placeholder-background` | Achtergrond van de afbeeldingsplaceholder |
+| `--dsn-card-image-placeholder-color`      | Kleur van het icoon in de placeholder     |
+| `--dsn-card-heading-font-family`          | Lettertype van de card heading            |
+| `--dsn-card-heading-font-size`            | Tekstgrootte van de card heading          |
+| `--dsn-card-heading-font-weight`          | Vetgedrukt van de card heading            |
+| `--dsn-card-heading-line-height`          | Regelafstand van de card heading          |
+| `--dsn-card-heading-color`                | Kleur van de card heading                 |
+| `--dsn-card-heading-margin-block-end`     | Afstand onder de card heading (12px)      |
+| `--dsn-card-group-gap`                    | Ruimte tussen cards in een groep (16px)   |
+| `--dsn-card-group-item-min-width`         | Minimale breedte per card (17.5rem)       |
 
 ## Accessibility