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

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

@@ -1,18 +1,18 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$dsn-text-font-family-default: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive; // Comic Sans MS as primary font with Comic Neue fallback for wireframe
-$dsn-text-font-family-monospace: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; // System monospace font stack
-$dsn-text-font-weight-default: 400; // Regular weight
-$dsn-text-font-weight-bold: 600; // Semi-bold weight for wireframe
-$dsn-text-line-height-sm: 1.4; // 140% line height for small text
-$dsn-text-line-height-md: 1.4; // 140% line height for medium text
-$dsn-text-line-height-lg: 1.2; // 120% line height for large text
-$dsn-text-line-height-xl: 1.2; // 120% line height for headings
-$dsn-text-line-height-2xl: 1.2; // 120% line height for large headings
-$dsn-text-line-height-3xl: 1.1; // 110% line height for display text
-$dsn-text-line-height-4xl: 1.1; // 110% line height for hero text
-$dsn-text-max-inline-size: 65ch; // Maximum line length for readable body text (paragraphs, lists)
+$dsn-text-font-family-default: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive; // Comic Sans MS als primair lettertype met Comic Neue als fallback voor wireframe
+$dsn-text-font-family-monospace: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; // Systeem monospace lettertypestapel
+$dsn-text-font-weight-default: 400; // Regulier gewicht
+$dsn-text-font-weight-bold: 600; // Semi-vet gewicht voor wireframe
+$dsn-text-line-height-sm: 1.4; // 140% regelafstand voor kleine tekst
+$dsn-text-line-height-md: 1.4; // 140% regelafstand voor middelgrote tekst
+$dsn-text-line-height-lg: 1.2; // 120% regelafstand voor grote tekst
+$dsn-text-line-height-xl: 1.2; // 120% regelafstand voor koppen
+$dsn-text-line-height-2xl: 1.2; // 120% regelafstand voor grote koppen
+$dsn-text-line-height-3xl: 1.1; // 110% regelafstand voor display-tekst
+$dsn-text-line-height-4xl: 1.1; // 110% regelafstand voor hero-tekst
+$dsn-text-max-inline-size: 65ch; // Maximale regellengte voor leesbare bodytekst (paragrafen, lijsten)
 $dsn-text-font-size-sm: clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem); // Small text - 14px to 17px (fluid)
 $dsn-text-font-size-md: clamp(1rem, 0.875rem + 0.375vw, 1.28125rem); // Medium text - 16px to 20.5px (fluid)
 $dsn-text-font-size-lg: clamp(1.25rem, 1.125rem + 0.375vw, 1.53125rem); // Large text - 20px to 24.5px (fluid)
@@ -20,97 +20,97 @@ $dsn-text-font-size-xl: clamp(1.5rem, 1.25rem + 0.625vw, 1.9375rem); // Extra la
 $dsn-text-font-size-2xl: clamp(2rem, 1.75rem + 0.75vw, 2.5625rem); // 2XL text - 32px to 41px (fluid)
 $dsn-text-font-size-3xl: clamp(2.5rem, 2.125rem + 1.125vw, 3.3125rem); // 3XL text - 40px to 53px (fluid)
 $dsn-text-font-size-4xl: clamp(3rem, 2.5rem + 1.5vw, 4.125rem); // 4XL text - 48px to 66px (fluid)
-$dsn-heading-font-family: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive; // Comic Sans MS as primary font with Comic Neue fallback for headings
-$dsn-heading-font-weight: 600; // Semi-bold weight for headings
-$dsn-space-none: 0px; // No spacing
-$dsn-space-base: 0.5rem; // 8px - Base unit for 8pt grid system
-$dsn-space-block-2xs: calc(0.5rem * 0.125); // 1px - Vertical spacing within components
-$dsn-space-block-xs: calc(0.5rem * 0.25); // 2px - Vertical spacing within components
-$dsn-space-block-sm: calc(0.5rem * 0.5); // 4px - Vertical spacing within components
-$dsn-space-block-md: calc(0.5rem * 1); // 8px - Vertical spacing within components
-$dsn-space-block-lg: calc(0.5rem * 1.5); // 12px - Vertical spacing within components
-$dsn-space-block-xl: calc(0.5rem * 2); // 16px - Vertical spacing within components
-$dsn-space-block-2xl: calc(0.5rem * 2.5); // 20px - Vertical spacing within components
-$dsn-space-block-3xl: calc(0.5rem * 3); // 24px - Vertical spacing within components
-$dsn-space-block-4xl: calc(0.5rem * 4); // 32px - Vertical spacing within components
-$dsn-space-block-5xl: calc(0.5rem * 6); // 48px - Vertical spacing within components
-$dsn-space-block-6xl: calc(0.5rem * 8); // 64px - Vertical spacing within components
-$dsn-space-inline-2xs: calc(0.5rem * 0.125); // 1px - Horizontal spacing within components
-$dsn-space-inline-xs: calc(0.5rem * 0.25); // 2px - Horizontal spacing within components
-$dsn-space-inline-sm: calc(0.5rem * 0.5); // 4px - Horizontal spacing within components
-$dsn-space-inline-md: calc(0.5rem * 1); // 8px - Horizontal spacing within components
-$dsn-space-inline-lg: calc(0.5rem * 1.5); // 12px - Horizontal spacing within components
-$dsn-space-inline-xl: calc(0.5rem * 2); // 16px - Horizontal spacing within components
-$dsn-space-inline-2xl: calc(0.5rem * 2.5); // 20px - Horizontal spacing within components
-$dsn-space-inline-3xl: calc(0.5rem * 3); // 24px - Horizontal spacing within components
-$dsn-space-inline-4xl: calc(0.5rem * 4); // 32px - Horizontal spacing within components
-$dsn-space-inline-5xl: calc(0.5rem * 6); // 48px - Horizontal spacing within components
-$dsn-space-inline-6xl: calc(0.5rem * 8); // 64px - Horizontal spacing within components
-$dsn-space-text-3xs: calc(0.5rem * 0.125); // 1px - Spacing between text and icons
-$dsn-space-text-2xs: calc(0.5rem * 0.25); // 2px - Spacing between text and icons
-$dsn-space-text-xs: calc(0.5rem * 0.25); // 2px - Spacing between text and icons
-$dsn-space-text-sm: calc(0.5rem * 0.5); // 4px - Spacing between text and icons
-$dsn-space-text-md: calc(0.5rem * 1); // 8px - Spacing between text and icons
-$dsn-space-text-lg: calc(0.5rem * 1.5); // 12px - Spacing between text and icons
-$dsn-space-text-xl: calc(0.5rem * 2); // 16px - Spacing between text and icons
-$dsn-space-text-2xl: calc(0.5rem * 2.5); // 20px - Spacing between text and icons
-$dsn-space-text-3xl: calc(0.5rem * 3); // 24px - Spacing between text and icons
-$dsn-space-column-2xs: calc(0.5rem * 0.125); // 1px - Horizontal spacing between components
-$dsn-space-column-xs: calc(0.5rem * 0.25); // 2px - Horizontal spacing between components
-$dsn-space-column-sm: calc(0.5rem * 0.5); // 4px - Horizontal spacing between components
-$dsn-space-column-md: calc(0.5rem * 1); // 8px - Horizontal spacing between components
-$dsn-space-column-lg: calc(0.5rem * 1.5); // 12px - Horizontal spacing between components
-$dsn-space-column-xl: calc(0.5rem * 2); // 16px - Horizontal spacing between components
-$dsn-space-column-2xl: calc(0.5rem * 2.5); // 20px - Horizontal spacing between components
-$dsn-space-column-3xl: calc(0.5rem * 3); // 24px - Horizontal spacing between components
-$dsn-space-column-4xl: calc(0.5rem * 4); // 32px - Horizontal spacing between components
-$dsn-space-column-5xl: calc(0.5rem * 8); // 64px - Horizontal spacing between components
-$dsn-space-column-6xl: calc(0.5rem * 20); // 160px - Horizontal spacing between components
-$dsn-space-row-2xs: calc(0.5rem * 0.125); // 1px - Vertical spacing between components
-$dsn-space-row-xs: calc(0.5rem * 0.25); // 2px - Vertical spacing between components
-$dsn-space-row-sm: calc(0.5rem * 0.5); // 4px - Vertical spacing between components
-$dsn-space-row-md: calc(0.5rem * 1); // 8px - Vertical spacing between components
-$dsn-space-row-lg: calc(0.5rem * 1.5); // 12px - Vertical spacing between components
-$dsn-space-row-xl: calc(0.5rem * 2); // 16px - Vertical spacing between components
-$dsn-space-row-2xl: calc(0.5rem * 2.5); // 20px - Vertical spacing between components
-$dsn-space-row-3xl: calc(0.5rem * 3); // 24px - Vertical spacing between components
-$dsn-space-row-4xl: calc(0.5rem * 4); // 32px - Vertical spacing between components
-$dsn-space-row-5xl: calc(0.5rem * 8); // 64px - Vertical spacing between components
-$dsn-space-row-6xl: calc(0.5rem * 20); // 160px - Vertical spacing between components
-$dsn-pointer-target-min-block-size: 3rem; // WCAG 2.5.5 Target Size - Minimum 48px (3rem) touch target
-$dsn-pointer-target-min-inline-size: 3rem; // WCAG 2.5.5 Target Size - Minimum 48px (3rem) touch target
-$dsn-border-radius-square: 0px; // No border radius — square corners
-$dsn-border-radius-sm: 2px; // Small border radius - minimal for wireframe
-$dsn-border-radius-md: 4px; // Medium border radius - minimal for wireframe
-$dsn-border-radius-lg: 8px; // Large border radius - minimal for wireframe
-$dsn-border-radius-round: 999px; // Fully rounded (pills, circles)
-$dsn-border-width-none: 0px; // No border width
-$dsn-border-width-thin: 2px; // Thin border
-$dsn-border-width-medium: 4px; // Medium border
-$dsn-border-width-thick: 8px; // Thick border
-$dsn-focus-outline-offset: 2px; // Focus outline offset
-$dsn-focus-outline-style: solid; // Focus outline style - solid for wireframe
-$dsn-focus-outline-width: 2px; // Focus outline width
-$dsn-focus-background-color: #ffdd00; // Focus indicator background - yellow
-$dsn-focus-color: #000000; // Focus indicator text color
-$dsn-focus-outline-color: #ffffff; // Focus outline color
-$dsn-focus-inverse-outline-color: #000000; // Focus outline color for use on light/tinted backgrounds in dark mode - opposite of outline-color
-$dsn-form-control-max-inline-size: 25rem; // Form control maximum width
-$dsn-form-control-border-radius: 2px; // Form control border radius - minimal for wireframe
-$dsn-form-control-width-xs: 8ch; // Extra small width - for short inputs (e.g., postal code, 6 characters)
-$dsn-form-control-width-sm: 16ch; // Small width - for medium inputs (e.g., phone number, 10-12 digits)
-$dsn-form-control-width-md: 32ch; // Medium width (default) - for standard inputs (e.g., email, name)
-$dsn-form-control-width-lg: 48ch; // Large width - for longer inputs (e.g., URL)
-$dsn-form-control-width-xl: 64ch; // Extra large width - for very long text fields
-$dsn-form-control-width-full: 100%; // Full width - responsive to container
-$dsn-breakpoint-sm: 36em; // Small breakpoint - ~576px. Reference only; use hardcoded values in CSS @media rules.
-$dsn-breakpoint-md: 44em; // Medium breakpoint - ~704px. Reference only; use hardcoded values in CSS @media rules.
-$dsn-breakpoint-lg: 64em; // Large breakpoint - ~1024px. Reference only; use hardcoded values in CSS @media rules.
-$dsn-breakpoint-xl: 74em; // Extra large breakpoint - ~1184px. Reference only; use hardcoded values in CSS @media rules.
+$dsn-heading-font-family: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive; // Comic Sans MS als primair lettertype met Comic Neue als fallback voor koppen
+$dsn-heading-font-weight: 600; // Semi-vet gewicht voor koppen
+$dsn-space-none: 0px; // Geen afstand
+$dsn-space-base: 0.5rem; // 8px - Basiseenheid voor het 8pt-rastersysteem
+$dsn-space-block-2xs: calc(0.5rem * 0.125); // 1px - Verticale ruimte binnen componenten
+$dsn-space-block-xs: calc(0.5rem * 0.25); // 2px - Verticale ruimte binnen componenten
+$dsn-space-block-sm: calc(0.5rem * 0.5); // 4px - Verticale ruimte binnen componenten
+$dsn-space-block-md: calc(0.5rem * 1); // 8px - Verticale ruimte binnen componenten
+$dsn-space-block-lg: calc(0.5rem * 1.5); // 12px - Verticale ruimte binnen componenten
+$dsn-space-block-xl: calc(0.5rem * 2); // 16px - Verticale ruimte binnen componenten
+$dsn-space-block-2xl: calc(0.5rem * 2.5); // 20px - Verticale ruimte binnen componenten
+$dsn-space-block-3xl: calc(0.5rem * 3); // 24px - Verticale ruimte binnen componenten
+$dsn-space-block-4xl: calc(0.5rem * 4); // 32px - Verticale ruimte binnen componenten
+$dsn-space-block-5xl: calc(0.5rem * 6); // 48px - Verticale ruimte binnen componenten
+$dsn-space-block-6xl: calc(0.5rem * 8); // 64px - Verticale ruimte binnen componenten
+$dsn-space-inline-2xs: calc(0.5rem * 0.125); // 1px - Horizontale ruimte binnen componenten
+$dsn-space-inline-xs: calc(0.5rem * 0.25); // 2px - Horizontale ruimte binnen componenten
+$dsn-space-inline-sm: calc(0.5rem * 0.5); // 4px - Horizontale ruimte binnen componenten
+$dsn-space-inline-md: calc(0.5rem * 1); // 8px - Horizontale ruimte binnen componenten
+$dsn-space-inline-lg: calc(0.5rem * 1.5); // 12px - Horizontale ruimte binnen componenten
+$dsn-space-inline-xl: calc(0.5rem * 2); // 16px - Horizontale ruimte binnen componenten
+$dsn-space-inline-2xl: calc(0.5rem * 2.5); // 20px - Horizontale ruimte binnen componenten
+$dsn-space-inline-3xl: calc(0.5rem * 3); // 24px - Horizontale ruimte binnen componenten
+$dsn-space-inline-4xl: calc(0.5rem * 4); // 32px - Horizontale ruimte binnen componenten
+$dsn-space-inline-5xl: calc(0.5rem * 6); // 48px - Horizontale ruimte binnen componenten
+$dsn-space-inline-6xl: calc(0.5rem * 8); // 64px - Horizontale ruimte binnen componenten
+$dsn-space-text-3xs: calc(0.5rem * 0.125); // 1px - Ruimte tussen tekst en iconen
+$dsn-space-text-2xs: calc(0.5rem * 0.25); // 2px - Ruimte tussen tekst en iconen
+$dsn-space-text-xs: calc(0.5rem * 0.25); // 2px - Ruimte tussen tekst en iconen
+$dsn-space-text-sm: calc(0.5rem * 0.5); // 4px - Ruimte tussen tekst en iconen
+$dsn-space-text-md: calc(0.5rem * 1); // 8px - Ruimte tussen tekst en iconen
+$dsn-space-text-lg: calc(0.5rem * 1.5); // 12px - Ruimte tussen tekst en iconen
+$dsn-space-text-xl: calc(0.5rem * 2); // 16px - Ruimte tussen tekst en iconen
+$dsn-space-text-2xl: calc(0.5rem * 2.5); // 20px - Ruimte tussen tekst en iconen
+$dsn-space-text-3xl: calc(0.5rem * 3); // 24px - Ruimte tussen tekst en iconen
+$dsn-space-column-2xs: calc(0.5rem * 0.125); // 1px - Horizontale ruimte tussen componenten
+$dsn-space-column-xs: calc(0.5rem * 0.25); // 2px - Horizontale ruimte tussen componenten
+$dsn-space-column-sm: calc(0.5rem * 0.5); // 4px - Horizontale ruimte tussen componenten
+$dsn-space-column-md: calc(0.5rem * 1); // 8px - Horizontale ruimte tussen componenten
+$dsn-space-column-lg: calc(0.5rem * 1.5); // 12px - Horizontale ruimte tussen componenten
+$dsn-space-column-xl: calc(0.5rem * 2); // 16px - Horizontale ruimte tussen componenten
+$dsn-space-column-2xl: calc(0.5rem * 2.5); // 20px - Horizontale ruimte tussen componenten
+$dsn-space-column-3xl: calc(0.5rem * 3); // 24px - Horizontale ruimte tussen componenten
+$dsn-space-column-4xl: calc(0.5rem * 4); // 32px - Horizontale ruimte tussen componenten
+$dsn-space-column-5xl: calc(0.5rem * 8); // 64px - Horizontale ruimte tussen componenten
+$dsn-space-column-6xl: calc(0.5rem * 20); // 160px - Horizontale ruimte tussen componenten
+$dsn-space-row-2xs: calc(0.5rem * 0.125); // 1px - Verticale ruimte tussen componenten
+$dsn-space-row-xs: calc(0.5rem * 0.25); // 2px - Verticale ruimte tussen componenten
+$dsn-space-row-sm: calc(0.5rem * 0.5); // 4px - Verticale ruimte tussen componenten
+$dsn-space-row-md: calc(0.5rem * 1); // 8px - Verticale ruimte tussen componenten
+$dsn-space-row-lg: calc(0.5rem * 1.5); // 12px - Verticale ruimte tussen componenten
+$dsn-space-row-xl: calc(0.5rem * 2); // 16px - Verticale ruimte tussen componenten
+$dsn-space-row-2xl: calc(0.5rem * 2.5); // 20px - Verticale ruimte tussen componenten
+$dsn-space-row-3xl: calc(0.5rem * 3); // 24px - Verticale ruimte tussen componenten
+$dsn-space-row-4xl: calc(0.5rem * 4); // 32px - Verticale ruimte tussen componenten
+$dsn-space-row-5xl: calc(0.5rem * 8); // 64px - Verticale ruimte tussen componenten
+$dsn-space-row-6xl: calc(0.5rem * 20); // 160px - Verticale ruimte tussen componenten
+$dsn-pointer-target-min-block-size: 3rem; // WCAG 2.5.5 Target Size - minimaal 48px (3rem) aanraakdoelwit
+$dsn-pointer-target-min-inline-size: 3rem; // WCAG 2.5.5 Target Size - minimaal 48px (3rem) aanraakdoelwit
+$dsn-border-radius-square: 0px; // Geen afronding — scherpe hoeken
+$dsn-border-radius-sm: 2px; // Kleine afronding — minimaal voor wireframe
+$dsn-border-radius-md: 4px; // Middelgrote afronding — minimaal voor wireframe
+$dsn-border-radius-lg: 8px; // Grote afronding — minimaal voor wireframe
+$dsn-border-radius-round: 999px; // Volledig afgerond (pills, cirkels)
+$dsn-border-width-none: 0px; // Geen randbreedte
+$dsn-border-width-thin: 2px; // Dunne rand
+$dsn-border-width-medium: 4px; // Middelgrote rand
+$dsn-border-width-thick: 8px; // Dikke rand
+$dsn-focus-outline-offset: 2px; // Offset van de focusomtrek
+$dsn-focus-outline-style: solid; // Stijl van de focusomtrek — solid voor wireframe
+$dsn-focus-outline-width: 2px; // Breedte van de focusomtrek
+$dsn-focus-background-color: #ffdd00; // Achtergrondkleur van de focusindicator — geel
+$dsn-focus-color: #000000; // Tekstkleur van de focusindicator
+$dsn-focus-outline-color: #ffffff; // Kleur van de focusomtrek
+$dsn-focus-inverse-outline-color: #000000; // Kleur van de focusomtrek op lichte/gekleurde achtergronden in dark mode — tegenhanger van outline-color
+$dsn-form-control-max-inline-size: 25rem; // Maximale breedte van form controls
+$dsn-form-control-border-radius: 2px; // Afronding van form controls — minimaal voor wireframe
+$dsn-form-control-width-xs: 8ch; // Extra kleine breedte — voor korte invoervelden (bijv. postcode, 6 tekens)
+$dsn-form-control-width-sm: 16ch; // Kleine breedte — voor middelgrote invoervelden (bijv. telefoonnummer, 10-12 cijfers)
+$dsn-form-control-width-md: 32ch; // Middelgrote breedte (standaard) — voor standaard invoervelden (bijv. e-mail, naam)
+$dsn-form-control-width-lg: 48ch; // Grote breedte — voor langere invoervelden (bijv. URL)
+$dsn-form-control-width-xl: 64ch; // Extra grote breedte — voor zeer lange tekstvelden
+$dsn-form-control-width-full: 100%; // Volledige breedte — responsief aan de container
+$dsn-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.
+$dsn-breakpoint-xl: 74em; // Extra groot breakpoint - ~1184px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules.
 $dsn-box-shadow-none: none; // Geen elevatie — vlak oppervlak zonder schaduw
-$dsn-box-shadow-sm: none; // Small elevation — flat in wireframe theme
-$dsn-box-shadow-md: none; // Medium elevation — flat in wireframe theme
-$dsn-box-shadow-lg: none; // Large elevation — flat in wireframe theme
+$dsn-box-shadow-sm: none; // Kleine elevatie — vlak in wireframe thema
+$dsn-box-shadow-md: none; // Middelgrote elevatie — vlak in wireframe thema
+$dsn-box-shadow-lg: none; // Grote elevatie — vlak in wireframe thema
 $dsn-z-index-300: 300; // Sticky navigatie-elementen — PageHeader sticky/auto-hide
 $dsn-z-index-350: 350; // Floating UI-elementen — Popover, tooltips, dropdowns
 $dsn-z-index-400: 400; // Verduisterende laag — Backdrop achter modals en drawers
@@ -126,47 +126,47 @@ $dsn-transition-easing-enter: cubic-bezier(0, 0, 0.2, 1); // Elementen die het s
 $dsn-transition-easing-exit: cubic-bezier(0.4, 0, 1, 1); // Elementen die het scherm verlaten (accelereren)
 $dsn-transition-easing-move: cubic-bezier(0.4, 0, 0.2, 1); // Elementen die van positie wisselen
 $dsn-transition-easing-linear: linear; // Lineaire easing — voor loaders en spinners
-$dsn-color-neutral-bg-document: #000000; // Document background
-$dsn-color-neutral-bg-elevated: #000000; // Elevated background — for floating layers (modals, popovers, dropdowns). Same as bg-document in light mode; can be lightened in dark mode to convey elevation.
-$dsn-color-neutral-bg-subtle: #000000; // Subtle background
-$dsn-color-neutral-bg-default: #000000; // Default background
-$dsn-color-neutral-bg-hover: #000000; // Hover state background
-$dsn-color-neutral-bg-active: #000000; // Active state background
-$dsn-color-neutral-border-subtle: #ffffff; // Subtle border
-$dsn-color-neutral-border-default: #ffffff; // Default border
-$dsn-color-neutral-border-hover: #ffffff; // Hover state border
-$dsn-color-neutral-border-active: #ffffff; // Active state border
-$dsn-color-neutral-color-default: #ffffff; // Default text color
-$dsn-color-neutral-color-hover: #ffffff; // Hover state text
-$dsn-color-neutral-color-active: #ffffff; // Active state text
-$dsn-color-neutral-color-subtle: #ffffff; // Subtle text color
-$dsn-color-neutral-color-document: #ffffff; // Document text color
-$dsn-color-transparent: rgba(0, 0, 0, 0); // Fully transparent - for invisible backgrounds and borders
+$dsn-color-neutral-bg-document: #000000; // Documentachtergrond
+$dsn-color-neutral-bg-elevated: #000000; // Elevated background — for floating layers (modals, popovers, dropdowns)
+$dsn-color-neutral-bg-subtle: #000000; // Subtiele achtergrond
+$dsn-color-neutral-bg-default: #000000; // Standaard achtergrond
+$dsn-color-neutral-bg-hover: #000000; // Achtergrond in hover state
+$dsn-color-neutral-bg-active: #000000; // Achtergrond in active state
+$dsn-color-neutral-border-subtle: #ffffff; // Subtiele rand
+$dsn-color-neutral-border-default: #ffffff; // Standaard rand
+$dsn-color-neutral-border-hover: #ffffff; // Rand in hover state
+$dsn-color-neutral-border-active: #ffffff; // Rand in active state
+$dsn-color-neutral-color-default: #ffffff; // Standaard tekstkleur
+$dsn-color-neutral-color-hover: #ffffff; // Tekst in hover state
+$dsn-color-neutral-color-active: #ffffff; // Tekst in active state
+$dsn-color-neutral-color-subtle: #ffffff; // Subtiele tekstkleur
+$dsn-color-neutral-color-document: #ffffff; // Documenttekstkleur
+$dsn-color-transparent: rgba(0, 0, 0, 0); // Volledig transparant — voor onzichtbare achtergronden en randen
 $dsn-color-shadow-scroll: rgba(255, 255, 255, 0.12); // Scroll-affordance schaduw — lichte kleur voor zichtbaarheid op donkere achtergrond
 $dsn-backdrop-opacity: 50%; // Bepaalt hoe doorzichtig de overlay is — gebruikt in color-mix()
 $dsn-backdrop-blur: 4px; // backdrop-filter: blur() op de overlay — valt gracefully weg zonder support
-$dsn-breadcrumb-navigation-link-text-decoration-line: underline; // Links are underlined by default (a11y standaard)
-$dsn-breadcrumb-navigation-link-text-underline-offset: 4px; // Underline offset
-$dsn-breadcrumb-navigation-link-text-decoration-thickness: auto; // Underline thickness
+$dsn-breadcrumb-navigation-link-text-decoration-line: underline; // Links zijn standaard onderstreept (a11y standaard)
+$dsn-breadcrumb-navigation-link-text-underline-offset: 4px; // Onderstrepingsafstand
+$dsn-breadcrumb-navigation-link-text-decoration-thickness: auto; // Dikte van de onderstreping
 $dsn-breadcrumb-navigation-link-hover-text-decoration-line: none; // Underline verdwijnt op hover als visuele feedback
-$dsn-breadcrumb-navigation-link-active-text-decoration-line: none; // No underline on active
-$dsn-button-size-small-min-block-size: 2.5rem; // Small button minimum block size (reduced touch target — 40px)
+$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-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)); // Size of the checkbox - fluid based on text size and line-height
+$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);
 $dsn-checkbox-checked-active-border-color: rgba(0, 0, 0, 0);
 $dsn-checkbox-checked-hover-border-color: rgba(0, 0, 0, 0);
 $dsn-checkbox-indeterminate-border-color: rgba(0, 0, 0, 0);
 $dsn-checkbox-indeterminate-active-border-color: rgba(0, 0, 0, 0);
 $dsn-checkbox-indeterminate-hover-border-color: rgba(0, 0, 0, 0);
-$dsn-checkbox-icon-size: calc(var(--dsn-checkbox-size) * 0.67); // Check icon size - 67% of checkbox size for proper visual balance
+$dsn-checkbox-icon-size: calc(var(--dsn-checkbox-size) * 0.67); // Grootte van het vinkje — 67% van de checkboxgrootte voor een goede visuele balans
 $dsn-container-box-shadow: none; // Standaard geen schaduw — gebruik elevated variant voor een zwevend effect
-$dsn-details-summary-text-decoration-line: none; // No underline by default; appears on hover
-$dsn-details-summary-text-underline-offset: 4px; // Underline offset for hover state
-$dsn-details-summary-text-decoration-thickness: auto; // Underline thickness for hover state
-$dsn-details-summary-hover-text-decoration-line: underline; // Underline appears on hover
-$dsn-details-content-background-color: rgba(0, 0, 0, 0); // Content area background
+$dsn-details-summary-text-decoration-line: none; // Standaard geen onderstreping; verschijnt op hover
+$dsn-details-summary-text-underline-offset: 4px; // Onderstrepingsafstand voor de hover-staat
+$dsn-details-summary-text-decoration-thickness: auto; // Dikte van de onderstreping voor de hover-staat
+$dsn-details-summary-hover-text-decoration-line: underline; // Onderstreping verschijnt op hover
+$dsn-details-content-background-color: rgba(0, 0, 0, 0); // Achtergrond van het inhoudsgebied
 $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
@@ -175,13 +175,14 @@ $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
 $dsn-file-media-size: 3rem; // Vaste grootte van het media-vlak (48px) — vierkant voor zowel icoon als preview
+$dsn-grid-padding-inline: 0px; // Outer padding-inline of the grid container. Default 0: grids sit inside dsn-page-body__inner which already provides horizontal padding.
 $dsn-grid-max-width: 74rem; // Maximum width of a contained grid (--dsn-breakpoint-xl ~1184px)
 $dsn-hero-block-size: 70svh; // Hoogte van de Hero via min-block-size: max(--dsn-hero-min-block-size, --dsn-hero-block-size); aanpasbaar per instantie via inline style
 $dsn-hero-min-block-size: 400px; // Minimale hoogte van de Hero — vloer zodat de Hero niet te klein wordt bij weinig inhoud of kleine viewport
-$dsn-link-text-decoration-line: underline; // Link text decoration line
-$dsn-link-text-decoration-thickness: auto; // Link underline thickness
-$dsn-link-text-underline-offset: 4px; // Link underline offset
-$dsn-link-hover-text-decoration-line: none; // Link hover text decoration
+$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-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
@@ -191,70 +192,72 @@ $dsn-password-input-padding-inline-end: 3rem; // Password input right padding -
 $dsn-popover-max-width: 25rem; // Maximale breedte van de popover (400px)
 $dsn-popover-min-width: 12.5rem; // Minimale breedte van de popover (200px)
 $dsn-progress-bar-block-size: 8px; // Hoogte van de balk — gangbare dikte voor voortgangsbalken
-$dsn-radio-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); // Size of the radio button - fluid based on text size and line-height
+$dsn-radio-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); // Grootte van de radioknop — vloeiend op basis van tekstgrootte en line-height
 $dsn-radio-checked-border-color: rgba(0, 0, 0, 0);
 $dsn-radio-checked-active-border-color: rgba(0, 0, 0, 0);
 $dsn-radio-checked-hover-border-color: rgba(0, 0, 0, 0);
-$dsn-radio-icon-size: calc(var(--dsn-radio-size) * 0.33); // Inner circle size when checked - 33% of radio size
+$dsn-radio-icon-size: calc(var(--dsn-radio-size) * 0.33); // Grootte van de binnenste cirkel wanneer aangevinkt — 33% van de radioknopgrootte
 $dsn-spinner-size: 1.5rem; // Diameter van de spinner (24px)
 $dsn-spinner-size-large: 3rem; // Grote variant — diameter van de spinner (48px)
 $dsn-spinner-duration: 800ms; // Duur van één rotatie — bewust sneller dan transition.duration.slower (500ms): dit is een herhalende ambient animatie
-$dsn-status-badge-text-transform: none; // Status badge text transform (none by default; themes can override to uppercase)
-$dsn-summary-list-key-basis: 30%; // Width of the key column in the grid layout
+$dsn-status-badge-text-transform: none; // Teksttransformatie van de StatusBadge (standaard geen; thema's kunnen naar hoofdletters overschakelen)
+$dsn-summary-list-key-basis: 30%; // Breedte van de sleutelkolom in de gridindeling
+$dsn-table-of-contents-plain-link-text-decoration-line: none; // Plain-appearance-specifiek: tekstverfraaiing van de ankerlinks in rust — omgekeerd t.o.v. de standaard Link (geen onderstreping)
+$dsn-table-of-contents-plain-link-hover-text-decoration-line: underline; // Plain-appearance-specifiek: tekstverfraaiing van de ankerlinks op hover — omgekeerd t.o.v. de standaard Link (wel onderstreping)
 $dsn-table-header-background-color: rgba(0, 0, 0, 0);
 $dsn-table-footer-background-color: rgba(0, 0, 0, 0);
-$dsn-text-area-outline-offset: 0px; // Text area outline offset
-$dsn-text-area-resize: vertical; // Text area resize behavior (vertical, horizontal, both, none)
-$dsn-text-area-focus-box-shadow-x: 0; // Text area focus box shadow x offset
-$dsn-text-area-focus-box-shadow-y: 0; // Text area focus box shadow y offset
-$dsn-text-area-focus-box-shadow-blur: 0; // Text area focus box shadow blur
-$dsn-text-area-hover-box-shadow-x: 0; // Text area hover box shadow x offset
-$dsn-text-area-hover-box-shadow-y: 0; // Text area hover box shadow y offset
-$dsn-text-area-hover-box-shadow-blur: 0; // Text area hover box shadow blur
-$dsn-text-area-invalid-box-shadow-x: 0; // Text area invalid box shadow x offset
-$dsn-text-area-invalid-box-shadow-y: 0; // Text area invalid box shadow y offset
-$dsn-text-area-invalid-box-shadow-blur: 0; // Text area invalid box shadow blur
-$dsn-text-input-outline-offset: 0px; // Text input outline offset
-$dsn-text-input-focus-box-shadow-x: 0; // Text input focus box shadow x offset
-$dsn-text-input-focus-box-shadow-y: 0; // Text input focus box shadow y offset
-$dsn-text-input-focus-box-shadow-blur: 0; // Text input focus box shadow blur
-$dsn-text-input-hover-box-shadow-x: 0; // Text input hover box shadow x offset
-$dsn-text-input-hover-box-shadow-y: 0; // Text input hover box shadow y offset
-$dsn-text-input-hover-box-shadow-blur: 0; // Text input hover box shadow blur
-$dsn-text-input-invalid-box-shadow-x: 0; // Text input invalid box shadow x offset
-$dsn-text-input-invalid-box-shadow-y: 0; // Text input invalid box shadow y offset
-$dsn-text-input-invalid-box-shadow-blur: 0; // Text input invalid box shadow blur
-$dsn-heading-color: $dsn-color-neutral-color-document; // Heading text color
-$dsn-heading-level-1-font-family: $dsn-heading-font-family; // Heading 1 font family
-$dsn-heading-level-1-font-size: $dsn-text-font-size-3xl; // Heading 1 font size
-$dsn-heading-level-1-font-weight: $dsn-heading-font-weight; // Heading 1 font weight
-$dsn-heading-level-1-line-height: $dsn-text-line-height-3xl; // Heading 1 line height
-$dsn-heading-level-1-margin-block-end: $dsn-space-row-xl; // Heading 1 bottom margin
-$dsn-heading-level-2-font-family: $dsn-heading-font-family; // Heading 2 font family
-$dsn-heading-level-2-font-size: $dsn-text-font-size-2xl; // Heading 2 font size
-$dsn-heading-level-2-font-weight: $dsn-heading-font-weight; // Heading 2 font weight
-$dsn-heading-level-2-line-height: $dsn-text-line-height-2xl; // Heading 2 line height
-$dsn-heading-level-2-margin-block-end: $dsn-space-row-xl; // Heading 2 bottom margin
-$dsn-heading-level-3-font-family: $dsn-heading-font-family; // Heading 3 font family
-$dsn-heading-level-3-font-size: $dsn-text-font-size-xl; // Heading 3 font size
-$dsn-heading-level-3-font-weight: $dsn-heading-font-weight; // Heading 3 font weight
-$dsn-heading-level-3-line-height: $dsn-text-line-height-xl; // Heading 3 line height
-$dsn-heading-level-3-margin-block-end: $dsn-space-row-lg; // Heading 3 bottom margin
-$dsn-heading-level-4-font-family: $dsn-heading-font-family; // Heading 4 font family
-$dsn-heading-level-4-font-size: $dsn-text-font-size-lg; // Heading 4 font size
-$dsn-heading-level-4-font-weight: $dsn-heading-font-weight; // Heading 4 font weight
-$dsn-heading-level-4-line-height: $dsn-text-line-height-lg; // Heading 4 line height
-$dsn-heading-level-4-margin-block-end: $dsn-space-row-lg; // Heading 4 bottom margin
-$dsn-heading-level-5-font-family: $dsn-heading-font-family; // Heading 5 font family
-$dsn-heading-level-5-font-size: $dsn-text-font-size-md; // Heading 5 font size
-$dsn-heading-level-5-font-weight: $dsn-heading-font-weight; // Heading 5 font weight
-$dsn-heading-level-5-line-height: $dsn-text-line-height-md; // Heading 5 line height
-$dsn-heading-level-5-margin-block-end: $dsn-space-row-md; // Heading 5 bottom margin
-$dsn-heading-level-6-font-family: $dsn-heading-font-family; // Heading 6 font family
-$dsn-heading-level-6-font-size: $dsn-text-font-size-sm; // Heading 6 font size
-$dsn-heading-level-6-font-weight: $dsn-heading-font-weight; // Heading 6 font weight
-$dsn-heading-level-6-line-height: $dsn-text-line-height-sm; // Heading 6 line height
-$dsn-heading-level-6-margin-block-end: $dsn-space-row-md; // Heading 6 bottom margin
+$dsn-text-area-outline-offset: 0px; // Outline-afstand van het tekstveld
+$dsn-text-area-resize: vertical; // Formaat-aanpassingsgedrag van het tekstveld (vertical, horizontal, both, none)
+$dsn-text-area-focus-box-shadow-x: 0; // X-verschuiving van de box-shadow op focus
+$dsn-text-area-focus-box-shadow-y: 0; // Y-verschuiving van de box-shadow op focus
+$dsn-text-area-focus-box-shadow-blur: 0; // Vervaging van de box-shadow op focus
+$dsn-text-area-hover-box-shadow-x: 0; // X-verschuiving van de box-shadow op hover
+$dsn-text-area-hover-box-shadow-y: 0; // Y-verschuiving van de box-shadow op hover
+$dsn-text-area-hover-box-shadow-blur: 0; // Vervaging van de box-shadow op hover
+$dsn-text-area-invalid-box-shadow-x: 0; // X-verschuiving van de box-shadow bij ongeldige invoer
+$dsn-text-area-invalid-box-shadow-y: 0; // Y-verschuiving van de box-shadow bij ongeldige invoer
+$dsn-text-area-invalid-box-shadow-blur: 0; // Vervaging van de box-shadow bij ongeldige invoer
+$dsn-text-input-outline-offset: 0px; // Outline-afstand van het tekstinvoerveld
+$dsn-text-input-focus-box-shadow-x: 0; // X-verschuiving van de box-shadow op focus
+$dsn-text-input-focus-box-shadow-y: 0; // Y-verschuiving van de box-shadow op focus
+$dsn-text-input-focus-box-shadow-blur: 0; // Vervaging van de box-shadow op focus
+$dsn-text-input-hover-box-shadow-x: 0; // X-verschuiving van de box-shadow op hover
+$dsn-text-input-hover-box-shadow-y: 0; // Y-verschuiving van de box-shadow op hover
+$dsn-text-input-hover-box-shadow-blur: 0; // Vervaging van de box-shadow op hover
+$dsn-text-input-invalid-box-shadow-x: 0; // X-verschuiving van de box-shadow bij ongeldige invoer
+$dsn-text-input-invalid-box-shadow-y: 0; // Y-verschuiving van de box-shadow bij ongeldige invoer
+$dsn-text-input-invalid-box-shadow-blur: 0; // Vervaging van de box-shadow bij ongeldige invoer
+$dsn-heading-color: $dsn-color-neutral-color-document; // Tekstkleur van koppen
+$dsn-heading-level-1-font-family: $dsn-heading-font-family; // Font-familie van Heading 1
+$dsn-heading-level-1-font-size: $dsn-text-font-size-3xl; // Font-size van Heading 1
+$dsn-heading-level-1-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 1
+$dsn-heading-level-1-line-height: $dsn-text-line-height-3xl; // Line-height van Heading 1
+$dsn-heading-level-1-margin-block-end: $dsn-space-row-xl; // Onderste margin van Heading 1
+$dsn-heading-level-2-font-family: $dsn-heading-font-family; // Font-familie van Heading 2
+$dsn-heading-level-2-font-size: $dsn-text-font-size-2xl; // Font-size van Heading 2
+$dsn-heading-level-2-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 2
+$dsn-heading-level-2-line-height: $dsn-text-line-height-2xl; // Line-height van Heading 2
+$dsn-heading-level-2-margin-block-end: $dsn-space-row-xl; // Onderste margin van Heading 2
+$dsn-heading-level-3-font-family: $dsn-heading-font-family; // Font-familie van Heading 3
+$dsn-heading-level-3-font-size: $dsn-text-font-size-xl; // Font-size van Heading 3
+$dsn-heading-level-3-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 3
+$dsn-heading-level-3-line-height: $dsn-text-line-height-xl; // Line-height van Heading 3
+$dsn-heading-level-3-margin-block-end: $dsn-space-row-lg; // Onderste margin van Heading 3
+$dsn-heading-level-4-font-family: $dsn-heading-font-family; // Font-familie van Heading 4
+$dsn-heading-level-4-font-size: $dsn-text-font-size-lg; // Font-size van Heading 4
+$dsn-heading-level-4-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 4
+$dsn-heading-level-4-line-height: $dsn-text-line-height-lg; // Line-height van Heading 4
+$dsn-heading-level-4-margin-block-end: $dsn-space-row-lg; // Onderste margin van Heading 4
+$dsn-heading-level-5-font-family: $dsn-heading-font-family; // Font-familie van Heading 5
+$dsn-heading-level-5-font-size: $dsn-text-font-size-md; // Font-size van Heading 5
+$dsn-heading-level-5-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 5
+$dsn-heading-level-5-line-height: $dsn-text-line-height-md; // Line-height van Heading 5
+$dsn-heading-level-5-margin-block-end: $dsn-space-row-md; // Onderste margin van Heading 5
+$dsn-heading-level-6-font-family: $dsn-heading-font-family; // Font-familie van Heading 6
+$dsn-heading-level-6-font-size: $dsn-text-font-size-sm; // Font-size van Heading 6
+$dsn-heading-level-6-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 6
+$dsn-heading-level-6-line-height: $dsn-text-line-height-sm; // Line-height van Heading 6
+$dsn-heading-level-6-margin-block-end: $dsn-space-row-md; // Onderste margin van Heading 6
 $dsn-icon-size-sm: calc($dsn-text-font-size-sm * $dsn-text-line-height-sm); // Fluid icon size - coupled to font-size.sm × line-height.sm
 $dsn-icon-size-md: calc($dsn-text-font-size-md * $dsn-text-line-height-md); // Fluid icon size - coupled to font-size.md × line-height.md
 $dsn-icon-size-lg: calc($dsn-text-font-size-lg * $dsn-text-line-height-lg); // Fluid icon size - coupled to font-size.lg × line-height.lg
@@ -262,193 +265,194 @@ $dsn-icon-size-xl: calc($dsn-text-font-size-xl * $dsn-text-line-height-xl); // F
 $dsn-icon-size-2xl: calc($dsn-text-font-size-2xl * $dsn-text-line-height-2xl); // Fluid icon size - coupled to font-size.2xl × line-height.2xl
 $dsn-icon-size-3xl: calc($dsn-text-font-size-3xl * $dsn-text-line-height-3xl); // Fluid icon size - coupled to font-size.3xl × line-height.3xl
 $dsn-icon-size-4xl: calc($dsn-text-font-size-4xl * $dsn-text-line-height-4xl); // Fluid icon size - coupled to font-size.4xl × line-height.4xl
-$dsn-form-control-font-family: $dsn-text-font-family-default; // Form control font family
-$dsn-form-control-font-size: $dsn-text-font-size-md; // Form control font size
-$dsn-form-control-font-weight: $dsn-text-font-weight-default; // Form control font weight
-$dsn-form-control-line-height: $dsn-text-line-height-md; // Form control line height
-$dsn-form-control-padding-block-start: $dsn-space-block-lg; // Form control top padding
-$dsn-form-control-padding-block-end: $dsn-space-block-lg; // Form control bottom padding
-$dsn-form-control-padding-inline-start: $dsn-space-inline-lg; // Form control left padding
-$dsn-form-control-padding-inline-end: $dsn-space-inline-lg; // Form control right padding
-$dsn-form-control-border-width: $dsn-border-width-thin; // Form control border width
-$dsn-form-control-hover-border-width: $dsn-border-width-medium; // Form control hover border width
-$dsn-form-control-hover-background-color: $dsn-color-neutral-bg-hover; // Form control hover background
-$dsn-form-control-hover-border-color: $dsn-color-neutral-border-hover; // Form control hover border
-$dsn-form-control-focus-border-width: $dsn-border-width-medium; // Form control focus border width
-$dsn-form-control-focus-border-color: $dsn-color-neutral-border-active; // Form control focus border
-$dsn-form-control-active-border-width: $dsn-border-width-medium; // Form control active border width
-$dsn-form-control-active-background-color: $dsn-color-neutral-bg-active; // Form control active background
-$dsn-form-control-active-border-color: $dsn-color-neutral-border-active; // Form control active border
-$dsn-form-control-invalid-border-width: $dsn-border-width-medium; // Form control invalid border width
-$dsn-form-control-background-color: $dsn-color-neutral-bg-subtle; // Form control background
-$dsn-form-control-border-color: $dsn-color-neutral-border-default; // Form control border
-$dsn-form-control-color: $dsn-color-neutral-color-document; // Form control text color
-$dsn-form-control-placeholder-color: $dsn-color-neutral-color-subtle; // Form control placeholder text color
-$dsn-form-control-disabled-accent-color: $dsn-color-neutral-bg-subtle; // Form control disabled accent color
-$dsn-form-control-disabled-background-color: $dsn-color-neutral-bg-subtle; // Form control disabled background
-$dsn-form-control-disabled-border-color: $dsn-color-neutral-border-subtle; // Form control disabled border
-$dsn-form-control-disabled-color: $dsn-color-neutral-color-subtle; // Form control disabled text color
-$dsn-form-control-read-only-background-color: $dsn-color-neutral-bg-subtle; // Form control read-only background
-$dsn-form-control-read-only-border-color: $dsn-color-transparent; // Form control read-only border
-$dsn-form-control-read-only-color: $dsn-color-neutral-color-document; // Form control read-only text color
-$dsn-color-accent-1-bg-document: $dsn-color-neutral-bg-document; // Document background
+$dsn-form-control-font-family: $dsn-text-font-family-default; // Lettertype van form controls
+$dsn-form-control-font-size: $dsn-text-font-size-md; // Lettergrootte van form controls
+$dsn-form-control-font-weight: $dsn-text-font-weight-default; // Lettergewicht van form controls
+$dsn-form-control-line-height: $dsn-text-line-height-md; // Regelafstand van form controls
+$dsn-form-control-padding-block-start: $dsn-space-block-lg; // Bovenste padding van form controls
+$dsn-form-control-padding-block-end: $dsn-space-block-lg; // Onderste padding van form controls
+$dsn-form-control-padding-inline-start: $dsn-space-inline-lg; // Linker padding van form controls
+$dsn-form-control-padding-inline-end: $dsn-space-inline-lg; // Rechter padding van form controls
+$dsn-form-control-border-width: $dsn-border-width-thin; // Randbreedte van form controls
+$dsn-form-control-hover-border-width: $dsn-border-width-medium; // Randbreedte van form controls in hover state
+$dsn-form-control-hover-background-color: $dsn-color-neutral-bg-hover; // Achtergrondkleur van form controls in hover state
+$dsn-form-control-hover-border-color: $dsn-color-neutral-border-hover; // Randkleur van form controls in hover state
+$dsn-form-control-focus-border-width: $dsn-border-width-medium; // Randbreedte van form controls in focus state
+$dsn-form-control-focus-border-color: $dsn-color-neutral-border-active; // Randkleur van form controls in focus state
+$dsn-form-control-active-border-width: $dsn-border-width-medium; // Randbreedte van form controls in active state
+$dsn-form-control-active-background-color: $dsn-color-neutral-bg-active; // Achtergrondkleur van form controls in active state
+$dsn-form-control-active-border-color: $dsn-color-neutral-border-active; // Randkleur van form controls in active state
+$dsn-form-control-invalid-border-width: $dsn-border-width-medium; // Randbreedte van form controls in invalid state
+$dsn-form-control-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van form controls
+$dsn-form-control-border-color: $dsn-color-neutral-border-default; // Randkleur van form controls
+$dsn-form-control-color: $dsn-color-neutral-color-document; // Tekstkleur van form controls
+$dsn-form-control-placeholder-color: $dsn-color-neutral-color-subtle; // Tekstkleur van placeholder in form controls
+$dsn-form-control-disabled-accent-color: $dsn-color-neutral-bg-subtle; // Accentkleur van form controls in disabled state
+$dsn-form-control-disabled-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van form controls in disabled state
+$dsn-form-control-disabled-border-color: $dsn-color-neutral-border-subtle; // Randkleur van form controls in disabled state
+$dsn-form-control-disabled-color: $dsn-color-neutral-color-subtle; // Tekstkleur van form controls in disabled state
+$dsn-form-control-read-only-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van form controls in read-only state
+$dsn-form-control-read-only-border-color: $dsn-color-transparent; // Randkleur van form controls in read-only state
+$dsn-form-control-read-only-color: $dsn-color-neutral-color-document; // Tekstkleur van form controls in read-only state
+$dsn-color-accent-1-bg-document: $dsn-color-neutral-bg-document; // Documentachtergrond
 $dsn-color-accent-1-bg-elevated: $dsn-color-neutral-bg-elevated; // Elevated background
-$dsn-color-accent-1-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtle background
-$dsn-color-accent-1-bg-default: $dsn-color-neutral-bg-default; // Default background
-$dsn-color-accent-1-bg-hover: $dsn-color-neutral-bg-hover; // Hover state background
-$dsn-color-accent-1-bg-active: $dsn-color-neutral-bg-active; // Active state background
-$dsn-color-accent-1-border-subtle: $dsn-color-neutral-border-subtle; // Subtle border
-$dsn-color-accent-1-border-default: $dsn-color-neutral-border-default; // Default border
-$dsn-color-accent-1-border-hover: $dsn-color-neutral-border-hover; // Hover state border
-$dsn-color-accent-1-border-active: $dsn-color-neutral-border-active; // Active state border
-$dsn-color-accent-1-color-default: $dsn-color-neutral-color-default; // Default text color
-$dsn-color-accent-1-color-hover: $dsn-color-neutral-color-hover; // Hover state text
-$dsn-color-accent-1-color-active: $dsn-color-neutral-color-active; // Active state text
-$dsn-color-accent-1-color-subtle: $dsn-color-neutral-color-subtle; // Subtle text color
-$dsn-color-accent-1-color-document: $dsn-color-neutral-color-document; // Document text color
-$dsn-color-positive-bg-document: $dsn-color-neutral-bg-document; // Document background
+$dsn-color-accent-1-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtiele achtergrond
+$dsn-color-accent-1-bg-default: $dsn-color-neutral-bg-default; // Standaard achtergrond
+$dsn-color-accent-1-bg-hover: $dsn-color-neutral-bg-hover; // Achtergrond in hover state
+$dsn-color-accent-1-bg-active: $dsn-color-neutral-bg-active; // Achtergrond in active state
+$dsn-color-accent-1-border-subtle: $dsn-color-neutral-border-subtle; // Subtiele rand
+$dsn-color-accent-1-border-default: $dsn-color-neutral-border-default; // Standaard rand
+$dsn-color-accent-1-border-hover: $dsn-color-neutral-border-hover; // Rand in hover state
+$dsn-color-accent-1-border-active: $dsn-color-neutral-border-active; // Rand in active state
+$dsn-color-accent-1-color-default: $dsn-color-neutral-color-default; // Standaard tekstkleur
+$dsn-color-accent-1-color-hover: $dsn-color-neutral-color-hover; // Tekst in hover state
+$dsn-color-accent-1-color-active: $dsn-color-neutral-color-active; // Tekst in active state
+$dsn-color-accent-1-color-subtle: $dsn-color-neutral-color-subtle; // Subtiele tekstkleur
+$dsn-color-accent-1-color-document: $dsn-color-neutral-color-document; // Documenttekstkleur
+$dsn-color-positive-bg-document: $dsn-color-neutral-bg-document; // Documentachtergrond
 $dsn-color-positive-bg-elevated: $dsn-color-neutral-bg-elevated; // Elevated background
-$dsn-color-positive-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtle background
-$dsn-color-positive-bg-default: $dsn-color-neutral-bg-default; // Default background
-$dsn-color-positive-bg-hover: $dsn-color-neutral-bg-hover; // Hover state background
-$dsn-color-positive-bg-active: $dsn-color-neutral-bg-active; // Active state background
-$dsn-color-positive-border-subtle: $dsn-color-neutral-border-subtle; // Subtle border
-$dsn-color-positive-border-default: $dsn-color-neutral-border-default; // Default border
-$dsn-color-positive-border-hover: $dsn-color-neutral-border-hover; // Hover state border
-$dsn-color-positive-border-active: $dsn-color-neutral-border-active; // Active state border
-$dsn-color-positive-color-default: $dsn-color-neutral-color-default; // Default text color
-$dsn-color-positive-color-hover: $dsn-color-neutral-color-hover; // Hover state text
-$dsn-color-positive-color-active: $dsn-color-neutral-color-active; // Active state text
-$dsn-color-positive-color-subtle: $dsn-color-neutral-color-subtle; // Subtle text color
-$dsn-color-positive-color-document: $dsn-color-neutral-color-document; // Document text color
-$dsn-color-negative-bg-document: $dsn-color-neutral-bg-document; // Document background
+$dsn-color-positive-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtiele achtergrond
+$dsn-color-positive-bg-default: $dsn-color-neutral-bg-default; // Standaard achtergrond
+$dsn-color-positive-bg-hover: $dsn-color-neutral-bg-hover; // Achtergrond in hover state
+$dsn-color-positive-bg-active: $dsn-color-neutral-bg-active; // Achtergrond in active state
+$dsn-color-positive-border-subtle: $dsn-color-neutral-border-subtle; // Subtiele rand
+$dsn-color-positive-border-default: $dsn-color-neutral-border-default; // Standaard rand
+$dsn-color-positive-border-hover: $dsn-color-neutral-border-hover; // Rand in hover state
+$dsn-color-positive-border-active: $dsn-color-neutral-border-active; // Rand in active state
+$dsn-color-positive-color-default: $dsn-color-neutral-color-default; // Standaard tekstkleur
+$dsn-color-positive-color-hover: $dsn-color-neutral-color-hover; // Tekst in hover state
+$dsn-color-positive-color-active: $dsn-color-neutral-color-active; // Tekst in active state
+$dsn-color-positive-color-subtle: $dsn-color-neutral-color-subtle; // Subtiele tekstkleur
+$dsn-color-positive-color-document: $dsn-color-neutral-color-document; // Documenttekstkleur
+$dsn-color-negative-bg-document: $dsn-color-neutral-bg-document; // Documentachtergrond
 $dsn-color-negative-bg-elevated: $dsn-color-neutral-bg-elevated; // Elevated background
-$dsn-color-negative-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtle background
-$dsn-color-negative-bg-default: $dsn-color-neutral-bg-default; // Default background
-$dsn-color-negative-bg-hover: $dsn-color-neutral-bg-hover; // Hover state background
-$dsn-color-negative-bg-active: $dsn-color-neutral-bg-active; // Active state background
-$dsn-color-negative-border-subtle: $dsn-color-neutral-border-subtle; // Subtle border
-$dsn-color-negative-border-default: $dsn-color-neutral-border-default; // Default border
-$dsn-color-negative-border-hover: $dsn-color-neutral-border-hover; // Hover state border
-$dsn-color-negative-border-active: $dsn-color-neutral-border-active; // Active state border
-$dsn-color-negative-color-default: $dsn-color-neutral-color-default; // Default text color
-$dsn-color-negative-color-hover: $dsn-color-neutral-color-hover; // Hover state text
-$dsn-color-negative-color-active: $dsn-color-neutral-color-active; // Active state text
-$dsn-color-negative-color-subtle: $dsn-color-neutral-color-subtle; // Subtle text color
-$dsn-color-negative-color-document: $dsn-color-neutral-color-document; // Document text color
-$dsn-color-warning-bg-document: $dsn-color-neutral-bg-document; // Document background
+$dsn-color-negative-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtiele achtergrond
+$dsn-color-negative-bg-default: $dsn-color-neutral-bg-default; // Standaard achtergrond
+$dsn-color-negative-bg-hover: $dsn-color-neutral-bg-hover; // Achtergrond in hover state
+$dsn-color-negative-bg-active: $dsn-color-neutral-bg-active; // Achtergrond in active state
+$dsn-color-negative-border-subtle: $dsn-color-neutral-border-subtle; // Subtiele rand
+$dsn-color-negative-border-default: $dsn-color-neutral-border-default; // Standaard rand
+$dsn-color-negative-border-hover: $dsn-color-neutral-border-hover; // Rand in hover state
+$dsn-color-negative-border-active: $dsn-color-neutral-border-active; // Rand in active state
+$dsn-color-negative-color-default: $dsn-color-neutral-color-default; // Standaard tekstkleur
+$dsn-color-negative-color-hover: $dsn-color-neutral-color-hover; // Tekst in hover state
+$dsn-color-negative-color-active: $dsn-color-neutral-color-active; // Tekst in active state
+$dsn-color-negative-color-subtle: $dsn-color-neutral-color-subtle; // Subtiele tekstkleur
+$dsn-color-negative-color-document: $dsn-color-neutral-color-document; // Documenttekstkleur
+$dsn-color-warning-bg-document: $dsn-color-neutral-bg-document; // Documentachtergrond
 $dsn-color-warning-bg-elevated: $dsn-color-neutral-bg-elevated; // Elevated background
-$dsn-color-warning-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtle background
-$dsn-color-warning-bg-default: $dsn-color-neutral-bg-default; // Default background
-$dsn-color-warning-bg-hover: $dsn-color-neutral-bg-hover; // Hover state background
-$dsn-color-warning-bg-active: $dsn-color-neutral-bg-active; // Active state background
-$dsn-color-warning-border-subtle: $dsn-color-neutral-border-subtle; // Subtle border
-$dsn-color-warning-border-default: $dsn-color-neutral-border-default; // Default border
-$dsn-color-warning-border-hover: $dsn-color-neutral-border-hover; // Hover state border
-$dsn-color-warning-border-active: $dsn-color-neutral-border-active; // Active state border
-$dsn-color-warning-color-default: $dsn-color-neutral-color-default; // Default text color
-$dsn-color-warning-color-hover: $dsn-color-neutral-color-hover; // Hover state text
-$dsn-color-warning-color-active: $dsn-color-neutral-color-active; // Active state text
-$dsn-color-warning-color-subtle: $dsn-color-neutral-color-subtle; // Subtle text color
-$dsn-color-warning-color-document: $dsn-color-neutral-color-document; // Document text color
-$dsn-color-info-bg-document: $dsn-color-neutral-bg-document; // Document background
+$dsn-color-warning-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtiele achtergrond
+$dsn-color-warning-bg-default: $dsn-color-neutral-bg-default; // Standaard achtergrond
+$dsn-color-warning-bg-hover: $dsn-color-neutral-bg-hover; // Achtergrond in hover state
+$dsn-color-warning-bg-active: $dsn-color-neutral-bg-active; // Achtergrond in active state
+$dsn-color-warning-border-subtle: $dsn-color-neutral-border-subtle; // Subtiele rand
+$dsn-color-warning-border-default: $dsn-color-neutral-border-default; // Standaard rand
+$dsn-color-warning-border-hover: $dsn-color-neutral-border-hover; // Rand in hover state
+$dsn-color-warning-border-active: $dsn-color-neutral-border-active; // Rand in active state
+$dsn-color-warning-color-default: $dsn-color-neutral-color-default; // Standaard tekstkleur
+$dsn-color-warning-color-hover: $dsn-color-neutral-color-hover; // Tekst in hover state
+$dsn-color-warning-color-active: $dsn-color-neutral-color-active; // Tekst in active state
+$dsn-color-warning-color-subtle: $dsn-color-neutral-color-subtle; // Subtiele tekstkleur
+$dsn-color-warning-color-document: $dsn-color-neutral-color-document; // Documenttekstkleur
+$dsn-color-info-bg-document: $dsn-color-neutral-bg-document; // Documentachtergrond
 $dsn-color-info-bg-elevated: $dsn-color-neutral-bg-elevated; // Elevated background
-$dsn-color-info-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtle background
-$dsn-color-info-bg-default: $dsn-color-neutral-bg-default; // Default background
-$dsn-color-info-bg-hover: $dsn-color-neutral-bg-hover; // Hover state background
-$dsn-color-info-bg-active: $dsn-color-neutral-bg-active; // Active state background
-$dsn-color-info-border-subtle: $dsn-color-neutral-border-subtle; // Subtle border
-$dsn-color-info-border-default: $dsn-color-neutral-border-default; // Default border
-$dsn-color-info-border-hover: $dsn-color-neutral-border-hover; // Hover state border
-$dsn-color-info-border-active: $dsn-color-neutral-border-active; // Active state border
-$dsn-color-info-color-default: $dsn-color-neutral-color-default; // Default text color
-$dsn-color-info-color-hover: $dsn-color-neutral-color-hover; // Hover state text
-$dsn-color-info-color-active: $dsn-color-neutral-color-active; // Active state text
-$dsn-color-info-color-subtle: $dsn-color-neutral-color-subtle; // Subtle text color
-$dsn-color-info-color-document: $dsn-color-neutral-color-document; // Document text color
-$dsn-color-neutral-inverse-bg-document: $dsn-color-neutral-color-document; // Inverse document background
-$dsn-color-neutral-inverse-bg-elevated: $dsn-color-neutral-color-document; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns). Same as bg-document in light mode; can be lightened in dark mode to convey elevation.
-$dsn-color-neutral-inverse-bg-subtle: $dsn-color-neutral-color-active; // Inverse subtle background
-$dsn-color-neutral-inverse-bg-default: $dsn-color-neutral-color-hover; // Inverse default background
-$dsn-color-neutral-inverse-bg-hover: $dsn-color-neutral-color-default; // Inverse hover background
-$dsn-color-neutral-inverse-bg-active: $dsn-color-neutral-color-subtle; // Inverse active background
-$dsn-color-neutral-inverse-border-subtle: $dsn-color-neutral-border-active; // Inverse subtle border
-$dsn-color-neutral-inverse-border-default: $dsn-color-neutral-border-hover; // Inverse default border
-$dsn-color-neutral-inverse-border-hover: $dsn-color-neutral-border-default; // Inverse hover border
-$dsn-color-neutral-inverse-border-active: $dsn-color-neutral-border-subtle; // Inverse active border
-$dsn-color-neutral-inverse-color-default: $dsn-color-neutral-bg-active; // Inverse default text
-$dsn-color-neutral-inverse-color-hover: $dsn-color-neutral-bg-hover; // Inverse hover text
-$dsn-color-neutral-inverse-color-active: $dsn-color-neutral-bg-default; // Inverse active text
-$dsn-color-neutral-inverse-color-subtle: $dsn-color-neutral-bg-subtle; // Inverse subtle text
-$dsn-color-neutral-inverse-color-document: $dsn-color-neutral-bg-document; // Inverse document text
+$dsn-color-info-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtiele achtergrond
+$dsn-color-info-bg-default: $dsn-color-neutral-bg-default; // Standaard achtergrond
+$dsn-color-info-bg-hover: $dsn-color-neutral-bg-hover; // Achtergrond in hover state
+$dsn-color-info-bg-active: $dsn-color-neutral-bg-active; // Achtergrond in active state
+$dsn-color-info-border-subtle: $dsn-color-neutral-border-subtle; // Subtiele rand
+$dsn-color-info-border-default: $dsn-color-neutral-border-default; // Standaard rand
+$dsn-color-info-border-hover: $dsn-color-neutral-border-hover; // Rand in hover state
+$dsn-color-info-border-active: $dsn-color-neutral-border-active; // Rand in active state
+$dsn-color-info-color-default: $dsn-color-neutral-color-default; // Standaard tekstkleur
+$dsn-color-info-color-hover: $dsn-color-neutral-color-hover; // Tekst in hover state
+$dsn-color-info-color-active: $dsn-color-neutral-color-active; // Tekst in active state
+$dsn-color-info-color-subtle: $dsn-color-neutral-color-subtle; // Subtiele tekstkleur
+$dsn-color-info-color-document: $dsn-color-neutral-color-document; // Documenttekstkleur
+$dsn-color-neutral-inverse-bg-document: $dsn-color-neutral-color-document; // Inverse documentachtergrond
+$dsn-color-neutral-inverse-bg-elevated: $dsn-color-neutral-color-document; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
+$dsn-color-neutral-inverse-bg-subtle: $dsn-color-neutral-color-active; // Inverse subtiele achtergrond
+$dsn-color-neutral-inverse-bg-default: $dsn-color-neutral-color-hover; // Inverse standaard achtergrond
+$dsn-color-neutral-inverse-bg-hover: $dsn-color-neutral-color-default; // Inverse achtergrond in hover state
+$dsn-color-neutral-inverse-bg-active: $dsn-color-neutral-color-subtle; // Inverse achtergrond in active state
+$dsn-color-neutral-inverse-border-subtle: $dsn-color-neutral-border-active; // Inverse subtiele rand
+$dsn-color-neutral-inverse-border-default: $dsn-color-neutral-border-hover; // Inverse standaard rand
+$dsn-color-neutral-inverse-border-hover: $dsn-color-neutral-border-default; // Inverse rand in hover state
+$dsn-color-neutral-inverse-border-active: $dsn-color-neutral-border-subtle; // Inverse rand in active state
+$dsn-color-neutral-inverse-color-default: $dsn-color-neutral-bg-active; // Inverse standaard tekst
+$dsn-color-neutral-inverse-color-hover: $dsn-color-neutral-bg-hover; // Inverse tekst in hover state
+$dsn-color-neutral-inverse-color-active: $dsn-color-neutral-bg-default; // Inverse tekst in active state
+$dsn-color-neutral-inverse-color-subtle: $dsn-color-neutral-bg-subtle; // Inverse subtiele tekst
+$dsn-color-neutral-inverse-color-document: $dsn-color-neutral-bg-document; // Inverse documenttekst
 $dsn-action-group-column-gap: $dsn-space-inline-lg; // Horizontal gap between actions in horizontal direction
 $dsn-action-group-row-gap: $dsn-space-row-lg; // Vertical gap between wrapped rows in horizontal direction
-$dsn-alert-border-radius: $dsn-border-radius-square; // Alert border radius (square by default; themes can override to add rounded corners)
-$dsn-alert-border-width: $dsn-border-width-medium; // Alert border width (left border only)
-$dsn-alert-column-gap: $dsn-space-inline-md; // Gap between icon and content
-$dsn-alert-padding-block: $dsn-space-block-xl; // Vertical padding
-$dsn-alert-padding-inline: $dsn-space-inline-xl; // Horizontal padding
-$dsn-alert-row-gap: $dsn-space-row-md; // Gap between heading and body
+$dsn-alert-border-radius: $dsn-border-radius-square; // Alert border-radius (standaard vierkant; thema's kunnen afgeronde hoeken toevoegen)
+$dsn-alert-border-width: $dsn-border-width-medium; // Alert border-breedte (alleen linkerborder)
+$dsn-alert-column-gap: $dsn-space-inline-md; // Ruimte tussen icoon en inhoud
+$dsn-alert-padding-block: $dsn-space-block-xl; // Verticale padding
+$dsn-alert-padding-inline: $dsn-space-inline-xl; // Horizontale padding
+$dsn-alert-row-gap: $dsn-space-row-md; // Ruimte tussen koptekst en inhoud
 $dsn-backdrop-z-index: $dsn-z-index-400; // Z-index schaal: backdrop (400) → modal-dialog/drawer (500) → skip-link (600)
-$dsn-breadcrumb-navigation-column-gap: $dsn-space-column-md; // Gap between breadcrumb items
-$dsn-breadcrumb-navigation-font-size: $dsn-text-font-size-sm; // Breadcrumb font size — sm (consistent met Link size small)
-$dsn-breadcrumb-navigation-font-weight: $dsn-text-font-weight-default; // Breadcrumb font weight
-$dsn-breadcrumb-navigation-line-height: $dsn-text-line-height-sm; // Breadcrumb line height — sm (consistent met Link size small)
-$dsn-breadcrumb-navigation-current-color: $dsn-color-neutral-color-subtle; // Current page item color
-$dsn-breadcrumb-navigation-item-min-block-size: $dsn-pointer-target-min-block-size; // Minimum touch/click target height
-$dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Vertical padding to reach min-block-size
-$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // No horizontal padding on items
-$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Gap between icon and link text
-$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Separator icon color
-$dsn-button-border-radius: $dsn-border-radius-md; // Button border radius
-$dsn-button-border-width: $dsn-border-width-thin; // Button border width
-$dsn-button-font-family: $dsn-text-font-family-default; // Button font family
-$dsn-button-font-weight: $dsn-text-font-weight-bold; // Button font weight
-$dsn-button-line-height: $dsn-text-line-height-md; // Button line height
-$dsn-button-min-block-size: $dsn-pointer-target-min-block-size; // Button minimum block size (WCAG 2.5.5 touch target)
-$dsn-button-min-inline-size: $dsn-pointer-target-min-inline-size; // Button minimum inline size (WCAG 2.5.5 touch target)
-$dsn-button-default-background-color: $dsn-color-transparent; // Default button background
-$dsn-button-default-negative-background-color: $dsn-color-transparent; // Default negative button background
-$dsn-button-default-positive-background-color: $dsn-color-transparent; // Default positive button background
-$dsn-button-strong-border-color: $dsn-color-transparent; // Strong button border
-$dsn-button-strong-active-border-color: $dsn-color-transparent; // Strong button active border
-$dsn-button-strong-hover-border-color: $dsn-color-transparent; // Strong button hover border
-$dsn-button-strong-negative-border-color: $dsn-color-transparent; // Strong negative button border
-$dsn-button-strong-negative-active-border-color: $dsn-color-transparent; // Strong negative button active border
-$dsn-button-strong-negative-hover-border-color: $dsn-color-transparent; // Strong negative button hover border
-$dsn-button-strong-positive-border-color: $dsn-color-transparent; // Strong positive button border
-$dsn-button-strong-positive-active-border-color: $dsn-color-transparent; // Strong positive button active border
-$dsn-button-strong-positive-hover-border-color: $dsn-color-transparent; // Strong positive button hover border
-$dsn-button-subtle-background-color: $dsn-color-transparent; // Subtle button background
-$dsn-button-subtle-border-color: $dsn-color-transparent; // Subtle button border
-$dsn-button-subtle-active-border-color: $dsn-color-transparent; // Subtle button active border
-$dsn-button-subtle-hover-border-color: $dsn-color-transparent; // Subtle button hover border
-$dsn-button-subtle-negative-background-color: $dsn-color-transparent; // Subtle negative button background
-$dsn-button-subtle-negative-border-color: $dsn-color-transparent; // Subtle negative button border
-$dsn-button-subtle-negative-active-border-color: $dsn-color-transparent; // Subtle negative button active border
-$dsn-button-subtle-negative-hover-border-color: $dsn-color-transparent; // Subtle negative button hover border
-$dsn-button-subtle-positive-background-color: $dsn-color-transparent; // Subtle positive button background
-$dsn-button-subtle-positive-border-color: $dsn-color-transparent; // Subtle positive button border
-$dsn-button-subtle-positive-active-border-color: $dsn-color-transparent; // Subtle positive button active border
-$dsn-button-subtle-positive-hover-border-color: $dsn-color-transparent; // Subtle positive button hover border
-$dsn-button-disabled-background-color: $dsn-color-neutral-bg-subtle; // Disabled button background — neutral scale, variant-independent
-$dsn-button-disabled-color: $dsn-color-neutral-color-subtle; // Disabled button text/icon color — neutral scale, variant-independent
-$dsn-button-disabled-border-color: $dsn-color-neutral-border-subtle; // Disabled button border color — neutral scale, variant-independent
-$dsn-button-size-default-font-size: $dsn-text-font-size-md; // Default button font size
-$dsn-button-size-default-gap: $dsn-space-text-sm; // Default button gap between icon and text
-$dsn-button-size-default-icon-only-padding: $dsn-space-block-md; // Default button icon-only padding
-$dsn-button-size-default-padding-block: $dsn-space-block-md; // Default button vertical padding
-$dsn-button-size-default-padding-inline: $dsn-space-inline-xl; // Default button horizontal padding
-$dsn-button-size-large-font-size: $dsn-text-font-size-lg; // Large button font size
-$dsn-button-size-large-gap: $dsn-space-text-md; // Large button gap between icon and text
-$dsn-button-size-large-icon-only-padding: $dsn-space-block-lg; // Large button icon-only padding
-$dsn-button-size-large-padding-block: $dsn-space-block-lg; // Large button vertical padding
-$dsn-button-size-large-padding-inline: $dsn-space-inline-2xl; // Large button horizontal padding
-$dsn-button-size-small-font-size: $dsn-text-font-size-sm; // Small button font size
-$dsn-button-size-small-gap: $dsn-space-text-sm; // Small button gap between icon and text
-$dsn-button-size-small-icon-only-padding: $dsn-space-block-sm; // Small button icon-only padding
-$dsn-button-size-small-padding-block: $dsn-space-block-sm; // Small button vertical padding
-$dsn-button-size-small-padding-inline: $dsn-space-inline-lg; // Small button horizontal padding
+$dsn-breadcrumb-navigation-column-gap: $dsn-space-column-md; // Ruimte tussen breadcrumb-items
+$dsn-breadcrumb-navigation-font-size: $dsn-text-font-size-sm; // Breadcrumb font-size — sm (consistent met Link size small)
+$dsn-breadcrumb-navigation-font-weight: $dsn-text-font-weight-default; // Breadcrumb font-gewicht
+$dsn-breadcrumb-navigation-line-height: $dsn-text-line-height-sm; // Breadcrumb line-height — sm (consistent met Link size small)
+$dsn-breadcrumb-navigation-current-color: $dsn-color-neutral-color-subtle; // Kleur van het huidige pagina-item
+$dsn-breadcrumb-navigation-item-min-block-size: $dsn-pointer-target-min-block-size; // Minimale aanraak-/klikhoogte
+$dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Verticale padding om de min-block-size te bereiken
+$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // Geen horizontale padding op items
+$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Ruimte tussen icoon en linktekst
+$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Kleur van het scheidingsicoon
+$dsn-breakout-section-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
+$dsn-button-border-radius: $dsn-border-radius-md; // Button border-radius
+$dsn-button-border-width: $dsn-border-width-thin; // Button border-breedte
+$dsn-button-font-family: $dsn-text-font-family-default; // Button font-familie
+$dsn-button-font-weight: $dsn-text-font-weight-bold; // Button font-gewicht
+$dsn-button-line-height: $dsn-text-line-height-md; // Button line-height
+$dsn-button-min-block-size: $dsn-pointer-target-min-block-size; // Minimale blokhoogte van de button (WCAG 2.5.5 aanraakdoel)
+$dsn-button-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale inlinebreedte van de button (WCAG 2.5.5 aanraakdoel)
+$dsn-button-default-background-color: $dsn-color-transparent; // Achtergrond van de default button
+$dsn-button-default-negative-background-color: $dsn-color-transparent; // Achtergrond van de default negative button
+$dsn-button-default-positive-background-color: $dsn-color-transparent; // Achtergrond van de default positive button
+$dsn-button-strong-border-color: $dsn-color-transparent; // Border van de strong button
+$dsn-button-strong-active-border-color: $dsn-color-transparent; // Border van de strong button op active
+$dsn-button-strong-hover-border-color: $dsn-color-transparent; // Border van de strong button op hover
+$dsn-button-strong-negative-border-color: $dsn-color-transparent; // Border van de strong negative button
+$dsn-button-strong-negative-active-border-color: $dsn-color-transparent; // Border van de strong negative button op active
+$dsn-button-strong-negative-hover-border-color: $dsn-color-transparent; // Border van de strong negative button op hover
+$dsn-button-strong-positive-border-color: $dsn-color-transparent; // Border van de strong positive button
+$dsn-button-strong-positive-active-border-color: $dsn-color-transparent; // Border van de strong positive button op active
+$dsn-button-strong-positive-hover-border-color: $dsn-color-transparent; // Border van de strong positive button op hover
+$dsn-button-subtle-background-color: $dsn-color-transparent; // Achtergrond van de subtle button
+$dsn-button-subtle-border-color: $dsn-color-transparent; // Border van de subtle button
+$dsn-button-subtle-active-border-color: $dsn-color-transparent; // Border van de subtle button op active
+$dsn-button-subtle-hover-border-color: $dsn-color-transparent; // Border van de subtle button op hover
+$dsn-button-subtle-negative-background-color: $dsn-color-transparent; // Achtergrond van de subtle negative button
+$dsn-button-subtle-negative-border-color: $dsn-color-transparent; // Border van de subtle negative button
+$dsn-button-subtle-negative-active-border-color: $dsn-color-transparent; // Border van de subtle negative button op active
+$dsn-button-subtle-negative-hover-border-color: $dsn-color-transparent; // Border van de subtle negative button op hover
+$dsn-button-subtle-positive-background-color: $dsn-color-transparent; // Achtergrond van de subtle positive button
+$dsn-button-subtle-positive-border-color: $dsn-color-transparent; // Border van de subtle positive button
+$dsn-button-subtle-positive-active-border-color: $dsn-color-transparent; // Border van de subtle positive button op active
+$dsn-button-subtle-positive-hover-border-color: $dsn-color-transparent; // Border van de subtle positive button op hover
+$dsn-button-disabled-background-color: $dsn-color-neutral-bg-subtle; // Achtergrond van de disabled button — neutrale schaal, variant-onafhankelijk
+$dsn-button-disabled-color: $dsn-color-neutral-color-subtle; // Tekst-/icoonkleur van de disabled button — neutrale schaal, variant-onafhankelijk
+$dsn-button-disabled-border-color: $dsn-color-neutral-border-subtle; // Borderkleur van de disabled button — neutrale schaal, variant-onafhankelijk
+$dsn-button-size-default-font-size: $dsn-text-font-size-md; // Font-size van de default button
+$dsn-button-size-default-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de default button
+$dsn-button-size-default-icon-only-padding: $dsn-space-block-md; // Padding van de icon-only default button
+$dsn-button-size-default-padding-block: $dsn-space-block-md; // Verticale padding van de default button
+$dsn-button-size-default-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de default button
+$dsn-button-size-large-font-size: $dsn-text-font-size-lg; // Font-size van de large button
+$dsn-button-size-large-gap: $dsn-space-text-md; // Ruimte tussen icoon en tekst van de large button
+$dsn-button-size-large-icon-only-padding: $dsn-space-block-lg; // Padding van de icon-only large button
+$dsn-button-size-large-padding-block: $dsn-space-block-lg; // Verticale padding van de large button
+$dsn-button-size-large-padding-inline: $dsn-space-inline-2xl; // Horizontale padding van de large button
+$dsn-button-size-small-font-size: $dsn-text-font-size-sm; // Font-size van de small button
+$dsn-button-size-small-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de small button
+$dsn-button-size-small-icon-only-padding: $dsn-space-block-sm; // Padding van de icon-only small button
+$dsn-button-size-small-padding-block: $dsn-space-block-sm; // Verticale padding van de small button
+$dsn-button-size-small-padding-inline: $dsn-space-inline-lg; // Horizontale padding van de small button
 $dsn-card-background-color: $dsn-color-neutral-bg-document; // Card achtergrondkleur standaard — zelfde als paginaachtergrond
 $dsn-card-background-color-hover: $dsn-color-neutral-bg-elevated; // Card achtergrondkleur bij hover — bg-elevated benadrukt elevatie
 $dsn-card-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de card (8px)
@@ -467,13 +471,13 @@ $dsn-card-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de ca
 $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-group-gap: $dsn-space-inline-xl; // Ruimte tussen cards in een CardGroup (16px)
-$dsn-checkbox-group-border-width: $dsn-border-width-none; // No border by default for fieldset
-$dsn-checkbox-group-gap: $dsn-space-block-sm; // Space between checkbox options in the group
-$dsn-checkbox-group-margin: $dsn-space-none; // No margin by default for fieldset
-$dsn-checkbox-group-padding: $dsn-space-none; // No padding by default for fieldset
+$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
+$dsn-checkbox-group-margin: $dsn-space-none; // Standaard geen margin op de fieldset
+$dsn-checkbox-group-padding: $dsn-space-none; // Standaard geen padding op de fieldset
 $dsn-checkbox-option-gap: $dsn-space-text-md; // Gap between checkbox and label
 $dsn-checkbox-option-padding-block: $dsn-space-block-md; // Vertical padding for touch target accessibility (WCAG 2.5.5)
-$dsn-checkbox-border-radius: $dsn-border-radius-square; // Square corners for checkbox
+$dsn-checkbox-border-radius: $dsn-border-radius-square; // Vierkante hoeken voor de checkbox
 $dsn-checkbox-border-width: $dsn-border-width-thin;
 $dsn-checkbox-active-border-width: $dsn-border-width-medium;
 $dsn-checkbox-checked-border-width: $dsn-border-width-thin;
@@ -499,13 +503,13 @@ $dsn-date-input-group-gap: $dsn-space-inline-md; // Gap between the day, month a
 $dsn-date-input-group-label-gap: $dsn-space-text-sm; // Gap between each field label and its input
 $dsn-date-input-button-inset-inline-end: $dsn-space-inline-sm; // Distance from the inline-end border to the calendar button (4px)
 $dsn-date-input-icon-gap: $dsn-space-text-md; // Gap between calendar button and input text
-$dsn-details-row-gap: $dsn-space-row-md; // Vertical gap between summary and content
-$dsn-details-summary-gap: $dsn-space-text-sm; // Gap between chevron icon and label text
-$dsn-details-content-border-color: $dsn-color-neutral-border-subtle; // Left border color for visual grouping
-$dsn-details-content-border-inline-start-width: $dsn-border-width-medium; // Left border width
-$dsn-details-content-padding-inline-start: $dsn-space-inline-xl; // Left padding — aligns content with label text
-$dsn-details-content-padding-inline-end: $dsn-space-inline-xl; // Right padding
-$dsn-details-content-padding-block: $dsn-space-block-xl; // Top and bottom padding
+$dsn-details-row-gap: $dsn-space-row-md; // Verticale ruimte tussen summary en inhoud
+$dsn-details-summary-gap: $dsn-space-text-sm; // Ruimte tussen het chevron-icoon en de labeltekst
+$dsn-details-content-border-color: $dsn-color-neutral-border-subtle; // Kleur van de linkerborder voor visuele groepering
+$dsn-details-content-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder
+$dsn-details-content-padding-inline-start: $dsn-space-inline-xl; // Linker padding — lijnt de inhoud uit met de labeltekst
+$dsn-details-content-padding-inline-end: $dsn-space-inline-xl; // Rechter padding
+$dsn-details-content-padding-block: $dsn-space-block-xl; // Boven- en onderpadding
 $dsn-dot-badge-pulse-easing: $dsn-transition-easing-default; // Easing van de pulse-animatie
 $dsn-drawer-z-index: $dsn-z-index-500; // Positionering boven de backdrop (400) en onder de skip-link (600)
 $dsn-drawer-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van het zijpaneel — bg-elevated benadrukt elevatie boven de pagina
@@ -524,9 +528,9 @@ $dsn-drawer-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding va
 $dsn-drawer-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
 $dsn-drawer-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
 $dsn-drawer-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
-$dsn-file-input-column-gap: $dsn-space-text-lg; // Gap between file-selector-button and filename text
-$dsn-file-input-min-block-size: $dsn-pointer-target-min-block-size; // File input minimum height (WCAG touch target)
-$dsn-file-input-min-inline-size: $dsn-pointer-target-min-inline-size; // File input minimum width (WCAG touch target)
+$dsn-file-input-column-gap: $dsn-space-text-lg; // Ruimte tussen de file-selector-button en de bestandsnaamtekst
+$dsn-file-input-min-block-size: $dsn-pointer-target-min-block-size; // Minimale hoogte van het bestandsinvoerveld (WCAG aanraakdoel)
+$dsn-file-input-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale breedte van het bestandsinvoerveld (WCAG aanraakdoel)
 $dsn-file-background-color: $dsn-color-neutral-bg-document; // Achtergrondkleur van het file component
 $dsn-file-background-color-hover: $dsn-color-neutral-bg-elevated; // Achtergrondkleur bij hover in de interactieve variant — zelfde als Card
 $dsn-file-background-color-active: $dsn-color-neutral-bg-elevated; // Achtergrondkleur bij active — zelfde als hover; geen box-shadow wijziging
@@ -547,60 +551,60 @@ $dsn-file-meta-font-size: $dsn-text-font-size-md;
 $dsn-file-media-border-radius: $dsn-border-radius-sm;
 $dsn-file-media-background-color: $dsn-color-neutral-bg-default;
 $dsn-file-media-icon-color: $dsn-color-neutral-color-subtle;
-$dsn-form-field-description-color: $dsn-color-neutral-color-subtle; // Form field description text color
-$dsn-form-field-description-font-family: $dsn-text-font-family-default; // Form field description font family
-$dsn-form-field-description-font-size: $dsn-text-font-size-md; // Form field description font size
-$dsn-form-field-description-font-weight: $dsn-text-font-weight-default; // Form field description font weight
-$dsn-form-field-description-line-height: $dsn-text-line-height-md; // Form field description line height
-$dsn-form-field-description-margin-block-end: $dsn-space-block-md; // Space below description before form control
-$dsn-form-field-error-message-font-family: $dsn-text-font-family-default; // Form field error message font family
-$dsn-form-field-error-message-font-size: $dsn-text-font-size-md; // Form field error message font size
-$dsn-form-field-error-message-font-weight: $dsn-text-font-weight-default; // Form field error message font weight
-$dsn-form-field-error-message-gap: $dsn-space-text-sm; // Space between icon and error message text
-$dsn-form-field-error-message-line-height: $dsn-text-line-height-md; // Form field error message line height
-$dsn-form-field-error-message-margin-block-end: $dsn-space-block-md; // Space below error message before form control
-$dsn-form-field-label-suffix-color: $dsn-color-neutral-color-document; // Form field label suffix text color
-$dsn-form-field-label-suffix-font-family: $dsn-text-font-family-default; // Form field label suffix font family
-$dsn-form-field-label-suffix-font-size: $dsn-text-font-size-md; // Form field label suffix font size
-$dsn-form-field-label-suffix-font-weight: $dsn-text-font-weight-default; // Form field label suffix font weight
-$dsn-form-field-label-suffix-line-height: $dsn-text-line-height-md; // Form field label suffix line height
-$dsn-form-field-label-suffix-margin-inline-start: $dsn-space-text-sm; // Space between label text and suffix text
-$dsn-form-field-label-color: $dsn-color-neutral-color-document; // Form field label text color
-$dsn-form-field-label-font-family: $dsn-text-font-family-default; // Form field label font family
-$dsn-form-field-label-font-size: $dsn-text-font-size-md; // Form field label font size
-$dsn-form-field-label-font-weight: $dsn-text-font-weight-bold; // Form field label font weight
-$dsn-form-field-label-line-height: $dsn-text-line-height-md; // Form field label line height
-$dsn-form-field-label-margin-block-end: $dsn-space-block-md; // Space below label before form control (when no description follows)
-$dsn-form-field-label-margin-block-end-with-description: $dsn-space-block-sm; // Space below label when description follows
-$dsn-form-field-status-color: $dsn-color-neutral-color-subtle; // Form field status text color (subtle for non-critical info)
-$dsn-form-field-status-font-family: $dsn-text-font-family-default; // Form field status font family
-$dsn-form-field-status-font-size: $dsn-text-font-size-md; // Form field status font size
-$dsn-form-field-status-font-weight: $dsn-text-font-weight-default; // Form field status font weight
-$dsn-form-field-status-gap: $dsn-space-text-sm; // Gap between icon and text (positive and warning variants)
-$dsn-form-field-status-line-height: $dsn-text-line-height-md; // Form field status line height
-$dsn-form-field-status-margin-block-start: $dsn-space-block-md; // Space above status message after form control
-$dsn-form-field-margin-block-end: $dsn-space-none; // Bottom margin of form field container
-$dsn-form-field-margin-block-start: $dsn-space-none; // Top margin of form field container
-$dsn-form-field-invalid-border-inline-start-width: $dsn-border-width-medium; // Left border width for invalid form fields
-$dsn-form-field-invalid-padding-inline-start: $dsn-space-inline-xl; // Left padding for invalid form fields (to accommodate border)
+$dsn-form-field-description-color: $dsn-color-neutral-color-subtle; // Tekstkleur van de formulierveldbeschrijving
+$dsn-form-field-description-font-family: $dsn-text-font-family-default; // Font-familie van de formulierveldbeschrijving
+$dsn-form-field-description-font-size: $dsn-text-font-size-md; // Font-size van de formulierveldbeschrijving
+$dsn-form-field-description-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de formulierveldbeschrijving
+$dsn-form-field-description-line-height: $dsn-text-line-height-md; // Line-height van de formulierveldbeschrijving
+$dsn-form-field-description-margin-block-end: $dsn-space-block-md; // Ruimte onder de beschrijving voor het formulierbesturingselement
+$dsn-form-field-error-message-font-family: $dsn-text-font-family-default; // Font-familie van de foutmelding
+$dsn-form-field-error-message-font-size: $dsn-text-font-size-md; // Font-size van de foutmelding
+$dsn-form-field-error-message-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de foutmelding
+$dsn-form-field-error-message-gap: $dsn-space-text-sm; // Ruimte tussen icoon en foutmeldingstekst
+$dsn-form-field-error-message-line-height: $dsn-text-line-height-md; // Line-height van de foutmelding
+$dsn-form-field-error-message-margin-block-end: $dsn-space-block-md; // Ruimte onder de foutmelding voor het formulierbesturingselement
+$dsn-form-field-label-suffix-color: $dsn-color-neutral-color-document; // Tekstkleur van het labelachtervoegsel
+$dsn-form-field-label-suffix-font-family: $dsn-text-font-family-default; // Font-familie van het labelachtervoegsel
+$dsn-form-field-label-suffix-font-size: $dsn-text-font-size-md; // Font-size van het labelachtervoegsel
+$dsn-form-field-label-suffix-font-weight: $dsn-text-font-weight-default; // Font-gewicht van het labelachtervoegsel
+$dsn-form-field-label-suffix-line-height: $dsn-text-line-height-md; // Line-height van het labelachtervoegsel
+$dsn-form-field-label-suffix-margin-inline-start: $dsn-space-text-sm; // Ruimte tussen de labeltekst en het achtervoegsel
+$dsn-form-field-label-color: $dsn-color-neutral-color-document; // Tekstkleur van het formulierveldlabel
+$dsn-form-field-label-font-family: $dsn-text-font-family-default; // Font-familie van het formulierveldlabel
+$dsn-form-field-label-font-size: $dsn-text-font-size-md; // Font-size van het formulierveldlabel
+$dsn-form-field-label-font-weight: $dsn-text-font-weight-bold; // Font-gewicht van het formulierveldlabel
+$dsn-form-field-label-line-height: $dsn-text-line-height-md; // Line-height van het formulierveldlabel
+$dsn-form-field-label-margin-block-end: $dsn-space-block-md; // Ruimte onder het label voor het formulierbesturingselement (wanneer geen beschrijving volgt)
+$dsn-form-field-label-margin-block-end-with-description: $dsn-space-block-sm; // Ruimte onder het label wanneer een beschrijving volgt
+$dsn-form-field-status-color: $dsn-color-neutral-color-subtle; // Tekstkleur van de veldstatus (subtiel voor niet-kritieke informatie)
+$dsn-form-field-status-font-family: $dsn-text-font-family-default; // Font-familie van de veldstatus
+$dsn-form-field-status-font-size: $dsn-text-font-size-md; // Font-size van de veldstatus
+$dsn-form-field-status-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de veldstatus
+$dsn-form-field-status-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst (positive en warning varianten)
+$dsn-form-field-status-line-height: $dsn-text-line-height-md; // Line-height van de veldstatus
+$dsn-form-field-status-margin-block-start: $dsn-space-block-md; // Ruimte boven het statusbericht na het formulierbesturingselement
+$dsn-form-field-margin-block-end: $dsn-space-none; // Onderste margin van de formulierveldcontainer
+$dsn-form-field-margin-block-start: $dsn-space-none; // Bovenste margin van de formulierveldcontainer
+$dsn-form-field-invalid-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder voor ongeldige formuliervelden
+$dsn-form-field-invalid-padding-inline-start: $dsn-space-inline-xl; // Linker padding voor ongeldige formuliervelden (om de border op te vangen)
 $dsn-grid-gutter: $dsn-space-column-xl; // Horizontal gap between grid columns (overridden to column.md in information-dense)
 $dsn-grid-row-gap: $dsn-space-column-xl; // Vertical gap between grid rows (overridden to column.md in information-dense)
-$dsn-grid-margin: $dsn-space-column-3xl; // Outer padding on both sides of the grid container
 $dsn-hero-padding-block: $dsn-space-block-4xl; // Verticale padding van de Hero-inhoud
 $dsn-hero-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de dsn-hero__inner wrapper — stemt af op dsn-page-body-padding-inline
+$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-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
 $dsn-image-caption-line-height: $dsn-text-line-height-sm; // Compacte regelafstand passend bij kleine tekst — consistent met font-size.sm
 $dsn-image-caption-margin-block-start: $dsn-space-row-sm; // Kleine ademruimte tussen afbeelding en bijschrift
-$dsn-link-gap: $dsn-space-text-sm; // Link gap between icon and text
-$dsn-link-disabled-color: $dsn-color-neutral-color-subtle; // Link disabled text color
-$dsn-link-size-default-font-size: $dsn-text-font-size-md; // Default link font size
-$dsn-link-size-default-gap: $dsn-space-text-sm; // Default link gap between icon and text
-$dsn-link-size-large-font-size: $dsn-text-font-size-lg; // Large link font size
-$dsn-link-size-large-gap: $dsn-space-text-md; // Large link gap between icon and text
-$dsn-link-size-small-font-size: $dsn-text-font-size-sm; // Small link font size
-$dsn-link-size-small-gap: $dsn-space-text-sm; // Small link gap between icon and text
+$dsn-link-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de link
+$dsn-link-disabled-color: $dsn-color-neutral-color-subtle; // Tekstkleur van de link op disabled
+$dsn-link-size-default-font-size: $dsn-text-font-size-md; // Font-size van de default link
+$dsn-link-size-default-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de default link
+$dsn-link-size-large-font-size: $dsn-text-font-size-lg; // Font-size van de large link
+$dsn-link-size-large-gap: $dsn-space-text-md; // Ruimte tussen icoon en tekst van de large link
+$dsn-link-size-small-font-size: $dsn-text-font-size-sm; // Font-size van de small link
+$dsn-link-size-small-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de small link
 $dsn-logo-color-label: $dsn-color-neutral-bg-document; // Binnenste rechthoek — zelfde kleur als de documentachtergrond, zodat de letters als doorkijkjes werken.
 $dsn-menu-item-font-size: $dsn-text-font-size-md; // Gedeeld: lettergrootte voor MenuLink en MenuButton
 $dsn-menu-item-font-weight: $dsn-text-font-weight-default; // Gedeeld: letterdikte — regular voor navigatie-items
@@ -632,16 +636,16 @@ $dsn-modal-dialog-body-padding-inline: $dsn-space-inline-xl; // Horizontale padd
 $dsn-modal-dialog-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
 $dsn-modal-dialog-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
 $dsn-modal-dialog-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
-$dsn-note-border-inline-start-width: $dsn-border-width-medium; // Note left border width
-$dsn-note-column-gap: $dsn-space-inline-md; // Gap between icon and content
-$dsn-note-padding-block: $dsn-space-block-xl; // Vertical padding
-$dsn-note-padding-inline-end: $dsn-space-inline-xl; // Horizontal padding inline-end
-$dsn-note-padding-inline-start: $dsn-space-inline-xl; // Horizontal padding inline-start (after the border)
-$dsn-note-row-gap: $dsn-space-row-md; // Gap between heading and body
-$dsn-note-neutral-background-color: $dsn-color-neutral-bg-default; // Background color for neutral variant (default)
-$dsn-note-neutral-border-inline-start-color: $dsn-color-neutral-border-default; // Left border color for neutral variant (default)
-$dsn-note-neutral-color: $dsn-color-neutral-color-document; // Text color for neutral variant (default)
-$dsn-note-neutral-icon-color: $dsn-color-neutral-color-default; // Icon color for neutral variant (default)
+$dsn-note-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder van de Note
+$dsn-note-column-gap: $dsn-space-inline-md; // Ruimte tussen icoon en inhoud
+$dsn-note-padding-block: $dsn-space-block-xl; // Verticale padding
+$dsn-note-padding-inline-end: $dsn-space-inline-xl; // Horizontale padding aan het einde
+$dsn-note-padding-inline-start: $dsn-space-inline-xl; // Horizontale padding aan het begin (na de border)
+$dsn-note-row-gap: $dsn-space-row-md; // Ruimte tussen koptekst en inhoud
+$dsn-note-neutral-background-color: $dsn-color-neutral-bg-default; // Achtergrondkleur voor neutral variant (standaard)
+$dsn-note-neutral-border-inline-start-color: $dsn-color-neutral-border-default; // Kleur van de linkerborder voor neutral variant (standaard)
+$dsn-note-neutral-color: $dsn-color-neutral-color-document; // Tekstkleur voor neutral variant (standaard)
+$dsn-note-neutral-icon-color: $dsn-color-neutral-color-default; // Icoonkleur voor neutral variant (standaard)
 $dsn-number-badge-font-size: $dsn-text-font-size-sm; // NumberBadge font size — zelfde schaal als StatusBadge (kleinst beschikbare stap)
 $dsn-number-badge-line-height: $dsn-text-line-height-sm; // NumberBadge line height
 $dsn-number-badge-font-weight: $dsn-text-font-weight-bold; // NumberBadge font weight — bold voor leesbaarheid op kleine afmeting
@@ -655,16 +659,16 @@ $dsn-option-label-font-family: $dsn-text-font-family-default;
 $dsn-option-label-font-size: $dsn-text-font-size-md;
 $dsn-option-label-font-weight: $dsn-text-font-weight-default;
 $dsn-option-label-line-height: $dsn-text-line-height-md;
-$dsn-ordered-list-color: $dsn-color-neutral-color-document; // Ordered list text color
-$dsn-ordered-list-font-family: $dsn-text-font-family-default; // Ordered list font family
-$dsn-ordered-list-font-size: $dsn-text-font-size-md; // Ordered list font size
-$dsn-ordered-list-font-weight: $dsn-text-font-weight-default; // Ordered list font weight
-$dsn-ordered-list-max-inline-size: $dsn-text-max-inline-size; // Ordered list max width for readability
-$dsn-ordered-list-gap: $dsn-space-row-sm; // Space between list items
-$dsn-ordered-list-line-height: $dsn-text-line-height-md; // Ordered list line height
-$dsn-ordered-list-margin-block-end: $dsn-space-row-lg; // Ordered list bottom margin
-$dsn-ordered-list-marker-color: $dsn-color-neutral-color-document; // Number marker color
-$dsn-ordered-list-padding-inline-start: $dsn-space-inline-3xl; // Ordered list left indentation
+$dsn-ordered-list-color: $dsn-color-neutral-color-document; // Tekstkleur van de geordende lijst
+$dsn-ordered-list-font-family: $dsn-text-font-family-default; // Font-familie van de geordende lijst
+$dsn-ordered-list-font-size: $dsn-text-font-size-md; // Font-size van de geordende lijst
+$dsn-ordered-list-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de geordende lijst
+$dsn-ordered-list-max-inline-size: $dsn-text-max-inline-size; // Maximale breedte van de geordende lijst voor leesbaarheid
+$dsn-ordered-list-gap: $dsn-space-row-sm; // Ruimte tussen lijstitems
+$dsn-ordered-list-line-height: $dsn-text-line-height-md; // Line-height van de geordende lijst
+$dsn-ordered-list-margin-block-end: $dsn-space-row-lg; // Onderste margin van de geordende lijst
+$dsn-ordered-list-marker-color: $dsn-color-neutral-color-document; // Kleur van het nummermarkeerteken
+$dsn-ordered-list-padding-inline-start: $dsn-space-inline-3xl; // Inspringing aan de linkerkant van de geordende lijst
 $dsn-page-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de page-body binnenbalk — zelfde schaal als PageHeader en PageFooter voor een consistente paginakantranding
 $dsn-page-footer-border-block-start-width: $dsn-border-width-thick; // Breedte van de bovenkantrand (4px) — spiegelt de PageHeader border-block-end voor visuele symmetrie
 $dsn-page-footer-padding-block: $dsn-space-block-6xl; // Verticale ademruimte van de footer-binnenbalk
@@ -685,19 +689,19 @@ $dsn-page-header-search-panel-padding-inline: $dsn-space-inline-xl; // Horizonta
 $dsn-page-header-compact-background-color: $dsn-color-neutral-bg-document; // Achtergrond van de compacte balk — zelfde neutrale kleur als masthead; de primaire navigatie staat hier direct naast het logo zonder aparte navbar
 $dsn-page-header-compact-padding-block: $dsn-space-block-xl; // Verticale ademruimte in de compacte balk — zelfde schaal als masthead
 $dsn-page-header-compact-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de compacte balk — zelfde schaal als masthead en navbar
-$dsn-paragraph-color: $dsn-color-neutral-color-document; // Paragraph text color
-$dsn-paragraph-font-family: $dsn-text-font-family-default; // Paragraph font family
-$dsn-paragraph-font-weight: $dsn-text-font-weight-default; // Paragraph font weight
-$dsn-paragraph-max-inline-size: $dsn-text-max-inline-size; // Paragraph max width for readability
-$dsn-paragraph-default-font-size: $dsn-text-font-size-md; // Default paragraph font size
-$dsn-paragraph-default-line-height: $dsn-text-line-height-md; // Default paragraph line height
-$dsn-paragraph-default-margin-block-end: $dsn-space-row-lg; // Default paragraph bottom margin
-$dsn-paragraph-lead-font-size: $dsn-text-font-size-lg; // Lead paragraph font size
-$dsn-paragraph-lead-line-height: $dsn-text-line-height-lg; // Lead paragraph line height
-$dsn-paragraph-lead-margin-block-end: $dsn-space-row-xl; // Lead paragraph bottom margin
-$dsn-paragraph-small-print-font-size: $dsn-text-font-size-sm; // Small print paragraph font size
-$dsn-paragraph-small-print-line-height: $dsn-text-line-height-sm; // Small print paragraph line height
-$dsn-paragraph-small-print-margin-block-end: $dsn-space-row-md; // Small print paragraph bottom margin
+$dsn-paragraph-color: $dsn-color-neutral-color-document; // Tekstkleur van de alinea
+$dsn-paragraph-font-family: $dsn-text-font-family-default; // Font-familie van de alinea
+$dsn-paragraph-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de alinea
+$dsn-paragraph-max-inline-size: $dsn-text-max-inline-size; // Maximale breedte van de alinea voor leesbaarheid
+$dsn-paragraph-default-font-size: $dsn-text-font-size-md; // Font-size van de standaard alinea
+$dsn-paragraph-default-line-height: $dsn-text-line-height-md; // Line-height van de standaard alinea
+$dsn-paragraph-default-margin-block-end: $dsn-space-row-lg; // Onderste margin van de standaard alinea
+$dsn-paragraph-lead-font-size: $dsn-text-font-size-lg; // Font-size van de inleidende alinea
+$dsn-paragraph-lead-line-height: $dsn-text-line-height-lg; // Line-height van de inleidende alinea
+$dsn-paragraph-lead-margin-block-end: $dsn-space-row-xl; // Onderste margin van de inleidende alinea
+$dsn-paragraph-small-print-font-size: $dsn-text-font-size-sm; // Font-size van de kleine tekst alinea
+$dsn-paragraph-small-print-line-height: $dsn-text-line-height-sm; // Line-height van de kleine tekst alinea
+$dsn-paragraph-small-print-margin-block-end: $dsn-space-row-md; // Onderste margin van de kleine tekst alinea
 $dsn-popover-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina
 $dsn-popover-border-width: $dsn-border-width-thin; // Randbreedte van de popover
 $dsn-popover-border-color: $dsn-color-neutral-border-subtle; // Randkleur van de popover
@@ -716,14 +720,20 @@ $dsn-popover-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding v
 $dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
 $dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
 $dsn-popover-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
-$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Grijze achtergrondtrack
+$dsn-pre-heading-color: $dsn-color-neutral-color-document; // Tekstkleur van de pre-heading
+$dsn-pre-heading-font-family: $dsn-text-font-family-default; // Font-familie van de pre-heading
+$dsn-pre-heading-font-size: $dsn-text-font-size-md; // Font-size van de pre-heading (gelijk aan de bodytekst)
+$dsn-pre-heading-font-weight: $dsn-text-font-weight-bold; // Font-gewicht van de pre-heading (vet om te onderscheiden van de kopregel)
+$dsn-pre-heading-line-height: $dsn-text-line-height-md; // Line-height van de pre-heading
+$dsn-pre-heading-margin-block-end: $dsn-space-row-xs; // Ruimte tussen de pre-heading en de koptekst
+$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Achtergrondtrack
 $dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
 $dsn-progress-bar-gap-header: $dsn-space-block-xs; // Ruimte tussen percentage-tekst en balk
 $dsn-progress-bar-gap-footer: $dsn-space-block-xs; // Ruimte tussen balk en beschrijving
-$dsn-radio-group-border-width: $dsn-border-width-none; // No border by default for fieldset
-$dsn-radio-group-gap: $dsn-space-block-sm; // Space between radio options in the group
-$dsn-radio-group-margin: $dsn-space-none; // No margin by default for fieldset
-$dsn-radio-group-padding: $dsn-space-none; // No padding by default for fieldset
+$dsn-radio-group-border-width: $dsn-border-width-none; // Standaard geen border op de fieldset
+$dsn-radio-group-gap: $dsn-space-block-sm; // Ruimte tussen de radio-opties in de groep
+$dsn-radio-group-margin: $dsn-space-none; // Standaard geen margin op de fieldset
+$dsn-radio-group-padding: $dsn-space-none; // Standaard geen padding op de fieldset
 $dsn-radio-option-gap: $dsn-space-text-md; // Gap between radio button and label
 $dsn-radio-option-padding-block: $dsn-space-block-md; // Vertical padding for touch target accessibility (WCAG 2.5.5)
 $dsn-radio-border-width: $dsn-border-width-thin;
@@ -735,9 +745,9 @@ $dsn-radio-invalid-border-width: $dsn-border-width-medium;
 $dsn-radio-checked-active-border-width: $dsn-border-width-medium;
 $dsn-radio-checked-focus-border-width: $dsn-border-width-medium;
 $dsn-radio-checked-hover-border-width: $dsn-border-width-medium;
-$dsn-search-input-icon-gap: $dsn-space-text-md; // Gap between search icon and input text
-$dsn-select-icon-gap: $dsn-space-text-md; // Gap between chevron icon and select text
-$dsn-select-icon-inset-inline-end: $dsn-space-inline-md; // Distance from the inline-end border to the chevron icon (8px)
+$dsn-search-input-icon-gap: $dsn-space-text-md; // Ruimte tussen het zoekicoon en de invoertekst
+$dsn-select-icon-gap: $dsn-space-text-md; // Ruimte tussen het chevron-icoon en de selectietekst
+$dsn-select-icon-inset-inline-end: $dsn-space-inline-md; // Afstand van de inline-end border tot het chevron-icoon (8px)
 $dsn-skip-link-z-index: $dsn-z-index-600; // Hoogste z-index — boven modals (500) en backdrop (400), zodat de skip-link altijd zichtbaar is bij focus
 $dsn-skip-link-padding-block: $dsn-space-block-md; // Verticale padding van de skip-link
 $dsn-skip-link-padding-inline: $dsn-space-inline-lg; // Horizontale padding van de skip-link
@@ -747,25 +757,32 @@ $dsn-skip-link-offset-inline-start: $dsn-space-inline-md; // Afstand van de link
 $dsn-spinner-stroke-width: $dsn-border-width-medium; // Lijndikte van de boog — identiek aan border.width.medium voor visuele consistentie
 $dsn-spinner-track-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van de cirkelbaan
 $dsn-spinner-gap-size: $dsn-space-inline-md; // Ruimte tussen spinner en label
-$dsn-status-badge-border-color: $dsn-color-transparent; // Status badge border color (transparent by default; visible in forced-colors / High Contrast mode)
-$dsn-status-badge-border-radius: $dsn-border-radius-sm; // Status badge border radius
-$dsn-status-badge-border-width: $dsn-border-width-thin; // Status badge border width
-$dsn-status-badge-font-size: $dsn-text-font-size-sm; // Status badge font size
-$dsn-status-badge-gap: $dsn-space-text-sm; // Gap between icon and label
-$dsn-status-badge-line-height: $dsn-text-line-height-sm; // Status badge line height
-$dsn-status-badge-padding-block: $dsn-space-block-xs; // Vertical padding
-$dsn-status-badge-padding-inline: $dsn-space-inline-md; // Horizontal padding
-$dsn-status-badge-neutral-background-color: $dsn-color-neutral-bg-default; // Background color for neutral variant
-$dsn-status-badge-neutral-color: $dsn-color-neutral-color-default; // Text color for neutral variant
-$dsn-summary-list-row-border-block-end-color: $dsn-color-neutral-border-subtle; // Color of the row separator border
-$dsn-summary-list-row-border-block-end-width: $dsn-border-width-thin; // Width of the row separator border
-$dsn-summary-list-row-gap: $dsn-space-inline-lg; // Horizontal gap between columns in the grid layout
-$dsn-summary-list-row-padding-block: $dsn-space-block-lg; // Vertical spacing around each row — applies in both stacked and grid layout; matches Table cell padding
-$dsn-summary-list-key-color: $dsn-color-neutral-color-document; // Text color of the key cell
-$dsn-summary-list-key-font-weight: $dsn-text-font-weight-bold; // Bold weight distinguishes the key from the value visually
-$dsn-summary-list-value-color: $dsn-color-neutral-color-document; // Text color of the value cell
-$dsn-summary-list-actions-gap: $dsn-space-inline-3xl; // Gap between multiple action links in a single row
-$dsn-summary-list-actions-margin-block-start-stacked: $dsn-space-block-md; // Extra space above the actions cell in the stacked (mobile) layout
+$dsn-status-badge-border-color: $dsn-color-transparent; // Borderkleur van de StatusBadge (standaard transparant; zichtbaar in forced-colors / High Contrast-modus)
+$dsn-status-badge-border-radius: $dsn-border-radius-sm; // Border-radius van de StatusBadge
+$dsn-status-badge-border-width: $dsn-border-width-thin; // Border-breedte van de StatusBadge
+$dsn-status-badge-font-size: $dsn-text-font-size-sm; // Font-size van de StatusBadge
+$dsn-status-badge-gap: $dsn-space-text-sm; // Ruimte tussen icoon en label
+$dsn-status-badge-line-height: $dsn-text-line-height-sm; // Line-height van de StatusBadge
+$dsn-status-badge-padding-block: $dsn-space-block-xs; // Verticale padding
+$dsn-status-badge-padding-inline: $dsn-space-inline-md; // Horizontale padding
+$dsn-status-badge-neutral-background-color: $dsn-color-neutral-bg-default; // Achtergrondkleur voor neutral variant
+$dsn-status-badge-neutral-color: $dsn-color-neutral-color-default; // Tekstkleur voor neutral variant
+$dsn-summary-list-row-border-block-end-color: $dsn-color-neutral-border-subtle; // Kleur van de rij-scheidingsborder
+$dsn-summary-list-row-border-block-end-width: $dsn-border-width-thin; // Breedte van de rij-scheidingsborder
+$dsn-summary-list-row-gap: $dsn-space-inline-lg; // Horizontale ruimte tussen kolommen in de gridindeling
+$dsn-summary-list-row-padding-block: $dsn-space-block-lg; // Verticale ruimte rondom elke rij — geldt voor zowel gestapelde als gridindeling; komt overeen met de celpadding van de Table
+$dsn-summary-list-key-color: $dsn-color-neutral-color-document; // Tekstkleur van de sleutelcel
+$dsn-summary-list-key-font-weight: $dsn-text-font-weight-bold; // Vet gewicht onderscheidt de sleutel visueel van de waarde
+$dsn-summary-list-value-color: $dsn-color-neutral-color-document; // Tekstkleur van de waardecel
+$dsn-summary-list-actions-gap: $dsn-space-inline-3xl; // Ruimte tussen meerdere actielinks in één rij
+$dsn-summary-list-actions-margin-block-start-stacked: $dsn-space-block-md; // Extra ruimte boven de actiescel in de gestapelde (mobiele) indeling
+$dsn-table-of-contents-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder (framed appearance)
+$dsn-table-of-contents-padding-block: $dsn-space-block-xl; // Verticale padding (framed appearance)
+$dsn-table-of-contents-padding-inline-start: $dsn-space-inline-xl; // Horizontale padding aan het begin, na de border (framed appearance)
+$dsn-table-of-contents-padding-inline-end: $dsn-space-inline-xl; // Horizontale padding aan het einde (framed appearance)
+$dsn-table-of-contents-heading-gap: $dsn-space-row-xl; // Ruimte tussen de heading en de lijst met ankerlinks
+$dsn-table-of-contents-plain-padding-block: $dsn-space-block-md; // Plain-appearance-specifiek: verticale padding zodat de heading en het eerste ankerlink-item uitlijnen met het eerste item van de Sidebar/Sub-navigatie
+$dsn-table-of-contents-plain-list-gap: $dsn-space-row-lg; // Plain-appearance-specifiek: ruimte tussen de ankerlinks, ruimer dan de standaard lijst-gap zodat dit in balans is met de Sidebar/Sub-navigatie
 $dsn-table-caption-color: $dsn-color-neutral-color-document;
 $dsn-table-caption-font-family: $dsn-heading-font-family;
 $dsn-table-caption-font-size: $dsn-text-font-size-xl;
@@ -787,21 +804,21 @@ $dsn-table-footer-color: $dsn-color-neutral-color-document;
 $dsn-table-footer-font-weight: $dsn-text-font-weight-bold;
 $dsn-table-wrapper-background-color: $dsn-color-neutral-bg-document; // Achtergrondkleur van de scroll-wrapper — moet overeenkomen met de pagina-achtergrond voor de scroll-schaduw techniek
 $dsn-table-wrapper-scroll-shadow-color: $dsn-color-shadow-scroll; // Kleur van de scroll-affordance schaduw aan de zijkanten van scrollbare tabellen
-$dsn-text-area-border-radius: $dsn-form-control-border-radius; // Text area border radius
-$dsn-text-area-min-block-size: $dsn-pointer-target-min-block-size; // Text area minimum height
-$dsn-text-area-min-inline-size: $dsn-pointer-target-min-inline-size; // Text area minimum width
-$dsn-text-area-focus-box-shadow-spread: $dsn-border-width-medium; // Text area focus box shadow spread (creates thicker border effect)
-$dsn-text-area-hover-box-shadow-spread: $dsn-border-width-medium; // Text area hover box shadow spread (creates thicker border effect)
-$dsn-text-area-invalid-box-shadow-spread: $dsn-border-width-medium; // Text area invalid box shadow spread (creates thicker border effect)
-$dsn-text-input-border-radius: $dsn-form-control-border-radius; // Text input border radius
-$dsn-text-input-column-gap: $dsn-space-text-lg; // Gap between text and icons (for future icon support)
-$dsn-text-input-min-block-size: $dsn-pointer-target-min-block-size; // Text input minimum height (WCAG touch target)
-$dsn-text-input-min-inline-size: $dsn-pointer-target-min-inline-size; // Text input minimum width (WCAG touch target)
-$dsn-text-input-focus-box-shadow-spread: $dsn-border-width-medium; // Text input focus box shadow spread (creates thicker border effect)
-$dsn-text-input-hover-box-shadow-spread: $dsn-border-width-medium; // Text input hover box shadow spread (creates thicker border effect)
-$dsn-text-input-invalid-box-shadow-spread: $dsn-border-width-medium; // Text input invalid box shadow spread (creates thicker border effect)
-$dsn-time-input-button-inset-inline-end: $dsn-space-inline-sm; // Distance from the inline-end border to the clock button (4px)
-$dsn-time-input-icon-gap: $dsn-space-text-md; // Gap between clock button and input text
+$dsn-text-area-border-radius: $dsn-form-control-border-radius; // Border-radius van het tekstveld
+$dsn-text-area-min-block-size: $dsn-pointer-target-min-block-size; // Minimale hoogte van het tekstveld
+$dsn-text-area-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale breedte van het tekstveld
+$dsn-text-area-focus-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow op focus (creëert een dikkere border)
+$dsn-text-area-hover-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow op hover (creëert een dikkere border)
+$dsn-text-area-invalid-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow bij ongeldige invoer (creëert een dikkere border)
+$dsn-text-input-border-radius: $dsn-form-control-border-radius; // Border-radius van het tekstinvoerveld
+$dsn-text-input-column-gap: $dsn-space-text-lg; // Ruimte tussen tekst en iconen (voor toekomstige icoonondersteuning)
+$dsn-text-input-min-block-size: $dsn-pointer-target-min-block-size; // Minimale hoogte van het tekstinvoerveld (WCAG aanraakdoel)
+$dsn-text-input-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale breedte van het tekstinvoerveld (WCAG aanraakdoel)
+$dsn-text-input-focus-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow op focus (creëert een dikkere border)
+$dsn-text-input-hover-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow op hover (creëert een dikkere border)
+$dsn-text-input-invalid-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow bij ongeldige invoer (creëert een dikkere border)
+$dsn-time-input-button-inset-inline-end: $dsn-space-inline-sm; // Afstand van de inline-end border tot de klokknop (4px)
+$dsn-time-input-icon-gap: $dsn-space-text-md; // Ruimte tussen de klokknop en de invoertekst
 $dsn-unordered-list-color: $dsn-color-neutral-color-document; // Unordered list text color
 $dsn-unordered-list-font-family: $dsn-text-font-family-default; // Unordered list font family
 $dsn-unordered-list-font-size: $dsn-text-font-size-md; // Unordered list font size
@@ -811,94 +828,94 @@ $dsn-unordered-list-gap: $dsn-space-row-sm; // Space between list items
 $dsn-unordered-list-line-height: $dsn-text-line-height-md; // Unordered list line height
 $dsn-unordered-list-margin-block-end: $dsn-space-row-lg; // Unordered list bottom margin
 $dsn-unordered-list-padding-inline-start: $dsn-space-inline-3xl; // Unordered list left indentation
-$dsn-heading-level-1-color: $dsn-heading-color; // Heading 1 text color
-$dsn-heading-level-2-color: $dsn-heading-color; // Heading 2 text color
-$dsn-heading-level-3-color: $dsn-heading-color; // Heading 3 text color
-$dsn-heading-level-4-color: $dsn-heading-color; // Heading 4 text color
-$dsn-heading-level-5-color: $dsn-heading-color; // Heading 5 text color
-$dsn-heading-level-6-color: $dsn-heading-color; // Heading 6 text color
-$dsn-form-control-hover-color: $dsn-form-control-color; // Form control hover text color
-$dsn-form-control-focus-background-color: $dsn-form-control-background-color; // Form control focus background
-$dsn-form-control-focus-color: $dsn-form-control-color; // Form control focus text color
-$dsn-form-control-active-color: $dsn-form-control-color; // Form control active text color
-$dsn-form-control-invalid-background-color: $dsn-color-negative-bg-default; // Form control invalid background
-$dsn-form-control-invalid-border-color: $dsn-color-negative-border-default; // Form control invalid border
-$dsn-form-control-invalid-color: $dsn-color-negative-color-default; // Form control invalid text color
-$dsn-color-accent-2-bg-document: $dsn-color-accent-1-bg-document; // Document background
+$dsn-heading-level-1-color: $dsn-heading-color; // Tekstkleur van Heading 1
+$dsn-heading-level-2-color: $dsn-heading-color; // Tekstkleur van Heading 2
+$dsn-heading-level-3-color: $dsn-heading-color; // Tekstkleur van Heading 3
+$dsn-heading-level-4-color: $dsn-heading-color; // Tekstkleur van Heading 4
+$dsn-heading-level-5-color: $dsn-heading-color; // Tekstkleur van Heading 5
+$dsn-heading-level-6-color: $dsn-heading-color; // Tekstkleur van Heading 6
+$dsn-form-control-hover-color: $dsn-form-control-color; // Tekstkleur van form controls in hover state
+$dsn-form-control-focus-background-color: $dsn-form-control-background-color; // Achtergrondkleur van form controls in focus state
+$dsn-form-control-focus-color: $dsn-form-control-color; // Tekstkleur van form controls in focus state
+$dsn-form-control-active-color: $dsn-form-control-color; // Tekstkleur van form controls in active state
+$dsn-form-control-invalid-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur van form controls in invalid state
+$dsn-form-control-invalid-border-color: $dsn-color-negative-border-default; // Randkleur van form controls in invalid state
+$dsn-form-control-invalid-color: $dsn-color-negative-color-default; // Tekstkleur van form controls in invalid state
+$dsn-color-accent-2-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
 $dsn-color-accent-2-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
-$dsn-color-accent-2-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtle background
-$dsn-color-accent-2-bg-default: $dsn-color-accent-1-bg-default; // Default background
-$dsn-color-accent-2-bg-hover: $dsn-color-accent-1-bg-hover; // Hover state background
-$dsn-color-accent-2-bg-active: $dsn-color-accent-1-bg-active; // Active state background
-$dsn-color-accent-2-border-subtle: $dsn-color-accent-1-border-subtle; // Subtle border
-$dsn-color-accent-2-border-default: $dsn-color-accent-1-border-default; // Default border
-$dsn-color-accent-2-border-hover: $dsn-color-accent-1-border-hover; // Hover state border
-$dsn-color-accent-2-border-active: $dsn-color-accent-1-border-active; // Active state border
-$dsn-color-accent-2-color-default: $dsn-color-accent-1-color-default; // Default text color
-$dsn-color-accent-2-color-hover: $dsn-color-accent-1-color-hover; // Hover state text
-$dsn-color-accent-2-color-active: $dsn-color-accent-1-color-active; // Active state text
-$dsn-color-accent-2-color-subtle: $dsn-color-accent-1-color-subtle; // Subtle text color
-$dsn-color-accent-2-color-document: $dsn-color-accent-1-color-document; // Document text color
-$dsn-color-accent-3-bg-document: $dsn-color-accent-1-bg-document; // Document background
+$dsn-color-accent-2-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
+$dsn-color-accent-2-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
+$dsn-color-accent-2-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
+$dsn-color-accent-2-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
+$dsn-color-accent-2-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
+$dsn-color-accent-2-border-default: $dsn-color-accent-1-border-default; // Standaard rand
+$dsn-color-accent-2-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
+$dsn-color-accent-2-border-active: $dsn-color-accent-1-border-active; // Rand in active state
+$dsn-color-accent-2-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
+$dsn-color-accent-2-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
+$dsn-color-accent-2-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
+$dsn-color-accent-2-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
+$dsn-color-accent-2-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
+$dsn-color-accent-3-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
 $dsn-color-accent-3-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
-$dsn-color-accent-3-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtle background
-$dsn-color-accent-3-bg-default: $dsn-color-accent-1-bg-default; // Default background
-$dsn-color-accent-3-bg-hover: $dsn-color-accent-1-bg-hover; // Hover state background
-$dsn-color-accent-3-bg-active: $dsn-color-accent-1-bg-active; // Active state background
-$dsn-color-accent-3-border-subtle: $dsn-color-accent-1-border-subtle; // Subtle border
-$dsn-color-accent-3-border-default: $dsn-color-accent-1-border-default; // Default border
-$dsn-color-accent-3-border-hover: $dsn-color-accent-1-border-hover; // Hover state border
-$dsn-color-accent-3-border-active: $dsn-color-accent-1-border-active; // Active state border
-$dsn-color-accent-3-color-default: $dsn-color-accent-1-color-default; // Default text color
-$dsn-color-accent-3-color-hover: $dsn-color-accent-1-color-hover; // Hover state text
-$dsn-color-accent-3-color-active: $dsn-color-accent-1-color-active; // Active state text
-$dsn-color-accent-3-color-subtle: $dsn-color-accent-1-color-subtle; // Subtle text color
-$dsn-color-accent-3-color-document: $dsn-color-accent-1-color-document; // Document text color
-$dsn-color-action-1-bg-document: $dsn-color-accent-1-bg-document; // Document background
+$dsn-color-accent-3-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
+$dsn-color-accent-3-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
+$dsn-color-accent-3-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
+$dsn-color-accent-3-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
+$dsn-color-accent-3-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
+$dsn-color-accent-3-border-default: $dsn-color-accent-1-border-default; // Standaard rand
+$dsn-color-accent-3-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
+$dsn-color-accent-3-border-active: $dsn-color-accent-1-border-active; // Rand in active state
+$dsn-color-accent-3-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
+$dsn-color-accent-3-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
+$dsn-color-accent-3-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
+$dsn-color-accent-3-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
+$dsn-color-accent-3-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
+$dsn-color-action-1-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
 $dsn-color-action-1-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
-$dsn-color-action-1-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtle background
-$dsn-color-action-1-bg-default: $dsn-color-accent-1-bg-default; // Default background
-$dsn-color-action-1-bg-hover: $dsn-color-accent-1-bg-hover; // Hover state background
-$dsn-color-action-1-bg-active: $dsn-color-accent-1-bg-active; // Active state background
-$dsn-color-action-1-border-subtle: $dsn-color-accent-1-border-subtle; // Subtle border
-$dsn-color-action-1-border-default: $dsn-color-accent-1-border-default; // Default border
-$dsn-color-action-1-border-hover: $dsn-color-accent-1-border-hover; // Hover state border
-$dsn-color-action-1-border-active: $dsn-color-accent-1-border-active; // Active state border
-$dsn-color-action-1-color-default: $dsn-color-accent-1-color-default; // Default text color
-$dsn-color-action-1-color-hover: $dsn-color-accent-1-color-hover; // Hover state text
-$dsn-color-action-1-color-active: $dsn-color-accent-1-color-active; // Active state text
-$dsn-color-action-1-color-subtle: $dsn-color-accent-1-color-subtle; // Subtle text color
-$dsn-color-action-1-color-document: $dsn-color-accent-1-color-document; // Document text color
-$dsn-color-action-2-bg-document: $dsn-color-accent-1-bg-document; // Document background
+$dsn-color-action-1-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
+$dsn-color-action-1-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
+$dsn-color-action-1-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
+$dsn-color-action-1-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
+$dsn-color-action-1-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
+$dsn-color-action-1-border-default: $dsn-color-accent-1-border-default; // Standaard rand
+$dsn-color-action-1-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
+$dsn-color-action-1-border-active: $dsn-color-accent-1-border-active; // Rand in active state
+$dsn-color-action-1-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
+$dsn-color-action-1-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
+$dsn-color-action-1-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
+$dsn-color-action-1-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
+$dsn-color-action-1-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
+$dsn-color-action-2-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
 $dsn-color-action-2-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
-$dsn-color-action-2-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtle background
-$dsn-color-action-2-bg-default: $dsn-color-accent-1-bg-default; // Default background
-$dsn-color-action-2-bg-hover: $dsn-color-accent-1-bg-hover; // Hover state background
-$dsn-color-action-2-bg-active: $dsn-color-accent-1-bg-active; // Active state background
-$dsn-color-action-2-border-subtle: $dsn-color-accent-1-border-subtle; // Subtle border
-$dsn-color-action-2-border-default: $dsn-color-accent-1-border-default; // Default border
-$dsn-color-action-2-border-hover: $dsn-color-accent-1-border-hover; // Hover state border
-$dsn-color-action-2-border-active: $dsn-color-accent-1-border-active; // Active state border
-$dsn-color-action-2-color-default: $dsn-color-accent-1-color-default; // Default text color
-$dsn-color-action-2-color-hover: $dsn-color-accent-1-color-hover; // Hover state text
-$dsn-color-action-2-color-active: $dsn-color-accent-1-color-active; // Active state text
-$dsn-color-action-2-color-subtle: $dsn-color-accent-1-color-subtle; // Subtle text color
-$dsn-color-action-2-color-document: $dsn-color-accent-1-color-document; // Document text color
-$dsn-color-accent-1-inverse-bg-document: $dsn-color-neutral-inverse-bg-document; // Inverse document background
+$dsn-color-action-2-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
+$dsn-color-action-2-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
+$dsn-color-action-2-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
+$dsn-color-action-2-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
+$dsn-color-action-2-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
+$dsn-color-action-2-border-default: $dsn-color-accent-1-border-default; // Standaard rand
+$dsn-color-action-2-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
+$dsn-color-action-2-border-active: $dsn-color-accent-1-border-active; // Rand in active state
+$dsn-color-action-2-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
+$dsn-color-action-2-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
+$dsn-color-action-2-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
+$dsn-color-action-2-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
+$dsn-color-action-2-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
+$dsn-color-accent-1-inverse-bg-document: $dsn-color-neutral-inverse-bg-document; // Inverse documentachtergrond
 $dsn-color-accent-1-inverse-bg-elevated: $dsn-color-neutral-inverse-bg-elevated; // Elevated background (inverse)
-$dsn-color-accent-1-inverse-bg-subtle: $dsn-color-neutral-inverse-bg-subtle; // Inverse subtle background
-$dsn-color-accent-1-inverse-bg-default: $dsn-color-neutral-inverse-bg-default; // Inverse default background
-$dsn-color-accent-1-inverse-bg-hover: $dsn-color-neutral-inverse-bg-hover; // Inverse hover background
-$dsn-color-accent-1-inverse-bg-active: $dsn-color-neutral-inverse-bg-active; // Inverse active background
-$dsn-color-accent-1-inverse-border-subtle: $dsn-color-neutral-inverse-border-subtle; // Inverse subtle border
-$dsn-color-accent-1-inverse-border-default: $dsn-color-neutral-inverse-border-default; // Inverse default border
-$dsn-color-accent-1-inverse-border-hover: $dsn-color-neutral-inverse-border-hover; // Inverse hover border
-$dsn-color-accent-1-inverse-border-active: $dsn-color-neutral-inverse-border-active; // Inverse active border
-$dsn-color-accent-1-inverse-color-default: $dsn-color-neutral-inverse-color-default; // Inverse default text
-$dsn-color-accent-1-inverse-color-hover: $dsn-color-neutral-inverse-color-hover; // Inverse hover text
-$dsn-color-accent-1-inverse-color-active: $dsn-color-neutral-inverse-color-active; // Inverse active text
-$dsn-color-accent-1-inverse-color-subtle: $dsn-color-neutral-inverse-color-subtle; // Inverse subtle text
-$dsn-color-accent-1-inverse-color-document: $dsn-color-neutral-inverse-color-document; // Inverse document text
+$dsn-color-accent-1-inverse-bg-subtle: $dsn-color-neutral-inverse-bg-subtle; // Inverse subtiele achtergrond
+$dsn-color-accent-1-inverse-bg-default: $dsn-color-neutral-inverse-bg-default; // Inverse standaard achtergrond
+$dsn-color-accent-1-inverse-bg-hover: $dsn-color-neutral-inverse-bg-hover; // Inverse achtergrond in hover state
+$dsn-color-accent-1-inverse-bg-active: $dsn-color-neutral-inverse-bg-active; // Inverse achtergrond in active state
+$dsn-color-accent-1-inverse-border-subtle: $dsn-color-neutral-inverse-border-subtle; // Inverse subtiele rand
+$dsn-color-accent-1-inverse-border-default: $dsn-color-neutral-inverse-border-default; // Inverse standaard rand
+$dsn-color-accent-1-inverse-border-hover: $dsn-color-neutral-inverse-border-hover; // Inverse rand in hover state
+$dsn-color-accent-1-inverse-border-active: $dsn-color-neutral-inverse-border-active; // Inverse rand in active state
+$dsn-color-accent-1-inverse-color-default: $dsn-color-neutral-inverse-color-default; // Inverse standaard tekst
+$dsn-color-accent-1-inverse-color-hover: $dsn-color-neutral-inverse-color-hover; // Inverse tekst in hover state
+$dsn-color-accent-1-inverse-color-active: $dsn-color-neutral-inverse-color-active; // Inverse tekst in active state
+$dsn-color-accent-1-inverse-color-subtle: $dsn-color-neutral-inverse-color-subtle; // Inverse subtiele tekst
+$dsn-color-accent-1-inverse-color-document: $dsn-color-neutral-inverse-color-document; // Inverse documenttekst
 $dsn-color-positive-inverse-bg-document: $dsn-color-neutral-inverse-bg-document;
 $dsn-color-positive-inverse-bg-elevated: $dsn-color-neutral-inverse-bg-elevated;
 $dsn-color-positive-inverse-bg-subtle: $dsn-color-neutral-inverse-bg-subtle;
@@ -959,66 +976,66 @@ $dsn-color-info-inverse-color-hover: $dsn-color-neutral-inverse-color-hover;
 $dsn-color-info-inverse-color-active: $dsn-color-neutral-inverse-color-active;
 $dsn-color-info-inverse-color-subtle: $dsn-color-neutral-inverse-color-subtle;
 $dsn-color-info-inverse-color-document: $dsn-color-neutral-inverse-color-document;
-$dsn-alert-icon-size: $dsn-icon-size-xl; // Alert icon size (also used as grid column width)
-$dsn-alert-info-background-color: $dsn-color-info-bg-default; // Background color for info variant (default)
-$dsn-alert-info-border-color: $dsn-color-info-border-default; // Border color for info variant (default)
-$dsn-alert-info-color: $dsn-color-info-color-document; // Text color for info variant (default)
-$dsn-alert-info-icon-color: $dsn-color-info-color-default; // Icon color for info variant (default)
-$dsn-alert-negative-background-color: $dsn-color-negative-bg-default; // Background color for negative variant
-$dsn-alert-negative-border-color: $dsn-color-negative-border-default; // Border color for negative variant
-$dsn-alert-negative-color: $dsn-color-negative-color-document; // Text color for negative variant
-$dsn-alert-negative-icon-color: $dsn-color-negative-color-default; // Icon color for negative variant
-$dsn-alert-positive-background-color: $dsn-color-positive-bg-default; // Background color for positive variant
-$dsn-alert-positive-border-color: $dsn-color-positive-border-default; // Border color for positive variant
-$dsn-alert-positive-color: $dsn-color-positive-color-document; // Text color for positive variant
-$dsn-alert-positive-icon-color: $dsn-color-positive-color-default; // Icon color for positive variant
-$dsn-alert-warning-background-color: $dsn-color-warning-bg-default; // Background color for warning variant
-$dsn-alert-warning-border-color: $dsn-color-warning-border-default; // Border color for warning variant
-$dsn-alert-warning-color: $dsn-color-warning-color-document; // Text color for warning variant
-$dsn-alert-warning-icon-color: $dsn-color-warning-color-default; // Icon color for warning variant
-$dsn-breadcrumb-navigation-separator-size: $dsn-icon-size-sm; // Separator icon size — sm (kleiner dan terug-icoon)
-$dsn-breadcrumb-navigation-icon-size: $dsn-icon-size-sm; // Back-icon size — sm (consistent met Link size small)
-$dsn-button-default-negative-border-color: $dsn-color-negative-border-default; // Default negative button border
-$dsn-button-default-negative-color: $dsn-color-negative-color-default; // Default negative button text/icon color
-$dsn-button-default-negative-active-background-color: $dsn-color-negative-bg-active; // Default negative button active background
-$dsn-button-default-negative-active-border-color: $dsn-color-negative-border-active; // Default negative button active border
-$dsn-button-default-negative-active-color: $dsn-color-negative-color-active; // Default negative button active text/icon color
-$dsn-button-default-negative-hover-background-color: $dsn-color-negative-bg-hover; // Default negative button hover background
-$dsn-button-default-negative-hover-border-color: $dsn-color-negative-border-hover; // Default negative button hover border
-$dsn-button-default-negative-hover-color: $dsn-color-negative-color-hover; // Default negative button hover text/icon color
-$dsn-button-default-positive-border-color: $dsn-color-positive-border-default; // Default positive button border
-$dsn-button-default-positive-color: $dsn-color-positive-color-default; // Default positive button text/icon color
-$dsn-button-default-positive-active-background-color: $dsn-color-positive-bg-active; // Default positive button active background
-$dsn-button-default-positive-active-border-color: $dsn-color-positive-border-active; // Default positive button active border
-$dsn-button-default-positive-active-color: $dsn-color-positive-color-active; // Default positive button active text/icon color
-$dsn-button-default-positive-hover-background-color: $dsn-color-positive-bg-hover; // Default positive button hover background
-$dsn-button-default-positive-hover-border-color: $dsn-color-positive-border-hover; // Default positive button hover border
-$dsn-button-default-positive-hover-color: $dsn-color-positive-color-hover; // Default positive button hover text/icon color
-$dsn-button-subtle-negative-color: $dsn-color-negative-color-default; // Subtle negative button text/icon color
-$dsn-button-subtle-negative-active-background-color: $dsn-color-negative-bg-active; // Subtle negative button active background
-$dsn-button-subtle-negative-active-color: $dsn-color-negative-color-active; // Subtle negative button active text/icon color
-$dsn-button-subtle-negative-hover-background-color: $dsn-color-negative-bg-hover; // Subtle negative button hover background
-$dsn-button-subtle-negative-hover-color: $dsn-color-negative-color-hover; // Subtle negative button hover text/icon color
-$dsn-button-subtle-positive-color: $dsn-color-positive-color-default; // Subtle positive button text/icon color
-$dsn-button-subtle-positive-active-background-color: $dsn-color-positive-bg-active; // Subtle positive button active background
-$dsn-button-subtle-positive-active-color: $dsn-color-positive-color-active; // Subtle positive button active text/icon color
-$dsn-button-subtle-positive-hover-background-color: $dsn-color-positive-bg-hover; // Subtle positive button hover background
-$dsn-button-subtle-positive-hover-color: $dsn-color-positive-color-hover; // Subtle positive button hover text/icon color
-$dsn-button-size-default-icon-size: $dsn-icon-size-md; // Default button icon size
-$dsn-button-size-large-icon-size: $dsn-icon-size-lg; // Large button icon size
-$dsn-button-size-small-icon-size: $dsn-icon-size-sm; // Small button icon size
+$dsn-alert-icon-size: $dsn-icon-size-xl; // Icoongrootte van de Alert (ook gebruikt als breedte van de gridkolom)
+$dsn-alert-info-background-color: $dsn-color-info-bg-default; // Achtergrondkleur voor info variant (standaard)
+$dsn-alert-info-border-color: $dsn-color-info-border-default; // Borderkleur voor info variant (standaard)
+$dsn-alert-info-color: $dsn-color-info-color-document; // Tekstkleur voor info variant (standaard)
+$dsn-alert-info-icon-color: $dsn-color-info-color-default; // Icoonkleur voor info variant (standaard)
+$dsn-alert-negative-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur voor negative variant
+$dsn-alert-negative-border-color: $dsn-color-negative-border-default; // Borderkleur voor negative variant
+$dsn-alert-negative-color: $dsn-color-negative-color-document; // Tekstkleur voor negative variant
+$dsn-alert-negative-icon-color: $dsn-color-negative-color-default; // Icoonkleur voor negative variant
+$dsn-alert-positive-background-color: $dsn-color-positive-bg-default; // Achtergrondkleur voor positive variant
+$dsn-alert-positive-border-color: $dsn-color-positive-border-default; // Borderkleur voor positive variant
+$dsn-alert-positive-color: $dsn-color-positive-color-document; // Tekstkleur voor positive variant
+$dsn-alert-positive-icon-color: $dsn-color-positive-color-default; // Icoonkleur voor positive variant
+$dsn-alert-warning-background-color: $dsn-color-warning-bg-default; // Achtergrondkleur voor warning variant
+$dsn-alert-warning-border-color: $dsn-color-warning-border-default; // Borderkleur voor warning variant
+$dsn-alert-warning-color: $dsn-color-warning-color-document; // Tekstkleur voor warning variant
+$dsn-alert-warning-icon-color: $dsn-color-warning-color-default; // Icoonkleur voor warning variant
+$dsn-breadcrumb-navigation-separator-size: $dsn-icon-size-sm; // Grootte van het scheidingsicoon — sm (kleiner dan terug-icoon)
+$dsn-breadcrumb-navigation-icon-size: $dsn-icon-size-sm; // Grootte van het terug-icoon — sm (consistent met Link size small)
+$dsn-button-default-negative-border-color: $dsn-color-negative-border-default; // Border van de default negative button
+$dsn-button-default-negative-color: $dsn-color-negative-color-default; // Tekst-/icoonkleur van de default negative button
+$dsn-button-default-negative-active-background-color: $dsn-color-negative-bg-active; // Achtergrond van de default negative button op active
+$dsn-button-default-negative-active-border-color: $dsn-color-negative-border-active; // Border van de default negative button op active
+$dsn-button-default-negative-active-color: $dsn-color-negative-color-active; // Tekst-/icoonkleur van de default negative button op active
+$dsn-button-default-negative-hover-background-color: $dsn-color-negative-bg-hover; // Achtergrond van de default negative button op hover
+$dsn-button-default-negative-hover-border-color: $dsn-color-negative-border-hover; // Border van de default negative button op hover
+$dsn-button-default-negative-hover-color: $dsn-color-negative-color-hover; // Tekst-/icoonkleur van de default negative button op hover
+$dsn-button-default-positive-border-color: $dsn-color-positive-border-default; // Border van de default positive button
+$dsn-button-default-positive-color: $dsn-color-positive-color-default; // Tekst-/icoonkleur van de default positive button
+$dsn-button-default-positive-active-background-color: $dsn-color-positive-bg-active; // Achtergrond van de default positive button op active
+$dsn-button-default-positive-active-border-color: $dsn-color-positive-border-active; // Border van de default positive button op active
+$dsn-button-default-positive-active-color: $dsn-color-positive-color-active; // Tekst-/icoonkleur van de default positive button op active
+$dsn-button-default-positive-hover-background-color: $dsn-color-positive-bg-hover; // Achtergrond van de default positive button op hover
+$dsn-button-default-positive-hover-border-color: $dsn-color-positive-border-hover; // Border van de default positive button op hover
+$dsn-button-default-positive-hover-color: $dsn-color-positive-color-hover; // Tekst-/icoonkleur van de default positive button op hover
+$dsn-button-subtle-negative-color: $dsn-color-negative-color-default; // Tekst-/icoonkleur van de subtle negative button
+$dsn-button-subtle-negative-active-background-color: $dsn-color-negative-bg-active; // Achtergrond van de subtle negative button op active
+$dsn-button-subtle-negative-active-color: $dsn-color-negative-color-active; // Tekst-/icoonkleur van de subtle negative button op active
+$dsn-button-subtle-negative-hover-background-color: $dsn-color-negative-bg-hover; // Achtergrond van de subtle negative button op hover
+$dsn-button-subtle-negative-hover-color: $dsn-color-negative-color-hover; // Tekst-/icoonkleur van de subtle negative button op hover
+$dsn-button-subtle-positive-color: $dsn-color-positive-color-default; // Tekst-/icoonkleur van de subtle positive button
+$dsn-button-subtle-positive-active-background-color: $dsn-color-positive-bg-active; // Achtergrond van de subtle positive button op active
+$dsn-button-subtle-positive-active-color: $dsn-color-positive-color-active; // Tekst-/icoonkleur van de subtle positive button op active
+$dsn-button-subtle-positive-hover-background-color: $dsn-color-positive-bg-hover; // Achtergrond van de subtle positive button op hover
+$dsn-button-subtle-positive-hover-color: $dsn-color-positive-color-hover; // Tekst-/icoonkleur van de subtle positive button op hover
+$dsn-button-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de default button
+$dsn-button-size-large-icon-size: $dsn-icon-size-lg; // Icoongrootte van de large button
+$dsn-button-size-small-icon-size: $dsn-icon-size-sm; // Icoongrootte van de small button
 $dsn-card-heading-color: $dsn-heading-color; // Kleur van de card heading
-$dsn-checkbox-group-legend-color: $dsn-form-field-label-color; // Text color for the legend (reuses form field label)
-$dsn-checkbox-group-legend-font-family: $dsn-form-field-label-font-family; // Font family for the legend (reuses form field label)
-$dsn-checkbox-group-legend-font-size: $dsn-form-field-label-font-size; // Font size for the legend (reuses form field label)
-$dsn-checkbox-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font weight for the legend (reuses form field label)
-$dsn-checkbox-group-legend-line-height: $dsn-form-field-label-line-height; // Line height for the legend (reuses form field label)
-$dsn-checkbox-group-legend-margin-block-end: $dsn-form-field-label-margin-block-end-with-description; // Space below the legend before the checkbox options (uses smaller margin like when description follows)
+$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)
+$dsn-checkbox-group-legend-font-size: $dsn-form-field-label-font-size; // Font-size van de legend (hergebruikt van het formulierveldlabel)
+$dsn-checkbox-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font-gewicht van de legend (hergebruikt van het formulierveldlabel)
+$dsn-checkbox-group-legend-line-height: $dsn-form-field-label-line-height; // Line-height van de legend (hergebruikt van het formulierveldlabel)
+$dsn-checkbox-group-legend-margin-block-end: $dsn-form-field-label-margin-block-end-with-description; // Ruimte onder de legend voor de checkbox-opties (gebruikt de kleinere margin zoals wanneer een beschrijving volgt)
 $dsn-checkbox-background-color: $dsn-form-control-background-color;
 $dsn-checkbox-border-color: $dsn-form-control-border-color;
 $dsn-checkbox-active-background-color: $dsn-form-control-active-background-color;
 $dsn-checkbox-active-border-color: $dsn-form-control-active-border-color;
-$dsn-checkbox-checked-color: $dsn-color-neutral-inverse-color-default; // Check icon color
+$dsn-checkbox-checked-color: $dsn-color-neutral-inverse-color-default; // Kleur van het vinkje
 $dsn-checkbox-disabled-background-color: $dsn-form-control-disabled-background-color;
 $dsn-checkbox-disabled-border-color: $dsn-form-control-disabled-border-color;
 $dsn-checkbox-focus-border-color: $dsn-form-control-focus-border-color;
@@ -1030,78 +1047,80 @@ $dsn-checkbox-checked-disabled-border-color: $dsn-form-control-disabled-border-c
 $dsn-checkbox-checked-disabled-color: $dsn-form-control-disabled-color;
 $dsn-checkbox-checked-focus-border-color: $dsn-form-control-focus-border-color;
 $dsn-checkbox-checked-hover-color: $dsn-color-neutral-inverse-color-default;
-$dsn-checkbox-indeterminate-color: $dsn-color-neutral-inverse-color-default; // Indeterminate icon (minus) color
+$dsn-checkbox-indeterminate-color: $dsn-color-neutral-inverse-color-default; // Kleur van het indeterminate-icoon (minteken)
 $dsn-checkbox-indeterminate-active-color: $dsn-color-neutral-inverse-color-default;
 $dsn-checkbox-indeterminate-disabled-background-color: $dsn-form-control-disabled-accent-color;
 $dsn-checkbox-indeterminate-disabled-border-color: $dsn-form-control-disabled-border-color;
 $dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
 $dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
 $dsn-checkbox-indeterminate-hover-color: $dsn-color-neutral-inverse-color-default;
-$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
-$dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtle text color for filename / 'No file chosen' text
-$dsn-file-input-font-family: $dsn-form-control-font-family; // File input font family
-$dsn-file-input-font-size: $dsn-form-control-font-size; // File input font size
-$dsn-file-input-font-weight: $dsn-form-control-font-weight; // File input font weight
-$dsn-file-input-line-height: $dsn-form-control-line-height; // File input line height
-$dsn-file-input-disabled-color: $dsn-form-control-disabled-color; // Muted text color for disabled state
+$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
+$dsn-file-input-font-weight: $dsn-form-control-font-weight; // Font-gewicht van het bestandsinvoerveld
+$dsn-file-input-line-height: $dsn-form-control-line-height; // Line-height van het bestandsinvoerveld
+$dsn-file-input-disabled-color: $dsn-form-control-disabled-color; // Gedempte tekstkleur voor de disabled staat
 $dsn-file-border-color-error: $dsn-color-negative-border-default; // Randkleur in de error state — zelfde schaal als FormFieldset bij invalid
 $dsn-file-media-icon-size: $dsn-icon-size-md;
 $dsn-file-status-icon-color: $dsn-color-positive-color-default; // Zelfde token als FormFieldStatus positive variant
 $dsn-file-status-icon-size: $dsn-icon-size-md;
-$dsn-form-field-error-message-color: $dsn-color-negative-color-default; // Form field error message text color (negative sentiment)
-$dsn-form-field-error-message-icon-size: $dsn-icon-size-md; // Error message icon size
-$dsn-form-field-status-icon-size: $dsn-icon-size-md; // Icon size for positive and warning variants
-$dsn-form-field-status-positive-color: $dsn-color-positive-color-default; // Text color for positive variant
-$dsn-form-field-status-warning-color: $dsn-color-warning-color-default; // Text color for warning variant
-$dsn-form-field-invalid-border-inline-start-color: $dsn-color-negative-border-default; // Left border color for invalid form fields
-$dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de standaard Hero — licht blauw accent-1
+$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
+$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
+$dsn-details-icon-size: $dsn-icon-size-md; // Grootte van het chevron-icoon
+$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
+$dsn-form-field-error-message-color: $dsn-color-negative-color-default; // Tekstkleur van de foutmelding (negative sentiment)
+$dsn-form-field-error-message-icon-size: $dsn-icon-size-md; // Icoongrootte van de foutmelding
+$dsn-form-field-status-icon-size: $dsn-icon-size-md; // Icoongrootte voor positive en warning varianten
+$dsn-form-field-status-positive-color: $dsn-color-positive-color-default; // Tekstkleur voor positive variant
+$dsn-form-field-status-warning-color: $dsn-color-warning-color-default; // Tekstkleur voor warning variant
+$dsn-form-field-invalid-border-inline-start-color: $dsn-color-negative-border-default; // Kleur van de linkerborder voor ongeldige formuliervelden
+$dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de standaard Hero
 $dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
-$dsn-link-icon-size: $dsn-icon-size-md; // Link icon size
-$dsn-link-size-default-icon-size: $dsn-icon-size-md; // Default link icon size
-$dsn-link-size-large-icon-size: $dsn-icon-size-lg; // Large link icon size
-$dsn-link-size-small-icon-size: $dsn-icon-size-sm; // Small link icon size
+$dsn-link-icon-size: $dsn-icon-size-md; // Icoongrootte van de link
+$dsn-link-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de default link
+$dsn-link-size-large-icon-size: $dsn-icon-size-lg; // Icoongrootte van de large link
+$dsn-link-size-small-icon-size: $dsn-icon-size-sm; // Icoongrootte van de small link
 $dsn-menu-item-icon-size: $dsn-icon-size-md; // Gedeeld: icoongrootte
 $dsn-modal-dialog-heading-color: $dsn-heading-color; // Kleur van de dialoogvenster-heading
-$dsn-note-icon-size: $dsn-icon-size-xl; // Note icon size (also used as grid column width)
-$dsn-note-info-background-color: $dsn-color-info-bg-default; // Background color for info variant
-$dsn-note-info-border-inline-start-color: $dsn-color-info-border-default; // Left border color for info variant
-$dsn-note-info-color: $dsn-color-info-color-document; // Text color for info variant
-$dsn-note-info-icon-color: $dsn-color-info-color-default; // Icon color for info variant
-$dsn-note-negative-background-color: $dsn-color-negative-bg-default; // Background color for negative variant
-$dsn-note-negative-border-inline-start-color: $dsn-color-negative-border-default; // Left border color for negative variant
-$dsn-note-negative-color: $dsn-color-negative-color-document; // Text color for negative variant
-$dsn-note-negative-icon-color: $dsn-color-negative-color-default; // Icon color for negative variant
-$dsn-note-positive-background-color: $dsn-color-positive-bg-default; // Background color for positive variant
-$dsn-note-positive-border-inline-start-color: $dsn-color-positive-border-default; // Left border color for positive variant
-$dsn-note-positive-color: $dsn-color-positive-color-document; // Text color for positive variant
-$dsn-note-positive-icon-color: $dsn-color-positive-color-default; // Icon color for positive variant
-$dsn-note-warning-background-color: $dsn-color-warning-bg-default; // Background color for warning variant
-$dsn-note-warning-border-inline-start-color: $dsn-color-warning-border-default; // Left border color for warning variant
-$dsn-note-warning-color: $dsn-color-warning-color-document; // Text color for warning variant
-$dsn-note-warning-icon-color: $dsn-color-warning-color-default; // Icon color for warning variant
-$dsn-number-badge-neutral-color: $dsn-color-neutral-inverse-color-default; // Tekstkleur voor neutral variant (wit op donkere achtergrond)
+$dsn-note-icon-size: $dsn-icon-size-xl; // Icoongrootte van de Note (ook gebruikt als breedte van de gridkolom)
+$dsn-note-info-background-color: $dsn-color-info-bg-default; // Achtergrondkleur voor info variant
+$dsn-note-info-border-inline-start-color: $dsn-color-info-border-default; // Kleur van de linkerborder voor info variant
+$dsn-note-info-color: $dsn-color-info-color-document; // Tekstkleur voor info variant
+$dsn-note-info-icon-color: $dsn-color-info-color-default; // Icoonkleur voor info variant
+$dsn-note-negative-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur voor negative variant
+$dsn-note-negative-border-inline-start-color: $dsn-color-negative-border-default; // Kleur van de linkerborder voor negative variant
+$dsn-note-negative-color: $dsn-color-negative-color-document; // Tekstkleur voor negative variant
+$dsn-note-negative-icon-color: $dsn-color-negative-color-default; // Icoonkleur voor negative variant
+$dsn-note-positive-background-color: $dsn-color-positive-bg-default; // Achtergrondkleur voor positive variant
+$dsn-note-positive-border-inline-start-color: $dsn-color-positive-border-default; // Kleur van de linkerborder voor positive variant
+$dsn-note-positive-color: $dsn-color-positive-color-document; // Tekstkleur voor positive variant
+$dsn-note-positive-icon-color: $dsn-color-positive-color-default; // Icoonkleur voor positive variant
+$dsn-note-warning-background-color: $dsn-color-warning-bg-default; // Achtergrondkleur voor warning variant
+$dsn-note-warning-border-inline-start-color: $dsn-color-warning-border-default; // Kleur van de linkerborder voor warning variant
+$dsn-note-warning-color: $dsn-color-warning-color-document; // Tekstkleur voor warning variant
+$dsn-note-warning-icon-color: $dsn-color-warning-color-default; // Icoonkleur voor warning variant
+$dsn-number-badge-neutral-color: $dsn-color-neutral-inverse-color-default; // Tekstkleur voor neutral variant
 $dsn-number-badge-neutral-background-color: $dsn-color-neutral-inverse-bg-default; // Achtergrondkleur voor neutral variant
 $dsn-option-label-disabled-color: $dsn-form-control-disabled-color;
-$dsn-page-footer-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de PageFooter — merkkleur accent-1 als huisstijldrager
-$dsn-page-footer-border-block-start-color: $dsn-color-accent-1-border-default; // Kleur van de bovenkantrand — accent-1 border-default voor subtiele maar zichtbare scheiding met de pagina-inhoud
-$dsn-page-header-border-block-end-color: $dsn-color-accent-1-color-default; // Kleur van de onderkantrand — merkkleur die de header verankert aan het accent-1 palet
-$dsn-page-header-navbar-background-color: $dsn-color-accent-1-bg-default; // Navigatiebalk achtergrond — merkkleur accent-1
-$dsn-page-header-search-panel-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van het zoekpaneel — merkkleur voor branding
+$dsn-page-footer-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de PageFooter
+$dsn-page-footer-border-block-start-color: $dsn-color-accent-1-border-default; // Kleur van de bovenkantrand
+$dsn-page-header-border-block-end-color: $dsn-color-accent-1-color-default; // Kleur van de onderkantrand
+$dsn-page-header-navbar-background-color: $dsn-color-accent-1-bg-default; // Navigatiebalk achtergrond
+$dsn-page-header-search-panel-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van het zoekpaneel
 $dsn-popover-heading-color: $dsn-heading-color; // Kleur van de popover-heading
-$dsn-progress-bar-color-fill: $dsn-color-accent-1-color-default; // Blauwe vulbalk — zelfde primaire accentkleur als Spinner
-$dsn-radio-group-legend-color: $dsn-form-field-label-color; // Text color for the legend (reuses form field label)
-$dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font family for the legend (reuses form field label)
-$dsn-radio-group-legend-font-size: $dsn-form-field-label-font-size; // Font size for the legend (reuses form field label)
-$dsn-radio-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font weight for the legend (reuses form field label)
-$dsn-radio-group-legend-line-height: $dsn-form-field-label-line-height; // Line height for the legend (reuses form field label)
-$dsn-radio-group-legend-margin-block-end: $dsn-form-field-label-margin-block-end-with-description; // Space below the legend before the radio options (uses smaller margin like when description follows)
+$dsn-radio-group-legend-color: $dsn-form-field-label-color; // Tekstkleur van de legend (hergebruikt van het formulierveldlabel)
+$dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font-familie van de legend (hergebruikt van het formulierveldlabel)
+$dsn-radio-group-legend-font-size: $dsn-form-field-label-font-size; // Font-size van de legend (hergebruikt van het formulierveldlabel)
+$dsn-radio-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font-gewicht van de legend (hergebruikt van het formulierveldlabel)
+$dsn-radio-group-legend-line-height: $dsn-form-field-label-line-height; // Line-height van de legend (hergebruikt van het formulierveldlabel)
+$dsn-radio-group-legend-margin-block-end: $dsn-form-field-label-margin-block-end-with-description; // Ruimte onder de legend voor de radio-opties (gebruikt de kleinere margin zoals wanneer een beschrijving volgt)
 $dsn-radio-background-color: $dsn-form-control-background-color;
 $dsn-radio-border-color: $dsn-form-control-border-color;
-$dsn-radio-color: $dsn-form-control-border-color; // Inner circle color in default state
+$dsn-radio-color: $dsn-form-control-border-color; // Kleur van de binnenste cirkel in de standaard staat
 $dsn-radio-active-background-color: $dsn-form-control-active-background-color;
 $dsn-radio-active-border-color: $dsn-form-control-active-border-color;
 $dsn-radio-active-color: $dsn-form-control-active-border-color;
-$dsn-radio-checked-color: $dsn-color-neutral-inverse-color-default; // Inner circle color when checked
+$dsn-radio-checked-color: $dsn-color-neutral-inverse-color-default; // Kleur van de binnenste cirkel wanneer aangevinkt
 $dsn-radio-disabled-background-color: $dsn-form-control-disabled-background-color;
 $dsn-radio-disabled-border-color: $dsn-form-control-disabled-border-color;
 $dsn-radio-disabled-color: $dsn-form-control-disabled-border-color;
@@ -1113,68 +1132,70 @@ $dsn-radio-hover-color: $dsn-form-control-hover-border-color;
 $dsn-radio-checked-active-color: $dsn-color-neutral-inverse-color-default;
 $dsn-radio-checked-disabled-background-color: $dsn-form-control-disabled-accent-color;
 $dsn-radio-checked-disabled-border-color: $dsn-form-control-disabled-border-color;
-$dsn-radio-checked-disabled-color: $dsn-form-control-disabled-color; // Inner circle color - dark text color for contrast against disabled accent background
+$dsn-radio-checked-disabled-color: $dsn-form-control-disabled-color; // Kleur van de binnenste cirkel — donkere tekstkleur voor contrast op de disabled accentachtergrond
 $dsn-radio-checked-focus-border-color: $dsn-form-control-focus-border-color;
 $dsn-radio-checked-hover-color: $dsn-color-neutral-inverse-color-default;
-$dsn-search-input-icon-size: $dsn-icon-size-md; // Search input icon size
-$dsn-select-icon-size: $dsn-icon-size-md; // Chevron-down icon size — matches the medium icon size
+$dsn-search-input-icon-size: $dsn-icon-size-md; // Icoongrootte van het zoekinvoerveld
+$dsn-select-icon-size: $dsn-icon-size-md; // Grootte van het chevron-down icoon — gelijk aan de medium icoongrootte
 $dsn-spinner-color: $dsn-color-accent-1-color-default; // Kleur van de draaiende boog
-$dsn-status-badge-icon-size: $dsn-icon-size-sm; // Status badge icon size
-$dsn-status-badge-info-background-color: $dsn-color-info-bg-default; // Background color for info variant
-$dsn-status-badge-info-color: $dsn-color-info-color-default; // Text color for info variant
-$dsn-status-badge-negative-background-color: $dsn-color-negative-bg-default; // Background color for negative variant
-$dsn-status-badge-negative-color: $dsn-color-negative-color-default; // Text color for negative variant
-$dsn-status-badge-positive-background-color: $dsn-color-positive-bg-default; // Background color for positive variant
-$dsn-status-badge-positive-color: $dsn-color-positive-color-default; // Text color for positive variant
-$dsn-status-badge-warning-background-color: $dsn-color-warning-bg-default; // Background color for warning variant
-$dsn-status-badge-warning-color: $dsn-color-warning-color-default; // Text color for warning variant
-$dsn-text-area-background-color: $dsn-form-control-background-color; // Text area background color
-$dsn-text-area-border-color: $dsn-form-control-border-color; // Text area border color
-$dsn-text-area-border-width: $dsn-form-control-border-width; // Text area border width
-$dsn-text-area-color: $dsn-form-control-color; // Text area text color
-$dsn-text-area-font-family: $dsn-form-control-font-family; // Text area font family
-$dsn-text-area-font-size: $dsn-form-control-font-size; // Text area font size
-$dsn-text-area-font-weight: $dsn-form-control-font-weight; // Text area font weight
-$dsn-text-area-line-height: $dsn-form-control-line-height; // Text area line height
-$dsn-text-area-padding-block-end: $dsn-form-control-padding-block-end; // Text area bottom padding
-$dsn-text-area-padding-block-start: $dsn-form-control-padding-block-start; // Text area top padding
-$dsn-text-area-padding-inline-end: $dsn-form-control-padding-inline-end; // Text area right padding
-$dsn-text-area-padding-inline-start: $dsn-form-control-padding-inline-start; // Text area left padding
-$dsn-text-area-disabled-background-color: $dsn-form-control-disabled-background-color; // Text area disabled background
-$dsn-text-area-disabled-border-color: $dsn-form-control-disabled-border-color; // Text area disabled border
-$dsn-text-area-disabled-color: $dsn-form-control-disabled-color; // Text area disabled text color
-$dsn-text-area-focus-border-color: $dsn-form-control-focus-border-color; // Text area focus border
-$dsn-text-area-placeholder-color: $dsn-form-control-placeholder-color; // Text area placeholder color
-$dsn-text-area-invalid-color: $dsn-form-control-color; // Text area invalid text color
-$dsn-text-area-read-only-background-color: $dsn-form-control-read-only-background-color; // Text area read-only background
-$dsn-text-area-read-only-border-color: $dsn-form-control-read-only-border-color; // Text area read-only border
-$dsn-text-area-read-only-color: $dsn-form-control-read-only-color; // Text area read-only text color
-$dsn-text-input-background-color: $dsn-form-control-background-color; // Text input background color
-$dsn-text-input-border-color: $dsn-form-control-border-color; // Text input border color
-$dsn-text-input-border-width: $dsn-form-control-border-width; // Text input border width
-$dsn-text-input-color: $dsn-form-control-color; // Text input text color
-$dsn-text-input-font-family: $dsn-form-control-font-family; // Text input font family
-$dsn-text-input-font-size: $dsn-form-control-font-size; // Text input font size
-$dsn-text-input-font-weight: $dsn-form-control-font-weight; // Text input font weight
-$dsn-text-input-line-height: $dsn-form-control-line-height; // Text input line height
-$dsn-text-input-padding-block-end: $dsn-form-control-padding-block-end; // Text input bottom padding
-$dsn-text-input-padding-block-start: $dsn-form-control-padding-block-start; // Text input top padding
-$dsn-text-input-padding-inline-end: $dsn-form-control-padding-inline-end; // Text input right padding
-$dsn-text-input-padding-inline-start: $dsn-form-control-padding-inline-start; // Text input left padding
-$dsn-text-input-disabled-background-color: $dsn-form-control-disabled-background-color; // Text input disabled background
-$dsn-text-input-disabled-border-color: $dsn-form-control-disabled-border-color; // Text input disabled border
-$dsn-text-input-disabled-color: $dsn-form-control-disabled-color; // Text input disabled text color
-$dsn-text-input-focus-border-color: $dsn-form-control-focus-border-color; // Text input focus border
-$dsn-text-input-placeholder-color: $dsn-form-control-placeholder-color; // Text input placeholder color
-$dsn-text-input-invalid-color: $dsn-form-control-color; // Text input invalid text color
-$dsn-text-input-read-only-background-color: $dsn-form-control-read-only-background-color; // Text input read-only background
-$dsn-text-input-read-only-border-color: $dsn-form-control-read-only-border-color; // Text input read-only border
-$dsn-text-input-read-only-color: $dsn-form-control-read-only-color; // Text input read-only text color
-$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
+$dsn-status-badge-icon-size: $dsn-icon-size-sm; // Icoongrootte van de StatusBadge
+$dsn-status-badge-info-background-color: $dsn-color-info-bg-default; // Achtergrondkleur voor info variant
+$dsn-status-badge-info-color: $dsn-color-info-color-default; // Tekstkleur voor info variant
+$dsn-status-badge-negative-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur voor negative variant
+$dsn-status-badge-negative-color: $dsn-color-negative-color-default; // Tekstkleur voor negative variant
+$dsn-status-badge-positive-background-color: $dsn-color-positive-bg-default; // Achtergrondkleur voor positive variant
+$dsn-status-badge-positive-color: $dsn-color-positive-color-default; // Tekstkleur voor positive variant
+$dsn-status-badge-warning-background-color: $dsn-color-warning-bg-default; // Achtergrondkleur voor warning variant
+$dsn-status-badge-warning-color: $dsn-color-warning-color-default; // Tekstkleur voor warning variant
+$dsn-table-of-contents-border-inline-start-color: $dsn-color-accent-1-border-default; // Kleur van de linkerborder (framed appearance)
+$dsn-table-of-contents-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur (framed appearance)
+$dsn-text-area-background-color: $dsn-form-control-background-color; // Achtergrondkleur van het tekstveld
+$dsn-text-area-border-color: $dsn-form-control-border-color; // Borderkleur van het tekstveld
+$dsn-text-area-border-width: $dsn-form-control-border-width; // Border-breedte van het tekstveld
+$dsn-text-area-color: $dsn-form-control-color; // Tekstkleur van het tekstveld
+$dsn-text-area-font-family: $dsn-form-control-font-family; // Font-familie van het tekstveld
+$dsn-text-area-font-size: $dsn-form-control-font-size; // Font-size van het tekstveld
+$dsn-text-area-font-weight: $dsn-form-control-font-weight; // Font-gewicht van het tekstveld
+$dsn-text-area-line-height: $dsn-form-control-line-height; // Line-height van het tekstveld
+$dsn-text-area-padding-block-end: $dsn-form-control-padding-block-end; // Onderste padding van het tekstveld
+$dsn-text-area-padding-block-start: $dsn-form-control-padding-block-start; // Bovenste padding van het tekstveld
+$dsn-text-area-padding-inline-end: $dsn-form-control-padding-inline-end; // Rechter padding van het tekstveld
+$dsn-text-area-padding-inline-start: $dsn-form-control-padding-inline-start; // Linker padding van het tekstveld
+$dsn-text-area-disabled-background-color: $dsn-form-control-disabled-background-color; // Achtergrond van het tekstveld op disabled
+$dsn-text-area-disabled-border-color: $dsn-form-control-disabled-border-color; // Border van het tekstveld op disabled
+$dsn-text-area-disabled-color: $dsn-form-control-disabled-color; // Tekstkleur van het tekstveld op disabled
+$dsn-text-area-focus-border-color: $dsn-form-control-focus-border-color; // Border van het tekstveld op focus
+$dsn-text-area-placeholder-color: $dsn-form-control-placeholder-color; // Plaatshouderkleur van het tekstveld
+$dsn-text-area-invalid-color: $dsn-form-control-color; // Tekstkleur van het tekstveld bij ongeldige invoer
+$dsn-text-area-read-only-background-color: $dsn-form-control-read-only-background-color; // Achtergrond van het tekstveld op read-only
+$dsn-text-area-read-only-border-color: $dsn-form-control-read-only-border-color; // Border van het tekstveld op read-only
+$dsn-text-area-read-only-color: $dsn-form-control-read-only-color; // Tekstkleur van het tekstveld op read-only
+$dsn-text-input-background-color: $dsn-form-control-background-color; // Achtergrondkleur van het tekstinvoerveld
+$dsn-text-input-border-color: $dsn-form-control-border-color; // Borderkleur van het tekstinvoerveld
+$dsn-text-input-border-width: $dsn-form-control-border-width; // Border-breedte van het tekstinvoerveld
+$dsn-text-input-color: $dsn-form-control-color; // Tekstkleur van het tekstinvoerveld
+$dsn-text-input-font-family: $dsn-form-control-font-family; // Font-familie van het tekstinvoerveld
+$dsn-text-input-font-size: $dsn-form-control-font-size; // Font-size van het tekstinvoerveld
+$dsn-text-input-font-weight: $dsn-form-control-font-weight; // Font-gewicht van het tekstinvoerveld
+$dsn-text-input-line-height: $dsn-form-control-line-height; // Line-height van het tekstinvoerveld
+$dsn-text-input-padding-block-end: $dsn-form-control-padding-block-end; // Onderste padding van het tekstinvoerveld
+$dsn-text-input-padding-block-start: $dsn-form-control-padding-block-start; // Bovenste padding van het tekstinvoerveld
+$dsn-text-input-padding-inline-end: $dsn-form-control-padding-inline-end; // Rechter padding van het tekstinvoerveld
+$dsn-text-input-padding-inline-start: $dsn-form-control-padding-inline-start; // Linker padding van het tekstinvoerveld
+$dsn-text-input-disabled-background-color: $dsn-form-control-disabled-background-color; // Achtergrond van het tekstinvoerveld op disabled
+$dsn-text-input-disabled-border-color: $dsn-form-control-disabled-border-color; // Border van het tekstinvoerveld op disabled
+$dsn-text-input-disabled-color: $dsn-form-control-disabled-color; // Tekstkleur van het tekstinvoerveld op disabled
+$dsn-text-input-focus-border-color: $dsn-form-control-focus-border-color; // Border van het tekstinvoerveld op focus
+$dsn-text-input-placeholder-color: $dsn-form-control-placeholder-color; // Plaatshouderkleur van het tekstinvoerveld
+$dsn-text-input-invalid-color: $dsn-form-control-color; // Tekstkleur van het tekstinvoerveld bij ongeldige invoer
+$dsn-text-input-read-only-background-color: $dsn-form-control-read-only-background-color; // Achtergrond van het tekstinvoerveld op read-only
+$dsn-text-input-read-only-border-color: $dsn-form-control-read-only-border-color; // Border van het tekstinvoerveld op read-only
+$dsn-text-input-read-only-color: $dsn-form-control-read-only-color; // Tekstkleur van het tekstinvoerveld op read-only
+$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Rechter padding wanneer een icoon aanwezig is: (knop-padding × 2) + icoongrootte + knop-inset + ruimte
 $dsn-unordered-list-marker-color: $dsn-color-accent-1-color-default; // Bullet marker color
-$dsn-form-control-hover-accent-color: $dsn-color-action-1-color-hover; // Form control hover accent color
-$dsn-form-control-active-accent-color: $dsn-color-action-1-color-active; // Form control active accent color
-$dsn-form-control-accent-color: $dsn-color-action-1-color-default; // Form control accent color (checkboxes, radio buttons)
+$dsn-form-control-hover-accent-color: $dsn-color-action-1-color-hover; // Accentkleur van form controls in hover state
+$dsn-form-control-active-accent-color: $dsn-color-action-1-color-active; // Accentkleur van form controls in active state
+$dsn-form-control-accent-color: $dsn-color-action-1-color-default; // Accentkleur van form controls (checkboxes, radio buttons)
 $dsn-color-accent-2-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document;
 $dsn-color-accent-2-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated;
 $dsn-color-accent-2-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle;
@@ -1235,34 +1256,34 @@ $dsn-color-action-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover
 $dsn-color-action-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active;
 $dsn-color-action-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle;
 $dsn-color-action-2-inverse-color-document: $dsn-color-accent-1-inverse-color-document;
-$dsn-breadcrumb-navigation-link-color: $dsn-color-action-2-color-default; // Link text color
-$dsn-breadcrumb-navigation-link-hover-color: $dsn-color-action-2-color-hover; // Link hover color
-$dsn-breadcrumb-navigation-link-active-color: $dsn-color-action-2-color-active; // Link active color
-$dsn-button-default-border-color: $dsn-color-action-1-border-default; // Default button border
-$dsn-button-default-color: $dsn-color-action-1-color-default; // Default button text/icon color
-$dsn-button-default-active-background-color: $dsn-color-action-1-bg-active; // Default button active background
-$dsn-button-default-active-border-color: $dsn-color-action-1-border-active; // Default button active border
-$dsn-button-default-active-color: $dsn-color-action-1-color-active; // Default button active text/icon color
-$dsn-button-default-hover-background-color: $dsn-color-action-1-bg-hover; // Default button hover background
-$dsn-button-default-hover-border-color: $dsn-color-action-1-border-hover; // Default button hover border
-$dsn-button-default-hover-color: $dsn-color-action-1-color-hover; // Default button hover text/icon color
-$dsn-button-strong-negative-background-color: $dsn-color-negative-inverse-bg-default; // Strong negative button background
-$dsn-button-strong-negative-color: $dsn-color-negative-inverse-color-default; // Strong negative button text/icon color
-$dsn-button-strong-negative-active-background-color: $dsn-color-negative-inverse-bg-active; // Strong negative button active background
-$dsn-button-strong-negative-active-color: $dsn-color-negative-inverse-color-active; // Strong negative button active text/icon color
-$dsn-button-strong-negative-hover-background-color: $dsn-color-negative-inverse-bg-hover; // Strong negative button hover background
-$dsn-button-strong-negative-hover-color: $dsn-color-negative-inverse-color-hover; // Strong negative button hover text/icon color
-$dsn-button-strong-positive-background-color: $dsn-color-positive-inverse-bg-default; // Strong positive button background
-$dsn-button-strong-positive-color: $dsn-color-positive-inverse-color-default; // Strong positive button text/icon color
-$dsn-button-strong-positive-active-background-color: $dsn-color-positive-inverse-bg-active; // Strong positive button active background
-$dsn-button-strong-positive-active-color: $dsn-color-positive-inverse-color-active; // Strong positive button active text/icon color
-$dsn-button-strong-positive-hover-background-color: $dsn-color-positive-inverse-bg-hover; // Strong positive button hover background
-$dsn-button-strong-positive-hover-color: $dsn-color-positive-inverse-color-hover; // Strong positive button hover text/icon color
-$dsn-button-subtle-color: $dsn-color-action-1-color-default; // Subtle button text/icon color
-$dsn-button-subtle-active-background-color: $dsn-color-action-1-bg-active; // Subtle button active background
-$dsn-button-subtle-active-color: $dsn-color-action-1-color-active; // Subtle button active text/icon color
-$dsn-button-subtle-hover-background-color: $dsn-color-action-1-bg-hover; // Subtle button hover background
-$dsn-button-subtle-hover-color: $dsn-color-action-1-color-hover; // Subtle button hover text/icon color
+$dsn-breadcrumb-navigation-link-color: $dsn-color-action-2-color-default; // Tekstkleur van de link
+$dsn-breadcrumb-navigation-link-hover-color: $dsn-color-action-2-color-hover; // Linkkleur op hover
+$dsn-breadcrumb-navigation-link-active-color: $dsn-color-action-2-color-active; // Linkkleur op active
+$dsn-button-default-border-color: $dsn-color-action-1-border-default; // Border van de default button
+$dsn-button-default-color: $dsn-color-action-1-color-default; // Tekst-/icoonkleur van de default button
+$dsn-button-default-active-background-color: $dsn-color-action-1-bg-active; // Achtergrond van de default button op active
+$dsn-button-default-active-border-color: $dsn-color-action-1-border-active; // Border van de default button op active
+$dsn-button-default-active-color: $dsn-color-action-1-color-active; // Tekst-/icoonkleur van de default button op active
+$dsn-button-default-hover-background-color: $dsn-color-action-1-bg-hover; // Achtergrond van de default button op hover
+$dsn-button-default-hover-border-color: $dsn-color-action-1-border-hover; // Border van de default button op hover
+$dsn-button-default-hover-color: $dsn-color-action-1-color-hover; // Tekst-/icoonkleur van de default button op hover
+$dsn-button-strong-negative-background-color: $dsn-color-negative-inverse-bg-default; // Achtergrond van de strong negative button
+$dsn-button-strong-negative-color: $dsn-color-negative-inverse-color-default; // Tekst-/icoonkleur van de strong negative button
+$dsn-button-strong-negative-active-background-color: $dsn-color-negative-inverse-bg-active; // Achtergrond van de strong negative button op active
+$dsn-button-strong-negative-active-color: $dsn-color-negative-inverse-color-active; // Tekst-/icoonkleur van de strong negative button op active
+$dsn-button-strong-negative-hover-background-color: $dsn-color-negative-inverse-bg-hover; // Achtergrond van de strong negative button op hover
+$dsn-button-strong-negative-hover-color: $dsn-color-negative-inverse-color-hover; // Tekst-/icoonkleur van de strong negative button op hover
+$dsn-button-strong-positive-background-color: $dsn-color-positive-inverse-bg-default; // Achtergrond van de strong positive button
+$dsn-button-strong-positive-color: $dsn-color-positive-inverse-color-default; // Tekst-/icoonkleur van de strong positive button
+$dsn-button-strong-positive-active-background-color: $dsn-color-positive-inverse-bg-active; // Achtergrond van de strong positive button op active
+$dsn-button-strong-positive-active-color: $dsn-color-positive-inverse-color-active; // Tekst-/icoonkleur van de strong positive button op active
+$dsn-button-strong-positive-hover-background-color: $dsn-color-positive-inverse-bg-hover; // Achtergrond van de strong positive button op hover
+$dsn-button-strong-positive-hover-color: $dsn-color-positive-inverse-color-hover; // Tekst-/icoonkleur van de strong positive button op hover
+$dsn-button-subtle-color: $dsn-color-action-1-color-default; // Tekst-/icoonkleur van de subtle button
+$dsn-button-subtle-active-background-color: $dsn-color-action-1-bg-active; // Achtergrond van de subtle button op active
+$dsn-button-subtle-active-color: $dsn-color-action-1-color-active; // Tekst-/icoonkleur van de subtle button op active
+$dsn-button-subtle-hover-background-color: $dsn-color-action-1-bg-hover; // Achtergrond van de subtle button op hover
+$dsn-button-subtle-hover-color: $dsn-color-action-1-color-hover; // Tekst-/icoonkleur van de subtle button op hover
 $dsn-checkbox-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-checkbox-invalid-background-color: $dsn-form-control-invalid-background-color;
 $dsn-checkbox-invalid-border-color: $dsn-form-control-invalid-border-color;
@@ -1270,19 +1291,16 @@ $dsn-checkbox-checked-focus-background-color: $dsn-form-control-focus-background
 $dsn-checkbox-checked-focus-color: $dsn-form-control-focus-color;
 $dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
-$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
-$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
-$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
-$dsn-details-summary-color: $dsn-color-action-2-color-default; // Summary label color (follows Link via action-2)
-$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Summary label color on hover
-$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Summary label color on active
-$dsn-hero-background-color-inverse: $dsn-color-accent-1-inverse-bg-default; // Achtergrondkleur van de inverse Hero — donker blauw
-$dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond
-$dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang
-$dsn-link-color: $dsn-color-action-2-color-default; // Link text color
-$dsn-link-text-decoration-color: $dsn-color-action-2-color-default; // Link underline color
-$dsn-link-active-color: $dsn-color-action-2-color-active; // Link active text color
-$dsn-link-hover-color: $dsn-color-action-2-color-hover; // Link hover text color
+$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-hero-background-color-inverse: $dsn-color-accent-1-inverse-bg-default; // Achtergrondkleur van de inverse Hero
+$dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero
+$dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant
+$dsn-link-color: $dsn-color-action-2-color-default; // Tekstkleur van de link
+$dsn-link-text-decoration-color: $dsn-color-action-2-color-default; // Kleur van de onderstreping van de link
+$dsn-link-active-color: $dsn-color-action-2-color-active; // Tekstkleur van de link op active
+$dsn-link-hover-color: $dsn-color-action-2-color-hover; // Tekstkleur van de link op hover
 $dsn-logo-color-primary: $dsn-color-accent-1-inverse-bg-default; // Achtergrondrechthoek en letterpaden — de merkkleur van het actieve thema.
 $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
@@ -1293,47 +1311,48 @@ $dsn-menu-link-current-color: $dsn-color-action-2-color-default; // MenuLink-spe
 $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-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 — blijft bg-active
+$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
 $dsn-menu-link-current-active-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: active achtergrondkleur voor de actieve pagina
-$dsn-number-badge-negative-color: $dsn-color-negative-inverse-color-default; // Tekstkleur voor negative variant (wit op donkere achtergrond)
+$dsn-number-badge-negative-color: $dsn-color-negative-inverse-color-default; // Tekstkleur voor negative variant
 $dsn-number-badge-negative-background-color: $dsn-color-negative-inverse-bg-default; // Achtergrondkleur voor negative variant
-$dsn-number-badge-positive-color: $dsn-color-positive-inverse-color-default; // Tekstkleur voor positive variant (wit op donkere achtergrond)
+$dsn-number-badge-positive-color: $dsn-color-positive-inverse-color-default; // Tekstkleur voor positive variant
 $dsn-number-badge-positive-background-color: $dsn-color-positive-inverse-bg-default; // Achtergrondkleur voor positive variant
-$dsn-number-badge-warning-color: $dsn-color-warning-inverse-color-default; // Tekstkleur voor warning variant (wit op donkere achtergrond)
+$dsn-number-badge-warning-color: $dsn-color-warning-inverse-color-default; // Tekstkleur voor warning variant
 $dsn-number-badge-warning-background-color: $dsn-color-warning-inverse-bg-default; // Achtergrondkleur voor warning variant
-$dsn-number-badge-info-color: $dsn-color-info-inverse-color-default; // Tekstkleur voor info variant (wit op donkere achtergrond)
+$dsn-number-badge-info-color: $dsn-color-info-inverse-color-default; // Tekstkleur voor info variant
 $dsn-number-badge-info-background-color: $dsn-color-info-inverse-bg-default; // Achtergrondkleur voor info variant
+$dsn-progress-bar-color-fill: $dsn-color-accent-1-inverse-bg-default; // Vulbalk achtergrondkleur
 $dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-radio-invalid-background-color: $dsn-form-control-invalid-background-color;
 $dsn-radio-invalid-border-color: $dsn-form-control-invalid-border-color;
 $dsn-radio-invalid-color: $dsn-form-control-invalid-border-color;
 $dsn-radio-checked-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-radio-checked-focus-color: $dsn-form-control-focus-color;
-$dsn-search-input-padding-inline-start-with-icon: calc($dsn-search-input-icon-size + $dsn-search-input-icon-gap + $dsn-form-control-padding-inline-start); // Left padding when icon is present
-$dsn-select-icon-color: $dsn-color-action-1-color-default; // Chevron icon color — same as subtle button icon color
-$dsn-select-padding-inline-end-with-icon: calc($dsn-select-icon-size + $dsn-select-icon-gap + $dsn-select-icon-inset-inline-end); // Right padding when icon is present: icon-size + gap + inset
-$dsn-text-area-focus-background-color: $dsn-form-control-focus-background-color; // Text area focus background
-$dsn-text-area-focus-box-shadow-color: $dsn-text-area-focus-border-color; // Text area focus box shadow color
-$dsn-text-area-focus-color: $dsn-form-control-focus-color; // Text area focus text color
-$dsn-text-area-hover-box-shadow-color: $dsn-text-area-border-color; // Text area hover box shadow color
-$dsn-text-area-invalid-background-color: $dsn-form-control-invalid-background-color; // Text area invalid background
-$dsn-text-area-invalid-border-color: $dsn-form-control-invalid-border-color; // Text area invalid border
-$dsn-text-input-focus-background-color: $dsn-form-control-focus-background-color; // Text input focus background
-$dsn-text-input-focus-box-shadow-color: $dsn-text-input-focus-border-color; // Text input focus box shadow color
-$dsn-text-input-focus-color: $dsn-form-control-focus-color; // Text input focus text color
-$dsn-text-input-hover-box-shadow-color: $dsn-text-input-border-color; // Text input hover box shadow color
-$dsn-text-input-invalid-background-color: $dsn-form-control-invalid-background-color; // Text input invalid background
-$dsn-text-input-invalid-border-color: $dsn-form-control-invalid-border-color; // Text input invalid border
-$dsn-time-input-icon-color: $dsn-color-action-2-color-default; // Clock icon color (interactive, action color)
-$dsn-time-input-icon-hover-color: $dsn-color-action-2-color-hover; // Clock icon hover color
-$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Clock icon size — matches the small button icon size
-$dsn-button-strong-background-color: $dsn-color-action-1-inverse-bg-default; // Strong button background
-$dsn-button-strong-color: $dsn-color-action-1-inverse-color-default; // Strong button text/icon color
-$dsn-button-strong-active-background-color: $dsn-color-action-1-inverse-bg-active; // Strong button active background
-$dsn-button-strong-active-color: $dsn-color-action-1-inverse-color-active; // Strong button active text/icon color
-$dsn-button-strong-hover-background-color: $dsn-color-action-1-inverse-bg-hover; // Strong button hover background
-$dsn-button-strong-hover-color: $dsn-color-action-1-inverse-color-hover; // Strong button hover text/icon color
+$dsn-search-input-padding-inline-start-with-icon: calc($dsn-search-input-icon-size + $dsn-search-input-icon-gap + $dsn-form-control-padding-inline-start); // Linker padding wanneer een icoon aanwezig is
+$dsn-select-icon-color: $dsn-color-action-1-color-default; // Kleur van het chevron-icoon — gelijk aan de icoonkleur van de subtle button
+$dsn-select-padding-inline-end-with-icon: calc($dsn-select-icon-size + $dsn-select-icon-gap + $dsn-select-icon-inset-inline-end); // Rechter padding wanneer een icoon aanwezig is: icoongrootte + ruimte + inset
+$dsn-text-area-focus-background-color: $dsn-form-control-focus-background-color; // Achtergrond van het tekstveld op focus
+$dsn-text-area-focus-box-shadow-color: $dsn-text-area-focus-border-color; // Kleur van de box-shadow op focus
+$dsn-text-area-focus-color: $dsn-form-control-focus-color; // Tekstkleur van het tekstveld op focus
+$dsn-text-area-hover-box-shadow-color: $dsn-text-area-border-color; // Kleur van de box-shadow op hover
+$dsn-text-area-invalid-background-color: $dsn-form-control-invalid-background-color; // Achtergrond van het tekstveld bij ongeldige invoer
+$dsn-text-area-invalid-border-color: $dsn-form-control-invalid-border-color; // Border van het tekstveld bij ongeldige invoer
+$dsn-text-input-focus-background-color: $dsn-form-control-focus-background-color; // Achtergrond van het tekstinvoerveld op focus
+$dsn-text-input-focus-box-shadow-color: $dsn-text-input-focus-border-color; // Kleur van de box-shadow op focus
+$dsn-text-input-focus-color: $dsn-form-control-focus-color; // Tekstkleur van het tekstinvoerveld op focus
+$dsn-text-input-hover-box-shadow-color: $dsn-text-input-border-color; // Kleur van de box-shadow op hover
+$dsn-text-input-invalid-background-color: $dsn-form-control-invalid-background-color; // Achtergrond van het tekstinvoerveld bij ongeldige invoer
+$dsn-text-input-invalid-border-color: $dsn-form-control-invalid-border-color; // Border van het tekstinvoerveld bij ongeldige invoer
+$dsn-time-input-icon-color: $dsn-color-action-2-color-default; // Kleur van het klokicoon (interactief, actie-kleur)
+$dsn-time-input-icon-hover-color: $dsn-color-action-2-color-hover; // Kleur van het klokicoon op hover
+$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Grootte van het klokicoon — gelijk aan de icoongrootte van de small button
+$dsn-button-strong-background-color: $dsn-color-action-1-inverse-bg-default; // Achtergrond van de strong button
+$dsn-button-strong-color: $dsn-color-action-1-inverse-color-default; // Tekst-/icoonkleur van de strong button
+$dsn-button-strong-active-background-color: $dsn-color-action-1-inverse-bg-active; // Achtergrond van de strong button op active
+$dsn-button-strong-active-color: $dsn-color-action-1-inverse-color-active; // Tekst-/icoonkleur van de strong button op active
+$dsn-button-strong-hover-background-color: $dsn-color-action-1-inverse-bg-hover; // Achtergrond van de strong button op hover
+$dsn-button-strong-hover-color: $dsn-color-action-1-inverse-color-hover; // Tekst-/icoonkleur van de strong button op hover
 $dsn-checkbox-checked-background-color: $dsn-form-control-accent-color;
 $dsn-checkbox-checked-active-background-color: $dsn-form-control-active-accent-color;
 $dsn-checkbox-checked-hover-background-color: $dsn-form-control-hover-accent-color;
@@ -1343,5 +1362,5 @@ $dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-acce
 $dsn-radio-checked-background-color: $dsn-form-control-accent-color;
 $dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;
 $dsn-radio-checked-hover-background-color: $dsn-form-control-hover-accent-color;
-$dsn-text-area-invalid-box-shadow-color: $dsn-text-area-invalid-border-color; // Text area invalid box shadow color
-$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Text input invalid box shadow color
+$dsn-text-area-invalid-box-shadow-color: $dsn-text-area-invalid-border-color; // Kleur van de box-shadow bij ongeldige invoer
+$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Kleur van de box-shadow bij ongeldige invoer