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

package/dist/js/tokens.cjs

@@ -3543,154 +3543,154 @@ var tokens_default = { dsn: {
 				"border-width"
 			]
 		},
-		width: {
+		"inline-size": {
 			xs: {
 				$value: "10ch",
 				$type: "dimension",
-				$description: "Extra kleine breedte — voor zeer korte invoervelden (bijv. postcode, jaar, CVV)",
+				$description: "Extra kleine inline-size — voor zeer korte invoervelden (bijv. postcode, jaar, CVV)",
 				filePath: "src/tokens/themes/start/base.json",
 				isSource: true,
 				original: {
 					$value: "10ch",
 					$type: "dimension",
-					$description: "Extra kleine breedte — voor zeer korte invoervelden (bijv. postcode, jaar, CVV)"
+					$description: "Extra kleine inline-size — voor zeer korte invoervelden (bijv. postcode, jaar, CVV)"
 				},
-				name: "DsnFormControlWidthXs",
+				name: "DsnFormControlInlineSizeXs",
 				attributes: {
 					category: "dsn",
 					type: "form-control",
-					item: "width",
+					item: "inline-size",
 					subitem: "xs"
 				},
 				path: [
 					"dsn",
 					"form-control",
-					"width",
+					"inline-size",
 					"xs"
 				]
 			},
 			sm: {
 				$value: "14ch",
 				$type: "dimension",
-				$description: "Kleine breedte — voor korte invoervelden (bijv. tijd UU:MM, korte codes)",
+				$description: "Kleine inline-size — voor korte invoervelden (bijv. tijd UU:MM, korte codes)",
 				filePath: "src/tokens/themes/start/base.json",
 				isSource: true,
 				original: {
 					$value: "14ch",
 					$type: "dimension",
-					$description: "Kleine breedte — voor korte invoervelden (bijv. tijd UU:MM, korte codes)"
+					$description: "Kleine inline-size — voor korte invoervelden (bijv. tijd UU:MM, korte codes)"
 				},
-				name: "DsnFormControlWidthSm",
+				name: "DsnFormControlInlineSizeSm",
 				attributes: {
 					category: "dsn",
 					type: "form-control",
-					item: "width",
+					item: "inline-size",
 					subitem: "sm"
 				},
 				path: [
 					"dsn",
 					"form-control",
-					"width",
+					"inline-size",
 					"sm"
 				]
 			},
 			md: {
 				$value: "20ch",
 				$type: "dimension",
-				$description: "Middelgrote breedte — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer)",
+				$description: "Middelgrote inline-size — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer)",
 				filePath: "src/tokens/themes/start/base.json",
 				isSource: true,
 				original: {
 					$value: "20ch",
 					$type: "dimension",
-					$description: "Middelgrote breedte — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer)"
+					$description: "Middelgrote inline-size — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer)"
 				},
-				name: "DsnFormControlWidthMd",
+				name: "DsnFormControlInlineSizeMd",
 				attributes: {
 					category: "dsn",
 					type: "form-control",
-					item: "width",
+					item: "inline-size",
 					subitem: "md"
 				},
 				path: [
 					"dsn",
 					"form-control",
-					"width",
+					"inline-size",
 					"md"
 				]
 			},
 			lg: {
 				$value: "32ch",
 				$type: "dimension",
-				$description: "Grote breedte (standaard) — voor standaard invoervelden (bijv. naam, e-mail)",
+				$description: "Grote inline-size (standaard) — voor standaard invoervelden (bijv. naam, e-mail)",
 				filePath: "src/tokens/themes/start/base.json",
 				isSource: true,
 				original: {
 					$value: "32ch",
 					$type: "dimension",
-					$description: "Grote breedte (standaard) — voor standaard invoervelden (bijv. naam, e-mail)"
+					$description: "Grote inline-size (standaard) — voor standaard invoervelden (bijv. naam, e-mail)"
 				},
-				name: "DsnFormControlWidthLg",
+				name: "DsnFormControlInlineSizeLg",
 				attributes: {
 					category: "dsn",
 					type: "form-control",
-					item: "width",
+					item: "inline-size",
 					subitem: "lg"
 				},
 				path: [
 					"dsn",
 					"form-control",
-					"width",
+					"inline-size",
 					"lg"
 				]
 			},
 			xl: {
 				$value: "48ch",
 				$type: "dimension",
-				$description: "Extra grote breedte — voor langere invoervelden (bijv. URL)",
+				$description: "Extra grote inline-size — voor langere invoervelden (bijv. URL)",
 				filePath: "src/tokens/themes/start/base.json",
 				isSource: true,
 				original: {
 					$value: "48ch",
 					$type: "dimension",
-					$description: "Extra grote breedte — voor langere invoervelden (bijv. URL)"
+					$description: "Extra grote inline-size — voor langere invoervelden (bijv. URL)"
 				},
-				name: "DsnFormControlWidthXl",
+				name: "DsnFormControlInlineSizeXl",
 				attributes: {
 					category: "dsn",
 					type: "form-control",
-					item: "width",
+					item: "inline-size",
 					subitem: "xl"
 				},
 				path: [
 					"dsn",
 					"form-control",
-					"width",
+					"inline-size",
 					"xl"
 				]
 			},
 			full: {
 				$value: "100%",
 				$type: "dimension",
-				$description: "Volledige breedte — responsief aan de container",
+				$description: "Volledige inline-size — responsief aan de container",
 				filePath: "src/tokens/themes/start/base.json",
 				isSource: true,
 				original: {
 					$value: "100%",
 					$type: "dimension",
-					$description: "Volledige breedte — responsief aan de container"
+					$description: "Volledige inline-size — responsief aan de container"
 				},
-				name: "DsnFormControlWidthFull",
+				name: "DsnFormControlInlineSizeFull",
 				attributes: {
 					category: "dsn",
 					type: "form-control",
-					item: "width",
+					item: "inline-size",
 					subitem: "full"
 				},
 				path: [
 					"dsn",
 					"form-control",
-					"width",
+					"inline-size",
 					"full"
 				]
 			}
@@ -17000,67 +17000,394 @@ var tokens_default = { dsn: {
 				"box-shadow-hover"
 			]
 		},
+		"min-block-size": {
+			$value: "auto",
+			$type: "sizing",
+			$description: "Minimale hoogte van de card",
+			filePath: "src/tokens/components/card.json",
+			isSource: true,
+			original: {
+				$value: "auto",
+				$type: "sizing",
+				$description: "Minimale hoogte van de card"
+			},
+			name: "DsnCardMinBlockSize",
+			attributes: {
+				category: "dsn",
+				type: "card",
+				item: "min-block-size"
+			},
+			path: [
+				"dsn",
+				"card",
+				"min-block-size"
+			]
+		},
+		"pre-header": {
+			"padding-block-start": {
+				$value: "calc(0.5rem * 2)",
+				$type: "spacing",
+				$description: "Bovenkant padding van de pre-header, gelijk aan de header. Media als direct kind bleedt hier doorheen.",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.card.header.padding-block-start}",
+					$type: "spacing",
+					$description: "Bovenkant padding van de pre-header, gelijk aan de header. Media als direct kind bleedt hier doorheen."
+				},
+				name: "DsnCardPreHeaderPaddingBlockStart",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "pre-header",
+					subitem: "padding-block-start"
+				},
+				path: [
+					"dsn",
+					"card",
+					"pre-header",
+					"padding-block-start"
+				]
+			},
+			"padding-block-end": {
+				$value: "calc(0.5rem * 1.5)",
+				$type: "spacing",
+				$description: "Onderkant padding van de pre-header, gelijk aan de header",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.card.header.padding-block-end}",
+					$type: "spacing",
+					$description: "Onderkant padding van de pre-header, gelijk aan de header"
+				},
+				name: "DsnCardPreHeaderPaddingBlockEnd",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "pre-header",
+					subitem: "padding-block-end"
+				},
+				path: [
+					"dsn",
+					"card",
+					"pre-header",
+					"padding-block-end"
+				]
+			},
+			"padding-inline-start": {
+				$value: "calc(0.5rem * 2)",
+				$type: "spacing",
+				$description: "Padding aan de beginzijde van de pre-header, gelijk aan de header",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.card.header.padding-inline-start}",
+					$type: "spacing",
+					$description: "Padding aan de beginzijde van de pre-header, gelijk aan de header"
+				},
+				name: "DsnCardPreHeaderPaddingInlineStart",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "pre-header",
+					subitem: "padding-inline-start"
+				},
+				path: [
+					"dsn",
+					"card",
+					"pre-header",
+					"padding-inline-start"
+				]
+			},
+			"padding-inline-end": {
+				$value: "calc(0.5rem * 2)",
+				$type: "spacing",
+				$description: "Padding aan de eindzijde van de pre-header, gelijk aan de header",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.card.header.padding-inline-end}",
+					$type: "spacing",
+					$description: "Padding aan de eindzijde van de pre-header, gelijk aan de header"
+				},
+				name: "DsnCardPreHeaderPaddingInlineEnd",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "pre-header",
+					subitem: "padding-inline-end"
+				},
+				path: [
+					"dsn",
+					"card",
+					"pre-header",
+					"padding-inline-end"
+				]
+			},
+			"row-gap": {
+				$value: "calc(0.5rem * 1.5)",
+				$type: "spacing",
+				$description: "Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.card.header.row-gap}",
+					$type: "spacing",
+					$description: "Verticale ruimte tussen directe kinderen van de pre-header, gelijk aan de header"
+				},
+				name: "DsnCardPreHeaderRowGap",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "pre-header",
+					subitem: "row-gap"
+				},
+				path: [
+					"dsn",
+					"card",
+					"pre-header",
+					"row-gap"
+				]
+			}
+		},
+		header: {
+			"padding-block-start": {
+				$value: "calc(0.5rem * 2)",
+				$type: "spacing",
+				$description: "Bovenkant padding van de header (16px)",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.space.block.xl}",
+					$type: "spacing",
+					$description: "Bovenkant padding van de header (16px)"
+				},
+				name: "DsnCardHeaderPaddingBlockStart",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "header",
+					subitem: "padding-block-start"
+				},
+				path: [
+					"dsn",
+					"card",
+					"header",
+					"padding-block-start"
+				]
+			},
+			"padding-block-end": {
+				$value: "calc(0.5rem * 1.5)",
+				$type: "spacing",
+				$description: "Onderkant padding van de header (12px); ook de ruimte naar de body",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.space.block.lg}",
+					$type: "spacing",
+					$description: "Onderkant padding van de header (12px); ook de ruimte naar de body"
+				},
+				name: "DsnCardHeaderPaddingBlockEnd",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "header",
+					subitem: "padding-block-end"
+				},
+				path: [
+					"dsn",
+					"card",
+					"header",
+					"padding-block-end"
+				]
+			},
+			"padding-inline-start": {
+				$value: "calc(0.5rem * 2)",
+				$type: "spacing",
+				$description: "Padding aan de beginzijde van de header (16px)",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.space.inline.xl}",
+					$type: "spacing",
+					$description: "Padding aan de beginzijde van de header (16px)"
+				},
+				name: "DsnCardHeaderPaddingInlineStart",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "header",
+					subitem: "padding-inline-start"
+				},
+				path: [
+					"dsn",
+					"card",
+					"header",
+					"padding-inline-start"
+				]
+			},
+			"padding-inline-end": {
+				$value: "calc(0.5rem * 2)",
+				$type: "spacing",
+				$description: "Padding aan de eindzijde van de header (16px)",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.space.inline.xl}",
+					$type: "spacing",
+					$description: "Padding aan de eindzijde van de header (16px)"
+				},
+				name: "DsnCardHeaderPaddingInlineEnd",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "header",
+					subitem: "padding-inline-end"
+				},
+				path: [
+					"dsn",
+					"card",
+					"header",
+					"padding-inline-end"
+				]
+			},
+			"row-gap": {
+				$value: "calc(0.5rem * 1.5)",
+				$type: "spacing",
+				$description: "Verticale ruimte tussen directe kinderen van de header (12px)",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.space.block.lg}",
+					$type: "spacing",
+					$description: "Verticale ruimte tussen directe kinderen van de header (12px)"
+				},
+				name: "DsnCardHeaderRowGap",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "header",
+					subitem: "row-gap"
+				},
+				path: [
+					"dsn",
+					"card",
+					"header",
+					"row-gap"
+				]
+			}
+		},
 		body: {
-			"padding-block": {
+			"padding-block-start": {
+				$value: "0",
+				$type: "spacing",
+				$description: "Bovenkant padding van de body; de header levert de ruimte erboven",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "0",
+					$type: "spacing",
+					$description: "Bovenkant padding van de body; de header levert de ruimte erboven"
+				},
+				name: "DsnCardBodyPaddingBlockStart",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "body",
+					subitem: "padding-block-start"
+				},
+				path: [
+					"dsn",
+					"card",
+					"body",
+					"padding-block-start"
+				]
+			},
+			"padding-block-end": {
 				$value: "calc(0.5rem * 2)",
 				$type: "spacing",
-				$description: "Verticale padding van de card body (16px)",
+				$description: "Onderkant padding van de body (16px)",
 				filePath: "src/tokens/components/card.json",
 				isSource: true,
 				original: {
 					$value: "{dsn.space.block.xl}",
 					$type: "spacing",
-					$description: "Verticale padding van de card body (16px)"
+					$description: "Onderkant padding van de body (16px)"
 				},
-				name: "DsnCardBodyPaddingBlock",
+				name: "DsnCardBodyPaddingBlockEnd",
 				attributes: {
 					category: "dsn",
 					type: "card",
 					item: "body",
-					subitem: "padding-block"
+					subitem: "padding-block-end"
 				},
 				path: [
 					"dsn",
 					"card",
 					"body",
-					"padding-block"
+					"padding-block-end"
 				]
 			},
-			"padding-inline": {
+			"padding-inline-start": {
 				$value: "calc(0.5rem * 2)",
 				$type: "spacing",
-				$description: "Horizontale padding van de card body (16px)",
+				$description: "Padding aan de beginzijde van de body (16px)",
 				filePath: "src/tokens/components/card.json",
 				isSource: true,
 				original: {
 					$value: "{dsn.space.inline.xl}",
 					$type: "spacing",
-					$description: "Horizontale padding van de card body (16px)"
+					$description: "Padding aan de beginzijde van de body (16px)"
 				},
-				name: "DsnCardBodyPaddingInline",
+				name: "DsnCardBodyPaddingInlineStart",
 				attributes: {
 					category: "dsn",
 					type: "card",
 					item: "body",
-					subitem: "padding-inline"
+					subitem: "padding-inline-start"
 				},
 				path: [
 					"dsn",
 					"card",
 					"body",
-					"padding-inline"
+					"padding-inline-start"
+				]
+			},
+			"padding-inline-end": {
+				$value: "calc(0.5rem * 2)",
+				$type: "spacing",
+				$description: "Padding aan de eindzijde van de body (16px)",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.space.inline.xl}",
+					$type: "spacing",
+					$description: "Padding aan de eindzijde van de body (16px)"
+				},
+				name: "DsnCardBodyPaddingInlineEnd",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "body",
+					subitem: "padding-inline-end"
+				},
+				path: [
+					"dsn",
+					"card",
+					"body",
+					"padding-inline-end"
 				]
 			},
 			"row-gap": {
 				$value: "calc(0.5rem * 1.5)",
 				$type: "spacing",
-				$description: "Verticale ruimte tussen directe kinderen van de card body (12px)",
+				$description: "Verticale ruimte tussen directe kinderen van de body (12px)",
 				filePath: "src/tokens/components/card.json",
 				isSource: true,
 				original: {
 					$value: "{dsn.space.block.lg}",
 					$type: "spacing",
-					$description: "Verticale ruimte tussen directe kinderen van de card body (12px)"
+					$description: "Verticale ruimte tussen directe kinderen van de body (12px)"
 				},
 				name: "DsnCardBodyRowGap",
 				attributes: {
@@ -17078,16 +17405,41 @@ var tokens_default = { dsn: {
 			}
 		},
 		footer: {
+			"padding-block-start": {
+				$value: "0",
+				$type: "spacing",
+				$description: "Bovenkant padding van de footer; de sectie erboven levert de ruimte",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "0",
+					$type: "spacing",
+					$description: "Bovenkant padding van de footer; de sectie erboven levert de ruimte"
+				},
+				name: "DsnCardFooterPaddingBlockStart",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "footer",
+					subitem: "padding-block-start"
+				},
+				path: [
+					"dsn",
+					"card",
+					"footer",
+					"padding-block-start"
+				]
+			},
 			"padding-block-end": {
 				$value: "calc(0.5rem * 3)",
 				$type: "spacing",
-				$description: "Onderkant padding van de card footer (24px)",
+				$description: "Onderkant padding van de footer (24px)",
 				filePath: "src/tokens/components/card.json",
 				isSource: true,
 				original: {
 					$value: "{dsn.space.block.3xl}",
 					$type: "spacing",
-					$description: "Onderkant padding van de card footer (24px)"
+					$description: "Onderkant padding van de footer (24px)"
 				},
 				name: "DsnCardFooterPaddingBlockEnd",
 				attributes: {
@@ -17103,29 +17455,79 @@ var tokens_default = { dsn: {
 					"padding-block-end"
 				]
 			},
-			"padding-inline": {
+			"padding-inline-start": {
 				$value: "calc(0.5rem * 2)",
 				$type: "spacing",
-				$description: "Horizontale padding van de card footer (16px)",
+				$description: "Padding aan de beginzijde van de footer (16px)",
 				filePath: "src/tokens/components/card.json",
 				isSource: true,
 				original: {
 					$value: "{dsn.space.inline.xl}",
 					$type: "spacing",
-					$description: "Horizontale padding van de card footer (16px)"
+					$description: "Padding aan de beginzijde van de footer (16px)"
 				},
-				name: "DsnCardFooterPaddingInline",
+				name: "DsnCardFooterPaddingInlineStart",
 				attributes: {
 					category: "dsn",
 					type: "card",
 					item: "footer",
-					subitem: "padding-inline"
+					subitem: "padding-inline-start"
 				},
 				path: [
 					"dsn",
 					"card",
 					"footer",
-					"padding-inline"
+					"padding-inline-start"
+				]
+			},
+			"padding-inline-end": {
+				$value: "calc(0.5rem * 2)",
+				$type: "spacing",
+				$description: "Padding aan de eindzijde van de footer (16px)",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.space.inline.xl}",
+					$type: "spacing",
+					$description: "Padding aan de eindzijde van de footer (16px)"
+				},
+				name: "DsnCardFooterPaddingInlineEnd",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "footer",
+					subitem: "padding-inline-end"
+				},
+				path: [
+					"dsn",
+					"card",
+					"footer",
+					"padding-inline-end"
+				]
+			},
+			"column-gap": {
+				$value: "calc(0.5rem * 1)",
+				$type: "spacing",
+				$description: "Horizontale ruimte tussen directe kinderen van de footer",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.space.inline.md}",
+					$type: "spacing",
+					$description: "Horizontale ruimte tussen directe kinderen van de footer"
+				},
+				name: "DsnCardFooterColumnGap",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "footer",
+					subitem: "column-gap"
+				},
+				path: [
+					"dsn",
+					"card",
+					"footer",
+					"column-gap"
 				]
 			}
 		},
@@ -17308,6 +17710,287 @@ var tokens_default = { dsn: {
 				]
 			}
 		},
+		label: {
+			color: {
+				$value: "#1b1b1b",
+				$type: "color",
+				$description: "Kleur van het card-label",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.color.neutral.color-document}",
+					$type: "color",
+					$description: "Kleur van het card-label"
+				},
+				name: "DsnCardLabelColor",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "label",
+					subitem: "color"
+				},
+				path: [
+					"dsn",
+					"card",
+					"label",
+					"color"
+				]
+			},
+			"font-family": {
+				$value: "IBM Plex Sans, sans-serif",
+				$type: "fontFamily",
+				$description: "Lettertype van het card-label",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.text.font-family.default}",
+					$type: "fontFamily",
+					$description: "Lettertype van het card-label"
+				},
+				name: "DsnCardLabelFontFamily",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "label",
+					subitem: "font-family"
+				},
+				path: [
+					"dsn",
+					"card",
+					"label",
+					"font-family"
+				]
+			},
+			"font-size": {
+				$value: "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+				$type: "fontSize",
+				$description: "Tekstgrootte van het card-label",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.text.font-size.md}",
+					$type: "fontSize",
+					$description: "Tekstgrootte van het card-label"
+				},
+				name: "DsnCardLabelFontSize",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "label",
+					subitem: "font-size"
+				},
+				path: [
+					"dsn",
+					"card",
+					"label",
+					"font-size"
+				]
+			},
+			"font-weight": {
+				$value: "700",
+				$type: "fontWeight",
+				$description: "Gewicht van het card-label",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.text.font-weight.bold}",
+					$type: "fontWeight",
+					$description: "Gewicht van het card-label"
+				},
+				name: "DsnCardLabelFontWeight",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "label",
+					subitem: "font-weight"
+				},
+				path: [
+					"dsn",
+					"card",
+					"label",
+					"font-weight"
+				]
+			},
+			"line-height": {
+				$value: "1.5",
+				$type: "lineHeight",
+				$description: "Regelafstand van het card-label",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.text.line-height.md}",
+					$type: "lineHeight",
+					$description: "Regelafstand van het card-label"
+				},
+				name: "DsnCardLabelLineHeight",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "label",
+					subitem: "line-height"
+				},
+				path: [
+					"dsn",
+					"card",
+					"label",
+					"line-height"
+				]
+			}
+		},
+		description: {
+			color: {
+				$value: "#1b1b1b",
+				$type: "color",
+				$description: "Kleur van de card-description",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.color.neutral.color-document}",
+					$type: "color",
+					$description: "Kleur van de card-description"
+				},
+				name: "DsnCardDescriptionColor",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "description",
+					subitem: "color"
+				},
+				path: [
+					"dsn",
+					"card",
+					"description",
+					"color"
+				]
+			},
+			"font-size": {
+				$value: "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+				$type: "fontSize",
+				$description: "Tekstgrootte van de card-description",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.text.font-size.md}",
+					$type: "fontSize",
+					$description: "Tekstgrootte van de card-description"
+				},
+				name: "DsnCardDescriptionFontSize",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "description",
+					subitem: "font-size"
+				},
+				path: [
+					"dsn",
+					"card",
+					"description",
+					"font-size"
+				]
+			},
+			"line-height": {
+				$value: "1.5",
+				$type: "lineHeight",
+				$description: "Regelafstand van de card-description",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.text.line-height.md}",
+					$type: "lineHeight",
+					$description: "Regelafstand van de card-description"
+				},
+				name: "DsnCardDescriptionLineHeight",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "description",
+					subitem: "line-height"
+				},
+				path: [
+					"dsn",
+					"card",
+					"description",
+					"line-height"
+				]
+			}
+		},
+		meta: {
+			color: {
+				$value: "#636363",
+				$type: "color",
+				$description: "Kleur van de card-meta (bijv. datum)",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.color.neutral.color-subtle}",
+					$type: "color",
+					$description: "Kleur van de card-meta (bijv. datum)"
+				},
+				name: "DsnCardMetaColor",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "meta",
+					subitem: "color"
+				},
+				path: [
+					"dsn",
+					"card",
+					"meta",
+					"color"
+				]
+			},
+			"font-size": {
+				$value: "clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem)",
+				$type: "fontSize",
+				$description: "Tekstgrootte van de card-meta",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.text.font-size.sm}",
+					$type: "fontSize",
+					$description: "Tekstgrootte van de card-meta"
+				},
+				name: "DsnCardMetaFontSize",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "meta",
+					subitem: "font-size"
+				},
+				path: [
+					"dsn",
+					"card",
+					"meta",
+					"font-size"
+				]
+			},
+			"line-height": {
+				$value: "1.5",
+				$type: "lineHeight",
+				$description: "Regelafstand van de card-meta",
+				filePath: "src/tokens/components/card.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.text.line-height.sm}",
+					$type: "lineHeight",
+					$description: "Regelafstand van de card-meta"
+				},
+				name: "DsnCardMetaLineHeight",
+				attributes: {
+					category: "dsn",
+					type: "card",
+					item: "meta",
+					subitem: "line-height"
+				},
+				path: [
+					"dsn",
+					"card",
+					"meta",
+					"line-height"
+				]
+			}
+		},
 		group: {
 			gap: {
 				$value: "calc(0.5rem * 2)",
@@ -23746,6 +24429,52 @@ var tokens_default = { dsn: {
 				"background-color"
 			]
 		},
+		"indicator-width": {
+			$value: "3px",
+			$type: "dimension",
+			$description: "Gedeeld: dikte van de indicator (border-inline-start, of border-block-end in een horizontaal Menu). Altijd aanwezig zodat hover en current niet verspringen",
+			filePath: "src/tokens/components/menu-item.json",
+			isSource: true,
+			original: {
+				$value: "3px",
+				$type: "dimension",
+				$description: "Gedeeld: dikte van de indicator (border-inline-start, of border-block-end in een horizontaal Menu). Altijd aanwezig zodat hover en current niet verspringen"
+			},
+			name: "DsnMenuItemIndicatorWidth",
+			attributes: {
+				category: "dsn",
+				type: "menu-item",
+				item: "indicator-width"
+			},
+			path: [
+				"dsn",
+				"menu-item",
+				"indicator-width"
+			]
+		},
+		"indicator-color": {
+			$value: "#00000000",
+			$type: "color",
+			$description: "Gedeeld: standaard kleur van de indicator, onzichtbaar",
+			filePath: "src/tokens/components/menu-item.json",
+			isSource: true,
+			original: {
+				$value: "{dsn.color.transparent}",
+				$type: "color",
+				$description: "Gedeeld: standaard kleur van de indicator, onzichtbaar"
+			},
+			name: "DsnMenuItemIndicatorColor",
+			attributes: {
+				category: "dsn",
+				type: "menu-item",
+				item: "indicator-color"
+			},
+			path: [
+				"dsn",
+				"menu-item",
+				"indicator-color"
+			]
+		},
 		hover: {
 			color: {
 				$value: "#04499a",
@@ -23796,6 +24525,31 @@ var tokens_default = { dsn: {
 					"hover",
 					"background-color"
 				]
+			},
+			"indicator-color": {
+				$value: "#04499a",
+				$type: "color",
+				$description: "Gedeeld: hover kleur van de indicator",
+				filePath: "src/tokens/components/menu-item.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.color.action-2.color-hover}",
+					$type: "color",
+					$description: "Gedeeld: hover kleur van de indicator"
+				},
+				name: "DsnMenuItemHoverIndicatorColor",
+				attributes: {
+					category: "dsn",
+					type: "menu-item",
+					item: "hover",
+					subitem: "indicator-color"
+				},
+				path: [
+					"dsn",
+					"menu-item",
+					"hover",
+					"indicator-color"
+				]
 			}
 		},
 		active: {
@@ -23848,6 +24602,31 @@ var tokens_default = { dsn: {
 					"active",
 					"background-color"
 				]
+			},
+			"indicator-color": {
+				$value: "#003b81",
+				$type: "color",
+				$description: "Gedeeld: active kleur van de indicator",
+				filePath: "src/tokens/components/menu-item.json",
+				isSource: true,
+				original: {
+					$value: "{dsn.color.action-2.color-active}",
+					$type: "color",
+					$description: "Gedeeld: active kleur van de indicator"
+				},
+				name: "DsnMenuItemActiveIndicatorColor",
+				attributes: {
+					category: "dsn",
+					type: "menu-item",
+					item: "active",
+					subitem: "indicator-color"
+				},
+				path: [
+					"dsn",
+					"menu-item",
+					"active",
+					"indicator-color"
+				]
 			}
 		}
 	},
@@ -23954,13 +24733,13 @@ var tokens_default = { dsn: {
 			"indicator-color": {
 				$value: "#1b59a4",
 				$type: "color",
-				$description: "MenuLink-specifiek: kleur van de border-inline-start indicator",
+				$description: "MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina",
 				filePath: "src/tokens/components/menu-link.json",
 				isSource: true,
 				original: {
 					$value: "{dsn.color.action-2.color-default}",
 					$type: "color",
-					$description: "MenuLink-specifiek: kleur van de border-inline-start indicator"
+					$description: "MenuLink-specifiek: kleur van de indicator voor de actieve/huidige pagina"
 				},
 				name: "DsnMenuLinkCurrentIndicatorColor",
 				attributes: {
@@ -23976,31 +24755,6 @@ var tokens_default = { dsn: {
 					"indicator-color"
 				]
 			},
-			"indicator-width": {
-				$value: "3px",
-				$type: "dimension",
-				$description: "MenuLink-specifiek: breedte van de border-inline-start indicator",
-				filePath: "src/tokens/components/menu-link.json",
-				isSource: true,
-				original: {
-					$value: "3px",
-					$type: "dimension",
-					$description: "MenuLink-specifiek: breedte van de border-inline-start indicator"
-				},
-				name: "DsnMenuLinkCurrentIndicatorWidth",
-				attributes: {
-					category: "dsn",
-					type: "menu-link",
-					item: "current",
-					subitem: "indicator-width"
-				},
-				path: [
-					"dsn",
-					"menu-link",
-					"current",
-					"indicator-width"
-				]
-			},
 			hover: {
 				color: {
 					$value: "#1b59a4",
@@ -27174,6 +27928,238 @@ var tokens_default = { dsn: {
 			"padding-inline-end"
 		]
 	} },
+	"popover-menu": {
+		"background-color": {
+			$value: "#fcfcfc",
+			$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: "#c4c4c4",
+			$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 12%, transparent), 0 8px 16px 0 color-mix(in srgb, black 6%, transparent), 0 0 0 1px #00000000",
+			$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: "#fcfcfc",
@@ -34086,12 +35072,12 @@ const DsnFormControlPaddingInlineEnd = "calc(0.5rem * 1.5)";
 const DsnFormControlMaxInlineSize = "25rem";
 const DsnFormControlBorderRadius = "0px";
 const DsnFormControlBorderWidth = "1px";
-const DsnFormControlWidthXs = "10ch";
-const DsnFormControlWidthSm = "14ch";
-const DsnFormControlWidthMd = "20ch";
-const DsnFormControlWidthLg = "32ch";
-const DsnFormControlWidthXl = "48ch";
-const DsnFormControlWidthFull = "100%";
+const DsnFormControlInlineSizeXs = "10ch";
+const DsnFormControlInlineSizeSm = "14ch";
+const DsnFormControlInlineSizeMd = "20ch";
+const DsnFormControlInlineSizeLg = "32ch";
+const DsnFormControlInlineSizeXl = "48ch";
+const DsnFormControlInlineSizeFull = "100%";
 const DsnFormControlHoverBorderWidth = "2px";
 const DsnFormControlHoverAccentColor = "#04499a";
 const DsnFormControlHoverBackgroundColor = "#ebebeb";
@@ -34617,11 +35603,27 @@ const DsnCardBorderWidth = "1px";
 const DsnCardBorderColor = "#c4c4c4";
 const DsnCardBoxShadow = "none";
 const DsnCardBoxShadowHover = "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";
-const DsnCardBodyPaddingBlock = "calc(0.5rem * 2)";
-const DsnCardBodyPaddingInline = "calc(0.5rem * 2)";
+const DsnCardMinBlockSize = "auto";
+const DsnCardPreHeaderPaddingBlockStart = "calc(0.5rem * 2)";
+const DsnCardPreHeaderPaddingBlockEnd = "calc(0.5rem * 1.5)";
+const DsnCardPreHeaderPaddingInlineStart = "calc(0.5rem * 2)";
+const DsnCardPreHeaderPaddingInlineEnd = "calc(0.5rem * 2)";
+const DsnCardPreHeaderRowGap = "calc(0.5rem * 1.5)";
+const DsnCardHeaderPaddingBlockStart = "calc(0.5rem * 2)";
+const DsnCardHeaderPaddingBlockEnd = "calc(0.5rem * 1.5)";
+const DsnCardHeaderPaddingInlineStart = "calc(0.5rem * 2)";
+const DsnCardHeaderPaddingInlineEnd = "calc(0.5rem * 2)";
+const DsnCardHeaderRowGap = "calc(0.5rem * 1.5)";
+const DsnCardBodyPaddingBlockStart = "0";
+const DsnCardBodyPaddingBlockEnd = "calc(0.5rem * 2)";
+const DsnCardBodyPaddingInlineStart = "calc(0.5rem * 2)";
+const DsnCardBodyPaddingInlineEnd = "calc(0.5rem * 2)";
 const DsnCardBodyRowGap = "calc(0.5rem * 1.5)";
+const DsnCardFooterPaddingBlockStart = "0";
 const DsnCardFooterPaddingBlockEnd = "calc(0.5rem * 3)";
-const DsnCardFooterPaddingInline = "calc(0.5rem * 2)";
+const DsnCardFooterPaddingInlineStart = "calc(0.5rem * 2)";
+const DsnCardFooterPaddingInlineEnd = "calc(0.5rem * 2)";
+const DsnCardFooterColumnGap = "calc(0.5rem * 1)";
 const DsnCardImagePlaceholderBackgroundColor = "#f6f6f6";
 const DsnCardImagePlaceholderColor = "#636363";
 const DsnCardHeadingFontFamily = "IBM Plex Sans, sans-serif";
@@ -34629,6 +35631,17 @@ const DsnCardHeadingFontWeight = "700";
 const DsnCardHeadingColor = "#1b1b1b";
 const DsnCardHeadingFontSize = "clamp(1.25rem, 1.125rem + 0.375vw, 1.53125rem)";
 const DsnCardHeadingLineHeight = "1.25";
+const DsnCardLabelColor = "#1b1b1b";
+const DsnCardLabelFontFamily = "IBM Plex Sans, sans-serif";
+const DsnCardLabelFontSize = "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)";
+const DsnCardLabelFontWeight = "700";
+const DsnCardLabelLineHeight = "1.5";
+const DsnCardDescriptionColor = "#1b1b1b";
+const DsnCardDescriptionFontSize = "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)";
+const DsnCardDescriptionLineHeight = "1.5";
+const DsnCardMetaColor = "#636363";
+const DsnCardMetaFontSize = "clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem)";
+const DsnCardMetaLineHeight = "1.5";
 const DsnCardGroupGap = "calc(0.5rem * 2)";
 const DsnCardGroupItemMinWidth = "17.5rem";
 const DsnCheckboxGroupBorderWidth = "0px";
@@ -34897,16 +35910,19 @@ const DsnMenuItemMinBlockSize = "3rem";
 const DsnMenuItemIconSize = "calc(clamp(1rem, 0.875rem + 0.375vw, 1.28125rem) * 1.5)";
 const DsnMenuItemColor = "#1b59a4";
 const DsnMenuItemBackgroundColor = "#00000000";
+const DsnMenuItemIndicatorWidth = "3px";
+const DsnMenuItemIndicatorColor = "#00000000";
 const DsnMenuItemHoverColor = "#04499a";
 const DsnMenuItemHoverBackgroundColor = "#e4ecf4";
+const DsnMenuItemHoverIndicatorColor = "#04499a";
 const DsnMenuItemActiveColor = "#003b81";
 const DsnMenuItemActiveBackgroundColor = "#dde6f1";
+const DsnMenuItemActiveIndicatorColor = "#003b81";
 const DsnMenuLinkLevelIndent = "calc(0.5rem * 3)";
 const DsnMenuLinkCurrentFontWeight = "700";
 const DsnMenuLinkCurrentColor = "#1b59a4";
 const DsnMenuLinkCurrentBackgroundColor = "#dde6f1";
 const DsnMenuLinkCurrentIndicatorColor = "#1b59a4";
-const DsnMenuLinkCurrentIndicatorWidth = "3px";
 const DsnMenuLinkCurrentHoverColor = "#1b59a4";
 const DsnMenuLinkCurrentHoverBackgroundColor = "#dde6f1";
 const DsnMenuLinkCurrentActiveColor = "#1b59a4";
@@ -35036,6 +36052,16 @@ const DsnParagraphSmallPrintFontSize = "clamp(0.875rem, 0.75rem + 0.25vw, 1.0625
 const DsnParagraphSmallPrintLineHeight = "1.5";
 const DsnParagraphSmallPrintMarginBlockEnd = "calc(0.5rem * 1)";
 const DsnPasswordInputPaddingInlineEnd = "3rem";
+const DsnPopoverMenuBackgroundColor = "#fcfcfc";
+const DsnPopoverMenuBorderWidth = "1px";
+const DsnPopoverMenuBorderColor = "#c4c4c4";
+const DsnPopoverMenuBorderRadius = "8px";
+const 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";
+const DsnPopoverMenuMinWidth = "12.5rem";
+const DsnPopoverMenuMaxWidth = "25rem";
+const DsnPopoverMenuZIndex = "350";
+const DsnPopoverMenuPaddingBlock = "calc(0.5rem * 2)";
+const DsnPopoverMenuPaddingInline = "calc(0.5rem * 2)";
 const DsnPopoverBackgroundColor = "#fcfcfc";
 const DsnPopoverBorderWidth = "1px";
 const DsnPopoverBorderColor = "#c4c4c4";
@@ -35496,18 +36522,31 @@ exports.DsnButtonSubtlePositiveHoverBorderColor = DsnButtonSubtlePositiveHoverBo
 exports.DsnButtonSubtlePositiveHoverColor = DsnButtonSubtlePositiveHoverColor;
 exports.DsnCardBackgroundColor = DsnCardBackgroundColor;
 exports.DsnCardBackgroundColorHover = DsnCardBackgroundColorHover;
-exports.DsnCardBodyPaddingBlock = DsnCardBodyPaddingBlock;
-exports.DsnCardBodyPaddingInline = DsnCardBodyPaddingInline;
+exports.DsnCardBodyPaddingBlockEnd = DsnCardBodyPaddingBlockEnd;
+exports.DsnCardBodyPaddingBlockStart = DsnCardBodyPaddingBlockStart;
+exports.DsnCardBodyPaddingInlineEnd = DsnCardBodyPaddingInlineEnd;
+exports.DsnCardBodyPaddingInlineStart = DsnCardBodyPaddingInlineStart;
 exports.DsnCardBodyRowGap = DsnCardBodyRowGap;
 exports.DsnCardBorderColor = DsnCardBorderColor;
 exports.DsnCardBorderRadius = DsnCardBorderRadius;
 exports.DsnCardBorderWidth = DsnCardBorderWidth;
 exports.DsnCardBoxShadow = DsnCardBoxShadow;
 exports.DsnCardBoxShadowHover = DsnCardBoxShadowHover;
+exports.DsnCardDescriptionColor = DsnCardDescriptionColor;
+exports.DsnCardDescriptionFontSize = DsnCardDescriptionFontSize;
+exports.DsnCardDescriptionLineHeight = DsnCardDescriptionLineHeight;
+exports.DsnCardFooterColumnGap = DsnCardFooterColumnGap;
 exports.DsnCardFooterPaddingBlockEnd = DsnCardFooterPaddingBlockEnd;
-exports.DsnCardFooterPaddingInline = DsnCardFooterPaddingInline;
+exports.DsnCardFooterPaddingBlockStart = DsnCardFooterPaddingBlockStart;
+exports.DsnCardFooterPaddingInlineEnd = DsnCardFooterPaddingInlineEnd;
+exports.DsnCardFooterPaddingInlineStart = DsnCardFooterPaddingInlineStart;
 exports.DsnCardGroupGap = DsnCardGroupGap;
 exports.DsnCardGroupItemMinWidth = DsnCardGroupItemMinWidth;
+exports.DsnCardHeaderPaddingBlockEnd = DsnCardHeaderPaddingBlockEnd;
+exports.DsnCardHeaderPaddingBlockStart = DsnCardHeaderPaddingBlockStart;
+exports.DsnCardHeaderPaddingInlineEnd = DsnCardHeaderPaddingInlineEnd;
+exports.DsnCardHeaderPaddingInlineStart = DsnCardHeaderPaddingInlineStart;
+exports.DsnCardHeaderRowGap = DsnCardHeaderRowGap;
 exports.DsnCardHeadingColor = DsnCardHeadingColor;
 exports.DsnCardHeadingFontFamily = DsnCardHeadingFontFamily;
 exports.DsnCardHeadingFontSize = DsnCardHeadingFontSize;
@@ -35515,6 +36554,20 @@ exports.DsnCardHeadingFontWeight = DsnCardHeadingFontWeight;
 exports.DsnCardHeadingLineHeight = DsnCardHeadingLineHeight;
 exports.DsnCardImagePlaceholderBackgroundColor = DsnCardImagePlaceholderBackgroundColor;
 exports.DsnCardImagePlaceholderColor = DsnCardImagePlaceholderColor;
+exports.DsnCardLabelColor = DsnCardLabelColor;
+exports.DsnCardLabelFontFamily = DsnCardLabelFontFamily;
+exports.DsnCardLabelFontSize = DsnCardLabelFontSize;
+exports.DsnCardLabelFontWeight = DsnCardLabelFontWeight;
+exports.DsnCardLabelLineHeight = DsnCardLabelLineHeight;
+exports.DsnCardMetaColor = DsnCardMetaColor;
+exports.DsnCardMetaFontSize = DsnCardMetaFontSize;
+exports.DsnCardMetaLineHeight = DsnCardMetaLineHeight;
+exports.DsnCardMinBlockSize = DsnCardMinBlockSize;
+exports.DsnCardPreHeaderPaddingBlockEnd = DsnCardPreHeaderPaddingBlockEnd;
+exports.DsnCardPreHeaderPaddingBlockStart = DsnCardPreHeaderPaddingBlockStart;
+exports.DsnCardPreHeaderPaddingInlineEnd = DsnCardPreHeaderPaddingInlineEnd;
+exports.DsnCardPreHeaderPaddingInlineStart = DsnCardPreHeaderPaddingInlineStart;
+exports.DsnCardPreHeaderRowGap = DsnCardPreHeaderRowGap;
 exports.DsnCheckboxActiveBackgroundColor = DsnCheckboxActiveBackgroundColor;
 exports.DsnCheckboxActiveBorderColor = DsnCheckboxActiveBorderColor;
 exports.DsnCheckboxActiveBorderWidth = DsnCheckboxActiveBorderWidth;
@@ -36016,6 +37069,12 @@ exports.DsnFormControlHoverBackgroundColor = DsnFormControlHoverBackgroundColor;
 exports.DsnFormControlHoverBorderColor = DsnFormControlHoverBorderColor;
 exports.DsnFormControlHoverBorderWidth = DsnFormControlHoverBorderWidth;
 exports.DsnFormControlHoverColor = DsnFormControlHoverColor;
+exports.DsnFormControlInlineSizeFull = DsnFormControlInlineSizeFull;
+exports.DsnFormControlInlineSizeLg = DsnFormControlInlineSizeLg;
+exports.DsnFormControlInlineSizeMd = DsnFormControlInlineSizeMd;
+exports.DsnFormControlInlineSizeSm = DsnFormControlInlineSizeSm;
+exports.DsnFormControlInlineSizeXl = DsnFormControlInlineSizeXl;
+exports.DsnFormControlInlineSizeXs = DsnFormControlInlineSizeXs;
 exports.DsnFormControlInvalidBackgroundColor = DsnFormControlInvalidBackgroundColor;
 exports.DsnFormControlInvalidBorderColor = DsnFormControlInvalidBorderColor;
 exports.DsnFormControlInvalidBorderWidth = DsnFormControlInvalidBorderWidth;
@@ -36030,12 +37089,6 @@ exports.DsnFormControlPlaceholderColor = DsnFormControlPlaceholderColor;
 exports.DsnFormControlReadOnlyBackgroundColor = DsnFormControlReadOnlyBackgroundColor;
 exports.DsnFormControlReadOnlyBorderColor = DsnFormControlReadOnlyBorderColor;
 exports.DsnFormControlReadOnlyColor = DsnFormControlReadOnlyColor;
-exports.DsnFormControlWidthFull = DsnFormControlWidthFull;
-exports.DsnFormControlWidthLg = DsnFormControlWidthLg;
-exports.DsnFormControlWidthMd = DsnFormControlWidthMd;
-exports.DsnFormControlWidthSm = DsnFormControlWidthSm;
-exports.DsnFormControlWidthXl = DsnFormControlWidthXl;
-exports.DsnFormControlWidthXs = DsnFormControlWidthXs;
 exports.DsnFormFieldDescriptionColor = DsnFormFieldDescriptionColor;
 exports.DsnFormFieldDescriptionFontFamily = DsnFormFieldDescriptionFontFamily;
 exports.DsnFormFieldDescriptionFontSize = DsnFormFieldDescriptionFontSize;
@@ -36180,6 +37233,7 @@ exports.DsnMenuGapHorizontal = DsnMenuGapHorizontal;
 exports.DsnMenuGapVertical = DsnMenuGapVertical;
 exports.DsnMenuItemActiveBackgroundColor = DsnMenuItemActiveBackgroundColor;
 exports.DsnMenuItemActiveColor = DsnMenuItemActiveColor;
+exports.DsnMenuItemActiveIndicatorColor = DsnMenuItemActiveIndicatorColor;
 exports.DsnMenuItemBackgroundColor = DsnMenuItemBackgroundColor;
 exports.DsnMenuItemColor = DsnMenuItemColor;
 exports.DsnMenuItemFontSize = DsnMenuItemFontSize;
@@ -36187,7 +37241,10 @@ exports.DsnMenuItemFontWeight = DsnMenuItemFontWeight;
 exports.DsnMenuItemGap = DsnMenuItemGap;
 exports.DsnMenuItemHoverBackgroundColor = DsnMenuItemHoverBackgroundColor;
 exports.DsnMenuItemHoverColor = DsnMenuItemHoverColor;
+exports.DsnMenuItemHoverIndicatorColor = DsnMenuItemHoverIndicatorColor;
 exports.DsnMenuItemIconSize = DsnMenuItemIconSize;
+exports.DsnMenuItemIndicatorColor = DsnMenuItemIndicatorColor;
+exports.DsnMenuItemIndicatorWidth = DsnMenuItemIndicatorWidth;
 exports.DsnMenuItemLineHeight = DsnMenuItemLineHeight;
 exports.DsnMenuItemMinBlockSize = DsnMenuItemMinBlockSize;
 exports.DsnMenuItemPaddingBlock = DsnMenuItemPaddingBlock;
@@ -36200,7 +37257,6 @@ exports.DsnMenuLinkCurrentFontWeight = DsnMenuLinkCurrentFontWeight;
 exports.DsnMenuLinkCurrentHoverBackgroundColor = DsnMenuLinkCurrentHoverBackgroundColor;
 exports.DsnMenuLinkCurrentHoverColor = DsnMenuLinkCurrentHoverColor;
 exports.DsnMenuLinkCurrentIndicatorColor = DsnMenuLinkCurrentIndicatorColor;
-exports.DsnMenuLinkCurrentIndicatorWidth = DsnMenuLinkCurrentIndicatorWidth;
 exports.DsnMenuLinkLevelIndent = DsnMenuLinkLevelIndent;
 exports.DsnModalDialogBackgroundColor = DsnModalDialogBackgroundColor;
 exports.DsnModalDialogBodyPaddingBlock = DsnModalDialogBodyPaddingBlock;
@@ -36346,6 +37402,16 @@ exports.DsnPopoverHeadingFontSize = DsnPopoverHeadingFontSize;
 exports.DsnPopoverHeadingFontWeight = DsnPopoverHeadingFontWeight;
 exports.DsnPopoverHeadingLineHeight = DsnPopoverHeadingLineHeight;
 exports.DsnPopoverMaxWidth = DsnPopoverMaxWidth;
+exports.DsnPopoverMenuBackgroundColor = DsnPopoverMenuBackgroundColor;
+exports.DsnPopoverMenuBorderColor = DsnPopoverMenuBorderColor;
+exports.DsnPopoverMenuBorderRadius = DsnPopoverMenuBorderRadius;
+exports.DsnPopoverMenuBorderWidth = DsnPopoverMenuBorderWidth;
+exports.DsnPopoverMenuBoxShadow = DsnPopoverMenuBoxShadow;
+exports.DsnPopoverMenuMaxWidth = DsnPopoverMenuMaxWidth;
+exports.DsnPopoverMenuMinWidth = DsnPopoverMenuMinWidth;
+exports.DsnPopoverMenuPaddingBlock = DsnPopoverMenuPaddingBlock;
+exports.DsnPopoverMenuPaddingInline = DsnPopoverMenuPaddingInline;
+exports.DsnPopoverMenuZIndex = DsnPopoverMenuZIndex;
 exports.DsnPopoverMinWidth = DsnPopoverMinWidth;
 exports.DsnPopoverZIndex = DsnPopoverZIndex;
 exports.DsnPreHeadingColor = DsnPreHeadingColor;