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

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

@@ -3,18 +3,18 @@
  */
 
 :root {
-  --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) */
@@ -22,97 +22,97 @@
   --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 */
@@ -128,47 +128,47 @@
   --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 */
@@ -177,13 +177,14 @@
   --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 */
@@ -193,70 +194,72 @@
   --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: var(--dsn-color-neutral-color-document); /** Heading text color */
-  --dsn-heading-level-1-font-family: var(--dsn-heading-font-family); /** Heading 1 font family */
-  --dsn-heading-level-1-font-size: var(--dsn-text-font-size-3xl); /** Heading 1 font size */
-  --dsn-heading-level-1-font-weight: var(--dsn-heading-font-weight); /** Heading 1 font weight */
-  --dsn-heading-level-1-line-height: var(--dsn-text-line-height-3xl); /** Heading 1 line height */
-  --dsn-heading-level-1-margin-block-end: var(--dsn-space-row-xl); /** Heading 1 bottom margin */
-  --dsn-heading-level-2-font-family: var(--dsn-heading-font-family); /** Heading 2 font family */
-  --dsn-heading-level-2-font-size: var(--dsn-text-font-size-2xl); /** Heading 2 font size */
-  --dsn-heading-level-2-font-weight: var(--dsn-heading-font-weight); /** Heading 2 font weight */
-  --dsn-heading-level-2-line-height: var(--dsn-text-line-height-2xl); /** Heading 2 line height */
-  --dsn-heading-level-2-margin-block-end: var(--dsn-space-row-xl); /** Heading 2 bottom margin */
-  --dsn-heading-level-3-font-family: var(--dsn-heading-font-family); /** Heading 3 font family */
-  --dsn-heading-level-3-font-size: var(--dsn-text-font-size-xl); /** Heading 3 font size */
-  --dsn-heading-level-3-font-weight: var(--dsn-heading-font-weight); /** Heading 3 font weight */
-  --dsn-heading-level-3-line-height: var(--dsn-text-line-height-xl); /** Heading 3 line height */
-  --dsn-heading-level-3-margin-block-end: var(--dsn-space-row-lg); /** Heading 3 bottom margin */
-  --dsn-heading-level-4-font-family: var(--dsn-heading-font-family); /** Heading 4 font family */
-  --dsn-heading-level-4-font-size: var(--dsn-text-font-size-lg); /** Heading 4 font size */
-  --dsn-heading-level-4-font-weight: var(--dsn-heading-font-weight); /** Heading 4 font weight */
-  --dsn-heading-level-4-line-height: var(--dsn-text-line-height-lg); /** Heading 4 line height */
-  --dsn-heading-level-4-margin-block-end: var(--dsn-space-row-lg); /** Heading 4 bottom margin */
-  --dsn-heading-level-5-font-family: var(--dsn-heading-font-family); /** Heading 5 font family */
-  --dsn-heading-level-5-font-size: var(--dsn-text-font-size-md); /** Heading 5 font size */
-  --dsn-heading-level-5-font-weight: var(--dsn-heading-font-weight); /** Heading 5 font weight */
-  --dsn-heading-level-5-line-height: var(--dsn-text-line-height-md); /** Heading 5 line height */
-  --dsn-heading-level-5-margin-block-end: var(--dsn-space-row-md); /** Heading 5 bottom margin */
-  --dsn-heading-level-6-font-family: var(--dsn-heading-font-family); /** Heading 6 font family */
-  --dsn-heading-level-6-font-size: var(--dsn-text-font-size-sm); /** Heading 6 font size */
-  --dsn-heading-level-6-font-weight: var(--dsn-heading-font-weight); /** Heading 6 font weight */
-  --dsn-heading-level-6-line-height: var(--dsn-text-line-height-sm); /** Heading 6 line height */
-  --dsn-heading-level-6-margin-block-end: var(--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: var(--dsn-color-neutral-color-document); /** Tekstkleur van koppen */
+  --dsn-heading-level-1-font-family: var(--dsn-heading-font-family); /** Font-familie van Heading 1 */
+  --dsn-heading-level-1-font-size: var(--dsn-text-font-size-3xl); /** Font-size van Heading 1 */
+  --dsn-heading-level-1-font-weight: var(--dsn-heading-font-weight); /** Font-gewicht van Heading 1 */
+  --dsn-heading-level-1-line-height: var(--dsn-text-line-height-3xl); /** Line-height van Heading 1 */
+  --dsn-heading-level-1-margin-block-end: var(--dsn-space-row-xl); /** Onderste margin van Heading 1 */
+  --dsn-heading-level-2-font-family: var(--dsn-heading-font-family); /** Font-familie van Heading 2 */
+  --dsn-heading-level-2-font-size: var(--dsn-text-font-size-2xl); /** Font-size van Heading 2 */
+  --dsn-heading-level-2-font-weight: var(--dsn-heading-font-weight); /** Font-gewicht van Heading 2 */
+  --dsn-heading-level-2-line-height: var(--dsn-text-line-height-2xl); /** Line-height van Heading 2 */
+  --dsn-heading-level-2-margin-block-end: var(--dsn-space-row-xl); /** Onderste margin van Heading 2 */
+  --dsn-heading-level-3-font-family: var(--dsn-heading-font-family); /** Font-familie van Heading 3 */
+  --dsn-heading-level-3-font-size: var(--dsn-text-font-size-xl); /** Font-size van Heading 3 */
+  --dsn-heading-level-3-font-weight: var(--dsn-heading-font-weight); /** Font-gewicht van Heading 3 */
+  --dsn-heading-level-3-line-height: var(--dsn-text-line-height-xl); /** Line-height van Heading 3 */
+  --dsn-heading-level-3-margin-block-end: var(--dsn-space-row-lg); /** Onderste margin van Heading 3 */
+  --dsn-heading-level-4-font-family: var(--dsn-heading-font-family); /** Font-familie van Heading 4 */
+  --dsn-heading-level-4-font-size: var(--dsn-text-font-size-lg); /** Font-size van Heading 4 */
+  --dsn-heading-level-4-font-weight: var(--dsn-heading-font-weight); /** Font-gewicht van Heading 4 */
+  --dsn-heading-level-4-line-height: var(--dsn-text-line-height-lg); /** Line-height van Heading 4 */
+  --dsn-heading-level-4-margin-block-end: var(--dsn-space-row-lg); /** Onderste margin van Heading 4 */
+  --dsn-heading-level-5-font-family: var(--dsn-heading-font-family); /** Font-familie van Heading 5 */
+  --dsn-heading-level-5-font-size: var(--dsn-text-font-size-md); /** Font-size van Heading 5 */
+  --dsn-heading-level-5-font-weight: var(--dsn-heading-font-weight); /** Font-gewicht van Heading 5 */
+  --dsn-heading-level-5-line-height: var(--dsn-text-line-height-md); /** Line-height van Heading 5 */
+  --dsn-heading-level-5-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van Heading 5 */
+  --dsn-heading-level-6-font-family: var(--dsn-heading-font-family); /** Font-familie van Heading 6 */
+  --dsn-heading-level-6-font-size: var(--dsn-text-font-size-sm); /** Font-size van Heading 6 */
+  --dsn-heading-level-6-font-weight: var(--dsn-heading-font-weight); /** Font-gewicht van Heading 6 */
+  --dsn-heading-level-6-line-height: var(--dsn-text-line-height-sm); /** Line-height van Heading 6 */
+  --dsn-heading-level-6-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van Heading 6 */
   --dsn-icon-size-sm: calc(var(--dsn-text-font-size-sm) * var(--dsn-text-line-height-sm)); /** Fluid icon size - coupled to font-size.sm × line-height.sm */
   --dsn-icon-size-md: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); /** Fluid icon size - coupled to font-size.md × line-height.md */
   --dsn-icon-size-lg: calc(var(--dsn-text-font-size-lg) * var(--dsn-text-line-height-lg)); /** Fluid icon size - coupled to font-size.lg × line-height.lg */
@@ -264,193 +267,194 @@
   --dsn-icon-size-2xl: calc(var(--dsn-text-font-size-2xl) * var(--dsn-text-line-height-2xl)); /** Fluid icon size - coupled to font-size.2xl × line-height.2xl */
   --dsn-icon-size-3xl: calc(var(--dsn-text-font-size-3xl) * var(--dsn-text-line-height-3xl)); /** Fluid icon size - coupled to font-size.3xl × line-height.3xl */
   --dsn-icon-size-4xl: calc(var(--dsn-text-font-size-4xl) * var(--dsn-text-line-height-4xl)); /** Fluid icon size - coupled to font-size.4xl × line-height.4xl */
-  --dsn-form-control-font-family: var(--dsn-text-font-family-default); /** Form control font family */
-  --dsn-form-control-font-size: var(--dsn-text-font-size-md); /** Form control font size */
-  --dsn-form-control-font-weight: var(--dsn-text-font-weight-default); /** Form control font weight */
-  --dsn-form-control-line-height: var(--dsn-text-line-height-md); /** Form control line height */
-  --dsn-form-control-padding-block-start: var(--dsn-space-block-lg); /** Form control top padding */
-  --dsn-form-control-padding-block-end: var(--dsn-space-block-lg); /** Form control bottom padding */
-  --dsn-form-control-padding-inline-start: var(--dsn-space-inline-lg); /** Form control left padding */
-  --dsn-form-control-padding-inline-end: var(--dsn-space-inline-lg); /** Form control right padding */
-  --dsn-form-control-border-width: var(--dsn-border-width-thin); /** Form control border width */
-  --dsn-form-control-hover-border-width: var(--dsn-border-width-medium); /** Form control hover border width */
-  --dsn-form-control-hover-background-color: var(--dsn-color-neutral-bg-hover); /** Form control hover background */
-  --dsn-form-control-hover-border-color: var(--dsn-color-neutral-border-hover); /** Form control hover border */
-  --dsn-form-control-focus-border-width: var(--dsn-border-width-medium); /** Form control focus border width */
-  --dsn-form-control-focus-border-color: var(--dsn-color-neutral-border-active); /** Form control focus border */
-  --dsn-form-control-active-border-width: var(--dsn-border-width-medium); /** Form control active border width */
-  --dsn-form-control-active-background-color: var(--dsn-color-neutral-bg-active); /** Form control active background */
-  --dsn-form-control-active-border-color: var(--dsn-color-neutral-border-active); /** Form control active border */
-  --dsn-form-control-invalid-border-width: var(--dsn-border-width-medium); /** Form control invalid border width */
-  --dsn-form-control-background-color: var(--dsn-color-neutral-bg-subtle); /** Form control background */
-  --dsn-form-control-border-color: var(--dsn-color-neutral-border-default); /** Form control border */
-  --dsn-form-control-color: var(--dsn-color-neutral-color-document); /** Form control text color */
-  --dsn-form-control-placeholder-color: var(--dsn-color-neutral-color-subtle); /** Form control placeholder text color */
-  --dsn-form-control-disabled-accent-color: var(--dsn-color-neutral-bg-subtle); /** Form control disabled accent color */
-  --dsn-form-control-disabled-background-color: var(--dsn-color-neutral-bg-subtle); /** Form control disabled background */
-  --dsn-form-control-disabled-border-color: var(--dsn-color-neutral-border-subtle); /** Form control disabled border */
-  --dsn-form-control-disabled-color: var(--dsn-color-neutral-color-subtle); /** Form control disabled text color */
-  --dsn-form-control-read-only-background-color: var(--dsn-color-neutral-bg-subtle); /** Form control read-only background */
-  --dsn-form-control-read-only-border-color: var(--dsn-color-transparent); /** Form control read-only border */
-  --dsn-form-control-read-only-color: var(--dsn-color-neutral-color-document); /** Form control read-only text color */
-  --dsn-color-accent-1-bg-document: var(--dsn-color-neutral-bg-document); /** Document background */
+  --dsn-form-control-font-family: var(--dsn-text-font-family-default); /** Lettertype van form controls */
+  --dsn-form-control-font-size: var(--dsn-text-font-size-md); /** Lettergrootte van form controls */
+  --dsn-form-control-font-weight: var(--dsn-text-font-weight-default); /** Lettergewicht van form controls */
+  --dsn-form-control-line-height: var(--dsn-text-line-height-md); /** Regelafstand van form controls */
+  --dsn-form-control-padding-block-start: var(--dsn-space-block-lg); /** Bovenste padding van form controls */
+  --dsn-form-control-padding-block-end: var(--dsn-space-block-lg); /** Onderste padding van form controls */
+  --dsn-form-control-padding-inline-start: var(--dsn-space-inline-lg); /** Linker padding van form controls */
+  --dsn-form-control-padding-inline-end: var(--dsn-space-inline-lg); /** Rechter padding van form controls */
+  --dsn-form-control-border-width: var(--dsn-border-width-thin); /** Randbreedte van form controls */
+  --dsn-form-control-hover-border-width: var(--dsn-border-width-medium); /** Randbreedte van form controls in hover state */
+  --dsn-form-control-hover-background-color: var(--dsn-color-neutral-bg-hover); /** Achtergrondkleur van form controls in hover state */
+  --dsn-form-control-hover-border-color: var(--dsn-color-neutral-border-hover); /** Randkleur van form controls in hover state */
+  --dsn-form-control-focus-border-width: var(--dsn-border-width-medium); /** Randbreedte van form controls in focus state */
+  --dsn-form-control-focus-border-color: var(--dsn-color-neutral-border-active); /** Randkleur van form controls in focus state */
+  --dsn-form-control-active-border-width: var(--dsn-border-width-medium); /** Randbreedte van form controls in active state */
+  --dsn-form-control-active-background-color: var(--dsn-color-neutral-bg-active); /** Achtergrondkleur van form controls in active state */
+  --dsn-form-control-active-border-color: var(--dsn-color-neutral-border-active); /** Randkleur van form controls in active state */
+  --dsn-form-control-invalid-border-width: var(--dsn-border-width-medium); /** Randbreedte van form controls in invalid state */
+  --dsn-form-control-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van form controls */
+  --dsn-form-control-border-color: var(--dsn-color-neutral-border-default); /** Randkleur van form controls */
+  --dsn-form-control-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van form controls */
+  --dsn-form-control-placeholder-color: var(--dsn-color-neutral-color-subtle); /** Tekstkleur van placeholder in form controls */
+  --dsn-form-control-disabled-accent-color: var(--dsn-color-neutral-bg-subtle); /** Accentkleur van form controls in disabled state */
+  --dsn-form-control-disabled-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van form controls in disabled state */
+  --dsn-form-control-disabled-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van form controls in disabled state */
+  --dsn-form-control-disabled-color: var(--dsn-color-neutral-color-subtle); /** Tekstkleur van form controls in disabled state */
+  --dsn-form-control-read-only-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van form controls in read-only state */
+  --dsn-form-control-read-only-border-color: var(--dsn-color-transparent); /** Randkleur van form controls in read-only state */
+  --dsn-form-control-read-only-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van form controls in read-only state */
+  --dsn-color-accent-1-bg-document: var(--dsn-color-neutral-bg-document); /** Documentachtergrond */
   --dsn-color-accent-1-bg-elevated: var(--dsn-color-neutral-bg-elevated); /** Elevated background */
-  --dsn-color-accent-1-bg-subtle: var(--dsn-color-neutral-bg-subtle); /** Subtle background */
-  --dsn-color-accent-1-bg-default: var(--dsn-color-neutral-bg-default); /** Default background */
-  --dsn-color-accent-1-bg-hover: var(--dsn-color-neutral-bg-hover); /** Hover state background */
-  --dsn-color-accent-1-bg-active: var(--dsn-color-neutral-bg-active); /** Active state background */
-  --dsn-color-accent-1-border-subtle: var(--dsn-color-neutral-border-subtle); /** Subtle border */
-  --dsn-color-accent-1-border-default: var(--dsn-color-neutral-border-default); /** Default border */
-  --dsn-color-accent-1-border-hover: var(--dsn-color-neutral-border-hover); /** Hover state border */
-  --dsn-color-accent-1-border-active: var(--dsn-color-neutral-border-active); /** Active state border */
-  --dsn-color-accent-1-color-default: var(--dsn-color-neutral-color-default); /** Default text color */
-  --dsn-color-accent-1-color-hover: var(--dsn-color-neutral-color-hover); /** Hover state text */
-  --dsn-color-accent-1-color-active: var(--dsn-color-neutral-color-active); /** Active state text */
-  --dsn-color-accent-1-color-subtle: var(--dsn-color-neutral-color-subtle); /** Subtle text color */
-  --dsn-color-accent-1-color-document: var(--dsn-color-neutral-color-document); /** Document text color */
-  --dsn-color-positive-bg-document: var(--dsn-color-neutral-bg-document); /** Document background */
+  --dsn-color-accent-1-bg-subtle: var(--dsn-color-neutral-bg-subtle); /** Subtiele achtergrond */
+  --dsn-color-accent-1-bg-default: var(--dsn-color-neutral-bg-default); /** Standaard achtergrond */
+  --dsn-color-accent-1-bg-hover: var(--dsn-color-neutral-bg-hover); /** Achtergrond in hover state */
+  --dsn-color-accent-1-bg-active: var(--dsn-color-neutral-bg-active); /** Achtergrond in active state */
+  --dsn-color-accent-1-border-subtle: var(--dsn-color-neutral-border-subtle); /** Subtiele rand */
+  --dsn-color-accent-1-border-default: var(--dsn-color-neutral-border-default); /** Standaard rand */
+  --dsn-color-accent-1-border-hover: var(--dsn-color-neutral-border-hover); /** Rand in hover state */
+  --dsn-color-accent-1-border-active: var(--dsn-color-neutral-border-active); /** Rand in active state */
+  --dsn-color-accent-1-color-default: var(--dsn-color-neutral-color-default); /** Standaard tekstkleur */
+  --dsn-color-accent-1-color-hover: var(--dsn-color-neutral-color-hover); /** Tekst in hover state */
+  --dsn-color-accent-1-color-active: var(--dsn-color-neutral-color-active); /** Tekst in active state */
+  --dsn-color-accent-1-color-subtle: var(--dsn-color-neutral-color-subtle); /** Subtiele tekstkleur */
+  --dsn-color-accent-1-color-document: var(--dsn-color-neutral-color-document); /** Documenttekstkleur */
+  --dsn-color-positive-bg-document: var(--dsn-color-neutral-bg-document); /** Documentachtergrond */
   --dsn-color-positive-bg-elevated: var(--dsn-color-neutral-bg-elevated); /** Elevated background */
-  --dsn-color-positive-bg-subtle: var(--dsn-color-neutral-bg-subtle); /** Subtle background */
-  --dsn-color-positive-bg-default: var(--dsn-color-neutral-bg-default); /** Default background */
-  --dsn-color-positive-bg-hover: var(--dsn-color-neutral-bg-hover); /** Hover state background */
-  --dsn-color-positive-bg-active: var(--dsn-color-neutral-bg-active); /** Active state background */
-  --dsn-color-positive-border-subtle: var(--dsn-color-neutral-border-subtle); /** Subtle border */
-  --dsn-color-positive-border-default: var(--dsn-color-neutral-border-default); /** Default border */
-  --dsn-color-positive-border-hover: var(--dsn-color-neutral-border-hover); /** Hover state border */
-  --dsn-color-positive-border-active: var(--dsn-color-neutral-border-active); /** Active state border */
-  --dsn-color-positive-color-default: var(--dsn-color-neutral-color-default); /** Default text color */
-  --dsn-color-positive-color-hover: var(--dsn-color-neutral-color-hover); /** Hover state text */
-  --dsn-color-positive-color-active: var(--dsn-color-neutral-color-active); /** Active state text */
-  --dsn-color-positive-color-subtle: var(--dsn-color-neutral-color-subtle); /** Subtle text color */
-  --dsn-color-positive-color-document: var(--dsn-color-neutral-color-document); /** Document text color */
-  --dsn-color-negative-bg-document: var(--dsn-color-neutral-bg-document); /** Document background */
+  --dsn-color-positive-bg-subtle: var(--dsn-color-neutral-bg-subtle); /** Subtiele achtergrond */
+  --dsn-color-positive-bg-default: var(--dsn-color-neutral-bg-default); /** Standaard achtergrond */
+  --dsn-color-positive-bg-hover: var(--dsn-color-neutral-bg-hover); /** Achtergrond in hover state */
+  --dsn-color-positive-bg-active: var(--dsn-color-neutral-bg-active); /** Achtergrond in active state */
+  --dsn-color-positive-border-subtle: var(--dsn-color-neutral-border-subtle); /** Subtiele rand */
+  --dsn-color-positive-border-default: var(--dsn-color-neutral-border-default); /** Standaard rand */
+  --dsn-color-positive-border-hover: var(--dsn-color-neutral-border-hover); /** Rand in hover state */
+  --dsn-color-positive-border-active: var(--dsn-color-neutral-border-active); /** Rand in active state */
+  --dsn-color-positive-color-default: var(--dsn-color-neutral-color-default); /** Standaard tekstkleur */
+  --dsn-color-positive-color-hover: var(--dsn-color-neutral-color-hover); /** Tekst in hover state */
+  --dsn-color-positive-color-active: var(--dsn-color-neutral-color-active); /** Tekst in active state */
+  --dsn-color-positive-color-subtle: var(--dsn-color-neutral-color-subtle); /** Subtiele tekstkleur */
+  --dsn-color-positive-color-document: var(--dsn-color-neutral-color-document); /** Documenttekstkleur */
+  --dsn-color-negative-bg-document: var(--dsn-color-neutral-bg-document); /** Documentachtergrond */
   --dsn-color-negative-bg-elevated: var(--dsn-color-neutral-bg-elevated); /** Elevated background */
-  --dsn-color-negative-bg-subtle: var(--dsn-color-neutral-bg-subtle); /** Subtle background */
-  --dsn-color-negative-bg-default: var(--dsn-color-neutral-bg-default); /** Default background */
-  --dsn-color-negative-bg-hover: var(--dsn-color-neutral-bg-hover); /** Hover state background */
-  --dsn-color-negative-bg-active: var(--dsn-color-neutral-bg-active); /** Active state background */
-  --dsn-color-negative-border-subtle: var(--dsn-color-neutral-border-subtle); /** Subtle border */
-  --dsn-color-negative-border-default: var(--dsn-color-neutral-border-default); /** Default border */
-  --dsn-color-negative-border-hover: var(--dsn-color-neutral-border-hover); /** Hover state border */
-  --dsn-color-negative-border-active: var(--dsn-color-neutral-border-active); /** Active state border */
-  --dsn-color-negative-color-default: var(--dsn-color-neutral-color-default); /** Default text color */
-  --dsn-color-negative-color-hover: var(--dsn-color-neutral-color-hover); /** Hover state text */
-  --dsn-color-negative-color-active: var(--dsn-color-neutral-color-active); /** Active state text */
-  --dsn-color-negative-color-subtle: var(--dsn-color-neutral-color-subtle); /** Subtle text color */
-  --dsn-color-negative-color-document: var(--dsn-color-neutral-color-document); /** Document text color */
-  --dsn-color-warning-bg-document: var(--dsn-color-neutral-bg-document); /** Document background */
+  --dsn-color-negative-bg-subtle: var(--dsn-color-neutral-bg-subtle); /** Subtiele achtergrond */
+  --dsn-color-negative-bg-default: var(--dsn-color-neutral-bg-default); /** Standaard achtergrond */
+  --dsn-color-negative-bg-hover: var(--dsn-color-neutral-bg-hover); /** Achtergrond in hover state */
+  --dsn-color-negative-bg-active: var(--dsn-color-neutral-bg-active); /** Achtergrond in active state */
+  --dsn-color-negative-border-subtle: var(--dsn-color-neutral-border-subtle); /** Subtiele rand */
+  --dsn-color-negative-border-default: var(--dsn-color-neutral-border-default); /** Standaard rand */
+  --dsn-color-negative-border-hover: var(--dsn-color-neutral-border-hover); /** Rand in hover state */
+  --dsn-color-negative-border-active: var(--dsn-color-neutral-border-active); /** Rand in active state */
+  --dsn-color-negative-color-default: var(--dsn-color-neutral-color-default); /** Standaard tekstkleur */
+  --dsn-color-negative-color-hover: var(--dsn-color-neutral-color-hover); /** Tekst in hover state */
+  --dsn-color-negative-color-active: var(--dsn-color-neutral-color-active); /** Tekst in active state */
+  --dsn-color-negative-color-subtle: var(--dsn-color-neutral-color-subtle); /** Subtiele tekstkleur */
+  --dsn-color-negative-color-document: var(--dsn-color-neutral-color-document); /** Documenttekstkleur */
+  --dsn-color-warning-bg-document: var(--dsn-color-neutral-bg-document); /** Documentachtergrond */
   --dsn-color-warning-bg-elevated: var(--dsn-color-neutral-bg-elevated); /** Elevated background */
-  --dsn-color-warning-bg-subtle: var(--dsn-color-neutral-bg-subtle); /** Subtle background */
-  --dsn-color-warning-bg-default: var(--dsn-color-neutral-bg-default); /** Default background */
-  --dsn-color-warning-bg-hover: var(--dsn-color-neutral-bg-hover); /** Hover state background */
-  --dsn-color-warning-bg-active: var(--dsn-color-neutral-bg-active); /** Active state background */
-  --dsn-color-warning-border-subtle: var(--dsn-color-neutral-border-subtle); /** Subtle border */
-  --dsn-color-warning-border-default: var(--dsn-color-neutral-border-default); /** Default border */
-  --dsn-color-warning-border-hover: var(--dsn-color-neutral-border-hover); /** Hover state border */
-  --dsn-color-warning-border-active: var(--dsn-color-neutral-border-active); /** Active state border */
-  --dsn-color-warning-color-default: var(--dsn-color-neutral-color-default); /** Default text color */
-  --dsn-color-warning-color-hover: var(--dsn-color-neutral-color-hover); /** Hover state text */
-  --dsn-color-warning-color-active: var(--dsn-color-neutral-color-active); /** Active state text */
-  --dsn-color-warning-color-subtle: var(--dsn-color-neutral-color-subtle); /** Subtle text color */
-  --dsn-color-warning-color-document: var(--dsn-color-neutral-color-document); /** Document text color */
-  --dsn-color-info-bg-document: var(--dsn-color-neutral-bg-document); /** Document background */
+  --dsn-color-warning-bg-subtle: var(--dsn-color-neutral-bg-subtle); /** Subtiele achtergrond */
+  --dsn-color-warning-bg-default: var(--dsn-color-neutral-bg-default); /** Standaard achtergrond */
+  --dsn-color-warning-bg-hover: var(--dsn-color-neutral-bg-hover); /** Achtergrond in hover state */
+  --dsn-color-warning-bg-active: var(--dsn-color-neutral-bg-active); /** Achtergrond in active state */
+  --dsn-color-warning-border-subtle: var(--dsn-color-neutral-border-subtle); /** Subtiele rand */
+  --dsn-color-warning-border-default: var(--dsn-color-neutral-border-default); /** Standaard rand */
+  --dsn-color-warning-border-hover: var(--dsn-color-neutral-border-hover); /** Rand in hover state */
+  --dsn-color-warning-border-active: var(--dsn-color-neutral-border-active); /** Rand in active state */
+  --dsn-color-warning-color-default: var(--dsn-color-neutral-color-default); /** Standaard tekstkleur */
+  --dsn-color-warning-color-hover: var(--dsn-color-neutral-color-hover); /** Tekst in hover state */
+  --dsn-color-warning-color-active: var(--dsn-color-neutral-color-active); /** Tekst in active state */
+  --dsn-color-warning-color-subtle: var(--dsn-color-neutral-color-subtle); /** Subtiele tekstkleur */
+  --dsn-color-warning-color-document: var(--dsn-color-neutral-color-document); /** Documenttekstkleur */
+  --dsn-color-info-bg-document: var(--dsn-color-neutral-bg-document); /** Documentachtergrond */
   --dsn-color-info-bg-elevated: var(--dsn-color-neutral-bg-elevated); /** Elevated background */
-  --dsn-color-info-bg-subtle: var(--dsn-color-neutral-bg-subtle); /** Subtle background */
-  --dsn-color-info-bg-default: var(--dsn-color-neutral-bg-default); /** Default background */
-  --dsn-color-info-bg-hover: var(--dsn-color-neutral-bg-hover); /** Hover state background */
-  --dsn-color-info-bg-active: var(--dsn-color-neutral-bg-active); /** Active state background */
-  --dsn-color-info-border-subtle: var(--dsn-color-neutral-border-subtle); /** Subtle border */
-  --dsn-color-info-border-default: var(--dsn-color-neutral-border-default); /** Default border */
-  --dsn-color-info-border-hover: var(--dsn-color-neutral-border-hover); /** Hover state border */
-  --dsn-color-info-border-active: var(--dsn-color-neutral-border-active); /** Active state border */
-  --dsn-color-info-color-default: var(--dsn-color-neutral-color-default); /** Default text color */
-  --dsn-color-info-color-hover: var(--dsn-color-neutral-color-hover); /** Hover state text */
-  --dsn-color-info-color-active: var(--dsn-color-neutral-color-active); /** Active state text */
-  --dsn-color-info-color-subtle: var(--dsn-color-neutral-color-subtle); /** Subtle text color */
-  --dsn-color-info-color-document: var(--dsn-color-neutral-color-document); /** Document text color */
-  --dsn-color-neutral-inverse-bg-document: var(--dsn-color-neutral-color-document); /** Inverse document background */
-  --dsn-color-neutral-inverse-bg-elevated: var(--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: var(--dsn-color-neutral-color-active); /** Inverse subtle background */
-  --dsn-color-neutral-inverse-bg-default: var(--dsn-color-neutral-color-hover); /** Inverse default background */
-  --dsn-color-neutral-inverse-bg-hover: var(--dsn-color-neutral-color-default); /** Inverse hover background */
-  --dsn-color-neutral-inverse-bg-active: var(--dsn-color-neutral-color-subtle); /** Inverse active background */
-  --dsn-color-neutral-inverse-border-subtle: var(--dsn-color-neutral-border-active); /** Inverse subtle border */
-  --dsn-color-neutral-inverse-border-default: var(--dsn-color-neutral-border-hover); /** Inverse default border */
-  --dsn-color-neutral-inverse-border-hover: var(--dsn-color-neutral-border-default); /** Inverse hover border */
-  --dsn-color-neutral-inverse-border-active: var(--dsn-color-neutral-border-subtle); /** Inverse active border */
-  --dsn-color-neutral-inverse-color-default: var(--dsn-color-neutral-bg-active); /** Inverse default text */
-  --dsn-color-neutral-inverse-color-hover: var(--dsn-color-neutral-bg-hover); /** Inverse hover text */
-  --dsn-color-neutral-inverse-color-active: var(--dsn-color-neutral-bg-default); /** Inverse active text */
-  --dsn-color-neutral-inverse-color-subtle: var(--dsn-color-neutral-bg-subtle); /** Inverse subtle text */
-  --dsn-color-neutral-inverse-color-document: var(--dsn-color-neutral-bg-document); /** Inverse document text */
+  --dsn-color-info-bg-subtle: var(--dsn-color-neutral-bg-subtle); /** Subtiele achtergrond */
+  --dsn-color-info-bg-default: var(--dsn-color-neutral-bg-default); /** Standaard achtergrond */
+  --dsn-color-info-bg-hover: var(--dsn-color-neutral-bg-hover); /** Achtergrond in hover state */
+  --dsn-color-info-bg-active: var(--dsn-color-neutral-bg-active); /** Achtergrond in active state */
+  --dsn-color-info-border-subtle: var(--dsn-color-neutral-border-subtle); /** Subtiele rand */
+  --dsn-color-info-border-default: var(--dsn-color-neutral-border-default); /** Standaard rand */
+  --dsn-color-info-border-hover: var(--dsn-color-neutral-border-hover); /** Rand in hover state */
+  --dsn-color-info-border-active: var(--dsn-color-neutral-border-active); /** Rand in active state */
+  --dsn-color-info-color-default: var(--dsn-color-neutral-color-default); /** Standaard tekstkleur */
+  --dsn-color-info-color-hover: var(--dsn-color-neutral-color-hover); /** Tekst in hover state */
+  --dsn-color-info-color-active: var(--dsn-color-neutral-color-active); /** Tekst in active state */
+  --dsn-color-info-color-subtle: var(--dsn-color-neutral-color-subtle); /** Subtiele tekstkleur */
+  --dsn-color-info-color-document: var(--dsn-color-neutral-color-document); /** Documenttekstkleur */
+  --dsn-color-neutral-inverse-bg-document: var(--dsn-color-neutral-color-document); /** Inverse documentachtergrond */
+  --dsn-color-neutral-inverse-bg-elevated: var(--dsn-color-neutral-color-document); /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-neutral-inverse-bg-subtle: var(--dsn-color-neutral-color-active); /** Inverse subtiele achtergrond */
+  --dsn-color-neutral-inverse-bg-default: var(--dsn-color-neutral-color-hover); /** Inverse standaard achtergrond */
+  --dsn-color-neutral-inverse-bg-hover: var(--dsn-color-neutral-color-default); /** Inverse achtergrond in hover state */
+  --dsn-color-neutral-inverse-bg-active: var(--dsn-color-neutral-color-subtle); /** Inverse achtergrond in active state */
+  --dsn-color-neutral-inverse-border-subtle: var(--dsn-color-neutral-border-active); /** Inverse subtiele rand */
+  --dsn-color-neutral-inverse-border-default: var(--dsn-color-neutral-border-hover); /** Inverse standaard rand */
+  --dsn-color-neutral-inverse-border-hover: var(--dsn-color-neutral-border-default); /** Inverse rand in hover state */
+  --dsn-color-neutral-inverse-border-active: var(--dsn-color-neutral-border-subtle); /** Inverse rand in active state */
+  --dsn-color-neutral-inverse-color-default: var(--dsn-color-neutral-bg-active); /** Inverse standaard tekst */
+  --dsn-color-neutral-inverse-color-hover: var(--dsn-color-neutral-bg-hover); /** Inverse tekst in hover state */
+  --dsn-color-neutral-inverse-color-active: var(--dsn-color-neutral-bg-default); /** Inverse tekst in active state */
+  --dsn-color-neutral-inverse-color-subtle: var(--dsn-color-neutral-bg-subtle); /** Inverse subtiele tekst */
+  --dsn-color-neutral-inverse-color-document: var(--dsn-color-neutral-bg-document); /** Inverse documenttekst */
   --dsn-action-group-column-gap: var(--dsn-space-inline-lg); /** Horizontal gap between actions in horizontal direction */
   --dsn-action-group-row-gap: var(--dsn-space-row-lg); /** Vertical gap between wrapped rows in horizontal direction */
-  --dsn-alert-border-radius: var(--dsn-border-radius-square); /** Alert border radius (square by default; themes can override to add rounded corners) */
-  --dsn-alert-border-width: var(--dsn-border-width-medium); /** Alert border width (left border only) */
-  --dsn-alert-column-gap: var(--dsn-space-inline-md); /** Gap between icon and content */
-  --dsn-alert-padding-block: var(--dsn-space-block-xl); /** Vertical padding */
-  --dsn-alert-padding-inline: var(--dsn-space-inline-xl); /** Horizontal padding */
-  --dsn-alert-row-gap: var(--dsn-space-row-md); /** Gap between heading and body */
+  --dsn-alert-border-radius: var(--dsn-border-radius-square); /** Alert border-radius (standaard vierkant; thema's kunnen afgeronde hoeken toevoegen) */
+  --dsn-alert-border-width: var(--dsn-border-width-medium); /** Alert border-breedte (alleen linkerborder) */
+  --dsn-alert-column-gap: var(--dsn-space-inline-md); /** Ruimte tussen icoon en inhoud */
+  --dsn-alert-padding-block: var(--dsn-space-block-xl); /** Verticale padding */
+  --dsn-alert-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding */
+  --dsn-alert-row-gap: var(--dsn-space-row-md); /** Ruimte tussen koptekst en inhoud */
   --dsn-backdrop-z-index: var(--dsn-z-index-400); /** Z-index schaal: backdrop (400) → modal-dialog/drawer (500) → skip-link (600) */
-  --dsn-breadcrumb-navigation-column-gap: var(--dsn-space-column-md); /** Gap between breadcrumb items */
-  --dsn-breadcrumb-navigation-font-size: var(--dsn-text-font-size-sm); /** Breadcrumb font size — sm (consistent met Link size small) */
-  --dsn-breadcrumb-navigation-font-weight: var(--dsn-text-font-weight-default); /** Breadcrumb font weight */
-  --dsn-breadcrumb-navigation-line-height: var(--dsn-text-line-height-sm); /** Breadcrumb line height — sm (consistent met Link size small) */
-  --dsn-breadcrumb-navigation-current-color: var(--dsn-color-neutral-color-subtle); /** Current page item color */
-  --dsn-breadcrumb-navigation-item-min-block-size: var(--dsn-pointer-target-min-block-size); /** Minimum touch/click target height */
-  --dsn-breadcrumb-navigation-item-padding-block: var(--dsn-space-block-sm); /** Vertical padding to reach min-block-size */
-  --dsn-breadcrumb-navigation-item-padding-inline: var(--dsn-space-none); /** No horizontal padding on items */
-  --dsn-breadcrumb-navigation-link-column-gap: var(--dsn-space-text-xs); /** Gap between icon and link text */
-  --dsn-breadcrumb-navigation-separator-color: var(--dsn-color-neutral-color-subtle); /** Separator icon color */
-  --dsn-button-border-radius: var(--dsn-border-radius-md); /** Button border radius */
-  --dsn-button-border-width: var(--dsn-border-width-thin); /** Button border width */
-  --dsn-button-font-family: var(--dsn-text-font-family-default); /** Button font family */
-  --dsn-button-font-weight: var(--dsn-text-font-weight-bold); /** Button font weight */
-  --dsn-button-line-height: var(--dsn-text-line-height-md); /** Button line height */
-  --dsn-button-min-block-size: var(--dsn-pointer-target-min-block-size); /** Button minimum block size (WCAG 2.5.5 touch target) */
-  --dsn-button-min-inline-size: var(--dsn-pointer-target-min-inline-size); /** Button minimum inline size (WCAG 2.5.5 touch target) */
-  --dsn-button-default-background-color: var(--dsn-color-transparent); /** Default button background */
-  --dsn-button-default-negative-background-color: var(--dsn-color-transparent); /** Default negative button background */
-  --dsn-button-default-positive-background-color: var(--dsn-color-transparent); /** Default positive button background */
-  --dsn-button-strong-border-color: var(--dsn-color-transparent); /** Strong button border */
-  --dsn-button-strong-active-border-color: var(--dsn-color-transparent); /** Strong button active border */
-  --dsn-button-strong-hover-border-color: var(--dsn-color-transparent); /** Strong button hover border */
-  --dsn-button-strong-negative-border-color: var(--dsn-color-transparent); /** Strong negative button border */
-  --dsn-button-strong-negative-active-border-color: var(--dsn-color-transparent); /** Strong negative button active border */
-  --dsn-button-strong-negative-hover-border-color: var(--dsn-color-transparent); /** Strong negative button hover border */
-  --dsn-button-strong-positive-border-color: var(--dsn-color-transparent); /** Strong positive button border */
-  --dsn-button-strong-positive-active-border-color: var(--dsn-color-transparent); /** Strong positive button active border */
-  --dsn-button-strong-positive-hover-border-color: var(--dsn-color-transparent); /** Strong positive button hover border */
-  --dsn-button-subtle-background-color: var(--dsn-color-transparent); /** Subtle button background */
-  --dsn-button-subtle-border-color: var(--dsn-color-transparent); /** Subtle button border */
-  --dsn-button-subtle-active-border-color: var(--dsn-color-transparent); /** Subtle button active border */
-  --dsn-button-subtle-hover-border-color: var(--dsn-color-transparent); /** Subtle button hover border */
-  --dsn-button-subtle-negative-background-color: var(--dsn-color-transparent); /** Subtle negative button background */
-  --dsn-button-subtle-negative-border-color: var(--dsn-color-transparent); /** Subtle negative button border */
-  --dsn-button-subtle-negative-active-border-color: var(--dsn-color-transparent); /** Subtle negative button active border */
-  --dsn-button-subtle-negative-hover-border-color: var(--dsn-color-transparent); /** Subtle negative button hover border */
-  --dsn-button-subtle-positive-background-color: var(--dsn-color-transparent); /** Subtle positive button background */
-  --dsn-button-subtle-positive-border-color: var(--dsn-color-transparent); /** Subtle positive button border */
-  --dsn-button-subtle-positive-active-border-color: var(--dsn-color-transparent); /** Subtle positive button active border */
-  --dsn-button-subtle-positive-hover-border-color: var(--dsn-color-transparent); /** Subtle positive button hover border */
-  --dsn-button-disabled-background-color: var(--dsn-color-neutral-bg-subtle); /** Disabled button background — neutral scale, variant-independent */
-  --dsn-button-disabled-color: var(--dsn-color-neutral-color-subtle); /** Disabled button text/icon color — neutral scale, variant-independent */
-  --dsn-button-disabled-border-color: var(--dsn-color-neutral-border-subtle); /** Disabled button border color — neutral scale, variant-independent */
-  --dsn-button-size-default-font-size: var(--dsn-text-font-size-md); /** Default button font size */
-  --dsn-button-size-default-gap: var(--dsn-space-text-sm); /** Default button gap between icon and text */
-  --dsn-button-size-default-icon-only-padding: var(--dsn-space-block-md); /** Default button icon-only padding */
-  --dsn-button-size-default-padding-block: var(--dsn-space-block-md); /** Default button vertical padding */
-  --dsn-button-size-default-padding-inline: var(--dsn-space-inline-xl); /** Default button horizontal padding */
-  --dsn-button-size-large-font-size: var(--dsn-text-font-size-lg); /** Large button font size */
-  --dsn-button-size-large-gap: var(--dsn-space-text-md); /** Large button gap between icon and text */
-  --dsn-button-size-large-icon-only-padding: var(--dsn-space-block-lg); /** Large button icon-only padding */
-  --dsn-button-size-large-padding-block: var(--dsn-space-block-lg); /** Large button vertical padding */
-  --dsn-button-size-large-padding-inline: var(--dsn-space-inline-2xl); /** Large button horizontal padding */
-  --dsn-button-size-small-font-size: var(--dsn-text-font-size-sm); /** Small button font size */
-  --dsn-button-size-small-gap: var(--dsn-space-text-sm); /** Small button gap between icon and text */
-  --dsn-button-size-small-icon-only-padding: var(--dsn-space-block-sm); /** Small button icon-only padding */
-  --dsn-button-size-small-padding-block: var(--dsn-space-block-sm); /** Small button vertical padding */
-  --dsn-button-size-small-padding-inline: var(--dsn-space-inline-lg); /** Small button horizontal padding */
+  --dsn-breadcrumb-navigation-column-gap: var(--dsn-space-column-md); /** Ruimte tussen breadcrumb-items */
+  --dsn-breadcrumb-navigation-font-size: var(--dsn-text-font-size-sm); /** Breadcrumb font-size — sm (consistent met Link size small) */
+  --dsn-breadcrumb-navigation-font-weight: var(--dsn-text-font-weight-default); /** Breadcrumb font-gewicht */
+  --dsn-breadcrumb-navigation-line-height: var(--dsn-text-line-height-sm); /** Breadcrumb line-height — sm (consistent met Link size small) */
+  --dsn-breadcrumb-navigation-current-color: var(--dsn-color-neutral-color-subtle); /** Kleur van het huidige pagina-item */
+  --dsn-breadcrumb-navigation-item-min-block-size: var(--dsn-pointer-target-min-block-size); /** Minimale aanraak-/klikhoogte */
+  --dsn-breadcrumb-navigation-item-padding-block: var(--dsn-space-block-sm); /** Verticale padding om de min-block-size te bereiken */
+  --dsn-breadcrumb-navigation-item-padding-inline: var(--dsn-space-none); /** Geen horizontale padding op items */
+  --dsn-breadcrumb-navigation-link-column-gap: var(--dsn-space-text-xs); /** Ruimte tussen icoon en linktekst */
+  --dsn-breadcrumb-navigation-separator-color: var(--dsn-color-neutral-color-subtle); /** Kleur van het scheidingsicoon */
+  --dsn-breakout-section-border-block-width: var(--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: var(--dsn-border-radius-md); /** Button border-radius */
+  --dsn-button-border-width: var(--dsn-border-width-thin); /** Button border-breedte */
+  --dsn-button-font-family: var(--dsn-text-font-family-default); /** Button font-familie */
+  --dsn-button-font-weight: var(--dsn-text-font-weight-bold); /** Button font-gewicht */
+  --dsn-button-line-height: var(--dsn-text-line-height-md); /** Button line-height */
+  --dsn-button-min-block-size: var(--dsn-pointer-target-min-block-size); /** Minimale blokhoogte van de button (WCAG 2.5.5 aanraakdoel) */
+  --dsn-button-min-inline-size: var(--dsn-pointer-target-min-inline-size); /** Minimale inlinebreedte van de button (WCAG 2.5.5 aanraakdoel) */
+  --dsn-button-default-background-color: var(--dsn-color-transparent); /** Achtergrond van de default button */
+  --dsn-button-default-negative-background-color: var(--dsn-color-transparent); /** Achtergrond van de default negative button */
+  --dsn-button-default-positive-background-color: var(--dsn-color-transparent); /** Achtergrond van de default positive button */
+  --dsn-button-strong-border-color: var(--dsn-color-transparent); /** Border van de strong button */
+  --dsn-button-strong-active-border-color: var(--dsn-color-transparent); /** Border van de strong button op active */
+  --dsn-button-strong-hover-border-color: var(--dsn-color-transparent); /** Border van de strong button op hover */
+  --dsn-button-strong-negative-border-color: var(--dsn-color-transparent); /** Border van de strong negative button */
+  --dsn-button-strong-negative-active-border-color: var(--dsn-color-transparent); /** Border van de strong negative button op active */
+  --dsn-button-strong-negative-hover-border-color: var(--dsn-color-transparent); /** Border van de strong negative button op hover */
+  --dsn-button-strong-positive-border-color: var(--dsn-color-transparent); /** Border van de strong positive button */
+  --dsn-button-strong-positive-active-border-color: var(--dsn-color-transparent); /** Border van de strong positive button op active */
+  --dsn-button-strong-positive-hover-border-color: var(--dsn-color-transparent); /** Border van de strong positive button op hover */
+  --dsn-button-subtle-background-color: var(--dsn-color-transparent); /** Achtergrond van de subtle button */
+  --dsn-button-subtle-border-color: var(--dsn-color-transparent); /** Border van de subtle button */
+  --dsn-button-subtle-active-border-color: var(--dsn-color-transparent); /** Border van de subtle button op active */
+  --dsn-button-subtle-hover-border-color: var(--dsn-color-transparent); /** Border van de subtle button op hover */
+  --dsn-button-subtle-negative-background-color: var(--dsn-color-transparent); /** Achtergrond van de subtle negative button */
+  --dsn-button-subtle-negative-border-color: var(--dsn-color-transparent); /** Border van de subtle negative button */
+  --dsn-button-subtle-negative-active-border-color: var(--dsn-color-transparent); /** Border van de subtle negative button op active */
+  --dsn-button-subtle-negative-hover-border-color: var(--dsn-color-transparent); /** Border van de subtle negative button op hover */
+  --dsn-button-subtle-positive-background-color: var(--dsn-color-transparent); /** Achtergrond van de subtle positive button */
+  --dsn-button-subtle-positive-border-color: var(--dsn-color-transparent); /** Border van de subtle positive button */
+  --dsn-button-subtle-positive-active-border-color: var(--dsn-color-transparent); /** Border van de subtle positive button op active */
+  --dsn-button-subtle-positive-hover-border-color: var(--dsn-color-transparent); /** Border van de subtle positive button op hover */
+  --dsn-button-disabled-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrond van de disabled button — neutrale schaal, variant-onafhankelijk */
+  --dsn-button-disabled-color: var(--dsn-color-neutral-color-subtle); /** Tekst-/icoonkleur van de disabled button — neutrale schaal, variant-onafhankelijk */
+  --dsn-button-disabled-border-color: var(--dsn-color-neutral-border-subtle); /** Borderkleur van de disabled button — neutrale schaal, variant-onafhankelijk */
+  --dsn-button-size-default-font-size: var(--dsn-text-font-size-md); /** Font-size van de default button */
+  --dsn-button-size-default-gap: var(--dsn-space-text-sm); /** Ruimte tussen icoon en tekst van de default button */
+  --dsn-button-size-default-icon-only-padding: var(--dsn-space-block-md); /** Padding van de icon-only default button */
+  --dsn-button-size-default-padding-block: var(--dsn-space-block-md); /** Verticale padding van de default button */
+  --dsn-button-size-default-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de default button */
+  --dsn-button-size-large-font-size: var(--dsn-text-font-size-lg); /** Font-size van de large button */
+  --dsn-button-size-large-gap: var(--dsn-space-text-md); /** Ruimte tussen icoon en tekst van de large button */
+  --dsn-button-size-large-icon-only-padding: var(--dsn-space-block-lg); /** Padding van de icon-only large button */
+  --dsn-button-size-large-padding-block: var(--dsn-space-block-lg); /** Verticale padding van de large button */
+  --dsn-button-size-large-padding-inline: var(--dsn-space-inline-2xl); /** Horizontale padding van de large button */
+  --dsn-button-size-small-font-size: var(--dsn-text-font-size-sm); /** Font-size van de small button */
+  --dsn-button-size-small-gap: var(--dsn-space-text-sm); /** Ruimte tussen icoon en tekst van de small button */
+  --dsn-button-size-small-icon-only-padding: var(--dsn-space-block-sm); /** Padding van de icon-only small button */
+  --dsn-button-size-small-padding-block: var(--dsn-space-block-sm); /** Verticale padding van de small button */
+  --dsn-button-size-small-padding-inline: var(--dsn-space-inline-lg); /** Horizontale padding van de small button */
   --dsn-card-background-color: var(--dsn-color-neutral-bg-document); /** Card achtergrondkleur standaard — zelfde als paginaachtergrond */
   --dsn-card-background-color-hover: var(--dsn-color-neutral-bg-elevated); /** Card achtergrondkleur bij hover — bg-elevated benadrukt elevatie */
   --dsn-card-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de card (8px) */
@@ -469,13 +473,13 @@
   --dsn-card-heading-font-size: var(--dsn-text-font-size-lg); /** Tekstgrootte van de card heading (20–24px fluid) */
   --dsn-card-heading-line-height: var(--dsn-text-line-height-lg); /** Regelafstand van de card heading */
   --dsn-card-group-gap: var(--dsn-space-inline-xl); /** Ruimte tussen cards in een CardGroup (16px) */
-  --dsn-checkbox-group-border-width: var(--dsn-border-width-none); /** No border by default for fieldset */
-  --dsn-checkbox-group-gap: var(--dsn-space-block-sm); /** Space between checkbox options in the group */
-  --dsn-checkbox-group-margin: var(--dsn-space-none); /** No margin by default for fieldset */
-  --dsn-checkbox-group-padding: var(--dsn-space-none); /** No padding by default for fieldset */
+  --dsn-checkbox-group-border-width: var(--dsn-border-width-none); /** Standaard geen border op de fieldset */
+  --dsn-checkbox-group-gap: var(--dsn-space-block-sm); /** Ruimte tussen de checkbox-opties in de groep */
+  --dsn-checkbox-group-margin: var(--dsn-space-none); /** Standaard geen margin op de fieldset */
+  --dsn-checkbox-group-padding: var(--dsn-space-none); /** Standaard geen padding op de fieldset */
   --dsn-checkbox-option-gap: var(--dsn-space-text-md); /** Gap between checkbox and label */
   --dsn-checkbox-option-padding-block: var(--dsn-space-block-md); /** Vertical padding for touch target accessibility (WCAG 2.5.5) */
-  --dsn-checkbox-border-radius: var(--dsn-border-radius-square); /** Square corners for checkbox */
+  --dsn-checkbox-border-radius: var(--dsn-border-radius-square); /** Vierkante hoeken voor de checkbox */
   --dsn-checkbox-border-width: var(--dsn-border-width-thin);
   --dsn-checkbox-active-border-width: var(--dsn-border-width-medium);
   --dsn-checkbox-checked-border-width: var(--dsn-border-width-thin);
@@ -501,13 +505,13 @@
   --dsn-date-input-group-label-gap: var(--dsn-space-text-sm); /** Gap between each field label and its input */
   --dsn-date-input-button-inset-inline-end: var(--dsn-space-inline-sm); /** Distance from the inline-end border to the calendar button (4px) */
   --dsn-date-input-icon-gap: var(--dsn-space-text-md); /** Gap between calendar button and input text */
-  --dsn-details-row-gap: var(--dsn-space-row-md); /** Vertical gap between summary and content */
-  --dsn-details-summary-gap: var(--dsn-space-text-sm); /** Gap between chevron icon and label text */
-  --dsn-details-content-border-color: var(--dsn-color-neutral-border-subtle); /** Left border color for visual grouping */
-  --dsn-details-content-border-inline-start-width: var(--dsn-border-width-medium); /** Left border width */
-  --dsn-details-content-padding-inline-start: var(--dsn-space-inline-xl); /** Left padding — aligns content with label text */
-  --dsn-details-content-padding-inline-end: var(--dsn-space-inline-xl); /** Right padding */
-  --dsn-details-content-padding-block: var(--dsn-space-block-xl); /** Top and bottom padding */
+  --dsn-details-row-gap: var(--dsn-space-row-md); /** Verticale ruimte tussen summary en inhoud */
+  --dsn-details-summary-gap: var(--dsn-space-text-sm); /** Ruimte tussen het chevron-icoon en de labeltekst */
+  --dsn-details-content-border-color: var(--dsn-color-neutral-border-subtle); /** Kleur van de linkerborder voor visuele groepering */
+  --dsn-details-content-border-inline-start-width: var(--dsn-border-width-medium); /** Breedte van de linkerborder */
+  --dsn-details-content-padding-inline-start: var(--dsn-space-inline-xl); /** Linker padding — lijnt de inhoud uit met de labeltekst */
+  --dsn-details-content-padding-inline-end: var(--dsn-space-inline-xl); /** Rechter padding */
+  --dsn-details-content-padding-block: var(--dsn-space-block-xl); /** Boven- en onderpadding */
   --dsn-dot-badge-pulse-easing: var(--dsn-transition-easing-default); /** Easing van de pulse-animatie */
   --dsn-drawer-z-index: var(--dsn-z-index-500); /** Positionering boven de backdrop (400) en onder de skip-link (600) */
   --dsn-drawer-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van het zijpaneel — bg-elevated benadrukt elevatie boven de pagina */
@@ -526,9 +530,9 @@
   --dsn-drawer-footer-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de footer (16px) */
   --dsn-drawer-footer-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de footer (16px) */
   --dsn-drawer-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de footer (16px) */
-  --dsn-file-input-column-gap: var(--dsn-space-text-lg); /** Gap between file-selector-button and filename text */
-  --dsn-file-input-min-block-size: var(--dsn-pointer-target-min-block-size); /** File input minimum height (WCAG touch target) */
-  --dsn-file-input-min-inline-size: var(--dsn-pointer-target-min-inline-size); /** File input minimum width (WCAG touch target) */
+  --dsn-file-input-column-gap: var(--dsn-space-text-lg); /** Ruimte tussen de file-selector-button en de bestandsnaamtekst */
+  --dsn-file-input-min-block-size: var(--dsn-pointer-target-min-block-size); /** Minimale hoogte van het bestandsinvoerveld (WCAG aanraakdoel) */
+  --dsn-file-input-min-inline-size: var(--dsn-pointer-target-min-inline-size); /** Minimale breedte van het bestandsinvoerveld (WCAG aanraakdoel) */
   --dsn-file-background-color: var(--dsn-color-neutral-bg-document); /** Achtergrondkleur van het file component */
   --dsn-file-background-color-hover: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur bij hover in de interactieve variant — zelfde als Card */
   --dsn-file-background-color-active: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur bij active — zelfde als hover; geen box-shadow wijziging */
@@ -549,60 +553,60 @@
   --dsn-file-media-border-radius: var(--dsn-border-radius-sm);
   --dsn-file-media-background-color: var(--dsn-color-neutral-bg-default);
   --dsn-file-media-icon-color: var(--dsn-color-neutral-color-subtle);
-  --dsn-form-field-description-color: var(--dsn-color-neutral-color-subtle); /** Form field description text color */
-  --dsn-form-field-description-font-family: var(--dsn-text-font-family-default); /** Form field description font family */
-  --dsn-form-field-description-font-size: var(--dsn-text-font-size-md); /** Form field description font size */
-  --dsn-form-field-description-font-weight: var(--dsn-text-font-weight-default); /** Form field description font weight */
-  --dsn-form-field-description-line-height: var(--dsn-text-line-height-md); /** Form field description line height */
-  --dsn-form-field-description-margin-block-end: var(--dsn-space-block-md); /** Space below description before form control */
-  --dsn-form-field-error-message-font-family: var(--dsn-text-font-family-default); /** Form field error message font family */
-  --dsn-form-field-error-message-font-size: var(--dsn-text-font-size-md); /** Form field error message font size */
-  --dsn-form-field-error-message-font-weight: var(--dsn-text-font-weight-default); /** Form field error message font weight */
-  --dsn-form-field-error-message-gap: var(--dsn-space-text-sm); /** Space between icon and error message text */
-  --dsn-form-field-error-message-line-height: var(--dsn-text-line-height-md); /** Form field error message line height */
-  --dsn-form-field-error-message-margin-block-end: var(--dsn-space-block-md); /** Space below error message before form control */
-  --dsn-form-field-label-suffix-color: var(--dsn-color-neutral-color-document); /** Form field label suffix text color */
-  --dsn-form-field-label-suffix-font-family: var(--dsn-text-font-family-default); /** Form field label suffix font family */
-  --dsn-form-field-label-suffix-font-size: var(--dsn-text-font-size-md); /** Form field label suffix font size */
-  --dsn-form-field-label-suffix-font-weight: var(--dsn-text-font-weight-default); /** Form field label suffix font weight */
-  --dsn-form-field-label-suffix-line-height: var(--dsn-text-line-height-md); /** Form field label suffix line height */
-  --dsn-form-field-label-suffix-margin-inline-start: var(--dsn-space-text-sm); /** Space between label text and suffix text */
-  --dsn-form-field-label-color: var(--dsn-color-neutral-color-document); /** Form field label text color */
-  --dsn-form-field-label-font-family: var(--dsn-text-font-family-default); /** Form field label font family */
-  --dsn-form-field-label-font-size: var(--dsn-text-font-size-md); /** Form field label font size */
-  --dsn-form-field-label-font-weight: var(--dsn-text-font-weight-bold); /** Form field label font weight */
-  --dsn-form-field-label-line-height: var(--dsn-text-line-height-md); /** Form field label line height */
-  --dsn-form-field-label-margin-block-end: var(--dsn-space-block-md); /** Space below label before form control (when no description follows) */
-  --dsn-form-field-label-margin-block-end-with-description: var(--dsn-space-block-sm); /** Space below label when description follows */
-  --dsn-form-field-status-color: var(--dsn-color-neutral-color-subtle); /** Form field status text color (subtle for non-critical info) */
-  --dsn-form-field-status-font-family: var(--dsn-text-font-family-default); /** Form field status font family */
-  --dsn-form-field-status-font-size: var(--dsn-text-font-size-md); /** Form field status font size */
-  --dsn-form-field-status-font-weight: var(--dsn-text-font-weight-default); /** Form field status font weight */
-  --dsn-form-field-status-gap: var(--dsn-space-text-sm); /** Gap between icon and text (positive and warning variants) */
-  --dsn-form-field-status-line-height: var(--dsn-text-line-height-md); /** Form field status line height */
-  --dsn-form-field-status-margin-block-start: var(--dsn-space-block-md); /** Space above status message after form control */
-  --dsn-form-field-margin-block-end: var(--dsn-space-none); /** Bottom margin of form field container */
-  --dsn-form-field-margin-block-start: var(--dsn-space-none); /** Top margin of form field container */
-  --dsn-form-field-invalid-border-inline-start-width: var(--dsn-border-width-medium); /** Left border width for invalid form fields */
-  --dsn-form-field-invalid-padding-inline-start: var(--dsn-space-inline-xl); /** Left padding for invalid form fields (to accommodate border) */
+  --dsn-form-field-description-color: var(--dsn-color-neutral-color-subtle); /** Tekstkleur van de formulierveldbeschrijving */
+  --dsn-form-field-description-font-family: var(--dsn-text-font-family-default); /** Font-familie van de formulierveldbeschrijving */
+  --dsn-form-field-description-font-size: var(--dsn-text-font-size-md); /** Font-size van de formulierveldbeschrijving */
+  --dsn-form-field-description-font-weight: var(--dsn-text-font-weight-default); /** Font-gewicht van de formulierveldbeschrijving */
+  --dsn-form-field-description-line-height: var(--dsn-text-line-height-md); /** Line-height van de formulierveldbeschrijving */
+  --dsn-form-field-description-margin-block-end: var(--dsn-space-block-md); /** Ruimte onder de beschrijving voor het formulierbesturingselement */
+  --dsn-form-field-error-message-font-family: var(--dsn-text-font-family-default); /** Font-familie van de foutmelding */
+  --dsn-form-field-error-message-font-size: var(--dsn-text-font-size-md); /** Font-size van de foutmelding */
+  --dsn-form-field-error-message-font-weight: var(--dsn-text-font-weight-default); /** Font-gewicht van de foutmelding */
+  --dsn-form-field-error-message-gap: var(--dsn-space-text-sm); /** Ruimte tussen icoon en foutmeldingstekst */
+  --dsn-form-field-error-message-line-height: var(--dsn-text-line-height-md); /** Line-height van de foutmelding */
+  --dsn-form-field-error-message-margin-block-end: var(--dsn-space-block-md); /** Ruimte onder de foutmelding voor het formulierbesturingselement */
+  --dsn-form-field-label-suffix-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van het labelachtervoegsel */
+  --dsn-form-field-label-suffix-font-family: var(--dsn-text-font-family-default); /** Font-familie van het labelachtervoegsel */
+  --dsn-form-field-label-suffix-font-size: var(--dsn-text-font-size-md); /** Font-size van het labelachtervoegsel */
+  --dsn-form-field-label-suffix-font-weight: var(--dsn-text-font-weight-default); /** Font-gewicht van het labelachtervoegsel */
+  --dsn-form-field-label-suffix-line-height: var(--dsn-text-line-height-md); /** Line-height van het labelachtervoegsel */
+  --dsn-form-field-label-suffix-margin-inline-start: var(--dsn-space-text-sm); /** Ruimte tussen de labeltekst en het achtervoegsel */
+  --dsn-form-field-label-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van het formulierveldlabel */
+  --dsn-form-field-label-font-family: var(--dsn-text-font-family-default); /** Font-familie van het formulierveldlabel */
+  --dsn-form-field-label-font-size: var(--dsn-text-font-size-md); /** Font-size van het formulierveldlabel */
+  --dsn-form-field-label-font-weight: var(--dsn-text-font-weight-bold); /** Font-gewicht van het formulierveldlabel */
+  --dsn-form-field-label-line-height: var(--dsn-text-line-height-md); /** Line-height van het formulierveldlabel */
+  --dsn-form-field-label-margin-block-end: var(--dsn-space-block-md); /** Ruimte onder het label voor het formulierbesturingselement (wanneer geen beschrijving volgt) */
+  --dsn-form-field-label-margin-block-end-with-description: var(--dsn-space-block-sm); /** Ruimte onder het label wanneer een beschrijving volgt */
+  --dsn-form-field-status-color: var(--dsn-color-neutral-color-subtle); /** Tekstkleur van de veldstatus (subtiel voor niet-kritieke informatie) */
+  --dsn-form-field-status-font-family: var(--dsn-text-font-family-default); /** Font-familie van de veldstatus */
+  --dsn-form-field-status-font-size: var(--dsn-text-font-size-md); /** Font-size van de veldstatus */
+  --dsn-form-field-status-font-weight: var(--dsn-text-font-weight-default); /** Font-gewicht van de veldstatus */
+  --dsn-form-field-status-gap: var(--dsn-space-text-sm); /** Ruimte tussen icoon en tekst (positive en warning varianten) */
+  --dsn-form-field-status-line-height: var(--dsn-text-line-height-md); /** Line-height van de veldstatus */
+  --dsn-form-field-status-margin-block-start: var(--dsn-space-block-md); /** Ruimte boven het statusbericht na het formulierbesturingselement */
+  --dsn-form-field-margin-block-end: var(--dsn-space-none); /** Onderste margin van de formulierveldcontainer */
+  --dsn-form-field-margin-block-start: var(--dsn-space-none); /** Bovenste margin van de formulierveldcontainer */
+  --dsn-form-field-invalid-border-inline-start-width: var(--dsn-border-width-medium); /** Breedte van de linkerborder voor ongeldige formuliervelden */
+  --dsn-form-field-invalid-padding-inline-start: var(--dsn-space-inline-xl); /** Linker padding voor ongeldige formuliervelden (om de border op te vangen) */
   --dsn-grid-gutter: var(--dsn-space-column-xl); /** Horizontal gap between grid columns (overridden to column.md in information-dense) */
   --dsn-grid-row-gap: var(--dsn-space-column-xl); /** Vertical gap between grid rows (overridden to column.md in information-dense) */
-  --dsn-grid-margin: var(--dsn-space-column-3xl); /** Outer padding on both sides of the grid container */
   --dsn-hero-padding-block: var(--dsn-space-block-4xl); /** Verticale padding van de Hero-inhoud */
   --dsn-hero-padding-inline: var(--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: var(--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: var(--dsn-border-radius-md); /** Afgeronde hoeken van de afbeelding */
   --dsn-image-caption-color: var(--dsn-color-neutral-color-subtle); /** Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst */
   --dsn-image-caption-font-size: var(--dsn-text-font-size-sm); /** Iets kleiner dan bodytekst om hiërarchie te markeren */
   --dsn-image-caption-line-height: var(--dsn-text-line-height-sm); /** Compacte regelafstand passend bij kleine tekst — consistent met font-size.sm */
   --dsn-image-caption-margin-block-start: var(--dsn-space-row-sm); /** Kleine ademruimte tussen afbeelding en bijschrift */
-  --dsn-link-gap: var(--dsn-space-text-sm); /** Link gap between icon and text */
-  --dsn-link-disabled-color: var(--dsn-color-neutral-color-subtle); /** Link disabled text color */
-  --dsn-link-size-default-font-size: var(--dsn-text-font-size-md); /** Default link font size */
-  --dsn-link-size-default-gap: var(--dsn-space-text-sm); /** Default link gap between icon and text */
-  --dsn-link-size-large-font-size: var(--dsn-text-font-size-lg); /** Large link font size */
-  --dsn-link-size-large-gap: var(--dsn-space-text-md); /** Large link gap between icon and text */
-  --dsn-link-size-small-font-size: var(--dsn-text-font-size-sm); /** Small link font size */
-  --dsn-link-size-small-gap: var(--dsn-space-text-sm); /** Small link gap between icon and text */
+  --dsn-link-gap: var(--dsn-space-text-sm); /** Ruimte tussen icoon en tekst van de link */
+  --dsn-link-disabled-color: var(--dsn-color-neutral-color-subtle); /** Tekstkleur van de link op disabled */
+  --dsn-link-size-default-font-size: var(--dsn-text-font-size-md); /** Font-size van de default link */
+  --dsn-link-size-default-gap: var(--dsn-space-text-sm); /** Ruimte tussen icoon en tekst van de default link */
+  --dsn-link-size-large-font-size: var(--dsn-text-font-size-lg); /** Font-size van de large link */
+  --dsn-link-size-large-gap: var(--dsn-space-text-md); /** Ruimte tussen icoon en tekst van de large link */
+  --dsn-link-size-small-font-size: var(--dsn-text-font-size-sm); /** Font-size van de small link */
+  --dsn-link-size-small-gap: var(--dsn-space-text-sm); /** Ruimte tussen icoon en tekst van de small link */
   --dsn-logo-color-label: var(--dsn-color-neutral-bg-document); /** Binnenste rechthoek — zelfde kleur als de documentachtergrond, zodat de letters als doorkijkjes werken. */
   --dsn-menu-item-font-size: var(--dsn-text-font-size-md); /** Gedeeld: lettergrootte voor MenuLink en MenuButton */
   --dsn-menu-item-font-weight: var(--dsn-text-font-weight-default); /** Gedeeld: letterdikte — regular voor navigatie-items */
@@ -634,16 +638,16 @@
   --dsn-modal-dialog-footer-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de footer (16px) */
   --dsn-modal-dialog-footer-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de footer (16px) */
   --dsn-modal-dialog-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de footer (16px) */
-  --dsn-note-border-inline-start-width: var(--dsn-border-width-medium); /** Note left border width */
-  --dsn-note-column-gap: var(--dsn-space-inline-md); /** Gap between icon and content */
-  --dsn-note-padding-block: var(--dsn-space-block-xl); /** Vertical padding */
-  --dsn-note-padding-inline-end: var(--dsn-space-inline-xl); /** Horizontal padding inline-end */
-  --dsn-note-padding-inline-start: var(--dsn-space-inline-xl); /** Horizontal padding inline-start (after the border) */
-  --dsn-note-row-gap: var(--dsn-space-row-md); /** Gap between heading and body */
-  --dsn-note-neutral-background-color: var(--dsn-color-neutral-bg-default); /** Background color for neutral variant (default) */
-  --dsn-note-neutral-border-inline-start-color: var(--dsn-color-neutral-border-default); /** Left border color for neutral variant (default) */
-  --dsn-note-neutral-color: var(--dsn-color-neutral-color-document); /** Text color for neutral variant (default) */
-  --dsn-note-neutral-icon-color: var(--dsn-color-neutral-color-default); /** Icon color for neutral variant (default) */
+  --dsn-note-border-inline-start-width: var(--dsn-border-width-medium); /** Breedte van de linkerborder van de Note */
+  --dsn-note-column-gap: var(--dsn-space-inline-md); /** Ruimte tussen icoon en inhoud */
+  --dsn-note-padding-block: var(--dsn-space-block-xl); /** Verticale padding */
+  --dsn-note-padding-inline-end: var(--dsn-space-inline-xl); /** Horizontale padding aan het einde */
+  --dsn-note-padding-inline-start: var(--dsn-space-inline-xl); /** Horizontale padding aan het begin (na de border) */
+  --dsn-note-row-gap: var(--dsn-space-row-md); /** Ruimte tussen koptekst en inhoud */
+  --dsn-note-neutral-background-color: var(--dsn-color-neutral-bg-default); /** Achtergrondkleur voor neutral variant (standaard) */
+  --dsn-note-neutral-border-inline-start-color: var(--dsn-color-neutral-border-default); /** Kleur van de linkerborder voor neutral variant (standaard) */
+  --dsn-note-neutral-color: var(--dsn-color-neutral-color-document); /** Tekstkleur voor neutral variant (standaard) */
+  --dsn-note-neutral-icon-color: var(--dsn-color-neutral-color-default); /** Icoonkleur voor neutral variant (standaard) */
   --dsn-number-badge-font-size: var(--dsn-text-font-size-sm); /** NumberBadge font size — zelfde schaal als StatusBadge (kleinst beschikbare stap) */
   --dsn-number-badge-line-height: var(--dsn-text-line-height-sm); /** NumberBadge line height */
   --dsn-number-badge-font-weight: var(--dsn-text-font-weight-bold); /** NumberBadge font weight — bold voor leesbaarheid op kleine afmeting */
@@ -657,16 +661,16 @@
   --dsn-option-label-font-size: var(--dsn-text-font-size-md);
   --dsn-option-label-font-weight: var(--dsn-text-font-weight-default);
   --dsn-option-label-line-height: var(--dsn-text-line-height-md);
-  --dsn-ordered-list-color: var(--dsn-color-neutral-color-document); /** Ordered list text color */
-  --dsn-ordered-list-font-family: var(--dsn-text-font-family-default); /** Ordered list font family */
-  --dsn-ordered-list-font-size: var(--dsn-text-font-size-md); /** Ordered list font size */
-  --dsn-ordered-list-font-weight: var(--dsn-text-font-weight-default); /** Ordered list font weight */
-  --dsn-ordered-list-max-inline-size: var(--dsn-text-max-inline-size); /** Ordered list max width for readability */
-  --dsn-ordered-list-gap: var(--dsn-space-row-sm); /** Space between list items */
-  --dsn-ordered-list-line-height: var(--dsn-text-line-height-md); /** Ordered list line height */
-  --dsn-ordered-list-margin-block-end: var(--dsn-space-row-lg); /** Ordered list bottom margin */
-  --dsn-ordered-list-marker-color: var(--dsn-color-neutral-color-document); /** Number marker color */
-  --dsn-ordered-list-padding-inline-start: var(--dsn-space-inline-3xl); /** Ordered list left indentation */
+  --dsn-ordered-list-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van de geordende lijst */
+  --dsn-ordered-list-font-family: var(--dsn-text-font-family-default); /** Font-familie van de geordende lijst */
+  --dsn-ordered-list-font-size: var(--dsn-text-font-size-md); /** Font-size van de geordende lijst */
+  --dsn-ordered-list-font-weight: var(--dsn-text-font-weight-default); /** Font-gewicht van de geordende lijst */
+  --dsn-ordered-list-max-inline-size: var(--dsn-text-max-inline-size); /** Maximale breedte van de geordende lijst voor leesbaarheid */
+  --dsn-ordered-list-gap: var(--dsn-space-row-sm); /** Ruimte tussen lijstitems */
+  --dsn-ordered-list-line-height: var(--dsn-text-line-height-md); /** Line-height van de geordende lijst */
+  --dsn-ordered-list-margin-block-end: var(--dsn-space-row-lg); /** Onderste margin van de geordende lijst */
+  --dsn-ordered-list-marker-color: var(--dsn-color-neutral-color-document); /** Kleur van het nummermarkeerteken */
+  --dsn-ordered-list-padding-inline-start: var(--dsn-space-inline-3xl); /** Inspringing aan de linkerkant van de geordende lijst */
   --dsn-page-body-padding-inline: var(--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: var(--dsn-border-width-thick); /** Breedte van de bovenkantrand (4px) — spiegelt de PageHeader border-block-end voor visuele symmetrie */
   --dsn-page-footer-padding-block: var(--dsn-space-block-6xl); /** Verticale ademruimte van de footer-binnenbalk */
@@ -687,19 +691,19 @@
   --dsn-page-header-compact-background-color: var(--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: var(--dsn-space-block-xl); /** Verticale ademruimte in de compacte balk — zelfde schaal als masthead */
   --dsn-page-header-compact-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de compacte balk — zelfde schaal als masthead en navbar */
-  --dsn-paragraph-color: var(--dsn-color-neutral-color-document); /** Paragraph text color */
-  --dsn-paragraph-font-family: var(--dsn-text-font-family-default); /** Paragraph font family */
-  --dsn-paragraph-font-weight: var(--dsn-text-font-weight-default); /** Paragraph font weight */
-  --dsn-paragraph-max-inline-size: var(--dsn-text-max-inline-size); /** Paragraph max width for readability */
-  --dsn-paragraph-default-font-size: var(--dsn-text-font-size-md); /** Default paragraph font size */
-  --dsn-paragraph-default-line-height: var(--dsn-text-line-height-md); /** Default paragraph line height */
-  --dsn-paragraph-default-margin-block-end: var(--dsn-space-row-lg); /** Default paragraph bottom margin */
-  --dsn-paragraph-lead-font-size: var(--dsn-text-font-size-lg); /** Lead paragraph font size */
-  --dsn-paragraph-lead-line-height: var(--dsn-text-line-height-lg); /** Lead paragraph line height */
-  --dsn-paragraph-lead-margin-block-end: var(--dsn-space-row-xl); /** Lead paragraph bottom margin */
-  --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Small print paragraph font size */
-  --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Small print paragraph line height */
-  --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Small print paragraph bottom margin */
+  --dsn-paragraph-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van de alinea */
+  --dsn-paragraph-font-family: var(--dsn-text-font-family-default); /** Font-familie van de alinea */
+  --dsn-paragraph-font-weight: var(--dsn-text-font-weight-default); /** Font-gewicht van de alinea */
+  --dsn-paragraph-max-inline-size: var(--dsn-text-max-inline-size); /** Maximale breedte van de alinea voor leesbaarheid */
+  --dsn-paragraph-default-font-size: var(--dsn-text-font-size-md); /** Font-size van de standaard alinea */
+  --dsn-paragraph-default-line-height: var(--dsn-text-line-height-md); /** Line-height van de standaard alinea */
+  --dsn-paragraph-default-margin-block-end: var(--dsn-space-row-lg); /** Onderste margin van de standaard alinea */
+  --dsn-paragraph-lead-font-size: var(--dsn-text-font-size-lg); /** Font-size van de inleidende alinea */
+  --dsn-paragraph-lead-line-height: var(--dsn-text-line-height-lg); /** Line-height van de inleidende alinea */
+  --dsn-paragraph-lead-margin-block-end: var(--dsn-space-row-xl); /** Onderste margin van de inleidende alinea */
+  --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
+  --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
+  --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -718,14 +722,20 @@
   --dsn-popover-footer-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de footer (16px) */
   --dsn-popover-footer-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de footer (16px) */
   --dsn-popover-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de footer (16px) */
-  --dsn-progress-bar-color-track: var(--dsn-color-neutral-bg-default); /** Grijze achtergrondtrack */
+  --dsn-pre-heading-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van de pre-heading */
+  --dsn-pre-heading-font-family: var(--dsn-text-font-family-default); /** Font-familie van de pre-heading */
+  --dsn-pre-heading-font-size: var(--dsn-text-font-size-md); /** Font-size van de pre-heading (gelijk aan de bodytekst) */
+  --dsn-pre-heading-font-weight: var(--dsn-text-font-weight-bold); /** Font-gewicht van de pre-heading (vet om te onderscheiden van de kopregel) */
+  --dsn-pre-heading-line-height: var(--dsn-text-line-height-md); /** Line-height van de pre-heading */
+  --dsn-pre-heading-margin-block-end: var(--dsn-space-row-xs); /** Ruimte tussen de pre-heading en de koptekst */
+  --dsn-progress-bar-color-track: var(--dsn-color-neutral-bg-default); /** Achtergrondtrack */
   --dsn-progress-bar-border-radius: var(--dsn-border-radius-round); /** Volledig afgerond (pill-vorm) voor zowel track als fill */
   --dsn-progress-bar-gap-header: var(--dsn-space-block-xs); /** Ruimte tussen percentage-tekst en balk */
   --dsn-progress-bar-gap-footer: var(--dsn-space-block-xs); /** Ruimte tussen balk en beschrijving */
-  --dsn-radio-group-border-width: var(--dsn-border-width-none); /** No border by default for fieldset */
-  --dsn-radio-group-gap: var(--dsn-space-block-sm); /** Space between radio options in the group */
-  --dsn-radio-group-margin: var(--dsn-space-none); /** No margin by default for fieldset */
-  --dsn-radio-group-padding: var(--dsn-space-none); /** No padding by default for fieldset */
+  --dsn-radio-group-border-width: var(--dsn-border-width-none); /** Standaard geen border op de fieldset */
+  --dsn-radio-group-gap: var(--dsn-space-block-sm); /** Ruimte tussen de radio-opties in de groep */
+  --dsn-radio-group-margin: var(--dsn-space-none); /** Standaard geen margin op de fieldset */
+  --dsn-radio-group-padding: var(--dsn-space-none); /** Standaard geen padding op de fieldset */
   --dsn-radio-option-gap: var(--dsn-space-text-md); /** Gap between radio button and label */
   --dsn-radio-option-padding-block: var(--dsn-space-block-md); /** Vertical padding for touch target accessibility (WCAG 2.5.5) */
   --dsn-radio-border-width: var(--dsn-border-width-thin);
@@ -737,9 +747,9 @@
   --dsn-radio-checked-active-border-width: var(--dsn-border-width-medium);
   --dsn-radio-checked-focus-border-width: var(--dsn-border-width-medium);
   --dsn-radio-checked-hover-border-width: var(--dsn-border-width-medium);
-  --dsn-search-input-icon-gap: var(--dsn-space-text-md); /** Gap between search icon and input text */
-  --dsn-select-icon-gap: var(--dsn-space-text-md); /** Gap between chevron icon and select text */
-  --dsn-select-icon-inset-inline-end: var(--dsn-space-inline-md); /** Distance from the inline-end border to the chevron icon (8px) */
+  --dsn-search-input-icon-gap: var(--dsn-space-text-md); /** Ruimte tussen het zoekicoon en de invoertekst */
+  --dsn-select-icon-gap: var(--dsn-space-text-md); /** Ruimte tussen het chevron-icoon en de selectietekst */
+  --dsn-select-icon-inset-inline-end: var(--dsn-space-inline-md); /** Afstand van de inline-end border tot het chevron-icoon (8px) */
   --dsn-skip-link-z-index: var(--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: var(--dsn-space-block-md); /** Verticale padding van de skip-link */
   --dsn-skip-link-padding-inline: var(--dsn-space-inline-lg); /** Horizontale padding van de skip-link */
@@ -749,25 +759,32 @@
   --dsn-spinner-stroke-width: var(--dsn-border-width-medium); /** Lijndikte van de boog — identiek aan border.width.medium voor visuele consistentie */
   --dsn-spinner-track-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van de cirkelbaan */
   --dsn-spinner-gap-size: var(--dsn-space-inline-md); /** Ruimte tussen spinner en label */
-  --dsn-status-badge-border-color: var(--dsn-color-transparent); /** Status badge border color (transparent by default; visible in forced-colors / High Contrast mode) */
-  --dsn-status-badge-border-radius: var(--dsn-border-radius-sm); /** Status badge border radius */
-  --dsn-status-badge-border-width: var(--dsn-border-width-thin); /** Status badge border width */
-  --dsn-status-badge-font-size: var(--dsn-text-font-size-sm); /** Status badge font size */
-  --dsn-status-badge-gap: var(--dsn-space-text-sm); /** Gap between icon and label */
-  --dsn-status-badge-line-height: var(--dsn-text-line-height-sm); /** Status badge line height */
-  --dsn-status-badge-padding-block: var(--dsn-space-block-xs); /** Vertical padding */
-  --dsn-status-badge-padding-inline: var(--dsn-space-inline-md); /** Horizontal padding */
-  --dsn-status-badge-neutral-background-color: var(--dsn-color-neutral-bg-default); /** Background color for neutral variant */
-  --dsn-status-badge-neutral-color: var(--dsn-color-neutral-color-default); /** Text color for neutral variant */
-  --dsn-summary-list-row-border-block-end-color: var(--dsn-color-neutral-border-subtle); /** Color of the row separator border */
-  --dsn-summary-list-row-border-block-end-width: var(--dsn-border-width-thin); /** Width of the row separator border */
-  --dsn-summary-list-row-gap: var(--dsn-space-inline-lg); /** Horizontal gap between columns in the grid layout */
-  --dsn-summary-list-row-padding-block: var(--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: var(--dsn-color-neutral-color-document); /** Text color of the key cell */
-  --dsn-summary-list-key-font-weight: var(--dsn-text-font-weight-bold); /** Bold weight distinguishes the key from the value visually */
-  --dsn-summary-list-value-color: var(--dsn-color-neutral-color-document); /** Text color of the value cell */
-  --dsn-summary-list-actions-gap: var(--dsn-space-inline-3xl); /** Gap between multiple action links in a single row */
-  --dsn-summary-list-actions-margin-block-start-stacked: var(--dsn-space-block-md); /** Extra space above the actions cell in the stacked (mobile) layout */
+  --dsn-status-badge-border-color: var(--dsn-color-transparent); /** Borderkleur van de StatusBadge (standaard transparant; zichtbaar in forced-colors / High Contrast-modus) */
+  --dsn-status-badge-border-radius: var(--dsn-border-radius-sm); /** Border-radius van de StatusBadge */
+  --dsn-status-badge-border-width: var(--dsn-border-width-thin); /** Border-breedte van de StatusBadge */
+  --dsn-status-badge-font-size: var(--dsn-text-font-size-sm); /** Font-size van de StatusBadge */
+  --dsn-status-badge-gap: var(--dsn-space-text-sm); /** Ruimte tussen icoon en label */
+  --dsn-status-badge-line-height: var(--dsn-text-line-height-sm); /** Line-height van de StatusBadge */
+  --dsn-status-badge-padding-block: var(--dsn-space-block-xs); /** Verticale padding */
+  --dsn-status-badge-padding-inline: var(--dsn-space-inline-md); /** Horizontale padding */
+  --dsn-status-badge-neutral-background-color: var(--dsn-color-neutral-bg-default); /** Achtergrondkleur voor neutral variant */
+  --dsn-status-badge-neutral-color: var(--dsn-color-neutral-color-default); /** Tekstkleur voor neutral variant */
+  --dsn-summary-list-row-border-block-end-color: var(--dsn-color-neutral-border-subtle); /** Kleur van de rij-scheidingsborder */
+  --dsn-summary-list-row-border-block-end-width: var(--dsn-border-width-thin); /** Breedte van de rij-scheidingsborder */
+  --dsn-summary-list-row-gap: var(--dsn-space-inline-lg); /** Horizontale ruimte tussen kolommen in de gridindeling */
+  --dsn-summary-list-row-padding-block: var(--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: var(--dsn-color-neutral-color-document); /** Tekstkleur van de sleutelcel */
+  --dsn-summary-list-key-font-weight: var(--dsn-text-font-weight-bold); /** Vet gewicht onderscheidt de sleutel visueel van de waarde */
+  --dsn-summary-list-value-color: var(--dsn-color-neutral-color-document); /** Tekstkleur van de waardecel */
+  --dsn-summary-list-actions-gap: var(--dsn-space-inline-3xl); /** Ruimte tussen meerdere actielinks in één rij */
+  --dsn-summary-list-actions-margin-block-start-stacked: var(--dsn-space-block-md); /** Extra ruimte boven de actiescel in de gestapelde (mobiele) indeling */
+  --dsn-table-of-contents-border-inline-start-width: var(--dsn-border-width-medium); /** Breedte van de linkerborder (framed appearance) */
+  --dsn-table-of-contents-padding-block: var(--dsn-space-block-xl); /** Verticale padding (framed appearance) */
+  --dsn-table-of-contents-padding-inline-start: var(--dsn-space-inline-xl); /** Horizontale padding aan het begin, na de border (framed appearance) */
+  --dsn-table-of-contents-padding-inline-end: var(--dsn-space-inline-xl); /** Horizontale padding aan het einde (framed appearance) */
+  --dsn-table-of-contents-heading-gap: var(--dsn-space-row-xl); /** Ruimte tussen de heading en de lijst met ankerlinks */
+  --dsn-table-of-contents-plain-padding-block: var(--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: var(--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: var(--dsn-color-neutral-color-document);
   --dsn-table-caption-font-family: var(--dsn-heading-font-family);
   --dsn-table-caption-font-size: var(--dsn-text-font-size-xl);
@@ -789,21 +806,21 @@
   --dsn-table-footer-font-weight: var(--dsn-text-font-weight-bold);
   --dsn-table-wrapper-background-color: var(--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: var(--dsn-color-shadow-scroll); /** Kleur van de scroll-affordance schaduw aan de zijkanten van scrollbare tabellen */
-  --dsn-text-area-border-radius: var(--dsn-form-control-border-radius); /** Text area border radius */
-  --dsn-text-area-min-block-size: var(--dsn-pointer-target-min-block-size); /** Text area minimum height */
-  --dsn-text-area-min-inline-size: var(--dsn-pointer-target-min-inline-size); /** Text area minimum width */
-  --dsn-text-area-focus-box-shadow-spread: var(--dsn-border-width-medium); /** Text area focus box shadow spread (creates thicker border effect) */
-  --dsn-text-area-hover-box-shadow-spread: var(--dsn-border-width-medium); /** Text area hover box shadow spread (creates thicker border effect) */
-  --dsn-text-area-invalid-box-shadow-spread: var(--dsn-border-width-medium); /** Text area invalid box shadow spread (creates thicker border effect) */
-  --dsn-text-input-border-radius: var(--dsn-form-control-border-radius); /** Text input border radius */
-  --dsn-text-input-column-gap: var(--dsn-space-text-lg); /** Gap between text and icons (for future icon support) */
-  --dsn-text-input-min-block-size: var(--dsn-pointer-target-min-block-size); /** Text input minimum height (WCAG touch target) */
-  --dsn-text-input-min-inline-size: var(--dsn-pointer-target-min-inline-size); /** Text input minimum width (WCAG touch target) */
-  --dsn-text-input-focus-box-shadow-spread: var(--dsn-border-width-medium); /** Text input focus box shadow spread (creates thicker border effect) */
-  --dsn-text-input-hover-box-shadow-spread: var(--dsn-border-width-medium); /** Text input hover box shadow spread (creates thicker border effect) */
-  --dsn-text-input-invalid-box-shadow-spread: var(--dsn-border-width-medium); /** Text input invalid box shadow spread (creates thicker border effect) */
-  --dsn-time-input-button-inset-inline-end: var(--dsn-space-inline-sm); /** Distance from the inline-end border to the clock button (4px) */
-  --dsn-time-input-icon-gap: var(--dsn-space-text-md); /** Gap between clock button and input text */
+  --dsn-text-area-border-radius: var(--dsn-form-control-border-radius); /** Border-radius van het tekstveld */
+  --dsn-text-area-min-block-size: var(--dsn-pointer-target-min-block-size); /** Minimale hoogte van het tekstveld */
+  --dsn-text-area-min-inline-size: var(--dsn-pointer-target-min-inline-size); /** Minimale breedte van het tekstveld */
+  --dsn-text-area-focus-box-shadow-spread: var(--dsn-border-width-medium); /** Spreiding van de box-shadow op focus (creëert een dikkere border) */
+  --dsn-text-area-hover-box-shadow-spread: var(--dsn-border-width-medium); /** Spreiding van de box-shadow op hover (creëert een dikkere border) */
+  --dsn-text-area-invalid-box-shadow-spread: var(--dsn-border-width-medium); /** Spreiding van de box-shadow bij ongeldige invoer (creëert een dikkere border) */
+  --dsn-text-input-border-radius: var(--dsn-form-control-border-radius); /** Border-radius van het tekstinvoerveld */
+  --dsn-text-input-column-gap: var(--dsn-space-text-lg); /** Ruimte tussen tekst en iconen (voor toekomstige icoonondersteuning) */
+  --dsn-text-input-min-block-size: var(--dsn-pointer-target-min-block-size); /** Minimale hoogte van het tekstinvoerveld (WCAG aanraakdoel) */
+  --dsn-text-input-min-inline-size: var(--dsn-pointer-target-min-inline-size); /** Minimale breedte van het tekstinvoerveld (WCAG aanraakdoel) */
+  --dsn-text-input-focus-box-shadow-spread: var(--dsn-border-width-medium); /** Spreiding van de box-shadow op focus (creëert een dikkere border) */
+  --dsn-text-input-hover-box-shadow-spread: var(--dsn-border-width-medium); /** Spreiding van de box-shadow op hover (creëert een dikkere border) */
+  --dsn-text-input-invalid-box-shadow-spread: var(--dsn-border-width-medium); /** Spreiding van de box-shadow bij ongeldige invoer (creëert een dikkere border) */
+  --dsn-time-input-button-inset-inline-end: var(--dsn-space-inline-sm); /** Afstand van de inline-end border tot de klokknop (4px) */
+  --dsn-time-input-icon-gap: var(--dsn-space-text-md); /** Ruimte tussen de klokknop en de invoertekst */
   --dsn-unordered-list-color: var(--dsn-color-neutral-color-document); /** Unordered list text color */
   --dsn-unordered-list-font-family: var(--dsn-text-font-family-default); /** Unordered list font family */
   --dsn-unordered-list-font-size: var(--dsn-text-font-size-md); /** Unordered list font size */
@@ -813,94 +830,94 @@
   --dsn-unordered-list-line-height: var(--dsn-text-line-height-md); /** Unordered list line height */
   --dsn-unordered-list-margin-block-end: var(--dsn-space-row-lg); /** Unordered list bottom margin */
   --dsn-unordered-list-padding-inline-start: var(--dsn-space-inline-3xl); /** Unordered list left indentation */
-  --dsn-heading-level-1-color: var(--dsn-heading-color); /** Heading 1 text color */
-  --dsn-heading-level-2-color: var(--dsn-heading-color); /** Heading 2 text color */
-  --dsn-heading-level-3-color: var(--dsn-heading-color); /** Heading 3 text color */
-  --dsn-heading-level-4-color: var(--dsn-heading-color); /** Heading 4 text color */
-  --dsn-heading-level-5-color: var(--dsn-heading-color); /** Heading 5 text color */
-  --dsn-heading-level-6-color: var(--dsn-heading-color); /** Heading 6 text color */
-  --dsn-form-control-hover-color: var(--dsn-form-control-color); /** Form control hover text color */
-  --dsn-form-control-focus-background-color: var(--dsn-form-control-background-color); /** Form control focus background */
-  --dsn-form-control-focus-color: var(--dsn-form-control-color); /** Form control focus text color */
-  --dsn-form-control-active-color: var(--dsn-form-control-color); /** Form control active text color */
-  --dsn-form-control-invalid-background-color: var(--dsn-color-negative-bg-default); /** Form control invalid background */
-  --dsn-form-control-invalid-border-color: var(--dsn-color-negative-border-default); /** Form control invalid border */
-  --dsn-form-control-invalid-color: var(--dsn-color-negative-color-default); /** Form control invalid text color */
-  --dsn-color-accent-2-bg-document: var(--dsn-color-accent-1-bg-document); /** Document background */
+  --dsn-heading-level-1-color: var(--dsn-heading-color); /** Tekstkleur van Heading 1 */
+  --dsn-heading-level-2-color: var(--dsn-heading-color); /** Tekstkleur van Heading 2 */
+  --dsn-heading-level-3-color: var(--dsn-heading-color); /** Tekstkleur van Heading 3 */
+  --dsn-heading-level-4-color: var(--dsn-heading-color); /** Tekstkleur van Heading 4 */
+  --dsn-heading-level-5-color: var(--dsn-heading-color); /** Tekstkleur van Heading 5 */
+  --dsn-heading-level-6-color: var(--dsn-heading-color); /** Tekstkleur van Heading 6 */
+  --dsn-form-control-hover-color: var(--dsn-form-control-color); /** Tekstkleur van form controls in hover state */
+  --dsn-form-control-focus-background-color: var(--dsn-form-control-background-color); /** Achtergrondkleur van form controls in focus state */
+  --dsn-form-control-focus-color: var(--dsn-form-control-color); /** Tekstkleur van form controls in focus state */
+  --dsn-form-control-active-color: var(--dsn-form-control-color); /** Tekstkleur van form controls in active state */
+  --dsn-form-control-invalid-background-color: var(--dsn-color-negative-bg-default); /** Achtergrondkleur van form controls in invalid state */
+  --dsn-form-control-invalid-border-color: var(--dsn-color-negative-border-default); /** Randkleur van form controls in invalid state */
+  --dsn-form-control-invalid-color: var(--dsn-color-negative-color-default); /** Tekstkleur van form controls in invalid state */
+  --dsn-color-accent-2-bg-document: var(--dsn-color-accent-1-bg-document); /** Documentachtergrond */
   --dsn-color-accent-2-bg-elevated: var(--dsn-color-accent-1-bg-elevated); /** Elevated background */
-  --dsn-color-accent-2-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtle background */
-  --dsn-color-accent-2-bg-default: var(--dsn-color-accent-1-bg-default); /** Default background */
-  --dsn-color-accent-2-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Hover state background */
-  --dsn-color-accent-2-bg-active: var(--dsn-color-accent-1-bg-active); /** Active state background */
-  --dsn-color-accent-2-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtle border */
-  --dsn-color-accent-2-border-default: var(--dsn-color-accent-1-border-default); /** Default border */
-  --dsn-color-accent-2-border-hover: var(--dsn-color-accent-1-border-hover); /** Hover state border */
-  --dsn-color-accent-2-border-active: var(--dsn-color-accent-1-border-active); /** Active state border */
-  --dsn-color-accent-2-color-default: var(--dsn-color-accent-1-color-default); /** Default text color */
-  --dsn-color-accent-2-color-hover: var(--dsn-color-accent-1-color-hover); /** Hover state text */
-  --dsn-color-accent-2-color-active: var(--dsn-color-accent-1-color-active); /** Active state text */
-  --dsn-color-accent-2-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtle text color */
-  --dsn-color-accent-2-color-document: var(--dsn-color-accent-1-color-document); /** Document text color */
-  --dsn-color-accent-3-bg-document: var(--dsn-color-accent-1-bg-document); /** Document background */
+  --dsn-color-accent-2-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtiele achtergrond */
+  --dsn-color-accent-2-bg-default: var(--dsn-color-accent-1-bg-default); /** Standaard achtergrond */
+  --dsn-color-accent-2-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Achtergrond in hover state */
+  --dsn-color-accent-2-bg-active: var(--dsn-color-accent-1-bg-active); /** Achtergrond in active state */
+  --dsn-color-accent-2-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtiele rand */
+  --dsn-color-accent-2-border-default: var(--dsn-color-accent-1-border-default); /** Standaard rand */
+  --dsn-color-accent-2-border-hover: var(--dsn-color-accent-1-border-hover); /** Rand in hover state */
+  --dsn-color-accent-2-border-active: var(--dsn-color-accent-1-border-active); /** Rand in active state */
+  --dsn-color-accent-2-color-default: var(--dsn-color-accent-1-color-default); /** Standaard tekstkleur */
+  --dsn-color-accent-2-color-hover: var(--dsn-color-accent-1-color-hover); /** Tekst in hover state */
+  --dsn-color-accent-2-color-active: var(--dsn-color-accent-1-color-active); /** Tekst in active state */
+  --dsn-color-accent-2-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtiele tekstkleur */
+  --dsn-color-accent-2-color-document: var(--dsn-color-accent-1-color-document); /** Documenttekstkleur */
+  --dsn-color-accent-3-bg-document: var(--dsn-color-accent-1-bg-document); /** Documentachtergrond */
   --dsn-color-accent-3-bg-elevated: var(--dsn-color-accent-1-bg-elevated); /** Elevated background */
-  --dsn-color-accent-3-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtle background */
-  --dsn-color-accent-3-bg-default: var(--dsn-color-accent-1-bg-default); /** Default background */
-  --dsn-color-accent-3-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Hover state background */
-  --dsn-color-accent-3-bg-active: var(--dsn-color-accent-1-bg-active); /** Active state background */
-  --dsn-color-accent-3-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtle border */
-  --dsn-color-accent-3-border-default: var(--dsn-color-accent-1-border-default); /** Default border */
-  --dsn-color-accent-3-border-hover: var(--dsn-color-accent-1-border-hover); /** Hover state border */
-  --dsn-color-accent-3-border-active: var(--dsn-color-accent-1-border-active); /** Active state border */
-  --dsn-color-accent-3-color-default: var(--dsn-color-accent-1-color-default); /** Default text color */
-  --dsn-color-accent-3-color-hover: var(--dsn-color-accent-1-color-hover); /** Hover state text */
-  --dsn-color-accent-3-color-active: var(--dsn-color-accent-1-color-active); /** Active state text */
-  --dsn-color-accent-3-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtle text color */
-  --dsn-color-accent-3-color-document: var(--dsn-color-accent-1-color-document); /** Document text color */
-  --dsn-color-action-1-bg-document: var(--dsn-color-accent-1-bg-document); /** Document background */
+  --dsn-color-accent-3-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtiele achtergrond */
+  --dsn-color-accent-3-bg-default: var(--dsn-color-accent-1-bg-default); /** Standaard achtergrond */
+  --dsn-color-accent-3-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Achtergrond in hover state */
+  --dsn-color-accent-3-bg-active: var(--dsn-color-accent-1-bg-active); /** Achtergrond in active state */
+  --dsn-color-accent-3-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtiele rand */
+  --dsn-color-accent-3-border-default: var(--dsn-color-accent-1-border-default); /** Standaard rand */
+  --dsn-color-accent-3-border-hover: var(--dsn-color-accent-1-border-hover); /** Rand in hover state */
+  --dsn-color-accent-3-border-active: var(--dsn-color-accent-1-border-active); /** Rand in active state */
+  --dsn-color-accent-3-color-default: var(--dsn-color-accent-1-color-default); /** Standaard tekstkleur */
+  --dsn-color-accent-3-color-hover: var(--dsn-color-accent-1-color-hover); /** Tekst in hover state */
+  --dsn-color-accent-3-color-active: var(--dsn-color-accent-1-color-active); /** Tekst in active state */
+  --dsn-color-accent-3-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtiele tekstkleur */
+  --dsn-color-accent-3-color-document: var(--dsn-color-accent-1-color-document); /** Documenttekstkleur */
+  --dsn-color-action-1-bg-document: var(--dsn-color-accent-1-bg-document); /** Documentachtergrond */
   --dsn-color-action-1-bg-elevated: var(--dsn-color-accent-1-bg-elevated); /** Elevated background */
-  --dsn-color-action-1-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtle background */
-  --dsn-color-action-1-bg-default: var(--dsn-color-accent-1-bg-default); /** Default background */
-  --dsn-color-action-1-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Hover state background */
-  --dsn-color-action-1-bg-active: var(--dsn-color-accent-1-bg-active); /** Active state background */
-  --dsn-color-action-1-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtle border */
-  --dsn-color-action-1-border-default: var(--dsn-color-accent-1-border-default); /** Default border */
-  --dsn-color-action-1-border-hover: var(--dsn-color-accent-1-border-hover); /** Hover state border */
-  --dsn-color-action-1-border-active: var(--dsn-color-accent-1-border-active); /** Active state border */
-  --dsn-color-action-1-color-default: var(--dsn-color-accent-1-color-default); /** Default text color */
-  --dsn-color-action-1-color-hover: var(--dsn-color-accent-1-color-hover); /** Hover state text */
-  --dsn-color-action-1-color-active: var(--dsn-color-accent-1-color-active); /** Active state text */
-  --dsn-color-action-1-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtle text color */
-  --dsn-color-action-1-color-document: var(--dsn-color-accent-1-color-document); /** Document text color */
-  --dsn-color-action-2-bg-document: var(--dsn-color-accent-1-bg-document); /** Document background */
+  --dsn-color-action-1-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtiele achtergrond */
+  --dsn-color-action-1-bg-default: var(--dsn-color-accent-1-bg-default); /** Standaard achtergrond */
+  --dsn-color-action-1-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Achtergrond in hover state */
+  --dsn-color-action-1-bg-active: var(--dsn-color-accent-1-bg-active); /** Achtergrond in active state */
+  --dsn-color-action-1-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtiele rand */
+  --dsn-color-action-1-border-default: var(--dsn-color-accent-1-border-default); /** Standaard rand */
+  --dsn-color-action-1-border-hover: var(--dsn-color-accent-1-border-hover); /** Rand in hover state */
+  --dsn-color-action-1-border-active: var(--dsn-color-accent-1-border-active); /** Rand in active state */
+  --dsn-color-action-1-color-default: var(--dsn-color-accent-1-color-default); /** Standaard tekstkleur */
+  --dsn-color-action-1-color-hover: var(--dsn-color-accent-1-color-hover); /** Tekst in hover state */
+  --dsn-color-action-1-color-active: var(--dsn-color-accent-1-color-active); /** Tekst in active state */
+  --dsn-color-action-1-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtiele tekstkleur */
+  --dsn-color-action-1-color-document: var(--dsn-color-accent-1-color-document); /** Documenttekstkleur */
+  --dsn-color-action-2-bg-document: var(--dsn-color-accent-1-bg-document); /** Documentachtergrond */
   --dsn-color-action-2-bg-elevated: var(--dsn-color-accent-1-bg-elevated); /** Elevated background */
-  --dsn-color-action-2-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtle background */
-  --dsn-color-action-2-bg-default: var(--dsn-color-accent-1-bg-default); /** Default background */
-  --dsn-color-action-2-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Hover state background */
-  --dsn-color-action-2-bg-active: var(--dsn-color-accent-1-bg-active); /** Active state background */
-  --dsn-color-action-2-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtle border */
-  --dsn-color-action-2-border-default: var(--dsn-color-accent-1-border-default); /** Default border */
-  --dsn-color-action-2-border-hover: var(--dsn-color-accent-1-border-hover); /** Hover state border */
-  --dsn-color-action-2-border-active: var(--dsn-color-accent-1-border-active); /** Active state border */
-  --dsn-color-action-2-color-default: var(--dsn-color-accent-1-color-default); /** Default text color */
-  --dsn-color-action-2-color-hover: var(--dsn-color-accent-1-color-hover); /** Hover state text */
-  --dsn-color-action-2-color-active: var(--dsn-color-accent-1-color-active); /** Active state text */
-  --dsn-color-action-2-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtle text color */
-  --dsn-color-action-2-color-document: var(--dsn-color-accent-1-color-document); /** Document text color */
-  --dsn-color-accent-1-inverse-bg-document: var(--dsn-color-neutral-inverse-bg-document); /** Inverse document background */
+  --dsn-color-action-2-bg-subtle: var(--dsn-color-accent-1-bg-subtle); /** Subtiele achtergrond */
+  --dsn-color-action-2-bg-default: var(--dsn-color-accent-1-bg-default); /** Standaard achtergrond */
+  --dsn-color-action-2-bg-hover: var(--dsn-color-accent-1-bg-hover); /** Achtergrond in hover state */
+  --dsn-color-action-2-bg-active: var(--dsn-color-accent-1-bg-active); /** Achtergrond in active state */
+  --dsn-color-action-2-border-subtle: var(--dsn-color-accent-1-border-subtle); /** Subtiele rand */
+  --dsn-color-action-2-border-default: var(--dsn-color-accent-1-border-default); /** Standaard rand */
+  --dsn-color-action-2-border-hover: var(--dsn-color-accent-1-border-hover); /** Rand in hover state */
+  --dsn-color-action-2-border-active: var(--dsn-color-accent-1-border-active); /** Rand in active state */
+  --dsn-color-action-2-color-default: var(--dsn-color-accent-1-color-default); /** Standaard tekstkleur */
+  --dsn-color-action-2-color-hover: var(--dsn-color-accent-1-color-hover); /** Tekst in hover state */
+  --dsn-color-action-2-color-active: var(--dsn-color-accent-1-color-active); /** Tekst in active state */
+  --dsn-color-action-2-color-subtle: var(--dsn-color-accent-1-color-subtle); /** Subtiele tekstkleur */
+  --dsn-color-action-2-color-document: var(--dsn-color-accent-1-color-document); /** Documenttekstkleur */
+  --dsn-color-accent-1-inverse-bg-document: var(--dsn-color-neutral-inverse-bg-document); /** Inverse documentachtergrond */
   --dsn-color-accent-1-inverse-bg-elevated: var(--dsn-color-neutral-inverse-bg-elevated); /** Elevated background (inverse) */
-  --dsn-color-accent-1-inverse-bg-subtle: var(--dsn-color-neutral-inverse-bg-subtle); /** Inverse subtle background */
-  --dsn-color-accent-1-inverse-bg-default: var(--dsn-color-neutral-inverse-bg-default); /** Inverse default background */
-  --dsn-color-accent-1-inverse-bg-hover: var(--dsn-color-neutral-inverse-bg-hover); /** Inverse hover background */
-  --dsn-color-accent-1-inverse-bg-active: var(--dsn-color-neutral-inverse-bg-active); /** Inverse active background */
-  --dsn-color-accent-1-inverse-border-subtle: var(--dsn-color-neutral-inverse-border-subtle); /** Inverse subtle border */
-  --dsn-color-accent-1-inverse-border-default: var(--dsn-color-neutral-inverse-border-default); /** Inverse default border */
-  --dsn-color-accent-1-inverse-border-hover: var(--dsn-color-neutral-inverse-border-hover); /** Inverse hover border */
-  --dsn-color-accent-1-inverse-border-active: var(--dsn-color-neutral-inverse-border-active); /** Inverse active border */
-  --dsn-color-accent-1-inverse-color-default: var(--dsn-color-neutral-inverse-color-default); /** Inverse default text */
-  --dsn-color-accent-1-inverse-color-hover: var(--dsn-color-neutral-inverse-color-hover); /** Inverse hover text */
-  --dsn-color-accent-1-inverse-color-active: var(--dsn-color-neutral-inverse-color-active); /** Inverse active text */
-  --dsn-color-accent-1-inverse-color-subtle: var(--dsn-color-neutral-inverse-color-subtle); /** Inverse subtle text */
-  --dsn-color-accent-1-inverse-color-document: var(--dsn-color-neutral-inverse-color-document); /** Inverse document text */
+  --dsn-color-accent-1-inverse-bg-subtle: var(--dsn-color-neutral-inverse-bg-subtle); /** Inverse subtiele achtergrond */
+  --dsn-color-accent-1-inverse-bg-default: var(--dsn-color-neutral-inverse-bg-default); /** Inverse standaard achtergrond */
+  --dsn-color-accent-1-inverse-bg-hover: var(--dsn-color-neutral-inverse-bg-hover); /** Inverse achtergrond in hover state */
+  --dsn-color-accent-1-inverse-bg-active: var(--dsn-color-neutral-inverse-bg-active); /** Inverse achtergrond in active state */
+  --dsn-color-accent-1-inverse-border-subtle: var(--dsn-color-neutral-inverse-border-subtle); /** Inverse subtiele rand */
+  --dsn-color-accent-1-inverse-border-default: var(--dsn-color-neutral-inverse-border-default); /** Inverse standaard rand */
+  --dsn-color-accent-1-inverse-border-hover: var(--dsn-color-neutral-inverse-border-hover); /** Inverse rand in hover state */
+  --dsn-color-accent-1-inverse-border-active: var(--dsn-color-neutral-inverse-border-active); /** Inverse rand in active state */
+  --dsn-color-accent-1-inverse-color-default: var(--dsn-color-neutral-inverse-color-default); /** Inverse standaard tekst */
+  --dsn-color-accent-1-inverse-color-hover: var(--dsn-color-neutral-inverse-color-hover); /** Inverse tekst in hover state */
+  --dsn-color-accent-1-inverse-color-active: var(--dsn-color-neutral-inverse-color-active); /** Inverse tekst in active state */
+  --dsn-color-accent-1-inverse-color-subtle: var(--dsn-color-neutral-inverse-color-subtle); /** Inverse subtiele tekst */
+  --dsn-color-accent-1-inverse-color-document: var(--dsn-color-neutral-inverse-color-document); /** Inverse documenttekst */
   --dsn-color-positive-inverse-bg-document: var(--dsn-color-neutral-inverse-bg-document);
   --dsn-color-positive-inverse-bg-elevated: var(--dsn-color-neutral-inverse-bg-elevated);
   --dsn-color-positive-inverse-bg-subtle: var(--dsn-color-neutral-inverse-bg-subtle);
@@ -961,66 +978,66 @@
   --dsn-color-info-inverse-color-active: var(--dsn-color-neutral-inverse-color-active);
   --dsn-color-info-inverse-color-subtle: var(--dsn-color-neutral-inverse-color-subtle);
   --dsn-color-info-inverse-color-document: var(--dsn-color-neutral-inverse-color-document);
-  --dsn-alert-icon-size: var(--dsn-icon-size-xl); /** Alert icon size (also used as grid column width) */
-  --dsn-alert-info-background-color: var(--dsn-color-info-bg-default); /** Background color for info variant (default) */
-  --dsn-alert-info-border-color: var(--dsn-color-info-border-default); /** Border color for info variant (default) */
-  --dsn-alert-info-color: var(--dsn-color-info-color-document); /** Text color for info variant (default) */
-  --dsn-alert-info-icon-color: var(--dsn-color-info-color-default); /** Icon color for info variant (default) */
-  --dsn-alert-negative-background-color: var(--dsn-color-negative-bg-default); /** Background color for negative variant */
-  --dsn-alert-negative-border-color: var(--dsn-color-negative-border-default); /** Border color for negative variant */
-  --dsn-alert-negative-color: var(--dsn-color-negative-color-document); /** Text color for negative variant */
-  --dsn-alert-negative-icon-color: var(--dsn-color-negative-color-default); /** Icon color for negative variant */
-  --dsn-alert-positive-background-color: var(--dsn-color-positive-bg-default); /** Background color for positive variant */
-  --dsn-alert-positive-border-color: var(--dsn-color-positive-border-default); /** Border color for positive variant */
-  --dsn-alert-positive-color: var(--dsn-color-positive-color-document); /** Text color for positive variant */
-  --dsn-alert-positive-icon-color: var(--dsn-color-positive-color-default); /** Icon color for positive variant */
-  --dsn-alert-warning-background-color: var(--dsn-color-warning-bg-default); /** Background color for warning variant */
-  --dsn-alert-warning-border-color: var(--dsn-color-warning-border-default); /** Border color for warning variant */
-  --dsn-alert-warning-color: var(--dsn-color-warning-color-document); /** Text color for warning variant */
-  --dsn-alert-warning-icon-color: var(--dsn-color-warning-color-default); /** Icon color for warning variant */
-  --dsn-breadcrumb-navigation-separator-size: var(--dsn-icon-size-sm); /** Separator icon size — sm (kleiner dan terug-icoon) */
-  --dsn-breadcrumb-navigation-icon-size: var(--dsn-icon-size-sm); /** Back-icon size — sm (consistent met Link size small) */
-  --dsn-button-default-negative-border-color: var(--dsn-color-negative-border-default); /** Default negative button border */
-  --dsn-button-default-negative-color: var(--dsn-color-negative-color-default); /** Default negative button text/icon color */
-  --dsn-button-default-negative-active-background-color: var(--dsn-color-negative-bg-active); /** Default negative button active background */
-  --dsn-button-default-negative-active-border-color: var(--dsn-color-negative-border-active); /** Default negative button active border */
-  --dsn-button-default-negative-active-color: var(--dsn-color-negative-color-active); /** Default negative button active text/icon color */
-  --dsn-button-default-negative-hover-background-color: var(--dsn-color-negative-bg-hover); /** Default negative button hover background */
-  --dsn-button-default-negative-hover-border-color: var(--dsn-color-negative-border-hover); /** Default negative button hover border */
-  --dsn-button-default-negative-hover-color: var(--dsn-color-negative-color-hover); /** Default negative button hover text/icon color */
-  --dsn-button-default-positive-border-color: var(--dsn-color-positive-border-default); /** Default positive button border */
-  --dsn-button-default-positive-color: var(--dsn-color-positive-color-default); /** Default positive button text/icon color */
-  --dsn-button-default-positive-active-background-color: var(--dsn-color-positive-bg-active); /** Default positive button active background */
-  --dsn-button-default-positive-active-border-color: var(--dsn-color-positive-border-active); /** Default positive button active border */
-  --dsn-button-default-positive-active-color: var(--dsn-color-positive-color-active); /** Default positive button active text/icon color */
-  --dsn-button-default-positive-hover-background-color: var(--dsn-color-positive-bg-hover); /** Default positive button hover background */
-  --dsn-button-default-positive-hover-border-color: var(--dsn-color-positive-border-hover); /** Default positive button hover border */
-  --dsn-button-default-positive-hover-color: var(--dsn-color-positive-color-hover); /** Default positive button hover text/icon color */
-  --dsn-button-subtle-negative-color: var(--dsn-color-negative-color-default); /** Subtle negative button text/icon color */
-  --dsn-button-subtle-negative-active-background-color: var(--dsn-color-negative-bg-active); /** Subtle negative button active background */
-  --dsn-button-subtle-negative-active-color: var(--dsn-color-negative-color-active); /** Subtle negative button active text/icon color */
-  --dsn-button-subtle-negative-hover-background-color: var(--dsn-color-negative-bg-hover); /** Subtle negative button hover background */
-  --dsn-button-subtle-negative-hover-color: var(--dsn-color-negative-color-hover); /** Subtle negative button hover text/icon color */
-  --dsn-button-subtle-positive-color: var(--dsn-color-positive-color-default); /** Subtle positive button text/icon color */
-  --dsn-button-subtle-positive-active-background-color: var(--dsn-color-positive-bg-active); /** Subtle positive button active background */
-  --dsn-button-subtle-positive-active-color: var(--dsn-color-positive-color-active); /** Subtle positive button active text/icon color */
-  --dsn-button-subtle-positive-hover-background-color: var(--dsn-color-positive-bg-hover); /** Subtle positive button hover background */
-  --dsn-button-subtle-positive-hover-color: var(--dsn-color-positive-color-hover); /** Subtle positive button hover text/icon color */
-  --dsn-button-size-default-icon-size: var(--dsn-icon-size-md); /** Default button icon size */
-  --dsn-button-size-large-icon-size: var(--dsn-icon-size-lg); /** Large button icon size */
-  --dsn-button-size-small-icon-size: var(--dsn-icon-size-sm); /** Small button icon size */
+  --dsn-alert-icon-size: var(--dsn-icon-size-xl); /** Icoongrootte van de Alert (ook gebruikt als breedte van de gridkolom) */
+  --dsn-alert-info-background-color: var(--dsn-color-info-bg-default); /** Achtergrondkleur voor info variant (standaard) */
+  --dsn-alert-info-border-color: var(--dsn-color-info-border-default); /** Borderkleur voor info variant (standaard) */
+  --dsn-alert-info-color: var(--dsn-color-info-color-document); /** Tekstkleur voor info variant (standaard) */
+  --dsn-alert-info-icon-color: var(--dsn-color-info-color-default); /** Icoonkleur voor info variant (standaard) */
+  --dsn-alert-negative-background-color: var(--dsn-color-negative-bg-default); /** Achtergrondkleur voor negative variant */
+  --dsn-alert-negative-border-color: var(--dsn-color-negative-border-default); /** Borderkleur voor negative variant */
+  --dsn-alert-negative-color: var(--dsn-color-negative-color-document); /** Tekstkleur voor negative variant */
+  --dsn-alert-negative-icon-color: var(--dsn-color-negative-color-default); /** Icoonkleur voor negative variant */
+  --dsn-alert-positive-background-color: var(--dsn-color-positive-bg-default); /** Achtergrondkleur voor positive variant */
+  --dsn-alert-positive-border-color: var(--dsn-color-positive-border-default); /** Borderkleur voor positive variant */
+  --dsn-alert-positive-color: var(--dsn-color-positive-color-document); /** Tekstkleur voor positive variant */
+  --dsn-alert-positive-icon-color: var(--dsn-color-positive-color-default); /** Icoonkleur voor positive variant */
+  --dsn-alert-warning-background-color: var(--dsn-color-warning-bg-default); /** Achtergrondkleur voor warning variant */
+  --dsn-alert-warning-border-color: var(--dsn-color-warning-border-default); /** Borderkleur voor warning variant */
+  --dsn-alert-warning-color: var(--dsn-color-warning-color-document); /** Tekstkleur voor warning variant */
+  --dsn-alert-warning-icon-color: var(--dsn-color-warning-color-default); /** Icoonkleur voor warning variant */
+  --dsn-breadcrumb-navigation-separator-size: var(--dsn-icon-size-sm); /** Grootte van het scheidingsicoon — sm (kleiner dan terug-icoon) */
+  --dsn-breadcrumb-navigation-icon-size: var(--dsn-icon-size-sm); /** Grootte van het terug-icoon — sm (consistent met Link size small) */
+  --dsn-button-default-negative-border-color: var(--dsn-color-negative-border-default); /** Border van de default negative button */
+  --dsn-button-default-negative-color: var(--dsn-color-negative-color-default); /** Tekst-/icoonkleur van de default negative button */
+  --dsn-button-default-negative-active-background-color: var(--dsn-color-negative-bg-active); /** Achtergrond van de default negative button op active */
+  --dsn-button-default-negative-active-border-color: var(--dsn-color-negative-border-active); /** Border van de default negative button op active */
+  --dsn-button-default-negative-active-color: var(--dsn-color-negative-color-active); /** Tekst-/icoonkleur van de default negative button op active */
+  --dsn-button-default-negative-hover-background-color: var(--dsn-color-negative-bg-hover); /** Achtergrond van de default negative button op hover */
+  --dsn-button-default-negative-hover-border-color: var(--dsn-color-negative-border-hover); /** Border van de default negative button op hover */
+  --dsn-button-default-negative-hover-color: var(--dsn-color-negative-color-hover); /** Tekst-/icoonkleur van de default negative button op hover */
+  --dsn-button-default-positive-border-color: var(--dsn-color-positive-border-default); /** Border van de default positive button */
+  --dsn-button-default-positive-color: var(--dsn-color-positive-color-default); /** Tekst-/icoonkleur van de default positive button */
+  --dsn-button-default-positive-active-background-color: var(--dsn-color-positive-bg-active); /** Achtergrond van de default positive button op active */
+  --dsn-button-default-positive-active-border-color: var(--dsn-color-positive-border-active); /** Border van de default positive button op active */
+  --dsn-button-default-positive-active-color: var(--dsn-color-positive-color-active); /** Tekst-/icoonkleur van de default positive button op active */
+  --dsn-button-default-positive-hover-background-color: var(--dsn-color-positive-bg-hover); /** Achtergrond van de default positive button op hover */
+  --dsn-button-default-positive-hover-border-color: var(--dsn-color-positive-border-hover); /** Border van de default positive button op hover */
+  --dsn-button-default-positive-hover-color: var(--dsn-color-positive-color-hover); /** Tekst-/icoonkleur van de default positive button op hover */
+  --dsn-button-subtle-negative-color: var(--dsn-color-negative-color-default); /** Tekst-/icoonkleur van de subtle negative button */
+  --dsn-button-subtle-negative-active-background-color: var(--dsn-color-negative-bg-active); /** Achtergrond van de subtle negative button op active */
+  --dsn-button-subtle-negative-active-color: var(--dsn-color-negative-color-active); /** Tekst-/icoonkleur van de subtle negative button op active */
+  --dsn-button-subtle-negative-hover-background-color: var(--dsn-color-negative-bg-hover); /** Achtergrond van de subtle negative button op hover */
+  --dsn-button-subtle-negative-hover-color: var(--dsn-color-negative-color-hover); /** Tekst-/icoonkleur van de subtle negative button op hover */
+  --dsn-button-subtle-positive-color: var(--dsn-color-positive-color-default); /** Tekst-/icoonkleur van de subtle positive button */
+  --dsn-button-subtle-positive-active-background-color: var(--dsn-color-positive-bg-active); /** Achtergrond van de subtle positive button op active */
+  --dsn-button-subtle-positive-active-color: var(--dsn-color-positive-color-active); /** Tekst-/icoonkleur van de subtle positive button op active */
+  --dsn-button-subtle-positive-hover-background-color: var(--dsn-color-positive-bg-hover); /** Achtergrond van de subtle positive button op hover */
+  --dsn-button-subtle-positive-hover-color: var(--dsn-color-positive-color-hover); /** Tekst-/icoonkleur van de subtle positive button op hover */
+  --dsn-button-size-default-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de default button */
+  --dsn-button-size-large-icon-size: var(--dsn-icon-size-lg); /** Icoongrootte van de large button */
+  --dsn-button-size-small-icon-size: var(--dsn-icon-size-sm); /** Icoongrootte van de small button */
   --dsn-card-heading-color: var(--dsn-heading-color); /** Kleur van de card heading */
-  --dsn-checkbox-group-legend-color: var(--dsn-form-field-label-color); /** Text color for the legend (reuses form field label) */
-  --dsn-checkbox-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font family for the legend (reuses form field label) */
-  --dsn-checkbox-group-legend-font-size: var(--dsn-form-field-label-font-size); /** Font size for the legend (reuses form field label) */
-  --dsn-checkbox-group-legend-font-weight: var(--dsn-form-field-label-font-weight); /** Font weight for the legend (reuses form field label) */
-  --dsn-checkbox-group-legend-line-height: var(--dsn-form-field-label-line-height); /** Line height for the legend (reuses form field label) */
-  --dsn-checkbox-group-legend-margin-block-end: var(--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: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-checkbox-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-checkbox-group-legend-font-size: var(--dsn-form-field-label-font-size); /** Font-size van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-checkbox-group-legend-font-weight: var(--dsn-form-field-label-font-weight); /** Font-gewicht van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-checkbox-group-legend-line-height: var(--dsn-form-field-label-line-height); /** Line-height van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-checkbox-group-legend-margin-block-end: var(--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: var(--dsn-form-control-background-color);
   --dsn-checkbox-border-color: var(--dsn-form-control-border-color);
   --dsn-checkbox-active-background-color: var(--dsn-form-control-active-background-color);
   --dsn-checkbox-active-border-color: var(--dsn-form-control-active-border-color);
-  --dsn-checkbox-checked-color: var(--dsn-color-neutral-inverse-color-default); /** Check icon color */
+  --dsn-checkbox-checked-color: var(--dsn-color-neutral-inverse-color-default); /** Kleur van het vinkje */
   --dsn-checkbox-disabled-background-color: var(--dsn-form-control-disabled-background-color);
   --dsn-checkbox-disabled-border-color: var(--dsn-form-control-disabled-border-color);
   --dsn-checkbox-focus-border-color: var(--dsn-form-control-focus-border-color);
@@ -1032,78 +1049,80 @@
   --dsn-checkbox-checked-disabled-color: var(--dsn-form-control-disabled-color);
   --dsn-checkbox-checked-focus-border-color: var(--dsn-form-control-focus-border-color);
   --dsn-checkbox-checked-hover-color: var(--dsn-color-neutral-inverse-color-default);
-  --dsn-checkbox-indeterminate-color: var(--dsn-color-neutral-inverse-color-default); /** Indeterminate icon (minus) color */
+  --dsn-checkbox-indeterminate-color: var(--dsn-color-neutral-inverse-color-default); /** Kleur van het indeterminate-icoon (minteken) */
   --dsn-checkbox-indeterminate-active-color: var(--dsn-color-neutral-inverse-color-default);
   --dsn-checkbox-indeterminate-disabled-background-color: var(--dsn-form-control-disabled-accent-color);
   --dsn-checkbox-indeterminate-disabled-border-color: var(--dsn-form-control-disabled-border-color);
   --dsn-checkbox-indeterminate-disabled-color: var(--dsn-form-control-disabled-color);
   --dsn-checkbox-indeterminate-focus-border-color: var(--dsn-form-control-focus-border-color);
   --dsn-checkbox-indeterminate-hover-color: var(--dsn-color-neutral-inverse-color-default);
-  --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
-  --dsn-file-input-color: var(--dsn-form-control-placeholder-color); /** Subtle text color for filename / 'No file chosen' text */
-  --dsn-file-input-font-family: var(--dsn-form-control-font-family); /** File input font family */
-  --dsn-file-input-font-size: var(--dsn-form-control-font-size); /** File input font size */
-  --dsn-file-input-font-weight: var(--dsn-form-control-font-weight); /** File input font weight */
-  --dsn-file-input-line-height: var(--dsn-form-control-line-height); /** File input line height */
-  --dsn-file-input-disabled-color: var(--dsn-form-control-disabled-color); /** Muted text color for disabled state */
+  --dsn-file-input-color: var(--dsn-form-control-placeholder-color); /** Subtiele tekstkleur voor de bestandsnaam / 'Geen bestand gekozen'-tekst */
+  --dsn-file-input-font-family: var(--dsn-form-control-font-family); /** Font-familie van het bestandsinvoerveld */
+  --dsn-file-input-font-size: var(--dsn-form-control-font-size); /** Font-size van het bestandsinvoerveld */
+  --dsn-file-input-font-weight: var(--dsn-form-control-font-weight); /** Font-gewicht van het bestandsinvoerveld */
+  --dsn-file-input-line-height: var(--dsn-form-control-line-height); /** Line-height van het bestandsinvoerveld */
+  --dsn-file-input-disabled-color: var(--dsn-form-control-disabled-color); /** Gedempte tekstkleur voor de disabled staat */
   --dsn-file-border-color-error: var(--dsn-color-negative-border-default); /** Randkleur in de error state — zelfde schaal als FormFieldset bij invalid */
   --dsn-file-media-icon-size: var(--dsn-icon-size-md);
   --dsn-file-status-icon-color: var(--dsn-color-positive-color-default); /** Zelfde token als FormFieldStatus positive variant */
   --dsn-file-status-icon-size: var(--dsn-icon-size-md);
-  --dsn-form-field-error-message-color: var(--dsn-color-negative-color-default); /** Form field error message text color (negative sentiment) */
-  --dsn-form-field-error-message-icon-size: var(--dsn-icon-size-md); /** Error message icon size */
-  --dsn-form-field-status-icon-size: var(--dsn-icon-size-md); /** Icon size for positive and warning variants */
-  --dsn-form-field-status-positive-color: var(--dsn-color-positive-color-default); /** Text color for positive variant */
-  --dsn-form-field-status-warning-color: var(--dsn-color-warning-color-default); /** Text color for warning variant */
-  --dsn-form-field-invalid-border-inline-start-color: var(--dsn-color-negative-border-default); /** Left border color for invalid form fields */
-  --dsn-hero-background-color-default: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van de standaard Hero — licht blauw accent-1 */
+  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
+  --dsn-date-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-date-input-icon-size) + var(--dsn-date-input-button-inset-inline-end) + var(--dsn-date-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
+  --dsn-details-icon-size: var(--dsn-icon-size-md); /** Grootte van het chevron-icoon */
+  --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
+  --dsn-form-field-error-message-color: var(--dsn-color-negative-color-default); /** Tekstkleur van de foutmelding (negative sentiment) */
+  --dsn-form-field-error-message-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de foutmelding */
+  --dsn-form-field-status-icon-size: var(--dsn-icon-size-md); /** Icoongrootte voor positive en warning varianten */
+  --dsn-form-field-status-positive-color: var(--dsn-color-positive-color-default); /** Tekstkleur voor positive variant */
+  --dsn-form-field-status-warning-color: var(--dsn-color-warning-color-default); /** Tekstkleur voor warning variant */
+  --dsn-form-field-invalid-border-inline-start-color: var(--dsn-color-negative-border-default); /** Kleur van de linkerborder voor ongeldige formuliervelden */
+  --dsn-hero-background-color-default: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van de standaard Hero */
   --dsn-hero-color-default: var(--dsn-color-accent-1-color-default); /** Tekstkleur in de standaard Hero */
-  --dsn-link-icon-size: var(--dsn-icon-size-md); /** Link icon size */
-  --dsn-link-size-default-icon-size: var(--dsn-icon-size-md); /** Default link icon size */
-  --dsn-link-size-large-icon-size: var(--dsn-icon-size-lg); /** Large link icon size */
-  --dsn-link-size-small-icon-size: var(--dsn-icon-size-sm); /** Small link icon size */
+  --dsn-link-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de link */
+  --dsn-link-size-default-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de default link */
+  --dsn-link-size-large-icon-size: var(--dsn-icon-size-lg); /** Icoongrootte van de large link */
+  --dsn-link-size-small-icon-size: var(--dsn-icon-size-sm); /** Icoongrootte van de small link */
   --dsn-menu-item-icon-size: var(--dsn-icon-size-md); /** Gedeeld: icoongrootte */
   --dsn-modal-dialog-heading-color: var(--dsn-heading-color); /** Kleur van de dialoogvenster-heading */
-  --dsn-note-icon-size: var(--dsn-icon-size-xl); /** Note icon size (also used as grid column width) */
-  --dsn-note-info-background-color: var(--dsn-color-info-bg-default); /** Background color for info variant */
-  --dsn-note-info-border-inline-start-color: var(--dsn-color-info-border-default); /** Left border color for info variant */
-  --dsn-note-info-color: var(--dsn-color-info-color-document); /** Text color for info variant */
-  --dsn-note-info-icon-color: var(--dsn-color-info-color-default); /** Icon color for info variant */
-  --dsn-note-negative-background-color: var(--dsn-color-negative-bg-default); /** Background color for negative variant */
-  --dsn-note-negative-border-inline-start-color: var(--dsn-color-negative-border-default); /** Left border color for negative variant */
-  --dsn-note-negative-color: var(--dsn-color-negative-color-document); /** Text color for negative variant */
-  --dsn-note-negative-icon-color: var(--dsn-color-negative-color-default); /** Icon color for negative variant */
-  --dsn-note-positive-background-color: var(--dsn-color-positive-bg-default); /** Background color for positive variant */
-  --dsn-note-positive-border-inline-start-color: var(--dsn-color-positive-border-default); /** Left border color for positive variant */
-  --dsn-note-positive-color: var(--dsn-color-positive-color-document); /** Text color for positive variant */
-  --dsn-note-positive-icon-color: var(--dsn-color-positive-color-default); /** Icon color for positive variant */
-  --dsn-note-warning-background-color: var(--dsn-color-warning-bg-default); /** Background color for warning variant */
-  --dsn-note-warning-border-inline-start-color: var(--dsn-color-warning-border-default); /** Left border color for warning variant */
-  --dsn-note-warning-color: var(--dsn-color-warning-color-document); /** Text color for warning variant */
-  --dsn-note-warning-icon-color: var(--dsn-color-warning-color-default); /** Icon color for warning variant */
-  --dsn-number-badge-neutral-color: var(--dsn-color-neutral-inverse-color-default); /** Tekstkleur voor neutral variant (wit op donkere achtergrond) */
+  --dsn-note-icon-size: var(--dsn-icon-size-xl); /** Icoongrootte van de Note (ook gebruikt als breedte van de gridkolom) */
+  --dsn-note-info-background-color: var(--dsn-color-info-bg-default); /** Achtergrondkleur voor info variant */
+  --dsn-note-info-border-inline-start-color: var(--dsn-color-info-border-default); /** Kleur van de linkerborder voor info variant */
+  --dsn-note-info-color: var(--dsn-color-info-color-document); /** Tekstkleur voor info variant */
+  --dsn-note-info-icon-color: var(--dsn-color-info-color-default); /** Icoonkleur voor info variant */
+  --dsn-note-negative-background-color: var(--dsn-color-negative-bg-default); /** Achtergrondkleur voor negative variant */
+  --dsn-note-negative-border-inline-start-color: var(--dsn-color-negative-border-default); /** Kleur van de linkerborder voor negative variant */
+  --dsn-note-negative-color: var(--dsn-color-negative-color-document); /** Tekstkleur voor negative variant */
+  --dsn-note-negative-icon-color: var(--dsn-color-negative-color-default); /** Icoonkleur voor negative variant */
+  --dsn-note-positive-background-color: var(--dsn-color-positive-bg-default); /** Achtergrondkleur voor positive variant */
+  --dsn-note-positive-border-inline-start-color: var(--dsn-color-positive-border-default); /** Kleur van de linkerborder voor positive variant */
+  --dsn-note-positive-color: var(--dsn-color-positive-color-document); /** Tekstkleur voor positive variant */
+  --dsn-note-positive-icon-color: var(--dsn-color-positive-color-default); /** Icoonkleur voor positive variant */
+  --dsn-note-warning-background-color: var(--dsn-color-warning-bg-default); /** Achtergrondkleur voor warning variant */
+  --dsn-note-warning-border-inline-start-color: var(--dsn-color-warning-border-default); /** Kleur van de linkerborder voor warning variant */
+  --dsn-note-warning-color: var(--dsn-color-warning-color-document); /** Tekstkleur voor warning variant */
+  --dsn-note-warning-icon-color: var(--dsn-color-warning-color-default); /** Icoonkleur voor warning variant */
+  --dsn-number-badge-neutral-color: var(--dsn-color-neutral-inverse-color-default); /** Tekstkleur voor neutral variant */
   --dsn-number-badge-neutral-background-color: var(--dsn-color-neutral-inverse-bg-default); /** Achtergrondkleur voor neutral variant */
   --dsn-option-label-disabled-color: var(--dsn-form-control-disabled-color);
-  --dsn-page-footer-background-color: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van de PageFooter — merkkleur accent-1 als huisstijldrager */
-  --dsn-page-footer-border-block-start-color: var(--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: var(--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: var(--dsn-color-accent-1-bg-default); /** Navigatiebalk achtergrond — merkkleur accent-1 */
-  --dsn-page-header-search-panel-background-color: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van het zoekpaneel — merkkleur voor branding */
+  --dsn-page-footer-background-color: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van de PageFooter */
+  --dsn-page-footer-border-block-start-color: var(--dsn-color-accent-1-border-default); /** Kleur van de bovenkantrand */
+  --dsn-page-header-border-block-end-color: var(--dsn-color-accent-1-color-default); /** Kleur van de onderkantrand */
+  --dsn-page-header-navbar-background-color: var(--dsn-color-accent-1-bg-default); /** Navigatiebalk achtergrond */
+  --dsn-page-header-search-panel-background-color: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van het zoekpaneel */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
-  --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-color-default); /** Blauwe vulbalk — zelfde primaire accentkleur als Spinner */
-  --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Text color for the legend (reuses form field label) */
-  --dsn-radio-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font family for the legend (reuses form field label) */
-  --dsn-radio-group-legend-font-size: var(--dsn-form-field-label-font-size); /** Font size for the legend (reuses form field label) */
-  --dsn-radio-group-legend-font-weight: var(--dsn-form-field-label-font-weight); /** Font weight for the legend (reuses form field label) */
-  --dsn-radio-group-legend-line-height: var(--dsn-form-field-label-line-height); /** Line height for the legend (reuses form field label) */
-  --dsn-radio-group-legend-margin-block-end: var(--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: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-radio-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-radio-group-legend-font-size: var(--dsn-form-field-label-font-size); /** Font-size van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-radio-group-legend-font-weight: var(--dsn-form-field-label-font-weight); /** Font-gewicht van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-radio-group-legend-line-height: var(--dsn-form-field-label-line-height); /** Line-height van de legend (hergebruikt van het formulierveldlabel) */
+  --dsn-radio-group-legend-margin-block-end: var(--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: var(--dsn-form-control-background-color);
   --dsn-radio-border-color: var(--dsn-form-control-border-color);
-  --dsn-radio-color: var(--dsn-form-control-border-color); /** Inner circle color in default state */
+  --dsn-radio-color: var(--dsn-form-control-border-color); /** Kleur van de binnenste cirkel in de standaard staat */
   --dsn-radio-active-background-color: var(--dsn-form-control-active-background-color);
   --dsn-radio-active-border-color: var(--dsn-form-control-active-border-color);
   --dsn-radio-active-color: var(--dsn-form-control-active-border-color);
-  --dsn-radio-checked-color: var(--dsn-color-neutral-inverse-color-default); /** Inner circle color when checked */
+  --dsn-radio-checked-color: var(--dsn-color-neutral-inverse-color-default); /** Kleur van de binnenste cirkel wanneer aangevinkt */
   --dsn-radio-disabled-background-color: var(--dsn-form-control-disabled-background-color);
   --dsn-radio-disabled-border-color: var(--dsn-form-control-disabled-border-color);
   --dsn-radio-disabled-color: var(--dsn-form-control-disabled-border-color);
@@ -1115,68 +1134,70 @@
   --dsn-radio-checked-active-color: var(--dsn-color-neutral-inverse-color-default);
   --dsn-radio-checked-disabled-background-color: var(--dsn-form-control-disabled-accent-color);
   --dsn-radio-checked-disabled-border-color: var(--dsn-form-control-disabled-border-color);
-  --dsn-radio-checked-disabled-color: var(--dsn-form-control-disabled-color); /** Inner circle color - dark text color for contrast against disabled accent background */
+  --dsn-radio-checked-disabled-color: var(--dsn-form-control-disabled-color); /** Kleur van de binnenste cirkel — donkere tekstkleur voor contrast op de disabled accentachtergrond */
   --dsn-radio-checked-focus-border-color: var(--dsn-form-control-focus-border-color);
   --dsn-radio-checked-hover-color: var(--dsn-color-neutral-inverse-color-default);
-  --dsn-search-input-icon-size: var(--dsn-icon-size-md); /** Search input icon size */
-  --dsn-select-icon-size: var(--dsn-icon-size-md); /** Chevron-down icon size — matches the medium icon size */
+  --dsn-search-input-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van het zoekinvoerveld */
+  --dsn-select-icon-size: var(--dsn-icon-size-md); /** Grootte van het chevron-down icoon — gelijk aan de medium icoongrootte */
   --dsn-spinner-color: var(--dsn-color-accent-1-color-default); /** Kleur van de draaiende boog */
-  --dsn-status-badge-icon-size: var(--dsn-icon-size-sm); /** Status badge icon size */
-  --dsn-status-badge-info-background-color: var(--dsn-color-info-bg-default); /** Background color for info variant */
-  --dsn-status-badge-info-color: var(--dsn-color-info-color-default); /** Text color for info variant */
-  --dsn-status-badge-negative-background-color: var(--dsn-color-negative-bg-default); /** Background color for negative variant */
-  --dsn-status-badge-negative-color: var(--dsn-color-negative-color-default); /** Text color for negative variant */
-  --dsn-status-badge-positive-background-color: var(--dsn-color-positive-bg-default); /** Background color for positive variant */
-  --dsn-status-badge-positive-color: var(--dsn-color-positive-color-default); /** Text color for positive variant */
-  --dsn-status-badge-warning-background-color: var(--dsn-color-warning-bg-default); /** Background color for warning variant */
-  --dsn-status-badge-warning-color: var(--dsn-color-warning-color-default); /** Text color for warning variant */
-  --dsn-text-area-background-color: var(--dsn-form-control-background-color); /** Text area background color */
-  --dsn-text-area-border-color: var(--dsn-form-control-border-color); /** Text area border color */
-  --dsn-text-area-border-width: var(--dsn-form-control-border-width); /** Text area border width */
-  --dsn-text-area-color: var(--dsn-form-control-color); /** Text area text color */
-  --dsn-text-area-font-family: var(--dsn-form-control-font-family); /** Text area font family */
-  --dsn-text-area-font-size: var(--dsn-form-control-font-size); /** Text area font size */
-  --dsn-text-area-font-weight: var(--dsn-form-control-font-weight); /** Text area font weight */
-  --dsn-text-area-line-height: var(--dsn-form-control-line-height); /** Text area line height */
-  --dsn-text-area-padding-block-end: var(--dsn-form-control-padding-block-end); /** Text area bottom padding */
-  --dsn-text-area-padding-block-start: var(--dsn-form-control-padding-block-start); /** Text area top padding */
-  --dsn-text-area-padding-inline-end: var(--dsn-form-control-padding-inline-end); /** Text area right padding */
-  --dsn-text-area-padding-inline-start: var(--dsn-form-control-padding-inline-start); /** Text area left padding */
-  --dsn-text-area-disabled-background-color: var(--dsn-form-control-disabled-background-color); /** Text area disabled background */
-  --dsn-text-area-disabled-border-color: var(--dsn-form-control-disabled-border-color); /** Text area disabled border */
-  --dsn-text-area-disabled-color: var(--dsn-form-control-disabled-color); /** Text area disabled text color */
-  --dsn-text-area-focus-border-color: var(--dsn-form-control-focus-border-color); /** Text area focus border */
-  --dsn-text-area-placeholder-color: var(--dsn-form-control-placeholder-color); /** Text area placeholder color */
-  --dsn-text-area-invalid-color: var(--dsn-form-control-color); /** Text area invalid text color */
-  --dsn-text-area-read-only-background-color: var(--dsn-form-control-read-only-background-color); /** Text area read-only background */
-  --dsn-text-area-read-only-border-color: var(--dsn-form-control-read-only-border-color); /** Text area read-only border */
-  --dsn-text-area-read-only-color: var(--dsn-form-control-read-only-color); /** Text area read-only text color */
-  --dsn-text-input-background-color: var(--dsn-form-control-background-color); /** Text input background color */
-  --dsn-text-input-border-color: var(--dsn-form-control-border-color); /** Text input border color */
-  --dsn-text-input-border-width: var(--dsn-form-control-border-width); /** Text input border width */
-  --dsn-text-input-color: var(--dsn-form-control-color); /** Text input text color */
-  --dsn-text-input-font-family: var(--dsn-form-control-font-family); /** Text input font family */
-  --dsn-text-input-font-size: var(--dsn-form-control-font-size); /** Text input font size */
-  --dsn-text-input-font-weight: var(--dsn-form-control-font-weight); /** Text input font weight */
-  --dsn-text-input-line-height: var(--dsn-form-control-line-height); /** Text input line height */
-  --dsn-text-input-padding-block-end: var(--dsn-form-control-padding-block-end); /** Text input bottom padding */
-  --dsn-text-input-padding-block-start: var(--dsn-form-control-padding-block-start); /** Text input top padding */
-  --dsn-text-input-padding-inline-end: var(--dsn-form-control-padding-inline-end); /** Text input right padding */
-  --dsn-text-input-padding-inline-start: var(--dsn-form-control-padding-inline-start); /** Text input left padding */
-  --dsn-text-input-disabled-background-color: var(--dsn-form-control-disabled-background-color); /** Text input disabled background */
-  --dsn-text-input-disabled-border-color: var(--dsn-form-control-disabled-border-color); /** Text input disabled border */
-  --dsn-text-input-disabled-color: var(--dsn-form-control-disabled-color); /** Text input disabled text color */
-  --dsn-text-input-focus-border-color: var(--dsn-form-control-focus-border-color); /** Text input focus border */
-  --dsn-text-input-placeholder-color: var(--dsn-form-control-placeholder-color); /** Text input placeholder color */
-  --dsn-text-input-invalid-color: var(--dsn-form-control-color); /** Text input invalid text color */
-  --dsn-text-input-read-only-background-color: var(--dsn-form-control-read-only-background-color); /** Text input read-only background */
-  --dsn-text-input-read-only-border-color: var(--dsn-form-control-read-only-border-color); /** Text input read-only border */
-  --dsn-text-input-read-only-color: var(--dsn-form-control-read-only-color); /** Text input read-only text color */
-  --dsn-time-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-time-input-icon-size) + var(--dsn-time-input-button-inset-inline-end) + var(--dsn-time-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
+  --dsn-status-badge-icon-size: var(--dsn-icon-size-sm); /** Icoongrootte van de StatusBadge */
+  --dsn-status-badge-info-background-color: var(--dsn-color-info-bg-default); /** Achtergrondkleur voor info variant */
+  --dsn-status-badge-info-color: var(--dsn-color-info-color-default); /** Tekstkleur voor info variant */
+  --dsn-status-badge-negative-background-color: var(--dsn-color-negative-bg-default); /** Achtergrondkleur voor negative variant */
+  --dsn-status-badge-negative-color: var(--dsn-color-negative-color-default); /** Tekstkleur voor negative variant */
+  --dsn-status-badge-positive-background-color: var(--dsn-color-positive-bg-default); /** Achtergrondkleur voor positive variant */
+  --dsn-status-badge-positive-color: var(--dsn-color-positive-color-default); /** Tekstkleur voor positive variant */
+  --dsn-status-badge-warning-background-color: var(--dsn-color-warning-bg-default); /** Achtergrondkleur voor warning variant */
+  --dsn-status-badge-warning-color: var(--dsn-color-warning-color-default); /** Tekstkleur voor warning variant */
+  --dsn-table-of-contents-border-inline-start-color: var(--dsn-color-accent-1-border-default); /** Kleur van de linkerborder (framed appearance) */
+  --dsn-table-of-contents-background-color: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur (framed appearance) */
+  --dsn-text-area-background-color: var(--dsn-form-control-background-color); /** Achtergrondkleur van het tekstveld */
+  --dsn-text-area-border-color: var(--dsn-form-control-border-color); /** Borderkleur van het tekstveld */
+  --dsn-text-area-border-width: var(--dsn-form-control-border-width); /** Border-breedte van het tekstveld */
+  --dsn-text-area-color: var(--dsn-form-control-color); /** Tekstkleur van het tekstveld */
+  --dsn-text-area-font-family: var(--dsn-form-control-font-family); /** Font-familie van het tekstveld */
+  --dsn-text-area-font-size: var(--dsn-form-control-font-size); /** Font-size van het tekstveld */
+  --dsn-text-area-font-weight: var(--dsn-form-control-font-weight); /** Font-gewicht van het tekstveld */
+  --dsn-text-area-line-height: var(--dsn-form-control-line-height); /** Line-height van het tekstveld */
+  --dsn-text-area-padding-block-end: var(--dsn-form-control-padding-block-end); /** Onderste padding van het tekstveld */
+  --dsn-text-area-padding-block-start: var(--dsn-form-control-padding-block-start); /** Bovenste padding van het tekstveld */
+  --dsn-text-area-padding-inline-end: var(--dsn-form-control-padding-inline-end); /** Rechter padding van het tekstveld */
+  --dsn-text-area-padding-inline-start: var(--dsn-form-control-padding-inline-start); /** Linker padding van het tekstveld */
+  --dsn-text-area-disabled-background-color: var(--dsn-form-control-disabled-background-color); /** Achtergrond van het tekstveld op disabled */
+  --dsn-text-area-disabled-border-color: var(--dsn-form-control-disabled-border-color); /** Border van het tekstveld op disabled */
+  --dsn-text-area-disabled-color: var(--dsn-form-control-disabled-color); /** Tekstkleur van het tekstveld op disabled */
+  --dsn-text-area-focus-border-color: var(--dsn-form-control-focus-border-color); /** Border van het tekstveld op focus */
+  --dsn-text-area-placeholder-color: var(--dsn-form-control-placeholder-color); /** Plaatshouderkleur van het tekstveld */
+  --dsn-text-area-invalid-color: var(--dsn-form-control-color); /** Tekstkleur van het tekstveld bij ongeldige invoer */
+  --dsn-text-area-read-only-background-color: var(--dsn-form-control-read-only-background-color); /** Achtergrond van het tekstveld op read-only */
+  --dsn-text-area-read-only-border-color: var(--dsn-form-control-read-only-border-color); /** Border van het tekstveld op read-only */
+  --dsn-text-area-read-only-color: var(--dsn-form-control-read-only-color); /** Tekstkleur van het tekstveld op read-only */
+  --dsn-text-input-background-color: var(--dsn-form-control-background-color); /** Achtergrondkleur van het tekstinvoerveld */
+  --dsn-text-input-border-color: var(--dsn-form-control-border-color); /** Borderkleur van het tekstinvoerveld */
+  --dsn-text-input-border-width: var(--dsn-form-control-border-width); /** Border-breedte van het tekstinvoerveld */
+  --dsn-text-input-color: var(--dsn-form-control-color); /** Tekstkleur van het tekstinvoerveld */
+  --dsn-text-input-font-family: var(--dsn-form-control-font-family); /** Font-familie van het tekstinvoerveld */
+  --dsn-text-input-font-size: var(--dsn-form-control-font-size); /** Font-size van het tekstinvoerveld */
+  --dsn-text-input-font-weight: var(--dsn-form-control-font-weight); /** Font-gewicht van het tekstinvoerveld */
+  --dsn-text-input-line-height: var(--dsn-form-control-line-height); /** Line-height van het tekstinvoerveld */
+  --dsn-text-input-padding-block-end: var(--dsn-form-control-padding-block-end); /** Onderste padding van het tekstinvoerveld */
+  --dsn-text-input-padding-block-start: var(--dsn-form-control-padding-block-start); /** Bovenste padding van het tekstinvoerveld */
+  --dsn-text-input-padding-inline-end: var(--dsn-form-control-padding-inline-end); /** Rechter padding van het tekstinvoerveld */
+  --dsn-text-input-padding-inline-start: var(--dsn-form-control-padding-inline-start); /** Linker padding van het tekstinvoerveld */
+  --dsn-text-input-disabled-background-color: var(--dsn-form-control-disabled-background-color); /** Achtergrond van het tekstinvoerveld op disabled */
+  --dsn-text-input-disabled-border-color: var(--dsn-form-control-disabled-border-color); /** Border van het tekstinvoerveld op disabled */
+  --dsn-text-input-disabled-color: var(--dsn-form-control-disabled-color); /** Tekstkleur van het tekstinvoerveld op disabled */
+  --dsn-text-input-focus-border-color: var(--dsn-form-control-focus-border-color); /** Border van het tekstinvoerveld op focus */
+  --dsn-text-input-placeholder-color: var(--dsn-form-control-placeholder-color); /** Plaatshouderkleur van het tekstinvoerveld */
+  --dsn-text-input-invalid-color: var(--dsn-form-control-color); /** Tekstkleur van het tekstinvoerveld bij ongeldige invoer */
+  --dsn-text-input-read-only-background-color: var(--dsn-form-control-read-only-background-color); /** Achtergrond van het tekstinvoerveld op read-only */
+  --dsn-text-input-read-only-border-color: var(--dsn-form-control-read-only-border-color); /** Border van het tekstinvoerveld op read-only */
+  --dsn-text-input-read-only-color: var(--dsn-form-control-read-only-color); /** Tekstkleur van het tekstinvoerveld op read-only */
+  --dsn-time-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-time-input-icon-size) + var(--dsn-time-input-button-inset-inline-end) + var(--dsn-time-input-icon-gap)); /** Rechter padding wanneer een icoon aanwezig is: (knop-padding × 2) + icoongrootte + knop-inset + ruimte */
   --dsn-unordered-list-marker-color: var(--dsn-color-accent-1-color-default); /** Bullet marker color */
-  --dsn-form-control-hover-accent-color: var(--dsn-color-action-1-color-hover); /** Form control hover accent color */
-  --dsn-form-control-active-accent-color: var(--dsn-color-action-1-color-active); /** Form control active accent color */
-  --dsn-form-control-accent-color: var(--dsn-color-action-1-color-default); /** Form control accent color (checkboxes, radio buttons) */
+  --dsn-form-control-hover-accent-color: var(--dsn-color-action-1-color-hover); /** Accentkleur van form controls in hover state */
+  --dsn-form-control-active-accent-color: var(--dsn-color-action-1-color-active); /** Accentkleur van form controls in active state */
+  --dsn-form-control-accent-color: var(--dsn-color-action-1-color-default); /** Accentkleur van form controls (checkboxes, radio buttons) */
   --dsn-color-accent-2-inverse-bg-document: var(--dsn-color-accent-1-inverse-bg-document);
   --dsn-color-accent-2-inverse-bg-elevated: var(--dsn-color-accent-1-inverse-bg-elevated);
   --dsn-color-accent-2-inverse-bg-subtle: var(--dsn-color-accent-1-inverse-bg-subtle);
@@ -1237,34 +1258,34 @@
   --dsn-color-action-2-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active);
   --dsn-color-action-2-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle);
   --dsn-color-action-2-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document);
-  --dsn-breadcrumb-navigation-link-color: var(--dsn-color-action-2-color-default); /** Link text color */
-  --dsn-breadcrumb-navigation-link-hover-color: var(--dsn-color-action-2-color-hover); /** Link hover color */
-  --dsn-breadcrumb-navigation-link-active-color: var(--dsn-color-action-2-color-active); /** Link active color */
-  --dsn-button-default-border-color: var(--dsn-color-action-1-border-default); /** Default button border */
-  --dsn-button-default-color: var(--dsn-color-action-1-color-default); /** Default button text/icon color */
-  --dsn-button-default-active-background-color: var(--dsn-color-action-1-bg-active); /** Default button active background */
-  --dsn-button-default-active-border-color: var(--dsn-color-action-1-border-active); /** Default button active border */
-  --dsn-button-default-active-color: var(--dsn-color-action-1-color-active); /** Default button active text/icon color */
-  --dsn-button-default-hover-background-color: var(--dsn-color-action-1-bg-hover); /** Default button hover background */
-  --dsn-button-default-hover-border-color: var(--dsn-color-action-1-border-hover); /** Default button hover border */
-  --dsn-button-default-hover-color: var(--dsn-color-action-1-color-hover); /** Default button hover text/icon color */
-  --dsn-button-strong-negative-background-color: var(--dsn-color-negative-inverse-bg-default); /** Strong negative button background */
-  --dsn-button-strong-negative-color: var(--dsn-color-negative-inverse-color-default); /** Strong negative button text/icon color */
-  --dsn-button-strong-negative-active-background-color: var(--dsn-color-negative-inverse-bg-active); /** Strong negative button active background */
-  --dsn-button-strong-negative-active-color: var(--dsn-color-negative-inverse-color-active); /** Strong negative button active text/icon color */
-  --dsn-button-strong-negative-hover-background-color: var(--dsn-color-negative-inverse-bg-hover); /** Strong negative button hover background */
-  --dsn-button-strong-negative-hover-color: var(--dsn-color-negative-inverse-color-hover); /** Strong negative button hover text/icon color */
-  --dsn-button-strong-positive-background-color: var(--dsn-color-positive-inverse-bg-default); /** Strong positive button background */
-  --dsn-button-strong-positive-color: var(--dsn-color-positive-inverse-color-default); /** Strong positive button text/icon color */
-  --dsn-button-strong-positive-active-background-color: var(--dsn-color-positive-inverse-bg-active); /** Strong positive button active background */
-  --dsn-button-strong-positive-active-color: var(--dsn-color-positive-inverse-color-active); /** Strong positive button active text/icon color */
-  --dsn-button-strong-positive-hover-background-color: var(--dsn-color-positive-inverse-bg-hover); /** Strong positive button hover background */
-  --dsn-button-strong-positive-hover-color: var(--dsn-color-positive-inverse-color-hover); /** Strong positive button hover text/icon color */
-  --dsn-button-subtle-color: var(--dsn-color-action-1-color-default); /** Subtle button text/icon color */
-  --dsn-button-subtle-active-background-color: var(--dsn-color-action-1-bg-active); /** Subtle button active background */
-  --dsn-button-subtle-active-color: var(--dsn-color-action-1-color-active); /** Subtle button active text/icon color */
-  --dsn-button-subtle-hover-background-color: var(--dsn-color-action-1-bg-hover); /** Subtle button hover background */
-  --dsn-button-subtle-hover-color: var(--dsn-color-action-1-color-hover); /** Subtle button hover text/icon color */
+  --dsn-breadcrumb-navigation-link-color: var(--dsn-color-action-2-color-default); /** Tekstkleur van de link */
+  --dsn-breadcrumb-navigation-link-hover-color: var(--dsn-color-action-2-color-hover); /** Linkkleur op hover */
+  --dsn-breadcrumb-navigation-link-active-color: var(--dsn-color-action-2-color-active); /** Linkkleur op active */
+  --dsn-button-default-border-color: var(--dsn-color-action-1-border-default); /** Border van de default button */
+  --dsn-button-default-color: var(--dsn-color-action-1-color-default); /** Tekst-/icoonkleur van de default button */
+  --dsn-button-default-active-background-color: var(--dsn-color-action-1-bg-active); /** Achtergrond van de default button op active */
+  --dsn-button-default-active-border-color: var(--dsn-color-action-1-border-active); /** Border van de default button op active */
+  --dsn-button-default-active-color: var(--dsn-color-action-1-color-active); /** Tekst-/icoonkleur van de default button op active */
+  --dsn-button-default-hover-background-color: var(--dsn-color-action-1-bg-hover); /** Achtergrond van de default button op hover */
+  --dsn-button-default-hover-border-color: var(--dsn-color-action-1-border-hover); /** Border van de default button op hover */
+  --dsn-button-default-hover-color: var(--dsn-color-action-1-color-hover); /** Tekst-/icoonkleur van de default button op hover */
+  --dsn-button-strong-negative-background-color: var(--dsn-color-negative-inverse-bg-default); /** Achtergrond van de strong negative button */
+  --dsn-button-strong-negative-color: var(--dsn-color-negative-inverse-color-default); /** Tekst-/icoonkleur van de strong negative button */
+  --dsn-button-strong-negative-active-background-color: var(--dsn-color-negative-inverse-bg-active); /** Achtergrond van de strong negative button op active */
+  --dsn-button-strong-negative-active-color: var(--dsn-color-negative-inverse-color-active); /** Tekst-/icoonkleur van de strong negative button op active */
+  --dsn-button-strong-negative-hover-background-color: var(--dsn-color-negative-inverse-bg-hover); /** Achtergrond van de strong negative button op hover */
+  --dsn-button-strong-negative-hover-color: var(--dsn-color-negative-inverse-color-hover); /** Tekst-/icoonkleur van de strong negative button op hover */
+  --dsn-button-strong-positive-background-color: var(--dsn-color-positive-inverse-bg-default); /** Achtergrond van de strong positive button */
+  --dsn-button-strong-positive-color: var(--dsn-color-positive-inverse-color-default); /** Tekst-/icoonkleur van de strong positive button */
+  --dsn-button-strong-positive-active-background-color: var(--dsn-color-positive-inverse-bg-active); /** Achtergrond van de strong positive button op active */
+  --dsn-button-strong-positive-active-color: var(--dsn-color-positive-inverse-color-active); /** Tekst-/icoonkleur van de strong positive button op active */
+  --dsn-button-strong-positive-hover-background-color: var(--dsn-color-positive-inverse-bg-hover); /** Achtergrond van de strong positive button op hover */
+  --dsn-button-strong-positive-hover-color: var(--dsn-color-positive-inverse-color-hover); /** Tekst-/icoonkleur van de strong positive button op hover */
+  --dsn-button-subtle-color: var(--dsn-color-action-1-color-default); /** Tekst-/icoonkleur van de subtle button */
+  --dsn-button-subtle-active-background-color: var(--dsn-color-action-1-bg-active); /** Achtergrond van de subtle button op active */
+  --dsn-button-subtle-active-color: var(--dsn-color-action-1-color-active); /** Tekst-/icoonkleur van de subtle button op active */
+  --dsn-button-subtle-hover-background-color: var(--dsn-color-action-1-bg-hover); /** Achtergrond van de subtle button op hover */
+  --dsn-button-subtle-hover-color: var(--dsn-color-action-1-color-hover); /** Tekst-/icoonkleur van de subtle button op hover */
   --dsn-checkbox-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-checkbox-invalid-background-color: var(--dsn-form-control-invalid-background-color);
   --dsn-checkbox-invalid-border-color: var(--dsn-form-control-invalid-border-color);
@@ -1272,19 +1293,16 @@
   --dsn-checkbox-checked-focus-color: var(--dsn-form-control-focus-color);
   --dsn-checkbox-indeterminate-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
-  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
-  --dsn-date-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-date-input-icon-size) + var(--dsn-date-input-button-inset-inline-end) + var(--dsn-date-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
-  --dsn-details-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
-  --dsn-details-summary-color: var(--dsn-color-action-2-color-default); /** Summary label color (follows Link via action-2) */
-  --dsn-details-summary-hover-color: var(--dsn-color-action-2-color-hover); /** Summary label color on hover */
-  --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Summary label color on active */
-  --dsn-hero-background-color-inverse: var(--dsn-color-accent-1-inverse-bg-default); /** Achtergrondkleur van de inverse Hero — donker blauw */
-  --dsn-hero-color-inverse: var(--dsn-color-accent-1-inverse-color-default); /** Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond */
-  --dsn-hero-image-blend-color: var(--dsn-color-accent-1-inverse-bg-default); /** Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang */
-  --dsn-link-color: var(--dsn-color-action-2-color-default); /** Link text color */
-  --dsn-link-text-decoration-color: var(--dsn-color-action-2-color-default); /** Link underline color */
-  --dsn-link-active-color: var(--dsn-color-action-2-color-active); /** Link active text color */
-  --dsn-link-hover-color: var(--dsn-color-action-2-color-hover); /** Link hover text color */
+  --dsn-details-summary-color: var(--dsn-color-action-2-color-default); /** Kleur van het summary-label (volgt Link via action-2) */
+  --dsn-details-summary-hover-color: var(--dsn-color-action-2-color-hover); /** Kleur van het summary-label op hover */
+  --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Kleur van het summary-label op active */
+  --dsn-hero-background-color-inverse: var(--dsn-color-accent-1-inverse-bg-default); /** Achtergrondkleur van de inverse Hero */
+  --dsn-hero-color-inverse: var(--dsn-color-accent-1-inverse-color-default); /** Tekstkleur in de inverse Hero */
+  --dsn-hero-image-blend-color: var(--dsn-color-accent-1-inverse-bg-default); /** Blendkleur voor de image-blend variant */
+  --dsn-link-color: var(--dsn-color-action-2-color-default); /** Tekstkleur van de link */
+  --dsn-link-text-decoration-color: var(--dsn-color-action-2-color-default); /** Kleur van de onderstreping van de link */
+  --dsn-link-active-color: var(--dsn-color-action-2-color-active); /** Tekstkleur van de link op active */
+  --dsn-link-hover-color: var(--dsn-color-action-2-color-hover); /** Tekstkleur van de link op hover */
   --dsn-logo-color-primary: var(--dsn-color-accent-1-inverse-bg-default); /** Achtergrondrechthoek en letterpaden — de merkkleur van het actieve thema. */
   --dsn-menu-item-color: var(--dsn-color-action-2-color-default); /** Gedeeld: standaard tekstkleur */
   --dsn-menu-item-hover-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover tekstkleur */
@@ -1295,47 +1313,48 @@
   --dsn-menu-link-current-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina */
   --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de border-inline-start indicator */
   --dsn-menu-link-current-hover-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: hover tekstkleur voor de actieve pagina */
-  --dsn-menu-link-current-hover-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina — blijft bg-active */
+  --dsn-menu-link-current-hover-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina */
   --dsn-menu-link-current-active-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: active tekstkleur voor de actieve pagina */
   --dsn-menu-link-current-active-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: active achtergrondkleur voor de actieve pagina */
-  --dsn-number-badge-negative-color: var(--dsn-color-negative-inverse-color-default); /** Tekstkleur voor negative variant (wit op donkere achtergrond) */
+  --dsn-number-badge-negative-color: var(--dsn-color-negative-inverse-color-default); /** Tekstkleur voor negative variant */
   --dsn-number-badge-negative-background-color: var(--dsn-color-negative-inverse-bg-default); /** Achtergrondkleur voor negative variant */
-  --dsn-number-badge-positive-color: var(--dsn-color-positive-inverse-color-default); /** Tekstkleur voor positive variant (wit op donkere achtergrond) */
+  --dsn-number-badge-positive-color: var(--dsn-color-positive-inverse-color-default); /** Tekstkleur voor positive variant */
   --dsn-number-badge-positive-background-color: var(--dsn-color-positive-inverse-bg-default); /** Achtergrondkleur voor positive variant */
-  --dsn-number-badge-warning-color: var(--dsn-color-warning-inverse-color-default); /** Tekstkleur voor warning variant (wit op donkere achtergrond) */
+  --dsn-number-badge-warning-color: var(--dsn-color-warning-inverse-color-default); /** Tekstkleur voor warning variant */
   --dsn-number-badge-warning-background-color: var(--dsn-color-warning-inverse-bg-default); /** Achtergrondkleur voor warning variant */
-  --dsn-number-badge-info-color: var(--dsn-color-info-inverse-color-default); /** Tekstkleur voor info variant (wit op donkere achtergrond) */
+  --dsn-number-badge-info-color: var(--dsn-color-info-inverse-color-default); /** Tekstkleur voor info variant */
   --dsn-number-badge-info-background-color: var(--dsn-color-info-inverse-bg-default); /** Achtergrondkleur voor info variant */
+  --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-inverse-bg-default); /** Vulbalk achtergrondkleur */
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-invalid-background-color: var(--dsn-form-control-invalid-background-color);
   --dsn-radio-invalid-border-color: var(--dsn-form-control-invalid-border-color);
   --dsn-radio-invalid-color: var(--dsn-form-control-invalid-border-color);
   --dsn-radio-checked-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-focus-color: var(--dsn-form-control-focus-color);
-  --dsn-search-input-padding-inline-start-with-icon: calc(var(--dsn-search-input-icon-size) + var(--dsn-search-input-icon-gap) + var(--dsn-form-control-padding-inline-start)); /** Left padding when icon is present */
-  --dsn-select-icon-color: var(--dsn-color-action-1-color-default); /** Chevron icon color — same as subtle button icon color */
-  --dsn-select-padding-inline-end-with-icon: calc(var(--dsn-select-icon-size) + var(--dsn-select-icon-gap) + var(--dsn-select-icon-inset-inline-end)); /** Right padding when icon is present: icon-size + gap + inset */
-  --dsn-text-area-focus-background-color: var(--dsn-form-control-focus-background-color); /** Text area focus background */
-  --dsn-text-area-focus-box-shadow-color: var(--dsn-text-area-focus-border-color); /** Text area focus box shadow color */
-  --dsn-text-area-focus-color: var(--dsn-form-control-focus-color); /** Text area focus text color */
-  --dsn-text-area-hover-box-shadow-color: var(--dsn-text-area-border-color); /** Text area hover box shadow color */
-  --dsn-text-area-invalid-background-color: var(--dsn-form-control-invalid-background-color); /** Text area invalid background */
-  --dsn-text-area-invalid-border-color: var(--dsn-form-control-invalid-border-color); /** Text area invalid border */
-  --dsn-text-input-focus-background-color: var(--dsn-form-control-focus-background-color); /** Text input focus background */
-  --dsn-text-input-focus-box-shadow-color: var(--dsn-text-input-focus-border-color); /** Text input focus box shadow color */
-  --dsn-text-input-focus-color: var(--dsn-form-control-focus-color); /** Text input focus text color */
-  --dsn-text-input-hover-box-shadow-color: var(--dsn-text-input-border-color); /** Text input hover box shadow color */
-  --dsn-text-input-invalid-background-color: var(--dsn-form-control-invalid-background-color); /** Text input invalid background */
-  --dsn-text-input-invalid-border-color: var(--dsn-form-control-invalid-border-color); /** Text input invalid border */
-  --dsn-time-input-icon-color: var(--dsn-color-action-2-color-default); /** Clock icon color (interactive, action color) */
-  --dsn-time-input-icon-hover-color: var(--dsn-color-action-2-color-hover); /** Clock icon hover color */
-  --dsn-time-input-icon-size: var(--dsn-button-size-small-icon-size); /** Clock icon size — matches the small button icon size */
-  --dsn-button-strong-background-color: var(--dsn-color-action-1-inverse-bg-default); /** Strong button background */
-  --dsn-button-strong-color: var(--dsn-color-action-1-inverse-color-default); /** Strong button text/icon color */
-  --dsn-button-strong-active-background-color: var(--dsn-color-action-1-inverse-bg-active); /** Strong button active background */
-  --dsn-button-strong-active-color: var(--dsn-color-action-1-inverse-color-active); /** Strong button active text/icon color */
-  --dsn-button-strong-hover-background-color: var(--dsn-color-action-1-inverse-bg-hover); /** Strong button hover background */
-  --dsn-button-strong-hover-color: var(--dsn-color-action-1-inverse-color-hover); /** Strong button hover text/icon color */
+  --dsn-search-input-padding-inline-start-with-icon: calc(var(--dsn-search-input-icon-size) + var(--dsn-search-input-icon-gap) + var(--dsn-form-control-padding-inline-start)); /** Linker padding wanneer een icoon aanwezig is */
+  --dsn-select-icon-color: var(--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(var(--dsn-select-icon-size) + var(--dsn-select-icon-gap) + var(--dsn-select-icon-inset-inline-end)); /** Rechter padding wanneer een icoon aanwezig is: icoongrootte + ruimte + inset */
+  --dsn-text-area-focus-background-color: var(--dsn-form-control-focus-background-color); /** Achtergrond van het tekstveld op focus */
+  --dsn-text-area-focus-box-shadow-color: var(--dsn-text-area-focus-border-color); /** Kleur van de box-shadow op focus */
+  --dsn-text-area-focus-color: var(--dsn-form-control-focus-color); /** Tekstkleur van het tekstveld op focus */
+  --dsn-text-area-hover-box-shadow-color: var(--dsn-text-area-border-color); /** Kleur van de box-shadow op hover */
+  --dsn-text-area-invalid-background-color: var(--dsn-form-control-invalid-background-color); /** Achtergrond van het tekstveld bij ongeldige invoer */
+  --dsn-text-area-invalid-border-color: var(--dsn-form-control-invalid-border-color); /** Border van het tekstveld bij ongeldige invoer */
+  --dsn-text-input-focus-background-color: var(--dsn-form-control-focus-background-color); /** Achtergrond van het tekstinvoerveld op focus */
+  --dsn-text-input-focus-box-shadow-color: var(--dsn-text-input-focus-border-color); /** Kleur van de box-shadow op focus */
+  --dsn-text-input-focus-color: var(--dsn-form-control-focus-color); /** Tekstkleur van het tekstinvoerveld op focus */
+  --dsn-text-input-hover-box-shadow-color: var(--dsn-text-input-border-color); /** Kleur van de box-shadow op hover */
+  --dsn-text-input-invalid-background-color: var(--dsn-form-control-invalid-background-color); /** Achtergrond van het tekstinvoerveld bij ongeldige invoer */
+  --dsn-text-input-invalid-border-color: var(--dsn-form-control-invalid-border-color); /** Border van het tekstinvoerveld bij ongeldige invoer */
+  --dsn-time-input-icon-color: var(--dsn-color-action-2-color-default); /** Kleur van het klokicoon (interactief, actie-kleur) */
+  --dsn-time-input-icon-hover-color: var(--dsn-color-action-2-color-hover); /** Kleur van het klokicoon op hover */
+  --dsn-time-input-icon-size: var(--dsn-button-size-small-icon-size); /** Grootte van het klokicoon — gelijk aan de icoongrootte van de small button */
+  --dsn-button-strong-background-color: var(--dsn-color-action-1-inverse-bg-default); /** Achtergrond van de strong button */
+  --dsn-button-strong-color: var(--dsn-color-action-1-inverse-color-default); /** Tekst-/icoonkleur van de strong button */
+  --dsn-button-strong-active-background-color: var(--dsn-color-action-1-inverse-bg-active); /** Achtergrond van de strong button op active */
+  --dsn-button-strong-active-color: var(--dsn-color-action-1-inverse-color-active); /** Tekst-/icoonkleur van de strong button op active */
+  --dsn-button-strong-hover-background-color: var(--dsn-color-action-1-inverse-bg-hover); /** Achtergrond van de strong button op hover */
+  --dsn-button-strong-hover-color: var(--dsn-color-action-1-inverse-color-hover); /** Tekst-/icoonkleur van de strong button op hover */
   --dsn-checkbox-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-checkbox-checked-active-background-color: var(--dsn-form-control-active-accent-color);
   --dsn-checkbox-checked-hover-background-color: var(--dsn-form-control-hover-accent-color);
@@ -1345,8 +1364,8 @@
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);
   --dsn-radio-checked-hover-background-color: var(--dsn-form-control-hover-accent-color);
-  --dsn-text-area-invalid-box-shadow-color: var(--dsn-text-area-invalid-border-color); /** Text area invalid box shadow color */
-  --dsn-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Text input invalid box shadow color */
+  --dsn-text-area-invalid-box-shadow-color: var(--dsn-text-area-invalid-border-color); /** Kleur van de box-shadow bij ongeldige invoer */
+  --dsn-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Kleur van de box-shadow bij ongeldige invoer */
 }
 
 @media (prefers-reduced-motion: reduce) {