@dsn-starter-kit/design-tokens 2.0.0 → 3.1.0

package/dist/json/start-dark-default.json

@@ -798,6 +798,7 @@
   "DsnDotBadgeInsetBlockStart": "0.25rem",
   "DsnDotBadgeInsetInlineEnd": "0.25rem",
   "DsnDotBadgePulseDuration": "1500ms",
+  "DsnDotBadgePulseIterationCount": "3",
   "DsnDotBadgePulseEasing": "cubic-bezier(0.25, 0.1, 0.25, 1)",
   "DsnDrawerZIndex": "500",
   "DsnDrawerBackgroundColor": "#111111",
@@ -910,6 +911,17 @@
   "DsnHeroColorInverse": "#000000",
   "DsnHeroBorderBlockWidth": "1px",
   "DsnHeroImageBlendColor": "#8faed2",
+  "DsnIconListColor": "#f1f1f1",
+  "DsnIconListFontFamily": "IBM Plex Sans, sans-serif",
+  "DsnIconListFontSize": "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+  "DsnIconListFontWeight": "400",
+  "DsnIconListLineHeight": "1.5",
+  "DsnIconListMaxInlineSize": "65ch",
+  "DsnIconListGap": "calc(0.5rem * 0.5)",
+  "DsnIconListMarginBlockEnd": "calc(0.5rem * 1.5)",
+  "DsnIconListIconColor": "#8faed2",
+  "DsnIconListIconSize": "calc(clamp(1rem, 0.875rem + 0.375vw, 1.28125rem) * 1.5)",
+  "DsnIconListIconGap": "calc(0.5rem * 1)",
   "DsnImageBorderRadius": "8px",
   "DsnImageCaptionColor": "#8b8b8b",
   "DsnImageCaptionFontSize": "clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem)",

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

@@ -798,6 +798,7 @@
   "DsnDotBadgeInsetBlockStart": "0.25rem",
   "DsnDotBadgeInsetInlineEnd": "0.25rem",
   "DsnDotBadgePulseDuration": "1500ms",
+  "DsnDotBadgePulseIterationCount": "3",
   "DsnDotBadgePulseEasing": "cubic-bezier(0.25, 0.1, 0.25, 1)",
   "DsnDrawerZIndex": "500",
   "DsnDrawerBackgroundColor": "#111111",
@@ -910,6 +911,17 @@
   "DsnHeroColorInverse": "#000000",
   "DsnHeroBorderBlockWidth": "1px",
   "DsnHeroImageBlendColor": "#8faed2",
+  "DsnIconListColor": "#f1f1f1",
+  "DsnIconListFontFamily": "IBM Plex Sans, sans-serif",
+  "DsnIconListFontSize": "1rem",
+  "DsnIconListFontWeight": "400",
+  "DsnIconListLineHeight": "1.5",
+  "DsnIconListMaxInlineSize": "65ch",
+  "DsnIconListGap": "calc(0.5rem * 0.5)",
+  "DsnIconListMarginBlockEnd": "calc(0.5rem * 1.5)",
+  "DsnIconListIconColor": "#8faed2",
+  "DsnIconListIconSize": "calc(1rem * 1.5)",
+  "DsnIconListIconGap": "calc(0.5rem * 1)",
   "DsnImageBorderRadius": "8px",
   "DsnImageCaptionColor": "#8b8b8b",
   "DsnImageCaptionFontSize": "0.875rem",

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

@@ -798,6 +798,7 @@
   "DsnDotBadgeInsetBlockStart": "0.25rem",
   "DsnDotBadgeInsetInlineEnd": "0.25rem",
   "DsnDotBadgePulseDuration": "1500ms",
+  "DsnDotBadgePulseIterationCount": "3",
   "DsnDotBadgePulseEasing": "cubic-bezier(0.25, 0.1, 0.25, 1)",
   "DsnDrawerZIndex": "500",
   "DsnDrawerBackgroundColor": "#fcfcfc",
@@ -910,6 +911,17 @@
   "DsnHeroColorInverse": "#ffffff",
   "DsnHeroBorderBlockWidth": "1px",
   "DsnHeroImageBlendColor": "#1b59a4",
+  "DsnIconListColor": "#1b1b1b",
+  "DsnIconListFontFamily": "IBM Plex Sans, sans-serif",
+  "DsnIconListFontSize": "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+  "DsnIconListFontWeight": "400",
+  "DsnIconListLineHeight": "1.5",
+  "DsnIconListMaxInlineSize": "65ch",
+  "DsnIconListGap": "calc(0.5rem * 0.5)",
+  "DsnIconListMarginBlockEnd": "calc(0.5rem * 1.5)",
+  "DsnIconListIconColor": "#1b59a4",
+  "DsnIconListIconSize": "calc(clamp(1rem, 0.875rem + 0.375vw, 1.28125rem) * 1.5)",
+  "DsnIconListIconGap": "calc(0.5rem * 1)",
   "DsnImageBorderRadius": "8px",
   "DsnImageCaptionColor": "#636363",
   "DsnImageCaptionFontSize": "clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem)",

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

@@ -798,6 +798,7 @@
   "DsnDotBadgeInsetBlockStart": "0.25rem",
   "DsnDotBadgeInsetInlineEnd": "0.25rem",
   "DsnDotBadgePulseDuration": "1500ms",
+  "DsnDotBadgePulseIterationCount": "3",
   "DsnDotBadgePulseEasing": "cubic-bezier(0.25, 0.1, 0.25, 1)",
   "DsnDrawerZIndex": "500",
   "DsnDrawerBackgroundColor": "#fcfcfc",
@@ -910,6 +911,17 @@
   "DsnHeroColorInverse": "#ffffff",
   "DsnHeroBorderBlockWidth": "1px",
   "DsnHeroImageBlendColor": "#1b59a4",
+  "DsnIconListColor": "#1b1b1b",
+  "DsnIconListFontFamily": "IBM Plex Sans, sans-serif",
+  "DsnIconListFontSize": "1rem",
+  "DsnIconListFontWeight": "400",
+  "DsnIconListLineHeight": "1.5",
+  "DsnIconListMaxInlineSize": "65ch",
+  "DsnIconListGap": "calc(0.5rem * 0.5)",
+  "DsnIconListMarginBlockEnd": "calc(0.5rem * 1.5)",
+  "DsnIconListIconColor": "#1b59a4",
+  "DsnIconListIconSize": "calc(1rem * 1.5)",
+  "DsnIconListIconGap": "calc(0.5rem * 1)",
   "DsnImageBorderRadius": "8px",
   "DsnImageCaptionColor": "#636363",
   "DsnImageCaptionFontSize": "0.875rem",

package/dist/json/tokens-dark.json

@@ -798,6 +798,7 @@
   "DsnDotBadgeInsetBlockStart": "0.25rem",
   "DsnDotBadgeInsetInlineEnd": "0.25rem",
   "DsnDotBadgePulseDuration": "1500ms",
+  "DsnDotBadgePulseIterationCount": "3",
   "DsnDotBadgePulseEasing": "cubic-bezier(0.25, 0.1, 0.25, 1)",
   "DsnDrawerZIndex": "500",
   "DsnDrawerBackgroundColor": "#111111",
@@ -910,6 +911,17 @@
   "DsnHeroColorInverse": "#000000",
   "DsnHeroBorderBlockWidth": "1px",
   "DsnHeroImageBlendColor": "#8faed2",
+  "DsnIconListColor": "#f1f1f1",
+  "DsnIconListFontFamily": "IBM Plex Sans, sans-serif",
+  "DsnIconListFontSize": "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+  "DsnIconListFontWeight": "400",
+  "DsnIconListLineHeight": "1.5",
+  "DsnIconListMaxInlineSize": "65ch",
+  "DsnIconListGap": "calc(0.5rem * 0.5)",
+  "DsnIconListMarginBlockEnd": "calc(0.5rem * 1.5)",
+  "DsnIconListIconColor": "#8faed2",
+  "DsnIconListIconSize": "calc(clamp(1rem, 0.875rem + 0.375vw, 1.28125rem) * 1.5)",
+  "DsnIconListIconGap": "calc(0.5rem * 1)",
   "DsnImageBorderRadius": "8px",
   "DsnImageCaptionColor": "#8b8b8b",
   "DsnImageCaptionFontSize": "clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem)",

package/dist/json/tokens.json

@@ -798,6 +798,7 @@
   "DsnDotBadgeInsetBlockStart": "0.25rem",
   "DsnDotBadgeInsetInlineEnd": "0.25rem",
   "DsnDotBadgePulseDuration": "1500ms",
+  "DsnDotBadgePulseIterationCount": "3",
   "DsnDotBadgePulseEasing": "cubic-bezier(0.25, 0.1, 0.25, 1)",
   "DsnDrawerZIndex": "500",
   "DsnDrawerBackgroundColor": "#fcfcfc",
@@ -910,6 +911,17 @@
   "DsnHeroColorInverse": "#ffffff",
   "DsnHeroBorderBlockWidth": "1px",
   "DsnHeroImageBlendColor": "#1b59a4",
+  "DsnIconListColor": "#1b1b1b",
+  "DsnIconListFontFamily": "IBM Plex Sans, sans-serif",
+  "DsnIconListFontSize": "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+  "DsnIconListFontWeight": "400",
+  "DsnIconListLineHeight": "1.5",
+  "DsnIconListMaxInlineSize": "65ch",
+  "DsnIconListGap": "calc(0.5rem * 0.5)",
+  "DsnIconListMarginBlockEnd": "calc(0.5rem * 1.5)",
+  "DsnIconListIconColor": "#1b59a4",
+  "DsnIconListIconSize": "calc(clamp(1rem, 0.875rem + 0.375vw, 1.28125rem) * 1.5)",
+  "DsnIconListIconGap": "calc(0.5rem * 1)",
   "DsnImageBorderRadius": "8px",
   "DsnImageCaptionColor": "#636363",
   "DsnImageCaptionFontSize": "clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem)",

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

@@ -794,6 +794,7 @@
   "DsnDotBadgeInsetBlockStart": "0.25rem",
   "DsnDotBadgeInsetInlineEnd": "0.25rem",
   "DsnDotBadgePulseDuration": "1500ms",
+  "DsnDotBadgePulseIterationCount": "3",
   "DsnDotBadgePulseEasing": "cubic-bezier(0.25, 0.1, 0.25, 1)",
   "DsnDrawerZIndex": "500",
   "DsnDrawerBackgroundColor": "#000000",
@@ -906,6 +907,17 @@
   "DsnHeroColorInverse": "#000000",
   "DsnHeroBorderBlockWidth": "2px",
   "DsnHeroImageBlendColor": "#ffffff",
+  "DsnIconListColor": "#ffffff",
+  "DsnIconListFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
+  "DsnIconListFontSize": "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+  "DsnIconListFontWeight": "400",
+  "DsnIconListLineHeight": "1.4",
+  "DsnIconListMaxInlineSize": "65ch",
+  "DsnIconListGap": "calc(0.5rem * 0.5)",
+  "DsnIconListMarginBlockEnd": "calc(0.5rem * 1.5)",
+  "DsnIconListIconColor": "#ffffff",
+  "DsnIconListIconSize": "calc(clamp(1rem, 0.875rem + 0.375vw, 1.28125rem) * 1.4)",
+  "DsnIconListIconGap": "calc(0.5rem * 1)",
   "DsnImageBorderRadius": "4px",
   "DsnImageCaptionColor": "#ffffff",
   "DsnImageCaptionFontSize": "clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem)",

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

@@ -794,6 +794,7 @@
   "DsnDotBadgeInsetBlockStart": "0.25rem",
   "DsnDotBadgeInsetInlineEnd": "0.25rem",
   "DsnDotBadgePulseDuration": "1500ms",
+  "DsnDotBadgePulseIterationCount": "3",
   "DsnDotBadgePulseEasing": "cubic-bezier(0.25, 0.1, 0.25, 1)",
   "DsnDrawerZIndex": "500",
   "DsnDrawerBackgroundColor": "#000000",
@@ -906,6 +907,17 @@
   "DsnHeroColorInverse": "#000000",
   "DsnHeroBorderBlockWidth": "2px",
   "DsnHeroImageBlendColor": "#ffffff",
+  "DsnIconListColor": "#ffffff",
+  "DsnIconListFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
+  "DsnIconListFontSize": "1rem",
+  "DsnIconListFontWeight": "400",
+  "DsnIconListLineHeight": "1.4",
+  "DsnIconListMaxInlineSize": "65ch",
+  "DsnIconListGap": "calc(0.5rem * 0.5)",
+  "DsnIconListMarginBlockEnd": "calc(0.5rem * 1.5)",
+  "DsnIconListIconColor": "#ffffff",
+  "DsnIconListIconSize": "calc(1rem * 1.4)",
+  "DsnIconListIconGap": "calc(0.5rem * 1)",
   "DsnImageBorderRadius": "4px",
   "DsnImageCaptionColor": "#ffffff",
   "DsnImageCaptionFontSize": "0.875rem",

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

@@ -794,6 +794,7 @@
   "DsnDotBadgeInsetBlockStart": "0.25rem",
   "DsnDotBadgeInsetInlineEnd": "0.25rem",
   "DsnDotBadgePulseDuration": "1500ms",
+  "DsnDotBadgePulseIterationCount": "3",
   "DsnDotBadgePulseEasing": "cubic-bezier(0.25, 0.1, 0.25, 1)",
   "DsnDrawerZIndex": "500",
   "DsnDrawerBackgroundColor": "#ffffff",
@@ -906,6 +907,17 @@
   "DsnHeroColorInverse": "#ffffff",
   "DsnHeroBorderBlockWidth": "2px",
   "DsnHeroImageBlendColor": "#000000",
+  "DsnIconListColor": "#000000",
+  "DsnIconListFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
+  "DsnIconListFontSize": "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+  "DsnIconListFontWeight": "400",
+  "DsnIconListLineHeight": "1.4",
+  "DsnIconListMaxInlineSize": "65ch",
+  "DsnIconListGap": "calc(0.5rem * 0.5)",
+  "DsnIconListMarginBlockEnd": "calc(0.5rem * 1.5)",
+  "DsnIconListIconColor": "#000000",
+  "DsnIconListIconSize": "calc(clamp(1rem, 0.875rem + 0.375vw, 1.28125rem) * 1.4)",
+  "DsnIconListIconGap": "calc(0.5rem * 1)",
   "DsnImageBorderRadius": "4px",
   "DsnImageCaptionColor": "#000000",
   "DsnImageCaptionFontSize": "clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem)",

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

@@ -794,6 +794,7 @@
   "DsnDotBadgeInsetBlockStart": "0.25rem",
   "DsnDotBadgeInsetInlineEnd": "0.25rem",
   "DsnDotBadgePulseDuration": "1500ms",
+  "DsnDotBadgePulseIterationCount": "3",
   "DsnDotBadgePulseEasing": "cubic-bezier(0.25, 0.1, 0.25, 1)",
   "DsnDrawerZIndex": "500",
   "DsnDrawerBackgroundColor": "#ffffff",
@@ -906,6 +907,17 @@
   "DsnHeroColorInverse": "#ffffff",
   "DsnHeroBorderBlockWidth": "2px",
   "DsnHeroImageBlendColor": "#000000",
+  "DsnIconListColor": "#000000",
+  "DsnIconListFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
+  "DsnIconListFontSize": "1rem",
+  "DsnIconListFontWeight": "400",
+  "DsnIconListLineHeight": "1.4",
+  "DsnIconListMaxInlineSize": "65ch",
+  "DsnIconListGap": "calc(0.5rem * 0.5)",
+  "DsnIconListMarginBlockEnd": "calc(0.5rem * 1.5)",
+  "DsnIconListIconColor": "#000000",
+  "DsnIconListIconSize": "calc(1rem * 1.4)",
+  "DsnIconListIconGap": "calc(0.5rem * 1)",
   "DsnImageBorderRadius": "4px",
   "DsnImageCaptionColor": "#000000",
   "DsnImageCaptionFontSize": "0.875rem",

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

@@ -320,6 +320,7 @@ $dsn-dot-badge-size: 0.5rem; // Diameter van de dot (8px)
 $dsn-dot-badge-inset-block-start: 0.25rem; // Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent
 $dsn-dot-badge-inset-inline-end: 0.25rem; // Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent
 $dsn-dot-badge-pulse-duration: 1500ms; // Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition
+$dsn-dot-badge-pulse-iteration-count: 3; // Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen
 $dsn-drawer-max-width: 25rem; // Maximale breedte van het zijpaneel (400px)
 $dsn-drawer-min-gap: 3rem; // Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px)
 $dsn-file-box-shadow: none; // Geen schaduw standaard — zelfde als Card
@@ -857,6 +858,16 @@ $dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de
 $dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero
 $dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
 $dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant
+$dsn-icon-list-color: $dsn-color-neutral-color-document; // Icon list text color
+$dsn-icon-list-font-family: $dsn-text-font-family-default; // Icon list font family
+$dsn-icon-list-font-size: $dsn-text-font-size-md; // Icon list font size
+$dsn-icon-list-font-weight: $dsn-text-font-weight-default; // Icon list font weight
+$dsn-icon-list-line-height: $dsn-text-line-height-md; // Icon list line height
+$dsn-icon-list-max-inline-size: $dsn-text-max-inline-size; // Icon list max width for readability
+$dsn-icon-list-gap: $dsn-space-row-sm; // Space between list items
+$dsn-icon-list-margin-block-end: $dsn-space-row-lg; // Icon list bottom margin
+$dsn-icon-list-icon-color: $dsn-color-accent-1-color-default; // Default icon color, same as the UnorderedList marker color
+$dsn-icon-list-icon-gap: $dsn-space-text-md; // Space between icon and text
 $dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
 $dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
 $dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
@@ -1204,14 +1215,13 @@ $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-container-elevated-box-shadow: $dsn-box-shadow-sm; // Lichte schaduw voor kaart-achtige containers (cards, panels)
+$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-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
 $dsn-details-icon-size: $dsn-icon-size-md; // Grootte van het chevron-icoon
 $dsn-drawer-box-shadow: $dsn-box-shadow-lg; // Schaduw van het zijpaneel — hoogste elevatie (lg)
 $dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
-$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-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
 $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
@@ -1223,6 +1233,7 @@ $dsn-file-media-icon-size: $dsn-icon-size-md;
 $dsn-file-status-icon-size: $dsn-icon-size-md;
 $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
+$dsn-icon-list-icon-size: $dsn-icon-size-md; // Icon size equal to one line height, scales with the fluid type scale
 $dsn-link-color: $dsn-color-action-2-color-default; // Tekstkleur van de link
 $dsn-link-icon-size: $dsn-icon-size-md; // Icoongrootte van de link
 $dsn-link-text-decoration-color: $dsn-color-action-2-color-default; // Kleur van de onderstreping van de link
@@ -1349,6 +1360,7 @@ $dsn-checkbox-indeterminate-active-background-color: $dsn-form-control-active-ac
 $dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
 $dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-accent-color;
+$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
 $dsn-radio-checked-background-color: $dsn-form-control-accent-color;
 $dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;

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

@@ -320,6 +320,7 @@ $dsn-dot-badge-size: 0.5rem; // Diameter van de dot (8px)
 $dsn-dot-badge-inset-block-start: 0.25rem; // Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent
 $dsn-dot-badge-inset-inline-end: 0.25rem; // Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent
 $dsn-dot-badge-pulse-duration: 1500ms; // Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition
+$dsn-dot-badge-pulse-iteration-count: 3; // Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen
 $dsn-drawer-max-width: 25rem; // Maximale breedte van het zijpaneel (400px)
 $dsn-drawer-min-gap: 3rem; // Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px)
 $dsn-file-box-shadow: none; // Geen schaduw standaard — zelfde als Card
@@ -857,6 +858,16 @@ $dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de
 $dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero
 $dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
 $dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant
+$dsn-icon-list-color: $dsn-color-neutral-color-document; // Icon list text color
+$dsn-icon-list-font-family: $dsn-text-font-family-default; // Icon list font family
+$dsn-icon-list-font-size: $dsn-text-font-size-md; // Icon list font size
+$dsn-icon-list-font-weight: $dsn-text-font-weight-default; // Icon list font weight
+$dsn-icon-list-line-height: $dsn-text-line-height-md; // Icon list line height
+$dsn-icon-list-max-inline-size: $dsn-text-max-inline-size; // Icon list max width for readability
+$dsn-icon-list-gap: $dsn-space-row-sm; // Space between list items
+$dsn-icon-list-margin-block-end: $dsn-space-row-lg; // Icon list bottom margin
+$dsn-icon-list-icon-color: $dsn-color-accent-1-color-default; // Default icon color, same as the UnorderedList marker color
+$dsn-icon-list-icon-gap: $dsn-space-text-md; // Space between icon and text
 $dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
 $dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
 $dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
@@ -1204,14 +1215,13 @@ $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-container-elevated-box-shadow: $dsn-box-shadow-sm; // Lichte schaduw voor kaart-achtige containers (cards, panels)
+$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-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
 $dsn-details-icon-size: $dsn-icon-size-md; // Grootte van het chevron-icoon
 $dsn-drawer-box-shadow: $dsn-box-shadow-lg; // Schaduw van het zijpaneel — hoogste elevatie (lg)
 $dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
-$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-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
 $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
@@ -1223,6 +1233,7 @@ $dsn-file-media-icon-size: $dsn-icon-size-md;
 $dsn-file-status-icon-size: $dsn-icon-size-md;
 $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
+$dsn-icon-list-icon-size: $dsn-icon-size-md; // Icon size equal to one line height, scales with the fluid type scale
 $dsn-link-color: $dsn-color-action-2-color-default; // Tekstkleur van de link
 $dsn-link-icon-size: $dsn-icon-size-md; // Icoongrootte van de link
 $dsn-link-text-decoration-color: $dsn-color-action-2-color-default; // Kleur van de onderstreping van de link
@@ -1349,6 +1360,7 @@ $dsn-checkbox-indeterminate-active-background-color: $dsn-form-control-active-ac
 $dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
 $dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-accent-color;
+$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
 $dsn-radio-checked-background-color: $dsn-form-control-accent-color;
 $dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;

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

@@ -320,6 +320,7 @@ $dsn-dot-badge-size: 0.5rem; // Diameter van de dot (8px)
 $dsn-dot-badge-inset-block-start: 0.25rem; // Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent
 $dsn-dot-badge-inset-inline-end: 0.25rem; // Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent
 $dsn-dot-badge-pulse-duration: 1500ms; // Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition
+$dsn-dot-badge-pulse-iteration-count: 3; // Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen
 $dsn-drawer-max-width: 25rem; // Maximale breedte van het zijpaneel (400px)
 $dsn-drawer-min-gap: 3rem; // Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px)
 $dsn-file-box-shadow: none; // Geen schaduw standaard — zelfde als Card
@@ -857,6 +858,16 @@ $dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de
 $dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero
 $dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
 $dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant
+$dsn-icon-list-color: $dsn-color-neutral-color-document; // Icon list text color
+$dsn-icon-list-font-family: $dsn-text-font-family-default; // Icon list font family
+$dsn-icon-list-font-size: $dsn-text-font-size-md; // Icon list font size
+$dsn-icon-list-font-weight: $dsn-text-font-weight-default; // Icon list font weight
+$dsn-icon-list-line-height: $dsn-text-line-height-md; // Icon list line height
+$dsn-icon-list-max-inline-size: $dsn-text-max-inline-size; // Icon list max width for readability
+$dsn-icon-list-gap: $dsn-space-row-sm; // Space between list items
+$dsn-icon-list-margin-block-end: $dsn-space-row-lg; // Icon list bottom margin
+$dsn-icon-list-icon-color: $dsn-color-accent-1-color-default; // Default icon color, same as the UnorderedList marker color
+$dsn-icon-list-icon-gap: $dsn-space-text-md; // Space between icon and text
 $dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
 $dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
 $dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
@@ -1204,14 +1215,13 @@ $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-container-elevated-box-shadow: $dsn-box-shadow-sm; // Lichte schaduw voor kaart-achtige containers (cards, panels)
+$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-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
 $dsn-details-icon-size: $dsn-icon-size-md; // Grootte van het chevron-icoon
 $dsn-drawer-box-shadow: $dsn-box-shadow-lg; // Schaduw van het zijpaneel — hoogste elevatie (lg)
 $dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
-$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-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
 $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
@@ -1223,6 +1233,7 @@ $dsn-file-media-icon-size: $dsn-icon-size-md;
 $dsn-file-status-icon-size: $dsn-icon-size-md;
 $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
+$dsn-icon-list-icon-size: $dsn-icon-size-md; // Icon size equal to one line height, scales with the fluid type scale
 $dsn-link-color: $dsn-color-action-2-color-default; // Tekstkleur van de link
 $dsn-link-icon-size: $dsn-icon-size-md; // Icoongrootte van de link
 $dsn-link-text-decoration-color: $dsn-color-action-2-color-default; // Kleur van de onderstreping van de link
@@ -1349,6 +1360,7 @@ $dsn-checkbox-indeterminate-active-background-color: $dsn-form-control-active-ac
 $dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
 $dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-accent-color;
+$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
 $dsn-radio-checked-background-color: $dsn-form-control-accent-color;
 $dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;

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

@@ -320,6 +320,7 @@ $dsn-dot-badge-size: 0.5rem; // Diameter van de dot (8px)
 $dsn-dot-badge-inset-block-start: 0.25rem; // Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent
 $dsn-dot-badge-inset-inline-end: 0.25rem; // Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent
 $dsn-dot-badge-pulse-duration: 1500ms; // Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition
+$dsn-dot-badge-pulse-iteration-count: 3; // Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen
 $dsn-drawer-max-width: 25rem; // Maximale breedte van het zijpaneel (400px)
 $dsn-drawer-min-gap: 3rem; // Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px)
 $dsn-file-box-shadow: none; // Geen schaduw standaard — zelfde als Card
@@ -857,6 +858,16 @@ $dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de
 $dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero
 $dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
 $dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant
+$dsn-icon-list-color: $dsn-color-neutral-color-document; // Icon list text color
+$dsn-icon-list-font-family: $dsn-text-font-family-default; // Icon list font family
+$dsn-icon-list-font-size: $dsn-text-font-size-md; // Icon list font size
+$dsn-icon-list-font-weight: $dsn-text-font-weight-default; // Icon list font weight
+$dsn-icon-list-line-height: $dsn-text-line-height-md; // Icon list line height
+$dsn-icon-list-max-inline-size: $dsn-text-max-inline-size; // Icon list max width for readability
+$dsn-icon-list-gap: $dsn-space-row-sm; // Space between list items
+$dsn-icon-list-margin-block-end: $dsn-space-row-lg; // Icon list bottom margin
+$dsn-icon-list-icon-color: $dsn-color-accent-1-color-default; // Default icon color, same as the UnorderedList marker color
+$dsn-icon-list-icon-gap: $dsn-space-text-md; // Space between icon and text
 $dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
 $dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
 $dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
@@ -1204,14 +1215,13 @@ $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-container-elevated-box-shadow: $dsn-box-shadow-sm; // Lichte schaduw voor kaart-achtige containers (cards, panels)
+$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-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
 $dsn-details-icon-size: $dsn-icon-size-md; // Grootte van het chevron-icoon
 $dsn-drawer-box-shadow: $dsn-box-shadow-lg; // Schaduw van het zijpaneel — hoogste elevatie (lg)
 $dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
-$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-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
 $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
@@ -1223,6 +1233,7 @@ $dsn-file-media-icon-size: $dsn-icon-size-md;
 $dsn-file-status-icon-size: $dsn-icon-size-md;
 $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
+$dsn-icon-list-icon-size: $dsn-icon-size-md; // Icon size equal to one line height, scales with the fluid type scale
 $dsn-link-color: $dsn-color-action-2-color-default; // Tekstkleur van de link
 $dsn-link-icon-size: $dsn-icon-size-md; // Icoongrootte van de link
 $dsn-link-text-decoration-color: $dsn-color-action-2-color-default; // Kleur van de onderstreping van de link
@@ -1349,6 +1360,7 @@ $dsn-checkbox-indeterminate-active-background-color: $dsn-form-control-active-ac
 $dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
 $dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-accent-color;
+$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
 $dsn-radio-checked-background-color: $dsn-form-control-accent-color;
 $dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;

package/dist/scss/_variables-dark.scss

@@ -320,6 +320,7 @@ $dsn-dot-badge-size: 0.5rem; // Diameter van de dot (8px)
 $dsn-dot-badge-inset-block-start: 0.25rem; // Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent
 $dsn-dot-badge-inset-inline-end: 0.25rem; // Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent
 $dsn-dot-badge-pulse-duration: 1500ms; // Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition
+$dsn-dot-badge-pulse-iteration-count: 3; // Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen
 $dsn-drawer-max-width: 25rem; // Maximale breedte van het zijpaneel (400px)
 $dsn-drawer-min-gap: 3rem; // Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px)
 $dsn-file-box-shadow: none; // Geen schaduw standaard — zelfde als Card
@@ -857,6 +858,16 @@ $dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de
 $dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero
 $dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
 $dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant
+$dsn-icon-list-color: $dsn-color-neutral-color-document; // Icon list text color
+$dsn-icon-list-font-family: $dsn-text-font-family-default; // Icon list font family
+$dsn-icon-list-font-size: $dsn-text-font-size-md; // Icon list font size
+$dsn-icon-list-font-weight: $dsn-text-font-weight-default; // Icon list font weight
+$dsn-icon-list-line-height: $dsn-text-line-height-md; // Icon list line height
+$dsn-icon-list-max-inline-size: $dsn-text-max-inline-size; // Icon list max width for readability
+$dsn-icon-list-gap: $dsn-space-row-sm; // Space between list items
+$dsn-icon-list-margin-block-end: $dsn-space-row-lg; // Icon list bottom margin
+$dsn-icon-list-icon-color: $dsn-color-accent-1-color-default; // Default icon color, same as the UnorderedList marker color
+$dsn-icon-list-icon-gap: $dsn-space-text-md; // Space between icon and text
 $dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
 $dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
 $dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
@@ -1204,14 +1215,13 @@ $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-container-elevated-box-shadow: $dsn-box-shadow-sm; // Lichte schaduw voor kaart-achtige containers (cards, panels)
+$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-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
 $dsn-details-icon-size: $dsn-icon-size-md; // Grootte van het chevron-icoon
 $dsn-drawer-box-shadow: $dsn-box-shadow-lg; // Schaduw van het zijpaneel — hoogste elevatie (lg)
 $dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
-$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-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
 $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
@@ -1223,6 +1233,7 @@ $dsn-file-media-icon-size: $dsn-icon-size-md;
 $dsn-file-status-icon-size: $dsn-icon-size-md;
 $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
+$dsn-icon-list-icon-size: $dsn-icon-size-md; // Icon size equal to one line height, scales with the fluid type scale
 $dsn-link-color: $dsn-color-action-2-color-default; // Tekstkleur van de link
 $dsn-link-icon-size: $dsn-icon-size-md; // Icoongrootte van de link
 $dsn-link-text-decoration-color: $dsn-color-action-2-color-default; // Kleur van de onderstreping van de link
@@ -1349,6 +1360,7 @@ $dsn-checkbox-indeterminate-active-background-color: $dsn-form-control-active-ac
 $dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
 $dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-accent-color;
+$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
 $dsn-radio-checked-background-color: $dsn-form-control-accent-color;
 $dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;