@dsn-starter-kit/design-tokens 3.5.0 → 4.1.0

package/dist/js/start-light-default.js

@@ -2853,136 +2853,136 @@ export default {
         },
         path: ["dsn", "form-control", "border-width"],
       },
-      width: {
+      "inline-size": {
         xs: {
           $value: "10ch",
           $type: "dimension",
           $description:
-            "Extra kleine breedte — voor zeer korte invoervelden (bijv. postcode, jaar, CVV)",
+            "Extra kleine inline-size — voor zeer korte invoervelden (bijv. postcode, jaar, CVV)",
           filePath: "src/tokens/themes/start/base.json",
           isSource: true,
           original: {
             $value: "10ch",
             $type: "dimension",
             $description:
-              "Extra kleine breedte — voor zeer korte invoervelden (bijv. postcode, jaar, CVV)",
+              "Extra kleine inline-size — voor zeer korte invoervelden (bijv. postcode, jaar, CVV)",
           },
-          name: "DsnFormControlWidthXs",
+          name: "DsnFormControlInlineSizeXs",
           attributes: {
             category: "dsn",
             type: "form-control",
-            item: "width",
+            item: "inline-size",
             subitem: "xs",
           },
-          path: ["dsn", "form-control", "width", "xs"],
+          path: ["dsn", "form-control", "inline-size", "xs"],
         },
         sm: {
           $value: "14ch",
           $type: "dimension",
           $description:
-            "Kleine breedte — voor korte invoervelden (bijv. tijd UU:MM, korte codes)",
+            "Kleine inline-size — voor korte invoervelden (bijv. tijd UU:MM, korte codes)",
           filePath: "src/tokens/themes/start/base.json",
           isSource: true,
           original: {
             $value: "14ch",
             $type: "dimension",
             $description:
-              "Kleine breedte — voor korte invoervelden (bijv. tijd UU:MM, korte codes)",
+              "Kleine inline-size — voor korte invoervelden (bijv. tijd UU:MM, korte codes)",
           },
-          name: "DsnFormControlWidthSm",
+          name: "DsnFormControlInlineSizeSm",
           attributes: {
             category: "dsn",
             type: "form-control",
-            item: "width",
+            item: "inline-size",
             subitem: "sm",
           },
-          path: ["dsn", "form-control", "width", "sm"],
+          path: ["dsn", "form-control", "inline-size", "sm"],
         },
         md: {
           $value: "20ch",
           $type: "dimension",
           $description:
-            "Middelgrote breedte — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer)",
+            "Middelgrote inline-size — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer)",
           filePath: "src/tokens/themes/start/base.json",
           isSource: true,
           original: {
             $value: "20ch",
             $type: "dimension",
             $description:
-              "Middelgrote breedte — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer)",
+              "Middelgrote inline-size — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer)",
           },
-          name: "DsnFormControlWidthMd",
+          name: "DsnFormControlInlineSizeMd",
           attributes: {
             category: "dsn",
             type: "form-control",
-            item: "width",
+            item: "inline-size",
             subitem: "md",
           },
-          path: ["dsn", "form-control", "width", "md"],
+          path: ["dsn", "form-control", "inline-size", "md"],
         },
         lg: {
           $value: "32ch",
           $type: "dimension",
           $description:
-            "Grote breedte (standaard) — voor standaard invoervelden (bijv. naam, e-mail)",
+            "Grote inline-size (standaard) — voor standaard invoervelden (bijv. naam, e-mail)",
           filePath: "src/tokens/themes/start/base.json",
           isSource: true,
           original: {
             $value: "32ch",
             $type: "dimension",
             $description:
-              "Grote breedte (standaard) — voor standaard invoervelden (bijv. naam, e-mail)",
+              "Grote inline-size (standaard) — voor standaard invoervelden (bijv. naam, e-mail)",
           },
-          name: "DsnFormControlWidthLg",
+          name: "DsnFormControlInlineSizeLg",
           attributes: {
             category: "dsn",
             type: "form-control",
-            item: "width",
+            item: "inline-size",
             subitem: "lg",
           },
-          path: ["dsn", "form-control", "width", "lg"],
+          path: ["dsn", "form-control", "inline-size", "lg"],
         },
         xl: {
           $value: "48ch",
           $type: "dimension",
           $description:
-            "Extra grote breedte — voor langere invoervelden (bijv. URL)",
+            "Extra grote inline-size — voor langere invoervelden (bijv. URL)",
           filePath: "src/tokens/themes/start/base.json",
           isSource: true,
           original: {
             $value: "48ch",
             $type: "dimension",
             $description:
-              "Extra grote breedte — voor langere invoervelden (bijv. URL)",
+              "Extra grote inline-size — voor langere invoervelden (bijv. URL)",
           },
-          name: "DsnFormControlWidthXl",
+          name: "DsnFormControlInlineSizeXl",
           attributes: {
             category: "dsn",
             type: "form-control",
-            item: "width",
+            item: "inline-size",
             subitem: "xl",
           },
-          path: ["dsn", "form-control", "width", "xl"],
+          path: ["dsn", "form-control", "inline-size", "xl"],
         },
         full: {
           $value: "100%",
           $type: "dimension",
-          $description: "Volledige breedte — responsief aan de container",
+          $description: "Volledige inline-size — responsief aan de container",
           filePath: "src/tokens/themes/start/base.json",
           isSource: true,
           original: {
             $value: "100%",
             $type: "dimension",
-            $description: "Volledige breedte — responsief aan de container",
+            $description: "Volledige inline-size — responsief aan de container",
           },
-          name: "DsnFormControlWidthFull",
+          name: "DsnFormControlInlineSizeFull",
           attributes: {
             category: "dsn",
             type: "form-control",
-            item: "width",
+            item: "inline-size",
             subitem: "full",
           },
-          path: ["dsn", "form-control", "width", "full"],
+          path: ["dsn", "form-control", "inline-size", "full"],
         },
       },
       hover: {
@@ -14019,295 +14019,864 @@ export default {
         },
         path: ["dsn", "card", "box-shadow-hover"],
       },
-      body: {
-        "padding-block": {
+      "min-block-size": {
+        $value: "auto",
+        $type: "sizing",
+        $description: "Minimale hoogte van de card",
+        filePath: "src/tokens/components/card.json",
+        isSource: true,
+        original: {
+          $value: "auto",
+          $type: "sizing",
+          $description: "Minimale hoogte van de card",
+        },
+        name: "DsnCardMinBlockSize",
+        attributes: {
+          category: "dsn",
+          type: "card",
+          item: "min-block-size",
+        },
+        path: ["dsn", "card", "min-block-size"],
+      },
+      "pre-header": {
+        "padding-block-start": {
           $value: "calc(0.5rem * 2)",
           $type: "spacing",
-          $description: "Verticale padding van de card body (16px)",
+          $description:
+            "Bovenkant padding van de pre-header, gelijk aan de header. Media als direct kind bleedt hier doorheen.",
           filePath: "src/tokens/components/card.json",
           isSource: true,
           original: {
-            $value: "{dsn.space.block.xl}",
+            $value: "{dsn.card.header.padding-block-start}",
             $type: "spacing",
-            $description: "Verticale padding van de card body (16px)",
+            $description:
+              "Bovenkant padding van de pre-header, gelijk aan de header. Media als direct kind bleedt hier doorheen.",
           },
-          name: "DsnCardBodyPaddingBlock",
+          name: "DsnCardPreHeaderPaddingBlockStart",
           attributes: {
             category: "dsn",
             type: "card",
-            item: "body",
-            subitem: "padding-block",
+            item: "pre-header",
+            subitem: "padding-block-start",
           },
-          path: ["dsn", "card", "body", "padding-block"],
+          path: ["dsn", "card", "pre-header", "padding-block-start"],
         },
-        "padding-inline": {
+        "padding-block-end": {
+          $value: "calc(0.5rem * 1.5)",
+          $type: "spacing",
+          $description:
+            "Onderkant padding van de pre-header, gelijk aan de header",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.card.header.padding-block-end}",
+            $type: "spacing",
+            $description:
+              "Onderkant padding van de pre-header, gelijk aan de header",
+          },
+          name: "DsnCardPreHeaderPaddingBlockEnd",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "pre-header",
+            subitem: "padding-block-end",
+          },
+          path: ["dsn", "card", "pre-header", "padding-block-end"],
+        },
+        "padding-inline-start": {
           $value: "calc(0.5rem * 2)",
           $type: "spacing",
-          $description: "Horizontale padding van de card body (16px)",
+          $description:
+            "Padding aan de beginzijde van de pre-header, gelijk aan de header",
           filePath: "src/tokens/components/card.json",
           isSource: true,
           original: {
-            $value: "{dsn.space.inline.xl}",
+            $value: "{dsn.card.header.padding-inline-start}",
             $type: "spacing",
-            $description: "Horizontale padding van de card body (16px)",
+            $description:
+              "Padding aan de beginzijde van de pre-header, gelijk aan de header",
           },
-          name: "DsnCardBodyPaddingInline",
+          name: "DsnCardPreHeaderPaddingInlineStart",
           attributes: {
             category: "dsn",
             type: "card",
-            item: "body",
-            subitem: "padding-inline",
+            item: "pre-header",
+            subitem: "padding-inline-start",
           },
-          path: ["dsn", "card", "body", "padding-inline"],
+          path: ["dsn", "card", "pre-header", "padding-inline-start"],
         },
-        "row-gap": {
-          $value: "calc(0.5rem * 1.5)",
+        "padding-inline-end": {
+          $value: "calc(0.5rem * 2)",
           $type: "spacing",
           $description:
-            "Verticale ruimte tussen directe kinderen van de card body (12px)",
+            "Padding aan de eindzijde van de pre-header, gelijk aan de header",
           filePath: "src/tokens/components/card.json",
           isSource: true,
           original: {
-            $value: "{dsn.space.block.lg}",
+            $value: "{dsn.card.header.padding-inline-end}",
             $type: "spacing",
             $description:
-              "Verticale ruimte tussen directe kinderen van de card body (12px)",
+              "Padding aan de eindzijde van de pre-header, gelijk aan de header",
           },
-          name: "DsnCardBodyRowGap",
+          name: "DsnCardPreHeaderPaddingInlineEnd",
           attributes: {
             category: "dsn",
             type: "card",
-            item: "body",
-            subitem: "row-gap",
+            item: "pre-header",
+            subitem: "padding-inline-end",
           },
-          path: ["dsn", "card", "body", "row-gap"],
+          path: ["dsn", "card", "pre-header", "padding-inline-end"],
         },
-      },
-      footer: {
-        "padding-block-end": {
-          $value: "calc(0.5rem * 3)",
+        "row-gap": {
+          $value: "calc(0.5rem * 1.5)",
           $type: "spacing",
-          $description: "Onderkant padding van de card footer (24px)",
+          $description:
+            "Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header",
           filePath: "src/tokens/components/card.json",
           isSource: true,
           original: {
-            $value: "{dsn.space.block.3xl}",
+            $value: "{dsn.card.header.row-gap}",
             $type: "spacing",
-            $description: "Onderkant padding van de card footer (24px)",
+            $description:
+              "Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header",
           },
-          name: "DsnCardFooterPaddingBlockEnd",
+          name: "DsnCardPreHeaderRowGap",
           attributes: {
             category: "dsn",
             type: "card",
-            item: "footer",
-            subitem: "padding-block-end",
+            item: "pre-header",
+            subitem: "row-gap",
           },
-          path: ["dsn", "card", "footer", "padding-block-end"],
+          path: ["dsn", "card", "pre-header", "row-gap"],
         },
-        "padding-inline": {
+      },
+      header: {
+        "padding-block-start": {
           $value: "calc(0.5rem * 2)",
           $type: "spacing",
-          $description: "Horizontale padding van de card footer (16px)",
+          $description: "Bovenkant padding van de header (16px)",
           filePath: "src/tokens/components/card.json",
           isSource: true,
           original: {
-            $value: "{dsn.space.inline.xl}",
+            $value: "{dsn.space.block.xl}",
             $type: "spacing",
-            $description: "Horizontale padding van de card footer (16px)",
+            $description: "Bovenkant padding van de header (16px)",
           },
-          name: "DsnCardFooterPaddingInline",
+          name: "DsnCardHeaderPaddingBlockStart",
           attributes: {
             category: "dsn",
             type: "card",
-            item: "footer",
-            subitem: "padding-inline",
+            item: "header",
+            subitem: "padding-block-start",
           },
-          path: ["dsn", "card", "footer", "padding-inline"],
+          path: ["dsn", "card", "header", "padding-block-start"],
         },
-      },
-      "image-placeholder": {
-        "background-color": {
-          $value: "#f6f6f6",
-          $type: "color",
-          $description: "Achtergrondkleur van de afbeeldingsplaceholder",
+        "padding-block-end": {
+          $value: "calc(0.5rem * 1.5)",
+          $type: "spacing",
+          $description:
+            "Onderkant padding van de header (12px); ook de ruimte naar de body",
           filePath: "src/tokens/components/card.json",
           isSource: true,
           original: {
-            $value: "{dsn.color.neutral.bg-subtle}",
-            $type: "color",
-            $description: "Achtergrondkleur van de afbeeldingsplaceholder",
+            $value: "{dsn.space.block.lg}",
+            $type: "spacing",
+            $description:
+              "Onderkant padding van de header (12px); ook de ruimte naar de body",
           },
-          name: "DsnCardImagePlaceholderBackgroundColor",
+          name: "DsnCardHeaderPaddingBlockEnd",
           attributes: {
             category: "dsn",
             type: "card",
-            item: "image-placeholder",
-            subitem: "background-color",
+            item: "header",
+            subitem: "padding-block-end",
           },
-          path: ["dsn", "card", "image-placeholder", "background-color"],
+          path: ["dsn", "card", "header", "padding-block-end"],
         },
-        color: {
-          $value: "#636363",
-          $type: "color",
-          $description: "Kleur van het icoon in de afbeeldingsplaceholder",
+        "padding-inline-start": {
+          $value: "calc(0.5rem * 2)",
+          $type: "spacing",
+          $description: "Padding aan de beginzijde van de header (16px)",
           filePath: "src/tokens/components/card.json",
           isSource: true,
           original: {
-            $value: "{dsn.color.neutral.color-subtle}",
-            $type: "color",
-            $description: "Kleur van het icoon in de afbeeldingsplaceholder",
+            $value: "{dsn.space.inline.xl}",
+            $type: "spacing",
+            $description: "Padding aan de beginzijde van de header (16px)",
           },
-          name: "DsnCardImagePlaceholderColor",
+          name: "DsnCardHeaderPaddingInlineStart",
           attributes: {
             category: "dsn",
             type: "card",
-            item: "image-placeholder",
-            subitem: "color",
+            item: "header",
+            subitem: "padding-inline-start",
           },
-          path: ["dsn", "card", "image-placeholder", "color"],
+          path: ["dsn", "card", "header", "padding-inline-start"],
         },
-      },
-      heading: {
-        "font-family": {
-          $value: "IBM Plex Sans, sans-serif",
-          $type: "fontFamily",
-          $description: "Lettertype van de card heading",
+        "padding-inline-end": {
+          $value: "calc(0.5rem * 2)",
+          $type: "spacing",
+          $description: "Padding aan de eindzijde van de header (16px)",
           filePath: "src/tokens/components/card.json",
           isSource: true,
           original: {
-            $value: "{dsn.heading.font-family}",
-            $type: "fontFamily",
-            $description: "Lettertype van de card heading",
+            $value: "{dsn.space.inline.xl}",
+            $type: "spacing",
+            $description: "Padding aan de eindzijde van de header (16px)",
           },
-          name: "DsnCardHeadingFontFamily",
+          name: "DsnCardHeaderPaddingInlineEnd",
           attributes: {
             category: "dsn",
             type: "card",
-            item: "heading",
-            subitem: "font-family",
+            item: "header",
+            subitem: "padding-inline-end",
           },
-          path: ["dsn", "card", "heading", "font-family"],
+          path: ["dsn", "card", "header", "padding-inline-end"],
         },
-        "font-weight": {
-          $value: "700",
-          $type: "fontWeight",
-          $description: "Vetgedrukt van de card heading",
+        "row-gap": {
+          $value: "calc(0.5rem * 1.5)",
+          $type: "spacing",
+          $description:
+            "Verticale ruimte tussen directe kinderen van de header (12px)",
           filePath: "src/tokens/components/card.json",
           isSource: true,
           original: {
-            $value: "{dsn.heading.font-weight}",
-            $type: "fontWeight",
-            $description: "Vetgedrukt van de card heading",
+            $value: "{dsn.space.block.lg}",
+            $type: "spacing",
+            $description:
+              "Verticale ruimte tussen directe kinderen van de header (12px)",
           },
-          name: "DsnCardHeadingFontWeight",
+          name: "DsnCardHeaderRowGap",
           attributes: {
             category: "dsn",
             type: "card",
-            item: "heading",
-            subitem: "font-weight",
+            item: "header",
+            subitem: "row-gap",
           },
-          path: ["dsn", "card", "heading", "font-weight"],
+          path: ["dsn", "card", "header", "row-gap"],
         },
-        color: {
-          $value: "#1b1b1b",
-          $type: "color",
-          $description: "Kleur van de card heading",
+      },
+      body: {
+        "padding-block-start": {
+          $value: "0",
+          $type: "spacing",
+          $description:
+            "Bovenkant padding van de body; de header levert de ruimte erboven",
           filePath: "src/tokens/components/card.json",
           isSource: true,
           original: {
-            $value: "{dsn.heading.color}",
-            $type: "color",
-            $description: "Kleur van de card heading",
+            $value: "0",
+            $type: "spacing",
+            $description:
+              "Bovenkant padding van de body; de header levert de ruimte erboven",
           },
-          name: "DsnCardHeadingColor",
+          name: "DsnCardBodyPaddingBlockStart",
           attributes: {
             category: "dsn",
             type: "card",
-            item: "heading",
-            subitem: "color",
+            item: "body",
+            subitem: "padding-block-start",
           },
-          path: ["dsn", "card", "heading", "color"],
+          path: ["dsn", "card", "body", "padding-block-start"],
         },
-        "font-size": {
-          $value: "clamp(1.25rem, 1.125rem + 0.375vw, 1.53125rem)",
-          $type: "fontSize",
-          $description: "Tekstgrootte van de card heading (20–24px fluid)",
+        "padding-block-end": {
+          $value: "calc(0.5rem * 2)",
+          $type: "spacing",
+          $description: "Onderkant padding van de body (16px)",
           filePath: "src/tokens/components/card.json",
           isSource: true,
           original: {
-            $value: "{dsn.text.font-size.lg}",
-            $type: "fontSize",
-            $description: "Tekstgrootte van de card heading (20–24px fluid)",
+            $value: "{dsn.space.block.xl}",
+            $type: "spacing",
+            $description: "Onderkant padding van de body (16px)",
           },
-          name: "DsnCardHeadingFontSize",
+          name: "DsnCardBodyPaddingBlockEnd",
           attributes: {
             category: "dsn",
             type: "card",
-            item: "heading",
-            subitem: "font-size",
+            item: "body",
+            subitem: "padding-block-end",
           },
-          path: ["dsn", "card", "heading", "font-size"],
+          path: ["dsn", "card", "body", "padding-block-end"],
         },
-        "line-height": {
-          $value: "1.25",
-          $type: "lineHeight",
-          $description: "Regelafstand van de card heading",
+        "padding-inline-start": {
+          $value: "calc(0.5rem * 2)",
+          $type: "spacing",
+          $description: "Padding aan de beginzijde van de body (16px)",
           filePath: "src/tokens/components/card.json",
           isSource: true,
           original: {
-            $value: "{dsn.text.line-height.lg}",
-            $type: "lineHeight",
-            $description: "Regelafstand van de card heading",
+            $value: "{dsn.space.inline.xl}",
+            $type: "spacing",
+            $description: "Padding aan de beginzijde van de body (16px)",
           },
-          name: "DsnCardHeadingLineHeight",
+          name: "DsnCardBodyPaddingInlineStart",
           attributes: {
             category: "dsn",
             type: "card",
-            item: "heading",
-            subitem: "line-height",
+            item: "body",
+            subitem: "padding-inline-start",
           },
-          path: ["dsn", "card", "heading", "line-height"],
+          path: ["dsn", "card", "body", "padding-inline-start"],
         },
-      },
-      group: {
-        gap: {
+        "padding-inline-end": {
           $value: "calc(0.5rem * 2)",
           $type: "spacing",
-          $description: "Ruimte tussen cards in een CardGroup (16px)",
+          $description: "Padding aan de eindzijde van de body (16px)",
           filePath: "src/tokens/components/card.json",
           isSource: true,
           original: {
             $value: "{dsn.space.inline.xl}",
             $type: "spacing",
-            $description: "Ruimte tussen cards in een CardGroup (16px)",
+            $description: "Padding aan de eindzijde van de body (16px)",
           },
-          name: "DsnCardGroupGap",
+          name: "DsnCardBodyPaddingInlineEnd",
           attributes: {
             category: "dsn",
             type: "card",
-            item: "group",
-            subitem: "gap",
+            item: "body",
+            subitem: "padding-inline-end",
           },
-          path: ["dsn", "card", "group", "gap"],
+          path: ["dsn", "card", "body", "padding-inline-end"],
         },
-        "item-min-width": {
-          $value: "17.5rem",
-          $type: "dimension",
+        "row-gap": {
+          $value: "calc(0.5rem * 1.5)",
+          $type: "spacing",
           $description:
-            "Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill",
+            "Verticale ruimte tussen directe kinderen van de body (12px)",
           filePath: "src/tokens/components/card.json",
           isSource: true,
           original: {
-            $value: "17.5rem",
-            $type: "dimension",
+            $value: "{dsn.space.block.lg}",
+            $type: "spacing",
             $description:
-              "Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill",
+              "Verticale ruimte tussen directe kinderen van de body (12px)",
           },
-          name: "DsnCardGroupItemMinWidth",
+          name: "DsnCardBodyRowGap",
           attributes: {
             category: "dsn",
             type: "card",
-            item: "group",
+            item: "body",
+            subitem: "row-gap",
+          },
+          path: ["dsn", "card", "body", "row-gap"],
+        },
+      },
+      footer: {
+        "padding-block-start": {
+          $value: "0",
+          $type: "spacing",
+          $description:
+            "Bovenkant padding van de footer; de sectie erboven levert de ruimte",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "0",
+            $type: "spacing",
+            $description:
+              "Bovenkant padding van de footer; de sectie erboven levert de ruimte",
+          },
+          name: "DsnCardFooterPaddingBlockStart",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "footer",
+            subitem: "padding-block-start",
+          },
+          path: ["dsn", "card", "footer", "padding-block-start"],
+        },
+        "padding-block-end": {
+          $value: "calc(0.5rem * 3)",
+          $type: "spacing",
+          $description: "Onderkant padding van de footer (24px)",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.space.block.3xl}",
+            $type: "spacing",
+            $description: "Onderkant padding van de footer (24px)",
+          },
+          name: "DsnCardFooterPaddingBlockEnd",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "footer",
+            subitem: "padding-block-end",
+          },
+          path: ["dsn", "card", "footer", "padding-block-end"],
+        },
+        "padding-inline-start": {
+          $value: "calc(0.5rem * 2)",
+          $type: "spacing",
+          $description: "Padding aan de beginzijde van de footer (16px)",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.space.inline.xl}",
+            $type: "spacing",
+            $description: "Padding aan de beginzijde van de footer (16px)",
+          },
+          name: "DsnCardFooterPaddingInlineStart",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "footer",
+            subitem: "padding-inline-start",
+          },
+          path: ["dsn", "card", "footer", "padding-inline-start"],
+        },
+        "padding-inline-end": {
+          $value: "calc(0.5rem * 2)",
+          $type: "spacing",
+          $description: "Padding aan de eindzijde van de footer (16px)",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.space.inline.xl}",
+            $type: "spacing",
+            $description: "Padding aan de eindzijde van de footer (16px)",
+          },
+          name: "DsnCardFooterPaddingInlineEnd",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "footer",
+            subitem: "padding-inline-end",
+          },
+          path: ["dsn", "card", "footer", "padding-inline-end"],
+        },
+        "column-gap": {
+          $value: "calc(0.5rem * 1)",
+          $type: "spacing",
+          $description:
+            "Horizontale ruimte tussen directe kinderen van de footer",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.space.inline.md}",
+            $type: "spacing",
+            $description:
+              "Horizontale ruimte tussen directe kinderen van de footer",
+          },
+          name: "DsnCardFooterColumnGap",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "footer",
+            subitem: "column-gap",
+          },
+          path: ["dsn", "card", "footer", "column-gap"],
+        },
+      },
+      "image-placeholder": {
+        "background-color": {
+          $value: "#f6f6f6",
+          $type: "color",
+          $description: "Achtergrondkleur van de afbeeldingsplaceholder",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.color.neutral.bg-subtle}",
+            $type: "color",
+            $description: "Achtergrondkleur van de afbeeldingsplaceholder",
+          },
+          name: "DsnCardImagePlaceholderBackgroundColor",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "image-placeholder",
+            subitem: "background-color",
+          },
+          path: ["dsn", "card", "image-placeholder", "background-color"],
+        },
+        color: {
+          $value: "#636363",
+          $type: "color",
+          $description: "Kleur van het icoon in de afbeeldingsplaceholder",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.color.neutral.color-subtle}",
+            $type: "color",
+            $description: "Kleur van het icoon in de afbeeldingsplaceholder",
+          },
+          name: "DsnCardImagePlaceholderColor",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "image-placeholder",
+            subitem: "color",
+          },
+          path: ["dsn", "card", "image-placeholder", "color"],
+        },
+      },
+      heading: {
+        "font-family": {
+          $value: "IBM Plex Sans, sans-serif",
+          $type: "fontFamily",
+          $description: "Lettertype van de card heading",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.heading.font-family}",
+            $type: "fontFamily",
+            $description: "Lettertype van de card heading",
+          },
+          name: "DsnCardHeadingFontFamily",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "heading",
+            subitem: "font-family",
+          },
+          path: ["dsn", "card", "heading", "font-family"],
+        },
+        "font-weight": {
+          $value: "700",
+          $type: "fontWeight",
+          $description: "Vetgedrukt van de card heading",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.heading.font-weight}",
+            $type: "fontWeight",
+            $description: "Vetgedrukt van de card heading",
+          },
+          name: "DsnCardHeadingFontWeight",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "heading",
+            subitem: "font-weight",
+          },
+          path: ["dsn", "card", "heading", "font-weight"],
+        },
+        color: {
+          $value: "#1b1b1b",
+          $type: "color",
+          $description: "Kleur van de card heading",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.heading.color}",
+            $type: "color",
+            $description: "Kleur van de card heading",
+          },
+          name: "DsnCardHeadingColor",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "heading",
+            subitem: "color",
+          },
+          path: ["dsn", "card", "heading", "color"],
+        },
+        "font-size": {
+          $value: "clamp(1.25rem, 1.125rem + 0.375vw, 1.53125rem)",
+          $type: "fontSize",
+          $description: "Tekstgrootte van de card heading (20–24px fluid)",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.text.font-size.lg}",
+            $type: "fontSize",
+            $description: "Tekstgrootte van de card heading (20–24px fluid)",
+          },
+          name: "DsnCardHeadingFontSize",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "heading",
+            subitem: "font-size",
+          },
+          path: ["dsn", "card", "heading", "font-size"],
+        },
+        "line-height": {
+          $value: "1.25",
+          $type: "lineHeight",
+          $description: "Regelafstand van de card heading",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.text.line-height.lg}",
+            $type: "lineHeight",
+            $description: "Regelafstand van de card heading",
+          },
+          name: "DsnCardHeadingLineHeight",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "heading",
+            subitem: "line-height",
+          },
+          path: ["dsn", "card", "heading", "line-height"],
+        },
+      },
+      label: {
+        color: {
+          $value: "#1b1b1b",
+          $type: "color",
+          $description: "Kleur van het card-label",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.color.neutral.color-document}",
+            $type: "color",
+            $description: "Kleur van het card-label",
+          },
+          name: "DsnCardLabelColor",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "label",
+            subitem: "color",
+          },
+          path: ["dsn", "card", "label", "color"],
+        },
+        "font-family": {
+          $value: "IBM Plex Sans, sans-serif",
+          $type: "fontFamily",
+          $description: "Lettertype van het card-label",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.text.font-family.default}",
+            $type: "fontFamily",
+            $description: "Lettertype van het card-label",
+          },
+          name: "DsnCardLabelFontFamily",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "label",
+            subitem: "font-family",
+          },
+          path: ["dsn", "card", "label", "font-family"],
+        },
+        "font-size": {
+          $value: "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+          $type: "fontSize",
+          $description: "Tekstgrootte van het card-label",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.text.font-size.md}",
+            $type: "fontSize",
+            $description: "Tekstgrootte van het card-label",
+          },
+          name: "DsnCardLabelFontSize",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "label",
+            subitem: "font-size",
+          },
+          path: ["dsn", "card", "label", "font-size"],
+        },
+        "font-weight": {
+          $value: "700",
+          $type: "fontWeight",
+          $description: "Gewicht van het card-label",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.text.font-weight.bold}",
+            $type: "fontWeight",
+            $description: "Gewicht van het card-label",
+          },
+          name: "DsnCardLabelFontWeight",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "label",
+            subitem: "font-weight",
+          },
+          path: ["dsn", "card", "label", "font-weight"],
+        },
+        "line-height": {
+          $value: "1.5",
+          $type: "lineHeight",
+          $description: "Regelafstand van het card-label",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.text.line-height.md}",
+            $type: "lineHeight",
+            $description: "Regelafstand van het card-label",
+          },
+          name: "DsnCardLabelLineHeight",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "label",
+            subitem: "line-height",
+          },
+          path: ["dsn", "card", "label", "line-height"],
+        },
+      },
+      description: {
+        color: {
+          $value: "#1b1b1b",
+          $type: "color",
+          $description: "Kleur van de card-description",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.color.neutral.color-document}",
+            $type: "color",
+            $description: "Kleur van de card-description",
+          },
+          name: "DsnCardDescriptionColor",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "description",
+            subitem: "color",
+          },
+          path: ["dsn", "card", "description", "color"],
+        },
+        "font-size": {
+          $value: "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+          $type: "fontSize",
+          $description: "Tekstgrootte van de card-description",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.text.font-size.md}",
+            $type: "fontSize",
+            $description: "Tekstgrootte van de card-description",
+          },
+          name: "DsnCardDescriptionFontSize",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "description",
+            subitem: "font-size",
+          },
+          path: ["dsn", "card", "description", "font-size"],
+        },
+        "line-height": {
+          $value: "1.5",
+          $type: "lineHeight",
+          $description: "Regelafstand van de card-description",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.text.line-height.md}",
+            $type: "lineHeight",
+            $description: "Regelafstand van de card-description",
+          },
+          name: "DsnCardDescriptionLineHeight",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "description",
+            subitem: "line-height",
+          },
+          path: ["dsn", "card", "description", "line-height"],
+        },
+      },
+      meta: {
+        color: {
+          $value: "#636363",
+          $type: "color",
+          $description: "Kleur van de card-meta (bijv. datum)",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.color.neutral.color-subtle}",
+            $type: "color",
+            $description: "Kleur van de card-meta (bijv. datum)",
+          },
+          name: "DsnCardMetaColor",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "meta",
+            subitem: "color",
+          },
+          path: ["dsn", "card", "meta", "color"],
+        },
+        "font-size": {
+          $value: "clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem)",
+          $type: "fontSize",
+          $description: "Tekstgrootte van de card-meta",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.text.font-size.sm}",
+            $type: "fontSize",
+            $description: "Tekstgrootte van de card-meta",
+          },
+          name: "DsnCardMetaFontSize",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "meta",
+            subitem: "font-size",
+          },
+          path: ["dsn", "card", "meta", "font-size"],
+        },
+        "line-height": {
+          $value: "1.5",
+          $type: "lineHeight",
+          $description: "Regelafstand van de card-meta",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.text.line-height.sm}",
+            $type: "lineHeight",
+            $description: "Regelafstand van de card-meta",
+          },
+          name: "DsnCardMetaLineHeight",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "meta",
+            subitem: "line-height",
+          },
+          path: ["dsn", "card", "meta", "line-height"],
+        },
+      },
+      group: {
+        gap: {
+          $value: "calc(0.5rem * 2)",
+          $type: "spacing",
+          $description: "Ruimte tussen cards in een CardGroup (16px)",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.space.inline.xl}",
+            $type: "spacing",
+            $description: "Ruimte tussen cards in een CardGroup (16px)",
+          },
+          name: "DsnCardGroupGap",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "group",
+            subitem: "gap",
+          },
+          path: ["dsn", "card", "group", "gap"],
+        },
+        "item-min-width": {
+          $value: "17.5rem",
+          $type: "dimension",
+          $description:
+            "Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill",
+          filePath: "src/tokens/components/card.json",
+          isSource: true,
+          original: {
+            $value: "17.5rem",
+            $type: "dimension",
+            $description:
+              "Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill",
+          },
+          name: "DsnCardGroupItemMinWidth",
+          attributes: {
+            category: "dsn",
+            type: "card",
+            item: "group",
             subitem: "item-min-width",
           },
           path: ["dsn", "card", "group", "item-min-width"],
@@ -19649,6 +20218,47 @@ export default {
         },
         path: ["dsn", "menu-item", "background-color"],
       },
+      "indicator-width": {
+        $value: "3px",
+        $type: "dimension",
+        $description:
+          "Gedeeld: dikte van de indicator (border-inline-start, of border-block-end in een horizontaal Menu). Altijd aanwezig zodat hover en current niet verspringen",
+        filePath: "src/tokens/components/menu-item.json",
+        isSource: true,
+        original: {
+          $value: "3px",
+          $type: "dimension",
+          $description:
+            "Gedeeld: dikte van de indicator (border-inline-start, of border-block-end in een horizontaal Menu). Altijd aanwezig zodat hover en current niet verspringen",
+        },
+        name: "DsnMenuItemIndicatorWidth",
+        attributes: {
+          category: "dsn",
+          type: "menu-item",
+          item: "indicator-width",
+        },
+        path: ["dsn", "menu-item", "indicator-width"],
+      },
+      "indicator-color": {
+        $value: "#00000000",
+        $type: "color",
+        $description: "Gedeeld: standaard kleur van de indicator, onzichtbaar",
+        filePath: "src/tokens/components/menu-item.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.color.transparent}",
+          $type: "color",
+          $description:
+            "Gedeeld: standaard kleur van de indicator, onzichtbaar",
+        },
+        name: "DsnMenuItemIndicatorColor",
+        attributes: {
+          category: "dsn",
+          type: "menu-item",
+          item: "indicator-color",
+        },
+        path: ["dsn", "menu-item", "indicator-color"],
+      },
       hover: {
         color: {
           $value: "#04499a",
@@ -19690,6 +20300,26 @@ export default {
           },
           path: ["dsn", "menu-item", "hover", "background-color"],
         },
+        "indicator-color": {
+          $value: "#04499a",
+          $type: "color",
+          $description: "Gedeeld: hover kleur van de indicator",
+          filePath: "src/tokens/components/menu-item.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.color.action-2.color-hover}",
+            $type: "color",
+            $description: "Gedeeld: hover kleur van de indicator",
+          },
+          name: "DsnMenuItemHoverIndicatorColor",
+          attributes: {
+            category: "dsn",
+            type: "menu-item",
+            item: "hover",
+            subitem: "indicator-color",
+          },
+          path: ["dsn", "menu-item", "hover", "indicator-color"],
+        },
       },
       active: {
         color: {
@@ -19732,6 +20362,26 @@ export default {
           },
           path: ["dsn", "menu-item", "active", "background-color"],
         },
+        "indicator-color": {
+          $value: "#003b81",
+          $type: "color",
+          $description: "Gedeeld: active kleur van de indicator",
+          filePath: "src/tokens/components/menu-item.json",
+          isSource: true,
+          original: {
+            $value: "{dsn.color.action-2.color-active}",
+            $type: "color",
+            $description: "Gedeeld: active kleur van de indicator",
+          },
+          name: "DsnMenuItemActiveIndicatorColor",
+          attributes: {
+            category: "dsn",
+            type: "menu-item",
+            item: "active",
+            subitem: "indicator-color",
+          },
+          path: ["dsn", "menu-item", "active", "indicator-color"],
+        },
       },
     },
     "menu-link": {
@@ -19827,14 +20477,14 @@ export default {
           $value: "#1b59a4",
           $type: "color",
           $description:
-            "MenuLink-specifiek: kleur van de border-inline-start indicator",
+            "MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina",
           filePath: "src/tokens/components/menu-link.json",
           isSource: true,
           original: {
             $value: "{dsn.color.action-2.color-default}",
             $type: "color",
             $description:
-              "MenuLink-specifiek: kleur van de border-inline-start indicator",
+              "MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina",
           },
           name: "DsnMenuLinkCurrentIndicatorColor",
           attributes: {
@@ -19845,28 +20495,6 @@ export default {
           },
           path: ["dsn", "menu-link", "current", "indicator-color"],
         },
-        "indicator-width": {
-          $value: "3px",
-          $type: "dimension",
-          $description:
-            "MenuLink-specifiek: breedte van de border-inline-start indicator",
-          filePath: "src/tokens/components/menu-link.json",
-          isSource: true,
-          original: {
-            $value: "3px",
-            $type: "dimension",
-            $description:
-              "MenuLink-specifiek: breedte van de border-inline-start indicator",
-          },
-          name: "DsnMenuLinkCurrentIndicatorWidth",
-          attributes: {
-            category: "dsn",
-            type: "menu-link",
-            item: "current",
-            subitem: "indicator-width",
-          },
-          path: ["dsn", "menu-link", "current", "indicator-width"],
-        },
         hover: {
           color: {
             $value: "#1b59a4",
@@ -22527,6 +23155,211 @@ export default {
         path: ["dsn", "password-input", "padding-inline-end"],
       },
     },
+    "popover-menu": {
+      "background-color": {
+        $value: "#fcfcfc",
+        $type: "color",
+        $description:
+          "Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.background-color}",
+          $type: "color",
+          $description:
+            "Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen",
+        },
+        name: "DsnPopoverMenuBackgroundColor",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "background-color",
+        },
+        path: ["dsn", "popover-menu", "background-color"],
+      },
+      "border-width": {
+        $value: "1px",
+        $type: "borderWidth",
+        $description: "Randbreedte van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.border-width}",
+          $type: "borderWidth",
+          $description: "Randbreedte van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuBorderWidth",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "border-width",
+        },
+        path: ["dsn", "popover-menu", "border-width"],
+      },
+      "border-color": {
+        $value: "#c4c4c4",
+        $type: "color",
+        $description: "Randkleur van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.border-color}",
+          $type: "color",
+          $description: "Randkleur van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuBorderColor",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "border-color",
+        },
+        path: ["dsn", "popover-menu", "border-color"],
+      },
+      "border-radius": {
+        $value: "8px",
+        $type: "dimension",
+        $description:
+          "Afgeronde hoeken van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.border-radius}",
+          $type: "dimension",
+          $description:
+            "Afgeronde hoeken van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuBorderRadius",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "border-radius",
+        },
+        path: ["dsn", "popover-menu", "border-radius"],
+      },
+      "box-shadow": {
+        $value:
+          "0 2px 4px 0 color-mix(in srgb, black 12%, transparent), 0 8px 16px 0 color-mix(in srgb, black 6%, transparent), 0 0 0 1px #00000000",
+        $type: "shadow",
+        $description: "Schaduw van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.box-shadow}",
+          $type: "shadow",
+          $description: "Schaduw van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuBoxShadow",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "box-shadow",
+        },
+        path: ["dsn", "popover-menu", "box-shadow"],
+      },
+      "min-width": {
+        $value: "12.5rem",
+        $type: "dimension",
+        $description:
+          "Minimale breedte van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.min-width}",
+          $type: "dimension",
+          $description:
+            "Minimale breedte van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuMinWidth",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "min-width",
+        },
+        path: ["dsn", "popover-menu", "min-width"],
+      },
+      "max-width": {
+        $value: "25rem",
+        $type: "dimension",
+        $description:
+          "Maximale breedte van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.max-width}",
+          $type: "dimension",
+          $description:
+            "Maximale breedte van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuMaxWidth",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "max-width",
+        },
+        path: ["dsn", "popover-menu", "max-width"],
+      },
+      "z-index": {
+        $value: "350",
+        $type: "number",
+        $description: "Z-index van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.z-index}",
+          $type: "number",
+          $description: "Z-index van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuZIndex",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "z-index",
+        },
+        path: ["dsn", "popover-menu", "z-index"],
+      },
+      "padding-block": {
+        $value: "calc(0.5rem * 2)",
+        $type: "spacing",
+        $description:
+          "Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.body.padding-block}",
+          $type: "spacing",
+          $description:
+            "Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben",
+        },
+        name: "DsnPopoverMenuPaddingBlock",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "padding-block",
+        },
+        path: ["dsn", "popover-menu", "padding-block"],
+      },
+      "padding-inline": {
+        $value: "calc(0.5rem * 2)",
+        $type: "spacing",
+        $description:
+          "Horizontale padding rond de lijst: delegeert naar de Popover-body",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.body.padding-inline}",
+          $type: "spacing",
+          $description:
+            "Horizontale padding rond de lijst: delegeert naar de Popover-body",
+        },
+        name: "DsnPopoverMenuPaddingInline",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "padding-inline",
+        },
+        path: ["dsn", "popover-menu", "padding-inline"],
+      },
+    },
     popover: {
       "background-color": {
         $value: "#fcfcfc",
@@ -28300,12 +29133,12 @@ export const DsnFormControlPaddingInlineEnd = "calc(0.5rem * 1.5)";
 export const DsnFormControlMaxInlineSize = "25rem";
 export const DsnFormControlBorderRadius = "0px";
 export const DsnFormControlBorderWidth = "1px";
-export const DsnFormControlWidthXs = "10ch";
-export const DsnFormControlWidthSm = "14ch";
-export const DsnFormControlWidthMd = "20ch";
-export const DsnFormControlWidthLg = "32ch";
-export const DsnFormControlWidthXl = "48ch";
-export const DsnFormControlWidthFull = "100%";
+export const DsnFormControlInlineSizeXs = "10ch";
+export const DsnFormControlInlineSizeSm = "14ch";
+export const DsnFormControlInlineSizeMd = "20ch";
+export const DsnFormControlInlineSizeLg = "32ch";
+export const DsnFormControlInlineSizeXl = "48ch";
+export const DsnFormControlInlineSizeFull = "100%";
 export const DsnFormControlHoverBorderWidth = "2px";
 export const DsnFormControlHoverAccentColor = "#04499a";
 export const DsnFormControlHoverBackgroundColor = "#ebebeb";
@@ -28831,11 +29664,27 @@ export const DsnCardBorderWidth = "1px";
 export const DsnCardBorderColor = "#c4c4c4";
 export const DsnCardBoxShadow = "none";
 export const DsnCardBoxShadowHover = "0 2px 4px 0 color-mix(in srgb, black 12%, transparent), 0 8px 16px 0 color-mix(in srgb, black 6%, transparent), 0 0 0 1px #00000000";
-export const DsnCardBodyPaddingBlock = "calc(0.5rem * 2)";
-export const DsnCardBodyPaddingInline = "calc(0.5rem * 2)";
+export const DsnCardMinBlockSize = "auto";
+export const DsnCardPreHeaderPaddingBlockStart = "calc(0.5rem * 2)";
+export const DsnCardPreHeaderPaddingBlockEnd = "calc(0.5rem * 1.5)";
+export const DsnCardPreHeaderPaddingInlineStart = "calc(0.5rem * 2)";
+export const DsnCardPreHeaderPaddingInlineEnd = "calc(0.5rem * 2)";
+export const DsnCardPreHeaderRowGap = "calc(0.5rem * 1.5)";
+export const DsnCardHeaderPaddingBlockStart = "calc(0.5rem * 2)";
+export const DsnCardHeaderPaddingBlockEnd = "calc(0.5rem * 1.5)";
+export const DsnCardHeaderPaddingInlineStart = "calc(0.5rem * 2)";
+export const DsnCardHeaderPaddingInlineEnd = "calc(0.5rem * 2)";
+export const DsnCardHeaderRowGap = "calc(0.5rem * 1.5)";
+export const DsnCardBodyPaddingBlockStart = "0";
+export const DsnCardBodyPaddingBlockEnd = "calc(0.5rem * 2)";
+export const DsnCardBodyPaddingInlineStart = "calc(0.5rem * 2)";
+export const DsnCardBodyPaddingInlineEnd = "calc(0.5rem * 2)";
 export const DsnCardBodyRowGap = "calc(0.5rem * 1.5)";
+export const DsnCardFooterPaddingBlockStart = "0";
 export const DsnCardFooterPaddingBlockEnd = "calc(0.5rem * 3)";
-export const DsnCardFooterPaddingInline = "calc(0.5rem * 2)";
+export const DsnCardFooterPaddingInlineStart = "calc(0.5rem * 2)";
+export const DsnCardFooterPaddingInlineEnd = "calc(0.5rem * 2)";
+export const DsnCardFooterColumnGap = "calc(0.5rem * 1)";
 export const DsnCardImagePlaceholderBackgroundColor = "#f6f6f6";
 export const DsnCardImagePlaceholderColor = "#636363";
 export const DsnCardHeadingFontFamily = "IBM Plex Sans, sans-serif";
@@ -28843,6 +29692,17 @@ export const DsnCardHeadingFontWeight = "700";
 export const DsnCardHeadingColor = "#1b1b1b";
 export const DsnCardHeadingFontSize = "clamp(1.25rem, 1.125rem + 0.375vw, 1.53125rem)";
 export const DsnCardHeadingLineHeight = "1.25";
+export const DsnCardLabelColor = "#1b1b1b";
+export const DsnCardLabelFontFamily = "IBM Plex Sans, sans-serif";
+export const DsnCardLabelFontSize = "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)";
+export const DsnCardLabelFontWeight = "700";
+export const DsnCardLabelLineHeight = "1.5";
+export const DsnCardDescriptionColor = "#1b1b1b";
+export const DsnCardDescriptionFontSize = "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)";
+export const DsnCardDescriptionLineHeight = "1.5";
+export const DsnCardMetaColor = "#636363";
+export const DsnCardMetaFontSize = "clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem)";
+export const DsnCardMetaLineHeight = "1.5";
 export const DsnCardGroupGap = "calc(0.5rem * 2)";
 export const DsnCardGroupItemMinWidth = "17.5rem";
 export const DsnCheckboxGroupBorderWidth = "0px";
@@ -29111,16 +29971,19 @@ export const DsnMenuItemMinBlockSize = "3rem";
 export const DsnMenuItemIconSize = "calc(clamp(1rem, 0.875rem + 0.375vw, 1.28125rem) * 1.5)";
 export const DsnMenuItemColor = "#1b59a4";
 export const DsnMenuItemBackgroundColor = "#00000000";
+export const DsnMenuItemIndicatorWidth = "3px";
+export const DsnMenuItemIndicatorColor = "#00000000";
 export const DsnMenuItemHoverColor = "#04499a";
 export const DsnMenuItemHoverBackgroundColor = "#e4ecf4";
+export const DsnMenuItemHoverIndicatorColor = "#04499a";
 export const DsnMenuItemActiveColor = "#003b81";
 export const DsnMenuItemActiveBackgroundColor = "#dde6f1";
+export const DsnMenuItemActiveIndicatorColor = "#003b81";
 export const DsnMenuLinkLevelIndent = "calc(0.5rem * 3)";
 export const DsnMenuLinkCurrentFontWeight = "700";
 export const DsnMenuLinkCurrentColor = "#1b59a4";
 export const DsnMenuLinkCurrentBackgroundColor = "#dde6f1";
 export const DsnMenuLinkCurrentIndicatorColor = "#1b59a4";
-export const DsnMenuLinkCurrentIndicatorWidth = "3px";
 export const DsnMenuLinkCurrentHoverColor = "#1b59a4";
 export const DsnMenuLinkCurrentHoverBackgroundColor = "#dde6f1";
 export const DsnMenuLinkCurrentActiveColor = "#1b59a4";
@@ -29250,6 +30113,16 @@ export const DsnParagraphSmallPrintFontSize = "clamp(0.875rem, 0.75rem + 0.25vw,
 export const DsnParagraphSmallPrintLineHeight = "1.5";
 export const DsnParagraphSmallPrintMarginBlockEnd = "calc(0.5rem * 1)";
 export const DsnPasswordInputPaddingInlineEnd = "3rem";
+export const DsnPopoverMenuBackgroundColor = "#fcfcfc";
+export const DsnPopoverMenuBorderWidth = "1px";
+export const DsnPopoverMenuBorderColor = "#c4c4c4";
+export const DsnPopoverMenuBorderRadius = "8px";
+export const DsnPopoverMenuBoxShadow = "0 2px 4px 0 color-mix(in srgb, black 12%, transparent), 0 8px 16px 0 color-mix(in srgb, black 6%, transparent), 0 0 0 1px #00000000";
+export const DsnPopoverMenuMinWidth = "12.5rem";
+export const DsnPopoverMenuMaxWidth = "25rem";
+export const DsnPopoverMenuZIndex = "350";
+export const DsnPopoverMenuPaddingBlock = "calc(0.5rem * 2)";
+export const DsnPopoverMenuPaddingInline = "calc(0.5rem * 2)";
 export const DsnPopoverBackgroundColor = "#fcfcfc";
 export const DsnPopoverBorderWidth = "1px";
 export const DsnPopoverBorderColor = "#c4c4c4";