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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/dist/css/scoped/density-default.css +1 -1
  2. package/dist/css/scoped/density-information-dense.css +1 -1
  3. package/dist/css/scoped/wireframe-dark.css +1 -1
  4. package/dist/css/scoped/wireframe-light.css +1 -1
  5. package/dist/css/start-dark-default.css +14 -6
  6. package/dist/css/start-dark-information-dense.css +14 -6
  7. package/dist/css/start-light-default.css +14 -6
  8. package/dist/css/start-light-information-dense.css +14 -6
  9. package/dist/css/variables-dark.css +14 -6
  10. package/dist/css/variables.css +14 -6
  11. package/dist/css/wireframe-dark-default.css +13 -5
  12. package/dist/css/wireframe-dark-information-dense.css +13 -5
  13. package/dist/css/wireframe-light-default.css +13 -5
  14. package/dist/css/wireframe-light-information-dense.css +13 -5
  15. package/dist/js/start-dark-default.d.ts +8 -0
  16. package/dist/js/start-dark-default.js +165 -3
  17. package/dist/js/start-dark-information-dense.d.ts +8 -0
  18. package/dist/js/start-dark-information-dense.js +165 -3
  19. package/dist/js/start-light-default.d.ts +8 -0
  20. package/dist/js/start-light-default.js +165 -3
  21. package/dist/js/start-light-information-dense.d.ts +8 -0
  22. package/dist/js/start-light-information-dense.js +165 -3
  23. package/dist/js/tokens-dark.d.ts +8 -0
  24. package/dist/js/tokens-dark.js +165 -3
  25. package/dist/js/tokens.d.ts +8 -0
  26. package/dist/js/tokens.js +165 -3
  27. package/dist/js/wireframe-dark-default.d.ts +8 -0
  28. package/dist/js/wireframe-dark-default.js +165 -3
  29. package/dist/js/wireframe-dark-information-dense.d.ts +8 -0
  30. package/dist/js/wireframe-dark-information-dense.js +165 -3
  31. package/dist/js/wireframe-light-default.d.ts +8 -0
  32. package/dist/js/wireframe-light-default.js +165 -3
  33. package/dist/js/wireframe-light-information-dense.d.ts +8 -0
  34. package/dist/js/wireframe-light-information-dense.js +165 -3
  35. package/dist/json/start-dark-default.json +8 -0
  36. package/dist/json/start-dark-information-dense.json +8 -0
  37. package/dist/json/start-light-default.json +8 -0
  38. package/dist/json/start-light-information-dense.json +8 -0
  39. package/dist/json/tokens-dark.json +8 -0
  40. package/dist/json/tokens.json +8 -0
  41. package/dist/json/wireframe-dark-default.json +8 -0
  42. package/dist/json/wireframe-dark-information-dense.json +8 -0
  43. package/dist/json/wireframe-light-default.json +8 -0
  44. package/dist/json/wireframe-light-information-dense.json +8 -0
  45. package/dist/scss/_start-dark-default.scss +14 -6
  46. package/dist/scss/_start-dark-information-dense.scss +14 -6
  47. package/dist/scss/_start-light-default.scss +14 -6
  48. package/dist/scss/_start-light-information-dense.scss +14 -6
  49. package/dist/scss/_variables-dark.scss +14 -6
  50. package/dist/scss/_variables.scss +14 -6
  51. package/dist/scss/_wireframe-dark-default.scss +13 -5
  52. package/dist/scss/_wireframe-dark-information-dense.scss +13 -5
  53. package/dist/scss/_wireframe-light-default.scss +13 -5
  54. package/dist/scss/_wireframe-light-information-dense.scss +13 -5
  55. package/package.json +1 -1
package/dist/css/scoped/density-default.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Sat, 16 May 2026 08:34:09 GMT
3
+ * Generated on Thu, 04 Jun 2026 13:16:20 GMT
4
4
  */
5
5
 
6
6
  :root {
package/dist/css/scoped/density-information-dense.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Sat, 16 May 2026 08:34:09 GMT
3
+ * Generated on Thu, 04 Jun 2026 13:16:20 GMT
4
4
  */
5
5
 
6
6
  .dsn-density-dense {
package/dist/css/scoped/wireframe-dark.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Sat, 16 May 2026 08:34:09 GMT
3
+ * Generated on Thu, 04 Jun 2026 13:16:20 GMT
4
4
  */
5
5
 
6
6
  .dsn-theme-wireframe.dsn-mode-dark, .dsn-mode-dark .dsn-theme-wireframe {
package/dist/css/scoped/wireframe-light.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Sat, 16 May 2026 08:34:09 GMT
3
+ * Generated on Thu, 04 Jun 2026 13:16:20 GMT
4
4
  */
5
5
 
6
6
  .dsn-theme-wireframe {
package/dist/css/start-dark-default.css CHANGED
@@ -616,6 +616,7 @@
616
616
  --dsn-breadcrumb-navigation-item-padding-inline: var(--dsn-space-none); /** No horizontal padding on items */
617
617
  --dsn-breadcrumb-navigation-link-column-gap: var(--dsn-space-text-xs); /** Gap between icon and link text */
618
618
  --dsn-breadcrumb-navigation-separator-color: var(--dsn-color-neutral-color-subtle); /** Separator icon color */
619
+ --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 */
619
620
  --dsn-button-border-radius: var(--dsn-border-radius-md); /** Button border radius */
620
621
  --dsn-button-border-width: var(--dsn-border-width-thin); /** Button border width */
621
622
  --dsn-button-font-family: var(--dsn-text-font-family-default); /** Button font family */
@@ -854,6 +855,7 @@
854
855
  --dsn-hero-background-color-inverse: var(--dsn-color-accent-1-inverse-bg-default); /** Achtergrondkleur van de inverse Hero — donker blauw */
855
856
  --dsn-hero-color-default: var(--dsn-color-accent-1-color-default); /** Tekstkleur in de standaard Hero */
856
857
  --dsn-hero-color-inverse: var(--dsn-color-accent-1-inverse-color-default); /** Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond */
858
+ --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 */
857
859
  --dsn-hero-image-blend-color: var(--dsn-color-accent-1-inverse-bg-default); /** Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang */
858
860
  --dsn-image-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de afbeelding */
859
861
  --dsn-image-caption-color: var(--dsn-color-neutral-color-subtle); /** Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst */
@@ -1009,8 +1011,14 @@
1009
1011
  --dsn-popover-footer-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de footer (16px) */
1010
1012
  --dsn-popover-footer-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de footer (16px) */
1011
1013
  --dsn-popover-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de footer (16px) */
1014
+ --dsn-pre-heading-color: var(--dsn-color-neutral-color-document); /** Pre-heading text color */
1015
+ --dsn-pre-heading-font-family: var(--dsn-text-font-family-default); /** Pre-heading font family */
1016
+ --dsn-pre-heading-font-size: var(--dsn-text-font-size-md); /** Pre-heading font size (same as body text) */
1017
+ --dsn-pre-heading-font-weight: var(--dsn-text-font-weight-bold); /** Pre-heading font weight (bold to distinguish from heading text) */
1018
+ --dsn-pre-heading-line-height: var(--dsn-text-line-height-md); /** Pre-heading line height */
1019
+ --dsn-pre-heading-margin-block-end: var(--dsn-space-row-xs); /** Space between pre-heading and heading text */
1012
1020
  --dsn-progress-bar-color-track: var(--dsn-color-neutral-bg-default); /** Grijze achtergrondtrack */
1013
- --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-color-default); /** Blauwe vulbalk — zelfde primaire accentkleur als Spinner */
1021
+ --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-inverse-bg-default); /** Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track */
1014
1022
  --dsn-progress-bar-border-radius: var(--dsn-border-radius-round); /** Volledig afgerond (pill-vorm) voor zowel track als fill */
1015
1023
  --dsn-progress-bar-gap-header: var(--dsn-space-block-xs); /** Ruimte tussen percentage-tekst en balk */
1016
1024
  --dsn-progress-bar-gap-footer: var(--dsn-space-block-xs); /** Ruimte tussen balk en beschrijving */
@@ -1188,13 +1196,13 @@
1188
1196
  --dsn-checkbox-indeterminate-focus-border-color: var(--dsn-form-control-focus-border-color);
1189
1197
  --dsn-container-elevated-box-shadow: var(--dsn-box-shadow-sm); /** Lichte schaduw voor kaart-achtige containers (cards, panels) */
1190
1198
  --dsn-details-summary-color: var(--dsn-color-action-2-color-default); /** Summary label color (follows Link via action-2) */
1191
- --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Summary label color on active */
1199
+ --dsn-details-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
1192
1200
  --dsn-drawer-box-shadow: var(--dsn-box-shadow-lg); /** Schaduw van het zijpaneel — hoogste elevatie (lg) */
1193
1201
  --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
1194
1202
  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
1195
1203
  --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 */
1196
1204
  --dsn-details-summary-hover-color: var(--dsn-color-action-2-color-hover); /** Summary label color on hover */
1197
- --dsn-details-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
1205
+ --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Summary label color on active */
1198
1206
  --dsn-file-input-color: var(--dsn-form-control-placeholder-color); /** Subtle text color for filename / 'No file chosen' text */
1199
1207
  --dsn-file-input-font-family: var(--dsn-form-control-font-family); /** File input font family */
1200
1208
  --dsn-file-input-font-size: var(--dsn-form-control-font-size); /** File input font size */
@@ -1331,8 +1339,6 @@
1331
1339
  --dsn-checkbox-indeterminate-focus-background-color: var(--dsn-form-control-focus-background-color);
1332
1340
  --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
1333
1341
  --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
1334
- --dsn-time-input-icon-size: var(--dsn-button-size-small-icon-size); /** Clock icon size — matches the small button icon size */
1335
- --dsn-time-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-time-input-icon-size) + var(--dsn-time-input-button-inset-inline-end) + var(--dsn-time-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
1336
1342
  --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
1337
1343
  --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
1338
1344
  --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);
@@ -1345,12 +1351,14 @@
1345
1351
  --dsn-text-area-focus-box-shadow-color: var(--dsn-text-area-focus-border-color); /** Text area focus box shadow color */
1346
1352
  --dsn-text-area-focus-color: var(--dsn-form-control-focus-color); /** Text area focus text color */
1347
1353
  --dsn-text-area-hover-box-shadow-color: var(--dsn-text-area-border-color); /** Text area hover box shadow color */
1354
+ --dsn-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Text input invalid box shadow color */
1355
+ --dsn-time-input-icon-size: var(--dsn-button-size-small-icon-size); /** Clock icon size — matches the small button icon size */
1356
+ --dsn-time-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-time-input-icon-size) + var(--dsn-time-input-button-inset-inline-end) + var(--dsn-time-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
1348
1357
  --dsn-text-area-invalid-box-shadow-color: var(--dsn-text-area-invalid-border-color); /** Text area invalid box shadow color */
1349
1358
  --dsn-text-input-focus-background-color: var(--dsn-form-control-focus-background-color); /** Text input focus background */
1350
1359
  --dsn-text-input-focus-box-shadow-color: var(--dsn-text-input-focus-border-color); /** Text input focus box shadow color */
1351
1360
  --dsn-text-input-focus-color: var(--dsn-form-control-focus-color); /** Text input focus text color */
1352
1361
  --dsn-text-input-hover-box-shadow-color: var(--dsn-text-input-border-color); /** Text input hover box shadow color */
1353
- --dsn-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Text input invalid box shadow color */
1354
1362
  }
1355
1363
 
1356
1364
  @media (prefers-reduced-motion: reduce) {
package/dist/css/start-dark-information-dense.css CHANGED
@@ -618,6 +618,7 @@
618
618
  --dsn-breadcrumb-navigation-item-padding-inline: var(--dsn-space-none); /** No horizontal padding on items */
619
619
  --dsn-breadcrumb-navigation-link-column-gap: var(--dsn-space-text-xs); /** Gap between icon and link text */
620
620
  --dsn-breadcrumb-navigation-separator-color: var(--dsn-color-neutral-color-subtle); /** Separator icon color */
621
+ --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 */
621
622
  --dsn-button-border-radius: var(--dsn-border-radius-md); /** Button border radius */
622
623
  --dsn-button-border-width: var(--dsn-border-width-thin); /** Button border width */
623
624
  --dsn-button-font-family: var(--dsn-text-font-family-default); /** Button font family */
@@ -854,6 +855,7 @@
854
855
  --dsn-hero-background-color-inverse: var(--dsn-color-accent-1-inverse-bg-default); /** Achtergrondkleur van de inverse Hero — donker blauw */
855
856
  --dsn-hero-color-default: var(--dsn-color-accent-1-color-default); /** Tekstkleur in de standaard Hero */
856
857
  --dsn-hero-color-inverse: var(--dsn-color-accent-1-inverse-color-default); /** Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond */
858
+ --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 */
857
859
  --dsn-hero-image-blend-color: var(--dsn-color-accent-1-inverse-bg-default); /** Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang */
858
860
  --dsn-image-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de afbeelding */
859
861
  --dsn-image-caption-color: var(--dsn-color-neutral-color-subtle); /** Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst */
@@ -1009,8 +1011,14 @@
1009
1011
  --dsn-popover-footer-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de footer (16px) */
1010
1012
  --dsn-popover-footer-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de footer (16px) */
1011
1013
  --dsn-popover-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de footer (16px) */
1014
+ --dsn-pre-heading-color: var(--dsn-color-neutral-color-document); /** Pre-heading text color */
1015
+ --dsn-pre-heading-font-family: var(--dsn-text-font-family-default); /** Pre-heading font family */
1016
+ --dsn-pre-heading-font-size: var(--dsn-text-font-size-md); /** Pre-heading font size (same as body text) */
1017
+ --dsn-pre-heading-font-weight: var(--dsn-text-font-weight-bold); /** Pre-heading font weight (bold to distinguish from heading text) */
1018
+ --dsn-pre-heading-line-height: var(--dsn-text-line-height-md); /** Pre-heading line height */
1019
+ --dsn-pre-heading-margin-block-end: var(--dsn-space-row-xs); /** Space between pre-heading and heading text */
1012
1020
  --dsn-progress-bar-color-track: var(--dsn-color-neutral-bg-default); /** Grijze achtergrondtrack */
1013
- --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-color-default); /** Blauwe vulbalk — zelfde primaire accentkleur als Spinner */
1021
+ --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-inverse-bg-default); /** Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track */
1014
1022
  --dsn-progress-bar-border-radius: var(--dsn-border-radius-round); /** Volledig afgerond (pill-vorm) voor zowel track als fill */
1015
1023
  --dsn-progress-bar-gap-header: var(--dsn-space-block-xs); /** Ruimte tussen percentage-tekst en balk */
1016
1024
  --dsn-progress-bar-gap-footer: var(--dsn-space-block-xs); /** Ruimte tussen balk en beschrijving */
@@ -1188,13 +1196,13 @@
1188
1196
  --dsn-checkbox-indeterminate-focus-border-color: var(--dsn-form-control-focus-border-color);
1189
1197
  --dsn-container-elevated-box-shadow: var(--dsn-box-shadow-sm); /** Lichte schaduw voor kaart-achtige containers (cards, panels) */
1190
1198
  --dsn-details-summary-color: var(--dsn-color-action-2-color-default); /** Summary label color (follows Link via action-2) */
1191
- --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Summary label color on active */
1199
+ --dsn-details-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
1192
1200
  --dsn-drawer-box-shadow: var(--dsn-box-shadow-lg); /** Schaduw van het zijpaneel — hoogste elevatie (lg) */
1193
1201
  --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
1194
1202
  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
1195
1203
  --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 */
1196
1204
  --dsn-details-summary-hover-color: var(--dsn-color-action-2-color-hover); /** Summary label color on hover */
1197
- --dsn-details-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
1205
+ --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Summary label color on active */
1198
1206
  --dsn-file-input-color: var(--dsn-form-control-placeholder-color); /** Subtle text color for filename / 'No file chosen' text */
1199
1207
  --dsn-file-input-font-family: var(--dsn-form-control-font-family); /** File input font family */
1200
1208
  --dsn-file-input-font-size: var(--dsn-form-control-font-size); /** File input font size */
@@ -1331,8 +1339,6 @@
1331
1339
  --dsn-checkbox-indeterminate-focus-background-color: var(--dsn-form-control-focus-background-color);
1332
1340
  --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
1333
1341
  --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
1334
- --dsn-time-input-icon-size: var(--dsn-button-size-small-icon-size); /** Clock icon size — matches the small button icon size */
1335
- --dsn-time-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-time-input-icon-size) + var(--dsn-time-input-button-inset-inline-end) + var(--dsn-time-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
1336
1342
  --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
1337
1343
  --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
1338
1344
  --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);
@@ -1345,12 +1351,14 @@
1345
1351
  --dsn-text-area-focus-box-shadow-color: var(--dsn-text-area-focus-border-color); /** Text area focus box shadow color */
1346
1352
  --dsn-text-area-focus-color: var(--dsn-form-control-focus-color); /** Text area focus text color */
1347
1353
  --dsn-text-area-hover-box-shadow-color: var(--dsn-text-area-border-color); /** Text area hover box shadow color */
1354
+ --dsn-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Text input invalid box shadow color */
1355
+ --dsn-time-input-icon-size: var(--dsn-button-size-small-icon-size); /** Clock icon size — matches the small button icon size */
1356
+ --dsn-time-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-time-input-icon-size) + var(--dsn-time-input-button-inset-inline-end) + var(--dsn-time-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
1348
1357
  --dsn-text-area-invalid-box-shadow-color: var(--dsn-text-area-invalid-border-color); /** Text area invalid box shadow color */
1349
1358
  --dsn-text-input-focus-background-color: var(--dsn-form-control-focus-background-color); /** Text input focus background */
1350
1359
  --dsn-text-input-focus-box-shadow-color: var(--dsn-text-input-focus-border-color); /** Text input focus box shadow color */
1351
1360
  --dsn-text-input-focus-color: var(--dsn-form-control-focus-color); /** Text input focus text color */
1352
1361
  --dsn-text-input-hover-box-shadow-color: var(--dsn-text-input-border-color); /** Text input hover box shadow color */
1353
- --dsn-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Text input invalid box shadow color */
1354
1362
  }
1355
1363
 
1356
1364
  @media (prefers-reduced-motion: reduce) {
package/dist/css/start-light-default.css CHANGED
@@ -616,6 +616,7 @@
616
616
  --dsn-breadcrumb-navigation-item-padding-inline: var(--dsn-space-none); /** No horizontal padding on items */
617
617
  --dsn-breadcrumb-navigation-link-column-gap: var(--dsn-space-text-xs); /** Gap between icon and link text */
618
618
  --dsn-breadcrumb-navigation-separator-color: var(--dsn-color-neutral-color-subtle); /** Separator icon color */
619
+ --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 */
619
620
  --dsn-button-border-radius: var(--dsn-border-radius-md); /** Button border radius */
620
621
  --dsn-button-border-width: var(--dsn-border-width-thin); /** Button border width */
621
622
  --dsn-button-font-family: var(--dsn-text-font-family-default); /** Button font family */
@@ -854,6 +855,7 @@
854
855
  --dsn-hero-background-color-inverse: var(--dsn-color-accent-1-inverse-bg-default); /** Achtergrondkleur van de inverse Hero — donker blauw */
855
856
  --dsn-hero-color-default: var(--dsn-color-accent-1-color-default); /** Tekstkleur in de standaard Hero */
856
857
  --dsn-hero-color-inverse: var(--dsn-color-accent-1-inverse-color-default); /** Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond */
858
+ --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 */
857
859
  --dsn-hero-image-blend-color: var(--dsn-color-accent-1-inverse-bg-default); /** Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang */
858
860
  --dsn-image-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de afbeelding */
859
861
  --dsn-image-caption-color: var(--dsn-color-neutral-color-subtle); /** Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst */
@@ -1009,8 +1011,14 @@
1009
1011
  --dsn-popover-footer-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de footer (16px) */
1010
1012
  --dsn-popover-footer-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de footer (16px) */
1011
1013
  --dsn-popover-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de footer (16px) */
1014
+ --dsn-pre-heading-color: var(--dsn-color-neutral-color-document); /** Pre-heading text color */
1015
+ --dsn-pre-heading-font-family: var(--dsn-text-font-family-default); /** Pre-heading font family */
1016
+ --dsn-pre-heading-font-size: var(--dsn-text-font-size-md); /** Pre-heading font size (same as body text) */
1017
+ --dsn-pre-heading-font-weight: var(--dsn-text-font-weight-bold); /** Pre-heading font weight (bold to distinguish from heading text) */
1018
+ --dsn-pre-heading-line-height: var(--dsn-text-line-height-md); /** Pre-heading line height */
1019
+ --dsn-pre-heading-margin-block-end: var(--dsn-space-row-xs); /** Space between pre-heading and heading text */
1012
1020
  --dsn-progress-bar-color-track: var(--dsn-color-neutral-bg-default); /** Grijze achtergrondtrack */
1013
- --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-color-default); /** Blauwe vulbalk — zelfde primaire accentkleur als Spinner */
1021
+ --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-inverse-bg-default); /** Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track */
1014
1022
  --dsn-progress-bar-border-radius: var(--dsn-border-radius-round); /** Volledig afgerond (pill-vorm) voor zowel track als fill */
1015
1023
  --dsn-progress-bar-gap-header: var(--dsn-space-block-xs); /** Ruimte tussen percentage-tekst en balk */
1016
1024
  --dsn-progress-bar-gap-footer: var(--dsn-space-block-xs); /** Ruimte tussen balk en beschrijving */
@@ -1188,13 +1196,13 @@
1188
1196
  --dsn-checkbox-indeterminate-focus-border-color: var(--dsn-form-control-focus-border-color);
1189
1197
  --dsn-container-elevated-box-shadow: var(--dsn-box-shadow-sm); /** Lichte schaduw voor kaart-achtige containers (cards, panels) */
1190
1198
  --dsn-details-summary-color: var(--dsn-color-action-2-color-default); /** Summary label color (follows Link via action-2) */
1191
- --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Summary label color on active */
1199
+ --dsn-details-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
1192
1200
  --dsn-drawer-box-shadow: var(--dsn-box-shadow-lg); /** Schaduw van het zijpaneel — hoogste elevatie (lg) */
1193
1201
  --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
1194
1202
  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
1195
1203
  --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 */
1196
1204
  --dsn-details-summary-hover-color: var(--dsn-color-action-2-color-hover); /** Summary label color on hover */
1197
- --dsn-details-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
1205
+ --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Summary label color on active */
1198
1206
  --dsn-file-input-color: var(--dsn-form-control-placeholder-color); /** Subtle text color for filename / 'No file chosen' text */
1199
1207
  --dsn-file-input-font-family: var(--dsn-form-control-font-family); /** File input font family */
1200
1208
  --dsn-file-input-font-size: var(--dsn-form-control-font-size); /** File input font size */
@@ -1331,8 +1339,6 @@
1331
1339
  --dsn-checkbox-indeterminate-focus-background-color: var(--dsn-form-control-focus-background-color);
1332
1340
  --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
1333
1341
  --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
1334
- --dsn-time-input-icon-size: var(--dsn-button-size-small-icon-size); /** Clock icon size — matches the small button icon size */
1335
- --dsn-time-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-time-input-icon-size) + var(--dsn-time-input-button-inset-inline-end) + var(--dsn-time-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
1336
1342
  --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
1337
1343
  --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
1338
1344
  --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);
@@ -1345,12 +1351,14 @@
1345
1351
  --dsn-text-area-focus-box-shadow-color: var(--dsn-text-area-focus-border-color); /** Text area focus box shadow color */
1346
1352
  --dsn-text-area-focus-color: var(--dsn-form-control-focus-color); /** Text area focus text color */
1347
1353
  --dsn-text-area-hover-box-shadow-color: var(--dsn-text-area-border-color); /** Text area hover box shadow color */
1354
+ --dsn-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Text input invalid box shadow color */
1355
+ --dsn-time-input-icon-size: var(--dsn-button-size-small-icon-size); /** Clock icon size — matches the small button icon size */
1356
+ --dsn-time-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-time-input-icon-size) + var(--dsn-time-input-button-inset-inline-end) + var(--dsn-time-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
1348
1357
  --dsn-text-area-invalid-box-shadow-color: var(--dsn-text-area-invalid-border-color); /** Text area invalid box shadow color */
1349
1358
  --dsn-text-input-focus-background-color: var(--dsn-form-control-focus-background-color); /** Text input focus background */
1350
1359
  --dsn-text-input-focus-box-shadow-color: var(--dsn-text-input-focus-border-color); /** Text input focus box shadow color */
1351
1360
  --dsn-text-input-focus-color: var(--dsn-form-control-focus-color); /** Text input focus text color */
1352
1361
  --dsn-text-input-hover-box-shadow-color: var(--dsn-text-input-border-color); /** Text input hover box shadow color */
1353
- --dsn-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Text input invalid box shadow color */
1354
1362
  }
1355
1363
 
1356
1364
  @media (prefers-reduced-motion: reduce) {
package/dist/css/start-light-information-dense.css CHANGED
@@ -618,6 +618,7 @@
618
618
  --dsn-breadcrumb-navigation-item-padding-inline: var(--dsn-space-none); /** No horizontal padding on items */
619
619
  --dsn-breadcrumb-navigation-link-column-gap: var(--dsn-space-text-xs); /** Gap between icon and link text */
620
620
  --dsn-breadcrumb-navigation-separator-color: var(--dsn-color-neutral-color-subtle); /** Separator icon color */
621
+ --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 */
621
622
  --dsn-button-border-radius: var(--dsn-border-radius-md); /** Button border radius */
622
623
  --dsn-button-border-width: var(--dsn-border-width-thin); /** Button border width */
623
624
  --dsn-button-font-family: var(--dsn-text-font-family-default); /** Button font family */
@@ -854,6 +855,7 @@
854
855
  --dsn-hero-background-color-inverse: var(--dsn-color-accent-1-inverse-bg-default); /** Achtergrondkleur van de inverse Hero — donker blauw */
855
856
  --dsn-hero-color-default: var(--dsn-color-accent-1-color-default); /** Tekstkleur in de standaard Hero */
856
857
  --dsn-hero-color-inverse: var(--dsn-color-accent-1-inverse-color-default); /** Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond */
858
+ --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 */
857
859
  --dsn-hero-image-blend-color: var(--dsn-color-accent-1-inverse-bg-default); /** Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang */
858
860
  --dsn-image-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de afbeelding */
859
861
  --dsn-image-caption-color: var(--dsn-color-neutral-color-subtle); /** Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst */
@@ -1009,8 +1011,14 @@
1009
1011
  --dsn-popover-footer-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de footer (16px) */
1010
1012
  --dsn-popover-footer-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de footer (16px) */
1011
1013
  --dsn-popover-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de footer (16px) */
1014
+ --dsn-pre-heading-color: var(--dsn-color-neutral-color-document); /** Pre-heading text color */
1015
+ --dsn-pre-heading-font-family: var(--dsn-text-font-family-default); /** Pre-heading font family */
1016
+ --dsn-pre-heading-font-size: var(--dsn-text-font-size-md); /** Pre-heading font size (same as body text) */
1017
+ --dsn-pre-heading-font-weight: var(--dsn-text-font-weight-bold); /** Pre-heading font weight (bold to distinguish from heading text) */
1018
+ --dsn-pre-heading-line-height: var(--dsn-text-line-height-md); /** Pre-heading line height */
1019
+ --dsn-pre-heading-margin-block-end: var(--dsn-space-row-xs); /** Space between pre-heading and heading text */
1012
1020
  --dsn-progress-bar-color-track: var(--dsn-color-neutral-bg-default); /** Grijze achtergrondtrack */
1013
- --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-color-default); /** Blauwe vulbalk — zelfde primaire accentkleur als Spinner */
1021
+ --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-inverse-bg-default); /** Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track */
1014
1022
  --dsn-progress-bar-border-radius: var(--dsn-border-radius-round); /** Volledig afgerond (pill-vorm) voor zowel track als fill */
1015
1023
  --dsn-progress-bar-gap-header: var(--dsn-space-block-xs); /** Ruimte tussen percentage-tekst en balk */
1016
1024
  --dsn-progress-bar-gap-footer: var(--dsn-space-block-xs); /** Ruimte tussen balk en beschrijving */
@@ -1188,13 +1196,13 @@
1188
1196
  --dsn-checkbox-indeterminate-focus-border-color: var(--dsn-form-control-focus-border-color);
1189
1197
  --dsn-container-elevated-box-shadow: var(--dsn-box-shadow-sm); /** Lichte schaduw voor kaart-achtige containers (cards, panels) */
1190
1198
  --dsn-details-summary-color: var(--dsn-color-action-2-color-default); /** Summary label color (follows Link via action-2) */
1191
- --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Summary label color on active */
1199
+ --dsn-details-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
1192
1200
  --dsn-drawer-box-shadow: var(--dsn-box-shadow-lg); /** Schaduw van het zijpaneel — hoogste elevatie (lg) */
1193
1201
  --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
1194
1202
  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
1195
1203
  --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 */
1196
1204
  --dsn-details-summary-hover-color: var(--dsn-color-action-2-color-hover); /** Summary label color on hover */
1197
- --dsn-details-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
1205
+ --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Summary label color on active */
1198
1206
  --dsn-file-input-color: var(--dsn-form-control-placeholder-color); /** Subtle text color for filename / 'No file chosen' text */
1199
1207
  --dsn-file-input-font-family: var(--dsn-form-control-font-family); /** File input font family */
1200
1208
  --dsn-file-input-font-size: var(--dsn-form-control-font-size); /** File input font size */
@@ -1331,8 +1339,6 @@
1331
1339
  --dsn-checkbox-indeterminate-focus-background-color: var(--dsn-form-control-focus-background-color);
1332
1340
  --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
1333
1341
  --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
1334
- --dsn-time-input-icon-size: var(--dsn-button-size-small-icon-size); /** Clock icon size — matches the small button icon size */
1335
- --dsn-time-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-time-input-icon-size) + var(--dsn-time-input-button-inset-inline-end) + var(--dsn-time-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
1336
1342
  --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
1337
1343
  --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
1338
1344
  --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);
@@ -1345,12 +1351,14 @@
1345
1351
  --dsn-text-area-focus-box-shadow-color: var(--dsn-text-area-focus-border-color); /** Text area focus box shadow color */
1346
1352
  --dsn-text-area-focus-color: var(--dsn-form-control-focus-color); /** Text area focus text color */
1347
1353
  --dsn-text-area-hover-box-shadow-color: var(--dsn-text-area-border-color); /** Text area hover box shadow color */
1354
+ --dsn-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Text input invalid box shadow color */
1355
+ --dsn-time-input-icon-size: var(--dsn-button-size-small-icon-size); /** Clock icon size — matches the small button icon size */
1356
+ --dsn-time-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-time-input-icon-size) + var(--dsn-time-input-button-inset-inline-end) + var(--dsn-time-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
1348
1357
  --dsn-text-area-invalid-box-shadow-color: var(--dsn-text-area-invalid-border-color); /** Text area invalid box shadow color */
1349
1358
  --dsn-text-input-focus-background-color: var(--dsn-form-control-focus-background-color); /** Text input focus background */
1350
1359
  --dsn-text-input-focus-box-shadow-color: var(--dsn-text-input-focus-border-color); /** Text input focus box shadow color */
1351
1360
  --dsn-text-input-focus-color: var(--dsn-form-control-focus-color); /** Text input focus text color */
1352
1361
  --dsn-text-input-hover-box-shadow-color: var(--dsn-text-input-border-color); /** Text input hover box shadow color */
1353
- --dsn-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Text input invalid box shadow color */
1354
1362
  }
1355
1363
 
1356
1364
  @media (prefers-reduced-motion: reduce) {
package/dist/css/variables-dark.css CHANGED
@@ -616,6 +616,7 @@
616
616
  --dsn-breadcrumb-navigation-item-padding-inline: var(--dsn-space-none); /** No horizontal padding on items */
617
617
  --dsn-breadcrumb-navigation-link-column-gap: var(--dsn-space-text-xs); /** Gap between icon and link text */
618
618
  --dsn-breadcrumb-navigation-separator-color: var(--dsn-color-neutral-color-subtle); /** Separator icon color */
619
+ --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 */
619
620
  --dsn-button-border-radius: var(--dsn-border-radius-md); /** Button border radius */
620
621
  --dsn-button-border-width: var(--dsn-border-width-thin); /** Button border width */
621
622
  --dsn-button-font-family: var(--dsn-text-font-family-default); /** Button font family */
@@ -854,6 +855,7 @@
854
855
  --dsn-hero-background-color-inverse: var(--dsn-color-accent-1-inverse-bg-default); /** Achtergrondkleur van de inverse Hero — donker blauw */
855
856
  --dsn-hero-color-default: var(--dsn-color-accent-1-color-default); /** Tekstkleur in de standaard Hero */
856
857
  --dsn-hero-color-inverse: var(--dsn-color-accent-1-inverse-color-default); /** Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond */
858
+ --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 */
857
859
  --dsn-hero-image-blend-color: var(--dsn-color-accent-1-inverse-bg-default); /** Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang */
858
860
  --dsn-image-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de afbeelding */
859
861
  --dsn-image-caption-color: var(--dsn-color-neutral-color-subtle); /** Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst */
@@ -1009,8 +1011,14 @@
1009
1011
  --dsn-popover-footer-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de footer (16px) */
1010
1012
  --dsn-popover-footer-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de footer (16px) */
1011
1013
  --dsn-popover-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de footer (16px) */
1014
+ --dsn-pre-heading-color: var(--dsn-color-neutral-color-document); /** Pre-heading text color */
1015
+ --dsn-pre-heading-font-family: var(--dsn-text-font-family-default); /** Pre-heading font family */
1016
+ --dsn-pre-heading-font-size: var(--dsn-text-font-size-md); /** Pre-heading font size (same as body text) */
1017
+ --dsn-pre-heading-font-weight: var(--dsn-text-font-weight-bold); /** Pre-heading font weight (bold to distinguish from heading text) */
1018
+ --dsn-pre-heading-line-height: var(--dsn-text-line-height-md); /** Pre-heading line height */
1019
+ --dsn-pre-heading-margin-block-end: var(--dsn-space-row-xs); /** Space between pre-heading and heading text */
1012
1020
  --dsn-progress-bar-color-track: var(--dsn-color-neutral-bg-default); /** Grijze achtergrondtrack */
1013
- --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-color-default); /** Blauwe vulbalk — zelfde primaire accentkleur als Spinner */
1021
+ --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-inverse-bg-default); /** Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track */
1014
1022
  --dsn-progress-bar-border-radius: var(--dsn-border-radius-round); /** Volledig afgerond (pill-vorm) voor zowel track als fill */
1015
1023
  --dsn-progress-bar-gap-header: var(--dsn-space-block-xs); /** Ruimte tussen percentage-tekst en balk */
1016
1024
  --dsn-progress-bar-gap-footer: var(--dsn-space-block-xs); /** Ruimte tussen balk en beschrijving */
@@ -1188,13 +1196,13 @@
1188
1196
  --dsn-checkbox-indeterminate-focus-border-color: var(--dsn-form-control-focus-border-color);
1189
1197
  --dsn-container-elevated-box-shadow: var(--dsn-box-shadow-sm); /** Lichte schaduw voor kaart-achtige containers (cards, panels) */
1190
1198
  --dsn-details-summary-color: var(--dsn-color-action-2-color-default); /** Summary label color (follows Link via action-2) */
1191
- --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Summary label color on active */
1199
+ --dsn-details-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
1192
1200
  --dsn-drawer-box-shadow: var(--dsn-box-shadow-lg); /** Schaduw van het zijpaneel — hoogste elevatie (lg) */
1193
1201
  --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
1194
1202
  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
1195
1203
  --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 */
1196
1204
  --dsn-details-summary-hover-color: var(--dsn-color-action-2-color-hover); /** Summary label color on hover */
1197
- --dsn-details-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
1205
+ --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Summary label color on active */
1198
1206
  --dsn-file-input-color: var(--dsn-form-control-placeholder-color); /** Subtle text color for filename / 'No file chosen' text */
1199
1207
  --dsn-file-input-font-family: var(--dsn-form-control-font-family); /** File input font family */
1200
1208
  --dsn-file-input-font-size: var(--dsn-form-control-font-size); /** File input font size */
@@ -1331,8 +1339,6 @@
1331
1339
  --dsn-checkbox-indeterminate-focus-background-color: var(--dsn-form-control-focus-background-color);
1332
1340
  --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
1333
1341
  --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
1334
- --dsn-time-input-icon-size: var(--dsn-button-size-small-icon-size); /** Clock icon size — matches the small button icon size */
1335
- --dsn-time-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-time-input-icon-size) + var(--dsn-time-input-button-inset-inline-end) + var(--dsn-time-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
1336
1342
  --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
1337
1343
  --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
1338
1344
  --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);
@@ -1345,12 +1351,14 @@
1345
1351
  --dsn-text-area-focus-box-shadow-color: var(--dsn-text-area-focus-border-color); /** Text area focus box shadow color */
1346
1352
  --dsn-text-area-focus-color: var(--dsn-form-control-focus-color); /** Text area focus text color */
1347
1353
  --dsn-text-area-hover-box-shadow-color: var(--dsn-text-area-border-color); /** Text area hover box shadow color */
1354
+ --dsn-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Text input invalid box shadow color */
1355
+ --dsn-time-input-icon-size: var(--dsn-button-size-small-icon-size); /** Clock icon size — matches the small button icon size */
1356
+ --dsn-time-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-time-input-icon-size) + var(--dsn-time-input-button-inset-inline-end) + var(--dsn-time-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
1348
1357
  --dsn-text-area-invalid-box-shadow-color: var(--dsn-text-area-invalid-border-color); /** Text area invalid box shadow color */
1349
1358
  --dsn-text-input-focus-background-color: var(--dsn-form-control-focus-background-color); /** Text input focus background */
1350
1359
  --dsn-text-input-focus-box-shadow-color: var(--dsn-text-input-focus-border-color); /** Text input focus box shadow color */
1351
1360
  --dsn-text-input-focus-color: var(--dsn-form-control-focus-color); /** Text input focus text color */
1352
1361
  --dsn-text-input-hover-box-shadow-color: var(--dsn-text-input-border-color); /** Text input hover box shadow color */
1353
- --dsn-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Text input invalid box shadow color */
1354
1362
  }
1355
1363
 
1356
1364
  @media (prefers-reduced-motion: reduce) {
package/dist/css/variables.css CHANGED
@@ -616,6 +616,7 @@
616
616
  --dsn-breadcrumb-navigation-item-padding-inline: var(--dsn-space-none); /** No horizontal padding on items */
617
617
  --dsn-breadcrumb-navigation-link-column-gap: var(--dsn-space-text-xs); /** Gap between icon and link text */
618
618
  --dsn-breadcrumb-navigation-separator-color: var(--dsn-color-neutral-color-subtle); /** Separator icon color */
619
+ --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 */
619
620
  --dsn-button-border-radius: var(--dsn-border-radius-md); /** Button border radius */
620
621
  --dsn-button-border-width: var(--dsn-border-width-thin); /** Button border width */
621
622
  --dsn-button-font-family: var(--dsn-text-font-family-default); /** Button font family */
@@ -854,6 +855,7 @@
854
855
  --dsn-hero-background-color-inverse: var(--dsn-color-accent-1-inverse-bg-default); /** Achtergrondkleur van de inverse Hero — donker blauw */
855
856
  --dsn-hero-color-default: var(--dsn-color-accent-1-color-default); /** Tekstkleur in de standaard Hero */
856
857
  --dsn-hero-color-inverse: var(--dsn-color-accent-1-inverse-color-default); /** Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond */
858
+ --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 */
857
859
  --dsn-hero-image-blend-color: var(--dsn-color-accent-1-inverse-bg-default); /** Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang */
858
860
  --dsn-image-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de afbeelding */
859
861
  --dsn-image-caption-color: var(--dsn-color-neutral-color-subtle); /** Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst */
@@ -1009,8 +1011,14 @@
1009
1011
  --dsn-popover-footer-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de footer (16px) */
1010
1012
  --dsn-popover-footer-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de footer (16px) */
1011
1013
  --dsn-popover-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de footer (16px) */
1014
+ --dsn-pre-heading-color: var(--dsn-color-neutral-color-document); /** Pre-heading text color */
1015
+ --dsn-pre-heading-font-family: var(--dsn-text-font-family-default); /** Pre-heading font family */
1016
+ --dsn-pre-heading-font-size: var(--dsn-text-font-size-md); /** Pre-heading font size (same as body text) */
1017
+ --dsn-pre-heading-font-weight: var(--dsn-text-font-weight-bold); /** Pre-heading font weight (bold to distinguish from heading text) */
1018
+ --dsn-pre-heading-line-height: var(--dsn-text-line-height-md); /** Pre-heading line height */
1019
+ --dsn-pre-heading-margin-block-end: var(--dsn-space-row-xs); /** Space between pre-heading and heading text */
1012
1020
  --dsn-progress-bar-color-track: var(--dsn-color-neutral-bg-default); /** Grijze achtergrondtrack */
1013
- --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-color-default); /** Blauwe vulbalk — zelfde primaire accentkleur als Spinner */
1021
+ --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-inverse-bg-default); /** Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track */
1014
1022
  --dsn-progress-bar-border-radius: var(--dsn-border-radius-round); /** Volledig afgerond (pill-vorm) voor zowel track als fill */
1015
1023
  --dsn-progress-bar-gap-header: var(--dsn-space-block-xs); /** Ruimte tussen percentage-tekst en balk */
1016
1024
  --dsn-progress-bar-gap-footer: var(--dsn-space-block-xs); /** Ruimte tussen balk en beschrijving */
@@ -1188,13 +1196,13 @@
1188
1196
  --dsn-checkbox-indeterminate-focus-border-color: var(--dsn-form-control-focus-border-color);
1189
1197
  --dsn-container-elevated-box-shadow: var(--dsn-box-shadow-sm); /** Lichte schaduw voor kaart-achtige containers (cards, panels) */
1190
1198
  --dsn-details-summary-color: var(--dsn-color-action-2-color-default); /** Summary label color (follows Link via action-2) */
1191
- --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Summary label color on active */
1199
+ --dsn-details-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
1192
1200
  --dsn-drawer-box-shadow: var(--dsn-box-shadow-lg); /** Schaduw van het zijpaneel — hoogste elevatie (lg) */
1193
1201
  --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
1194
1202
  --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
1195
1203
  --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 */
1196
1204
  --dsn-details-summary-hover-color: var(--dsn-color-action-2-color-hover); /** Summary label color on hover */
1197
- --dsn-details-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
1205
+ --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Summary label color on active */
1198
1206
  --dsn-file-input-color: var(--dsn-form-control-placeholder-color); /** Subtle text color for filename / 'No file chosen' text */
1199
1207
  --dsn-file-input-font-family: var(--dsn-form-control-font-family); /** File input font family */
1200
1208
  --dsn-file-input-font-size: var(--dsn-form-control-font-size); /** File input font size */
@@ -1331,8 +1339,6 @@
1331
1339
  --dsn-checkbox-indeterminate-focus-background-color: var(--dsn-form-control-focus-background-color);
1332
1340
  --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
1333
1341
  --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
1334
- --dsn-time-input-icon-size: var(--dsn-button-size-small-icon-size); /** Clock icon size — matches the small button icon size */
1335
- --dsn-time-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-time-input-icon-size) + var(--dsn-time-input-button-inset-inline-end) + var(--dsn-time-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
1336
1342
  --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
1337
1343
  --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
1338
1344
  --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);
@@ -1345,12 +1351,14 @@
1345
1351
  --dsn-text-area-focus-box-shadow-color: var(--dsn-text-area-focus-border-color); /** Text area focus box shadow color */
1346
1352
  --dsn-text-area-focus-color: var(--dsn-form-control-focus-color); /** Text area focus text color */
1347
1353
  --dsn-text-area-hover-box-shadow-color: var(--dsn-text-area-border-color); /** Text area hover box shadow color */
1354
+ --dsn-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Text input invalid box shadow color */
1355
+ --dsn-time-input-icon-size: var(--dsn-button-size-small-icon-size); /** Clock icon size — matches the small button icon size */
1356
+ --dsn-time-input-padding-inline-end-with-icon: calc((var(--dsn-button-size-small-icon-only-padding) * 2) + var(--dsn-time-input-icon-size) + var(--dsn-time-input-button-inset-inline-end) + var(--dsn-time-input-icon-gap)); /** Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap */
1348
1357
  --dsn-text-area-invalid-box-shadow-color: var(--dsn-text-area-invalid-border-color); /** Text area invalid box shadow color */
1349
1358
  --dsn-text-input-focus-background-color: var(--dsn-form-control-focus-background-color); /** Text input focus background */
1350
1359
  --dsn-text-input-focus-box-shadow-color: var(--dsn-text-input-focus-border-color); /** Text input focus box shadow color */
1351
1360
  --dsn-text-input-focus-color: var(--dsn-form-control-focus-color); /** Text input focus text color */
1352
1361
  --dsn-text-input-hover-box-shadow-color: var(--dsn-text-input-border-color); /** Text input hover box shadow color */
1353
- --dsn-text-input-invalid-box-shadow-color: var(--dsn-text-input-invalid-border-color); /** Text input invalid box shadow color */
1354
1362
  }
1355
1363
 
1356
1364
  @media (prefers-reduced-motion: reduce) {
package/dist/css/wireframe-dark-default.css CHANGED
@@ -402,6 +402,7 @@
402
402
  --dsn-breadcrumb-navigation-item-padding-inline: var(--dsn-space-none); /** No horizontal padding on items */
403
403
  --dsn-breadcrumb-navigation-link-column-gap: var(--dsn-space-text-xs); /** Gap between icon and link text */
404
404
  --dsn-breadcrumb-navigation-separator-color: var(--dsn-color-neutral-color-subtle); /** Separator icon color */
405
+ --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 */
405
406
  --dsn-button-border-radius: var(--dsn-border-radius-md); /** Button border radius */
406
407
  --dsn-button-border-width: var(--dsn-border-width-thin); /** Button border width */
407
408
  --dsn-button-font-family: var(--dsn-text-font-family-default); /** Button font family */
@@ -590,6 +591,7 @@
590
591
  --dsn-grid-margin: var(--dsn-space-column-3xl); /** Outer padding on both sides of the grid container */
591
592
  --dsn-hero-padding-block: var(--dsn-space-block-4xl); /** Verticale padding van de Hero-inhoud */
592
593
  --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 */
594
+ --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 */
593
595
  --dsn-image-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de afbeelding */
594
596
  --dsn-image-caption-color: var(--dsn-color-neutral-color-subtle); /** Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst */
595
597
  --dsn-image-caption-font-size: var(--dsn-text-font-size-sm); /** Iets kleiner dan bodytekst om hiërarchie te markeren */
@@ -718,6 +720,12 @@
718
720
  --dsn-popover-footer-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de footer (16px) */
719
721
  --dsn-popover-footer-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de footer (16px) */
720
722
  --dsn-popover-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de footer (16px) */
723
+ --dsn-pre-heading-color: var(--dsn-color-neutral-color-document); /** Pre-heading text color */
724
+ --dsn-pre-heading-font-family: var(--dsn-text-font-family-default); /** Pre-heading font family */
725
+ --dsn-pre-heading-font-size: var(--dsn-text-font-size-md); /** Pre-heading font size (same as body text) */
726
+ --dsn-pre-heading-font-weight: var(--dsn-text-font-weight-bold); /** Pre-heading font weight (bold to distinguish from heading text) */
727
+ --dsn-pre-heading-line-height: var(--dsn-text-line-height-md); /** Pre-heading line height */
728
+ --dsn-pre-heading-margin-block-end: var(--dsn-space-row-xs); /** Space between pre-heading and heading text */
721
729
  --dsn-progress-bar-color-track: var(--dsn-color-neutral-bg-default); /** Grijze achtergrondtrack */
722
730
  --dsn-progress-bar-border-radius: var(--dsn-border-radius-round); /** Volledig afgerond (pill-vorm) voor zowel track als fill */
723
731
  --dsn-progress-bar-gap-header: var(--dsn-space-block-xs); /** Ruimte tussen percentage-tekst en balk */
@@ -1039,7 +1047,6 @@
1039
1047
  --dsn-checkbox-indeterminate-disabled-color: var(--dsn-form-control-disabled-color);
1040
1048
  --dsn-checkbox-indeterminate-focus-border-color: var(--dsn-form-control-focus-border-color);
1041
1049
  --dsn-checkbox-indeterminate-hover-color: var(--dsn-color-neutral-inverse-color-default);
1042
- --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
1043
1050
  --dsn-file-input-color: var(--dsn-form-control-placeholder-color); /** Subtle text color for filename / 'No file chosen' text */
1044
1051
  --dsn-file-input-font-family: var(--dsn-form-control-font-family); /** File input font family */
1045
1052
  --dsn-file-input-font-size: var(--dsn-form-control-font-size); /** File input font size */
@@ -1050,6 +1057,10 @@
1050
1057
  --dsn-file-media-icon-size: var(--dsn-icon-size-md);
1051
1058
  --dsn-file-status-icon-color: var(--dsn-color-positive-color-default); /** Zelfde token als FormFieldStatus positive variant */
1052
1059
  --dsn-file-status-icon-size: var(--dsn-icon-size-md);
1060
+ --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
1061
+ --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 */
1062
+ --dsn-details-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
1063
+ --dsn-drawer-heading-color: var(--dsn-heading-color); /** Kleur van de zijpaneel-heading */
1053
1064
  --dsn-form-field-error-message-color: var(--dsn-color-negative-color-default); /** Form field error message text color (negative sentiment) */
1054
1065
  --dsn-form-field-error-message-icon-size: var(--dsn-icon-size-md); /** Error message icon size */
1055
1066
  --dsn-form-field-status-icon-size: var(--dsn-icon-size-md); /** Icon size for positive and warning variants */
@@ -1090,7 +1101,6 @@
1090
1101
  --dsn-page-header-navbar-background-color: var(--dsn-color-accent-1-bg-default); /** Navigatiebalk achtergrond — merkkleur accent-1 */
1091
1102
  --dsn-page-header-search-panel-background-color: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van het zoekpaneel — merkkleur voor branding */
1092
1103
  --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
1093
- --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-color-default); /** Blauwe vulbalk — zelfde primaire accentkleur als Spinner */
1094
1104
  --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Text color for the legend (reuses form field label) */
1095
1105
  --dsn-radio-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font family for the legend (reuses form field label) */
1096
1106
  --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 @@
1272
1282
  --dsn-checkbox-checked-focus-color: var(--dsn-form-control-focus-color);
1273
1283
  --dsn-checkbox-indeterminate-focus-background-color: var(--dsn-form-control-focus-background-color);
1274
1284
  --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
1275
- --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
1276
- --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 */
1277
- --dsn-details-icon-size: var(--dsn-icon-size-md); /** Chevron icon size */
1278
1285
  --dsn-details-summary-color: var(--dsn-color-action-2-color-default); /** Summary label color (follows Link via action-2) */
1279
1286
  --dsn-details-summary-hover-color: var(--dsn-color-action-2-color-hover); /** Summary label color on hover */
1280
1287
  --dsn-details-summary-active-color: var(--dsn-color-action-2-color-active); /** Summary label color on active */
@@ -1306,6 +1313,7 @@
1306
1313
  --dsn-number-badge-warning-background-color: var(--dsn-color-warning-inverse-bg-default); /** Achtergrondkleur voor warning variant */
1307
1314
  --dsn-number-badge-info-color: var(--dsn-color-info-inverse-color-default); /** Tekstkleur voor info variant (wit op donkere achtergrond) */
1308
1315
  --dsn-number-badge-info-background-color: var(--dsn-color-info-inverse-bg-default); /** Achtergrondkleur voor info variant */
1316
+ --dsn-progress-bar-color-fill: var(--dsn-color-accent-1-inverse-bg-default); /** Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track */
1309
1317
  --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
1310
1318
  --dsn-radio-invalid-background-color: var(--dsn-form-control-invalid-background-color);
1311
1319
  --dsn-radio-invalid-border-color: var(--dsn-form-control-invalid-border-color);