feat(MenuItem): min-block-size via --dsn-pointer-target-min-block-size

Voegt min-block-size toe aan MenuLink en MenuButton voor WCAG pointer target grootte.
Nieuw gedeeld token dsn.menu-item.min-block-size verwijst naar dsn.pointer-target.min-block-size.

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

Author: Jeffrey Lauwers

packages/components-html/src/menu-button/menu-button.css

@@ -41,6 +41,7 @@
   display: inline-flex;
   align-items: center;
   width: 100%;
+  min-block-size: var(--dsn-menu-item-min-block-size);
   gap: var(--dsn-menu-item-gap);
   padding-block: var(--dsn-menu-item-padding-block);
   padding-inline: var(--dsn-menu-item-padding-inline);

packages/components-html/src/menu-link/menu-link.css

@@ -59,6 +59,7 @@
   display: inline-flex;
   align-items: center;
   flex: 1;
+  min-block-size: var(--dsn-menu-item-min-block-size);
   gap: var(--dsn-menu-item-gap);
   padding-block: var(--dsn-menu-item-padding-block);
   padding-inline: var(--dsn-menu-item-padding-inline);

packages/design-tokens/src/tokens/components/menu-item.json

@@ -31,6 +31,11 @@
         "type": "dimension",
         "comment": "Gedeeld: ruimte tussen icoon, label en badge"
       },
+      "min-block-size": {
+        "value": "{dsn.pointer-target.min-block-size}",
+        "type": "dimension",
+        "comment": "Gedeeld: minimale raakbare hoogte — WCAG pointer target"
+      },
       "icon-size": {
         "value": "{dsn.icon.size.md}",
         "type": "dimension",

packages/storybook/src/MenuButton.docs.md

@@ -86,6 +86,7 @@ MenuButton gebruikt uitsluitend de gedeelde `--dsn-menu-item-*` tokens. Deze tok
 | `--dsn-menu-item-padding-block`           | Verticale padding            |
 | `--dsn-menu-item-padding-inline`          | Horizontale padding          |
 | `--dsn-menu-item-gap`                     | Ruimte tussen icoon en label |
+| `--dsn-menu-item-min-block-size`          | Minimale raakbare hoogte     |
 | `--dsn-menu-item-icon-size`               | Icoongrootte                 |
 | `--dsn-menu-item-color`                   | Tekstkleur (standaard)       |
 | `--dsn-menu-item-background-color`        | Achtergrondkleur (standaard) |

packages/storybook/src/MenuLink.docs.md

@@ -140,6 +140,7 @@ MenuLink gebruikt twee token-sets. De gedeelde `--dsn-menu-item-*` tokens zijn o
 | `--dsn-menu-item-padding-block`           | Verticale padding            |
 | `--dsn-menu-item-padding-inline`          | Horizontale padding          |
 | `--dsn-menu-item-gap`                     | Ruimte tussen icoon en label |
+| `--dsn-menu-item-min-block-size`          | Minimale raakbare hoogte     |
 | `--dsn-menu-item-icon-size`               | Icoongrootte                 |
 | `--dsn-menu-item-color`                   | Tekstkleur (standaard)       |
 | `--dsn-menu-item-background-color`        | Achtergrondkleur (standaard) |