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

package/dist/css/start-light-information-dense.css

@@ -98,12 +98,12 @@
   --dsn-focus-outline-color: #0b0c0c; /** Kleur van de focusomtrek */
   --dsn-focus-inverse-outline-color: #ffffff; /** Kleur van de focusomtrek op gekleurde/donkere achtergronden — tegenhanger van outline-color */
   --dsn-form-control-max-inline-size: 25rem; /** Maximale breedte van form controls */
-  --dsn-form-control-width-xs: 10ch; /** Extra kleine breedte — voor zeer korte invoervelden (bijv. postcode, jaar, CVV) */
-  --dsn-form-control-width-sm: 14ch; /** Kleine breedte — voor korte invoervelden (bijv. tijd UU:MM, korte codes) */
-  --dsn-form-control-width-md: 20ch; /** Middelgrote breedte — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer) */
-  --dsn-form-control-width-lg: 32ch; /** Grote breedte (standaard) — voor standaard invoervelden (bijv. naam, e-mail) */
-  --dsn-form-control-width-xl: 48ch; /** Extra grote breedte — voor langere invoervelden (bijv. URL) */
-  --dsn-form-control-width-full: 100%; /** Volledige breedte — responsief aan de container */
+  --dsn-form-control-inline-size-xs: 10ch; /** Extra kleine inline-size — voor zeer korte invoervelden (bijv. postcode, jaar, CVV) */
+  --dsn-form-control-inline-size-sm: 14ch; /** Kleine inline-size — voor korte invoervelden (bijv. tijd UU:MM, korte codes) */
+  --dsn-form-control-inline-size-md: 20ch; /** Middelgrote inline-size — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer) */
+  --dsn-form-control-inline-size-lg: 32ch; /** Grote inline-size (standaard) — voor standaard invoervelden (bijv. naam, e-mail) */
+  --dsn-form-control-inline-size-xl: 48ch; /** Extra grote inline-size — voor langere invoervelden (bijv. URL) */
+  --dsn-form-control-inline-size-full: 100%; /** Volledige inline-size — responsief aan de container */
   --dsn-breakpoint-sm: 36em; /** Klein breakpoint - ~576px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
   --dsn-breakpoint-md: 44em; /** Middelgroot breakpoint - ~704px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
   --dsn-breakpoint-lg: 64em; /** Groot breakpoint - ~1024px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
@@ -303,6 +303,9 @@
   --dsn-breadcrumb-navigation-link-active-text-decoration-line: none; /** Geen onderstreping op active */
   --dsn-button-size-small-min-block-size: 2.5rem; /** Minimale blokhoogte van de small button (verkleind aanraakdoel — 40px) */
   --dsn-card-box-shadow: none; /** Schaduw standaard — geen schaduw by default */
+  --dsn-card-min-block-size: auto; /** Minimale hoogte van de card */
+  --dsn-card-body-padding-block-start: 0; /** Bovenkant padding van de body; de header levert de ruimte erboven */
+  --dsn-card-footer-padding-block-start: 0; /** Bovenkant padding van de footer; de sectie erboven levert de ruimte */
   --dsn-card-group-item-min-width: 17.5rem; /** Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill */
   --dsn-checkbox-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); /** Grootte van de checkbox — vloeiend op basis van tekstgrootte en line-height */
   --dsn-checkbox-checked-border-color: rgba(0, 0, 0, 0);
@@ -337,7 +340,7 @@
   --dsn-link-text-decoration-thickness: auto; /** Dikte van de onderstreping van de link */
   --dsn-link-text-underline-offset: 4px; /** Onderstrepingsafstand van de link */
   --dsn-link-hover-text-decoration-line: none; /** Tekstverfraaiing van de link op hover */
-  --dsn-menu-link-current-indicator-width: 3px; /** MenuLink-specifiek: breedte van de border-inline-start indicator */
+  --dsn-menu-item-indicator-width: 3px; /** Gedeeld: dikte van de indicator (border-inline-start, of border-block-end in een horizontaal Menu). Altijd aanwezig zodat hover en current niet verspringen */
   --dsn-modal-dialog-max-width: 40rem; /** Maximale breedte van het dialoogvenster (640px) */
   --dsn-page-footer-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageFooter (32px) — zelfde waarde als page-header.logo.max-block-size voor consistente logogrootte */
   --dsn-page-header-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageHeader op mobile (32px). Breedte schaalt automatisch via inline-size: auto. White-label: overschrijf dit token per thema voor andere logo-proporties. */
@@ -715,17 +718,36 @@
   --dsn-card-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de card (8px) */
   --dsn-card-border-width: var(--dsn-border-width-thin); /** Randbreedte van de card */
   --dsn-card-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de card */
-  --dsn-card-body-padding-block: var(--dsn-space-block-xl); /** Verticale padding van de card body (16px) */
-  --dsn-card-body-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card body (16px) */
-  --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de card body (12px) */
-  --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de card footer (24px) */
-  --dsn-card-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card footer (16px) */
+  --dsn-card-header-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de header (16px) */
+  --dsn-card-header-padding-block-end: var(--dsn-space-block-lg); /** Onderkant padding van de header (12px); ook de ruimte naar de body */
+  --dsn-card-header-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de header (16px) */
+  --dsn-card-header-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de header (16px) */
+  --dsn-card-header-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de header (12px) */
+  --dsn-card-body-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de body (16px) */
+  --dsn-card-body-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de body (16px) */
+  --dsn-card-body-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de body (16px) */
+  --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de body (12px) */
+  --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de footer (24px) */
+  --dsn-card-footer-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de footer (16px) */
+  --dsn-card-footer-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de footer (16px) */
+  --dsn-card-footer-column-gap: var(--dsn-space-inline-md); /** Horizontale ruimte tussen directe kinderen van de footer */
   --dsn-card-image-placeholder-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van de afbeeldingsplaceholder */
   --dsn-card-image-placeholder-color: var(--dsn-color-neutral-color-subtle); /** Kleur van het icoon in de afbeeldingsplaceholder */
   --dsn-card-heading-font-family: var(--dsn-heading-font-family); /** Lettertype van de card heading */
   --dsn-card-heading-font-weight: var(--dsn-heading-font-weight); /** Vetgedrukt van de card heading */
   --dsn-card-heading-font-size: var(--dsn-text-font-size-lg); /** Tekstgrootte van de card heading (20–24px fluid) */
   --dsn-card-heading-line-height: var(--dsn-text-line-height-lg); /** Regelafstand van de card heading */
+  --dsn-card-label-color: var(--dsn-color-neutral-color-document); /** Kleur van het card-label */
+  --dsn-card-label-font-family: var(--dsn-text-font-family-default); /** Lettertype van het card-label */
+  --dsn-card-label-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van het card-label */
+  --dsn-card-label-font-weight: var(--dsn-text-font-weight-bold); /** Gewicht van het card-label */
+  --dsn-card-label-line-height: var(--dsn-text-line-height-md); /** Regelafstand van het card-label */
+  --dsn-card-description-color: var(--dsn-color-neutral-color-document); /** Kleur van de card-description */
+  --dsn-card-description-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van de card-description */
+  --dsn-card-description-line-height: var(--dsn-text-line-height-md); /** Regelafstand van de card-description */
+  --dsn-card-meta-color: var(--dsn-color-neutral-color-subtle); /** Kleur van de card-meta (bijv. datum) */
+  --dsn-card-meta-font-size: var(--dsn-text-font-size-sm); /** Tekstgrootte van de card-meta */
+  --dsn-card-meta-line-height: var(--dsn-text-line-height-sm); /** Regelafstand van de card-meta */
   --dsn-card-group-gap: var(--dsn-space-inline-xl); /** Ruimte tussen cards in een CardGroup (16px) */
   --dsn-checkbox-group-border-width: var(--dsn-border-width-none); /** Standaard geen border op de fieldset */
   --dsn-checkbox-group-gap: var(--dsn-space-block-sm); /** Ruimte tussen de checkbox-opties in de groep */
@@ -893,6 +915,7 @@
   --dsn-menu-item-gap: var(--dsn-space-inline-md); /** Gedeeld: ruimte tussen icoon, label en badge */
   --dsn-menu-item-min-block-size: var(--dsn-pointer-target-min-block-size); /** Gedeeld: minimale raakbare hoogte — WCAG pointer target */
   --dsn-menu-item-background-color: var(--dsn-color-transparent); /** Gedeeld: standaard achtergrondkleur */
+  --dsn-menu-item-indicator-color: var(--dsn-color-transparent); /** Gedeeld: standaard kleur van de indicator, onzichtbaar */
   --dsn-menu-link-level-indent: var(--dsn-space-inline-3xl); /** MenuLink-specifiek: inspringing per hiërarchisch niveau (level 2–4) — via margin-inline-start op de link */
   --dsn-menu-link-current-font-weight: var(--dsn-text-font-weight-bold); /** MenuLink-specifiek: font weight voor de actieve/huidige pagina — bold voor visuele nadruk */
   --dsn-menu-gap-vertical: var(--dsn-space-block-md); /** Kleine ruimte tussen items in verticale oriëntatie */
@@ -1007,6 +1030,8 @@
   --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
   --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
   --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
+  --dsn-popover-menu-min-width: var(--dsn-popover-min-width); /** Minimale breedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-max-width: var(--dsn-popover-max-width); /** Maximale breedte van het paneel: delegeert naar de Popover */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -1190,6 +1215,11 @@
   --dsn-button-size-large-icon-size: var(--dsn-icon-size-lg); /** Icoongrootte van de large button */
   --dsn-button-size-small-icon-size: var(--dsn-icon-size-sm); /** Icoongrootte van de small button */
   --dsn-card-box-shadow-hover: var(--dsn-box-shadow-md); /** Schaduw bij hover — hogere elevatie benadrukt interactiviteit */
+  --dsn-card-pre-header-padding-block-start: var(--dsn-card-header-padding-block-start); /** Bovenkant padding van de pre-header, gelijk aan de header. Media als direct kind bleedt hier doorheen. */
+  --dsn-card-pre-header-padding-block-end: var(--dsn-card-header-padding-block-end); /** Onderkant padding van de pre-header, gelijk aan de header */
+  --dsn-card-pre-header-padding-inline-start: var(--dsn-card-header-padding-inline-start); /** Padding aan de beginzijde van de pre-header, gelijk aan de header */
+  --dsn-card-pre-header-padding-inline-end: var(--dsn-card-header-padding-inline-end); /** Padding aan de eindzijde van de pre-header, gelijk aan de header */
+  --dsn-card-pre-header-row-gap: var(--dsn-card-header-row-gap); /** Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header */
   --dsn-card-heading-color: var(--dsn-heading-color); /** Kleur van de card heading */
   --dsn-checkbox-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
   --dsn-checkbox-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */
@@ -1248,11 +1278,13 @@
   --dsn-menu-item-color: var(--dsn-color-action-2-color-default); /** Gedeeld: standaard tekstkleur */
   --dsn-menu-item-hover-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover tekstkleur */
   --dsn-menu-item-hover-background-color: var(--dsn-color-action-2-bg-hover); /** Gedeeld: hover achtergrondkleur */
+  --dsn-menu-item-hover-indicator-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover kleur van de indicator */
   --dsn-menu-item-active-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active tekstkleur */
   --dsn-menu-item-active-background-color: var(--dsn-color-action-2-bg-active); /** Gedeeld: active achtergrondkleur */
+  --dsn-menu-item-active-indicator-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active kleur van de indicator */
   --dsn-menu-link-current-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: tekstkleur voor de actieve/huidige pagina */
   --dsn-menu-link-current-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina */
-  --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de border-inline-start indicator */
+  --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina */
   --dsn-menu-link-current-hover-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: hover tekstkleur voor de actieve pagina */
   --dsn-menu-link-current-hover-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina */
   --dsn-menu-link-current-active-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: active tekstkleur voor de actieve pagina */
@@ -1265,6 +1297,13 @@
   --dsn-note-info-color: var(--dsn-color-info-color-document); /** Tekstkleur voor info variant */
   --dsn-note-info-icon-color: var(--dsn-color-info-color-default); /** Icoonkleur voor info variant */
   --dsn-option-label-disabled-color: var(--dsn-form-control-disabled-color);
+  --dsn-popover-menu-background-color: var(--dsn-popover-background-color); /** Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen */
+  --dsn-popover-menu-border-width: var(--dsn-popover-border-width); /** Randbreedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-color: var(--dsn-popover-border-color); /** Randkleur van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-radius: var(--dsn-popover-border-radius); /** Afgeronde hoeken van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-z-index: var(--dsn-popover-z-index); /** Z-index van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-padding-block: var(--dsn-popover-body-padding-block); /** Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben */
+  --dsn-popover-menu-padding-inline: var(--dsn-popover-body-padding-inline); /** Horizontale padding rond de lijst: delegeert naar de Popover-body */
   --dsn-popover-box-shadow: var(--dsn-box-shadow-md); /** Schaduw van de popover — middel elevatie (md), hoger dan cards maar lager dan modals */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
   --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
@@ -1363,6 +1402,7 @@
   --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
   --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
   --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
+  --dsn-popover-menu-box-shadow: var(--dsn-popover-box-shadow); /** Schaduw van het paneel: delegeert naar de Popover */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);

package/dist/css/variables-dark-scoped.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Sep 2026 15:18:39 GMT
+ * Generated on Thu, 01 Oct 2026 12:42:20 GMT
  */
 
 .dsn-theme-start.dsn-mode-dark, .dsn-mode-dark .dsn-theme-start {

package/dist/css/variables-dark.css

@@ -98,12 +98,12 @@
   --dsn-focus-outline-color: #f4f4f4; /** Kleur van de focusomtrek — licht voor donkere achtergronden */
   --dsn-focus-inverse-outline-color: #0b0c0c; /** Kleur van de focusomtrek op lichte/gekleurde achtergronden in dark mode — tegenhanger van outline-color */
   --dsn-form-control-max-inline-size: 25rem; /** Maximale breedte van form controls */
-  --dsn-form-control-width-xs: 10ch; /** Extra kleine breedte — voor zeer korte invoervelden (bijv. postcode, jaar, CVV) */
-  --dsn-form-control-width-sm: 14ch; /** Kleine breedte — voor korte invoervelden (bijv. tijd UU:MM, korte codes) */
-  --dsn-form-control-width-md: 20ch; /** Middelgrote breedte — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer) */
-  --dsn-form-control-width-lg: 32ch; /** Grote breedte (standaard) — voor standaard invoervelden (bijv. naam, e-mail) */
-  --dsn-form-control-width-xl: 48ch; /** Extra grote breedte — voor langere invoervelden (bijv. URL) */
-  --dsn-form-control-width-full: 100%; /** Volledige breedte — responsief aan de container */
+  --dsn-form-control-inline-size-xs: 10ch; /** Extra kleine inline-size — voor zeer korte invoervelden (bijv. postcode, jaar, CVV) */
+  --dsn-form-control-inline-size-sm: 14ch; /** Kleine inline-size — voor korte invoervelden (bijv. tijd UU:MM, korte codes) */
+  --dsn-form-control-inline-size-md: 20ch; /** Middelgrote inline-size — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer) */
+  --dsn-form-control-inline-size-lg: 32ch; /** Grote inline-size (standaard) — voor standaard invoervelden (bijv. naam, e-mail) */
+  --dsn-form-control-inline-size-xl: 48ch; /** Extra grote inline-size — voor langere invoervelden (bijv. URL) */
+  --dsn-form-control-inline-size-full: 100%; /** Volledige inline-size — responsief aan de container */
   --dsn-breakpoint-sm: 36em; /** Klein breakpoint - ~576px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
   --dsn-breakpoint-md: 44em; /** Middelgroot breakpoint - ~704px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
   --dsn-breakpoint-lg: 64em; /** Groot breakpoint - ~1024px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
@@ -303,6 +303,9 @@
   --dsn-breadcrumb-navigation-link-active-text-decoration-line: none; /** Geen onderstreping op active */
   --dsn-button-size-small-min-block-size: 2.5rem; /** Minimale blokhoogte van de small button (verkleind aanraakdoel — 40px) */
   --dsn-card-box-shadow: none; /** Schaduw standaard — geen schaduw by default */
+  --dsn-card-min-block-size: auto; /** Minimale hoogte van de card */
+  --dsn-card-body-padding-block-start: 0; /** Bovenkant padding van de body; de header levert de ruimte erboven */
+  --dsn-card-footer-padding-block-start: 0; /** Bovenkant padding van de footer; de sectie erboven levert de ruimte */
   --dsn-card-group-item-min-width: 17.5rem; /** Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill */
   --dsn-checkbox-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); /** Grootte van de checkbox — vloeiend op basis van tekstgrootte en line-height */
   --dsn-checkbox-checked-border-color: rgba(0, 0, 0, 0);
@@ -335,7 +338,7 @@
   --dsn-link-text-decoration-thickness: auto; /** Dikte van de onderstreping van de link */
   --dsn-link-text-underline-offset: 4px; /** Onderstrepingsafstand van de link */
   --dsn-link-hover-text-decoration-line: none; /** Tekstverfraaiing van de link op hover */
-  --dsn-menu-link-current-indicator-width: 3px; /** MenuLink-specifiek: breedte van de border-inline-start indicator */
+  --dsn-menu-item-indicator-width: 3px; /** Gedeeld: dikte van de indicator (border-inline-start, of border-block-end in een horizontaal Menu). Altijd aanwezig zodat hover en current niet verspringen */
   --dsn-modal-dialog-max-width: 40rem; /** Maximale breedte van het dialoogvenster (640px) */
   --dsn-page-footer-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageFooter (32px) — zelfde waarde als page-header.logo.max-block-size voor consistente logogrootte */
   --dsn-page-header-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageHeader op mobile (32px). Breedte schaalt automatisch via inline-size: auto. White-label: overschrijf dit token per thema voor andere logo-proporties. */
@@ -713,17 +716,36 @@
   --dsn-card-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de card (8px) */
   --dsn-card-border-width: var(--dsn-border-width-thin); /** Randbreedte van de card */
   --dsn-card-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de card */
-  --dsn-card-body-padding-block: var(--dsn-space-block-xl); /** Verticale padding van de card body (16px) */
-  --dsn-card-body-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card body (16px) */
-  --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de card body (12px) */
-  --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de card footer (24px) */
-  --dsn-card-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card footer (16px) */
+  --dsn-card-header-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de header (16px) */
+  --dsn-card-header-padding-block-end: var(--dsn-space-block-lg); /** Onderkant padding van de header (12px); ook de ruimte naar de body */
+  --dsn-card-header-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de header (16px) */
+  --dsn-card-header-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de header (16px) */
+  --dsn-card-header-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de header (12px) */
+  --dsn-card-body-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de body (16px) */
+  --dsn-card-body-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de body (16px) */
+  --dsn-card-body-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de body (16px) */
+  --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de body (12px) */
+  --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de footer (24px) */
+  --dsn-card-footer-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de footer (16px) */
+  --dsn-card-footer-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de footer (16px) */
+  --dsn-card-footer-column-gap: var(--dsn-space-inline-md); /** Horizontale ruimte tussen directe kinderen van de footer */
   --dsn-card-image-placeholder-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van de afbeeldingsplaceholder */
   --dsn-card-image-placeholder-color: var(--dsn-color-neutral-color-subtle); /** Kleur van het icoon in de afbeeldingsplaceholder */
   --dsn-card-heading-font-family: var(--dsn-heading-font-family); /** Lettertype van de card heading */
   --dsn-card-heading-font-weight: var(--dsn-heading-font-weight); /** Vetgedrukt van de card heading */
   --dsn-card-heading-font-size: var(--dsn-text-font-size-lg); /** Tekstgrootte van de card heading (20–24px fluid) */
   --dsn-card-heading-line-height: var(--dsn-text-line-height-lg); /** Regelafstand van de card heading */
+  --dsn-card-label-color: var(--dsn-color-neutral-color-document); /** Kleur van het card-label */
+  --dsn-card-label-font-family: var(--dsn-text-font-family-default); /** Lettertype van het card-label */
+  --dsn-card-label-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van het card-label */
+  --dsn-card-label-font-weight: var(--dsn-text-font-weight-bold); /** Gewicht van het card-label */
+  --dsn-card-label-line-height: var(--dsn-text-line-height-md); /** Regelafstand van het card-label */
+  --dsn-card-description-color: var(--dsn-color-neutral-color-document); /** Kleur van de card-description */
+  --dsn-card-description-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van de card-description */
+  --dsn-card-description-line-height: var(--dsn-text-line-height-md); /** Regelafstand van de card-description */
+  --dsn-card-meta-color: var(--dsn-color-neutral-color-subtle); /** Kleur van de card-meta (bijv. datum) */
+  --dsn-card-meta-font-size: var(--dsn-text-font-size-sm); /** Tekstgrootte van de card-meta */
+  --dsn-card-meta-line-height: var(--dsn-text-line-height-sm); /** Regelafstand van de card-meta */
   --dsn-card-group-gap: var(--dsn-space-inline-xl); /** Ruimte tussen cards in een CardGroup (16px) */
   --dsn-checkbox-group-border-width: var(--dsn-border-width-none); /** Standaard geen border op de fieldset */
   --dsn-checkbox-group-gap: var(--dsn-space-block-sm); /** Ruimte tussen de checkbox-opties in de groep */
@@ -893,6 +915,7 @@
   --dsn-menu-item-gap: var(--dsn-space-inline-md); /** Gedeeld: ruimte tussen icoon, label en badge */
   --dsn-menu-item-min-block-size: var(--dsn-pointer-target-min-block-size); /** Gedeeld: minimale raakbare hoogte — WCAG pointer target */
   --dsn-menu-item-background-color: var(--dsn-color-transparent); /** Gedeeld: standaard achtergrondkleur */
+  --dsn-menu-item-indicator-color: var(--dsn-color-transparent); /** Gedeeld: standaard kleur van de indicator, onzichtbaar */
   --dsn-menu-link-level-indent: var(--dsn-space-inline-3xl); /** MenuLink-specifiek: inspringing per hiërarchisch niveau (level 2–4) — via margin-inline-start op de link */
   --dsn-menu-link-current-font-weight: var(--dsn-text-font-weight-bold); /** MenuLink-specifiek: font weight voor de actieve/huidige pagina — bold voor visuele nadruk */
   --dsn-menu-gap-vertical: var(--dsn-space-block-md); /** Kleine ruimte tussen items in verticale oriëntatie */
@@ -1007,6 +1030,8 @@
   --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
   --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
   --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
+  --dsn-popover-menu-min-width: var(--dsn-popover-min-width); /** Minimale breedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-max-width: var(--dsn-popover-max-width); /** Maximale breedte van het paneel: delegeert naar de Popover */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -1190,6 +1215,11 @@
   --dsn-button-size-large-icon-size: var(--dsn-icon-size-lg); /** Icoongrootte van de large button */
   --dsn-button-size-small-icon-size: var(--dsn-icon-size-sm); /** Icoongrootte van de small button */
   --dsn-card-box-shadow-hover: var(--dsn-box-shadow-md); /** Schaduw bij hover — hogere elevatie benadrukt interactiviteit */
+  --dsn-card-pre-header-padding-block-start: var(--dsn-card-header-padding-block-start); /** Bovenkant padding van de pre-header, gelijk aan de header. Media als direct kind bleedt hier doorheen. */
+  --dsn-card-pre-header-padding-block-end: var(--dsn-card-header-padding-block-end); /** Onderkant padding van de pre-header, gelijk aan de header */
+  --dsn-card-pre-header-padding-inline-start: var(--dsn-card-header-padding-inline-start); /** Padding aan de beginzijde van de pre-header, gelijk aan de header */
+  --dsn-card-pre-header-padding-inline-end: var(--dsn-card-header-padding-inline-end); /** Padding aan de eindzijde van de pre-header, gelijk aan de header */
+  --dsn-card-pre-header-row-gap: var(--dsn-card-header-row-gap); /** Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header */
   --dsn-card-heading-color: var(--dsn-heading-color); /** Kleur van de card heading */
   --dsn-checkbox-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
   --dsn-checkbox-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */
@@ -1248,11 +1278,13 @@
   --dsn-menu-item-color: var(--dsn-color-action-2-color-default); /** Gedeeld: standaard tekstkleur */
   --dsn-menu-item-hover-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover tekstkleur */
   --dsn-menu-item-hover-background-color: var(--dsn-color-action-2-bg-hover); /** Gedeeld: hover achtergrondkleur */
+  --dsn-menu-item-hover-indicator-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover kleur van de indicator */
   --dsn-menu-item-active-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active tekstkleur */
   --dsn-menu-item-active-background-color: var(--dsn-color-action-2-bg-active); /** Gedeeld: active achtergrondkleur */
+  --dsn-menu-item-active-indicator-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active kleur van de indicator */
   --dsn-menu-link-current-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: tekstkleur voor de actieve/huidige pagina */
   --dsn-menu-link-current-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina */
-  --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de border-inline-start indicator */
+  --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina */
   --dsn-menu-link-current-hover-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: hover tekstkleur voor de actieve pagina */
   --dsn-menu-link-current-hover-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina */
   --dsn-menu-link-current-active-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: active tekstkleur voor de actieve pagina */
@@ -1265,6 +1297,13 @@
   --dsn-note-info-color: var(--dsn-color-info-color-document); /** Tekstkleur voor info variant */
   --dsn-note-info-icon-color: var(--dsn-color-info-color-default); /** Icoonkleur voor info variant */
   --dsn-option-label-disabled-color: var(--dsn-form-control-disabled-color);
+  --dsn-popover-menu-background-color: var(--dsn-popover-background-color); /** Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen */
+  --dsn-popover-menu-border-width: var(--dsn-popover-border-width); /** Randbreedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-color: var(--dsn-popover-border-color); /** Randkleur van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-radius: var(--dsn-popover-border-radius); /** Afgeronde hoeken van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-z-index: var(--dsn-popover-z-index); /** Z-index van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-padding-block: var(--dsn-popover-body-padding-block); /** Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben */
+  --dsn-popover-menu-padding-inline: var(--dsn-popover-body-padding-inline); /** Horizontale padding rond de lijst: delegeert naar de Popover-body */
   --dsn-popover-box-shadow: var(--dsn-box-shadow-md); /** Schaduw van de popover — middel elevatie (md), hoger dan cards maar lager dan modals */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
   --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
@@ -1363,6 +1402,7 @@
   --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
   --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
   --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
+  --dsn-popover-menu-box-shadow: var(--dsn-popover-box-shadow); /** Schaduw van het paneel: delegeert naar de Popover */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);

package/dist/css/variables.css

@@ -98,12 +98,12 @@
   --dsn-focus-outline-color: #0b0c0c; /** Kleur van de focusomtrek */
   --dsn-focus-inverse-outline-color: #ffffff; /** Kleur van de focusomtrek op gekleurde/donkere achtergronden — tegenhanger van outline-color */
   --dsn-form-control-max-inline-size: 25rem; /** Maximale breedte van form controls */
-  --dsn-form-control-width-xs: 10ch; /** Extra kleine breedte — voor zeer korte invoervelden (bijv. postcode, jaar, CVV) */
-  --dsn-form-control-width-sm: 14ch; /** Kleine breedte — voor korte invoervelden (bijv. tijd UU:MM, korte codes) */
-  --dsn-form-control-width-md: 20ch; /** Middelgrote breedte — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer) */
-  --dsn-form-control-width-lg: 32ch; /** Grote breedte (standaard) — voor standaard invoervelden (bijv. naam, e-mail) */
-  --dsn-form-control-width-xl: 48ch; /** Extra grote breedte — voor langere invoervelden (bijv. URL) */
-  --dsn-form-control-width-full: 100%; /** Volledige breedte — responsief aan de container */
+  --dsn-form-control-inline-size-xs: 10ch; /** Extra kleine inline-size — voor zeer korte invoervelden (bijv. postcode, jaar, CVV) */
+  --dsn-form-control-inline-size-sm: 14ch; /** Kleine inline-size — voor korte invoervelden (bijv. tijd UU:MM, korte codes) */
+  --dsn-form-control-inline-size-md: 20ch; /** Middelgrote inline-size — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer) */
+  --dsn-form-control-inline-size-lg: 32ch; /** Grote inline-size (standaard) — voor standaard invoervelden (bijv. naam, e-mail) */
+  --dsn-form-control-inline-size-xl: 48ch; /** Extra grote inline-size — voor langere invoervelden (bijv. URL) */
+  --dsn-form-control-inline-size-full: 100%; /** Volledige inline-size — responsief aan de container */
   --dsn-breakpoint-sm: 36em; /** Klein breakpoint - ~576px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
   --dsn-breakpoint-md: 44em; /** Middelgroot breakpoint - ~704px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
   --dsn-breakpoint-lg: 64em; /** Groot breakpoint - ~1024px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
@@ -303,6 +303,9 @@
   --dsn-breadcrumb-navigation-link-active-text-decoration-line: none; /** Geen onderstreping op active */
   --dsn-button-size-small-min-block-size: 2.5rem; /** Minimale blokhoogte van de small button (verkleind aanraakdoel — 40px) */
   --dsn-card-box-shadow: none; /** Schaduw standaard — geen schaduw by default */
+  --dsn-card-min-block-size: auto; /** Minimale hoogte van de card */
+  --dsn-card-body-padding-block-start: 0; /** Bovenkant padding van de body; de header levert de ruimte erboven */
+  --dsn-card-footer-padding-block-start: 0; /** Bovenkant padding van de footer; de sectie erboven levert de ruimte */
   --dsn-card-group-item-min-width: 17.5rem; /** Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill */
   --dsn-checkbox-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); /** Grootte van de checkbox — vloeiend op basis van tekstgrootte en line-height */
   --dsn-checkbox-checked-border-color: rgba(0, 0, 0, 0);
@@ -335,7 +338,7 @@
   --dsn-link-text-decoration-thickness: auto; /** Dikte van de onderstreping van de link */
   --dsn-link-text-underline-offset: 4px; /** Onderstrepingsafstand van de link */
   --dsn-link-hover-text-decoration-line: none; /** Tekstverfraaiing van de link op hover */
-  --dsn-menu-link-current-indicator-width: 3px; /** MenuLink-specifiek: breedte van de border-inline-start indicator */
+  --dsn-menu-item-indicator-width: 3px; /** Gedeeld: dikte van de indicator (border-inline-start, of border-block-end in een horizontaal Menu). Altijd aanwezig zodat hover en current niet verspringen */
   --dsn-modal-dialog-max-width: 40rem; /** Maximale breedte van het dialoogvenster (640px) */
   --dsn-page-footer-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageFooter (32px) — zelfde waarde als page-header.logo.max-block-size voor consistente logogrootte */
   --dsn-page-header-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageHeader op mobile (32px). Breedte schaalt automatisch via inline-size: auto. White-label: overschrijf dit token per thema voor andere logo-proporties. */
@@ -713,17 +716,36 @@
   --dsn-card-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de card (8px) */
   --dsn-card-border-width: var(--dsn-border-width-thin); /** Randbreedte van de card */
   --dsn-card-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de card */
-  --dsn-card-body-padding-block: var(--dsn-space-block-xl); /** Verticale padding van de card body (16px) */
-  --dsn-card-body-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card body (16px) */
-  --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de card body (12px) */
-  --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de card footer (24px) */
-  --dsn-card-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card footer (16px) */
+  --dsn-card-header-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de header (16px) */
+  --dsn-card-header-padding-block-end: var(--dsn-space-block-lg); /** Onderkant padding van de header (12px); ook de ruimte naar de body */
+  --dsn-card-header-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de header (16px) */
+  --dsn-card-header-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de header (16px) */
+  --dsn-card-header-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de header (12px) */
+  --dsn-card-body-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de body (16px) */
+  --dsn-card-body-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de body (16px) */
+  --dsn-card-body-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de body (16px) */
+  --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de body (12px) */
+  --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de footer (24px) */
+  --dsn-card-footer-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de footer (16px) */
+  --dsn-card-footer-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de footer (16px) */
+  --dsn-card-footer-column-gap: var(--dsn-space-inline-md); /** Horizontale ruimte tussen directe kinderen van de footer */
   --dsn-card-image-placeholder-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van de afbeeldingsplaceholder */
   --dsn-card-image-placeholder-color: var(--dsn-color-neutral-color-subtle); /** Kleur van het icoon in de afbeeldingsplaceholder */
   --dsn-card-heading-font-family: var(--dsn-heading-font-family); /** Lettertype van de card heading */
   --dsn-card-heading-font-weight: var(--dsn-heading-font-weight); /** Vetgedrukt van de card heading */
   --dsn-card-heading-font-size: var(--dsn-text-font-size-lg); /** Tekstgrootte van de card heading (20–24px fluid) */
   --dsn-card-heading-line-height: var(--dsn-text-line-height-lg); /** Regelafstand van de card heading */
+  --dsn-card-label-color: var(--dsn-color-neutral-color-document); /** Kleur van het card-label */
+  --dsn-card-label-font-family: var(--dsn-text-font-family-default); /** Lettertype van het card-label */
+  --dsn-card-label-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van het card-label */
+  --dsn-card-label-font-weight: var(--dsn-text-font-weight-bold); /** Gewicht van het card-label */
+  --dsn-card-label-line-height: var(--dsn-text-line-height-md); /** Regelafstand van het card-label */
+  --dsn-card-description-color: var(--dsn-color-neutral-color-document); /** Kleur van de card-description */
+  --dsn-card-description-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van de card-description */
+  --dsn-card-description-line-height: var(--dsn-text-line-height-md); /** Regelafstand van de card-description */
+  --dsn-card-meta-color: var(--dsn-color-neutral-color-subtle); /** Kleur van de card-meta (bijv. datum) */
+  --dsn-card-meta-font-size: var(--dsn-text-font-size-sm); /** Tekstgrootte van de card-meta */
+  --dsn-card-meta-line-height: var(--dsn-text-line-height-sm); /** Regelafstand van de card-meta */
   --dsn-card-group-gap: var(--dsn-space-inline-xl); /** Ruimte tussen cards in een CardGroup (16px) */
   --dsn-checkbox-group-border-width: var(--dsn-border-width-none); /** Standaard geen border op de fieldset */
   --dsn-checkbox-group-gap: var(--dsn-space-block-sm); /** Ruimte tussen de checkbox-opties in de groep */
@@ -893,6 +915,7 @@
   --dsn-menu-item-gap: var(--dsn-space-inline-md); /** Gedeeld: ruimte tussen icoon, label en badge */
   --dsn-menu-item-min-block-size: var(--dsn-pointer-target-min-block-size); /** Gedeeld: minimale raakbare hoogte — WCAG pointer target */
   --dsn-menu-item-background-color: var(--dsn-color-transparent); /** Gedeeld: standaard achtergrondkleur */
+  --dsn-menu-item-indicator-color: var(--dsn-color-transparent); /** Gedeeld: standaard kleur van de indicator, onzichtbaar */
   --dsn-menu-link-level-indent: var(--dsn-space-inline-3xl); /** MenuLink-specifiek: inspringing per hiërarchisch niveau (level 2–4) — via margin-inline-start op de link */
   --dsn-menu-link-current-font-weight: var(--dsn-text-font-weight-bold); /** MenuLink-specifiek: font weight voor de actieve/huidige pagina — bold voor visuele nadruk */
   --dsn-menu-gap-vertical: var(--dsn-space-block-md); /** Kleine ruimte tussen items in verticale oriëntatie */
@@ -1007,6 +1030,8 @@
   --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
   --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
   --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
+  --dsn-popover-menu-min-width: var(--dsn-popover-min-width); /** Minimale breedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-max-width: var(--dsn-popover-max-width); /** Maximale breedte van het paneel: delegeert naar de Popover */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -1190,6 +1215,11 @@
   --dsn-button-size-large-icon-size: var(--dsn-icon-size-lg); /** Icoongrootte van de large button */
   --dsn-button-size-small-icon-size: var(--dsn-icon-size-sm); /** Icoongrootte van de small button */
   --dsn-card-box-shadow-hover: var(--dsn-box-shadow-md); /** Schaduw bij hover — hogere elevatie benadrukt interactiviteit */
+  --dsn-card-pre-header-padding-block-start: var(--dsn-card-header-padding-block-start); /** Bovenkant padding van de pre-header, gelijk aan de header. Media als direct kind bleedt hier doorheen. */
+  --dsn-card-pre-header-padding-block-end: var(--dsn-card-header-padding-block-end); /** Onderkant padding van de pre-header, gelijk aan de header */
+  --dsn-card-pre-header-padding-inline-start: var(--dsn-card-header-padding-inline-start); /** Padding aan de beginzijde van de pre-header, gelijk aan de header */
+  --dsn-card-pre-header-padding-inline-end: var(--dsn-card-header-padding-inline-end); /** Padding aan de eindzijde van de pre-header, gelijk aan de header */
+  --dsn-card-pre-header-row-gap: var(--dsn-card-header-row-gap); /** Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header */
   --dsn-card-heading-color: var(--dsn-heading-color); /** Kleur van de card heading */
   --dsn-checkbox-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
   --dsn-checkbox-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */
@@ -1248,11 +1278,13 @@
   --dsn-menu-item-color: var(--dsn-color-action-2-color-default); /** Gedeeld: standaard tekstkleur */
   --dsn-menu-item-hover-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover tekstkleur */
   --dsn-menu-item-hover-background-color: var(--dsn-color-action-2-bg-hover); /** Gedeeld: hover achtergrondkleur */
+  --dsn-menu-item-hover-indicator-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover kleur van de indicator */
   --dsn-menu-item-active-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active tekstkleur */
   --dsn-menu-item-active-background-color: var(--dsn-color-action-2-bg-active); /** Gedeeld: active achtergrondkleur */
+  --dsn-menu-item-active-indicator-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active kleur van de indicator */
   --dsn-menu-link-current-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: tekstkleur voor de actieve/huidige pagina */
   --dsn-menu-link-current-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina */
-  --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de border-inline-start indicator */
+  --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina */
   --dsn-menu-link-current-hover-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: hover tekstkleur voor de actieve pagina */
   --dsn-menu-link-current-hover-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina */
   --dsn-menu-link-current-active-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: active tekstkleur voor de actieve pagina */
@@ -1265,6 +1297,13 @@
   --dsn-note-info-color: var(--dsn-color-info-color-document); /** Tekstkleur voor info variant */
   --dsn-note-info-icon-color: var(--dsn-color-info-color-default); /** Icoonkleur voor info variant */
   --dsn-option-label-disabled-color: var(--dsn-form-control-disabled-color);
+  --dsn-popover-menu-background-color: var(--dsn-popover-background-color); /** Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen */
+  --dsn-popover-menu-border-width: var(--dsn-popover-border-width); /** Randbreedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-color: var(--dsn-popover-border-color); /** Randkleur van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-radius: var(--dsn-popover-border-radius); /** Afgeronde hoeken van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-z-index: var(--dsn-popover-z-index); /** Z-index van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-padding-block: var(--dsn-popover-body-padding-block); /** Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben */
+  --dsn-popover-menu-padding-inline: var(--dsn-popover-body-padding-inline); /** Horizontale padding rond de lijst: delegeert naar de Popover-body */
   --dsn-popover-box-shadow: var(--dsn-box-shadow-md); /** Schaduw van de popover — middel elevatie (md), hoger dan cards maar lager dan modals */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
   --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
@@ -1363,6 +1402,7 @@
   --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
   --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
   --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
+  --dsn-popover-menu-box-shadow: var(--dsn-popover-box-shadow); /** Schaduw van het paneel: delegeert naar de Popover */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);