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

package/dist/css/scoped/density-default.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 12 Jul 2026 08:06:04 GMT
+ * Generated on Mon, 31 Aug 2026 11:22:23 GMT
  */
 
 :root {

package/dist/css/scoped/density-information-dense.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 12 Jul 2026 08:06:04 GMT
+ * Generated on Mon, 31 Aug 2026 11:22:23 GMT
  */
 
 .dsn-density-dense {

package/dist/css/scoped/start-light-hero-image.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 12 Jul 2026 08:06:04 GMT
+ * Generated on Mon, 31 Aug 2026 11:22:23 GMT
  */
 
 .dsn-theme-start .dsn-hero--image {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 12 Jul 2026 08:06:04 GMT
+ * Generated on Mon, 31 Aug 2026 11:22:23 GMT
  */
 
 .dsn-theme-wireframe.dsn-mode-dark, .dsn-mode-dark .dsn-theme-wireframe {

package/dist/css/scoped/wireframe-light-hero-image.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 12 Jul 2026 08:06:05 GMT
+ * Generated on Mon, 31 Aug 2026 11:22:23 GMT
  */
 
 .dsn-theme-wireframe .dsn-hero--image {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 12 Jul 2026 08:06:04 GMT
+ * Generated on Mon, 31 Aug 2026 11:22:23 GMT
  */
 
 .dsn-theme-wireframe {

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

@@ -322,6 +322,7 @@
   --dsn-dot-badge-inset-block-start: 0.25rem; /** Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent */
   --dsn-dot-badge-inset-inline-end: 0.25rem; /** Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent */
   --dsn-dot-badge-pulse-duration: 1500ms; /** Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition */
+  --dsn-dot-badge-pulse-iteration-count: 3; /** Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen */
   --dsn-drawer-max-width: 25rem; /** Maximale breedte van het zijpaneel (400px) */
   --dsn-drawer-min-gap: 3rem; /** Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px) */
   --dsn-file-box-shadow: none; /** Geen schaduw standaard — zelfde als Card */
@@ -859,6 +860,16 @@
   --dsn-hero-color-inverse: var(--dsn-color-accent-1-inverse-color-default); /** Tekstkleur in de inverse Hero */
   --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-hero-image-blend-color: var(--dsn-color-accent-1-inverse-bg-default); /** Blendkleur voor de image-blend variant */
+  --dsn-icon-list-color: var(--dsn-color-neutral-color-document); /** Icon list text color */
+  --dsn-icon-list-font-family: var(--dsn-text-font-family-default); /** Icon list font family */
+  --dsn-icon-list-font-size: var(--dsn-text-font-size-md); /** Icon list font size */
+  --dsn-icon-list-font-weight: var(--dsn-text-font-weight-default); /** Icon list font weight */
+  --dsn-icon-list-line-height: var(--dsn-text-line-height-md); /** Icon list line height */
+  --dsn-icon-list-max-inline-size: var(--dsn-text-max-inline-size); /** Icon list max width for readability */
+  --dsn-icon-list-gap: var(--dsn-space-row-sm); /** Space between list items */
+  --dsn-icon-list-margin-block-end: var(--dsn-space-row-lg); /** Icon list bottom margin */
+  --dsn-icon-list-icon-color: var(--dsn-color-accent-1-color-default); /** Default icon color, same as the UnorderedList marker color */
+  --dsn-icon-list-icon-gap: var(--dsn-space-text-md); /** Space between icon and text */
   --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 */
@@ -1206,14 +1217,13 @@
   --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-container-elevated-box-shadow: var(--dsn-box-shadow-sm); /** Lichte schaduw voor kaart-achtige containers (cards, panels) */
+  --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-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-details-icon-size: var(--dsn-icon-size-md); /** Grootte van het chevron-icoon */
   --dsn-drawer-box-shadow: var(--dsn-box-shadow-lg); /** Schaduw van het zijpaneel — hoogste elevatie (lg) */
   --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
-  --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-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-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 */
@@ -1225,6 +1235,7 @@
   --dsn-file-status-icon-size: var(--dsn-icon-size-md);
   --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-icon-list-icon-size: var(--dsn-icon-size-md); /** Icon size equal to one line height, scales with the fluid type scale */
   --dsn-link-color: var(--dsn-color-action-2-color-default); /** Tekstkleur van de link */
   --dsn-link-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de link */
   --dsn-link-text-decoration-color: var(--dsn-color-action-2-color-default); /** Kleur van de onderstreping van de link */
@@ -1351,6 +1362,7 @@
   --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-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
+  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);

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

@@ -322,6 +322,7 @@
   --dsn-dot-badge-inset-block-start: 0.25rem; /** Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent */
   --dsn-dot-badge-inset-inline-end: 0.25rem; /** Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent */
   --dsn-dot-badge-pulse-duration: 1500ms; /** Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition */
+  --dsn-dot-badge-pulse-iteration-count: 3; /** Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen */
   --dsn-drawer-max-width: 25rem; /** Maximale breedte van het zijpaneel (400px) */
   --dsn-drawer-min-gap: 3rem; /** Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px) */
   --dsn-file-box-shadow: none; /** Geen schaduw standaard — zelfde als Card */
@@ -859,6 +860,16 @@
   --dsn-hero-color-inverse: var(--dsn-color-accent-1-inverse-color-default); /** Tekstkleur in de inverse Hero */
   --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-hero-image-blend-color: var(--dsn-color-accent-1-inverse-bg-default); /** Blendkleur voor de image-blend variant */
+  --dsn-icon-list-color: var(--dsn-color-neutral-color-document); /** Icon list text color */
+  --dsn-icon-list-font-family: var(--dsn-text-font-family-default); /** Icon list font family */
+  --dsn-icon-list-font-size: var(--dsn-text-font-size-md); /** Icon list font size */
+  --dsn-icon-list-font-weight: var(--dsn-text-font-weight-default); /** Icon list font weight */
+  --dsn-icon-list-line-height: var(--dsn-text-line-height-md); /** Icon list line height */
+  --dsn-icon-list-max-inline-size: var(--dsn-text-max-inline-size); /** Icon list max width for readability */
+  --dsn-icon-list-gap: var(--dsn-space-row-sm); /** Space between list items */
+  --dsn-icon-list-margin-block-end: var(--dsn-space-row-lg); /** Icon list bottom margin */
+  --dsn-icon-list-icon-color: var(--dsn-color-accent-1-color-default); /** Default icon color, same as the UnorderedList marker color */
+  --dsn-icon-list-icon-gap: var(--dsn-space-text-md); /** Space between icon and text */
   --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 */
@@ -1206,14 +1217,13 @@
   --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-container-elevated-box-shadow: var(--dsn-box-shadow-sm); /** Lichte schaduw voor kaart-achtige containers (cards, panels) */
+  --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-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-details-icon-size: var(--dsn-icon-size-md); /** Grootte van het chevron-icoon */
   --dsn-drawer-box-shadow: var(--dsn-box-shadow-lg); /** Schaduw van het zijpaneel — hoogste elevatie (lg) */
   --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
-  --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-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-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 */
@@ -1225,6 +1235,7 @@
   --dsn-file-status-icon-size: var(--dsn-icon-size-md);
   --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-icon-list-icon-size: var(--dsn-icon-size-md); /** Icon size equal to one line height, scales with the fluid type scale */
   --dsn-link-color: var(--dsn-color-action-2-color-default); /** Tekstkleur van de link */
   --dsn-link-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de link */
   --dsn-link-text-decoration-color: var(--dsn-color-action-2-color-default); /** Kleur van de onderstreping van de link */
@@ -1351,6 +1362,7 @@
   --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-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
+  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);

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

@@ -322,6 +322,7 @@
   --dsn-dot-badge-inset-block-start: 0.25rem; /** Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent */
   --dsn-dot-badge-inset-inline-end: 0.25rem; /** Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent */
   --dsn-dot-badge-pulse-duration: 1500ms; /** Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition */
+  --dsn-dot-badge-pulse-iteration-count: 3; /** Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen */
   --dsn-drawer-max-width: 25rem; /** Maximale breedte van het zijpaneel (400px) */
   --dsn-drawer-min-gap: 3rem; /** Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px) */
   --dsn-file-box-shadow: none; /** Geen schaduw standaard — zelfde als Card */
@@ -859,6 +860,16 @@
   --dsn-hero-color-inverse: var(--dsn-color-accent-1-inverse-color-default); /** Tekstkleur in de inverse Hero */
   --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-hero-image-blend-color: var(--dsn-color-accent-1-inverse-bg-default); /** Blendkleur voor de image-blend variant */
+  --dsn-icon-list-color: var(--dsn-color-neutral-color-document); /** Icon list text color */
+  --dsn-icon-list-font-family: var(--dsn-text-font-family-default); /** Icon list font family */
+  --dsn-icon-list-font-size: var(--dsn-text-font-size-md); /** Icon list font size */
+  --dsn-icon-list-font-weight: var(--dsn-text-font-weight-default); /** Icon list font weight */
+  --dsn-icon-list-line-height: var(--dsn-text-line-height-md); /** Icon list line height */
+  --dsn-icon-list-max-inline-size: var(--dsn-text-max-inline-size); /** Icon list max width for readability */
+  --dsn-icon-list-gap: var(--dsn-space-row-sm); /** Space between list items */
+  --dsn-icon-list-margin-block-end: var(--dsn-space-row-lg); /** Icon list bottom margin */
+  --dsn-icon-list-icon-color: var(--dsn-color-accent-1-color-default); /** Default icon color, same as the UnorderedList marker color */
+  --dsn-icon-list-icon-gap: var(--dsn-space-text-md); /** Space between icon and text */
   --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 */
@@ -1206,14 +1217,13 @@
   --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-container-elevated-box-shadow: var(--dsn-box-shadow-sm); /** Lichte schaduw voor kaart-achtige containers (cards, panels) */
+  --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-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-details-icon-size: var(--dsn-icon-size-md); /** Grootte van het chevron-icoon */
   --dsn-drawer-box-shadow: var(--dsn-box-shadow-lg); /** Schaduw van het zijpaneel — hoogste elevatie (lg) */
   --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
-  --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-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-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 */
@@ -1225,6 +1235,7 @@
   --dsn-file-status-icon-size: var(--dsn-icon-size-md);
   --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-icon-list-icon-size: var(--dsn-icon-size-md); /** Icon size equal to one line height, scales with the fluid type scale */
   --dsn-link-color: var(--dsn-color-action-2-color-default); /** Tekstkleur van de link */
   --dsn-link-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de link */
   --dsn-link-text-decoration-color: var(--dsn-color-action-2-color-default); /** Kleur van de onderstreping van de link */
@@ -1351,6 +1362,7 @@
   --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-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
+  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);

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

@@ -322,6 +322,7 @@
   --dsn-dot-badge-inset-block-start: 0.25rem; /** Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent */
   --dsn-dot-badge-inset-inline-end: 0.25rem; /** Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent */
   --dsn-dot-badge-pulse-duration: 1500ms; /** Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition */
+  --dsn-dot-badge-pulse-iteration-count: 3; /** Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen */
   --dsn-drawer-max-width: 25rem; /** Maximale breedte van het zijpaneel (400px) */
   --dsn-drawer-min-gap: 3rem; /** Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px) */
   --dsn-file-box-shadow: none; /** Geen schaduw standaard — zelfde als Card */
@@ -859,6 +860,16 @@
   --dsn-hero-color-inverse: var(--dsn-color-accent-1-inverse-color-default); /** Tekstkleur in de inverse Hero */
   --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-hero-image-blend-color: var(--dsn-color-accent-1-inverse-bg-default); /** Blendkleur voor de image-blend variant */
+  --dsn-icon-list-color: var(--dsn-color-neutral-color-document); /** Icon list text color */
+  --dsn-icon-list-font-family: var(--dsn-text-font-family-default); /** Icon list font family */
+  --dsn-icon-list-font-size: var(--dsn-text-font-size-md); /** Icon list font size */
+  --dsn-icon-list-font-weight: var(--dsn-text-font-weight-default); /** Icon list font weight */
+  --dsn-icon-list-line-height: var(--dsn-text-line-height-md); /** Icon list line height */
+  --dsn-icon-list-max-inline-size: var(--dsn-text-max-inline-size); /** Icon list max width for readability */
+  --dsn-icon-list-gap: var(--dsn-space-row-sm); /** Space between list items */
+  --dsn-icon-list-margin-block-end: var(--dsn-space-row-lg); /** Icon list bottom margin */
+  --dsn-icon-list-icon-color: var(--dsn-color-accent-1-color-default); /** Default icon color, same as the UnorderedList marker color */
+  --dsn-icon-list-icon-gap: var(--dsn-space-text-md); /** Space between icon and text */
   --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 */
@@ -1206,14 +1217,13 @@
   --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-container-elevated-box-shadow: var(--dsn-box-shadow-sm); /** Lichte schaduw voor kaart-achtige containers (cards, panels) */
+  --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-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-details-icon-size: var(--dsn-icon-size-md); /** Grootte van het chevron-icoon */
   --dsn-drawer-box-shadow: var(--dsn-box-shadow-lg); /** Schaduw van het zijpaneel — hoogste elevatie (lg) */
   --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
-  --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-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-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 */
@@ -1225,6 +1235,7 @@
   --dsn-file-status-icon-size: var(--dsn-icon-size-md);
   --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-icon-list-icon-size: var(--dsn-icon-size-md); /** Icon size equal to one line height, scales with the fluid type scale */
   --dsn-link-color: var(--dsn-color-action-2-color-default); /** Tekstkleur van de link */
   --dsn-link-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de link */
   --dsn-link-text-decoration-color: var(--dsn-color-action-2-color-default); /** Kleur van de onderstreping van de link */
@@ -1351,6 +1362,7 @@
   --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-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
+  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);

package/dist/css/variables-dark.css

@@ -322,6 +322,7 @@
   --dsn-dot-badge-inset-block-start: 0.25rem; /** Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent */
   --dsn-dot-badge-inset-inline-end: 0.25rem; /** Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent */
   --dsn-dot-badge-pulse-duration: 1500ms; /** Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition */
+  --dsn-dot-badge-pulse-iteration-count: 3; /** Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen */
   --dsn-drawer-max-width: 25rem; /** Maximale breedte van het zijpaneel (400px) */
   --dsn-drawer-min-gap: 3rem; /** Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px) */
   --dsn-file-box-shadow: none; /** Geen schaduw standaard — zelfde als Card */
@@ -859,6 +860,16 @@
   --dsn-hero-color-inverse: var(--dsn-color-accent-1-inverse-color-default); /** Tekstkleur in de inverse Hero */
   --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-hero-image-blend-color: var(--dsn-color-accent-1-inverse-bg-default); /** Blendkleur voor de image-blend variant */
+  --dsn-icon-list-color: var(--dsn-color-neutral-color-document); /** Icon list text color */
+  --dsn-icon-list-font-family: var(--dsn-text-font-family-default); /** Icon list font family */
+  --dsn-icon-list-font-size: var(--dsn-text-font-size-md); /** Icon list font size */
+  --dsn-icon-list-font-weight: var(--dsn-text-font-weight-default); /** Icon list font weight */
+  --dsn-icon-list-line-height: var(--dsn-text-line-height-md); /** Icon list line height */
+  --dsn-icon-list-max-inline-size: var(--dsn-text-max-inline-size); /** Icon list max width for readability */
+  --dsn-icon-list-gap: var(--dsn-space-row-sm); /** Space between list items */
+  --dsn-icon-list-margin-block-end: var(--dsn-space-row-lg); /** Icon list bottom margin */
+  --dsn-icon-list-icon-color: var(--dsn-color-accent-1-color-default); /** Default icon color, same as the UnorderedList marker color */
+  --dsn-icon-list-icon-gap: var(--dsn-space-text-md); /** Space between icon and text */
   --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 */
@@ -1206,14 +1217,13 @@
   --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-container-elevated-box-shadow: var(--dsn-box-shadow-sm); /** Lichte schaduw voor kaart-achtige containers (cards, panels) */
+  --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-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-details-icon-size: var(--dsn-icon-size-md); /** Grootte van het chevron-icoon */
   --dsn-drawer-box-shadow: var(--dsn-box-shadow-lg); /** Schaduw van het zijpaneel — hoogste elevatie (lg) */
   --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
-  --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-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-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 */
@@ -1225,6 +1235,7 @@
   --dsn-file-status-icon-size: var(--dsn-icon-size-md);
   --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-icon-list-icon-size: var(--dsn-icon-size-md); /** Icon size equal to one line height, scales with the fluid type scale */
   --dsn-link-color: var(--dsn-color-action-2-color-default); /** Tekstkleur van de link */
   --dsn-link-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de link */
   --dsn-link-text-decoration-color: var(--dsn-color-action-2-color-default); /** Kleur van de onderstreping van de link */
@@ -1351,6 +1362,7 @@
   --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-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
+  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);

package/dist/css/variables.css

@@ -322,6 +322,7 @@
   --dsn-dot-badge-inset-block-start: 0.25rem; /** Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent */
   --dsn-dot-badge-inset-inline-end: 0.25rem; /** Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent */
   --dsn-dot-badge-pulse-duration: 1500ms; /** Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition */
+  --dsn-dot-badge-pulse-iteration-count: 3; /** Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen */
   --dsn-drawer-max-width: 25rem; /** Maximale breedte van het zijpaneel (400px) */
   --dsn-drawer-min-gap: 3rem; /** Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px) */
   --dsn-file-box-shadow: none; /** Geen schaduw standaard — zelfde als Card */
@@ -859,6 +860,16 @@
   --dsn-hero-color-inverse: var(--dsn-color-accent-1-inverse-color-default); /** Tekstkleur in de inverse Hero */
   --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-hero-image-blend-color: var(--dsn-color-accent-1-inverse-bg-default); /** Blendkleur voor de image-blend variant */
+  --dsn-icon-list-color: var(--dsn-color-neutral-color-document); /** Icon list text color */
+  --dsn-icon-list-font-family: var(--dsn-text-font-family-default); /** Icon list font family */
+  --dsn-icon-list-font-size: var(--dsn-text-font-size-md); /** Icon list font size */
+  --dsn-icon-list-font-weight: var(--dsn-text-font-weight-default); /** Icon list font weight */
+  --dsn-icon-list-line-height: var(--dsn-text-line-height-md); /** Icon list line height */
+  --dsn-icon-list-max-inline-size: var(--dsn-text-max-inline-size); /** Icon list max width for readability */
+  --dsn-icon-list-gap: var(--dsn-space-row-sm); /** Space between list items */
+  --dsn-icon-list-margin-block-end: var(--dsn-space-row-lg); /** Icon list bottom margin */
+  --dsn-icon-list-icon-color: var(--dsn-color-accent-1-color-default); /** Default icon color, same as the UnorderedList marker color */
+  --dsn-icon-list-icon-gap: var(--dsn-space-text-md); /** Space between icon and text */
   --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 */
@@ -1206,14 +1217,13 @@
   --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-container-elevated-box-shadow: var(--dsn-box-shadow-sm); /** Lichte schaduw voor kaart-achtige containers (cards, panels) */
+  --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-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-details-icon-size: var(--dsn-icon-size-md); /** Grootte van het chevron-icoon */
   --dsn-drawer-box-shadow: var(--dsn-box-shadow-lg); /** Schaduw van het zijpaneel — hoogste elevatie (lg) */
   --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
-  --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-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-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 */
@@ -1225,6 +1235,7 @@
   --dsn-file-status-icon-size: var(--dsn-icon-size-md);
   --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-icon-list-icon-size: var(--dsn-icon-size-md); /** Icon size equal to one line height, scales with the fluid type scale */
   --dsn-link-color: var(--dsn-color-action-2-color-default); /** Tekstkleur van de link */
   --dsn-link-icon-size: var(--dsn-icon-size-md); /** Icoongrootte van de link */
   --dsn-link-text-decoration-color: var(--dsn-color-action-2-color-default); /** Kleur van de onderstreping van de link */
@@ -1351,6 +1362,7 @@
   --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-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
+  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);

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

@@ -173,6 +173,7 @@
   --dsn-dot-badge-inset-block-start: 0.25rem; /** Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent */
   --dsn-dot-badge-inset-inline-end: 0.25rem; /** Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent */
   --dsn-dot-badge-pulse-duration: 1500ms; /** Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition */
+  --dsn-dot-badge-pulse-iteration-count: 3; /** Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen */
   --dsn-drawer-max-width: 25rem; /** Maximale breedte van het zijpaneel (400px) */
   --dsn-drawer-min-gap: 3rem; /** Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px) */
   --dsn-file-box-shadow: none; /** Geen schaduw standaard — zelfde als Card */
@@ -594,6 +595,15 @@
   --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-icon-list-color: var(--dsn-color-neutral-color-document); /** Icon list text color */
+  --dsn-icon-list-font-family: var(--dsn-text-font-family-default); /** Icon list font family */
+  --dsn-icon-list-font-size: var(--dsn-text-font-size-md); /** Icon list font size */
+  --dsn-icon-list-font-weight: var(--dsn-text-font-weight-default); /** Icon list font weight */
+  --dsn-icon-list-line-height: var(--dsn-text-line-height-md); /** Icon list line height */
+  --dsn-icon-list-max-inline-size: var(--dsn-text-max-inline-size); /** Icon list max width for readability */
+  --dsn-icon-list-gap: var(--dsn-space-row-sm); /** Space between list items */
+  --dsn-icon-list-margin-block-end: var(--dsn-space-row-lg); /** Icon list bottom margin */
+  --dsn-icon-list-icon-gap: var(--dsn-space-text-md); /** Space between icon and text */
   --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 */
@@ -1078,6 +1088,8 @@
   --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-icon-list-icon-color: var(--dsn-color-accent-1-color-default); /** Default icon color, same as the UnorderedList marker color */
+  --dsn-icon-list-icon-size: var(--dsn-icon-size-md); /** Icon size equal to one line height, scales with the fluid type scale */
   --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 */

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

@@ -173,6 +173,7 @@
   --dsn-dot-badge-inset-block-start: 0.25rem; /** Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent */
   --dsn-dot-badge-inset-inline-end: 0.25rem; /** Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent */
   --dsn-dot-badge-pulse-duration: 1500ms; /** Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition */
+  --dsn-dot-badge-pulse-iteration-count: 3; /** Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen */
   --dsn-drawer-max-width: 25rem; /** Maximale breedte van het zijpaneel (400px) */
   --dsn-drawer-min-gap: 3rem; /** Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px) */
   --dsn-file-box-shadow: none; /** Geen schaduw standaard — zelfde als Card */
@@ -594,6 +595,15 @@
   --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-icon-list-color: var(--dsn-color-neutral-color-document); /** Icon list text color */
+  --dsn-icon-list-font-family: var(--dsn-text-font-family-default); /** Icon list font family */
+  --dsn-icon-list-font-size: var(--dsn-text-font-size-md); /** Icon list font size */
+  --dsn-icon-list-font-weight: var(--dsn-text-font-weight-default); /** Icon list font weight */
+  --dsn-icon-list-line-height: var(--dsn-text-line-height-md); /** Icon list line height */
+  --dsn-icon-list-max-inline-size: var(--dsn-text-max-inline-size); /** Icon list max width for readability */
+  --dsn-icon-list-gap: var(--dsn-space-row-sm); /** Space between list items */
+  --dsn-icon-list-margin-block-end: var(--dsn-space-row-lg); /** Icon list bottom margin */
+  --dsn-icon-list-icon-gap: var(--dsn-space-text-md); /** Space between icon and text */
   --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 */
@@ -1078,6 +1088,8 @@
   --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-icon-list-icon-color: var(--dsn-color-accent-1-color-default); /** Default icon color, same as the UnorderedList marker color */
+  --dsn-icon-list-icon-size: var(--dsn-icon-size-md); /** Icon size equal to one line height, scales with the fluid type scale */
   --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 */

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

@@ -173,6 +173,7 @@
   --dsn-dot-badge-inset-block-start: 0.25rem; /** Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent */
   --dsn-dot-badge-inset-inline-end: 0.25rem; /** Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent */
   --dsn-dot-badge-pulse-duration: 1500ms; /** Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition */
+  --dsn-dot-badge-pulse-iteration-count: 3; /** Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen */
   --dsn-drawer-max-width: 25rem; /** Maximale breedte van het zijpaneel (400px) */
   --dsn-drawer-min-gap: 3rem; /** Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px) */
   --dsn-file-box-shadow: none; /** Geen schaduw standaard — zelfde als Card */
@@ -594,6 +595,15 @@
   --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-icon-list-color: var(--dsn-color-neutral-color-document); /** Icon list text color */
+  --dsn-icon-list-font-family: var(--dsn-text-font-family-default); /** Icon list font family */
+  --dsn-icon-list-font-size: var(--dsn-text-font-size-md); /** Icon list font size */
+  --dsn-icon-list-font-weight: var(--dsn-text-font-weight-default); /** Icon list font weight */
+  --dsn-icon-list-line-height: var(--dsn-text-line-height-md); /** Icon list line height */
+  --dsn-icon-list-max-inline-size: var(--dsn-text-max-inline-size); /** Icon list max width for readability */
+  --dsn-icon-list-gap: var(--dsn-space-row-sm); /** Space between list items */
+  --dsn-icon-list-margin-block-end: var(--dsn-space-row-lg); /** Icon list bottom margin */
+  --dsn-icon-list-icon-gap: var(--dsn-space-text-md); /** Space between icon and text */
   --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 */
@@ -1078,6 +1088,8 @@
   --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-icon-list-icon-color: var(--dsn-color-accent-1-color-default); /** Default icon color, same as the UnorderedList marker color */
+  --dsn-icon-list-icon-size: var(--dsn-icon-size-md); /** Icon size equal to one line height, scales with the fluid type scale */
   --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 */

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

@@ -173,6 +173,7 @@
   --dsn-dot-badge-inset-block-start: 0.25rem; /** Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent */
   --dsn-dot-badge-inset-inline-end: 0.25rem; /** Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent */
   --dsn-dot-badge-pulse-duration: 1500ms; /** Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition */
+  --dsn-dot-badge-pulse-iteration-count: 3; /** Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen */
   --dsn-drawer-max-width: 25rem; /** Maximale breedte van het zijpaneel (400px) */
   --dsn-drawer-min-gap: 3rem; /** Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px) */
   --dsn-file-box-shadow: none; /** Geen schaduw standaard — zelfde als Card */
@@ -594,6 +595,15 @@
   --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-icon-list-color: var(--dsn-color-neutral-color-document); /** Icon list text color */
+  --dsn-icon-list-font-family: var(--dsn-text-font-family-default); /** Icon list font family */
+  --dsn-icon-list-font-size: var(--dsn-text-font-size-md); /** Icon list font size */
+  --dsn-icon-list-font-weight: var(--dsn-text-font-weight-default); /** Icon list font weight */
+  --dsn-icon-list-line-height: var(--dsn-text-line-height-md); /** Icon list line height */
+  --dsn-icon-list-max-inline-size: var(--dsn-text-max-inline-size); /** Icon list max width for readability */
+  --dsn-icon-list-gap: var(--dsn-space-row-sm); /** Space between list items */
+  --dsn-icon-list-margin-block-end: var(--dsn-space-row-lg); /** Icon list bottom margin */
+  --dsn-icon-list-icon-gap: var(--dsn-space-text-md); /** Space between icon and text */
   --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 */
@@ -1078,6 +1088,8 @@
   --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-icon-list-icon-color: var(--dsn-color-accent-1-color-default); /** Default icon color, same as the UnorderedList marker color */
+  --dsn-icon-list-icon-size: var(--dsn-icon-size-md); /** Icon size equal to one line height, scales with the fluid type scale */
   --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 */

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

@@ -797,6 +797,7 @@ export declare const DsnDotBadgeSize: string;
 export declare const DsnDotBadgeInsetBlockStart: string;
 export declare const DsnDotBadgeInsetInlineEnd: string;
 export declare const DsnDotBadgePulseDuration: string;
+export declare const DsnDotBadgePulseIterationCount: string;
 export declare const DsnDotBadgePulseEasing: string;
 export declare const DsnDrawerZIndex: string;
 export declare const DsnDrawerBackgroundColor: string;
@@ -909,6 +910,17 @@ export declare const DsnHeroColorDefault: string;
 export declare const DsnHeroColorInverse: string;
 export declare const DsnHeroBorderBlockWidth: string;
 export declare const DsnHeroImageBlendColor: string;
+export declare const DsnIconListColor: string;
+export declare const DsnIconListFontFamily: string;
+export declare const DsnIconListFontSize: string;
+export declare const DsnIconListFontWeight: string;
+export declare const DsnIconListLineHeight: string;
+export declare const DsnIconListMaxInlineSize: string;
+export declare const DsnIconListGap: string;
+export declare const DsnIconListMarginBlockEnd: string;
+export declare const DsnIconListIconColor: string;
+export declare const DsnIconListIconSize: string;
+export declare const DsnIconListIconGap: string;
 export declare const DsnImageBorderRadius: string;
 export declare const DsnImageCaptionColor: string;
 export declare const DsnImageCaptionFontSize: string;
@@ -1365,3 +1377,17 @@ export declare const DsnUnorderedListLineHeight: string;
 export declare const DsnUnorderedListMarginBlockEnd: string;
 export declare const DsnUnorderedListMarkerColor: string;
 export declare const DsnUnorderedListPaddingInlineStart: string;
+
+export interface DesignToken {
+  $value: string;
+  $description?: string;
+  filePath?: string;
+  [key: string]: unknown;
+}
+
+export type DesignTokenGroup = {
+  [key: string]: DesignToken | DesignTokenGroup;
+};
+
+declare const tokens: DesignTokenGroup;
+export default tokens;