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

package/dist/js/wireframe-light-information-dense.d.ts

@@ -556,6 +556,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;
@@ -902,6 +903,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;
@@ -1100,6 +1102,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/wireframe-light-information-dense.js

@@ -10907,6 +10907,29 @@ export default {
         },
       },
     },
+    "breakout-section": {
+      "border-block-width": {
+        $value: "2px",
+        $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: "4px",
@@ -18059,6 +18082,27 @@ export default {
           path: ["dsn", "hero", "color", "inverse"],
         },
       },
+      "border-block-width": {
+        $value: "2px",
+        $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: "#000000",
@@ -22171,6 +22215,124 @@ export default {
         },
       },
     },
+    "pre-heading": {
+      color: {
+        $type: "color",
+        $value: "#000000",
+        $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: "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
+        $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: "1rem",
+        $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: "600",
+        $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.4",
+        $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: {
@@ -22197,14 +22359,14 @@ export default {
           $value: "#000000",
           $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/json/start-dark-default.json

@@ -561,6 +561,7 @@
   "DsnBreadcrumbNavigationSeparatorColor": "#8b8b8b",
   "DsnBreadcrumbNavigationSeparatorSize": "calc(clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem) * 1.5)",
   "DsnBreadcrumbNavigationIconSize": "calc(clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem) * 1.5)",
+  "DsnBreakoutSectionBorderBlockWidth": "1px",
   "DsnButtonBorderRadius": "8px",
   "DsnButtonBorderWidth": "1px",
   "DsnButtonFontFamily": "IBM Plex Sans, sans-serif",
@@ -907,6 +908,7 @@
   "DsnHeroBackgroundColorInverse": "#8faed2",
   "DsnHeroColorDefault": "#8faed2",
   "DsnHeroColorInverse": "#000000",
+  "DsnHeroBorderBlockWidth": "1px",
   "DsnHeroImageBlendColor": "#8faed2",
   "DsnImageBorderRadius": "8px",
   "DsnImageCaptionColor": "#8b8b8b",
@@ -1105,6 +1107,12 @@
   "DsnPopoverFooterPaddingBlockStart": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingBlockEnd": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingInline": "calc(0.5rem * 2)",
+  "DsnPreHeadingColor": "#f1f1f1",
+  "DsnPreHeadingFontFamily": "IBM Plex Sans, sans-serif",
+  "DsnPreHeadingFontSize": "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+  "DsnPreHeadingFontWeight": "700",
+  "DsnPreHeadingLineHeight": "1.5",
+  "DsnPreHeadingMarginBlockEnd": "calc(0.5rem * 0.25)",
   "DsnProgressBarColorTrack": "#1d1d1d",
   "DsnProgressBarColorFill": "#8faed2",
   "DsnProgressBarBlockSize": "8px",

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

@@ -561,6 +561,7 @@
   "DsnBreadcrumbNavigationSeparatorColor": "#8b8b8b",
   "DsnBreadcrumbNavigationSeparatorSize": "calc(0.875rem * 1.5)",
   "DsnBreadcrumbNavigationIconSize": "calc(0.875rem * 1.5)",
+  "DsnBreakoutSectionBorderBlockWidth": "1px",
   "DsnButtonBorderRadius": "8px",
   "DsnButtonBorderWidth": "1px",
   "DsnButtonFontFamily": "IBM Plex Sans, sans-serif",
@@ -907,6 +908,7 @@
   "DsnHeroBackgroundColorInverse": "#8faed2",
   "DsnHeroColorDefault": "#8faed2",
   "DsnHeroColorInverse": "#000000",
+  "DsnHeroBorderBlockWidth": "1px",
   "DsnHeroImageBlendColor": "#8faed2",
   "DsnImageBorderRadius": "8px",
   "DsnImageCaptionColor": "#8b8b8b",
@@ -1105,6 +1107,12 @@
   "DsnPopoverFooterPaddingBlockStart": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingBlockEnd": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingInline": "calc(0.5rem * 2)",
+  "DsnPreHeadingColor": "#f1f1f1",
+  "DsnPreHeadingFontFamily": "IBM Plex Sans, sans-serif",
+  "DsnPreHeadingFontSize": "1rem",
+  "DsnPreHeadingFontWeight": "700",
+  "DsnPreHeadingLineHeight": "1.5",
+  "DsnPreHeadingMarginBlockEnd": "calc(0.5rem * 0.25)",
   "DsnProgressBarColorTrack": "#1d1d1d",
   "DsnProgressBarColorFill": "#8faed2",
   "DsnProgressBarBlockSize": "8px",

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

@@ -561,6 +561,7 @@
   "DsnBreadcrumbNavigationSeparatorColor": "#636363",
   "DsnBreadcrumbNavigationSeparatorSize": "calc(clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem) * 1.5)",
   "DsnBreadcrumbNavigationIconSize": "calc(clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem) * 1.5)",
+  "DsnBreakoutSectionBorderBlockWidth": "1px",
   "DsnButtonBorderRadius": "8px",
   "DsnButtonBorderWidth": "1px",
   "DsnButtonFontFamily": "IBM Plex Sans, sans-serif",
@@ -907,6 +908,7 @@
   "DsnHeroBackgroundColorInverse": "#1b59a4",
   "DsnHeroColorDefault": "#1b59a4",
   "DsnHeroColorInverse": "#ffffff",
+  "DsnHeroBorderBlockWidth": "1px",
   "DsnHeroImageBlendColor": "#1b59a4",
   "DsnImageBorderRadius": "8px",
   "DsnImageCaptionColor": "#636363",
@@ -1105,6 +1107,12 @@
   "DsnPopoverFooterPaddingBlockStart": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingBlockEnd": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingInline": "calc(0.5rem * 2)",
+  "DsnPreHeadingColor": "#1b1b1b",
+  "DsnPreHeadingFontFamily": "IBM Plex Sans, sans-serif",
+  "DsnPreHeadingFontSize": "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+  "DsnPreHeadingFontWeight": "700",
+  "DsnPreHeadingLineHeight": "1.5",
+  "DsnPreHeadingMarginBlockEnd": "calc(0.5rem * 0.25)",
   "DsnProgressBarColorTrack": "#f1f1f1",
   "DsnProgressBarColorFill": "#1b59a4",
   "DsnProgressBarBlockSize": "8px",

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

@@ -561,6 +561,7 @@
   "DsnBreadcrumbNavigationSeparatorColor": "#636363",
   "DsnBreadcrumbNavigationSeparatorSize": "calc(0.875rem * 1.5)",
   "DsnBreadcrumbNavigationIconSize": "calc(0.875rem * 1.5)",
+  "DsnBreakoutSectionBorderBlockWidth": "1px",
   "DsnButtonBorderRadius": "8px",
   "DsnButtonBorderWidth": "1px",
   "DsnButtonFontFamily": "IBM Plex Sans, sans-serif",
@@ -907,6 +908,7 @@
   "DsnHeroBackgroundColorInverse": "#1b59a4",
   "DsnHeroColorDefault": "#1b59a4",
   "DsnHeroColorInverse": "#ffffff",
+  "DsnHeroBorderBlockWidth": "1px",
   "DsnHeroImageBlendColor": "#1b59a4",
   "DsnImageBorderRadius": "8px",
   "DsnImageCaptionColor": "#636363",
@@ -1105,6 +1107,12 @@
   "DsnPopoverFooterPaddingBlockStart": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingBlockEnd": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingInline": "calc(0.5rem * 2)",
+  "DsnPreHeadingColor": "#1b1b1b",
+  "DsnPreHeadingFontFamily": "IBM Plex Sans, sans-serif",
+  "DsnPreHeadingFontSize": "1rem",
+  "DsnPreHeadingFontWeight": "700",
+  "DsnPreHeadingLineHeight": "1.5",
+  "DsnPreHeadingMarginBlockEnd": "calc(0.5rem * 0.25)",
   "DsnProgressBarColorTrack": "#f1f1f1",
   "DsnProgressBarColorFill": "#1b59a4",
   "DsnProgressBarBlockSize": "8px",

package/dist/json/tokens-dark.json

@@ -561,6 +561,7 @@
   "DsnBreadcrumbNavigationSeparatorColor": "#8b8b8b",
   "DsnBreadcrumbNavigationSeparatorSize": "calc(clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem) * 1.5)",
   "DsnBreadcrumbNavigationIconSize": "calc(clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem) * 1.5)",
+  "DsnBreakoutSectionBorderBlockWidth": "1px",
   "DsnButtonBorderRadius": "8px",
   "DsnButtonBorderWidth": "1px",
   "DsnButtonFontFamily": "IBM Plex Sans, sans-serif",
@@ -907,6 +908,7 @@
   "DsnHeroBackgroundColorInverse": "#8faed2",
   "DsnHeroColorDefault": "#8faed2",
   "DsnHeroColorInverse": "#000000",
+  "DsnHeroBorderBlockWidth": "1px",
   "DsnHeroImageBlendColor": "#8faed2",
   "DsnImageBorderRadius": "8px",
   "DsnImageCaptionColor": "#8b8b8b",
@@ -1105,6 +1107,12 @@
   "DsnPopoverFooterPaddingBlockStart": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingBlockEnd": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingInline": "calc(0.5rem * 2)",
+  "DsnPreHeadingColor": "#f1f1f1",
+  "DsnPreHeadingFontFamily": "IBM Plex Sans, sans-serif",
+  "DsnPreHeadingFontSize": "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+  "DsnPreHeadingFontWeight": "700",
+  "DsnPreHeadingLineHeight": "1.5",
+  "DsnPreHeadingMarginBlockEnd": "calc(0.5rem * 0.25)",
   "DsnProgressBarColorTrack": "#1d1d1d",
   "DsnProgressBarColorFill": "#8faed2",
   "DsnProgressBarBlockSize": "8px",

package/dist/json/tokens.json

@@ -561,6 +561,7 @@
   "DsnBreadcrumbNavigationSeparatorColor": "#636363",
   "DsnBreadcrumbNavigationSeparatorSize": "calc(clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem) * 1.5)",
   "DsnBreadcrumbNavigationIconSize": "calc(clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem) * 1.5)",
+  "DsnBreakoutSectionBorderBlockWidth": "1px",
   "DsnButtonBorderRadius": "8px",
   "DsnButtonBorderWidth": "1px",
   "DsnButtonFontFamily": "IBM Plex Sans, sans-serif",
@@ -907,6 +908,7 @@
   "DsnHeroBackgroundColorInverse": "#1b59a4",
   "DsnHeroColorDefault": "#1b59a4",
   "DsnHeroColorInverse": "#ffffff",
+  "DsnHeroBorderBlockWidth": "1px",
   "DsnHeroImageBlendColor": "#1b59a4",
   "DsnImageBorderRadius": "8px",
   "DsnImageCaptionColor": "#636363",
@@ -1105,6 +1107,12 @@
   "DsnPopoverFooterPaddingBlockStart": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingBlockEnd": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingInline": "calc(0.5rem * 2)",
+  "DsnPreHeadingColor": "#1b1b1b",
+  "DsnPreHeadingFontFamily": "IBM Plex Sans, sans-serif",
+  "DsnPreHeadingFontSize": "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+  "DsnPreHeadingFontWeight": "700",
+  "DsnPreHeadingLineHeight": "1.5",
+  "DsnPreHeadingMarginBlockEnd": "calc(0.5rem * 0.25)",
   "DsnProgressBarColorTrack": "#f1f1f1",
   "DsnProgressBarColorFill": "#1b59a4",
   "DsnProgressBarBlockSize": "8px",

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

@@ -557,6 +557,7 @@
   "DsnBreadcrumbNavigationSeparatorColor": "#ffffff",
   "DsnBreadcrumbNavigationSeparatorSize": "calc(clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem) * 1.4)",
   "DsnBreadcrumbNavigationIconSize": "calc(clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem) * 1.4)",
+  "DsnBreakoutSectionBorderBlockWidth": "2px",
   "DsnButtonBorderRadius": "4px",
   "DsnButtonBorderWidth": "2px",
   "DsnButtonFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
@@ -903,6 +904,7 @@
   "DsnHeroBackgroundColorInverse": "#ffffff",
   "DsnHeroColorDefault": "#ffffff",
   "DsnHeroColorInverse": "#000000",
+  "DsnHeroBorderBlockWidth": "2px",
   "DsnHeroImageBlendColor": "#ffffff",
   "DsnImageBorderRadius": "4px",
   "DsnImageCaptionColor": "#ffffff",
@@ -1101,6 +1103,12 @@
   "DsnPopoverFooterPaddingBlockStart": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingBlockEnd": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingInline": "calc(0.5rem * 2)",
+  "DsnPreHeadingColor": "#ffffff",
+  "DsnPreHeadingFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
+  "DsnPreHeadingFontSize": "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+  "DsnPreHeadingFontWeight": "600",
+  "DsnPreHeadingLineHeight": "1.4",
+  "DsnPreHeadingMarginBlockEnd": "calc(0.5rem * 0.25)",
   "DsnProgressBarColorTrack": "#000000",
   "DsnProgressBarColorFill": "#ffffff",
   "DsnProgressBarBlockSize": "8px",

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

@@ -557,6 +557,7 @@
   "DsnBreadcrumbNavigationSeparatorColor": "#ffffff",
   "DsnBreadcrumbNavigationSeparatorSize": "calc(0.875rem * 1.4)",
   "DsnBreadcrumbNavigationIconSize": "calc(0.875rem * 1.4)",
+  "DsnBreakoutSectionBorderBlockWidth": "2px",
   "DsnButtonBorderRadius": "4px",
   "DsnButtonBorderWidth": "2px",
   "DsnButtonFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
@@ -903,6 +904,7 @@
   "DsnHeroBackgroundColorInverse": "#ffffff",
   "DsnHeroColorDefault": "#ffffff",
   "DsnHeroColorInverse": "#000000",
+  "DsnHeroBorderBlockWidth": "2px",
   "DsnHeroImageBlendColor": "#ffffff",
   "DsnImageBorderRadius": "4px",
   "DsnImageCaptionColor": "#ffffff",
@@ -1101,6 +1103,12 @@
   "DsnPopoverFooterPaddingBlockStart": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingBlockEnd": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingInline": "calc(0.5rem * 2)",
+  "DsnPreHeadingColor": "#ffffff",
+  "DsnPreHeadingFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
+  "DsnPreHeadingFontSize": "1rem",
+  "DsnPreHeadingFontWeight": "600",
+  "DsnPreHeadingLineHeight": "1.4",
+  "DsnPreHeadingMarginBlockEnd": "calc(0.5rem * 0.25)",
   "DsnProgressBarColorTrack": "#000000",
   "DsnProgressBarColorFill": "#ffffff",
   "DsnProgressBarBlockSize": "8px",

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

@@ -557,6 +557,7 @@
   "DsnBreadcrumbNavigationSeparatorColor": "#000000",
   "DsnBreadcrumbNavigationSeparatorSize": "calc(clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem) * 1.4)",
   "DsnBreadcrumbNavigationIconSize": "calc(clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem) * 1.4)",
+  "DsnBreakoutSectionBorderBlockWidth": "2px",
   "DsnButtonBorderRadius": "4px",
   "DsnButtonBorderWidth": "2px",
   "DsnButtonFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
@@ -903,6 +904,7 @@
   "DsnHeroBackgroundColorInverse": "#000000",
   "DsnHeroColorDefault": "#000000",
   "DsnHeroColorInverse": "#ffffff",
+  "DsnHeroBorderBlockWidth": "2px",
   "DsnHeroImageBlendColor": "#000000",
   "DsnImageBorderRadius": "4px",
   "DsnImageCaptionColor": "#000000",
@@ -1101,6 +1103,12 @@
   "DsnPopoverFooterPaddingBlockStart": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingBlockEnd": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingInline": "calc(0.5rem * 2)",
+  "DsnPreHeadingColor": "#000000",
+  "DsnPreHeadingFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
+  "DsnPreHeadingFontSize": "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+  "DsnPreHeadingFontWeight": "600",
+  "DsnPreHeadingLineHeight": "1.4",
+  "DsnPreHeadingMarginBlockEnd": "calc(0.5rem * 0.25)",
   "DsnProgressBarColorTrack": "#ffffff",
   "DsnProgressBarColorFill": "#000000",
   "DsnProgressBarBlockSize": "8px",

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

@@ -557,6 +557,7 @@
   "DsnBreadcrumbNavigationSeparatorColor": "#000000",
   "DsnBreadcrumbNavigationSeparatorSize": "calc(0.875rem * 1.4)",
   "DsnBreadcrumbNavigationIconSize": "calc(0.875rem * 1.4)",
+  "DsnBreakoutSectionBorderBlockWidth": "2px",
   "DsnButtonBorderRadius": "4px",
   "DsnButtonBorderWidth": "2px",
   "DsnButtonFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
@@ -903,6 +904,7 @@
   "DsnHeroBackgroundColorInverse": "#000000",
   "DsnHeroColorDefault": "#000000",
   "DsnHeroColorInverse": "#ffffff",
+  "DsnHeroBorderBlockWidth": "2px",
   "DsnHeroImageBlendColor": "#000000",
   "DsnImageBorderRadius": "4px",
   "DsnImageCaptionColor": "#000000",
@@ -1101,6 +1103,12 @@
   "DsnPopoverFooterPaddingBlockStart": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingBlockEnd": "calc(0.5rem * 2)",
   "DsnPopoverFooterPaddingInline": "calc(0.5rem * 2)",
+  "DsnPreHeadingColor": "#000000",
+  "DsnPreHeadingFontFamily": "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
+  "DsnPreHeadingFontSize": "1rem",
+  "DsnPreHeadingFontWeight": "600",
+  "DsnPreHeadingLineHeight": "1.4",
+  "DsnPreHeadingMarginBlockEnd": "calc(0.5rem * 0.25)",
   "DsnProgressBarColorTrack": "#ffffff",
   "DsnProgressBarColorFill": "#000000",
   "DsnProgressBarBlockSize": "8px",

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

@@ -614,6 +614,7 @@ $dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Vertical
 $dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // No horizontal padding on items
 $dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Gap between icon and link text
 $dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Separator icon color
+$dsn-breakout-section-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
 $dsn-button-border-radius: $dsn-border-radius-md; // Button border radius
 $dsn-button-border-width: $dsn-border-width-thin; // Button border width
 $dsn-button-font-family: $dsn-text-font-family-default; // Button font family
@@ -852,6 +853,7 @@ $dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergro
 $dsn-hero-background-color-inverse: $dsn-color-accent-1-inverse-bg-default; // Achtergrondkleur van de inverse Hero — donker blauw
 $dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
 $dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond
+$dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
 $dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang
 $dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
 $dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
@@ -1007,8 +1009,14 @@ $dsn-popover-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding v
 $dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
 $dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
 $dsn-popover-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
+$dsn-pre-heading-color: $dsn-color-neutral-color-document; // Pre-heading text color
+$dsn-pre-heading-font-family: $dsn-text-font-family-default; // Pre-heading font family
+$dsn-pre-heading-font-size: $dsn-text-font-size-md; // Pre-heading font size (same as body text)
+$dsn-pre-heading-font-weight: $dsn-text-font-weight-bold; // Pre-heading font weight (bold to distinguish from heading text)
+$dsn-pre-heading-line-height: $dsn-text-line-height-md; // Pre-heading line height
+$dsn-pre-heading-margin-block-end: $dsn-space-row-xs; // Space between pre-heading and heading text
 $dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Grijze achtergrondtrack
-$dsn-progress-bar-color-fill: $dsn-color-accent-1-color-default; // Blauwe vulbalk — zelfde primaire accentkleur als Spinner
+$dsn-progress-bar-color-fill: $dsn-color-accent-1-inverse-bg-default; // Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track
 $dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
 $dsn-progress-bar-gap-header: $dsn-space-block-xs; // Ruimte tussen percentage-tekst en balk
 $dsn-progress-bar-gap-footer: $dsn-space-block-xs; // Ruimte tussen balk en beschrijving
@@ -1186,13 +1194,13 @@ $dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
 $dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
 $dsn-container-elevated-box-shadow: $dsn-box-shadow-sm; // Lichte schaduw voor kaart-achtige containers (cards, panels)
 $dsn-details-summary-color: $dsn-color-action-2-color-default; // Summary label color (follows Link via action-2)
-$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Summary label color on active
+$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
 $dsn-drawer-box-shadow: $dsn-box-shadow-lg; // Schaduw van het zijpaneel — hoogste elevatie (lg)
 $dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
 $dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
 $dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
 $dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Summary label color on hover
-$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
+$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Summary label color on active
 $dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtle text color for filename / 'No file chosen' text
 $dsn-file-input-font-family: $dsn-form-control-font-family; // File input font family
 $dsn-file-input-font-size: $dsn-form-control-font-size; // File input font size
@@ -1329,8 +1337,6 @@ $dsn-checkbox-indeterminate-active-background-color: $dsn-form-control-active-ac
 $dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
 $dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-accent-color;
-$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Clock icon size — matches the small button icon size
-$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
 $dsn-radio-checked-background-color: $dsn-form-control-accent-color;
 $dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;
@@ -1343,9 +1349,11 @@ $dsn-text-area-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-text-area-focus-box-shadow-color: $dsn-text-area-focus-border-color; // Text area focus box shadow color
 $dsn-text-area-focus-color: $dsn-form-control-focus-color; // Text area focus text color
 $dsn-text-area-hover-box-shadow-color: $dsn-text-area-border-color; // Text area hover box shadow color
+$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Text input invalid box shadow color
+$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Clock icon size — matches the small button icon size
+$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
 $dsn-text-area-invalid-box-shadow-color: $dsn-text-area-invalid-border-color; // Text area invalid box shadow color
 $dsn-text-input-focus-background-color: $dsn-form-control-focus-background-color; // Text input focus background
 $dsn-text-input-focus-box-shadow-color: $dsn-text-input-focus-border-color; // Text input focus box shadow color
 $dsn-text-input-focus-color: $dsn-form-control-focus-color; // Text input focus text color
 $dsn-text-input-hover-box-shadow-color: $dsn-text-input-border-color; // Text input hover box shadow color
-$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Text input invalid box shadow color