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

package/dist/json/wireframe-dark-information-dense.json

@@ -148,12 +148,12 @@
   "DsnFormControlMaxInlineSize": "25rem",
   "DsnFormControlBorderRadius": "2px",
   "DsnFormControlBorderWidth": "2px",
-  "DsnFormControlWidthXs": "8ch",
-  "DsnFormControlWidthSm": "16ch",
-  "DsnFormControlWidthMd": "32ch",
-  "DsnFormControlWidthLg": "48ch",
-  "DsnFormControlWidthXl": "64ch",
-  "DsnFormControlWidthFull": "100%",
+  "DsnFormControlInlineSizeXs": "8ch",
+  "DsnFormControlInlineSizeSm": "16ch",
+  "DsnFormControlInlineSizeMd": "32ch",
+  "DsnFormControlInlineSizeLg": "48ch",
+  "DsnFormControlInlineSizeXl": "64ch",
+  "DsnFormControlInlineSizeFull": "100%",
   "DsnFormControlHoverBorderWidth": "4px",
   "DsnFormControlHoverAccentColor": "#ffffff",
   "DsnFormControlHoverBackgroundColor": "#000000",
@@ -675,11 +675,27 @@
   "DsnCardBorderColor": "#ffffff",
   "DsnCardBoxShadow": "none",
   "DsnCardBoxShadowHover": "none",
-  "DsnCardBodyPaddingBlock": "calc(0.5rem * 2)",
-  "DsnCardBodyPaddingInline": "calc(0.5rem * 2)",
+  "DsnCardMinBlockSize": "auto",
+  "DsnCardPreHeaderPaddingBlockStart": "calc(0.5rem * 2)",
+  "DsnCardPreHeaderPaddingBlockEnd": "calc(0.5rem * 1.5)",
+  "DsnCardPreHeaderPaddingInlineStart": "calc(0.5rem * 2)",
+  "DsnCardPreHeaderPaddingInlineEnd": "calc(0.5rem * 2)",
+  "DsnCardPreHeaderRowGap": "calc(0.5rem * 1.5)",
+  "DsnCardHeaderPaddingBlockStart": "calc(0.5rem * 2)",
+  "DsnCardHeaderPaddingBlockEnd": "calc(0.5rem * 1.5)",
+  "DsnCardHeaderPaddingInlineStart": "calc(0.5rem * 2)",
+  "DsnCardHeaderPaddingInlineEnd": "calc(0.5rem * 2)",
+  "DsnCardHeaderRowGap": "calc(0.5rem * 1.5)",
+  "DsnCardBodyPaddingBlockStart": "0",
+  "DsnCardBodyPaddingBlockEnd": "calc(0.5rem * 2)",
+  "DsnCardBodyPaddingInlineStart": "calc(0.5rem * 2)",
+  "DsnCardBodyPaddingInlineEnd": "calc(0.5rem * 2)",
   "DsnCardBodyRowGap": "calc(0.5rem * 1.5)",
+  "DsnCardFooterPaddingBlockStart": "0",
   "DsnCardFooterPaddingBlockEnd": "calc(0.5rem * 3)",
-  "DsnCardFooterPaddingInline": "calc(0.5rem * 2)",
+  "DsnCardFooterPaddingInlineStart": "calc(0.5rem * 2)",
+  "DsnCardFooterPaddingInlineEnd": "calc(0.5rem * 2)",
+  "DsnCardFooterColumnGap": "calc(0.5rem * 1)",
   "DsnCardImagePlaceholderBackgroundColor": "#000000",
   "DsnCardImagePlaceholderColor": "#ffffff",
   "DsnCardHeadingFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
@@ -687,6 +703,17 @@
   "DsnCardHeadingColor": "#ffffff",
   "DsnCardHeadingFontSize": "1.25rem",
   "DsnCardHeadingLineHeight": "1.2",
+  "DsnCardLabelColor": "#ffffff",
+  "DsnCardLabelFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
+  "DsnCardLabelFontSize": "1rem",
+  "DsnCardLabelFontWeight": "600",
+  "DsnCardLabelLineHeight": "1.4",
+  "DsnCardDescriptionColor": "#ffffff",
+  "DsnCardDescriptionFontSize": "1rem",
+  "DsnCardDescriptionLineHeight": "1.4",
+  "DsnCardMetaColor": "#ffffff",
+  "DsnCardMetaFontSize": "0.875rem",
+  "DsnCardMetaLineHeight": "1.4",
   "DsnCardGroupGap": "calc(0.5rem * 2)",
   "DsnCardGroupItemMinWidth": "17.5rem",
   "DsnCheckboxGroupBorderWidth": "0px",
@@ -955,16 +982,19 @@
   "DsnMenuItemIconSize": "calc(1rem * 1.4)",
   "DsnMenuItemColor": "#ffffff",
   "DsnMenuItemBackgroundColor": "#00000000",
+  "DsnMenuItemIndicatorWidth": "3px",
+  "DsnMenuItemIndicatorColor": "#00000000",
   "DsnMenuItemHoverColor": "#ffffff",
   "DsnMenuItemHoverBackgroundColor": "#000000",
+  "DsnMenuItemHoverIndicatorColor": "#ffffff",
   "DsnMenuItemActiveColor": "#ffffff",
   "DsnMenuItemActiveBackgroundColor": "#000000",
+  "DsnMenuItemActiveIndicatorColor": "#ffffff",
   "DsnMenuLinkLevelIndent": "calc(0.5rem * 3)",
   "DsnMenuLinkCurrentFontWeight": "600",
   "DsnMenuLinkCurrentColor": "#ffffff",
   "DsnMenuLinkCurrentBackgroundColor": "#000000",
   "DsnMenuLinkCurrentIndicatorColor": "#ffffff",
-  "DsnMenuLinkCurrentIndicatorWidth": "3px",
   "DsnMenuLinkCurrentHoverColor": "#ffffff",
   "DsnMenuLinkCurrentHoverBackgroundColor": "#000000",
   "DsnMenuLinkCurrentActiveColor": "#ffffff",

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

@@ -148,12 +148,12 @@
   "DsnFormControlMaxInlineSize": "25rem",
   "DsnFormControlBorderRadius": "2px",
   "DsnFormControlBorderWidth": "2px",
-  "DsnFormControlWidthXs": "8ch",
-  "DsnFormControlWidthSm": "16ch",
-  "DsnFormControlWidthMd": "32ch",
-  "DsnFormControlWidthLg": "48ch",
-  "DsnFormControlWidthXl": "64ch",
-  "DsnFormControlWidthFull": "100%",
+  "DsnFormControlInlineSizeXs": "8ch",
+  "DsnFormControlInlineSizeSm": "16ch",
+  "DsnFormControlInlineSizeMd": "32ch",
+  "DsnFormControlInlineSizeLg": "48ch",
+  "DsnFormControlInlineSizeXl": "64ch",
+  "DsnFormControlInlineSizeFull": "100%",
   "DsnFormControlHoverBorderWidth": "4px",
   "DsnFormControlHoverAccentColor": "#000000",
   "DsnFormControlHoverBackgroundColor": "#ffffff",
@@ -675,11 +675,27 @@
   "DsnCardBorderColor": "#000000",
   "DsnCardBoxShadow": "none",
   "DsnCardBoxShadowHover": "none",
-  "DsnCardBodyPaddingBlock": "calc(0.5rem * 2)",
-  "DsnCardBodyPaddingInline": "calc(0.5rem * 2)",
+  "DsnCardMinBlockSize": "auto",
+  "DsnCardPreHeaderPaddingBlockStart": "calc(0.5rem * 2)",
+  "DsnCardPreHeaderPaddingBlockEnd": "calc(0.5rem * 1.5)",
+  "DsnCardPreHeaderPaddingInlineStart": "calc(0.5rem * 2)",
+  "DsnCardPreHeaderPaddingInlineEnd": "calc(0.5rem * 2)",
+  "DsnCardPreHeaderRowGap": "calc(0.5rem * 1.5)",
+  "DsnCardHeaderPaddingBlockStart": "calc(0.5rem * 2)",
+  "DsnCardHeaderPaddingBlockEnd": "calc(0.5rem * 1.5)",
+  "DsnCardHeaderPaddingInlineStart": "calc(0.5rem * 2)",
+  "DsnCardHeaderPaddingInlineEnd": "calc(0.5rem * 2)",
+  "DsnCardHeaderRowGap": "calc(0.5rem * 1.5)",
+  "DsnCardBodyPaddingBlockStart": "0",
+  "DsnCardBodyPaddingBlockEnd": "calc(0.5rem * 2)",
+  "DsnCardBodyPaddingInlineStart": "calc(0.5rem * 2)",
+  "DsnCardBodyPaddingInlineEnd": "calc(0.5rem * 2)",
   "DsnCardBodyRowGap": "calc(0.5rem * 1.5)",
+  "DsnCardFooterPaddingBlockStart": "0",
   "DsnCardFooterPaddingBlockEnd": "calc(0.5rem * 3)",
-  "DsnCardFooterPaddingInline": "calc(0.5rem * 2)",
+  "DsnCardFooterPaddingInlineStart": "calc(0.5rem * 2)",
+  "DsnCardFooterPaddingInlineEnd": "calc(0.5rem * 2)",
+  "DsnCardFooterColumnGap": "calc(0.5rem * 1)",
   "DsnCardImagePlaceholderBackgroundColor": "#ffffff",
   "DsnCardImagePlaceholderColor": "#000000",
   "DsnCardHeadingFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
@@ -687,6 +703,17 @@
   "DsnCardHeadingColor": "#000000",
   "DsnCardHeadingFontSize": "clamp(1.25rem, 1.125rem + 0.375vw, 1.53125rem)",
   "DsnCardHeadingLineHeight": "1.2",
+  "DsnCardLabelColor": "#000000",
+  "DsnCardLabelFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
+  "DsnCardLabelFontSize": "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+  "DsnCardLabelFontWeight": "600",
+  "DsnCardLabelLineHeight": "1.4",
+  "DsnCardDescriptionColor": "#000000",
+  "DsnCardDescriptionFontSize": "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+  "DsnCardDescriptionLineHeight": "1.4",
+  "DsnCardMetaColor": "#000000",
+  "DsnCardMetaFontSize": "clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem)",
+  "DsnCardMetaLineHeight": "1.4",
   "DsnCardGroupGap": "calc(0.5rem * 2)",
   "DsnCardGroupItemMinWidth": "17.5rem",
   "DsnCheckboxGroupBorderWidth": "0px",
@@ -955,16 +982,19 @@
   "DsnMenuItemIconSize": "calc(clamp(1rem, 0.875rem + 0.375vw, 1.28125rem) * 1.4)",
   "DsnMenuItemColor": "#000000",
   "DsnMenuItemBackgroundColor": "#00000000",
+  "DsnMenuItemIndicatorWidth": "3px",
+  "DsnMenuItemIndicatorColor": "#00000000",
   "DsnMenuItemHoverColor": "#000000",
   "DsnMenuItemHoverBackgroundColor": "#ffffff",
+  "DsnMenuItemHoverIndicatorColor": "#000000",
   "DsnMenuItemActiveColor": "#000000",
   "DsnMenuItemActiveBackgroundColor": "#ffffff",
+  "DsnMenuItemActiveIndicatorColor": "#000000",
   "DsnMenuLinkLevelIndent": "calc(0.5rem * 3)",
   "DsnMenuLinkCurrentFontWeight": "600",
   "DsnMenuLinkCurrentColor": "#000000",
   "DsnMenuLinkCurrentBackgroundColor": "#ffffff",
   "DsnMenuLinkCurrentIndicatorColor": "#000000",
-  "DsnMenuLinkCurrentIndicatorWidth": "3px",
   "DsnMenuLinkCurrentHoverColor": "#000000",
   "DsnMenuLinkCurrentHoverBackgroundColor": "#ffffff",
   "DsnMenuLinkCurrentActiveColor": "#000000",

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

@@ -148,12 +148,12 @@
   "DsnFormControlMaxInlineSize": "25rem",
   "DsnFormControlBorderRadius": "2px",
   "DsnFormControlBorderWidth": "2px",
-  "DsnFormControlWidthXs": "8ch",
-  "DsnFormControlWidthSm": "16ch",
-  "DsnFormControlWidthMd": "32ch",
-  "DsnFormControlWidthLg": "48ch",
-  "DsnFormControlWidthXl": "64ch",
-  "DsnFormControlWidthFull": "100%",
+  "DsnFormControlInlineSizeXs": "8ch",
+  "DsnFormControlInlineSizeSm": "16ch",
+  "DsnFormControlInlineSizeMd": "32ch",
+  "DsnFormControlInlineSizeLg": "48ch",
+  "DsnFormControlInlineSizeXl": "64ch",
+  "DsnFormControlInlineSizeFull": "100%",
   "DsnFormControlHoverBorderWidth": "4px",
   "DsnFormControlHoverAccentColor": "#000000",
   "DsnFormControlHoverBackgroundColor": "#ffffff",
@@ -675,11 +675,27 @@
   "DsnCardBorderColor": "#000000",
   "DsnCardBoxShadow": "none",
   "DsnCardBoxShadowHover": "none",
-  "DsnCardBodyPaddingBlock": "calc(0.5rem * 2)",
-  "DsnCardBodyPaddingInline": "calc(0.5rem * 2)",
+  "DsnCardMinBlockSize": "auto",
+  "DsnCardPreHeaderPaddingBlockStart": "calc(0.5rem * 2)",
+  "DsnCardPreHeaderPaddingBlockEnd": "calc(0.5rem * 1.5)",
+  "DsnCardPreHeaderPaddingInlineStart": "calc(0.5rem * 2)",
+  "DsnCardPreHeaderPaddingInlineEnd": "calc(0.5rem * 2)",
+  "DsnCardPreHeaderRowGap": "calc(0.5rem * 1.5)",
+  "DsnCardHeaderPaddingBlockStart": "calc(0.5rem * 2)",
+  "DsnCardHeaderPaddingBlockEnd": "calc(0.5rem * 1.5)",
+  "DsnCardHeaderPaddingInlineStart": "calc(0.5rem * 2)",
+  "DsnCardHeaderPaddingInlineEnd": "calc(0.5rem * 2)",
+  "DsnCardHeaderRowGap": "calc(0.5rem * 1.5)",
+  "DsnCardBodyPaddingBlockStart": "0",
+  "DsnCardBodyPaddingBlockEnd": "calc(0.5rem * 2)",
+  "DsnCardBodyPaddingInlineStart": "calc(0.5rem * 2)",
+  "DsnCardBodyPaddingInlineEnd": "calc(0.5rem * 2)",
   "DsnCardBodyRowGap": "calc(0.5rem * 1.5)",
+  "DsnCardFooterPaddingBlockStart": "0",
   "DsnCardFooterPaddingBlockEnd": "calc(0.5rem * 3)",
-  "DsnCardFooterPaddingInline": "calc(0.5rem * 2)",
+  "DsnCardFooterPaddingInlineStart": "calc(0.5rem * 2)",
+  "DsnCardFooterPaddingInlineEnd": "calc(0.5rem * 2)",
+  "DsnCardFooterColumnGap": "calc(0.5rem * 1)",
   "DsnCardImagePlaceholderBackgroundColor": "#ffffff",
   "DsnCardImagePlaceholderColor": "#000000",
   "DsnCardHeadingFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
@@ -687,6 +703,17 @@
   "DsnCardHeadingColor": "#000000",
   "DsnCardHeadingFontSize": "1.25rem",
   "DsnCardHeadingLineHeight": "1.2",
+  "DsnCardLabelColor": "#000000",
+  "DsnCardLabelFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
+  "DsnCardLabelFontSize": "1rem",
+  "DsnCardLabelFontWeight": "600",
+  "DsnCardLabelLineHeight": "1.4",
+  "DsnCardDescriptionColor": "#000000",
+  "DsnCardDescriptionFontSize": "1rem",
+  "DsnCardDescriptionLineHeight": "1.4",
+  "DsnCardMetaColor": "#000000",
+  "DsnCardMetaFontSize": "0.875rem",
+  "DsnCardMetaLineHeight": "1.4",
   "DsnCardGroupGap": "calc(0.5rem * 2)",
   "DsnCardGroupItemMinWidth": "17.5rem",
   "DsnCheckboxGroupBorderWidth": "0px",
@@ -955,16 +982,19 @@
   "DsnMenuItemIconSize": "calc(1rem * 1.4)",
   "DsnMenuItemColor": "#000000",
   "DsnMenuItemBackgroundColor": "#00000000",
+  "DsnMenuItemIndicatorWidth": "3px",
+  "DsnMenuItemIndicatorColor": "#00000000",
   "DsnMenuItemHoverColor": "#000000",
   "DsnMenuItemHoverBackgroundColor": "#ffffff",
+  "DsnMenuItemHoverIndicatorColor": "#000000",
   "DsnMenuItemActiveColor": "#000000",
   "DsnMenuItemActiveBackgroundColor": "#ffffff",
+  "DsnMenuItemActiveIndicatorColor": "#000000",
   "DsnMenuLinkLevelIndent": "calc(0.5rem * 3)",
   "DsnMenuLinkCurrentFontWeight": "600",
   "DsnMenuLinkCurrentColor": "#000000",
   "DsnMenuLinkCurrentBackgroundColor": "#ffffff",
   "DsnMenuLinkCurrentIndicatorColor": "#000000",
-  "DsnMenuLinkCurrentIndicatorWidth": "3px",
   "DsnMenuLinkCurrentHoverColor": "#000000",
   "DsnMenuLinkCurrentHoverBackgroundColor": "#ffffff",
   "DsnMenuLinkCurrentActiveColor": "#000000",

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

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

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

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