Merge pull request #144 from jeffreylauwers/fix/input-button-height

docs: Menu component en token fix documenteren (v5.19.0 + v5.19.1)

Author: jeffreylauwers

README.md

@@ -65,7 +65,7 @@ pnpm --filter @dsn/design-tokens watch
 # Start Storybook in development mode
 pnpm dev
 
-# Run tests (1225 tests across 60 test suites)
+# Run tests (1234 tests across 61 test suites)
 pnpm test
 
 # Run tests in watch mode
@@ -201,11 +201,12 @@ All components are fully typed with TypeScript and include comprehensive JSDoc d
 | **StatusBadge** | Yes      | Yes   | —             |
 | **Table**       | Yes      | Yes   | —             |
 
-**Navigation Components (3)**
+**Navigation Components (4)**
 
 | Component                | HTML/CSS | React | Web Component |
 | ------------------------ | -------- | ----- | ------------- |
 | **BreadcrumbNavigation** | Yes      | Yes   | —             |
+| **Menu**                 | Yes      | Yes   | —             |
 | **MenuButton**           | Yes      | Yes   | —             |
 | **MenuLink**             | Yes      | Yes   | —             |
 

docs/03-components.md

@@ -1587,7 +1587,81 @@ const [isOpen, setIsOpen] = React.useState(false);
 
 ## Navigation Components
 
-**Status:** Complete (HTML/CSS, React) — 3 components total
+**Status:** Complete (HTML/CSS, React) — 4 components total
+
+### Menu
+
+**Status:** Complete (HTML/CSS, React)
+
+**Location:** `packages/components-{html|react}/src/Menu/`
+
+**Tokens:** `tokens/components/menu.json`
+
+**Props:** `orientation` (`'vertical'` | `'horizontal'`), `children`, `className` + alle native `<ul>` attributen
+
+**Features:**
+
+- Containercomponent voor `MenuLink`- en `MenuButton`-items — rendert een `<ul>` met `list-style: none`
+- `orientation="vertical"` (standaard): `flex-direction: column`, items op volledige breedte
+- `orientation="horizontal"`: `flex-direction: row`, items naast elkaar op inhoudsbreedte
+- Horizontale current-staat gebruikt `border-block-end` (i.p.v. `border-inline-start`) — context-override via `.dsn-menu--horizontal` in `menu-link.css`
+- De `<nav>`-wrapper is de verantwoordelijkheid van de ouder
+
+**CSS-klassen:**
+
+| Klasse                 | Element | Beschrijving                               |
+| ---------------------- | ------- | ------------------------------------------ |
+| `dsn-menu`             | `<ul>`  | Basiscomponent — altijd aanwezig           |
+| `dsn-menu--horizontal` | `<ul>`  | Horizontale oriëntatie: items naast elkaar |
+
+**Design tokens:**
+
+| Token                       | Waarde                        | Beschrijving                                  |
+| --------------------------- | ----------------------------- | --------------------------------------------- |
+| `--dsn-menu-gap-vertical`   | `{dsn.space.block.xs}` (2px)  | Ruimte tussen items in verticale oriëntatie   |
+| `--dsn-menu-gap-horizontal` | `{dsn.space.inline.sm}` (4px) | Ruimte tussen items in horizontale oriëntatie |
+
+**Usage:**
+
+```html
+<!-- HTML/CSS — verticaal (standaard) -->
+<nav aria-label="Hoofdnavigatie">
+  <ul class="dsn-menu">
+    <li class="dsn-menu-link">...</li>
+    <li class="dsn-menu-button">...</li>
+  </ul>
+</nav>
+
+<!-- HTML/CSS — horizontaal -->
+<nav aria-label="Paginanavigatie">
+  <ul class="dsn-menu dsn-menu--horizontal">
+    <li class="dsn-menu-link">...</li>
+    <li class="dsn-menu-link">...</li>
+  </ul>
+</nav>
+```
+
+```tsx
+// React — verticaal (standaard)
+<nav aria-label="Hoofdnavigatie">
+  <Menu>
+    <MenuLink href="/home">Home</MenuLink>
+    <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>
+  </Menu>
+</nav>
+
+// React — horizontaal
+<nav aria-label="Paginanavigatie">
+  <Menu orientation="horizontal">
+    <MenuLink href="/home" current>Home</MenuLink>
+    <MenuLink href="/over">Over ons</MenuLink>
+  </Menu>
+</nav>
+```
+
+**Tests:** React (9 tests)
+
+---
 
 ### BreadcrumbNavigation
 

docs/changelog.md

@@ -23,6 +23,41 @@ All notable changes to this project are documented in this file.
 
 ---
 
+## Version 5.19.1 (April 6, 2026)
+
+### Fix: gelijke hoogte voor input fields en buttons (issue #141, PR #143)
+
+#### Fixed
+
+- `dsn.form-control.padding-block-start/end` verlaagd van `{dsn.space.block.lg}` (12px) naar `{dsn.space.block.md}` (8px) — `min-block-size` (48px) bepaalt nu de hoogte van alle form controls, gelijk aan de button
+- Cascadeert automatisch naar **TextInput**, **TextArea**, **Select**, **SearchInput**, **DateInput** en **TimeInput**
+- Tijdelijke token-override in `page-header.css` (`.dsn-page-header__search-inner .dsn-text-input`) verwijderd
+
+#### Changed
+
+- `dsn.date-input.button-inset-inline-end` en `dsn.time-input.button-inset-inline-end`: van `{dsn.space.inline.md}` (8px) naar `{dsn.space.inline.sm}` (4px) — icoonknop staat compacter tegen de border
+
+---
+
+## Version 5.19.0 (April 4, 2026)
+
+### Menu component (issue #129, PR #136)
+
+#### Added
+
+- **Menu** component — containercomponent voor `MenuLink`- en `MenuButton`-items
+- Rendert een `<ul>` met `list-style: none`; verantwoordelijkheid voor de `<nav>`-wrapper ligt bij de ouder
+- `orientation` prop: `vertical` (standaard, `flex-direction: column`) of `horizontal` (`flex-direction: row`)
+- Horizontale current-indicator via `border-block-end` (i.p.v. `border-inline-start` in verticale oriëntatie) — context-override in `menu-link.css`
+- 2 design tokens: `dsn.menu.gap.vertical` (`{dsn.space.block.xs}`, 2px) en `dsn.menu.gap.horizontal` (`{dsn.space.inline.sm}`, 4px)
+- 9 React tests
+
+#### Changed
+
+- `dsn.menu-item.min-block-size` → `{dsn.pointer-target.min-block-size}` (48px) — MenuLink en MenuButton voldoen nu altijd aan WCAG touch target
+
+---
+
 ## Version 5.18.0 (April 4, 2026)
 
 ### MenuButton component + gedeelde menu-item tokens