fix(ModalDialog): spacing tokens aanpassen

- header padding-block-start: 3xl (24px) → xl (16px)
- header padding-inline: 3xl (24px) → xl (16px)
- body padding-block: xl (16px) → 3xl (24px)
- body padding-inline: 3xl (24px) → xl (16px)
- footer padding-inline: 3xl (24px) → xl (16px)
- footer padding-block-end: nieuw eigen token (xl, 16px)
  voorheen werd header-padding-block-start hergebruikt

CSS footer gebruikt nu --dsn-modal-dialog-footer-padding-block-end.

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

Author: Jeffrey Lauwers

packages/components-html/src/modal-dialog/modal-dialog.css

@@ -189,7 +189,7 @@
   flex-shrink: 0;
 
   padding-block-start: var(--dsn-modal-dialog-footer-padding-block);
-  padding-block-end: var(--dsn-modal-dialog-header-padding-block-start);
+  padding-block-end: var(--dsn-modal-dialog-footer-padding-block-end);
   padding-inline: var(--dsn-modal-dialog-footer-padding-inline);
 
   /* Scheidingslijn boven de footer */

packages/design-tokens/src/tokens/components/modal-dialog.json

@@ -60,43 +60,48 @@
       },
       "header": {
         "padding-block-start": {
-          "value": "{dsn.space.block.3xl}",
+          "value": "{dsn.space.block.xl}",
           "type": "spacing",
-          "comment": "Bovenkant padding van de header (24px)"
+          "comment": "Bovenkant padding van de header (16px)"
         },
         "padding-block-end": {
           "value": "{dsn.space.block.xl}",
           "type": "spacing",
           "comment": "Onderkant padding van de header (16px)"
         },
         "padding-inline": {
-          "value": "{dsn.space.inline.3xl}",
+          "value": "{dsn.space.inline.xl}",
           "type": "spacing",
-          "comment": "Horizontale padding van de header (24px)"
+          "comment": "Horizontale padding van de header (16px)"
         }
       },
       "body": {
         "padding-block": {
-          "value": "{dsn.space.block.xl}",
+          "value": "{dsn.space.block.3xl}",
           "type": "spacing",
-          "comment": "Verticale padding van de body (16px)"
+          "comment": "Verticale padding van de body (24px)"
         },
         "padding-inline": {
-          "value": "{dsn.space.inline.3xl}",
+          "value": "{dsn.space.inline.xl}",
           "type": "spacing",
-          "comment": "Horizontale padding van de body (24px)"
+          "comment": "Horizontale padding van de body (16px)"
         }
       },
       "footer": {
         "padding-block": {
           "value": "{dsn.space.block.xl}",
           "type": "spacing",
-          "comment": "Verticale padding van de footer (16px)"
+          "comment": "Bovenkant padding van de footer (16px)"
+        },
+        "padding-block-end": {
+          "value": "{dsn.space.block.xl}",
+          "type": "spacing",
+          "comment": "Onderkant padding van de footer (16px)"
         },
         "padding-inline": {
-          "value": "{dsn.space.inline.3xl}",
+          "value": "{dsn.space.inline.xl}",
           "type": "spacing",
-          "comment": "Horizontale padding van de footer (24px)"
+          "comment": "Horizontale padding van de footer (16px)"
         }
       }
     }

packages/storybook/src/ModalDialog.docs.md

@@ -74,13 +74,14 @@ Het ModalDialog component toont een tijdelijk overlay-venster dat de achtergrond
 | `--dsn-modal-dialog-heading-font-size`          | Tekstgrootte van de heading                |
 | `--dsn-modal-dialog-heading-line-height`        | Regelafstand van de heading                |
 | `--dsn-modal-dialog-heading-color`              | Kleur van de heading                       |
-| `--dsn-modal-dialog-header-padding-block-start` | Bovenkant padding van de header (24px)     |
+| `--dsn-modal-dialog-header-padding-block-start` | Bovenkant padding van de header (16px)     |
 | `--dsn-modal-dialog-header-padding-block-end`   | Onderkant padding van de header (16px)     |
-| `--dsn-modal-dialog-header-padding-inline`      | Horizontale padding van de header (24px)   |
-| `--dsn-modal-dialog-body-padding-block`         | Verticale padding van de body (16px)       |
-| `--dsn-modal-dialog-body-padding-inline`        | Horizontale padding van de body (24px)     |
-| `--dsn-modal-dialog-footer-padding-block`       | Verticale padding van de footer (16px)     |
-| `--dsn-modal-dialog-footer-padding-inline`      | Horizontale padding van de footer (24px)   |
+| `--dsn-modal-dialog-header-padding-inline`      | Horizontale padding van de header (16px)   |
+| `--dsn-modal-dialog-body-padding-block`         | Verticale padding van de body (24px)       |
+| `--dsn-modal-dialog-body-padding-inline`        | Horizontale padding van de body (16px)     |
+| `--dsn-modal-dialog-footer-padding-block`       | Bovenkant padding van de footer (16px)     |
+| `--dsn-modal-dialog-footer-padding-block-end`   | Onderkant padding van de footer (16px)     |
+| `--dsn-modal-dialog-footer-padding-inline`      | Horizontale padding van de footer (16px)   |
 
 ## Accessibility