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

package/dist/css/wireframe-light-default.css

@@ -99,12 +99,12 @@
   --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. */
@@ -154,6 +154,9 @@
   --dsn-breadcrumb-navigation-link-active-text-decoration-line: none; /** Geen onderstreping op active */
   --dsn-button-size-small-min-block-size: 2.5rem; /** Minimale blokhoogte van de small button (verkleind aanraakdoel — 40px) */
   --dsn-card-box-shadow: none; /** Schaduw standaard — geen schaduw by default */
+  --dsn-card-min-block-size: auto; /** Minimale hoogte van de card */
+  --dsn-card-body-padding-block-start: 0; /** Bovenkant padding van de body; de header levert de ruimte erboven */
+  --dsn-card-footer-padding-block-start: 0; /** Bovenkant padding van de footer; de sectie erboven levert de ruimte */
   --dsn-card-group-item-min-width: 17.5rem; /** Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill */
   --dsn-checkbox-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); /** Grootte van de checkbox — vloeiend op basis van tekstgrootte en line-height */
   --dsn-checkbox-checked-border-color: rgba(0, 0, 0, 0);
@@ -186,7 +189,7 @@
   --dsn-link-text-decoration-thickness: auto; /** Dikte van de onderstreping van de link */
   --dsn-link-text-underline-offset: 4px; /** Onderstrepingsafstand van de link */
   --dsn-link-hover-text-decoration-line: none; /** Tekstverfraaiing van de link op hover */
-  --dsn-menu-link-current-indicator-width: 3px; /** MenuLink-specifiek: breedte van de border-inline-start indicator */
+  --dsn-menu-item-indicator-width: 3px; /** Gedeeld: dikte van de indicator (border-inline-start, of border-block-end in een horizontaal Menu). Altijd aanwezig zodat hover en current niet verspringen */
   --dsn-modal-dialog-max-width: 40rem; /** Maximale breedte van het dialoogvenster (640px) */
   --dsn-page-footer-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageFooter (32px) — zelfde waarde als page-header.logo.max-block-size voor consistente logogrootte */
   --dsn-page-header-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageHeader op mobile (32px). Breedte schaalt automatisch via inline-size: auto. White-label: overschrijf dit token per thema voor andere logo-proporties. */
@@ -462,17 +465,36 @@
   --dsn-card-border-width: var(--dsn-border-width-thin); /** Randbreedte van de card */
   --dsn-card-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de card */
   --dsn-card-box-shadow-hover: var(--dsn-box-shadow-md); /** Schaduw bij hover — hogere elevatie benadrukt interactiviteit */
-  --dsn-card-body-padding-block: var(--dsn-space-block-xl); /** Verticale padding van de card body (16px) */
-  --dsn-card-body-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card body (16px) */
-  --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de card body (12px) */
-  --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de card footer (24px) */
-  --dsn-card-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card footer (16px) */
+  --dsn-card-header-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de header (16px) */
+  --dsn-card-header-padding-block-end: var(--dsn-space-block-lg); /** Onderkant padding van de header (12px); ook de ruimte naar de body */
+  --dsn-card-header-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de header (16px) */
+  --dsn-card-header-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de header (16px) */
+  --dsn-card-header-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de header (12px) */
+  --dsn-card-body-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de body (16px) */
+  --dsn-card-body-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de body (16px) */
+  --dsn-card-body-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de body (16px) */
+  --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de body (12px) */
+  --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de footer (24px) */
+  --dsn-card-footer-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de footer (16px) */
+  --dsn-card-footer-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de footer (16px) */
+  --dsn-card-footer-column-gap: var(--dsn-space-inline-md); /** Horizontale ruimte tussen directe kinderen van de footer */
   --dsn-card-image-placeholder-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van de afbeeldingsplaceholder */
   --dsn-card-image-placeholder-color: var(--dsn-color-neutral-color-subtle); /** Kleur van het icoon in de afbeeldingsplaceholder */
   --dsn-card-heading-font-family: var(--dsn-heading-font-family); /** Lettertype van de card heading */
   --dsn-card-heading-font-weight: var(--dsn-heading-font-weight); /** Vetgedrukt van de card heading */
   --dsn-card-heading-font-size: var(--dsn-text-font-size-lg); /** Tekstgrootte van de card heading (20–24px fluid) */
   --dsn-card-heading-line-height: var(--dsn-text-line-height-lg); /** Regelafstand van de card heading */
+  --dsn-card-label-color: var(--dsn-color-neutral-color-document); /** Kleur van het card-label */
+  --dsn-card-label-font-family: var(--dsn-text-font-family-default); /** Lettertype van het card-label */
+  --dsn-card-label-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van het card-label */
+  --dsn-card-label-font-weight: var(--dsn-text-font-weight-bold); /** Gewicht van het card-label */
+  --dsn-card-label-line-height: var(--dsn-text-line-height-md); /** Regelafstand van het card-label */
+  --dsn-card-description-color: var(--dsn-color-neutral-color-document); /** Kleur van de card-description */
+  --dsn-card-description-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van de card-description */
+  --dsn-card-description-line-height: var(--dsn-text-line-height-md); /** Regelafstand van de card-description */
+  --dsn-card-meta-color: var(--dsn-color-neutral-color-subtle); /** Kleur van de card-meta (bijv. datum) */
+  --dsn-card-meta-font-size: var(--dsn-text-font-size-sm); /** Tekstgrootte van de card-meta */
+  --dsn-card-meta-line-height: var(--dsn-text-line-height-sm); /** Regelafstand van de card-meta */
   --dsn-card-group-gap: var(--dsn-space-inline-xl); /** Ruimte tussen cards in een CardGroup (16px) */
   --dsn-checkbox-group-border-width: var(--dsn-border-width-none); /** Standaard geen border op de fieldset */
   --dsn-checkbox-group-gap: var(--dsn-space-block-sm); /** Ruimte tussen de checkbox-opties in de groep */
@@ -626,6 +648,7 @@
   --dsn-menu-item-gap: var(--dsn-space-inline-md); /** Gedeeld: ruimte tussen icoon, label en badge */
   --dsn-menu-item-min-block-size: var(--dsn-pointer-target-min-block-size); /** Gedeeld: minimale raakbare hoogte — WCAG pointer target */
   --dsn-menu-item-background-color: var(--dsn-color-transparent); /** Gedeeld: standaard achtergrondkleur */
+  --dsn-menu-item-indicator-color: var(--dsn-color-transparent); /** Gedeeld: standaard kleur van de indicator, onzichtbaar */
   --dsn-menu-link-level-indent: var(--dsn-space-inline-3xl); /** MenuLink-specifiek: inspringing per hiërarchisch niveau (level 2–4) — via margin-inline-start op de link */
   --dsn-menu-link-current-font-weight: var(--dsn-text-font-weight-bold); /** MenuLink-specifiek: font weight voor de actieve/huidige pagina — bold voor visuele nadruk */
   --dsn-menu-gap-vertical: var(--dsn-space-block-md); /** Kleine ruimte tussen items in verticale oriëntatie */
@@ -1036,6 +1059,11 @@
   --dsn-button-size-default-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de default button */
   --dsn-button-size-large-icon-size: var(--dsn-icon-size-lg); /** Icoongrootte van de large button */
   --dsn-button-size-small-icon-size: var(--dsn-icon-size-sm); /** Icoongrootte van de small button */
+  --dsn-card-pre-header-padding-block-start: var(--dsn-card-header-padding-block-start); /** Bovenkant padding van de pre-header, gelijk aan de header. Media als direct kind bleedt hier doorheen. */
+  --dsn-card-pre-header-padding-block-end: var(--dsn-card-header-padding-block-end); /** Onderkant padding van de pre-header, gelijk aan de header */
+  --dsn-card-pre-header-padding-inline-start: var(--dsn-card-header-padding-inline-start); /** Padding aan de beginzijde van de pre-header, gelijk aan de header */
+  --dsn-card-pre-header-padding-inline-end: var(--dsn-card-header-padding-inline-end); /** Padding aan de eindzijde van de pre-header, gelijk aan de header */
+  --dsn-card-pre-header-row-gap: var(--dsn-card-header-row-gap); /** Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header */
   --dsn-card-heading-color: var(--dsn-heading-color); /** Kleur van de card heading */
   --dsn-checkbox-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
   --dsn-checkbox-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */
@@ -1066,6 +1094,9 @@
   --dsn-checkbox-indeterminate-disabled-color: var(--dsn-form-control-disabled-color);
   --dsn-checkbox-indeterminate-focus-border-color: var(--dsn-form-control-focus-border-color);
   --dsn-checkbox-indeterminate-hover-color: var(--dsn-color-neutral-inverse-color-default);
+  --dsn-date-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-date-input-icon-size) + var(--dsn-date-input-button-inset-inline-end) + var(--dsn-date-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
+  --dsn-details-icon-size: var(--dsn-icon-size-md); /** Grootte van het chevron-icoon */
+  --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
   --dsn-file-input-color: var(--dsn-form-control-placeholder-color); /** Subtiele tekstkleur voor de bestandsnaam / 'Geen bestand gekozen'-tekst */
   --dsn-file-input-font-family: var(--dsn-form-control-font-family); /** Font-familie van het bestandsinvoerveld */
   --dsn-file-input-font-size: var(--dsn-form-control-font-size); /** Font-size van het bestandsinvoerveld */
@@ -1076,10 +1107,6 @@
   --dsn-file-media-icon-size: var(--dsn-icon-size-md);
   --dsn-file-status-icon-color: var(--dsn-color-positive-color-default); /** Zelfde token als FormFieldStatus positive variant */
   --dsn-file-status-icon-size: var(--dsn-icon-size-md);
-  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
-  --dsn-date-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-date-input-icon-size) + var(--dsn-date-input-button-inset-inline-end) + var(--dsn-date-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
-  --dsn-details-icon-size: var(--dsn-icon-size-md); /** Grootte van het chevron-icoon */
-  --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
   --dsn-form-field-error-message-color: var(--dsn-color-negative-color-default); /** Tekstkleur van de foutmelding (negative sentiment) */
   --dsn-form-field-error-message-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de foutmelding */
   --dsn-form-field-status-icon-size: var(--dsn-icon-size-md); /** Icoongrootte voor positive en warning varianten */
@@ -1305,6 +1332,7 @@
   --dsn-checkbox-checked-focus-color: var(--dsn-form-control-focus-color);
   --dsn-checkbox-indeterminate-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
+  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
   --dsn-details-summary-color: var(--dsn-color-action-2-color-default); /** Kleur van het summary-label (volgt Link via action-2) */
   --dsn-details-summary-hover-color: var(--dsn-color-action-2-color-hover); /** Kleur van het summary-label op hover */
   --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Kleur van het summary-label op active */
@@ -1319,11 +1347,13 @@
   --dsn-menu-item-color: var(--dsn-color-action-2-color-default); /** Gedeeld: standaard tekstkleur */
   --dsn-menu-item-hover-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover tekstkleur */
   --dsn-menu-item-hover-background-color: var(--dsn-color-action-2-bg-hover); /** Gedeeld: hover achtergrondkleur */
+  --dsn-menu-item-hover-indicator-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover kleur van de indicator */
   --dsn-menu-item-active-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active tekstkleur */
   --dsn-menu-item-active-background-color: var(--dsn-color-action-2-bg-active); /** Gedeeld: active achtergrondkleur */
+  --dsn-menu-item-active-indicator-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active kleur van de indicator */
   --dsn-menu-link-current-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: tekstkleur voor de actieve/huidige pagina */
   --dsn-menu-link-current-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina */
-  --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de border-inline-start indicator */
+  --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina */
   --dsn-menu-link-current-hover-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: hover tekstkleur voor de actieve pagina */
   --dsn-menu-link-current-hover-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina */
   --dsn-menu-link-current-active-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: active tekstkleur voor de actieve pagina */

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

@@ -99,12 +99,12 @@
   --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. */
@@ -154,6 +154,9 @@
   --dsn-breadcrumb-navigation-link-active-text-decoration-line: none; /** Geen onderstreping op active */
   --dsn-button-size-small-min-block-size: 2.5rem; /** Minimale blokhoogte van de small button (verkleind aanraakdoel — 40px) */
   --dsn-card-box-shadow: none; /** Schaduw standaard — geen schaduw by default */
+  --dsn-card-min-block-size: auto; /** Minimale hoogte van de card */
+  --dsn-card-body-padding-block-start: 0; /** Bovenkant padding van de body; de header levert de ruimte erboven */
+  --dsn-card-footer-padding-block-start: 0; /** Bovenkant padding van de footer; de sectie erboven levert de ruimte */
   --dsn-card-group-item-min-width: 17.5rem; /** Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill */
   --dsn-checkbox-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); /** Grootte van de checkbox — vloeiend op basis van tekstgrootte en line-height */
   --dsn-checkbox-checked-border-color: rgba(0, 0, 0, 0);
@@ -188,7 +191,7 @@
   --dsn-link-text-decoration-thickness: auto; /** Dikte van de onderstreping van de link */
   --dsn-link-text-underline-offset: 4px; /** Onderstrepingsafstand van de link */
   --dsn-link-hover-text-decoration-line: none; /** Tekstverfraaiing van de link op hover */
-  --dsn-menu-link-current-indicator-width: 3px; /** MenuLink-specifiek: breedte van de border-inline-start indicator */
+  --dsn-menu-item-indicator-width: 3px; /** Gedeeld: dikte van de indicator (border-inline-start, of border-block-end in een horizontaal Menu). Altijd aanwezig zodat hover en current niet verspringen */
   --dsn-modal-dialog-max-width: 40rem; /** Maximale breedte van het dialoogvenster (640px) */
   --dsn-page-footer-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageFooter (32px) — zelfde waarde als page-header.logo.max-block-size voor consistente logogrootte */
   --dsn-page-header-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageHeader op mobile (32px). Breedte schaalt automatisch via inline-size: auto. White-label: overschrijf dit token per thema voor andere logo-proporties. */
@@ -464,17 +467,36 @@
   --dsn-card-border-width: var(--dsn-border-width-thin); /** Randbreedte van de card */
   --dsn-card-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de card */
   --dsn-card-box-shadow-hover: var(--dsn-box-shadow-md); /** Schaduw bij hover — hogere elevatie benadrukt interactiviteit */
-  --dsn-card-body-padding-block: var(--dsn-space-block-xl); /** Verticale padding van de card body (16px) */
-  --dsn-card-body-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card body (16px) */
-  --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de card body (12px) */
-  --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de card footer (24px) */
-  --dsn-card-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card footer (16px) */
+  --dsn-card-header-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de header (16px) */
+  --dsn-card-header-padding-block-end: var(--dsn-space-block-lg); /** Onderkant padding van de header (12px); ook de ruimte naar de body */
+  --dsn-card-header-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de header (16px) */
+  --dsn-card-header-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de header (16px) */
+  --dsn-card-header-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de header (12px) */
+  --dsn-card-body-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de body (16px) */
+  --dsn-card-body-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de body (16px) */
+  --dsn-card-body-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de body (16px) */
+  --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de body (12px) */
+  --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de footer (24px) */
+  --dsn-card-footer-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de footer (16px) */
+  --dsn-card-footer-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de footer (16px) */
+  --dsn-card-footer-column-gap: var(--dsn-space-inline-md); /** Horizontale ruimte tussen directe kinderen van de footer */
   --dsn-card-image-placeholder-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van de afbeeldingsplaceholder */
   --dsn-card-image-placeholder-color: var(--dsn-color-neutral-color-subtle); /** Kleur van het icoon in de afbeeldingsplaceholder */
   --dsn-card-heading-font-family: var(--dsn-heading-font-family); /** Lettertype van de card heading */
   --dsn-card-heading-font-weight: var(--dsn-heading-font-weight); /** Vetgedrukt van de card heading */
   --dsn-card-heading-font-size: var(--dsn-text-font-size-lg); /** Tekstgrootte van de card heading (20–24px fluid) */
   --dsn-card-heading-line-height: var(--dsn-text-line-height-lg); /** Regelafstand van de card heading */
+  --dsn-card-label-color: var(--dsn-color-neutral-color-document); /** Kleur van het card-label */
+  --dsn-card-label-font-family: var(--dsn-text-font-family-default); /** Lettertype van het card-label */
+  --dsn-card-label-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van het card-label */
+  --dsn-card-label-font-weight: var(--dsn-text-font-weight-bold); /** Gewicht van het card-label */
+  --dsn-card-label-line-height: var(--dsn-text-line-height-md); /** Regelafstand van het card-label */
+  --dsn-card-description-color: var(--dsn-color-neutral-color-document); /** Kleur van de card-description */
+  --dsn-card-description-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van de card-description */
+  --dsn-card-description-line-height: var(--dsn-text-line-height-md); /** Regelafstand van de card-description */
+  --dsn-card-meta-color: var(--dsn-color-neutral-color-subtle); /** Kleur van de card-meta (bijv. datum) */
+  --dsn-card-meta-font-size: var(--dsn-text-font-size-sm); /** Tekstgrootte van de card-meta */
+  --dsn-card-meta-line-height: var(--dsn-text-line-height-sm); /** Regelafstand van de card-meta */
   --dsn-card-group-gap: var(--dsn-space-inline-xl); /** Ruimte tussen cards in een CardGroup (16px) */
   --dsn-checkbox-group-border-width: var(--dsn-border-width-none); /** Standaard geen border op de fieldset */
   --dsn-checkbox-group-gap: var(--dsn-space-block-sm); /** Ruimte tussen de checkbox-opties in de groep */
@@ -626,6 +648,7 @@
   --dsn-menu-item-gap: var(--dsn-space-inline-md); /** Gedeeld: ruimte tussen icoon, label en badge */
   --dsn-menu-item-min-block-size: var(--dsn-pointer-target-min-block-size); /** Gedeeld: minimale raakbare hoogte — WCAG pointer target */
   --dsn-menu-item-background-color: var(--dsn-color-transparent); /** Gedeeld: standaard achtergrondkleur */
+  --dsn-menu-item-indicator-color: var(--dsn-color-transparent); /** Gedeeld: standaard kleur van de indicator, onzichtbaar */
   --dsn-menu-link-level-indent: var(--dsn-space-inline-3xl); /** MenuLink-specifiek: inspringing per hiërarchisch niveau (level 2–4) — via margin-inline-start op de link */
   --dsn-menu-link-current-font-weight: var(--dsn-text-font-weight-bold); /** MenuLink-specifiek: font weight voor de actieve/huidige pagina — bold voor visuele nadruk */
   --dsn-menu-gap-vertical: var(--dsn-space-block-md); /** Kleine ruimte tussen items in verticale oriëntatie */
@@ -1036,6 +1059,11 @@
   --dsn-button-size-default-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de default button */
   --dsn-button-size-large-icon-size: var(--dsn-icon-size-lg); /** Icoongrootte van de large button */
   --dsn-button-size-small-icon-size: var(--dsn-icon-size-sm); /** Icoongrootte van de small button */
+  --dsn-card-pre-header-padding-block-start: var(--dsn-card-header-padding-block-start); /** Bovenkant padding van de pre-header, gelijk aan de header. Media als direct kind bleedt hier doorheen. */
+  --dsn-card-pre-header-padding-block-end: var(--dsn-card-header-padding-block-end); /** Onderkant padding van de pre-header, gelijk aan de header */
+  --dsn-card-pre-header-padding-inline-start: var(--dsn-card-header-padding-inline-start); /** Padding aan de beginzijde van de pre-header, gelijk aan de header */
+  --dsn-card-pre-header-padding-inline-end: var(--dsn-card-header-padding-inline-end); /** Padding aan de eindzijde van de pre-header, gelijk aan de header */
+  --dsn-card-pre-header-row-gap: var(--dsn-card-header-row-gap); /** Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header */
   --dsn-card-heading-color: var(--dsn-heading-color); /** Kleur van de card heading */
   --dsn-checkbox-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
   --dsn-checkbox-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */
@@ -1066,6 +1094,9 @@
   --dsn-checkbox-indeterminate-disabled-color: var(--dsn-form-control-disabled-color);
   --dsn-checkbox-indeterminate-focus-border-color: var(--dsn-form-control-focus-border-color);
   --dsn-checkbox-indeterminate-hover-color: var(--dsn-color-neutral-inverse-color-default);
+  --dsn-date-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-date-input-icon-size) + var(--dsn-date-input-button-inset-inline-end) + var(--dsn-date-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
+  --dsn-details-icon-size: var(--dsn-icon-size-md); /** Grootte van het chevron-icoon */
+  --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
   --dsn-file-input-color: var(--dsn-form-control-placeholder-color); /** Subtiele tekstkleur voor de bestandsnaam / 'Geen bestand gekozen'-tekst */
   --dsn-file-input-font-family: var(--dsn-form-control-font-family); /** Font-familie van het bestandsinvoerveld */
   --dsn-file-input-font-size: var(--dsn-form-control-font-size); /** Font-size van het bestandsinvoerveld */
@@ -1076,10 +1107,6 @@
   --dsn-file-media-icon-size: var(--dsn-icon-size-md);
   --dsn-file-status-icon-color: var(--dsn-color-positive-color-default); /** Zelfde token als FormFieldStatus positive variant */
   --dsn-file-status-icon-size: var(--dsn-icon-size-md);
-  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
-  --dsn-date-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-date-input-icon-size) + var(--dsn-date-input-button-inset-inline-end) + var(--dsn-date-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
-  --dsn-details-icon-size: var(--dsn-icon-size-md); /** Grootte van het chevron-icoon */
-  --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
   --dsn-form-field-error-message-color: var(--dsn-color-negative-color-default); /** Tekstkleur van de foutmelding (negative sentiment) */
   --dsn-form-field-error-message-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de foutmelding */
   --dsn-form-field-status-icon-size: var(--dsn-icon-size-md); /** Icoongrootte voor positive en warning varianten */
@@ -1305,6 +1332,7 @@
   --dsn-checkbox-checked-focus-color: var(--dsn-form-control-focus-color);
   --dsn-checkbox-indeterminate-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
+  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
   --dsn-details-summary-color: var(--dsn-color-action-2-color-default); /** Kleur van het summary-label (volgt Link via action-2) */
   --dsn-details-summary-hover-color: var(--dsn-color-action-2-color-hover); /** Kleur van het summary-label op hover */
   --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Kleur van het summary-label op active */
@@ -1319,11 +1347,13 @@
   --dsn-menu-item-color: var(--dsn-color-action-2-color-default); /** Gedeeld: standaard tekstkleur */
   --dsn-menu-item-hover-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover tekstkleur */
   --dsn-menu-item-hover-background-color: var(--dsn-color-action-2-bg-hover); /** Gedeeld: hover achtergrondkleur */
+  --dsn-menu-item-hover-indicator-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover kleur van de indicator */
   --dsn-menu-item-active-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active tekstkleur */
   --dsn-menu-item-active-background-color: var(--dsn-color-action-2-bg-active); /** Gedeeld: active achtergrondkleur */
+  --dsn-menu-item-active-indicator-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active kleur van de indicator */
   --dsn-menu-link-current-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: tekstkleur voor de actieve/huidige pagina */
   --dsn-menu-link-current-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina */
-  --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de border-inline-start indicator */
+  --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina */
   --dsn-menu-link-current-hover-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: hover tekstkleur voor de actieve pagina */
   --dsn-menu-link-current-hover-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina */
   --dsn-menu-link-current-active-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: active tekstkleur voor de actieve pagina */

package/dist/js/start-dark-default.d.ts

@@ -147,12 +147,12 @@ export declare const DsnFormControlPaddingInlineEnd: string;
 export declare const DsnFormControlMaxInlineSize: string;
 export declare const DsnFormControlBorderRadius: string;
 export declare const DsnFormControlBorderWidth: string;
-export declare const DsnFormControlWidthXs: string;
-export declare const DsnFormControlWidthSm: string;
-export declare const DsnFormControlWidthMd: string;
-export declare const DsnFormControlWidthLg: string;
-export declare const DsnFormControlWidthXl: string;
-export declare const DsnFormControlWidthFull: string;
+export declare const DsnFormControlInlineSizeXs: string;
+export declare const DsnFormControlInlineSizeSm: string;
+export declare const DsnFormControlInlineSizeMd: string;
+export declare const DsnFormControlInlineSizeLg: string;
+export declare const DsnFormControlInlineSizeXl: string;
+export declare const DsnFormControlInlineSizeFull: string;
 export declare const DsnFormControlHoverBorderWidth: string;
 export declare const DsnFormControlHoverAccentColor: string;
 export declare const DsnFormControlHoverBackgroundColor: string;
@@ -678,11 +678,27 @@ export declare const DsnCardBorderWidth: string;
 export declare const DsnCardBorderColor: string;
 export declare const DsnCardBoxShadow: string;
 export declare const DsnCardBoxShadowHover: string;
-export declare const DsnCardBodyPaddingBlock: string;
-export declare const DsnCardBodyPaddingInline: string;
+export declare const DsnCardMinBlockSize: string;
+export declare const DsnCardPreHeaderPaddingBlockStart: string;
+export declare const DsnCardPreHeaderPaddingBlockEnd: string;
+export declare const DsnCardPreHeaderPaddingInlineStart: string;
+export declare const DsnCardPreHeaderPaddingInlineEnd: string;
+export declare const DsnCardPreHeaderRowGap: string;
+export declare const DsnCardHeaderPaddingBlockStart: string;
+export declare const DsnCardHeaderPaddingBlockEnd: string;
+export declare const DsnCardHeaderPaddingInlineStart: string;
+export declare const DsnCardHeaderPaddingInlineEnd: string;
+export declare const DsnCardHeaderRowGap: string;
+export declare const DsnCardBodyPaddingBlockStart: string;
+export declare const DsnCardBodyPaddingBlockEnd: string;
+export declare const DsnCardBodyPaddingInlineStart: string;
+export declare const DsnCardBodyPaddingInlineEnd: string;
 export declare const DsnCardBodyRowGap: string;
+export declare const DsnCardFooterPaddingBlockStart: string;
 export declare const DsnCardFooterPaddingBlockEnd: string;
-export declare const DsnCardFooterPaddingInline: string;
+export declare const DsnCardFooterPaddingInlineStart: string;
+export declare const DsnCardFooterPaddingInlineEnd: string;
+export declare const DsnCardFooterColumnGap: string;
 export declare const DsnCardImagePlaceholderBackgroundColor: string;
 export declare const DsnCardImagePlaceholderColor: string;
 export declare const DsnCardHeadingFontFamily: string;
@@ -690,6 +706,17 @@ export declare const DsnCardHeadingFontWeight: string;
 export declare const DsnCardHeadingColor: string;
 export declare const DsnCardHeadingFontSize: string;
 export declare const DsnCardHeadingLineHeight: string;
+export declare const DsnCardLabelColor: string;
+export declare const DsnCardLabelFontFamily: string;
+export declare const DsnCardLabelFontSize: string;
+export declare const DsnCardLabelFontWeight: string;
+export declare const DsnCardLabelLineHeight: string;
+export declare const DsnCardDescriptionColor: string;
+export declare const DsnCardDescriptionFontSize: string;
+export declare const DsnCardDescriptionLineHeight: string;
+export declare const DsnCardMetaColor: string;
+export declare const DsnCardMetaFontSize: string;
+export declare const DsnCardMetaLineHeight: string;
 export declare const DsnCardGroupGap: string;
 export declare const DsnCardGroupItemMinWidth: string;
 export declare const DsnCheckboxGroupBorderWidth: string;
@@ -958,16 +985,19 @@ export declare const DsnMenuItemMinBlockSize: string;
 export declare const DsnMenuItemIconSize: string;
 export declare const DsnMenuItemColor: string;
 export declare const DsnMenuItemBackgroundColor: string;
+export declare const DsnMenuItemIndicatorWidth: string;
+export declare const DsnMenuItemIndicatorColor: string;
 export declare const DsnMenuItemHoverColor: string;
 export declare const DsnMenuItemHoverBackgroundColor: string;
+export declare const DsnMenuItemHoverIndicatorColor: string;
 export declare const DsnMenuItemActiveColor: string;
 export declare const DsnMenuItemActiveBackgroundColor: string;
+export declare const DsnMenuItemActiveIndicatorColor: string;
 export declare const DsnMenuLinkLevelIndent: string;
 export declare const DsnMenuLinkCurrentFontWeight: string;
 export declare const DsnMenuLinkCurrentColor: string;
 export declare const DsnMenuLinkCurrentBackgroundColor: string;
 export declare const DsnMenuLinkCurrentIndicatorColor: string;
-export declare const DsnMenuLinkCurrentIndicatorWidth: string;
 export declare const DsnMenuLinkCurrentHoverColor: string;
 export declare const DsnMenuLinkCurrentHoverBackgroundColor: string;
 export declare const DsnMenuLinkCurrentActiveColor: string;