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

package/dist/scss/_wireframe-dark-information-dense.scss

@@ -97,12 +97,12 @@ $dsn-focus-outline-color: #ffffff; // Kleur van de focusomtrek
 $dsn-focus-inverse-outline-color: #000000; // 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-border-radius: 2px; // Afronding van form controls — minimaal voor wireframe
-$dsn-form-control-width-xs: 8ch; // Extra kleine breedte — voor korte invoervelden (bijv. postcode, 6 tekens)
-$dsn-form-control-width-sm: 16ch; // Kleine breedte — voor middelgrote invoervelden (bijv. telefoonnummer, 10-12 cijfers)
-$dsn-form-control-width-md: 32ch; // Middelgrote breedte (standaard) — voor standaard invoervelden (bijv. e-mail, naam)
-$dsn-form-control-width-lg: 48ch; // Grote breedte — voor langere invoervelden (bijv. URL)
-$dsn-form-control-width-xl: 64ch; // Extra grote breedte — voor zeer lange tekstvelden
-$dsn-form-control-width-full: 100%; // Volledige breedte — responsief aan de container
+$dsn-form-control-inline-size-xs: 8ch; // Extra kleine inline-size — voor korte invoervelden (bijv. postcode, 6 tekens)
+$dsn-form-control-inline-size-sm: 16ch; // Kleine inline-size — voor middelgrote invoervelden (bijv. telefoonnummer, 10-12 cijfers)
+$dsn-form-control-inline-size-md: 32ch; // Middelgrote inline-size (standaard) — voor standaard invoervelden (bijv. e-mail, naam)
+$dsn-form-control-inline-size-lg: 48ch; // Grote inline-size — voor langere invoervelden (bijv. URL)
+$dsn-form-control-inline-size-xl: 64ch; // Extra grote inline-size — voor zeer lange tekstvelden
+$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.
@@ -152,6 +152,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);
@@ -186,7 +189,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.
@@ -462,17 +465,36 @@ $dsn-card-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de card
 $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-box-shadow-hover: $dsn-box-shadow-md; // Schaduw bij hover — hogere elevatie benadrukt interactiviteit
-$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
@@ -624,6 +646,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
@@ -712,6 +735,8 @@ $dsn-paragraph-lead-margin-block-end: $dsn-space-row-xl; // Onderste margin van
 $dsn-paragraph-small-print-font-size: $dsn-text-font-size-sm; // Font-size van de kleine tekst alinea
 $dsn-paragraph-small-print-line-height: $dsn-text-line-height-sm; // Line-height van de kleine tekst alinea
 $dsn-paragraph-small-print-margin-block-end: $dsn-space-row-md; // Onderste margin van de kleine tekst alinea
+$dsn-popover-menu-min-width: $dsn-popover-min-width; // Minimale breedte van het paneel: delegeert naar de Popover
+$dsn-popover-menu-max-width: $dsn-popover-max-width; // Maximale breedte van het paneel: delegeert naar de Popover
 $dsn-popover-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina
 $dsn-popover-border-width: $dsn-border-width-thin; // Randbreedte van de popover
 $dsn-popover-border-color: $dsn-color-neutral-border-subtle; // Randkleur van de popover
@@ -1034,6 +1059,11 @@ $dsn-button-subtle-positive-hover-color: $dsn-color-positive-color-hover; // Tek
 $dsn-button-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de default button
 $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-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)
@@ -1064,6 +1094,9 @@ $dsn-checkbox-indeterminate-disabled-border-color: $dsn-form-control-disabled-bo
 $dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
 $dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
 $dsn-checkbox-indeterminate-hover-color: $dsn-color-neutral-inverse-color-default;
+$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
+$dsn-details-icon-size: $dsn-icon-size-md; // Grootte van het chevron-icoon
+$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
 $dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtiele tekstkleur voor de bestandsnaam / 'Geen bestand gekozen'-tekst
 $dsn-file-input-font-family: $dsn-form-control-font-family; // Font-familie van het bestandsinvoerveld
 $dsn-file-input-font-size: $dsn-form-control-font-size; // Font-size van het bestandsinvoerveld
@@ -1074,10 +1107,6 @@ $dsn-file-border-color-error: $dsn-color-negative-border-default; // Randkleur i
 $dsn-file-media-icon-size: $dsn-icon-size-md;
 $dsn-file-status-icon-color: $dsn-color-positive-color-default; // Zelfde token als FormFieldStatus positive variant
 $dsn-file-status-icon-size: $dsn-icon-size-md;
-$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
-$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
-$dsn-details-icon-size: $dsn-icon-size-md; // Grootte van het chevron-icoon
-$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
 $dsn-form-field-error-message-color: $dsn-color-negative-color-default; // Tekstkleur van de foutmelding (negative sentiment)
 $dsn-form-field-error-message-icon-size: $dsn-icon-size-md; // Icoongrootte van de foutmelding
 $dsn-form-field-status-icon-size: $dsn-icon-size-md; // Icoongrootte voor positive en warning varianten
@@ -1119,6 +1148,14 @@ $dsn-page-footer-border-block-start-color: $dsn-color-accent-1-border-default; /
 $dsn-page-header-border-block-end-color: $dsn-color-accent-1-color-default; // Kleur van de onderkantrand
 $dsn-page-header-navbar-background-color: $dsn-color-accent-1-bg-default; // Navigatiebalk achtergrond
 $dsn-page-header-search-panel-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van het zoekpaneel
+$dsn-popover-menu-background-color: $dsn-popover-background-color; // Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen
+$dsn-popover-menu-border-width: $dsn-popover-border-width; // Randbreedte van het paneel: delegeert naar de Popover
+$dsn-popover-menu-border-color: $dsn-popover-border-color; // Randkleur van het paneel: delegeert naar de Popover
+$dsn-popover-menu-border-radius: $dsn-popover-border-radius; // Afgeronde hoeken van het paneel: delegeert naar de Popover
+$dsn-popover-menu-box-shadow: $dsn-popover-box-shadow; // Schaduw van het paneel: delegeert naar de Popover
+$dsn-popover-menu-z-index: $dsn-popover-z-index; // Z-index van het paneel: delegeert naar de Popover
+$dsn-popover-menu-padding-block: $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: $dsn-popover-body-padding-inline; // Horizontale padding rond de lijst: delegeert naar de Popover-body
 $dsn-popover-heading-color: $dsn-heading-color; // Kleur van de popover-heading
 $dsn-radio-group-legend-color: $dsn-form-field-label-color; // Tekstkleur van de legend (hergebruikt van het formulierveldlabel)
 $dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font-familie van de legend (hergebruikt van het formulierveldlabel)
@@ -1303,6 +1340,7 @@ $dsn-checkbox-checked-focus-background-color: $dsn-form-control-focus-background
 $dsn-checkbox-checked-focus-color: $dsn-form-control-focus-color;
 $dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
+$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
 $dsn-details-summary-color: $dsn-color-action-2-color-default; // Kleur van het summary-label (volgt Link via action-2)
 $dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Kleur van het summary-label op hover
 $dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Kleur van het summary-label op active
@@ -1317,11 +1355,13 @@ $dsn-logo-color-primary: $dsn-color-accent-1-inverse-bg-default; // Achtergrondr
 $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/_wireframe-light-default.scss

@@ -97,12 +97,12 @@ $dsn-focus-outline-color: #000000; // 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-border-radius: 2px; // Afronding van form controls — minimaal voor wireframe
-$dsn-form-control-width-xs: 8ch; // Extra kleine breedte — voor korte invoervelden (bijv. postcode, 6 tekens)
-$dsn-form-control-width-sm: 16ch; // Kleine breedte — voor middelgrote invoervelden (bijv. telefoonnummer, 10-12 cijfers)
-$dsn-form-control-width-md: 32ch; // Middelgrote breedte (standaard) — voor standaard invoervelden (bijv. e-mail, naam)
-$dsn-form-control-width-lg: 48ch; // Grote breedte — voor langere invoervelden (bijv. URL)
-$dsn-form-control-width-xl: 64ch; // Extra grote breedte — voor zeer lange tekstvelden
-$dsn-form-control-width-full: 100%; // Volledige breedte — responsief aan de container
+$dsn-form-control-inline-size-xs: 8ch; // Extra kleine inline-size — voor korte invoervelden (bijv. postcode, 6 tekens)
+$dsn-form-control-inline-size-sm: 16ch; // Kleine inline-size — voor middelgrote invoervelden (bijv. telefoonnummer, 10-12 cijfers)
+$dsn-form-control-inline-size-md: 32ch; // Middelgrote inline-size (standaard) — voor standaard invoervelden (bijv. e-mail, naam)
+$dsn-form-control-inline-size-lg: 48ch; // Grote inline-size — voor langere invoervelden (bijv. URL)
+$dsn-form-control-inline-size-xl: 64ch; // Extra grote inline-size — voor zeer lange tekstvelden
+$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.
@@ -152,6 +152,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);
@@ -184,7 +187,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.
@@ -460,17 +463,36 @@ $dsn-card-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de card
 $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-box-shadow-hover: $dsn-box-shadow-md; // Schaduw bij hover — hogere elevatie benadrukt interactiviteit
-$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
@@ -624,6 +646,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
@@ -712,6 +735,8 @@ $dsn-paragraph-lead-margin-block-end: $dsn-space-row-xl; // Onderste margin van
 $dsn-paragraph-small-print-font-size: $dsn-text-font-size-sm; // Font-size van de kleine tekst alinea
 $dsn-paragraph-small-print-line-height: $dsn-text-line-height-sm; // Line-height van de kleine tekst alinea
 $dsn-paragraph-small-print-margin-block-end: $dsn-space-row-md; // Onderste margin van de kleine tekst alinea
+$dsn-popover-menu-min-width: $dsn-popover-min-width; // Minimale breedte van het paneel: delegeert naar de Popover
+$dsn-popover-menu-max-width: $dsn-popover-max-width; // Maximale breedte van het paneel: delegeert naar de Popover
 $dsn-popover-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina
 $dsn-popover-border-width: $dsn-border-width-thin; // Randbreedte van de popover
 $dsn-popover-border-color: $dsn-color-neutral-border-subtle; // Randkleur van de popover
@@ -1034,6 +1059,11 @@ $dsn-button-subtle-positive-hover-color: $dsn-color-positive-color-hover; // Tek
 $dsn-button-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de default button
 $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-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)
@@ -1064,6 +1094,9 @@ $dsn-checkbox-indeterminate-disabled-border-color: $dsn-form-control-disabled-bo
 $dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
 $dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
 $dsn-checkbox-indeterminate-hover-color: $dsn-color-neutral-inverse-color-default;
+$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
+$dsn-details-icon-size: $dsn-icon-size-md; // Grootte van het chevron-icoon
+$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
 $dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtiele tekstkleur voor de bestandsnaam / 'Geen bestand gekozen'-tekst
 $dsn-file-input-font-family: $dsn-form-control-font-family; // Font-familie van het bestandsinvoerveld
 $dsn-file-input-font-size: $dsn-form-control-font-size; // Font-size van het bestandsinvoerveld
@@ -1074,10 +1107,6 @@ $dsn-file-border-color-error: $dsn-color-negative-border-default; // Randkleur i
 $dsn-file-media-icon-size: $dsn-icon-size-md;
 $dsn-file-status-icon-color: $dsn-color-positive-color-default; // Zelfde token als FormFieldStatus positive variant
 $dsn-file-status-icon-size: $dsn-icon-size-md;
-$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
-$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
-$dsn-details-icon-size: $dsn-icon-size-md; // Grootte van het chevron-icoon
-$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
 $dsn-form-field-error-message-color: $dsn-color-negative-color-default; // Tekstkleur van de foutmelding (negative sentiment)
 $dsn-form-field-error-message-icon-size: $dsn-icon-size-md; // Icoongrootte van de foutmelding
 $dsn-form-field-status-icon-size: $dsn-icon-size-md; // Icoongrootte voor positive en warning varianten
@@ -1119,6 +1148,14 @@ $dsn-page-footer-border-block-start-color: $dsn-color-accent-1-border-default; /
 $dsn-page-header-border-block-end-color: $dsn-color-accent-1-color-default; // Kleur van de onderkantrand
 $dsn-page-header-navbar-background-color: $dsn-color-accent-1-bg-default; // Navigatiebalk achtergrond
 $dsn-page-header-search-panel-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van het zoekpaneel
+$dsn-popover-menu-background-color: $dsn-popover-background-color; // Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen
+$dsn-popover-menu-border-width: $dsn-popover-border-width; // Randbreedte van het paneel: delegeert naar de Popover
+$dsn-popover-menu-border-color: $dsn-popover-border-color; // Randkleur van het paneel: delegeert naar de Popover
+$dsn-popover-menu-border-radius: $dsn-popover-border-radius; // Afgeronde hoeken van het paneel: delegeert naar de Popover
+$dsn-popover-menu-box-shadow: $dsn-popover-box-shadow; // Schaduw van het paneel: delegeert naar de Popover
+$dsn-popover-menu-z-index: $dsn-popover-z-index; // Z-index van het paneel: delegeert naar de Popover
+$dsn-popover-menu-padding-block: $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: $dsn-popover-body-padding-inline; // Horizontale padding rond de lijst: delegeert naar de Popover-body
 $dsn-popover-heading-color: $dsn-heading-color; // Kleur van de popover-heading
 $dsn-radio-group-legend-color: $dsn-form-field-label-color; // Tekstkleur van de legend (hergebruikt van het formulierveldlabel)
 $dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font-familie van de legend (hergebruikt van het formulierveldlabel)
@@ -1303,6 +1340,7 @@ $dsn-checkbox-checked-focus-background-color: $dsn-form-control-focus-background
 $dsn-checkbox-checked-focus-color: $dsn-form-control-focus-color;
 $dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
+$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
 $dsn-details-summary-color: $dsn-color-action-2-color-default; // Kleur van het summary-label (volgt Link via action-2)
 $dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Kleur van het summary-label op hover
 $dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Kleur van het summary-label op active
@@ -1317,11 +1355,13 @@ $dsn-logo-color-primary: $dsn-color-accent-1-inverse-bg-default; // Achtergrondr
 $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/_wireframe-light-information-dense.scss

@@ -97,12 +97,12 @@ $dsn-focus-outline-color: #000000; // 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-border-radius: 2px; // Afronding van form controls — minimaal voor wireframe
-$dsn-form-control-width-xs: 8ch; // Extra kleine breedte — voor korte invoervelden (bijv. postcode, 6 tekens)
-$dsn-form-control-width-sm: 16ch; // Kleine breedte — voor middelgrote invoervelden (bijv. telefoonnummer, 10-12 cijfers)
-$dsn-form-control-width-md: 32ch; // Middelgrote breedte (standaard) — voor standaard invoervelden (bijv. e-mail, naam)
-$dsn-form-control-width-lg: 48ch; // Grote breedte — voor langere invoervelden (bijv. URL)
-$dsn-form-control-width-xl: 64ch; // Extra grote breedte — voor zeer lange tekstvelden
-$dsn-form-control-width-full: 100%; // Volledige breedte — responsief aan de container
+$dsn-form-control-inline-size-xs: 8ch; // Extra kleine inline-size — voor korte invoervelden (bijv. postcode, 6 tekens)
+$dsn-form-control-inline-size-sm: 16ch; // Kleine inline-size — voor middelgrote invoervelden (bijv. telefoonnummer, 10-12 cijfers)
+$dsn-form-control-inline-size-md: 32ch; // Middelgrote inline-size (standaard) — voor standaard invoervelden (bijv. e-mail, naam)
+$dsn-form-control-inline-size-lg: 48ch; // Grote inline-size — voor langere invoervelden (bijv. URL)
+$dsn-form-control-inline-size-xl: 64ch; // Extra grote inline-size — voor zeer lange tekstvelden
+$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.
@@ -152,6 +152,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);
@@ -186,7 +189,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.
@@ -462,17 +465,36 @@ $dsn-card-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de card
 $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-box-shadow-hover: $dsn-box-shadow-md; // Schaduw bij hover — hogere elevatie benadrukt interactiviteit
-$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
@@ -624,6 +646,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
@@ -712,6 +735,8 @@ $dsn-paragraph-lead-margin-block-end: $dsn-space-row-xl; // Onderste margin van
 $dsn-paragraph-small-print-font-size: $dsn-text-font-size-sm; // Font-size van de kleine tekst alinea
 $dsn-paragraph-small-print-line-height: $dsn-text-line-height-sm; // Line-height van de kleine tekst alinea
 $dsn-paragraph-small-print-margin-block-end: $dsn-space-row-md; // Onderste margin van de kleine tekst alinea
+$dsn-popover-menu-min-width: $dsn-popover-min-width; // Minimale breedte van het paneel: delegeert naar de Popover
+$dsn-popover-menu-max-width: $dsn-popover-max-width; // Maximale breedte van het paneel: delegeert naar de Popover
 $dsn-popover-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina
 $dsn-popover-border-width: $dsn-border-width-thin; // Randbreedte van de popover
 $dsn-popover-border-color: $dsn-color-neutral-border-subtle; // Randkleur van de popover
@@ -1034,6 +1059,11 @@ $dsn-button-subtle-positive-hover-color: $dsn-color-positive-color-hover; // Tek
 $dsn-button-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de default button
 $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-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)
@@ -1064,6 +1094,9 @@ $dsn-checkbox-indeterminate-disabled-border-color: $dsn-form-control-disabled-bo
 $dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
 $dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
 $dsn-checkbox-indeterminate-hover-color: $dsn-color-neutral-inverse-color-default;
+$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
+$dsn-details-icon-size: $dsn-icon-size-md; // Grootte van het chevron-icoon
+$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
 $dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtiele tekstkleur voor de bestandsnaam / 'Geen bestand gekozen'-tekst
 $dsn-file-input-font-family: $dsn-form-control-font-family; // Font-familie van het bestandsinvoerveld
 $dsn-file-input-font-size: $dsn-form-control-font-size; // Font-size van het bestandsinvoerveld
@@ -1074,10 +1107,6 @@ $dsn-file-border-color-error: $dsn-color-negative-border-default; // Randkleur i
 $dsn-file-media-icon-size: $dsn-icon-size-md;
 $dsn-file-status-icon-color: $dsn-color-positive-color-default; // Zelfde token als FormFieldStatus positive variant
 $dsn-file-status-icon-size: $dsn-icon-size-md;
-$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
-$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
-$dsn-details-icon-size: $dsn-icon-size-md; // Grootte van het chevron-icoon
-$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
 $dsn-form-field-error-message-color: $dsn-color-negative-color-default; // Tekstkleur van de foutmelding (negative sentiment)
 $dsn-form-field-error-message-icon-size: $dsn-icon-size-md; // Icoongrootte van de foutmelding
 $dsn-form-field-status-icon-size: $dsn-icon-size-md; // Icoongrootte voor positive en warning varianten
@@ -1119,6 +1148,14 @@ $dsn-page-footer-border-block-start-color: $dsn-color-accent-1-border-default; /
 $dsn-page-header-border-block-end-color: $dsn-color-accent-1-color-default; // Kleur van de onderkantrand
 $dsn-page-header-navbar-background-color: $dsn-color-accent-1-bg-default; // Navigatiebalk achtergrond
 $dsn-page-header-search-panel-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van het zoekpaneel
+$dsn-popover-menu-background-color: $dsn-popover-background-color; // Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen
+$dsn-popover-menu-border-width: $dsn-popover-border-width; // Randbreedte van het paneel: delegeert naar de Popover
+$dsn-popover-menu-border-color: $dsn-popover-border-color; // Randkleur van het paneel: delegeert naar de Popover
+$dsn-popover-menu-border-radius: $dsn-popover-border-radius; // Afgeronde hoeken van het paneel: delegeert naar de Popover
+$dsn-popover-menu-box-shadow: $dsn-popover-box-shadow; // Schaduw van het paneel: delegeert naar de Popover
+$dsn-popover-menu-z-index: $dsn-popover-z-index; // Z-index van het paneel: delegeert naar de Popover
+$dsn-popover-menu-padding-block: $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: $dsn-popover-body-padding-inline; // Horizontale padding rond de lijst: delegeert naar de Popover-body
 $dsn-popover-heading-color: $dsn-heading-color; // Kleur van de popover-heading
 $dsn-radio-group-legend-color: $dsn-form-field-label-color; // Tekstkleur van de legend (hergebruikt van het formulierveldlabel)
 $dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font-familie van de legend (hergebruikt van het formulierveldlabel)
@@ -1303,6 +1340,7 @@ $dsn-checkbox-checked-focus-background-color: $dsn-form-control-focus-background
 $dsn-checkbox-checked-focus-color: $dsn-form-control-focus-color;
 $dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
+$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
 $dsn-details-summary-color: $dsn-color-action-2-color-default; // Kleur van het summary-label (volgt Link via action-2)
 $dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Kleur van het summary-label op hover
 $dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Kleur van het summary-label op active
@@ -1317,11 +1355,13 @@ $dsn-logo-color-primary: $dsn-color-accent-1-inverse-bg-default; // Achtergrondr
 $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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsn-starter-kit/design-tokens",
-  "version": "3.5.0",
+  "version": "4.1.0",
   "description": "Design tokens for the design system",
   "type": "module",
   "main": "dist/js/tokens.cjs",