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

package/dist/scss/_start-light-default.scss

@@ -96,12 +96,12 @@ $dsn-focus-color: #0b0c0c; // Tekstkleur van de focusindicator
 $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.
@@ -301,6 +301,9 @@ $dsn-breadcrumb-navigation-link-hover-text-decoration-line: none; // Underline v
 $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);
@@ -333,7 +336,7 @@ $dsn-link-text-decoration-line: underline; // Tekstverfraaiing van de link
 $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.
@@ -711,17 +714,36 @@ $dsn-card-background-color-hover: $dsn-color-neutral-bg-elevated; // Card achter
 $dsn-card-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de card (8px)
 $dsn-card-border-width: $dsn-border-width-thin; // Randbreedte van de card
 $dsn-card-border-color: $dsn-color-neutral-border-subtle; // Randkleur van de card
-$dsn-card-body-padding-block: $dsn-space-block-xl; // Verticale padding van de card body (16px)
-$dsn-card-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de card body (16px)
-$dsn-card-body-row-gap: $dsn-space-block-lg; // Verticale ruimte tussen directe kinderen van de card body (12px)
-$dsn-card-footer-padding-block-end: $dsn-space-block-3xl; // Onderkant padding van de card footer (24px)
-$dsn-card-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de card footer (16px)
+$dsn-card-header-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de header (16px)
+$dsn-card-header-padding-block-end: $dsn-space-block-lg; // Onderkant padding van de header (12px); ook de ruimte naar de body
+$dsn-card-header-padding-inline-start: $dsn-space-inline-xl; // Padding aan de beginzijde van de header (16px)
+$dsn-card-header-padding-inline-end: $dsn-space-inline-xl; // Padding aan de eindzijde van de header (16px)
+$dsn-card-header-row-gap: $dsn-space-block-lg; // Verticale ruimte tussen directe kinderen van de header (12px)
+$dsn-card-body-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de body (16px)
+$dsn-card-body-padding-inline-start: $dsn-space-inline-xl; // Padding aan de beginzijde van de body (16px)
+$dsn-card-body-padding-inline-end: $dsn-space-inline-xl; // Padding aan de eindzijde van de body (16px)
+$dsn-card-body-row-gap: $dsn-space-block-lg; // Verticale ruimte tussen directe kinderen van de body (12px)
+$dsn-card-footer-padding-block-end: $dsn-space-block-3xl; // Onderkant padding van de footer (24px)
+$dsn-card-footer-padding-inline-start: $dsn-space-inline-xl; // Padding aan de beginzijde van de footer (16px)
+$dsn-card-footer-padding-inline-end: $dsn-space-inline-xl; // Padding aan de eindzijde van de footer (16px)
+$dsn-card-footer-column-gap: $dsn-space-inline-md; // Horizontale ruimte tussen directe kinderen van de footer
 $dsn-card-image-placeholder-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van de afbeeldingsplaceholder
 $dsn-card-image-placeholder-color: $dsn-color-neutral-color-subtle; // Kleur van het icoon in de afbeeldingsplaceholder
 $dsn-card-heading-font-family: $dsn-heading-font-family; // Lettertype van de card heading
 $dsn-card-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de card heading
 $dsn-card-heading-font-size: $dsn-text-font-size-lg; // Tekstgrootte van de card heading (20–24px fluid)
 $dsn-card-heading-line-height: $dsn-text-line-height-lg; // Regelafstand van de card heading
+$dsn-card-label-color: $dsn-color-neutral-color-document; // Kleur van het card-label
+$dsn-card-label-font-family: $dsn-text-font-family-default; // Lettertype van het card-label
+$dsn-card-label-font-size: $dsn-text-font-size-md; // Tekstgrootte van het card-label
+$dsn-card-label-font-weight: $dsn-text-font-weight-bold; // Gewicht van het card-label
+$dsn-card-label-line-height: $dsn-text-line-height-md; // Regelafstand van het card-label
+$dsn-card-description-color: $dsn-color-neutral-color-document; // Kleur van de card-description
+$dsn-card-description-font-size: $dsn-text-font-size-md; // Tekstgrootte van de card-description
+$dsn-card-description-line-height: $dsn-text-line-height-md; // Regelafstand van de card-description
+$dsn-card-meta-color: $dsn-color-neutral-color-subtle; // Kleur van de card-meta (bijv. datum)
+$dsn-card-meta-font-size: $dsn-text-font-size-sm; // Tekstgrootte van de card-meta
+$dsn-card-meta-line-height: $dsn-text-line-height-sm; // Regelafstand van de card-meta
 $dsn-card-group-gap: $dsn-space-inline-xl; // Ruimte tussen cards in een CardGroup (16px)
 $dsn-checkbox-group-border-width: $dsn-border-width-none; // Standaard geen border op de fieldset
 $dsn-checkbox-group-gap: $dsn-space-block-sm; // Ruimte tussen de checkbox-opties in de groep
@@ -891,6 +913,7 @@ $dsn-menu-item-padding-inline: $dsn-space-inline-lg; // Gedeeld: horizontale pad
 $dsn-menu-item-gap: $dsn-space-inline-md; // Gedeeld: ruimte tussen icoon, label en badge
 $dsn-menu-item-min-block-size: $dsn-pointer-target-min-block-size; // Gedeeld: minimale raakbare hoogte — WCAG pointer target
 $dsn-menu-item-background-color: $dsn-color-transparent; // Gedeeld: standaard achtergrondkleur
+$dsn-menu-item-indicator-color: $dsn-color-transparent; // Gedeeld: standaard kleur van de indicator, onzichtbaar
 $dsn-menu-link-level-indent: $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: $dsn-text-font-weight-bold; // MenuLink-specifiek: font weight voor de actieve/huidige pagina — bold voor visuele nadruk
 $dsn-menu-gap-vertical: $dsn-space-block-md; // Kleine ruimte tussen items in verticale oriëntatie
@@ -1188,6 +1211,11 @@ $dsn-button-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de de
 $dsn-button-size-large-icon-size: $dsn-icon-size-lg; // Icoongrootte van de large button
 $dsn-button-size-small-icon-size: $dsn-icon-size-sm; // Icoongrootte van de small button
 $dsn-card-box-shadow-hover: $dsn-box-shadow-md; // Schaduw bij hover — hogere elevatie benadrukt interactiviteit
+$dsn-card-pre-header-padding-block-start: $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: $dsn-card-header-padding-block-end; // Onderkant padding van de pre-header, gelijk aan de header
+$dsn-card-pre-header-padding-inline-start: $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: $dsn-card-header-padding-inline-end; // Padding aan de eindzijde van de pre-header, gelijk aan de header
+$dsn-card-pre-header-row-gap: $dsn-card-header-row-gap; // Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header
 $dsn-card-heading-color: $dsn-heading-color; // Kleur van de card heading
 $dsn-checkbox-group-legend-color: $dsn-form-field-label-color; // Tekstkleur van de legend (hergebruikt van het formulierveldlabel)
 $dsn-checkbox-group-legend-font-family: $dsn-form-field-label-font-family; // Font-familie van de legend (hergebruikt van het formulierveldlabel)
@@ -1246,11 +1274,13 @@ $dsn-menu-item-icon-size: $dsn-icon-size-md; // Gedeeld: icoongrootte
 $dsn-menu-item-color: $dsn-color-action-2-color-default; // Gedeeld: standaard tekstkleur
 $dsn-menu-item-hover-color: $dsn-color-action-2-color-hover; // Gedeeld: hover tekstkleur
 $dsn-menu-item-hover-background-color: $dsn-color-action-2-bg-hover; // Gedeeld: hover achtergrondkleur
+$dsn-menu-item-hover-indicator-color: $dsn-color-action-2-color-hover; // Gedeeld: hover kleur van de indicator
 $dsn-menu-item-active-color: $dsn-color-action-2-color-active; // Gedeeld: active tekstkleur
 $dsn-menu-item-active-background-color: $dsn-color-action-2-bg-active; // Gedeeld: active achtergrondkleur
+$dsn-menu-item-active-indicator-color: $dsn-color-action-2-color-active; // Gedeeld: active kleur van de indicator
 $dsn-menu-link-current-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: tekstkleur voor de actieve/huidige pagina
 $dsn-menu-link-current-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina
-$dsn-menu-link-current-indicator-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: kleur van de border-inline-start indicator
+$dsn-menu-link-current-indicator-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina
 $dsn-menu-link-current-hover-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: hover tekstkleur voor de actieve pagina
 $dsn-menu-link-current-hover-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina
 $dsn-menu-link-current-active-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: active tekstkleur voor de actieve pagina

package/dist/scss/_start-light-information-dense.scss

@@ -96,12 +96,12 @@ $dsn-focus-color: #0b0c0c; // Tekstkleur van de focusindicator
 $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.
@@ -301,6 +301,9 @@ $dsn-breadcrumb-navigation-link-hover-text-decoration-line: none; // Underline v
 $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-line: underline; // Tekstverfraaiing van de link
 $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-background-color-hover: $dsn-color-neutral-bg-elevated; // Card achter
 $dsn-card-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de card (8px)
 $dsn-card-border-width: $dsn-border-width-thin; // Randbreedte van de card
 $dsn-card-border-color: $dsn-color-neutral-border-subtle; // Randkleur van de card
-$dsn-card-body-padding-block: $dsn-space-block-xl; // Verticale padding van de card body (16px)
-$dsn-card-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de card body (16px)
-$dsn-card-body-row-gap: $dsn-space-block-lg; // Verticale ruimte tussen directe kinderen van de card body (12px)
-$dsn-card-footer-padding-block-end: $dsn-space-block-3xl; // Onderkant padding van de card footer (24px)
-$dsn-card-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de card footer (16px)
+$dsn-card-header-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de header (16px)
+$dsn-card-header-padding-block-end: $dsn-space-block-lg; // Onderkant padding van de header (12px); ook de ruimte naar de body
+$dsn-card-header-padding-inline-start: $dsn-space-inline-xl; // Padding aan de beginzijde van de header (16px)
+$dsn-card-header-padding-inline-end: $dsn-space-inline-xl; // Padding aan de eindzijde van de header (16px)
+$dsn-card-header-row-gap: $dsn-space-block-lg; // Verticale ruimte tussen directe kinderen van de header (12px)
+$dsn-card-body-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de body (16px)
+$dsn-card-body-padding-inline-start: $dsn-space-inline-xl; // Padding aan de beginzijde van de body (16px)
+$dsn-card-body-padding-inline-end: $dsn-space-inline-xl; // Padding aan de eindzijde van de body (16px)
+$dsn-card-body-row-gap: $dsn-space-block-lg; // Verticale ruimte tussen directe kinderen van de body (12px)
+$dsn-card-footer-padding-block-end: $dsn-space-block-3xl; // Onderkant padding van de footer (24px)
+$dsn-card-footer-padding-inline-start: $dsn-space-inline-xl; // Padding aan de beginzijde van de footer (16px)
+$dsn-card-footer-padding-inline-end: $dsn-space-inline-xl; // Padding aan de eindzijde van de footer (16px)
+$dsn-card-footer-column-gap: $dsn-space-inline-md; // Horizontale ruimte tussen directe kinderen van de footer
 $dsn-card-image-placeholder-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van de afbeeldingsplaceholder
 $dsn-card-image-placeholder-color: $dsn-color-neutral-color-subtle; // Kleur van het icoon in de afbeeldingsplaceholder
 $dsn-card-heading-font-family: $dsn-heading-font-family; // Lettertype van de card heading
 $dsn-card-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de card heading
 $dsn-card-heading-font-size: $dsn-text-font-size-lg; // Tekstgrootte van de card heading (20–24px fluid)
 $dsn-card-heading-line-height: $dsn-text-line-height-lg; // Regelafstand van de card heading
+$dsn-card-label-color: $dsn-color-neutral-color-document; // Kleur van het card-label
+$dsn-card-label-font-family: $dsn-text-font-family-default; // Lettertype van het card-label
+$dsn-card-label-font-size: $dsn-text-font-size-md; // Tekstgrootte van het card-label
+$dsn-card-label-font-weight: $dsn-text-font-weight-bold; // Gewicht van het card-label
+$dsn-card-label-line-height: $dsn-text-line-height-md; // Regelafstand van het card-label
+$dsn-card-description-color: $dsn-color-neutral-color-document; // Kleur van de card-description
+$dsn-card-description-font-size: $dsn-text-font-size-md; // Tekstgrootte van de card-description
+$dsn-card-description-line-height: $dsn-text-line-height-md; // Regelafstand van de card-description
+$dsn-card-meta-color: $dsn-color-neutral-color-subtle; // Kleur van de card-meta (bijv. datum)
+$dsn-card-meta-font-size: $dsn-text-font-size-sm; // Tekstgrootte van de card-meta
+$dsn-card-meta-line-height: $dsn-text-line-height-sm; // Regelafstand van de card-meta
 $dsn-card-group-gap: $dsn-space-inline-xl; // Ruimte tussen cards in een CardGroup (16px)
 $dsn-checkbox-group-border-width: $dsn-border-width-none; // Standaard geen border op de fieldset
 $dsn-checkbox-group-gap: $dsn-space-block-sm; // Ruimte tussen de checkbox-opties in de groep
@@ -891,6 +913,7 @@ $dsn-menu-item-padding-inline: $dsn-space-inline-lg; // Gedeeld: horizontale pad
 $dsn-menu-item-gap: $dsn-space-inline-md; // Gedeeld: ruimte tussen icoon, label en badge
 $dsn-menu-item-min-block-size: $dsn-pointer-target-min-block-size; // Gedeeld: minimale raakbare hoogte — WCAG pointer target
 $dsn-menu-item-background-color: $dsn-color-transparent; // Gedeeld: standaard achtergrondkleur
+$dsn-menu-item-indicator-color: $dsn-color-transparent; // Gedeeld: standaard kleur van de indicator, onzichtbaar
 $dsn-menu-link-level-indent: $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: $dsn-text-font-weight-bold; // MenuLink-specifiek: font weight voor de actieve/huidige pagina — bold voor visuele nadruk
 $dsn-menu-gap-vertical: $dsn-space-block-md; // Kleine ruimte tussen items in verticale oriëntatie
@@ -1188,6 +1211,11 @@ $dsn-button-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de de
 $dsn-button-size-large-icon-size: $dsn-icon-size-lg; // Icoongrootte van de large button
 $dsn-button-size-small-icon-size: $dsn-icon-size-sm; // Icoongrootte van de small button
 $dsn-card-box-shadow-hover: $dsn-box-shadow-md; // Schaduw bij hover — hogere elevatie benadrukt interactiviteit
+$dsn-card-pre-header-padding-block-start: $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: $dsn-card-header-padding-block-end; // Onderkant padding van de pre-header, gelijk aan de header
+$dsn-card-pre-header-padding-inline-start: $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: $dsn-card-header-padding-inline-end; // Padding aan de eindzijde van de pre-header, gelijk aan de header
+$dsn-card-pre-header-row-gap: $dsn-card-header-row-gap; // Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header
 $dsn-card-heading-color: $dsn-heading-color; // Kleur van de card heading
 $dsn-checkbox-group-legend-color: $dsn-form-field-label-color; // Tekstkleur van de legend (hergebruikt van het formulierveldlabel)
 $dsn-checkbox-group-legend-font-family: $dsn-form-field-label-font-family; // Font-familie van de legend (hergebruikt van het formulierveldlabel)
@@ -1246,11 +1274,13 @@ $dsn-menu-item-icon-size: $dsn-icon-size-md; // Gedeeld: icoongrootte
 $dsn-menu-item-color: $dsn-color-action-2-color-default; // Gedeeld: standaard tekstkleur
 $dsn-menu-item-hover-color: $dsn-color-action-2-color-hover; // Gedeeld: hover tekstkleur
 $dsn-menu-item-hover-background-color: $dsn-color-action-2-bg-hover; // Gedeeld: hover achtergrondkleur
+$dsn-menu-item-hover-indicator-color: $dsn-color-action-2-color-hover; // Gedeeld: hover kleur van de indicator
 $dsn-menu-item-active-color: $dsn-color-action-2-color-active; // Gedeeld: active tekstkleur
 $dsn-menu-item-active-background-color: $dsn-color-action-2-bg-active; // Gedeeld: active achtergrondkleur
+$dsn-menu-item-active-indicator-color: $dsn-color-action-2-color-active; // Gedeeld: active kleur van de indicator
 $dsn-menu-link-current-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: tekstkleur voor de actieve/huidige pagina
 $dsn-menu-link-current-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina
-$dsn-menu-link-current-indicator-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: kleur van de border-inline-start indicator
+$dsn-menu-link-current-indicator-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina
 $dsn-menu-link-current-hover-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: hover tekstkleur voor de actieve pagina
 $dsn-menu-link-current-hover-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina
 $dsn-menu-link-current-active-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: active tekstkleur voor de actieve pagina

package/dist/scss/_variables-dark.scss

@@ -96,12 +96,12 @@ $dsn-focus-color: #0b0c0c; // Tekstkleur van de focusindicator
 $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.
@@ -301,6 +301,9 @@ $dsn-breadcrumb-navigation-link-hover-text-decoration-line: none; // Underline v
 $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);
@@ -333,7 +336,7 @@ $dsn-link-text-decoration-line: underline; // Tekstverfraaiing van de link
 $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.
@@ -711,17 +714,36 @@ $dsn-card-background-color-hover: $dsn-color-neutral-bg-elevated; // Card achter
 $dsn-card-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de card (8px)
 $dsn-card-border-width: $dsn-border-width-thin; // Randbreedte van de card
 $dsn-card-border-color: $dsn-color-neutral-border-subtle; // Randkleur van de card
-$dsn-card-body-padding-block: $dsn-space-block-xl; // Verticale padding van de card body (16px)
-$dsn-card-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de card body (16px)
-$dsn-card-body-row-gap: $dsn-space-block-lg; // Verticale ruimte tussen directe kinderen van de card body (12px)
-$dsn-card-footer-padding-block-end: $dsn-space-block-3xl; // Onderkant padding van de card footer (24px)
-$dsn-card-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de card footer (16px)
+$dsn-card-header-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de header (16px)
+$dsn-card-header-padding-block-end: $dsn-space-block-lg; // Onderkant padding van de header (12px); ook de ruimte naar de body
+$dsn-card-header-padding-inline-start: $dsn-space-inline-xl; // Padding aan de beginzijde van de header (16px)
+$dsn-card-header-padding-inline-end: $dsn-space-inline-xl; // Padding aan de eindzijde van de header (16px)
+$dsn-card-header-row-gap: $dsn-space-block-lg; // Verticale ruimte tussen directe kinderen van de header (12px)
+$dsn-card-body-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de body (16px)
+$dsn-card-body-padding-inline-start: $dsn-space-inline-xl; // Padding aan de beginzijde van de body (16px)
+$dsn-card-body-padding-inline-end: $dsn-space-inline-xl; // Padding aan de eindzijde van de body (16px)
+$dsn-card-body-row-gap: $dsn-space-block-lg; // Verticale ruimte tussen directe kinderen van de body (12px)
+$dsn-card-footer-padding-block-end: $dsn-space-block-3xl; // Onderkant padding van de footer (24px)
+$dsn-card-footer-padding-inline-start: $dsn-space-inline-xl; // Padding aan de beginzijde van de footer (16px)
+$dsn-card-footer-padding-inline-end: $dsn-space-inline-xl; // Padding aan de eindzijde van de footer (16px)
+$dsn-card-footer-column-gap: $dsn-space-inline-md; // Horizontale ruimte tussen directe kinderen van de footer
 $dsn-card-image-placeholder-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van de afbeeldingsplaceholder
 $dsn-card-image-placeholder-color: $dsn-color-neutral-color-subtle; // Kleur van het icoon in de afbeeldingsplaceholder
 $dsn-card-heading-font-family: $dsn-heading-font-family; // Lettertype van de card heading
 $dsn-card-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de card heading
 $dsn-card-heading-font-size: $dsn-text-font-size-lg; // Tekstgrootte van de card heading (20–24px fluid)
 $dsn-card-heading-line-height: $dsn-text-line-height-lg; // Regelafstand van de card heading
+$dsn-card-label-color: $dsn-color-neutral-color-document; // Kleur van het card-label
+$dsn-card-label-font-family: $dsn-text-font-family-default; // Lettertype van het card-label
+$dsn-card-label-font-size: $dsn-text-font-size-md; // Tekstgrootte van het card-label
+$dsn-card-label-font-weight: $dsn-text-font-weight-bold; // Gewicht van het card-label
+$dsn-card-label-line-height: $dsn-text-line-height-md; // Regelafstand van het card-label
+$dsn-card-description-color: $dsn-color-neutral-color-document; // Kleur van de card-description
+$dsn-card-description-font-size: $dsn-text-font-size-md; // Tekstgrootte van de card-description
+$dsn-card-description-line-height: $dsn-text-line-height-md; // Regelafstand van de card-description
+$dsn-card-meta-color: $dsn-color-neutral-color-subtle; // Kleur van de card-meta (bijv. datum)
+$dsn-card-meta-font-size: $dsn-text-font-size-sm; // Tekstgrootte van de card-meta
+$dsn-card-meta-line-height: $dsn-text-line-height-sm; // Regelafstand van de card-meta
 $dsn-card-group-gap: $dsn-space-inline-xl; // Ruimte tussen cards in een CardGroup (16px)
 $dsn-checkbox-group-border-width: $dsn-border-width-none; // Standaard geen border op de fieldset
 $dsn-checkbox-group-gap: $dsn-space-block-sm; // Ruimte tussen de checkbox-opties in de groep
@@ -891,6 +913,7 @@ $dsn-menu-item-padding-inline: $dsn-space-inline-lg; // Gedeeld: horizontale pad
 $dsn-menu-item-gap: $dsn-space-inline-md; // Gedeeld: ruimte tussen icoon, label en badge
 $dsn-menu-item-min-block-size: $dsn-pointer-target-min-block-size; // Gedeeld: minimale raakbare hoogte — WCAG pointer target
 $dsn-menu-item-background-color: $dsn-color-transparent; // Gedeeld: standaard achtergrondkleur
+$dsn-menu-item-indicator-color: $dsn-color-transparent; // Gedeeld: standaard kleur van de indicator, onzichtbaar
 $dsn-menu-link-level-indent: $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: $dsn-text-font-weight-bold; // MenuLink-specifiek: font weight voor de actieve/huidige pagina — bold voor visuele nadruk
 $dsn-menu-gap-vertical: $dsn-space-block-md; // Kleine ruimte tussen items in verticale oriëntatie
@@ -1188,6 +1211,11 @@ $dsn-button-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de de
 $dsn-button-size-large-icon-size: $dsn-icon-size-lg; // Icoongrootte van de large button
 $dsn-button-size-small-icon-size: $dsn-icon-size-sm; // Icoongrootte van de small button
 $dsn-card-box-shadow-hover: $dsn-box-shadow-md; // Schaduw bij hover — hogere elevatie benadrukt interactiviteit
+$dsn-card-pre-header-padding-block-start: $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: $dsn-card-header-padding-block-end; // Onderkant padding van de pre-header, gelijk aan de header
+$dsn-card-pre-header-padding-inline-start: $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: $dsn-card-header-padding-inline-end; // Padding aan de eindzijde van de pre-header, gelijk aan de header
+$dsn-card-pre-header-row-gap: $dsn-card-header-row-gap; // Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header
 $dsn-card-heading-color: $dsn-heading-color; // Kleur van de card heading
 $dsn-checkbox-group-legend-color: $dsn-form-field-label-color; // Tekstkleur van de legend (hergebruikt van het formulierveldlabel)
 $dsn-checkbox-group-legend-font-family: $dsn-form-field-label-font-family; // Font-familie van de legend (hergebruikt van het formulierveldlabel)
@@ -1246,11 +1274,13 @@ $dsn-menu-item-icon-size: $dsn-icon-size-md; // Gedeeld: icoongrootte
 $dsn-menu-item-color: $dsn-color-action-2-color-default; // Gedeeld: standaard tekstkleur
 $dsn-menu-item-hover-color: $dsn-color-action-2-color-hover; // Gedeeld: hover tekstkleur
 $dsn-menu-item-hover-background-color: $dsn-color-action-2-bg-hover; // Gedeeld: hover achtergrondkleur
+$dsn-menu-item-hover-indicator-color: $dsn-color-action-2-color-hover; // Gedeeld: hover kleur van de indicator
 $dsn-menu-item-active-color: $dsn-color-action-2-color-active; // Gedeeld: active tekstkleur
 $dsn-menu-item-active-background-color: $dsn-color-action-2-bg-active; // Gedeeld: active achtergrondkleur
+$dsn-menu-item-active-indicator-color: $dsn-color-action-2-color-active; // Gedeeld: active kleur van de indicator
 $dsn-menu-link-current-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: tekstkleur voor de actieve/huidige pagina
 $dsn-menu-link-current-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina
-$dsn-menu-link-current-indicator-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: kleur van de border-inline-start indicator
+$dsn-menu-link-current-indicator-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina
 $dsn-menu-link-current-hover-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: hover tekstkleur voor de actieve pagina
 $dsn-menu-link-current-hover-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina
 $dsn-menu-link-current-active-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: active tekstkleur voor de actieve pagina

package/dist/scss/_variables.scss

@@ -96,12 +96,12 @@ $dsn-focus-color: #0b0c0c; // Tekstkleur van de focusindicator
 $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.
@@ -301,6 +301,9 @@ $dsn-breadcrumb-navigation-link-hover-text-decoration-line: none; // Underline v
 $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);
@@ -333,7 +336,7 @@ $dsn-link-text-decoration-line: underline; // Tekstverfraaiing van de link
 $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.
@@ -711,17 +714,36 @@ $dsn-card-background-color-hover: $dsn-color-neutral-bg-elevated; // Card achter
 $dsn-card-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de card (8px)
 $dsn-card-border-width: $dsn-border-width-thin; // Randbreedte van de card
 $dsn-card-border-color: $dsn-color-neutral-border-subtle; // Randkleur van de card
-$dsn-card-body-padding-block: $dsn-space-block-xl; // Verticale padding van de card body (16px)
-$dsn-card-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de card body (16px)
-$dsn-card-body-row-gap: $dsn-space-block-lg; // Verticale ruimte tussen directe kinderen van de card body (12px)
-$dsn-card-footer-padding-block-end: $dsn-space-block-3xl; // Onderkant padding van de card footer (24px)
-$dsn-card-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de card footer (16px)
+$dsn-card-header-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de header (16px)
+$dsn-card-header-padding-block-end: $dsn-space-block-lg; // Onderkant padding van de header (12px); ook de ruimte naar de body
+$dsn-card-header-padding-inline-start: $dsn-space-inline-xl; // Padding aan de beginzijde van de header (16px)
+$dsn-card-header-padding-inline-end: $dsn-space-inline-xl; // Padding aan de eindzijde van de header (16px)
+$dsn-card-header-row-gap: $dsn-space-block-lg; // Verticale ruimte tussen directe kinderen van de header (12px)
+$dsn-card-body-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de body (16px)
+$dsn-card-body-padding-inline-start: $dsn-space-inline-xl; // Padding aan de beginzijde van de body (16px)
+$dsn-card-body-padding-inline-end: $dsn-space-inline-xl; // Padding aan de eindzijde van de body (16px)
+$dsn-card-body-row-gap: $dsn-space-block-lg; // Verticale ruimte tussen directe kinderen van de body (12px)
+$dsn-card-footer-padding-block-end: $dsn-space-block-3xl; // Onderkant padding van de footer (24px)
+$dsn-card-footer-padding-inline-start: $dsn-space-inline-xl; // Padding aan de beginzijde van de footer (16px)
+$dsn-card-footer-padding-inline-end: $dsn-space-inline-xl; // Padding aan de eindzijde van de footer (16px)
+$dsn-card-footer-column-gap: $dsn-space-inline-md; // Horizontale ruimte tussen directe kinderen van de footer
 $dsn-card-image-placeholder-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van de afbeeldingsplaceholder
 $dsn-card-image-placeholder-color: $dsn-color-neutral-color-subtle; // Kleur van het icoon in de afbeeldingsplaceholder
 $dsn-card-heading-font-family: $dsn-heading-font-family; // Lettertype van de card heading
 $dsn-card-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de card heading
 $dsn-card-heading-font-size: $dsn-text-font-size-lg; // Tekstgrootte van de card heading (20–24px fluid)
 $dsn-card-heading-line-height: $dsn-text-line-height-lg; // Regelafstand van de card heading
+$dsn-card-label-color: $dsn-color-neutral-color-document; // Kleur van het card-label
+$dsn-card-label-font-family: $dsn-text-font-family-default; // Lettertype van het card-label
+$dsn-card-label-font-size: $dsn-text-font-size-md; // Tekstgrootte van het card-label
+$dsn-card-label-font-weight: $dsn-text-font-weight-bold; // Gewicht van het card-label
+$dsn-card-label-line-height: $dsn-text-line-height-md; // Regelafstand van het card-label
+$dsn-card-description-color: $dsn-color-neutral-color-document; // Kleur van de card-description
+$dsn-card-description-font-size: $dsn-text-font-size-md; // Tekstgrootte van de card-description
+$dsn-card-description-line-height: $dsn-text-line-height-md; // Regelafstand van de card-description
+$dsn-card-meta-color: $dsn-color-neutral-color-subtle; // Kleur van de card-meta (bijv. datum)
+$dsn-card-meta-font-size: $dsn-text-font-size-sm; // Tekstgrootte van de card-meta
+$dsn-card-meta-line-height: $dsn-text-line-height-sm; // Regelafstand van de card-meta
 $dsn-card-group-gap: $dsn-space-inline-xl; // Ruimte tussen cards in een CardGroup (16px)
 $dsn-checkbox-group-border-width: $dsn-border-width-none; // Standaard geen border op de fieldset
 $dsn-checkbox-group-gap: $dsn-space-block-sm; // Ruimte tussen de checkbox-opties in de groep
@@ -891,6 +913,7 @@ $dsn-menu-item-padding-inline: $dsn-space-inline-lg; // Gedeeld: horizontale pad
 $dsn-menu-item-gap: $dsn-space-inline-md; // Gedeeld: ruimte tussen icoon, label en badge
 $dsn-menu-item-min-block-size: $dsn-pointer-target-min-block-size; // Gedeeld: minimale raakbare hoogte — WCAG pointer target
 $dsn-menu-item-background-color: $dsn-color-transparent; // Gedeeld: standaard achtergrondkleur
+$dsn-menu-item-indicator-color: $dsn-color-transparent; // Gedeeld: standaard kleur van de indicator, onzichtbaar
 $dsn-menu-link-level-indent: $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: $dsn-text-font-weight-bold; // MenuLink-specifiek: font weight voor de actieve/huidige pagina — bold voor visuele nadruk
 $dsn-menu-gap-vertical: $dsn-space-block-md; // Kleine ruimte tussen items in verticale oriëntatie
@@ -1188,6 +1211,11 @@ $dsn-button-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de de
 $dsn-button-size-large-icon-size: $dsn-icon-size-lg; // Icoongrootte van de large button
 $dsn-button-size-small-icon-size: $dsn-icon-size-sm; // Icoongrootte van de small button
 $dsn-card-box-shadow-hover: $dsn-box-shadow-md; // Schaduw bij hover — hogere elevatie benadrukt interactiviteit
+$dsn-card-pre-header-padding-block-start: $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: $dsn-card-header-padding-block-end; // Onderkant padding van de pre-header, gelijk aan de header
+$dsn-card-pre-header-padding-inline-start: $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: $dsn-card-header-padding-inline-end; // Padding aan de eindzijde van de pre-header, gelijk aan de header
+$dsn-card-pre-header-row-gap: $dsn-card-header-row-gap; // Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header
 $dsn-card-heading-color: $dsn-heading-color; // Kleur van de card heading
 $dsn-checkbox-group-legend-color: $dsn-form-field-label-color; // Tekstkleur van de legend (hergebruikt van het formulierveldlabel)
 $dsn-checkbox-group-legend-font-family: $dsn-form-field-label-font-family; // Font-familie van de legend (hergebruikt van het formulierveldlabel)
@@ -1246,11 +1274,13 @@ $dsn-menu-item-icon-size: $dsn-icon-size-md; // Gedeeld: icoongrootte
 $dsn-menu-item-color: $dsn-color-action-2-color-default; // Gedeeld: standaard tekstkleur
 $dsn-menu-item-hover-color: $dsn-color-action-2-color-hover; // Gedeeld: hover tekstkleur
 $dsn-menu-item-hover-background-color: $dsn-color-action-2-bg-hover; // Gedeeld: hover achtergrondkleur
+$dsn-menu-item-hover-indicator-color: $dsn-color-action-2-color-hover; // Gedeeld: hover kleur van de indicator
 $dsn-menu-item-active-color: $dsn-color-action-2-color-active; // Gedeeld: active tekstkleur
 $dsn-menu-item-active-background-color: $dsn-color-action-2-bg-active; // Gedeeld: active achtergrondkleur
+$dsn-menu-item-active-indicator-color: $dsn-color-action-2-color-active; // Gedeeld: active kleur van de indicator
 $dsn-menu-link-current-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: tekstkleur voor de actieve/huidige pagina
 $dsn-menu-link-current-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina
-$dsn-menu-link-current-indicator-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: kleur van de border-inline-start indicator
+$dsn-menu-link-current-indicator-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina
 $dsn-menu-link-current-hover-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: hover tekstkleur voor de actieve pagina
 $dsn-menu-link-current-hover-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina
 $dsn-menu-link-current-active-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: active tekstkleur voor de actieve pagina