@dsn-starter-kit/design-tokens 3.4.0 → 4.0.0

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 (64) 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/start-dark.css +1 -1
  4. package/dist/css/scoped/start-light-hero-image.css +1 -1
  5. package/dist/css/scoped/start-light.css +1 -1
  6. package/dist/css/scoped/wireframe-dark.css +1 -1
  7. package/dist/css/scoped/wireframe-light-hero-image.css +1 -1
  8. package/dist/css/scoped/wireframe-light.css +1 -1
  9. package/dist/css/start-dark-default.css +43 -13
  10. package/dist/css/start-dark-information-dense.css +43 -13
  11. package/dist/css/start-light-default.css +43 -13
  12. package/dist/css/start-light-information-dense.css +43 -13
  13. package/dist/css/variables-dark-scoped.css +1 -1
  14. package/dist/css/variables-dark.css +43 -13
  15. package/dist/css/variables.css +43 -13
  16. package/dist/css/wireframe-dark-default.css +47 -17
  17. package/dist/css/wireframe-dark-information-dense.css +47 -17
  18. package/dist/css/wireframe-light-default.css +47 -17
  19. package/dist/css/wireframe-light-information-dense.css +47 -17
  20. package/dist/js/start-dark-default.d.ts +40 -10
  21. package/dist/js/start-dark-default.js +867 -209
  22. package/dist/js/start-dark-information-dense.d.ts +40 -10
  23. package/dist/js/start-dark-information-dense.js +867 -209
  24. package/dist/js/start-light-default.d.ts +40 -10
  25. package/dist/js/start-light-default.js +867 -209
  26. package/dist/js/start-light-information-dense.d.ts +40 -10
  27. package/dist/js/start-light-information-dense.js +867 -209
  28. package/dist/js/tokens-dark.cjs +914 -100
  29. package/dist/js/tokens-dark.d.cts +40 -10
  30. package/dist/js/tokens-dark.d.ts +40 -10
  31. package/dist/js/tokens-dark.js +867 -209
  32. package/dist/js/tokens.cjs +914 -100
  33. package/dist/js/tokens.d.cts +40 -10
  34. package/dist/js/tokens.d.ts +40 -10
  35. package/dist/js/tokens.js +867 -209
  36. package/dist/js/wireframe-dark-default.d.ts +40 -10
  37. package/dist/js/wireframe-dark-default.js +881 -221
  38. package/dist/js/wireframe-dark-information-dense.d.ts +40 -10
  39. package/dist/js/wireframe-dark-information-dense.js +881 -221
  40. package/dist/js/wireframe-light-default.d.ts +40 -10
  41. package/dist/js/wireframe-light-default.js +881 -221
  42. package/dist/js/wireframe-light-information-dense.d.ts +40 -10
  43. package/dist/js/wireframe-light-information-dense.js +881 -221
  44. package/dist/json/start-dark-default.json +40 -10
  45. package/dist/json/start-dark-information-dense.json +40 -10
  46. package/dist/json/start-light-default.json +40 -10
  47. package/dist/json/start-light-information-dense.json +40 -10
  48. package/dist/json/tokens-dark.json +40 -10
  49. package/dist/json/tokens.json +40 -10
  50. package/dist/json/wireframe-dark-default.json +40 -10
  51. package/dist/json/wireframe-dark-information-dense.json +40 -10
  52. package/dist/json/wireframe-light-default.json +40 -10
  53. package/dist/json/wireframe-light-information-dense.json +40 -10
  54. package/dist/scss/_start-dark-default.scss +43 -13
  55. package/dist/scss/_start-dark-information-dense.scss +43 -13
  56. package/dist/scss/_start-light-default.scss +43 -13
  57. package/dist/scss/_start-light-information-dense.scss +43 -13
  58. package/dist/scss/_variables-dark.scss +43 -13
  59. package/dist/scss/_variables.scss +43 -13
  60. package/dist/scss/_wireframe-dark-default.scss +47 -17
  61. package/dist/scss/_wireframe-dark-information-dense.scss +47 -17
  62. package/dist/scss/_wireframe-light-default.scss +47 -17
  63. package/dist/scss/_wireframe-light-information-dense.scss +47 -17
  64. 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 Wed, 02 Sep 2026 09:06:11 GMT
3
+ * Generated on Sat, 26 Sep 2026 07:42:53 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 Wed, 02 Sep 2026 09:06:11 GMT
3
+ * Generated on Sat, 26 Sep 2026 07:42:53 GMT
4
4
  */
5
5
 
6
6
  .dsn-density-dense {
package/dist/css/scoped/start-dark.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 02 Sep 2026 09:06:11 GMT
3
+ * Generated on Sat, 26 Sep 2026 07:42:53 GMT
4
4
  */
5
5
 
6
6
  .dsn-theme-start.dsn-mode-dark, .dsn-mode-dark .dsn-theme-start {
package/dist/css/scoped/start-light-hero-image.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 02 Sep 2026 09:06:12 GMT
3
+ * Generated on Sat, 26 Sep 2026 07:42:54 GMT
4
4
  */
5
5
 
6
6
  .dsn-theme-start .dsn-hero--image {
package/dist/css/scoped/start-light.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 02 Sep 2026 09:06:11 GMT
3
+ * Generated on Sat, 26 Sep 2026 07:42:53 GMT
4
4
  */
5
5
 
6
6
  .dsn-theme-start {
package/dist/css/scoped/wireframe-dark.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 02 Sep 2026 09:06:12 GMT
3
+ * Generated on Sat, 26 Sep 2026 07:42:53 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-hero-image.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 02 Sep 2026 09:06:12 GMT
3
+ * Generated on Sat, 26 Sep 2026 07:42:54 GMT
4
4
  */
5
5
 
6
6
  .dsn-theme-wireframe .dsn-hero--image {
package/dist/css/scoped/wireframe-light.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 02 Sep 2026 09:06:12 GMT
3
+ * Generated on Sat, 26 Sep 2026 07:42:53 GMT
4
4
  */
5
5
 
6
6
  .dsn-theme-wireframe {
package/dist/css/start-dark-default.css CHANGED
@@ -98,12 +98,12 @@
98
98
  --dsn-focus-outline-color: #f4f4f4; /** Kleur van de focusomtrek — licht voor donkere achtergronden */
99
99
  --dsn-focus-inverse-outline-color: #0b0c0c; /** Kleur van de focusomtrek op lichte/gekleurde achtergronden in dark mode — tegenhanger van outline-color */
100
100
  --dsn-form-control-max-inline-size: 25rem; /** Maximale breedte van form controls */
101
- --dsn-form-control-width-xs: 10ch; /** Extra kleine breedte — voor zeer korte invoervelden (bijv. postcode, jaar, CVV) */
102
- --dsn-form-control-width-sm: 14ch; /** Kleine breedte — voor korte invoervelden (bijv. tijd UU:MM, korte codes) */
103
- --dsn-form-control-width-md: 20ch; /** Middelgrote breedte — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer) */
104
- --dsn-form-control-width-lg: 32ch; /** Grote breedte (standaard) — voor standaard invoervelden (bijv. naam, e-mail) */
105
- --dsn-form-control-width-xl: 48ch; /** Extra grote breedte — voor langere invoervelden (bijv. URL) */
106
- --dsn-form-control-width-full: 100%; /** Volledige breedte — responsief aan de container */
101
+ --dsn-form-control-inline-size-xs: 10ch; /** Extra kleine inline-size — voor zeer korte invoervelden (bijv. postcode, jaar, CVV) */
102
+ --dsn-form-control-inline-size-sm: 14ch; /** Kleine inline-size — voor korte invoervelden (bijv. tijd UU:MM, korte codes) */
103
+ --dsn-form-control-inline-size-md: 20ch; /** Middelgrote inline-size — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer) */
104
+ --dsn-form-control-inline-size-lg: 32ch; /** Grote inline-size (standaard) — voor standaard invoervelden (bijv. naam, e-mail) */
105
+ --dsn-form-control-inline-size-xl: 48ch; /** Extra grote inline-size — voor langere invoervelden (bijv. URL) */
106
+ --dsn-form-control-inline-size-full: 100%; /** Volledige inline-size — responsief aan de container */
107
107
  --dsn-breakpoint-sm: 36em; /** Klein breakpoint - ~576px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
108
108
  --dsn-breakpoint-md: 44em; /** Middelgroot breakpoint - ~704px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
109
109
  --dsn-breakpoint-lg: 64em; /** Groot breakpoint - ~1024px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
@@ -303,6 +303,9 @@
303
303
  --dsn-breadcrumb-navigation-link-active-text-decoration-line: none; /** Geen onderstreping op active */
304
304
  --dsn-button-size-small-min-block-size: 2.5rem; /** Minimale blokhoogte van de small button (verkleind aanraakdoel — 40px) */
305
305
  --dsn-card-box-shadow: none; /** Schaduw standaard — geen schaduw by default */
306
+ --dsn-card-min-block-size: auto; /** Minimale hoogte van de card */
307
+ --dsn-card-body-padding-block-start: 0; /** Bovenkant padding van de body; de header levert de ruimte erboven */
308
+ --dsn-card-footer-padding-block-start: 0; /** Bovenkant padding van de footer; de sectie erboven levert de ruimte */
306
309
  --dsn-card-group-item-min-width: 17.5rem; /** Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill */
307
310
  --dsn-checkbox-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); /** Grootte van de checkbox — vloeiend op basis van tekstgrootte en line-height */
308
311
  --dsn-checkbox-checked-border-color: rgba(0, 0, 0, 0);
@@ -335,7 +338,7 @@
335
338
  --dsn-link-text-decoration-thickness: auto; /** Dikte van de onderstreping van de link */
336
339
  --dsn-link-text-underline-offset: 4px; /** Onderstrepingsafstand van de link */
337
340
  --dsn-link-hover-text-decoration-line: none; /** Tekstverfraaiing van de link op hover */
338
- --dsn-menu-link-current-indicator-width: 3px; /** MenuLink-specifiek: breedte van de border-inline-start indicator */
341
+ --dsn-menu-item-indicator-width: 3px; /** Gedeeld: dikte van de indicator (border-inline-start, of border-block-end in een horizontaal Menu). Altijd aanwezig zodat hover en current niet verspringen */
339
342
  --dsn-modal-dialog-max-width: 40rem; /** Maximale breedte van het dialoogvenster (640px) */
340
343
  --dsn-page-footer-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageFooter (32px) — zelfde waarde als page-header.logo.max-block-size voor consistente logogrootte */
341
344
  --dsn-page-header-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageHeader op mobile (32px). Breedte schaalt automatisch via inline-size: auto. White-label: overschrijf dit token per thema voor andere logo-proporties. */
@@ -713,17 +716,36 @@
713
716
  --dsn-card-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de card (8px) */
714
717
  --dsn-card-border-width: var(--dsn-border-width-thin); /** Randbreedte van de card */
715
718
  --dsn-card-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de card */
716
- --dsn-card-body-padding-block: var(--dsn-space-block-xl); /** Verticale padding van de card body (16px) */
717
- --dsn-card-body-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card body (16px) */
718
- --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de card body (12px) */
719
- --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de card footer (24px) */
720
- --dsn-card-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card footer (16px) */
719
+ --dsn-card-header-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de header (16px) */
720
+ --dsn-card-header-padding-block-end: var(--dsn-space-block-lg); /** Onderkant padding van de header (12px); ook de ruimte naar de body */
721
+ --dsn-card-header-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de header (16px) */
722
+ --dsn-card-header-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de header (16px) */
723
+ --dsn-card-header-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de header (12px) */
724
+ --dsn-card-body-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de body (16px) */
725
+ --dsn-card-body-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de body (16px) */
726
+ --dsn-card-body-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de body (16px) */
727
+ --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de body (12px) */
728
+ --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de footer (24px) */
729
+ --dsn-card-footer-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de footer (16px) */
730
+ --dsn-card-footer-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de footer (16px) */
731
+ --dsn-card-footer-column-gap: var(--dsn-space-inline-md); /** Horizontale ruimte tussen directe kinderen van de footer */
721
732
  --dsn-card-image-placeholder-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van de afbeeldingsplaceholder */
722
733
  --dsn-card-image-placeholder-color: var(--dsn-color-neutral-color-subtle); /** Kleur van het icoon in de afbeeldingsplaceholder */
723
734
  --dsn-card-heading-font-family: var(--dsn-heading-font-family); /** Lettertype van de card heading */
724
735
  --dsn-card-heading-font-weight: var(--dsn-heading-font-weight); /** Vetgedrukt van de card heading */
725
736
  --dsn-card-heading-font-size: var(--dsn-text-font-size-lg); /** Tekstgrootte van de card heading (20–24px fluid) */
726
737
  --dsn-card-heading-line-height: var(--dsn-text-line-height-lg); /** Regelafstand van de card heading */
738
+ --dsn-card-label-color: var(--dsn-color-neutral-color-document); /** Kleur van het card-label */
739
+ --dsn-card-label-font-family: var(--dsn-text-font-family-default); /** Lettertype van het card-label */
740
+ --dsn-card-label-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van het card-label */
741
+ --dsn-card-label-font-weight: var(--dsn-text-font-weight-bold); /** Gewicht van het card-label */
742
+ --dsn-card-label-line-height: var(--dsn-text-line-height-md); /** Regelafstand van het card-label */
743
+ --dsn-card-description-color: var(--dsn-color-neutral-color-document); /** Kleur van de card-description */
744
+ --dsn-card-description-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van de card-description */
745
+ --dsn-card-description-line-height: var(--dsn-text-line-height-md); /** Regelafstand van de card-description */
746
+ --dsn-card-meta-color: var(--dsn-color-neutral-color-subtle); /** Kleur van de card-meta (bijv. datum) */
747
+ --dsn-card-meta-font-size: var(--dsn-text-font-size-sm); /** Tekstgrootte van de card-meta */
748
+ --dsn-card-meta-line-height: var(--dsn-text-line-height-sm); /** Regelafstand van de card-meta */
727
749
  --dsn-card-group-gap: var(--dsn-space-inline-xl); /** Ruimte tussen cards in een CardGroup (16px) */
728
750
  --dsn-checkbox-group-border-width: var(--dsn-border-width-none); /** Standaard geen border op de fieldset */
729
751
  --dsn-checkbox-group-gap: var(--dsn-space-block-sm); /** Ruimte tussen de checkbox-opties in de groep */
@@ -893,6 +915,7 @@
893
915
  --dsn-menu-item-gap: var(--dsn-space-inline-md); /** Gedeeld: ruimte tussen icoon, label en badge */
894
916
  --dsn-menu-item-min-block-size: var(--dsn-pointer-target-min-block-size); /** Gedeeld: minimale raakbare hoogte — WCAG pointer target */
895
917
  --dsn-menu-item-background-color: var(--dsn-color-transparent); /** Gedeeld: standaard achtergrondkleur */
918
+ --dsn-menu-item-indicator-color: var(--dsn-color-transparent); /** Gedeeld: standaard kleur van de indicator, onzichtbaar */
896
919
  --dsn-menu-link-level-indent: var(--dsn-space-inline-3xl); /** MenuLink-specifiek: inspringing per hiërarchisch niveau (level 2–4) — via margin-inline-start op de link */
897
920
  --dsn-menu-link-current-font-weight: var(--dsn-text-font-weight-bold); /** MenuLink-specifiek: font weight voor de actieve/huidige pagina — bold voor visuele nadruk */
898
921
  --dsn-menu-gap-vertical: var(--dsn-space-block-md); /** Kleine ruimte tussen items in verticale oriëntatie */
@@ -1190,6 +1213,11 @@
1190
1213
  --dsn-button-size-large-icon-size: var(--dsn-icon-size-lg); /** Icoongrootte van de large button */
1191
1214
  --dsn-button-size-small-icon-size: var(--dsn-icon-size-sm); /** Icoongrootte van de small button */
1192
1215
  --dsn-card-box-shadow-hover: var(--dsn-box-shadow-md); /** Schaduw bij hover — hogere elevatie benadrukt interactiviteit */
1216
+ --dsn-card-pre-header-padding-block-start: var(--dsn-card-header-padding-block-start); /** Bovenkant padding van de pre-header, gelijk aan de header. Media als direct kind bleedt hier doorheen. */
1217
+ --dsn-card-pre-header-padding-block-end: var(--dsn-card-header-padding-block-end); /** Onderkant padding van de pre-header, gelijk aan de header */
1218
+ --dsn-card-pre-header-padding-inline-start: var(--dsn-card-header-padding-inline-start); /** Padding aan de beginzijde van de pre-header, gelijk aan de header */
1219
+ --dsn-card-pre-header-padding-inline-end: var(--dsn-card-header-padding-inline-end); /** Padding aan de eindzijde van de pre-header, gelijk aan de header */
1220
+ --dsn-card-pre-header-row-gap: var(--dsn-card-header-row-gap); /** Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header */
1193
1221
  --dsn-card-heading-color: var(--dsn-heading-color); /** Kleur van de card heading */
1194
1222
  --dsn-checkbox-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
1195
1223
  --dsn-checkbox-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */
@@ -1248,11 +1276,13 @@
1248
1276
  --dsn-menu-item-color: var(--dsn-color-action-2-color-default); /** Gedeeld: standaard tekstkleur */
1249
1277
  --dsn-menu-item-hover-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover tekstkleur */
1250
1278
  --dsn-menu-item-hover-background-color: var(--dsn-color-action-2-bg-hover); /** Gedeeld: hover achtergrondkleur */
1279
+ --dsn-menu-item-hover-indicator-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover kleur van de indicator */
1251
1280
  --dsn-menu-item-active-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active tekstkleur */
1252
1281
  --dsn-menu-item-active-background-color: var(--dsn-color-action-2-bg-active); /** Gedeeld: active achtergrondkleur */
1282
+ --dsn-menu-item-active-indicator-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active kleur van de indicator */
1253
1283
  --dsn-menu-link-current-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: tekstkleur voor de actieve/huidige pagina */
1254
1284
  --dsn-menu-link-current-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina */
1255
- --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de border-inline-start indicator */
1285
+ --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina */
1256
1286
  --dsn-menu-link-current-hover-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: hover tekstkleur voor de actieve pagina */
1257
1287
  --dsn-menu-link-current-hover-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina */
1258
1288
  --dsn-menu-link-current-active-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: active tekstkleur voor de actieve pagina */
package/dist/css/start-dark-information-dense.css CHANGED
@@ -98,12 +98,12 @@
98
98
  --dsn-focus-outline-color: #f4f4f4; /** Kleur van de focusomtrek — licht voor donkere achtergronden */
99
99
  --dsn-focus-inverse-outline-color: #0b0c0c; /** Kleur van de focusomtrek op lichte/gekleurde achtergronden in dark mode — tegenhanger van outline-color */
100
100
  --dsn-form-control-max-inline-size: 25rem; /** Maximale breedte van form controls */
101
- --dsn-form-control-width-xs: 10ch; /** Extra kleine breedte — voor zeer korte invoervelden (bijv. postcode, jaar, CVV) */
102
- --dsn-form-control-width-sm: 14ch; /** Kleine breedte — voor korte invoervelden (bijv. tijd UU:MM, korte codes) */
103
- --dsn-form-control-width-md: 20ch; /** Middelgrote breedte — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer) */
104
- --dsn-form-control-width-lg: 32ch; /** Grote breedte (standaard) — voor standaard invoervelden (bijv. naam, e-mail) */
105
- --dsn-form-control-width-xl: 48ch; /** Extra grote breedte — voor langere invoervelden (bijv. URL) */
106
- --dsn-form-control-width-full: 100%; /** Volledige breedte — responsief aan de container */
101
+ --dsn-form-control-inline-size-xs: 10ch; /** Extra kleine inline-size — voor zeer korte invoervelden (bijv. postcode, jaar, CVV) */
102
+ --dsn-form-control-inline-size-sm: 14ch; /** Kleine inline-size — voor korte invoervelden (bijv. tijd UU:MM, korte codes) */
103
+ --dsn-form-control-inline-size-md: 20ch; /** Middelgrote inline-size — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer) */
104
+ --dsn-form-control-inline-size-lg: 32ch; /** Grote inline-size (standaard) — voor standaard invoervelden (bijv. naam, e-mail) */
105
+ --dsn-form-control-inline-size-xl: 48ch; /** Extra grote inline-size — voor langere invoervelden (bijv. URL) */
106
+ --dsn-form-control-inline-size-full: 100%; /** Volledige inline-size — responsief aan de container */
107
107
  --dsn-breakpoint-sm: 36em; /** Klein breakpoint - ~576px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
108
108
  --dsn-breakpoint-md: 44em; /** Middelgroot breakpoint - ~704px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
109
109
  --dsn-breakpoint-lg: 64em; /** Groot breakpoint - ~1024px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
@@ -303,6 +303,9 @@
303
303
  --dsn-breadcrumb-navigation-link-active-text-decoration-line: none; /** Geen onderstreping op active */
304
304
  --dsn-button-size-small-min-block-size: 2.5rem; /** Minimale blokhoogte van de small button (verkleind aanraakdoel — 40px) */
305
305
  --dsn-card-box-shadow: none; /** Schaduw standaard — geen schaduw by default */
306
+ --dsn-card-min-block-size: auto; /** Minimale hoogte van de card */
307
+ --dsn-card-body-padding-block-start: 0; /** Bovenkant padding van de body; de header levert de ruimte erboven */
308
+ --dsn-card-footer-padding-block-start: 0; /** Bovenkant padding van de footer; de sectie erboven levert de ruimte */
306
309
  --dsn-card-group-item-min-width: 17.5rem; /** Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill */
307
310
  --dsn-checkbox-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); /** Grootte van de checkbox — vloeiend op basis van tekstgrootte en line-height */
308
311
  --dsn-checkbox-checked-border-color: rgba(0, 0, 0, 0);
@@ -337,7 +340,7 @@
337
340
  --dsn-link-text-decoration-thickness: auto; /** Dikte van de onderstreping van de link */
338
341
  --dsn-link-text-underline-offset: 4px; /** Onderstrepingsafstand van de link */
339
342
  --dsn-link-hover-text-decoration-line: none; /** Tekstverfraaiing van de link op hover */
340
- --dsn-menu-link-current-indicator-width: 3px; /** MenuLink-specifiek: breedte van de border-inline-start indicator */
343
+ --dsn-menu-item-indicator-width: 3px; /** Gedeeld: dikte van de indicator (border-inline-start, of border-block-end in een horizontaal Menu). Altijd aanwezig zodat hover en current niet verspringen */
341
344
  --dsn-modal-dialog-max-width: 40rem; /** Maximale breedte van het dialoogvenster (640px) */
342
345
  --dsn-page-footer-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageFooter (32px) — zelfde waarde als page-header.logo.max-block-size voor consistente logogrootte */
343
346
  --dsn-page-header-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageHeader op mobile (32px). Breedte schaalt automatisch via inline-size: auto. White-label: overschrijf dit token per thema voor andere logo-proporties. */
@@ -715,17 +718,36 @@
715
718
  --dsn-card-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de card (8px) */
716
719
  --dsn-card-border-width: var(--dsn-border-width-thin); /** Randbreedte van de card */
717
720
  --dsn-card-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de card */
718
- --dsn-card-body-padding-block: var(--dsn-space-block-xl); /** Verticale padding van de card body (16px) */
719
- --dsn-card-body-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card body (16px) */
720
- --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de card body (12px) */
721
- --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de card footer (24px) */
722
- --dsn-card-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card footer (16px) */
721
+ --dsn-card-header-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de header (16px) */
722
+ --dsn-card-header-padding-block-end: var(--dsn-space-block-lg); /** Onderkant padding van de header (12px); ook de ruimte naar de body */
723
+ --dsn-card-header-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de header (16px) */
724
+ --dsn-card-header-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de header (16px) */
725
+ --dsn-card-header-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de header (12px) */
726
+ --dsn-card-body-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de body (16px) */
727
+ --dsn-card-body-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de body (16px) */
728
+ --dsn-card-body-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de body (16px) */
729
+ --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de body (12px) */
730
+ --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de footer (24px) */
731
+ --dsn-card-footer-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de footer (16px) */
732
+ --dsn-card-footer-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de footer (16px) */
733
+ --dsn-card-footer-column-gap: var(--dsn-space-inline-md); /** Horizontale ruimte tussen directe kinderen van de footer */
723
734
  --dsn-card-image-placeholder-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van de afbeeldingsplaceholder */
724
735
  --dsn-card-image-placeholder-color: var(--dsn-color-neutral-color-subtle); /** Kleur van het icoon in de afbeeldingsplaceholder */
725
736
  --dsn-card-heading-font-family: var(--dsn-heading-font-family); /** Lettertype van de card heading */
726
737
  --dsn-card-heading-font-weight: var(--dsn-heading-font-weight); /** Vetgedrukt van de card heading */
727
738
  --dsn-card-heading-font-size: var(--dsn-text-font-size-lg); /** Tekstgrootte van de card heading (20–24px fluid) */
728
739
  --dsn-card-heading-line-height: var(--dsn-text-line-height-lg); /** Regelafstand van de card heading */
740
+ --dsn-card-label-color: var(--dsn-color-neutral-color-document); /** Kleur van het card-label */
741
+ --dsn-card-label-font-family: var(--dsn-text-font-family-default); /** Lettertype van het card-label */
742
+ --dsn-card-label-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van het card-label */
743
+ --dsn-card-label-font-weight: var(--dsn-text-font-weight-bold); /** Gewicht van het card-label */
744
+ --dsn-card-label-line-height: var(--dsn-text-line-height-md); /** Regelafstand van het card-label */
745
+ --dsn-card-description-color: var(--dsn-color-neutral-color-document); /** Kleur van de card-description */
746
+ --dsn-card-description-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van de card-description */
747
+ --dsn-card-description-line-height: var(--dsn-text-line-height-md); /** Regelafstand van de card-description */
748
+ --dsn-card-meta-color: var(--dsn-color-neutral-color-subtle); /** Kleur van de card-meta (bijv. datum) */
749
+ --dsn-card-meta-font-size: var(--dsn-text-font-size-sm); /** Tekstgrootte van de card-meta */
750
+ --dsn-card-meta-line-height: var(--dsn-text-line-height-sm); /** Regelafstand van de card-meta */
729
751
  --dsn-card-group-gap: var(--dsn-space-inline-xl); /** Ruimte tussen cards in een CardGroup (16px) */
730
752
  --dsn-checkbox-group-border-width: var(--dsn-border-width-none); /** Standaard geen border op de fieldset */
731
753
  --dsn-checkbox-group-gap: var(--dsn-space-block-sm); /** Ruimte tussen de checkbox-opties in de groep */
@@ -893,6 +915,7 @@
893
915
  --dsn-menu-item-gap: var(--dsn-space-inline-md); /** Gedeeld: ruimte tussen icoon, label en badge */
894
916
  --dsn-menu-item-min-block-size: var(--dsn-pointer-target-min-block-size); /** Gedeeld: minimale raakbare hoogte — WCAG pointer target */
895
917
  --dsn-menu-item-background-color: var(--dsn-color-transparent); /** Gedeeld: standaard achtergrondkleur */
918
+ --dsn-menu-item-indicator-color: var(--dsn-color-transparent); /** Gedeeld: standaard kleur van de indicator, onzichtbaar */
896
919
  --dsn-menu-link-level-indent: var(--dsn-space-inline-3xl); /** MenuLink-specifiek: inspringing per hiërarchisch niveau (level 2–4) — via margin-inline-start op de link */
897
920
  --dsn-menu-link-current-font-weight: var(--dsn-text-font-weight-bold); /** MenuLink-specifiek: font weight voor de actieve/huidige pagina — bold voor visuele nadruk */
898
921
  --dsn-menu-gap-vertical: var(--dsn-space-block-md); /** Kleine ruimte tussen items in verticale oriëntatie */
@@ -1190,6 +1213,11 @@
1190
1213
  --dsn-button-size-large-icon-size: var(--dsn-icon-size-lg); /** Icoongrootte van de large button */
1191
1214
  --dsn-button-size-small-icon-size: var(--dsn-icon-size-sm); /** Icoongrootte van de small button */
1192
1215
  --dsn-card-box-shadow-hover: var(--dsn-box-shadow-md); /** Schaduw bij hover — hogere elevatie benadrukt interactiviteit */
1216
+ --dsn-card-pre-header-padding-block-start: var(--dsn-card-header-padding-block-start); /** Bovenkant padding van de pre-header, gelijk aan de header. Media als direct kind bleedt hier doorheen. */
1217
+ --dsn-card-pre-header-padding-block-end: var(--dsn-card-header-padding-block-end); /** Onderkant padding van de pre-header, gelijk aan de header */
1218
+ --dsn-card-pre-header-padding-inline-start: var(--dsn-card-header-padding-inline-start); /** Padding aan de beginzijde van de pre-header, gelijk aan de header */
1219
+ --dsn-card-pre-header-padding-inline-end: var(--dsn-card-header-padding-inline-end); /** Padding aan de eindzijde van de pre-header, gelijk aan de header */
1220
+ --dsn-card-pre-header-row-gap: var(--dsn-card-header-row-gap); /** Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header */
1193
1221
  --dsn-card-heading-color: var(--dsn-heading-color); /** Kleur van de card heading */
1194
1222
  --dsn-checkbox-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
1195
1223
  --dsn-checkbox-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */
@@ -1248,11 +1276,13 @@
1248
1276
  --dsn-menu-item-color: var(--dsn-color-action-2-color-default); /** Gedeeld: standaard tekstkleur */
1249
1277
  --dsn-menu-item-hover-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover tekstkleur */
1250
1278
  --dsn-menu-item-hover-background-color: var(--dsn-color-action-2-bg-hover); /** Gedeeld: hover achtergrondkleur */
1279
+ --dsn-menu-item-hover-indicator-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover kleur van de indicator */
1251
1280
  --dsn-menu-item-active-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active tekstkleur */
1252
1281
  --dsn-menu-item-active-background-color: var(--dsn-color-action-2-bg-active); /** Gedeeld: active achtergrondkleur */
1282
+ --dsn-menu-item-active-indicator-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active kleur van de indicator */
1253
1283
  --dsn-menu-link-current-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: tekstkleur voor de actieve/huidige pagina */
1254
1284
  --dsn-menu-link-current-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina */
1255
- --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de border-inline-start indicator */
1285
+ --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina */
1256
1286
  --dsn-menu-link-current-hover-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: hover tekstkleur voor de actieve pagina */
1257
1287
  --dsn-menu-link-current-hover-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina */
1258
1288
  --dsn-menu-link-current-active-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: active tekstkleur voor de actieve pagina */
package/dist/css/start-light-default.css CHANGED
@@ -98,12 +98,12 @@
98
98
  --dsn-focus-outline-color: #0b0c0c; /** Kleur van de focusomtrek */
99
99
  --dsn-focus-inverse-outline-color: #ffffff; /** Kleur van de focusomtrek op gekleurde/donkere achtergronden — tegenhanger van outline-color */
100
100
  --dsn-form-control-max-inline-size: 25rem; /** Maximale breedte van form controls */
101
- --dsn-form-control-width-xs: 10ch; /** Extra kleine breedte — voor zeer korte invoervelden (bijv. postcode, jaar, CVV) */
102
- --dsn-form-control-width-sm: 14ch; /** Kleine breedte — voor korte invoervelden (bijv. tijd UU:MM, korte codes) */
103
- --dsn-form-control-width-md: 20ch; /** Middelgrote breedte — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer) */
104
- --dsn-form-control-width-lg: 32ch; /** Grote breedte (standaard) — voor standaard invoervelden (bijv. naam, e-mail) */
105
- --dsn-form-control-width-xl: 48ch; /** Extra grote breedte — voor langere invoervelden (bijv. URL) */
106
- --dsn-form-control-width-full: 100%; /** Volledige breedte — responsief aan de container */
101
+ --dsn-form-control-inline-size-xs: 10ch; /** Extra kleine inline-size — voor zeer korte invoervelden (bijv. postcode, jaar, CVV) */
102
+ --dsn-form-control-inline-size-sm: 14ch; /** Kleine inline-size — voor korte invoervelden (bijv. tijd UU:MM, korte codes) */
103
+ --dsn-form-control-inline-size-md: 20ch; /** Middelgrote inline-size — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer) */
104
+ --dsn-form-control-inline-size-lg: 32ch; /** Grote inline-size (standaard) — voor standaard invoervelden (bijv. naam, e-mail) */
105
+ --dsn-form-control-inline-size-xl: 48ch; /** Extra grote inline-size — voor langere invoervelden (bijv. URL) */
106
+ --dsn-form-control-inline-size-full: 100%; /** Volledige inline-size — responsief aan de container */
107
107
  --dsn-breakpoint-sm: 36em; /** Klein breakpoint - ~576px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
108
108
  --dsn-breakpoint-md: 44em; /** Middelgroot breakpoint - ~704px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
109
109
  --dsn-breakpoint-lg: 64em; /** Groot breakpoint - ~1024px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
@@ -303,6 +303,9 @@
303
303
  --dsn-breadcrumb-navigation-link-active-text-decoration-line: none; /** Geen onderstreping op active */
304
304
  --dsn-button-size-small-min-block-size: 2.5rem; /** Minimale blokhoogte van de small button (verkleind aanraakdoel — 40px) */
305
305
  --dsn-card-box-shadow: none; /** Schaduw standaard — geen schaduw by default */
306
+ --dsn-card-min-block-size: auto; /** Minimale hoogte van de card */
307
+ --dsn-card-body-padding-block-start: 0; /** Bovenkant padding van de body; de header levert de ruimte erboven */
308
+ --dsn-card-footer-padding-block-start: 0; /** Bovenkant padding van de footer; de sectie erboven levert de ruimte */
306
309
  --dsn-card-group-item-min-width: 17.5rem; /** Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill */
307
310
  --dsn-checkbox-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); /** Grootte van de checkbox — vloeiend op basis van tekstgrootte en line-height */
308
311
  --dsn-checkbox-checked-border-color: rgba(0, 0, 0, 0);
@@ -335,7 +338,7 @@
335
338
  --dsn-link-text-decoration-thickness: auto; /** Dikte van de onderstreping van de link */
336
339
  --dsn-link-text-underline-offset: 4px; /** Onderstrepingsafstand van de link */
337
340
  --dsn-link-hover-text-decoration-line: none; /** Tekstverfraaiing van de link op hover */
338
- --dsn-menu-link-current-indicator-width: 3px; /** MenuLink-specifiek: breedte van de border-inline-start indicator */
341
+ --dsn-menu-item-indicator-width: 3px; /** Gedeeld: dikte van de indicator (border-inline-start, of border-block-end in een horizontaal Menu). Altijd aanwezig zodat hover en current niet verspringen */
339
342
  --dsn-modal-dialog-max-width: 40rem; /** Maximale breedte van het dialoogvenster (640px) */
340
343
  --dsn-page-footer-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageFooter (32px) — zelfde waarde als page-header.logo.max-block-size voor consistente logogrootte */
341
344
  --dsn-page-header-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageHeader op mobile (32px). Breedte schaalt automatisch via inline-size: auto. White-label: overschrijf dit token per thema voor andere logo-proporties. */
@@ -713,17 +716,36 @@
713
716
  --dsn-card-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de card (8px) */
714
717
  --dsn-card-border-width: var(--dsn-border-width-thin); /** Randbreedte van de card */
715
718
  --dsn-card-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de card */
716
- --dsn-card-body-padding-block: var(--dsn-space-block-xl); /** Verticale padding van de card body (16px) */
717
- --dsn-card-body-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card body (16px) */
718
- --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de card body (12px) */
719
- --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de card footer (24px) */
720
- --dsn-card-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card footer (16px) */
719
+ --dsn-card-header-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de header (16px) */
720
+ --dsn-card-header-padding-block-end: var(--dsn-space-block-lg); /** Onderkant padding van de header (12px); ook de ruimte naar de body */
721
+ --dsn-card-header-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de header (16px) */
722
+ --dsn-card-header-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de header (16px) */
723
+ --dsn-card-header-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de header (12px) */
724
+ --dsn-card-body-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de body (16px) */
725
+ --dsn-card-body-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de body (16px) */
726
+ --dsn-card-body-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de body (16px) */
727
+ --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de body (12px) */
728
+ --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de footer (24px) */
729
+ --dsn-card-footer-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de footer (16px) */
730
+ --dsn-card-footer-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de footer (16px) */
731
+ --dsn-card-footer-column-gap: var(--dsn-space-inline-md); /** Horizontale ruimte tussen directe kinderen van de footer */
721
732
  --dsn-card-image-placeholder-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van de afbeeldingsplaceholder */
722
733
  --dsn-card-image-placeholder-color: var(--dsn-color-neutral-color-subtle); /** Kleur van het icoon in de afbeeldingsplaceholder */
723
734
  --dsn-card-heading-font-family: var(--dsn-heading-font-family); /** Lettertype van de card heading */
724
735
  --dsn-card-heading-font-weight: var(--dsn-heading-font-weight); /** Vetgedrukt van de card heading */
725
736
  --dsn-card-heading-font-size: var(--dsn-text-font-size-lg); /** Tekstgrootte van de card heading (20–24px fluid) */
726
737
  --dsn-card-heading-line-height: var(--dsn-text-line-height-lg); /** Regelafstand van de card heading */
738
+ --dsn-card-label-color: var(--dsn-color-neutral-color-document); /** Kleur van het card-label */
739
+ --dsn-card-label-font-family: var(--dsn-text-font-family-default); /** Lettertype van het card-label */
740
+ --dsn-card-label-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van het card-label */
741
+ --dsn-card-label-font-weight: var(--dsn-text-font-weight-bold); /** Gewicht van het card-label */
742
+ --dsn-card-label-line-height: var(--dsn-text-line-height-md); /** Regelafstand van het card-label */
743
+ --dsn-card-description-color: var(--dsn-color-neutral-color-document); /** Kleur van de card-description */
744
+ --dsn-card-description-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van de card-description */
745
+ --dsn-card-description-line-height: var(--dsn-text-line-height-md); /** Regelafstand van de card-description */
746
+ --dsn-card-meta-color: var(--dsn-color-neutral-color-subtle); /** Kleur van de card-meta (bijv. datum) */
747
+ --dsn-card-meta-font-size: var(--dsn-text-font-size-sm); /** Tekstgrootte van de card-meta */
748
+ --dsn-card-meta-line-height: var(--dsn-text-line-height-sm); /** Regelafstand van de card-meta */
727
749
  --dsn-card-group-gap: var(--dsn-space-inline-xl); /** Ruimte tussen cards in een CardGroup (16px) */
728
750
  --dsn-checkbox-group-border-width: var(--dsn-border-width-none); /** Standaard geen border op de fieldset */
729
751
  --dsn-checkbox-group-gap: var(--dsn-space-block-sm); /** Ruimte tussen de checkbox-opties in de groep */
@@ -893,6 +915,7 @@
893
915
  --dsn-menu-item-gap: var(--dsn-space-inline-md); /** Gedeeld: ruimte tussen icoon, label en badge */
894
916
  --dsn-menu-item-min-block-size: var(--dsn-pointer-target-min-block-size); /** Gedeeld: minimale raakbare hoogte — WCAG pointer target */
895
917
  --dsn-menu-item-background-color: var(--dsn-color-transparent); /** Gedeeld: standaard achtergrondkleur */
918
+ --dsn-menu-item-indicator-color: var(--dsn-color-transparent); /** Gedeeld: standaard kleur van de indicator, onzichtbaar */
896
919
  --dsn-menu-link-level-indent: var(--dsn-space-inline-3xl); /** MenuLink-specifiek: inspringing per hiërarchisch niveau (level 2–4) — via margin-inline-start op de link */
897
920
  --dsn-menu-link-current-font-weight: var(--dsn-text-font-weight-bold); /** MenuLink-specifiek: font weight voor de actieve/huidige pagina — bold voor visuele nadruk */
898
921
  --dsn-menu-gap-vertical: var(--dsn-space-block-md); /** Kleine ruimte tussen items in verticale oriëntatie */
@@ -1190,6 +1213,11 @@
1190
1213
  --dsn-button-size-large-icon-size: var(--dsn-icon-size-lg); /** Icoongrootte van de large button */
1191
1214
  --dsn-button-size-small-icon-size: var(--dsn-icon-size-sm); /** Icoongrootte van de small button */
1192
1215
  --dsn-card-box-shadow-hover: var(--dsn-box-shadow-md); /** Schaduw bij hover — hogere elevatie benadrukt interactiviteit */
1216
+ --dsn-card-pre-header-padding-block-start: var(--dsn-card-header-padding-block-start); /** Bovenkant padding van de pre-header, gelijk aan de header. Media als direct kind bleedt hier doorheen. */
1217
+ --dsn-card-pre-header-padding-block-end: var(--dsn-card-header-padding-block-end); /** Onderkant padding van de pre-header, gelijk aan de header */
1218
+ --dsn-card-pre-header-padding-inline-start: var(--dsn-card-header-padding-inline-start); /** Padding aan de beginzijde van de pre-header, gelijk aan de header */
1219
+ --dsn-card-pre-header-padding-inline-end: var(--dsn-card-header-padding-inline-end); /** Padding aan de eindzijde van de pre-header, gelijk aan de header */
1220
+ --dsn-card-pre-header-row-gap: var(--dsn-card-header-row-gap); /** Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header */
1193
1221
  --dsn-card-heading-color: var(--dsn-heading-color); /** Kleur van de card heading */
1194
1222
  --dsn-checkbox-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
1195
1223
  --dsn-checkbox-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */
@@ -1248,11 +1276,13 @@
1248
1276
  --dsn-menu-item-color: var(--dsn-color-action-2-color-default); /** Gedeeld: standaard tekstkleur */
1249
1277
  --dsn-menu-item-hover-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover tekstkleur */
1250
1278
  --dsn-menu-item-hover-background-color: var(--dsn-color-action-2-bg-hover); /** Gedeeld: hover achtergrondkleur */
1279
+ --dsn-menu-item-hover-indicator-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover kleur van de indicator */
1251
1280
  --dsn-menu-item-active-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active tekstkleur */
1252
1281
  --dsn-menu-item-active-background-color: var(--dsn-color-action-2-bg-active); /** Gedeeld: active achtergrondkleur */
1282
+ --dsn-menu-item-active-indicator-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active kleur van de indicator */
1253
1283
  --dsn-menu-link-current-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: tekstkleur voor de actieve/huidige pagina */
1254
1284
  --dsn-menu-link-current-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina */
1255
- --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de border-inline-start indicator */
1285
+ --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina */
1256
1286
  --dsn-menu-link-current-hover-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: hover tekstkleur voor de actieve pagina */
1257
1287
  --dsn-menu-link-current-hover-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina */
1258
1288
  --dsn-menu-link-current-active-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: active tekstkleur voor de actieve pagina */
package/dist/css/start-light-information-dense.css CHANGED
@@ -98,12 +98,12 @@
98
98
  --dsn-focus-outline-color: #0b0c0c; /** Kleur van de focusomtrek */
99
99
  --dsn-focus-inverse-outline-color: #ffffff; /** Kleur van de focusomtrek op gekleurde/donkere achtergronden — tegenhanger van outline-color */
100
100
  --dsn-form-control-max-inline-size: 25rem; /** Maximale breedte van form controls */
101
- --dsn-form-control-width-xs: 10ch; /** Extra kleine breedte — voor zeer korte invoervelden (bijv. postcode, jaar, CVV) */
102
- --dsn-form-control-width-sm: 14ch; /** Kleine breedte — voor korte invoervelden (bijv. tijd UU:MM, korte codes) */
103
- --dsn-form-control-width-md: 20ch; /** Middelgrote breedte — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer) */
104
- --dsn-form-control-width-lg: 32ch; /** Grote breedte (standaard) — voor standaard invoervelden (bijv. naam, e-mail) */
105
- --dsn-form-control-width-xl: 48ch; /** Extra grote breedte — voor langere invoervelden (bijv. URL) */
106
- --dsn-form-control-width-full: 100%; /** Volledige breedte — responsief aan de container */
101
+ --dsn-form-control-inline-size-xs: 10ch; /** Extra kleine inline-size — voor zeer korte invoervelden (bijv. postcode, jaar, CVV) */
102
+ --dsn-form-control-inline-size-sm: 14ch; /** Kleine inline-size — voor korte invoervelden (bijv. tijd UU:MM, korte codes) */
103
+ --dsn-form-control-inline-size-md: 20ch; /** Middelgrote inline-size — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer) */
104
+ --dsn-form-control-inline-size-lg: 32ch; /** Grote inline-size (standaard) — voor standaard invoervelden (bijv. naam, e-mail) */
105
+ --dsn-form-control-inline-size-xl: 48ch; /** Extra grote inline-size — voor langere invoervelden (bijv. URL) */
106
+ --dsn-form-control-inline-size-full: 100%; /** Volledige inline-size — responsief aan de container */
107
107
  --dsn-breakpoint-sm: 36em; /** Klein breakpoint - ~576px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
108
108
  --dsn-breakpoint-md: 44em; /** Middelgroot breakpoint - ~704px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
109
109
  --dsn-breakpoint-lg: 64em; /** Groot breakpoint - ~1024px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules. */
@@ -303,6 +303,9 @@
303
303
  --dsn-breadcrumb-navigation-link-active-text-decoration-line: none; /** Geen onderstreping op active */
304
304
  --dsn-button-size-small-min-block-size: 2.5rem; /** Minimale blokhoogte van de small button (verkleind aanraakdoel — 40px) */
305
305
  --dsn-card-box-shadow: none; /** Schaduw standaard — geen schaduw by default */
306
+ --dsn-card-min-block-size: auto; /** Minimale hoogte van de card */
307
+ --dsn-card-body-padding-block-start: 0; /** Bovenkant padding van de body; de header levert de ruimte erboven */
308
+ --dsn-card-footer-padding-block-start: 0; /** Bovenkant padding van de footer; de sectie erboven levert de ruimte */
306
309
  --dsn-card-group-item-min-width: 17.5rem; /** Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill */
307
310
  --dsn-checkbox-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); /** Grootte van de checkbox — vloeiend op basis van tekstgrootte en line-height */
308
311
  --dsn-checkbox-checked-border-color: rgba(0, 0, 0, 0);
@@ -337,7 +340,7 @@
337
340
  --dsn-link-text-decoration-thickness: auto; /** Dikte van de onderstreping van de link */
338
341
  --dsn-link-text-underline-offset: 4px; /** Onderstrepingsafstand van de link */
339
342
  --dsn-link-hover-text-decoration-line: none; /** Tekstverfraaiing van de link op hover */
340
- --dsn-menu-link-current-indicator-width: 3px; /** MenuLink-specifiek: breedte van de border-inline-start indicator */
343
+ --dsn-menu-item-indicator-width: 3px; /** Gedeeld: dikte van de indicator (border-inline-start, of border-block-end in een horizontaal Menu). Altijd aanwezig zodat hover en current niet verspringen */
341
344
  --dsn-modal-dialog-max-width: 40rem; /** Maximale breedte van het dialoogvenster (640px) */
342
345
  --dsn-page-footer-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageFooter (32px) — zelfde waarde als page-header.logo.max-block-size voor consistente logogrootte */
343
346
  --dsn-page-header-logo-max-block-size: 2rem; /** Maximale hoogte van het logo in de PageHeader op mobile (32px). Breedte schaalt automatisch via inline-size: auto. White-label: overschrijf dit token per thema voor andere logo-proporties. */
@@ -715,17 +718,36 @@
715
718
  --dsn-card-border-radius: var(--dsn-border-radius-md); /** Afgeronde hoeken van de card (8px) */
716
719
  --dsn-card-border-width: var(--dsn-border-width-thin); /** Randbreedte van de card */
717
720
  --dsn-card-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de card */
718
- --dsn-card-body-padding-block: var(--dsn-space-block-xl); /** Verticale padding van de card body (16px) */
719
- --dsn-card-body-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card body (16px) */
720
- --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de card body (12px) */
721
- --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de card footer (24px) */
722
- --dsn-card-footer-padding-inline: var(--dsn-space-inline-xl); /** Horizontale padding van de card footer (16px) */
721
+ --dsn-card-header-padding-block-start: var(--dsn-space-block-xl); /** Bovenkant padding van de header (16px) */
722
+ --dsn-card-header-padding-block-end: var(--dsn-space-block-lg); /** Onderkant padding van de header (12px); ook de ruimte naar de body */
723
+ --dsn-card-header-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de header (16px) */
724
+ --dsn-card-header-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de header (16px) */
725
+ --dsn-card-header-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de header (12px) */
726
+ --dsn-card-body-padding-block-end: var(--dsn-space-block-xl); /** Onderkant padding van de body (16px) */
727
+ --dsn-card-body-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de body (16px) */
728
+ --dsn-card-body-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de body (16px) */
729
+ --dsn-card-body-row-gap: var(--dsn-space-block-lg); /** Verticale ruimte tussen directe kinderen van de body (12px) */
730
+ --dsn-card-footer-padding-block-end: var(--dsn-space-block-3xl); /** Onderkant padding van de footer (24px) */
731
+ --dsn-card-footer-padding-inline-start: var(--dsn-space-inline-xl); /** Padding aan de beginzijde van de footer (16px) */
732
+ --dsn-card-footer-padding-inline-end: var(--dsn-space-inline-xl); /** Padding aan de eindzijde van de footer (16px) */
733
+ --dsn-card-footer-column-gap: var(--dsn-space-inline-md); /** Horizontale ruimte tussen directe kinderen van de footer */
723
734
  --dsn-card-image-placeholder-background-color: var(--dsn-color-neutral-bg-subtle); /** Achtergrondkleur van de afbeeldingsplaceholder */
724
735
  --dsn-card-image-placeholder-color: var(--dsn-color-neutral-color-subtle); /** Kleur van het icoon in de afbeeldingsplaceholder */
725
736
  --dsn-card-heading-font-family: var(--dsn-heading-font-family); /** Lettertype van de card heading */
726
737
  --dsn-card-heading-font-weight: var(--dsn-heading-font-weight); /** Vetgedrukt van de card heading */
727
738
  --dsn-card-heading-font-size: var(--dsn-text-font-size-lg); /** Tekstgrootte van de card heading (20–24px fluid) */
728
739
  --dsn-card-heading-line-height: var(--dsn-text-line-height-lg); /** Regelafstand van de card heading */
740
+ --dsn-card-label-color: var(--dsn-color-neutral-color-document); /** Kleur van het card-label */
741
+ --dsn-card-label-font-family: var(--dsn-text-font-family-default); /** Lettertype van het card-label */
742
+ --dsn-card-label-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van het card-label */
743
+ --dsn-card-label-font-weight: var(--dsn-text-font-weight-bold); /** Gewicht van het card-label */
744
+ --dsn-card-label-line-height: var(--dsn-text-line-height-md); /** Regelafstand van het card-label */
745
+ --dsn-card-description-color: var(--dsn-color-neutral-color-document); /** Kleur van de card-description */
746
+ --dsn-card-description-font-size: var(--dsn-text-font-size-md); /** Tekstgrootte van de card-description */
747
+ --dsn-card-description-line-height: var(--dsn-text-line-height-md); /** Regelafstand van de card-description */
748
+ --dsn-card-meta-color: var(--dsn-color-neutral-color-subtle); /** Kleur van de card-meta (bijv. datum) */
749
+ --dsn-card-meta-font-size: var(--dsn-text-font-size-sm); /** Tekstgrootte van de card-meta */
750
+ --dsn-card-meta-line-height: var(--dsn-text-line-height-sm); /** Regelafstand van de card-meta */
729
751
  --dsn-card-group-gap: var(--dsn-space-inline-xl); /** Ruimte tussen cards in een CardGroup (16px) */
730
752
  --dsn-checkbox-group-border-width: var(--dsn-border-width-none); /** Standaard geen border op de fieldset */
731
753
  --dsn-checkbox-group-gap: var(--dsn-space-block-sm); /** Ruimte tussen de checkbox-opties in de groep */
@@ -893,6 +915,7 @@
893
915
  --dsn-menu-item-gap: var(--dsn-space-inline-md); /** Gedeeld: ruimte tussen icoon, label en badge */
894
916
  --dsn-menu-item-min-block-size: var(--dsn-pointer-target-min-block-size); /** Gedeeld: minimale raakbare hoogte — WCAG pointer target */
895
917
  --dsn-menu-item-background-color: var(--dsn-color-transparent); /** Gedeeld: standaard achtergrondkleur */
918
+ --dsn-menu-item-indicator-color: var(--dsn-color-transparent); /** Gedeeld: standaard kleur van de indicator, onzichtbaar */
896
919
  --dsn-menu-link-level-indent: var(--dsn-space-inline-3xl); /** MenuLink-specifiek: inspringing per hiërarchisch niveau (level 2–4) — via margin-inline-start op de link */
897
920
  --dsn-menu-link-current-font-weight: var(--dsn-text-font-weight-bold); /** MenuLink-specifiek: font weight voor de actieve/huidige pagina — bold voor visuele nadruk */
898
921
  --dsn-menu-gap-vertical: var(--dsn-space-block-md); /** Kleine ruimte tussen items in verticale oriëntatie */
@@ -1190,6 +1213,11 @@
1190
1213
  --dsn-button-size-large-icon-size: var(--dsn-icon-size-lg); /** Icoongrootte van de large button */
1191
1214
  --dsn-button-size-small-icon-size: var(--dsn-icon-size-sm); /** Icoongrootte van de small button */
1192
1215
  --dsn-card-box-shadow-hover: var(--dsn-box-shadow-md); /** Schaduw bij hover — hogere elevatie benadrukt interactiviteit */
1216
+ --dsn-card-pre-header-padding-block-start: var(--dsn-card-header-padding-block-start); /** Bovenkant padding van de pre-header, gelijk aan de header. Media als direct kind bleedt hier doorheen. */
1217
+ --dsn-card-pre-header-padding-block-end: var(--dsn-card-header-padding-block-end); /** Onderkant padding van de pre-header, gelijk aan de header */
1218
+ --dsn-card-pre-header-padding-inline-start: var(--dsn-card-header-padding-inline-start); /** Padding aan de beginzijde van de pre-header, gelijk aan de header */
1219
+ --dsn-card-pre-header-padding-inline-end: var(--dsn-card-header-padding-inline-end); /** Padding aan de eindzijde van de pre-header, gelijk aan de header */
1220
+ --dsn-card-pre-header-row-gap: var(--dsn-card-header-row-gap); /** Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header */
1193
1221
  --dsn-card-heading-color: var(--dsn-heading-color); /** Kleur van de card heading */
1194
1222
  --dsn-checkbox-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
1195
1223
  --dsn-checkbox-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */
@@ -1248,11 +1276,13 @@
1248
1276
  --dsn-menu-item-color: var(--dsn-color-action-2-color-default); /** Gedeeld: standaard tekstkleur */
1249
1277
  --dsn-menu-item-hover-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover tekstkleur */
1250
1278
  --dsn-menu-item-hover-background-color: var(--dsn-color-action-2-bg-hover); /** Gedeeld: hover achtergrondkleur */
1279
+ --dsn-menu-item-hover-indicator-color: var(--dsn-color-action-2-color-hover); /** Gedeeld: hover kleur van de indicator */
1251
1280
  --dsn-menu-item-active-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active tekstkleur */
1252
1281
  --dsn-menu-item-active-background-color: var(--dsn-color-action-2-bg-active); /** Gedeeld: active achtergrondkleur */
1282
+ --dsn-menu-item-active-indicator-color: var(--dsn-color-action-2-color-active); /** Gedeeld: active kleur van de indicator */
1253
1283
  --dsn-menu-link-current-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: tekstkleur voor de actieve/huidige pagina */
1254
1284
  --dsn-menu-link-current-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina */
1255
- --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de border-inline-start indicator */
1285
+ --dsn-menu-link-current-indicator-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina */
1256
1286
  --dsn-menu-link-current-hover-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: hover tekstkleur voor de actieve pagina */
1257
1287
  --dsn-menu-link-current-hover-background-color: var(--dsn-color-action-2-bg-active); /** MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina */
1258
1288
  --dsn-menu-link-current-active-color: var(--dsn-color-action-2-color-default); /** MenuLink-specifiek: active tekstkleur voor de actieve pagina */
package/dist/css/variables-dark-scoped.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 02 Sep 2026 09:06:11 GMT
3
+ * Generated on Sat, 26 Sep 2026 07:42:53 GMT
4
4
  */
5
5
 
6
6
  .dsn-theme-start.dsn-mode-dark, .dsn-mode-dark .dsn-theme-start {