@dsn-starter-kit/design-tokens 1.0.0 → 1.0.2

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

@@ -404,6 +404,7 @@
   --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-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 width */
   --dsn-button-font-family: var(--dsn-text-font-family-default); /** Button font family */
@@ -590,6 +591,7 @@
   --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 */
@@ -718,6 +720,12 @@
   --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-pre-heading-color: var(--dsn-color-neutral-color-document); /** Pre-heading text color */
+  --dsn-pre-heading-font-family: var(--dsn-text-font-family-default); /** Pre-heading font family */
+  --dsn-pre-heading-font-size: var(--dsn-text-font-size-md); /** Pre-heading font size (same as body text) */
+  --dsn-pre-heading-font-weight: var(--dsn-text-font-weight-bold); /** Pre-heading font weight (bold to distinguish from heading text) */
+  --dsn-pre-heading-line-height: var(--dsn-text-line-height-md); /** Pre-heading line height */
+  --dsn-pre-heading-margin-block-end: var(--dsn-space-row-xs); /** Space between pre-heading and heading text */
   --dsn-progress-bar-color-track: var(--dsn-color-neutral-bg-default); /** Grijze 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 */
@@ -1039,7 +1047,6 @@
   --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 */
@@ -1050,6 +1057,10 @@
   --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-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-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
   --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 */
@@ -1090,7 +1101,6 @@
   --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-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) */
@@ -1272,9 +1282,6 @@
   --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 */
@@ -1306,6 +1313,7 @@
   --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-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 — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track */
   --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);

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

@@ -402,6 +402,7 @@
   --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-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 width */
   --dsn-button-font-family: var(--dsn-text-font-family-default); /** Button font family */
@@ -590,6 +591,7 @@
   --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 */
@@ -718,6 +720,12 @@
   --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-pre-heading-color: var(--dsn-color-neutral-color-document); /** Pre-heading text color */
+  --dsn-pre-heading-font-family: var(--dsn-text-font-family-default); /** Pre-heading font family */
+  --dsn-pre-heading-font-size: var(--dsn-text-font-size-md); /** Pre-heading font size (same as body text) */
+  --dsn-pre-heading-font-weight: var(--dsn-text-font-weight-bold); /** Pre-heading font weight (bold to distinguish from heading text) */
+  --dsn-pre-heading-line-height: var(--dsn-text-line-height-md); /** Pre-heading line height */
+  --dsn-pre-heading-margin-block-end: var(--dsn-space-row-xs); /** Space between pre-heading and heading text */
   --dsn-progress-bar-color-track: var(--dsn-color-neutral-bg-default); /** Grijze 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 */
@@ -1039,7 +1047,6 @@
   --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 */
@@ -1050,6 +1057,10 @@
   --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-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-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
   --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 */
@@ -1090,7 +1101,6 @@
   --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-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) */
@@ -1272,9 +1282,6 @@
   --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 */
@@ -1306,6 +1313,7 @@
   --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-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 — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track */
   --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);

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

@@ -404,6 +404,7 @@
   --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-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 width */
   --dsn-button-font-family: var(--dsn-text-font-family-default); /** Button font family */
@@ -590,6 +591,7 @@
   --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 */
@@ -718,6 +720,12 @@
   --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-pre-heading-color: var(--dsn-color-neutral-color-document); /** Pre-heading text color */
+  --dsn-pre-heading-font-family: var(--dsn-text-font-family-default); /** Pre-heading font family */
+  --dsn-pre-heading-font-size: var(--dsn-text-font-size-md); /** Pre-heading font size (same as body text) */
+  --dsn-pre-heading-font-weight: var(--dsn-text-font-weight-bold); /** Pre-heading font weight (bold to distinguish from heading text) */
+  --dsn-pre-heading-line-height: var(--dsn-text-line-height-md); /** Pre-heading line height */
+  --dsn-pre-heading-margin-block-end: var(--dsn-space-row-xs); /** Space between pre-heading and heading text */
   --dsn-progress-bar-color-track: var(--dsn-color-neutral-bg-default); /** Grijze 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 */
@@ -1039,7 +1047,6 @@
   --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 */
@@ -1050,6 +1057,10 @@
   --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-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-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
   --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 */
@@ -1090,7 +1101,6 @@
   --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-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) */
@@ -1272,9 +1282,6 @@
   --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 */
@@ -1306,6 +1313,7 @@
   --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-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 — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track */
   --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);

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

@@ -560,6 +560,7 @@ export declare const DsnBreadcrumbNavigationLinkActiveTextDecorationLine: string
 export declare const DsnBreadcrumbNavigationSeparatorColor: string;
 export declare const DsnBreadcrumbNavigationSeparatorSize: string;
 export declare const DsnBreadcrumbNavigationIconSize: string;
+export declare const DsnBreakoutSectionBorderBlockWidth: string;
 export declare const DsnButtonBorderRadius: string;
 export declare const DsnButtonBorderWidth: string;
 export declare const DsnButtonFontFamily: string;
@@ -906,6 +907,7 @@ export declare const DsnHeroBackgroundColorDefault: string;
 export declare const DsnHeroBackgroundColorInverse: string;
 export declare const DsnHeroColorDefault: string;
 export declare const DsnHeroColorInverse: string;
+export declare const DsnHeroBorderBlockWidth: string;
 export declare const DsnHeroImageBlendColor: string;
 export declare const DsnImageBorderRadius: string;
 export declare const DsnImageCaptionColor: string;
@@ -1104,6 +1106,12 @@ export declare const DsnPopoverBodyPaddingInline: string;
 export declare const DsnPopoverFooterPaddingBlockStart: string;
 export declare const DsnPopoverFooterPaddingBlockEnd: string;
 export declare const DsnPopoverFooterPaddingInline: string;
+export declare const DsnPreHeadingColor: string;
+export declare const DsnPreHeadingFontFamily: string;
+export declare const DsnPreHeadingFontSize: string;
+export declare const DsnPreHeadingFontWeight: string;
+export declare const DsnPreHeadingLineHeight: string;
+export declare const DsnPreHeadingMarginBlockEnd: string;
 export declare const DsnProgressBarColorTrack: string;
 export declare const DsnProgressBarColorFill: string;
 export declare const DsnProgressBarBlockSize: string;

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

@@ -11339,6 +11339,29 @@ export default {
         },
       },
     },
+    "breakout-section": {
+      "border-block-width": {
+        $value: "1px",
+        $type: "dimension",
+        $description:
+          "Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven",
+        filePath: "src/tokens/components/breakout-section.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.border.width.thin}",
+          $type: "dimension",
+          $description:
+            "Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven",
+        },
+        name: "DsnBreakoutSectionBorderBlockWidth",
+        attributes: {
+          category: "dsn",
+          type: "breakout-section",
+          item: "border-block-width",
+        },
+        path: ["dsn", "breakout-section", "border-block-width"],
+      },
+    },
     button: {
       "border-radius": {
         $value: "8px",
@@ -18496,6 +18519,27 @@ export default {
           path: ["dsn", "hero", "color", "inverse"],
         },
       },
+      "border-block-width": {
+        $value: "1px",
+        $type: "dimension",
+        $description:
+          "Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven",
+        filePath: "src/tokens/components/hero.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.border.width.thin}",
+          $type: "dimension",
+          $description:
+            "Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven",
+        },
+        name: "DsnHeroBorderBlockWidth",
+        attributes: {
+          category: "dsn",
+          type: "hero",
+          item: "border-block-width",
+        },
+        path: ["dsn", "hero", "border-block-width"],
+      },
       image: {
         "blend-color": {
           $value: "#8faed2",
@@ -22611,6 +22655,124 @@ export default {
         },
       },
     },
+    "pre-heading": {
+      color: {
+        $type: "color",
+        $value: "#f1f1f1",
+        $description: "Pre-heading text color",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "color",
+          $value: "{dsn.color.neutral.color-document}",
+          $description: "Pre-heading text color",
+        },
+        name: "DsnPreHeadingColor",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "color",
+        },
+        path: ["dsn", "pre-heading", "color"],
+      },
+      "font-family": {
+        $type: "fontFamily",
+        $value: "IBM Plex Sans, sans-serif",
+        $description: "Pre-heading font family",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "fontFamily",
+          $value: "{dsn.text.font-family.default}",
+          $description: "Pre-heading font family",
+        },
+        name: "DsnPreHeadingFontFamily",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "font-family",
+        },
+        path: ["dsn", "pre-heading", "font-family"],
+      },
+      "font-size": {
+        $type: "fontSize",
+        $value: "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+        $description: "Pre-heading font size (same as body text)",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "fontSize",
+          $value: "{dsn.text.font-size.md}",
+          $description: "Pre-heading font size (same as body text)",
+        },
+        name: "DsnPreHeadingFontSize",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "font-size",
+        },
+        path: ["dsn", "pre-heading", "font-size"],
+      },
+      "font-weight": {
+        $type: "fontWeight",
+        $value: "700",
+        $description:
+          "Pre-heading font weight (bold to distinguish from heading text)",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "fontWeight",
+          $value: "{dsn.text.font-weight.bold}",
+          $description:
+            "Pre-heading font weight (bold to distinguish from heading text)",
+        },
+        name: "DsnPreHeadingFontWeight",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "font-weight",
+        },
+        path: ["dsn", "pre-heading", "font-weight"],
+      },
+      "line-height": {
+        $type: "lineHeight",
+        $value: "1.5",
+        $description: "Pre-heading line height",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "lineHeight",
+          $value: "{dsn.text.line-height.md}",
+          $description: "Pre-heading line height",
+        },
+        name: "DsnPreHeadingLineHeight",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "line-height",
+        },
+        path: ["dsn", "pre-heading", "line-height"],
+      },
+      "margin-block-end": {
+        $type: "spacing",
+        $value: "calc(0.5rem * 0.25)",
+        $description: "Space between pre-heading and heading text",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "spacing",
+          $value: "{dsn.space.row.xs}",
+          $description: "Space between pre-heading and heading text",
+        },
+        name: "DsnPreHeadingMarginBlockEnd",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "margin-block-end",
+        },
+        path: ["dsn", "pre-heading", "margin-block-end"],
+      },
+    },
     "progress-bar": {
       color: {
         track: {
@@ -22637,14 +22799,14 @@ export default {
           $value: "#8faed2",
           $type: "color",
           $description:
-            "Blauwe vulbalk — zelfde primaire accentkleur als Spinner",
+            "Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track",
           filePath: "src/tokens/components/progress-bar.json",
           isSource: true,
           original: {
-            $value: "{dsn.color.accent-1.color-default}",
+            $value: "{dsn.color.accent-1-inverse.bg-default}",
             $type: "color",
             $description:
-              "Blauwe vulbalk — zelfde primaire accentkleur als Spinner",
+              "Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track",
           },
           name: "DsnProgressBarColorFill",
           attributes: {

package/dist/js/start-dark-information-dense.d.ts

@@ -560,6 +560,7 @@ export declare const DsnBreadcrumbNavigationLinkActiveTextDecorationLine: string
 export declare const DsnBreadcrumbNavigationSeparatorColor: string;
 export declare const DsnBreadcrumbNavigationSeparatorSize: string;
 export declare const DsnBreadcrumbNavigationIconSize: string;
+export declare const DsnBreakoutSectionBorderBlockWidth: string;
 export declare const DsnButtonBorderRadius: string;
 export declare const DsnButtonBorderWidth: string;
 export declare const DsnButtonFontFamily: string;
@@ -906,6 +907,7 @@ export declare const DsnHeroBackgroundColorDefault: string;
 export declare const DsnHeroBackgroundColorInverse: string;
 export declare const DsnHeroColorDefault: string;
 export declare const DsnHeroColorInverse: string;
+export declare const DsnHeroBorderBlockWidth: string;
 export declare const DsnHeroImageBlendColor: string;
 export declare const DsnImageBorderRadius: string;
 export declare const DsnImageCaptionColor: string;
@@ -1104,6 +1106,12 @@ export declare const DsnPopoverBodyPaddingInline: string;
 export declare const DsnPopoverFooterPaddingBlockStart: string;
 export declare const DsnPopoverFooterPaddingBlockEnd: string;
 export declare const DsnPopoverFooterPaddingInline: string;
+export declare const DsnPreHeadingColor: string;
+export declare const DsnPreHeadingFontFamily: string;
+export declare const DsnPreHeadingFontSize: string;
+export declare const DsnPreHeadingFontWeight: string;
+export declare const DsnPreHeadingLineHeight: string;
+export declare const DsnPreHeadingMarginBlockEnd: string;
 export declare const DsnProgressBarColorTrack: string;
 export declare const DsnProgressBarColorFill: string;
 export declare const DsnProgressBarBlockSize: string;