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

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 26 Sep 2026 07:42:53 GMT
+ * Generated on Thu, 01 Oct 2026 12:42:20 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 26 Sep 2026 07:42:53 GMT
+ * Generated on Thu, 01 Oct 2026 12:42:20 GMT
  */
 
 .dsn-density-dense {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 26 Sep 2026 07:42:53 GMT
+ * Generated on Thu, 01 Oct 2026 12:42:20 GMT
  */
 
 .dsn-theme-start.dsn-mode-dark, .dsn-mode-dark .dsn-theme-start {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 26 Sep 2026 07:42:54 GMT
+ * Generated on Thu, 01 Oct 2026 12:42:20 GMT
  */
 
 .dsn-theme-start .dsn-hero--image {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 26 Sep 2026 07:42:53 GMT
+ * Generated on Thu, 01 Oct 2026 12:42:20 GMT
  */
 
 .dsn-theme-start {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 26 Sep 2026 07:42:53 GMT
+ * Generated on Thu, 01 Oct 2026 12:42:20 GMT
  */
 
 .dsn-theme-wireframe.dsn-mode-dark, .dsn-mode-dark .dsn-theme-wireframe {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 26 Sep 2026 07:42:54 GMT
+ * Generated on Thu, 01 Oct 2026 12:42:20 GMT
  */
 
 .dsn-theme-wireframe .dsn-hero--image {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 26 Sep 2026 07:42:53 GMT
+ * Generated on Thu, 01 Oct 2026 12:42:20 GMT
  */
 
 .dsn-theme-wireframe {

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

@@ -1030,6 +1030,8 @@
   --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
   --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
   --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
+  --dsn-popover-menu-min-width: var(--dsn-popover-min-width); /** Minimale breedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-max-width: var(--dsn-popover-max-width); /** Maximale breedte van het paneel: delegeert naar de Popover */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -1295,6 +1297,13 @@
   --dsn-note-info-color: var(--dsn-color-info-color-document); /** Tekstkleur voor info variant */
   --dsn-note-info-icon-color: var(--dsn-color-info-color-default); /** Icoonkleur voor info variant */
   --dsn-option-label-disabled-color: var(--dsn-form-control-disabled-color);
+  --dsn-popover-menu-background-color: var(--dsn-popover-background-color); /** Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen */
+  --dsn-popover-menu-border-width: var(--dsn-popover-border-width); /** Randbreedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-color: var(--dsn-popover-border-color); /** Randkleur van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-radius: var(--dsn-popover-border-radius); /** Afgeronde hoeken van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-z-index: var(--dsn-popover-z-index); /** Z-index van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-padding-block: var(--dsn-popover-body-padding-block); /** Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben */
+  --dsn-popover-menu-padding-inline: var(--dsn-popover-body-padding-inline); /** Horizontale padding rond de lijst: delegeert naar de Popover-body */
   --dsn-popover-box-shadow: var(--dsn-box-shadow-md); /** Schaduw van de popover — middel elevatie (md), hoger dan cards maar lager dan modals */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
   --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
@@ -1393,6 +1402,7 @@
   --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
   --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
   --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
+  --dsn-popover-menu-box-shadow: var(--dsn-popover-box-shadow); /** Schaduw van het paneel: delegeert naar de Popover */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);

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

@@ -1030,6 +1030,8 @@
   --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
   --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
   --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
+  --dsn-popover-menu-min-width: var(--dsn-popover-min-width); /** Minimale breedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-max-width: var(--dsn-popover-max-width); /** Maximale breedte van het paneel: delegeert naar de Popover */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -1295,6 +1297,13 @@
   --dsn-note-info-color: var(--dsn-color-info-color-document); /** Tekstkleur voor info variant */
   --dsn-note-info-icon-color: var(--dsn-color-info-color-default); /** Icoonkleur voor info variant */
   --dsn-option-label-disabled-color: var(--dsn-form-control-disabled-color);
+  --dsn-popover-menu-background-color: var(--dsn-popover-background-color); /** Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen */
+  --dsn-popover-menu-border-width: var(--dsn-popover-border-width); /** Randbreedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-color: var(--dsn-popover-border-color); /** Randkleur van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-radius: var(--dsn-popover-border-radius); /** Afgeronde hoeken van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-z-index: var(--dsn-popover-z-index); /** Z-index van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-padding-block: var(--dsn-popover-body-padding-block); /** Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben */
+  --dsn-popover-menu-padding-inline: var(--dsn-popover-body-padding-inline); /** Horizontale padding rond de lijst: delegeert naar de Popover-body */
   --dsn-popover-box-shadow: var(--dsn-box-shadow-md); /** Schaduw van de popover — middel elevatie (md), hoger dan cards maar lager dan modals */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
   --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
@@ -1393,6 +1402,7 @@
   --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
   --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
   --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
+  --dsn-popover-menu-box-shadow: var(--dsn-popover-box-shadow); /** Schaduw van het paneel: delegeert naar de Popover */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);

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

@@ -1030,6 +1030,8 @@
   --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
   --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
   --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
+  --dsn-popover-menu-min-width: var(--dsn-popover-min-width); /** Minimale breedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-max-width: var(--dsn-popover-max-width); /** Maximale breedte van het paneel: delegeert naar de Popover */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -1295,6 +1297,13 @@
   --dsn-note-info-color: var(--dsn-color-info-color-document); /** Tekstkleur voor info variant */
   --dsn-note-info-icon-color: var(--dsn-color-info-color-default); /** Icoonkleur voor info variant */
   --dsn-option-label-disabled-color: var(--dsn-form-control-disabled-color);
+  --dsn-popover-menu-background-color: var(--dsn-popover-background-color); /** Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen */
+  --dsn-popover-menu-border-width: var(--dsn-popover-border-width); /** Randbreedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-color: var(--dsn-popover-border-color); /** Randkleur van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-radius: var(--dsn-popover-border-radius); /** Afgeronde hoeken van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-z-index: var(--dsn-popover-z-index); /** Z-index van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-padding-block: var(--dsn-popover-body-padding-block); /** Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben */
+  --dsn-popover-menu-padding-inline: var(--dsn-popover-body-padding-inline); /** Horizontale padding rond de lijst: delegeert naar de Popover-body */
   --dsn-popover-box-shadow: var(--dsn-box-shadow-md); /** Schaduw van de popover — middel elevatie (md), hoger dan cards maar lager dan modals */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
   --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
@@ -1393,6 +1402,7 @@
   --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
   --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
   --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
+  --dsn-popover-menu-box-shadow: var(--dsn-popover-box-shadow); /** Schaduw van het paneel: delegeert naar de Popover */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);

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

@@ -1030,6 +1030,8 @@
   --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
   --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
   --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
+  --dsn-popover-menu-min-width: var(--dsn-popover-min-width); /** Minimale breedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-max-width: var(--dsn-popover-max-width); /** Maximale breedte van het paneel: delegeert naar de Popover */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -1295,6 +1297,13 @@
   --dsn-note-info-color: var(--dsn-color-info-color-document); /** Tekstkleur voor info variant */
   --dsn-note-info-icon-color: var(--dsn-color-info-color-default); /** Icoonkleur voor info variant */
   --dsn-option-label-disabled-color: var(--dsn-form-control-disabled-color);
+  --dsn-popover-menu-background-color: var(--dsn-popover-background-color); /** Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen */
+  --dsn-popover-menu-border-width: var(--dsn-popover-border-width); /** Randbreedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-color: var(--dsn-popover-border-color); /** Randkleur van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-radius: var(--dsn-popover-border-radius); /** Afgeronde hoeken van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-z-index: var(--dsn-popover-z-index); /** Z-index van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-padding-block: var(--dsn-popover-body-padding-block); /** Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben */
+  --dsn-popover-menu-padding-inline: var(--dsn-popover-body-padding-inline); /** Horizontale padding rond de lijst: delegeert naar de Popover-body */
   --dsn-popover-box-shadow: var(--dsn-box-shadow-md); /** Schaduw van de popover — middel elevatie (md), hoger dan cards maar lager dan modals */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
   --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
@@ -1393,6 +1402,7 @@
   --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
   --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
   --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
+  --dsn-popover-menu-box-shadow: var(--dsn-popover-box-shadow); /** Schaduw van het paneel: delegeert naar de Popover */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 26 Sep 2026 07:42:53 GMT
+ * Generated on Thu, 01 Oct 2026 12:42:20 GMT
  */
 
 .dsn-theme-start.dsn-mode-dark, .dsn-mode-dark .dsn-theme-start {

package/dist/css/variables-dark.css

@@ -1030,6 +1030,8 @@
   --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
   --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
   --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
+  --dsn-popover-menu-min-width: var(--dsn-popover-min-width); /** Minimale breedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-max-width: var(--dsn-popover-max-width); /** Maximale breedte van het paneel: delegeert naar de Popover */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -1295,6 +1297,13 @@
   --dsn-note-info-color: var(--dsn-color-info-color-document); /** Tekstkleur voor info variant */
   --dsn-note-info-icon-color: var(--dsn-color-info-color-default); /** Icoonkleur voor info variant */
   --dsn-option-label-disabled-color: var(--dsn-form-control-disabled-color);
+  --dsn-popover-menu-background-color: var(--dsn-popover-background-color); /** Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen */
+  --dsn-popover-menu-border-width: var(--dsn-popover-border-width); /** Randbreedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-color: var(--dsn-popover-border-color); /** Randkleur van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-radius: var(--dsn-popover-border-radius); /** Afgeronde hoeken van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-z-index: var(--dsn-popover-z-index); /** Z-index van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-padding-block: var(--dsn-popover-body-padding-block); /** Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben */
+  --dsn-popover-menu-padding-inline: var(--dsn-popover-body-padding-inline); /** Horizontale padding rond de lijst: delegeert naar de Popover-body */
   --dsn-popover-box-shadow: var(--dsn-box-shadow-md); /** Schaduw van de popover — middel elevatie (md), hoger dan cards maar lager dan modals */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
   --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
@@ -1393,6 +1402,7 @@
   --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
   --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
   --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
+  --dsn-popover-menu-box-shadow: var(--dsn-popover-box-shadow); /** Schaduw van het paneel: delegeert naar de Popover */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);

package/dist/css/variables.css

@@ -1030,6 +1030,8 @@
   --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
   --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
   --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
+  --dsn-popover-menu-min-width: var(--dsn-popover-min-width); /** Minimale breedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-max-width: var(--dsn-popover-max-width); /** Maximale breedte van het paneel: delegeert naar de Popover */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -1295,6 +1297,13 @@
   --dsn-note-info-color: var(--dsn-color-info-color-document); /** Tekstkleur voor info variant */
   --dsn-note-info-icon-color: var(--dsn-color-info-color-default); /** Icoonkleur voor info variant */
   --dsn-option-label-disabled-color: var(--dsn-form-control-disabled-color);
+  --dsn-popover-menu-background-color: var(--dsn-popover-background-color); /** Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen */
+  --dsn-popover-menu-border-width: var(--dsn-popover-border-width); /** Randbreedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-color: var(--dsn-popover-border-color); /** Randkleur van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-radius: var(--dsn-popover-border-radius); /** Afgeronde hoeken van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-z-index: var(--dsn-popover-z-index); /** Z-index van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-padding-block: var(--dsn-popover-body-padding-block); /** Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben */
+  --dsn-popover-menu-padding-inline: var(--dsn-popover-body-padding-inline); /** Horizontale padding rond de lijst: delegeert naar de Popover-body */
   --dsn-popover-box-shadow: var(--dsn-box-shadow-md); /** Schaduw van de popover — middel elevatie (md), hoger dan cards maar lager dan modals */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
   --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
@@ -1393,6 +1402,7 @@
   --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
   --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
   --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
+  --dsn-popover-menu-box-shadow: var(--dsn-popover-box-shadow); /** Schaduw van het paneel: delegeert naar de Popover */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);

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

@@ -737,6 +737,8 @@
   --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
   --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
   --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
+  --dsn-popover-menu-min-width: var(--dsn-popover-min-width); /** Minimale breedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-max-width: var(--dsn-popover-max-width); /** Maximale breedte van het paneel: delegeert naar de Popover */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -1148,6 +1150,14 @@
   --dsn-page-header-border-block-end-color: var(--dsn-color-accent-1-color-default); /** Kleur van de onderkantrand */
   --dsn-page-header-navbar-background-color: var(--dsn-color-accent-1-bg-default); /** Navigatiebalk achtergrond */
   --dsn-page-header-search-panel-background-color: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van het zoekpaneel */
+  --dsn-popover-menu-background-color: var(--dsn-popover-background-color); /** Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen */
+  --dsn-popover-menu-border-width: var(--dsn-popover-border-width); /** Randbreedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-color: var(--dsn-popover-border-color); /** Randkleur van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-radius: var(--dsn-popover-border-radius); /** Afgeronde hoeken van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-box-shadow: var(--dsn-popover-box-shadow); /** Schaduw van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-z-index: var(--dsn-popover-z-index); /** Z-index van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-padding-block: var(--dsn-popover-body-padding-block); /** Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben */
+  --dsn-popover-menu-padding-inline: var(--dsn-popover-body-padding-inline); /** Horizontale padding rond de lijst: delegeert naar de Popover-body */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
   --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
   --dsn-radio-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */

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

@@ -737,6 +737,8 @@
   --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
   --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
   --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
+  --dsn-popover-menu-min-width: var(--dsn-popover-min-width); /** Minimale breedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-max-width: var(--dsn-popover-max-width); /** Maximale breedte van het paneel: delegeert naar de Popover */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -1148,6 +1150,14 @@
   --dsn-page-header-border-block-end-color: var(--dsn-color-accent-1-color-default); /** Kleur van de onderkantrand */
   --dsn-page-header-navbar-background-color: var(--dsn-color-accent-1-bg-default); /** Navigatiebalk achtergrond */
   --dsn-page-header-search-panel-background-color: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van het zoekpaneel */
+  --dsn-popover-menu-background-color: var(--dsn-popover-background-color); /** Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen */
+  --dsn-popover-menu-border-width: var(--dsn-popover-border-width); /** Randbreedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-color: var(--dsn-popover-border-color); /** Randkleur van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-radius: var(--dsn-popover-border-radius); /** Afgeronde hoeken van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-box-shadow: var(--dsn-popover-box-shadow); /** Schaduw van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-z-index: var(--dsn-popover-z-index); /** Z-index van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-padding-block: var(--dsn-popover-body-padding-block); /** Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben */
+  --dsn-popover-menu-padding-inline: var(--dsn-popover-body-padding-inline); /** Horizontale padding rond de lijst: delegeert naar de Popover-body */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
   --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
   --dsn-radio-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */

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

@@ -737,6 +737,8 @@
   --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
   --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
   --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
+  --dsn-popover-menu-min-width: var(--dsn-popover-min-width); /** Minimale breedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-max-width: var(--dsn-popover-max-width); /** Maximale breedte van het paneel: delegeert naar de Popover */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -1148,6 +1150,14 @@
   --dsn-page-header-border-block-end-color: var(--dsn-color-accent-1-color-default); /** Kleur van de onderkantrand */
   --dsn-page-header-navbar-background-color: var(--dsn-color-accent-1-bg-default); /** Navigatiebalk achtergrond */
   --dsn-page-header-search-panel-background-color: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van het zoekpaneel */
+  --dsn-popover-menu-background-color: var(--dsn-popover-background-color); /** Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen */
+  --dsn-popover-menu-border-width: var(--dsn-popover-border-width); /** Randbreedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-color: var(--dsn-popover-border-color); /** Randkleur van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-radius: var(--dsn-popover-border-radius); /** Afgeronde hoeken van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-box-shadow: var(--dsn-popover-box-shadow); /** Schaduw van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-z-index: var(--dsn-popover-z-index); /** Z-index van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-padding-block: var(--dsn-popover-body-padding-block); /** Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben */
+  --dsn-popover-menu-padding-inline: var(--dsn-popover-body-padding-inline); /** Horizontale padding rond de lijst: delegeert naar de Popover-body */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
   --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
   --dsn-radio-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */

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

@@ -737,6 +737,8 @@
   --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
   --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
   --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
+  --dsn-popover-menu-min-width: var(--dsn-popover-min-width); /** Minimale breedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-max-width: var(--dsn-popover-max-width); /** Maximale breedte van het paneel: delegeert naar de Popover */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -1148,6 +1150,14 @@
   --dsn-page-header-border-block-end-color: var(--dsn-color-accent-1-color-default); /** Kleur van de onderkantrand */
   --dsn-page-header-navbar-background-color: var(--dsn-color-accent-1-bg-default); /** Navigatiebalk achtergrond */
   --dsn-page-header-search-panel-background-color: var(--dsn-color-accent-1-bg-default); /** Achtergrondkleur van het zoekpaneel */
+  --dsn-popover-menu-background-color: var(--dsn-popover-background-color); /** Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen */
+  --dsn-popover-menu-border-width: var(--dsn-popover-border-width); /** Randbreedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-color: var(--dsn-popover-border-color); /** Randkleur van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-radius: var(--dsn-popover-border-radius); /** Afgeronde hoeken van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-box-shadow: var(--dsn-popover-box-shadow); /** Schaduw van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-z-index: var(--dsn-popover-z-index); /** Z-index van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-padding-block: var(--dsn-popover-body-padding-block); /** Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben */
+  --dsn-popover-menu-padding-inline: var(--dsn-popover-body-padding-inline); /** Horizontale padding rond de lijst: delegeert naar de Popover-body */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
   --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
   --dsn-radio-group-legend-font-family: var(--dsn-form-field-label-font-family); /** Font-familie van de legend (hergebruikt van het formulierveldlabel) */

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

@@ -1127,6 +1127,16 @@ export declare const DsnParagraphSmallPrintFontSize: string;
 export declare const DsnParagraphSmallPrintLineHeight: string;
 export declare const DsnParagraphSmallPrintMarginBlockEnd: string;
 export declare const DsnPasswordInputPaddingInlineEnd: string;
+export declare const DsnPopoverMenuBackgroundColor: string;
+export declare const DsnPopoverMenuBorderWidth: string;
+export declare const DsnPopoverMenuBorderColor: string;
+export declare const DsnPopoverMenuBorderRadius: string;
+export declare const DsnPopoverMenuBoxShadow: string;
+export declare const DsnPopoverMenuMinWidth: string;
+export declare const DsnPopoverMenuMaxWidth: string;
+export declare const DsnPopoverMenuZIndex: string;
+export declare const DsnPopoverMenuPaddingBlock: string;
+export declare const DsnPopoverMenuPaddingInline: string;
 export declare const DsnPopoverBackgroundColor: string;
 export declare const DsnPopoverBorderWidth: string;
 export declare const DsnPopoverBorderColor: string;

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

@@ -23159,6 +23159,211 @@ export default {
         path: ["dsn", "password-input", "padding-inline-end"],
       },
     },
+    "popover-menu": {
+      "background-color": {
+        $value: "#111111",
+        $type: "color",
+        $description:
+          "Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.background-color}",
+          $type: "color",
+          $description:
+            "Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen",
+        },
+        name: "DsnPopoverMenuBackgroundColor",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "background-color",
+        },
+        path: ["dsn", "popover-menu", "background-color"],
+      },
+      "border-width": {
+        $value: "1px",
+        $type: "borderWidth",
+        $description: "Randbreedte van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.border-width}",
+          $type: "borderWidth",
+          $description: "Randbreedte van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuBorderWidth",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "border-width",
+        },
+        path: ["dsn", "popover-menu", "border-width"],
+      },
+      "border-color": {
+        $value: "#3e3e3e",
+        $type: "color",
+        $description: "Randkleur van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.border-color}",
+          $type: "color",
+          $description: "Randkleur van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuBorderColor",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "border-color",
+        },
+        path: ["dsn", "popover-menu", "border-color"],
+      },
+      "border-radius": {
+        $value: "8px",
+        $type: "dimension",
+        $description:
+          "Afgeronde hoeken van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.border-radius}",
+          $type: "dimension",
+          $description:
+            "Afgeronde hoeken van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuBorderRadius",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "border-radius",
+        },
+        path: ["dsn", "popover-menu", "border-radius"],
+      },
+      "box-shadow": {
+        $value:
+          "0 2px 4px 0 color-mix(in srgb, black 60%, transparent), 0 8px 16px 0 color-mix(in srgb, black 40%, transparent), 0 0 0 1px color-mix(in srgb, white 8%, transparent)",
+        $type: "shadow",
+        $description: "Schaduw van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.box-shadow}",
+          $type: "shadow",
+          $description: "Schaduw van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuBoxShadow",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "box-shadow",
+        },
+        path: ["dsn", "popover-menu", "box-shadow"],
+      },
+      "min-width": {
+        $value: "12.5rem",
+        $type: "dimension",
+        $description:
+          "Minimale breedte van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.min-width}",
+          $type: "dimension",
+          $description:
+            "Minimale breedte van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuMinWidth",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "min-width",
+        },
+        path: ["dsn", "popover-menu", "min-width"],
+      },
+      "max-width": {
+        $value: "25rem",
+        $type: "dimension",
+        $description:
+          "Maximale breedte van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.max-width}",
+          $type: "dimension",
+          $description:
+            "Maximale breedte van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuMaxWidth",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "max-width",
+        },
+        path: ["dsn", "popover-menu", "max-width"],
+      },
+      "z-index": {
+        $value: "350",
+        $type: "number",
+        $description: "Z-index van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.z-index}",
+          $type: "number",
+          $description: "Z-index van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuZIndex",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "z-index",
+        },
+        path: ["dsn", "popover-menu", "z-index"],
+      },
+      "padding-block": {
+        $value: "calc(0.5rem * 2)",
+        $type: "spacing",
+        $description:
+          "Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.body.padding-block}",
+          $type: "spacing",
+          $description:
+            "Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben",
+        },
+        name: "DsnPopoverMenuPaddingBlock",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "padding-block",
+        },
+        path: ["dsn", "popover-menu", "padding-block"],
+      },
+      "padding-inline": {
+        $value: "calc(0.5rem * 2)",
+        $type: "spacing",
+        $description:
+          "Horizontale padding rond de lijst: delegeert naar de Popover-body",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.body.padding-inline}",
+          $type: "spacing",
+          $description:
+            "Horizontale padding rond de lijst: delegeert naar de Popover-body",
+        },
+        name: "DsnPopoverMenuPaddingInline",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "padding-inline",
+        },
+        path: ["dsn", "popover-menu", "padding-inline"],
+      },
+    },
     popover: {
       "background-color": {
         $value: "#111111",
@@ -29912,6 +30117,16 @@ export const DsnParagraphSmallPrintFontSize = "clamp(0.875rem, 0.75rem + 0.25vw,
 export const DsnParagraphSmallPrintLineHeight = "1.5";
 export const DsnParagraphSmallPrintMarginBlockEnd = "calc(0.5rem * 1)";
 export const DsnPasswordInputPaddingInlineEnd = "3rem";
+export const DsnPopoverMenuBackgroundColor = "#111111";
+export const DsnPopoverMenuBorderWidth = "1px";
+export const DsnPopoverMenuBorderColor = "#3e3e3e";
+export const DsnPopoverMenuBorderRadius = "8px";
+export const DsnPopoverMenuBoxShadow = "0 2px 4px 0 color-mix(in srgb, black 60%, transparent), 0 8px 16px 0 color-mix(in srgb, black 40%, transparent), 0 0 0 1px color-mix(in srgb, white 8%, transparent)";
+export const DsnPopoverMenuMinWidth = "12.5rem";
+export const DsnPopoverMenuMaxWidth = "25rem";
+export const DsnPopoverMenuZIndex = "350";
+export const DsnPopoverMenuPaddingBlock = "calc(0.5rem * 2)";
+export const DsnPopoverMenuPaddingInline = "calc(0.5rem * 2)";
 export const DsnPopoverBackgroundColor = "#111111";
 export const DsnPopoverBorderWidth = "1px";
 export const DsnPopoverBorderColor = "#3e3e3e";