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

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

@@ -1,8 +1,8 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$dsn-text-font-family-default: IBM Plex Sans, sans-serif; // Standaard lettertype voor bodytekst
-$dsn-text-font-family-monospace: IBM Plex Mono, monospace; // Monospace lettertype voor code
+$dsn-text-font-family-default: Fira Sans, sans-serif; // Standaard lettertype voor bodytekst
+$dsn-text-font-family-monospace: Fira Mono, monospace; // Monospace lettertype voor code
 $dsn-text-font-weight-default: 400; // Regulier gewicht
 $dsn-text-font-weight-bold: 700; // Vet gewicht
 $dsn-text-max-inline-size: 65ch; // Maximale regellengte voor leesbare bodytekst (paragrafen, lijsten)
@@ -20,7 +20,7 @@ $dsn-text-font-size-xl: clamp(1.5rem, 1.25rem + 0.625vw, 1.9375rem); // Extra la
 $dsn-text-font-size-2xl: clamp(2rem, 1.75rem + 0.75vw, 2.5625rem); // 2XL text - 32px to 41px (fluid)
 $dsn-text-font-size-3xl: clamp(2.5rem, 2.125rem + 1.125vw, 3.3125rem); // 3XL text - 40px to 53px (fluid)
 $dsn-text-font-size-4xl: clamp(3rem, 2.5rem + 1.5vw, 4.125rem); // 4XL text - 48px to 66px (fluid)
-$dsn-heading-font-family: IBM Plex Sans, sans-serif; // Lettertype voor koppen
+$dsn-heading-font-family: Fira Sans, sans-serif; // Lettertype voor koppen
 $dsn-heading-font-weight: 700; // Vet gewicht voor koppen
 $dsn-space-none: 0px; // Geen afstand
 $dsn-space-base: 0.5rem; // 8px - Basiseenheid voor het 8pt-rastersysteem
@@ -122,171 +122,171 @@ $dsn-transition-easing-enter: cubic-bezier(0, 0, 0.2, 1); // Elementen die het s
 $dsn-transition-easing-exit: cubic-bezier(0.4, 0, 1, 1); // Elementen die het scherm verlaten (accelereren)
 $dsn-transition-easing-move: cubic-bezier(0.4, 0, 0.2, 1); // Elementen die van positie wisselen
 $dsn-transition-easing-linear: linear; // Progress bars, loaders
-$dsn-color-neutral-bg-document: #111111; // Documentachtergrond
-$dsn-color-neutral-bg-elevated: #111111; // Elevated background — for floating layers (modals, popovers, dropdowns)
-$dsn-color-neutral-bg-subtle: #040404; // Subtiele achtergrond
-$dsn-color-neutral-bg-default: #1d1d1d; // Standaard achtergrond
-$dsn-color-neutral-bg-hover: #262626; // Achtergrond in hover state
-$dsn-color-neutral-bg-active: #2e2e2e; // Achtergrond in active state
-$dsn-color-neutral-border-subtle: #3e3e3e; // Subtiele rand
-$dsn-color-neutral-border-default: #686868; // Standaard rand
-$dsn-color-neutral-border-hover: #727272; // Rand in hover state
-$dsn-color-neutral-border-active: #7c7c7c; // Rand in active state
-$dsn-color-neutral-color-default: #ababab; // Standaard tekstkleur
-$dsn-color-neutral-color-hover: #bbbbbb; // Tekst in hover state
-$dsn-color-neutral-color-active: #cccccc; // Tekst in active state
-$dsn-color-neutral-color-subtle: #8b8b8b; // Subtiele tekstkleur
-$dsn-color-neutral-color-document: #f1f1f1; // Documenttekstkleur
-$dsn-color-accent-1-bg-document: #001126; // Documentachtergrond
-$dsn-color-accent-1-bg-elevated: #001126; // Elevated background — for floating layers (modals, popovers, dropdowns)
-$dsn-color-accent-1-bg-subtle: #000409; // Subtiele achtergrond
-$dsn-color-accent-1-bg-default: #001d40; // Standaard achtergrond
-$dsn-color-accent-1-bg-hover: #002551; // Achtergrond in hover state
-$dsn-color-accent-1-bg-active: #002d62; // Achtergrond in active state
-$dsn-color-accent-1-border-subtle: #003b81; // Subtiele rand
-$dsn-color-accent-1-border-default: #3169ad; // Standaard rand
-$dsn-color-accent-1-border-hover: #3f74b2; // Rand in hover state
-$dsn-color-accent-1-border-active: #4e7fb8; // Rand in active state
-$dsn-color-accent-1-color-default: #8faed2; // Standaard tekstkleur
-$dsn-color-accent-1-color-hover: #a5bedb; // Tekst in hover state
-$dsn-color-accent-1-color-active: #bbcee4; // Tekst in active state
-$dsn-color-accent-1-color-subtle: #648ec1; // Subtiele tekstkleur
-$dsn-color-accent-1-color-document: #ecf1f7; // Documenttekstkleur
-$dsn-color-negative-bg-document: #1c0000; // Documentachtergrond
-$dsn-color-negative-bg-elevated: #1c0000; // Elevated background — for floating layers (modals, popovers, dropdowns)
-$dsn-color-negative-bg-subtle: #060000; // Subtiele achtergrond
-$dsn-color-negative-bg-default: #2e0000; // Standaard achtergrond
-$dsn-color-negative-bg-hover: #3d0000; // Achtergrond in hover state
-$dsn-color-negative-bg-active: #4c0000; // Achtergrond in active state
-$dsn-color-negative-border-subtle: #820000; // Subtiele rand
-$dsn-color-negative-border-default: #e74848; // Standaard rand
-$dsn-color-negative-border-hover: #ec6d6d; // Rand in hover state
-$dsn-color-negative-border-active: #f19191; // Rand in active state
-$dsn-color-negative-color-default: #f9b1b1; // Standaard tekstkleur
-$dsn-color-negative-color-hover: #fbc3c3; // Tekst in hover state
-$dsn-color-negative-color-active: #fcd5d5; // Tekst in active state
-$dsn-color-negative-color-subtle: #eb8181; // Subtiele tekstkleur
-$dsn-color-negative-color-document: #feeded; // Documenttekstkleur
-$dsn-color-positive-bg-document: #001509; // Documentachtergrond
-$dsn-color-positive-bg-elevated: #001509; // Elevated background — for floating layers (modals, popovers, dropdowns)
-$dsn-color-positive-bg-subtle: #000802; // Subtiele achtergrond
-$dsn-color-positive-bg-default: #002312; // Standaard achtergrond
-$dsn-color-positive-bg-hover: #003019; // Achtergrond in hover state
-$dsn-color-positive-bg-active: #003e1f; // Achtergrond in active state
-$dsn-color-positive-border-subtle: #00481b; // Subtiele rand
-$dsn-color-positive-border-default: #1ba158; // Standaard rand
-$dsn-color-positive-border-hover: #3bb470; // Rand in hover state
-$dsn-color-positive-border-active: #5bc788; // Rand in active state
-$dsn-color-positive-color-default: #8ad3a6; // Standaard tekstkleur
-$dsn-color-positive-color-hover: #a3dcba; // Tekst in hover state
-$dsn-color-positive-color-active: #bce5ce; // Tekst in active state
-$dsn-color-positive-color-subtle: #6ac495; // Subtiele tekstkleur
-$dsn-color-positive-color-document: #e4f5ea; // Documenttekstkleur
-$dsn-color-warning-bg-document: #190f04; // Documentachtergrond
-$dsn-color-warning-bg-elevated: #190f04; // Elevated background — for floating layers (modals, popovers, dropdowns)
-$dsn-color-warning-bg-subtle: #0b0501; // Subtiele achtergrond
-$dsn-color-warning-bg-default: #2b1a09; // Standaard achtergrond
-$dsn-color-warning-bg-hover: #3c250d; // Achtergrond in hover state
-$dsn-color-warning-bg-active: #4d2f10; // Achtergrond in active state
-$dsn-color-warning-border-subtle: #5a3511; // Subtiele rand
-$dsn-color-warning-border-default: #d37f25; // Standaard rand
-$dsn-color-warning-border-hover: #de9843; // Rand in hover state
-$dsn-color-warning-border-active: #e9b062; // Rand in active state
-$dsn-color-warning-color-default: #ffb46b; // Standaard tekstkleur
-$dsn-color-warning-color-hover: #ffc38b; // Tekst in hover state
-$dsn-color-warning-color-active: #ffd2aa; // Tekst in active state
-$dsn-color-warning-color-subtle: #f3a453; // Subtiele tekstkleur
-$dsn-color-warning-color-document: #ffeedd; // Documenttekstkleur
-$dsn-color-neutral-inverse-bg-document: #fbfbfb; // Documentachtergrond (inverse)
-$dsn-color-neutral-inverse-bg-elevated: #fbfbfb; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
-$dsn-color-neutral-inverse-bg-subtle: #f1f1f1; // Subtiele achtergrond (inverse)
-$dsn-color-neutral-inverse-bg-default: #ababab; // Standaard achtergrond (inverse)
-$dsn-color-neutral-inverse-bg-hover: #bbbbbb; // Achtergrond in hover state (inverse)
-$dsn-color-neutral-inverse-bg-active: #cccccc; // Achtergrond in active state (inverse)
-$dsn-color-neutral-inverse-border-subtle: #bfbfbf; // Subtiele rand (inverse)
-$dsn-color-neutral-inverse-border-default: #3e3e3e; // Standaard rand (inverse)
-$dsn-color-neutral-inverse-border-hover: #2e2e2e; // Rand in hover state (inverse)
-$dsn-color-neutral-inverse-border-active: #1d1d1d; // Rand in active state (inverse)
-$dsn-color-neutral-inverse-color-default: #000000; // Standaard tekstkleur (inverse)
-$dsn-color-neutral-inverse-color-hover: #000000; // Tekst in hover state (inverse)
-$dsn-color-neutral-inverse-color-active: #000000; // Tekst in active state (inverse)
-$dsn-color-neutral-inverse-color-subtle: #3e3e3e; // Subtiele tekstkleur (inverse)
-$dsn-color-neutral-inverse-color-document: #000000; // Documenttekstkleur (inverse)
-$dsn-color-accent-1-inverse-bg-document: #dcebf9; // Documentachtergrond (inverse)
-$dsn-color-accent-1-inverse-bg-elevated: #dcebf9; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
-$dsn-color-accent-1-inverse-bg-subtle: #ecf1f7; // Subtiele achtergrond (inverse)
-$dsn-color-accent-1-inverse-bg-default: #8faed2; // Standaard achtergrond (inverse)
-$dsn-color-accent-1-inverse-bg-hover: #a5bedb; // Achtergrond in hover state (inverse)
-$dsn-color-accent-1-inverse-bg-active: #bbcee4; // Achtergrond in active state (inverse)
-$dsn-color-accent-1-inverse-border-subtle: #b0c6df; // Subtiele rand (inverse)
-$dsn-color-accent-1-inverse-border-default: #003b81; // Standaard rand (inverse)
-$dsn-color-accent-1-inverse-border-hover: #002d62; // Rand in hover state (inverse)
-$dsn-color-accent-1-inverse-border-active: #001d40; // Rand in active state (inverse)
-$dsn-color-accent-1-inverse-color-default: #000000; // Standaard tekstkleur (inverse)
-$dsn-color-accent-1-inverse-color-hover: #000000; // Tekst in hover state (inverse)
-$dsn-color-accent-1-inverse-color-active: #000000; // Tekst in active state (inverse)
-$dsn-color-accent-1-inverse-color-subtle: #003b81; // Subtiele tekstkleur (inverse)
-$dsn-color-accent-1-inverse-color-document: #000000; // Documenttekstkleur (inverse)
-$dsn-color-info-inverse-bg-document: #dcebf9; // Documentachtergrond (inverse)
-$dsn-color-info-inverse-bg-elevated: #dcebf9; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
-$dsn-color-info-inverse-bg-subtle: #ecf1f7; // Subtiele achtergrond (inverse)
-$dsn-color-info-inverse-bg-default: #8faed2; // Standaard achtergrond (inverse)
-$dsn-color-info-inverse-bg-hover: #a5bedb; // Achtergrond in hover state (inverse)
-$dsn-color-info-inverse-bg-active: #bbcee4; // Achtergrond in active state (inverse)
-$dsn-color-info-inverse-border-subtle: #b0c6df; // Subtiele rand (inverse)
-$dsn-color-info-inverse-border-default: #003b81; // Standaard rand (inverse)
-$dsn-color-info-inverse-border-hover: #002d62; // Rand in hover state (inverse)
-$dsn-color-info-inverse-border-active: #001d40; // Rand in active state (inverse)
-$dsn-color-info-inverse-color-default: #000000; // Standaard tekstkleur (inverse)
-$dsn-color-info-inverse-color-hover: #000000; // Tekst in hover state (inverse)
-$dsn-color-info-inverse-color-active: #000000; // Tekst in active state (inverse)
-$dsn-color-info-inverse-color-subtle: #003b81; // Subtiele tekstkleur (inverse)
-$dsn-color-info-inverse-color-document: #000000; // Documenttekstkleur (inverse)
-$dsn-color-negative-inverse-bg-document: #fcdada; // Documentachtergrond (inverse)
-$dsn-color-negative-inverse-bg-elevated: #fcdada; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
-$dsn-color-negative-inverse-bg-subtle: #feeded; // Subtiele achtergrond (inverse)
-$dsn-color-negative-inverse-bg-default: #f9b1b1; // Standaard achtergrond (inverse)
-$dsn-color-negative-inverse-bg-hover: #fbc3c3; // Achtergrond in hover state (inverse)
-$dsn-color-negative-inverse-bg-active: #fcd5d5; // Achtergrond in active state (inverse)
-$dsn-color-negative-inverse-border-subtle: #f3abab; // Subtiele rand (inverse)
-$dsn-color-negative-inverse-border-default: #820000; // Standaard rand (inverse)
-$dsn-color-negative-inverse-border-hover: #4c0000; // Rand in hover state (inverse)
-$dsn-color-negative-inverse-border-active: #2e0000; // Rand in active state (inverse)
-$dsn-color-negative-inverse-color-default: #000000; // Standaard tekstkleur (inverse)
-$dsn-color-negative-inverse-color-hover: #000000; // Tekst in hover state (inverse)
-$dsn-color-negative-inverse-color-active: #000000; // Tekst in active state (inverse)
-$dsn-color-negative-inverse-color-subtle: #820000; // Subtiele tekstkleur (inverse)
-$dsn-color-negative-inverse-color-document: #000000; // Documenttekstkleur (inverse)
-$dsn-color-positive-inverse-bg-document: #cce8d7; // Documentachtergrond (inverse)
-$dsn-color-positive-inverse-bg-elevated: #cce8d7; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
-$dsn-color-positive-inverse-bg-subtle: #e4f5ea; // Subtiele achtergrond (inverse)
-$dsn-color-positive-inverse-bg-default: #8ad3a6; // Standaard achtergrond (inverse)
-$dsn-color-positive-inverse-bg-hover: #a3dcba; // Achtergrond in hover state (inverse)
-$dsn-color-positive-inverse-bg-active: #bce5ce; // Achtergrond in active state (inverse)
-$dsn-color-positive-inverse-border-subtle: #7dca9e; // Subtiele rand (inverse)
-$dsn-color-positive-inverse-border-default: #00481b; // Standaard rand (inverse)
-$dsn-color-positive-inverse-border-hover: #003e1f; // Rand in hover state (inverse)
-$dsn-color-positive-inverse-border-active: #002312; // Rand in active state (inverse)
-$dsn-color-positive-inverse-color-default: #000000; // Standaard tekstkleur (inverse)
-$dsn-color-positive-inverse-color-hover: #000000; // Tekst in hover state (inverse)
-$dsn-color-positive-inverse-color-active: #000000; // Tekst in active state (inverse)
-$dsn-color-positive-inverse-color-subtle: #00481b; // Subtiele tekstkleur (inverse)
-$dsn-color-positive-inverse-color-document: #000000; // Documenttekstkleur (inverse)
-$dsn-color-warning-inverse-bg-document: #ffeac6; // Documentachtergrond (inverse)
-$dsn-color-warning-inverse-bg-elevated: #ffeac6; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
-$dsn-color-warning-inverse-bg-subtle: #ffeedd; // Subtiele achtergrond (inverse)
-$dsn-color-warning-inverse-bg-default: #ffb46b; // Standaard achtergrond (inverse)
-$dsn-color-warning-inverse-bg-hover: #ffc38b; // Achtergrond in hover state (inverse)
-$dsn-color-warning-inverse-bg-active: #ffd2aa; // Achtergrond in active state (inverse)
-$dsn-color-warning-inverse-border-subtle: #ffa754; // Subtiele rand (inverse)
-$dsn-color-warning-inverse-border-default: #5a3511; // Standaard rand (inverse)
-$dsn-color-warning-inverse-border-hover: #4d2f10; // Rand in hover state (inverse)
-$dsn-color-warning-inverse-border-active: #2b1a09; // Rand in active state (inverse)
-$dsn-color-warning-inverse-color-default: #000000; // Standaard tekstkleur (inverse)
-$dsn-color-warning-inverse-color-hover: #000000; // Tekst in hover state (inverse)
-$dsn-color-warning-inverse-color-active: #000000; // Tekst in active state (inverse)
-$dsn-color-warning-inverse-color-subtle: #5a3511; // Subtiele tekstkleur (inverse)
-$dsn-color-warning-inverse-color-document: #000000; // Documenttekstkleur (inverse)
+$dsn-color-neutral-bg-document: oklch(0.12 0 0); // Documentachtergrond
+$dsn-color-neutral-bg-elevated: oklch(0.155 0 0); // Elevated background — for floating layers (modals, popovers, dropdowns)
+$dsn-color-neutral-bg-subtle: oklch(0.175 0 0); // Subtiele achtergrond
+$dsn-color-neutral-bg-default: oklch(0.23 0 0); // Standaard achtergrond
+$dsn-color-neutral-bg-hover: oklch(0.26 0 0); // Achtergrond in hover state
+$dsn-color-neutral-bg-active: oklch(0.29 0 0); // Achtergrond in active state
+$dsn-color-neutral-border-subtle: oklch(0.38 0 0); // Subtiele rand
+$dsn-color-neutral-border-default: oklch(0.52 0 0); // Standaard rand
+$dsn-color-neutral-border-hover: oklch(0.56 0 0); // Rand in hover state
+$dsn-color-neutral-border-active: oklch(0.6 0 0); // Rand in active state
+$dsn-color-neutral-color-default: oklch(0.72 0 0); // Standaard tekstkleur
+$dsn-color-neutral-color-hover: oklch(0.76 0 0); // Tekst in hover state
+$dsn-color-neutral-color-active: oklch(0.8 0 0); // Tekst in active state
+$dsn-color-neutral-color-subtle: oklch(0.68 0 0); // Subtiele tekstkleur
+$dsn-color-neutral-color-document: oklch(0.93 0 0); // Documenttekstkleur
+$dsn-color-accent-1-bg-document: oklch(0.12 0.02 255.8); // Documentachtergrond
+$dsn-color-accent-1-bg-elevated: oklch(0.155 0.023 255.8); // Elevated background — for floating layers (modals, popovers, dropdowns)
+$dsn-color-accent-1-bg-subtle: oklch(0.175 0.026 255.8); // Subtiele achtergrond
+$dsn-color-accent-1-bg-default: oklch(0.23 0.029 255.8); // Standaard achtergrond
+$dsn-color-accent-1-bg-hover: oklch(0.26 0.033 255.8); // Achtergrond in hover state
+$dsn-color-accent-1-bg-active: oklch(0.29 0.036 255.8); // Achtergrond in active state
+$dsn-color-accent-1-border-subtle: oklch(0.38 0.073 255.8); // Subtiele rand
+$dsn-color-accent-1-border-default: oklch(0.52 0.163 255.8); // Standaard rand
+$dsn-color-accent-1-border-hover: oklch(0.56 0.19 255.8); // Rand in hover state
+$dsn-color-accent-1-border-active: oklch(0.6 0.203 255.8); // Rand in active state
+$dsn-color-accent-1-color-default: oklch(0.72 0.131 255.8); // Standaard tekstkleur
+$dsn-color-accent-1-color-hover: oklch(0.76 0.125 255.8); // Tekst in hover state
+$dsn-color-accent-1-color-active: oklch(0.8 0.102 255.8); // Tekst in active state
+$dsn-color-accent-1-color-subtle: oklch(0.68 0.133 255.8); // Subtiele tekstkleur
+$dsn-color-accent-1-color-document: oklch(0.93 0.024 255.8); // Documenttekstkleur
+$dsn-color-negative-bg-document: oklch(0.12 0.029 29.2); // Documentachtergrond
+$dsn-color-negative-bg-elevated: oklch(0.155 0.034 29.2); // Elevated background — for floating layers (modals, popovers, dropdowns)
+$dsn-color-negative-bg-subtle: oklch(0.175 0.039 29.2); // Subtiele achtergrond
+$dsn-color-negative-bg-default: oklch(0.23 0.043 29.2); // Standaard achtergrond
+$dsn-color-negative-bg-hover: oklch(0.26 0.048 29.2); // Achtergrond in hover state
+$dsn-color-negative-bg-active: oklch(0.29 0.053 29.2); // Achtergrond in active state
+$dsn-color-negative-border-subtle: oklch(0.38 0.108 29.2); // Subtiele rand
+$dsn-color-negative-border-default: oklch(0.54 0.222 29.2); // Standaard rand
+$dsn-color-negative-border-hover: oklch(0.58 0.238 29.2); // Rand in hover state
+$dsn-color-negative-border-active: oklch(0.62 0.254 29.2); // Rand in active state
+$dsn-color-negative-color-default: oklch(0.72 0.175 29.2); // Standaard tekstkleur
+$dsn-color-negative-color-hover: oklch(0.76 0.143 29.2); // Tekst in hover state
+$dsn-color-negative-color-active: oklch(0.8 0.115 29.2); // Tekst in active state
+$dsn-color-negative-color-subtle: oklch(0.68 0.197 29.2); // Subtiele tekstkleur
+$dsn-color-negative-color-document: oklch(0.93 0.036 29.2); // Documenttekstkleur
+$dsn-color-positive-bg-document: oklch(0.12 0.019 148.2); // Documentachtergrond
+$dsn-color-positive-bg-elevated: oklch(0.155 0.022 148.2); // Elevated background — for floating layers (modals, popovers, dropdowns)
+$dsn-color-positive-bg-subtle: oklch(0.175 0.025 148.2); // Subtiele achtergrond
+$dsn-color-positive-bg-default: oklch(0.23 0.028 148.2); // Standaard achtergrond
+$dsn-color-positive-bg-hover: oklch(0.26 0.031 148.2); // Achtergrond in hover state
+$dsn-color-positive-bg-active: oklch(0.29 0.034 148.2); // Achtergrond in active state
+$dsn-color-positive-border-subtle: oklch(0.38 0.07 148.2); // Subtiele rand
+$dsn-color-positive-border-default: oklch(0.52 0.15 148.2); // Standaard rand
+$dsn-color-positive-border-hover: oklch(0.56 0.161 148.2); // Rand in hover state
+$dsn-color-positive-border-active: oklch(0.6 0.173 148.2); // Rand in active state
+$dsn-color-positive-color-default: oklch(0.72 0.125 148.2); // Standaard tekstkleur
+$dsn-color-positive-color-hover: oklch(0.76 0.135 148.2); // Tekst in hover state
+$dsn-color-positive-color-active: oklch(0.8 0.145 148.2); // Tekst in active state
+$dsn-color-positive-color-subtle: oklch(0.68 0.127 148.2); // Subtiele tekstkleur
+$dsn-color-positive-color-document: oklch(0.93 0.023 148.2); // Documenttekstkleur
+$dsn-color-warning-bg-document: oklch(0.12 0.023 58.3); // Documentachtergrond
+$dsn-color-warning-bg-elevated: oklch(0.155 0.026 58.3); // Elevated background — for floating layers (modals, popovers, dropdowns)
+$dsn-color-warning-bg-subtle: oklch(0.175 0.03 58.3); // Subtiele achtergrond
+$dsn-color-warning-bg-default: oklch(0.23 0.034 58.3); // Standaard achtergrond
+$dsn-color-warning-bg-hover: oklch(0.26 0.038 58.3); // Achtergrond in hover state
+$dsn-color-warning-bg-active: oklch(0.29 0.042 58.3); // Achtergrond in active state
+$dsn-color-warning-border-subtle: oklch(0.38 0.085 58.3); // Subtiele rand
+$dsn-color-warning-border-default: oklch(0.525 0.125 58.3); // Standaard rand
+$dsn-color-warning-border-hover: oklch(0.565 0.135 58.3); // Rand in hover state
+$dsn-color-warning-border-active: oklch(0.605 0.144 58.3); // Rand in active state
+$dsn-color-warning-color-default: oklch(0.72 0.151 58.3); // Standaard tekstkleur
+$dsn-color-warning-color-hover: oklch(0.76 0.163 58.3); // Tekst in hover state
+$dsn-color-warning-color-active: oklch(0.8 0.138 58.3); // Tekst in active state
+$dsn-color-warning-color-subtle: oklch(0.68 0.154 58.3); // Subtiele tekstkleur
+$dsn-color-warning-color-document: oklch(0.93 0.028 58.3); // Documenttekstkleur
+$dsn-color-neutral-inverse-bg-document: oklch(0.615 0 0); // Documentachtergrond (inverse)
+$dsn-color-neutral-inverse-bg-elevated: oklch(0.655 0 0); // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
+$dsn-color-neutral-inverse-bg-subtle: oklch(0.645 0 0); // Subtiele achtergrond (inverse)
+$dsn-color-neutral-inverse-bg-default: oklch(0.585 0 0); // Standaard achtergrond (inverse)
+$dsn-color-neutral-inverse-bg-hover: oklch(0.625 0 0); // Achtergrond in hover state (inverse)
+$dsn-color-neutral-inverse-bg-active: oklch(0.665 0 0); // Achtergrond in active state (inverse)
+$dsn-color-neutral-inverse-border-subtle: oklch(0.38 0 0); // Subtiele rand (inverse)
+$dsn-color-neutral-inverse-border-default: oklch(0.32 0 0); // Standaard rand (inverse)
+$dsn-color-neutral-inverse-border-hover: oklch(0.28 0 0); // Rand in hover state (inverse)
+$dsn-color-neutral-inverse-border-active: oklch(0.24 0 0); // Rand in active state (inverse)
+$dsn-color-neutral-inverse-color-default: oklch(0.12 0 0); // Standaard tekstkleur (inverse)
+$dsn-color-neutral-inverse-color-hover: oklch(0.1 0 0); // Tekst in hover state (inverse)
+$dsn-color-neutral-inverse-color-active: oklch(0.08 0 0); // Tekst in active state (inverse)
+$dsn-color-neutral-inverse-color-subtle: oklch(0.17 0 0); // Subtiele tekstkleur (inverse)
+$dsn-color-neutral-inverse-color-document: oklch(0.12 0 0); // Documenttekstkleur (inverse)
+$dsn-color-accent-1-inverse-bg-document: oklch(0.615 0.106 255.8); // Documentachtergrond (inverse)
+$dsn-color-accent-1-inverse-bg-elevated: oklch(0.655 0.098 255.8); // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
+$dsn-color-accent-1-inverse-bg-subtle: oklch(0.645 0.122 255.8); // Subtiele achtergrond (inverse)
+$dsn-color-accent-1-inverse-bg-default: oklch(0.585 0.147 255.8); // Standaard achtergrond (inverse)
+$dsn-color-accent-1-inverse-bg-hover: oklch(0.625 0.176 255.8); // Achtergrond in hover state (inverse)
+$dsn-color-accent-1-inverse-bg-active: oklch(0.665 0.18 255.8); // Achtergrond in active state (inverse)
+$dsn-color-accent-1-inverse-border-subtle: oklch(0.38 0.117 255.8); // Subtiele rand (inverse)
+$dsn-color-accent-1-inverse-border-default: oklch(0.32 0.098 255.8); // Standaard rand (inverse)
+$dsn-color-accent-1-inverse-border-hover: oklch(0.28 0.095 255.8); // Rand in hover state (inverse)
+$dsn-color-accent-1-inverse-border-active: oklch(0.24 0.081 255.8); // Rand in active state (inverse)
+$dsn-color-accent-1-inverse-color-default: oklch(0.12 0.02 255.8); // Standaard tekstkleur (inverse)
+$dsn-color-accent-1-inverse-color-hover: oklch(0.1 0.02 255.8); // Tekst in hover state (inverse)
+$dsn-color-accent-1-inverse-color-active: oklch(0.08 0.02 255.8); // Tekst in active state (inverse)
+$dsn-color-accent-1-inverse-color-subtle: oklch(0.17 0.058 255.8); // Subtiele tekstkleur (inverse)
+$dsn-color-accent-1-inverse-color-document: oklch(0.12 0.02 255.8); // Documenttekstkleur (inverse)
+$dsn-color-info-inverse-bg-document: oklch(0.615 0.106 255.8); // Documentachtergrond (inverse)
+$dsn-color-info-inverse-bg-elevated: oklch(0.655 0.098 255.8); // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
+$dsn-color-info-inverse-bg-subtle: oklch(0.645 0.122 255.8); // Subtiele achtergrond (inverse)
+$dsn-color-info-inverse-bg-default: oklch(0.585 0.147 255.8); // Standaard achtergrond (inverse)
+$dsn-color-info-inverse-bg-hover: oklch(0.625 0.176 255.8); // Achtergrond in hover state (inverse)
+$dsn-color-info-inverse-bg-active: oklch(0.665 0.18 255.8); // Achtergrond in active state (inverse)
+$dsn-color-info-inverse-border-subtle: oklch(0.38 0.117 255.8); // Subtiele rand (inverse)
+$dsn-color-info-inverse-border-default: oklch(0.32 0.098 255.8); // Standaard rand (inverse)
+$dsn-color-info-inverse-border-hover: oklch(0.28 0.095 255.8); // Rand in hover state (inverse)
+$dsn-color-info-inverse-border-active: oklch(0.24 0.081 255.8); // Rand in active state (inverse)
+$dsn-color-info-inverse-color-default: oklch(0.12 0.02 255.8); // Standaard tekstkleur (inverse)
+$dsn-color-info-inverse-color-hover: oklch(0.1 0.02 255.8); // Tekst in hover state (inverse)
+$dsn-color-info-inverse-color-active: oklch(0.08 0.02 255.8); // Tekst in active state (inverse)
+$dsn-color-info-inverse-color-subtle: oklch(0.17 0.058 255.8); // Subtiele tekstkleur (inverse)
+$dsn-color-info-inverse-color-document: oklch(0.12 0.02 255.8); // Documenttekstkleur (inverse)
+$dsn-color-negative-inverse-bg-document: oklch(0.635 0.157 29.2); // Documentachtergrond (inverse)
+$dsn-color-negative-inverse-bg-elevated: oklch(0.675 0.145 29.2); // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
+$dsn-color-negative-inverse-bg-subtle: oklch(0.665 0.181 29.2); // Subtiele achtergrond (inverse)
+$dsn-color-negative-inverse-bg-default: oklch(0.605 0.217 29.2); // Standaard achtergrond (inverse)
+$dsn-color-negative-inverse-bg-hover: oklch(0.645 0.241 29.2); // Achtergrond in hover state (inverse)
+$dsn-color-negative-inverse-bg-active: oklch(0.685 0.204 29.2); // Achtergrond in active state (inverse)
+$dsn-color-negative-inverse-border-subtle: oklch(0.39 0.16 29.2); // Subtiele rand (inverse)
+$dsn-color-negative-inverse-border-default: oklch(0.33 0.135 29.2); // Standaard rand (inverse)
+$dsn-color-negative-inverse-border-hover: oklch(0.29 0.119 29.2); // Rand in hover state (inverse)
+$dsn-color-negative-inverse-border-active: oklch(0.25 0.103 29.2); // Rand in active state (inverse)
+$dsn-color-negative-inverse-color-default: oklch(0.12 0.029 29.2); // Standaard tekstkleur (inverse)
+$dsn-color-negative-inverse-color-hover: oklch(0.1 0.029 29.2); // Tekst in hover state (inverse)
+$dsn-color-negative-inverse-color-active: oklch(0.08 0.029 29.2); // Tekst in active state (inverse)
+$dsn-color-negative-inverse-color-subtle: oklch(0.17 0.07 29.2); // Subtiele tekstkleur (inverse)
+$dsn-color-negative-inverse-color-document: oklch(0.12 0.029 29.2); // Documenttekstkleur (inverse)
+$dsn-color-positive-inverse-bg-document: oklch(0.61 0.101 148.2); // Documentachtergrond (inverse)
+$dsn-color-positive-inverse-bg-elevated: oklch(0.65 0.094 148.2); // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
+$dsn-color-positive-inverse-bg-subtle: oklch(0.64 0.117 148.2); // Subtiele achtergrond (inverse)
+$dsn-color-positive-inverse-bg-default: oklch(0.58 0.14 148.2); // Standaard achtergrond (inverse)
+$dsn-color-positive-inverse-bg-hover: oklch(0.62 0.168 148.2); // Achtergrond in hover state (inverse)
+$dsn-color-positive-inverse-bg-active: oklch(0.66 0.19 148.2); // Achtergrond in active state (inverse)
+$dsn-color-positive-inverse-border-subtle: oklch(0.38 0.109 148.2); // Subtiele rand (inverse)
+$dsn-color-positive-inverse-border-default: oklch(0.32 0.092 148.2); // Standaard rand (inverse)
+$dsn-color-positive-inverse-border-hover: oklch(0.28 0.081 148.2); // Rand in hover state (inverse)
+$dsn-color-positive-inverse-border-active: oklch(0.24 0.069 148.2); // Rand in active state (inverse)
+$dsn-color-positive-inverse-color-default: oklch(0.12 0.019 148.2); // Standaard tekstkleur (inverse)
+$dsn-color-positive-inverse-color-hover: oklch(0.1 0.019 148.2); // Tekst in hover state (inverse)
+$dsn-color-positive-inverse-color-active: oklch(0.08 0.019 148.2); // Tekst in active state (inverse)
+$dsn-color-positive-inverse-color-subtle: oklch(0.17 0.049 148.2); // Subtiele tekstkleur (inverse)
+$dsn-color-positive-inverse-color-document: oklch(0.12 0.019 148.2); // Documenttekstkleur (inverse)
+$dsn-color-warning-inverse-bg-document: oklch(0.696 0.123 58.3); // Documentachtergrond (inverse)
+$dsn-color-warning-inverse-bg-elevated: oklch(0.736 0.113 58.3); // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
+$dsn-color-warning-inverse-bg-subtle: oklch(0.726 0.142 58.3); // Subtiele achtergrond (inverse)
+$dsn-color-warning-inverse-bg-default: oklch(0.666 0.159 58.3); // Standaard achtergrond (inverse)
+$dsn-color-warning-inverse-bg-hover: oklch(0.706 0.168 58.3); // Achtergrond in hover state (inverse)
+$dsn-color-warning-inverse-bg-active: oklch(0.746 0.178 58.3); // Achtergrond in active state (inverse)
+$dsn-color-warning-inverse-border-subtle: oklch(0.456 0.109 58.3); // Subtiele rand (inverse)
+$dsn-color-warning-inverse-border-default: oklch(0.396 0.094 58.3); // Standaard rand (inverse)
+$dsn-color-warning-inverse-border-hover: oklch(0.356 0.085 58.3); // Rand in hover state (inverse)
+$dsn-color-warning-inverse-border-active: oklch(0.316 0.075 58.3); // Rand in active state (inverse)
+$dsn-color-warning-inverse-color-default: oklch(0.12 0.023 58.3); // Standaard tekstkleur (inverse)
+$dsn-color-warning-inverse-color-hover: oklch(0.1 0.023 58.3); // Tekst in hover state (inverse)
+$dsn-color-warning-inverse-color-active: oklch(0.08 0.019 58.3); // Tekst in active state (inverse)
+$dsn-color-warning-inverse-color-subtle: oklch(0.17 0.041 58.3); // Subtiele tekstkleur (inverse)
+$dsn-color-warning-inverse-color-document: oklch(0.12 0.023 58.3); // Documenttekstkleur (inverse)
 $dsn-color-transparent: rgba(0, 0, 0, 0); // Volledig transparant — voor onzichtbare achtergronden en randen
 $dsn-color-shadow-direct: color-mix(in srgb, black 60%, transparent); // Scherpe schaduwlaag — direct licht, dichtbij het object
 $dsn-color-shadow-ambient: color-mix(in srgb, black 40%, transparent); // Diffuse schaduwlaag — omgevingslicht, verder weg
@@ -589,7 +589,7 @@ $dsn-color-action-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover
 $dsn-color-action-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active; // Tekst in active state (inverse) — secundaire acties (links, navigatie)
 $dsn-color-action-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; // Subtiele tekstkleur (inverse) — secundaire acties (links, navigatie)
 $dsn-color-action-2-inverse-color-document: $dsn-color-accent-1-inverse-color-document; // Documenttekstkleur (inverse) — secundaire acties (links, navigatie)
-$dsn-backdrop-background-color: $dsn-color-neutral-bg-document; // Achtergrondkleur van de backdrop — altijd donker, ongeacht dark mode. Gebruikt neutral.bg-document (#111111) zodat de overlay donker blijft in dark mode.
+$dsn-backdrop-background-color: $dsn-color-neutral-bg-document; // Achtergrondkleur van de backdrop — altijd donker, ongeacht dark mode. Gebruikt neutral.bg-document zodat de overlay donker blijft in dark mode.
 $dsn-backdrop-z-index: $dsn-z-index-400; // Z-index schaal: backdrop (400) → modal-dialog/drawer (500) → skip-link (600)
 $dsn-action-group-column-gap: $dsn-space-inline-lg; // Horizontal gap between actions in horizontal direction
 $dsn-action-group-row-gap: $dsn-space-row-lg; // Vertical gap between wrapped rows in horizontal direction
@@ -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;