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

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

@@ -22716,6 +22716,210 @@ export default {
         path: ["dsn", "password-input", "padding-inline-end"],
       },
     },
+    "popover-menu": {
+      "background-color": {
+        $value: "#ffffff",
+        $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: "2px",
+        $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: "#000000",
+        $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: "4px",
+        $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: "none",
+        $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: "#ffffff",
@@ -29463,6 +29667,16 @@ export const DsnParagraphSmallPrintFontSize = "0.875rem";
 export const DsnParagraphSmallPrintLineHeight = "1.4";
 export const DsnParagraphSmallPrintMarginBlockEnd = "calc(0.5rem * 1)";
 export const DsnPasswordInputPaddingInlineEnd = "3rem";
+export const DsnPopoverMenuBackgroundColor = "#ffffff";
+export const DsnPopoverMenuBorderWidth = "2px";
+export const DsnPopoverMenuBorderColor = "#000000";
+export const DsnPopoverMenuBorderRadius = "4px";
+export const DsnPopoverMenuBoxShadow = "none";
+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 = "#ffffff";
 export const DsnPopoverBorderWidth = "2px";
 export const DsnPopoverBorderColor = "#000000";

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

@@ -1128,6 +1128,16 @@
   "DsnParagraphSmallPrintLineHeight": "1.5",
   "DsnParagraphSmallPrintMarginBlockEnd": "calc(0.5rem * 1)",
   "DsnPasswordInputPaddingInlineEnd": "3rem",
+  "DsnPopoverMenuBackgroundColor": "#111111",
+  "DsnPopoverMenuBorderWidth": "1px",
+  "DsnPopoverMenuBorderColor": "#3e3e3e",
+  "DsnPopoverMenuBorderRadius": "8px",
+  "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)",
+  "DsnPopoverMenuMinWidth": "12.5rem",
+  "DsnPopoverMenuMaxWidth": "25rem",
+  "DsnPopoverMenuZIndex": "350",
+  "DsnPopoverMenuPaddingBlock": "calc(0.5rem * 2)",
+  "DsnPopoverMenuPaddingInline": "calc(0.5rem * 2)",
   "DsnPopoverBackgroundColor": "#111111",
   "DsnPopoverBorderWidth": "1px",
   "DsnPopoverBorderColor": "#3e3e3e",

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

@@ -1128,6 +1128,16 @@
   "DsnParagraphSmallPrintLineHeight": "1.5",
   "DsnParagraphSmallPrintMarginBlockEnd": "calc(0.5rem * 1)",
   "DsnPasswordInputPaddingInlineEnd": "3rem",
+  "DsnPopoverMenuBackgroundColor": "#111111",
+  "DsnPopoverMenuBorderWidth": "1px",
+  "DsnPopoverMenuBorderColor": "#3e3e3e",
+  "DsnPopoverMenuBorderRadius": "8px",
+  "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)",
+  "DsnPopoverMenuMinWidth": "12.5rem",
+  "DsnPopoverMenuMaxWidth": "25rem",
+  "DsnPopoverMenuZIndex": "350",
+  "DsnPopoverMenuPaddingBlock": "calc(0.5rem * 2)",
+  "DsnPopoverMenuPaddingInline": "calc(0.5rem * 2)",
   "DsnPopoverBackgroundColor": "#111111",
   "DsnPopoverBorderWidth": "1px",
   "DsnPopoverBorderColor": "#3e3e3e",

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

@@ -1128,6 +1128,16 @@
   "DsnParagraphSmallPrintLineHeight": "1.5",
   "DsnParagraphSmallPrintMarginBlockEnd": "calc(0.5rem * 1)",
   "DsnPasswordInputPaddingInlineEnd": "3rem",
+  "DsnPopoverMenuBackgroundColor": "#fcfcfc",
+  "DsnPopoverMenuBorderWidth": "1px",
+  "DsnPopoverMenuBorderColor": "#c4c4c4",
+  "DsnPopoverMenuBorderRadius": "8px",
+  "DsnPopoverMenuBoxShadow": "0 2px 4px 0 color-mix(in srgb, black 12%, transparent), 0 8px 16px 0 color-mix(in srgb, black 6%, transparent), 0 0 0 1px #00000000",
+  "DsnPopoverMenuMinWidth": "12.5rem",
+  "DsnPopoverMenuMaxWidth": "25rem",
+  "DsnPopoverMenuZIndex": "350",
+  "DsnPopoverMenuPaddingBlock": "calc(0.5rem * 2)",
+  "DsnPopoverMenuPaddingInline": "calc(0.5rem * 2)",
   "DsnPopoverBackgroundColor": "#fcfcfc",
   "DsnPopoverBorderWidth": "1px",
   "DsnPopoverBorderColor": "#c4c4c4",

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

@@ -1128,6 +1128,16 @@
   "DsnParagraphSmallPrintLineHeight": "1.5",
   "DsnParagraphSmallPrintMarginBlockEnd": "calc(0.5rem * 1)",
   "DsnPasswordInputPaddingInlineEnd": "3rem",
+  "DsnPopoverMenuBackgroundColor": "#fcfcfc",
+  "DsnPopoverMenuBorderWidth": "1px",
+  "DsnPopoverMenuBorderColor": "#c4c4c4",
+  "DsnPopoverMenuBorderRadius": "8px",
+  "DsnPopoverMenuBoxShadow": "0 2px 4px 0 color-mix(in srgb, black 12%, transparent), 0 8px 16px 0 color-mix(in srgb, black 6%, transparent), 0 0 0 1px #00000000",
+  "DsnPopoverMenuMinWidth": "12.5rem",
+  "DsnPopoverMenuMaxWidth": "25rem",
+  "DsnPopoverMenuZIndex": "350",
+  "DsnPopoverMenuPaddingBlock": "calc(0.5rem * 2)",
+  "DsnPopoverMenuPaddingInline": "calc(0.5rem * 2)",
   "DsnPopoverBackgroundColor": "#fcfcfc",
   "DsnPopoverBorderWidth": "1px",
   "DsnPopoverBorderColor": "#c4c4c4",

package/dist/json/tokens-dark.json

@@ -1128,6 +1128,16 @@
   "DsnParagraphSmallPrintLineHeight": "1.5",
   "DsnParagraphSmallPrintMarginBlockEnd": "calc(0.5rem * 1)",
   "DsnPasswordInputPaddingInlineEnd": "3rem",
+  "DsnPopoverMenuBackgroundColor": "#111111",
+  "DsnPopoverMenuBorderWidth": "1px",
+  "DsnPopoverMenuBorderColor": "#3e3e3e",
+  "DsnPopoverMenuBorderRadius": "8px",
+  "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)",
+  "DsnPopoverMenuMinWidth": "12.5rem",
+  "DsnPopoverMenuMaxWidth": "25rem",
+  "DsnPopoverMenuZIndex": "350",
+  "DsnPopoverMenuPaddingBlock": "calc(0.5rem * 2)",
+  "DsnPopoverMenuPaddingInline": "calc(0.5rem * 2)",
   "DsnPopoverBackgroundColor": "#111111",
   "DsnPopoverBorderWidth": "1px",
   "DsnPopoverBorderColor": "#3e3e3e",

package/dist/json/tokens.json

@@ -1128,6 +1128,16 @@
   "DsnParagraphSmallPrintLineHeight": "1.5",
   "DsnParagraphSmallPrintMarginBlockEnd": "calc(0.5rem * 1)",
   "DsnPasswordInputPaddingInlineEnd": "3rem",
+  "DsnPopoverMenuBackgroundColor": "#fcfcfc",
+  "DsnPopoverMenuBorderWidth": "1px",
+  "DsnPopoverMenuBorderColor": "#c4c4c4",
+  "DsnPopoverMenuBorderRadius": "8px",
+  "DsnPopoverMenuBoxShadow": "0 2px 4px 0 color-mix(in srgb, black 12%, transparent), 0 8px 16px 0 color-mix(in srgb, black 6%, transparent), 0 0 0 1px #00000000",
+  "DsnPopoverMenuMinWidth": "12.5rem",
+  "DsnPopoverMenuMaxWidth": "25rem",
+  "DsnPopoverMenuZIndex": "350",
+  "DsnPopoverMenuPaddingBlock": "calc(0.5rem * 2)",
+  "DsnPopoverMenuPaddingInline": "calc(0.5rem * 2)",
   "DsnPopoverBackgroundColor": "#fcfcfc",
   "DsnPopoverBorderWidth": "1px",
   "DsnPopoverBorderColor": "#c4c4c4",

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

@@ -1124,6 +1124,16 @@
   "DsnParagraphSmallPrintLineHeight": "1.4",
   "DsnParagraphSmallPrintMarginBlockEnd": "calc(0.5rem * 1)",
   "DsnPasswordInputPaddingInlineEnd": "3rem",
+  "DsnPopoverMenuBackgroundColor": "#000000",
+  "DsnPopoverMenuBorderWidth": "2px",
+  "DsnPopoverMenuBorderColor": "#ffffff",
+  "DsnPopoverMenuBorderRadius": "4px",
+  "DsnPopoverMenuBoxShadow": "none",
+  "DsnPopoverMenuMinWidth": "12.5rem",
+  "DsnPopoverMenuMaxWidth": "25rem",
+  "DsnPopoverMenuZIndex": "350",
+  "DsnPopoverMenuPaddingBlock": "calc(0.5rem * 2)",
+  "DsnPopoverMenuPaddingInline": "calc(0.5rem * 2)",
   "DsnPopoverBackgroundColor": "#000000",
   "DsnPopoverBorderWidth": "2px",
   "DsnPopoverBorderColor": "#ffffff",

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

@@ -1124,6 +1124,16 @@
   "DsnParagraphSmallPrintLineHeight": "1.4",
   "DsnParagraphSmallPrintMarginBlockEnd": "calc(0.5rem * 1)",
   "DsnPasswordInputPaddingInlineEnd": "3rem",
+  "DsnPopoverMenuBackgroundColor": "#000000",
+  "DsnPopoverMenuBorderWidth": "2px",
+  "DsnPopoverMenuBorderColor": "#ffffff",
+  "DsnPopoverMenuBorderRadius": "4px",
+  "DsnPopoverMenuBoxShadow": "none",
+  "DsnPopoverMenuMinWidth": "12.5rem",
+  "DsnPopoverMenuMaxWidth": "25rem",
+  "DsnPopoverMenuZIndex": "350",
+  "DsnPopoverMenuPaddingBlock": "calc(0.5rem * 2)",
+  "DsnPopoverMenuPaddingInline": "calc(0.5rem * 2)",
   "DsnPopoverBackgroundColor": "#000000",
   "DsnPopoverBorderWidth": "2px",
   "DsnPopoverBorderColor": "#ffffff",

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

@@ -1124,6 +1124,16 @@
   "DsnParagraphSmallPrintLineHeight": "1.4",
   "DsnParagraphSmallPrintMarginBlockEnd": "calc(0.5rem * 1)",
   "DsnPasswordInputPaddingInlineEnd": "3rem",
+  "DsnPopoverMenuBackgroundColor": "#ffffff",
+  "DsnPopoverMenuBorderWidth": "2px",
+  "DsnPopoverMenuBorderColor": "#000000",
+  "DsnPopoverMenuBorderRadius": "4px",
+  "DsnPopoverMenuBoxShadow": "none",
+  "DsnPopoverMenuMinWidth": "12.5rem",
+  "DsnPopoverMenuMaxWidth": "25rem",
+  "DsnPopoverMenuZIndex": "350",
+  "DsnPopoverMenuPaddingBlock": "calc(0.5rem * 2)",
+  "DsnPopoverMenuPaddingInline": "calc(0.5rem * 2)",
   "DsnPopoverBackgroundColor": "#ffffff",
   "DsnPopoverBorderWidth": "2px",
   "DsnPopoverBorderColor": "#000000",

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

@@ -1124,6 +1124,16 @@
   "DsnParagraphSmallPrintLineHeight": "1.4",
   "DsnParagraphSmallPrintMarginBlockEnd": "calc(0.5rem * 1)",
   "DsnPasswordInputPaddingInlineEnd": "3rem",
+  "DsnPopoverMenuBackgroundColor": "#ffffff",
+  "DsnPopoverMenuBorderWidth": "2px",
+  "DsnPopoverMenuBorderColor": "#000000",
+  "DsnPopoverMenuBorderRadius": "4px",
+  "DsnPopoverMenuBoxShadow": "none",
+  "DsnPopoverMenuMinWidth": "12.5rem",
+  "DsnPopoverMenuMaxWidth": "25rem",
+  "DsnPopoverMenuZIndex": "350",
+  "DsnPopoverMenuPaddingBlock": "calc(0.5rem * 2)",
+  "DsnPopoverMenuPaddingInline": "calc(0.5rem * 2)",
   "DsnPopoverBackgroundColor": "#ffffff",
   "DsnPopoverBorderWidth": "2px",
   "DsnPopoverBorderColor": "#000000",

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

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

package/dist/scss/_start-dark-information-dense.scss

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

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

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

package/dist/scss/_start-light-information-dense.scss

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

package/dist/scss/_variables-dark.scss

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

package/dist/scss/_variables.scss

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

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

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