@nldd/design-system 0.8.44 → 0.8.46

package/dist/components/navigation/top-title-bar/top-title-bar.styles.js

@@ -17,8 +17,8 @@ export const topTitleBarStyles = css `
 	/* # Block */
 
 	.top-title-bar {
-		display: flex;
 		box-sizing: border-box;
+		display: flex;
 		width: 100%;
 		padding-inline: var(--primitives-space-6);
 		flex-direction: row;
@@ -26,37 +26,31 @@ export const topTitleBarStyles = css `
 	}
 
 
-	/* # Start */
+	/* # Elements */
 
 	.top-title-bar__start {
 		display: flex;
 		min-width: 0;
 		flex-direction: row;
-		align-items: center;
 		flex-grow: 1;
 		flex-shrink: 1;
 		flex-basis: 0;
+		align-items: center;
 	}
 
-
-	/* # End */
-
 	.top-title-bar__end {
 		display: flex;
 		margin-top: var(--primitives-space-6);
 		flex-direction: row;
-		align-items: center;
 		flex-grow: 0;
 		flex-shrink: 0;
+		align-items: center;
 	}
 
 	.top-title-bar__end[hidden] {
 		display: none;
 	}
 
-
-	/* # Back button — text variant (default state) */
-
 	.top-title-bar__back-button {
 		display: var(--context-back-button-display, flex);
 		margin-top: var(--primitives-space-6);
@@ -74,9 +68,6 @@ export const topTitleBarStyles = css `
 		display: none;
 	}
 
-
-	/* # Back button — icon variant (compact state) */
-
 	.top-title-bar__icon-back-button {
 		display: none;
 	}
@@ -85,9 +76,6 @@ export const topTitleBarStyles = css `
 		display: flex;
 	}
 
-
-	/* # Divider */
-
 	.top-title-bar__divider {
 		display: none;
 		background-color: var(--components-top-title-bar-divider-color);
@@ -100,9 +88,6 @@ export const topTitleBarStyles = css `
 		display: block;
 	}
 
-
-	/* # Title group */
-
 	.top-title-bar__title-group {
 		display: none;
 		margin-top: var(--primitives-space-6);
@@ -111,9 +96,9 @@ export const topTitleBarStyles = css `
 		overflow: hidden;
 		padding-inline: var(--primitives-space-10);
 		flex-direction: column;
-		justify-content: center;
 		flex-grow: 1;
 		flex-shrink: 1;
+		justify-content: center;
 	}
 
 	:host(.is-compact) .top-title-bar__title-group {
@@ -123,8 +108,8 @@ export const topTitleBarStyles = css `
 	.top-title-bar__title {
 		margin: 0;
 		overflow: hidden;
-		font: var(--primitives-font-body-lg-bold-flat);
 		color: var(--semantics-content-color);
+		font: var(--primitives-font-body-lg-bold-flat);
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
@@ -133,29 +118,23 @@ export const topTitleBarStyles = css `
 		font: var(--primitives-font-body-md-bold-flat);
 	}
 
+	@media (forced-colors: active) {
+		.top-title-bar__title {
+			color: CanvasText;
+		}
+	}
+
 	.top-title-bar__subtitle {
 		margin: 0;
 		overflow: hidden;
-		font: var(--primitives-font-body-xxs-regular-flat);
 		color: var(--semantics-content-secondary-color);
+		font: var(--primitives-font-body-xxs-regular-flat);
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
-
-	/* # Dismiss button */
-
 	.top-title-bar__dismiss-button {
 		display: var(--context-dismiss-button-display, block);
 	}
-
-
-	/* # Accessibility: High Contrast Mode */
-
-	@media (forced-colors: active) {
-		.top-title-bar__title {
-			color: CanvasText;
-		}
-	}
 `;
 //# sourceMappingURL=top-title-bar.styles.js.map

package/dist/components/navigation/top-title-bar/top-title-bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-title-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-title-bar/top-title-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8JnC,CAAC"}
+{"version":3,"file":"top-title-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-title-bar/top-title-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyInC,CAAC"}

package/dist/components/{prism-typescript-D2EqsCqV.js → prism-typescript-BX4tFNFm.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from "./index-1v33GjGX.js";
+import { g as getDefaultExportFromCjs } from "./index-BvNDgQGM.js";
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];

package/dist/components/status-and-feedback/badge/badge.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAqIvB,CAAC"}
+{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAwHvB,CAAC"}

package/dist/components/status-and-feedback/badge/badge.styles.js

@@ -6,14 +6,14 @@ export const badgeStyles = css `
 
 	:host {
 		--_background-color: var(--components-badge-critical-background-color);
-		--_content-color: var(--components-badge-critical-content-color);
 		--_height: var(--primitives-space-20);
 		--_inline-padding: var(--primitives-space-6);
 		--_gap: var(--primitives-space-3);
+		--_content-color: var(--components-badge-critical-content-color);
 		--_font: var(--primitives-font-body-xs-bold-flat);
+		--_dot-size: var(--primitives-space-10);
 		--_icon-size: var(--primitives-space-14);
 		--_icon-offset-correction: var(--primitives-space-1);
-		--_dot-size: var(--primitives-space-10);
 
 		display: inline-flex;
 		vertical-align: middle;
@@ -24,22 +24,11 @@ export const badgeStyles = css `
 		--_inline-padding: var(--primitives-space-4);
 		--_gap: var(--primitives-space-2);
 		--_font: var(--primitives-font-body-xxs-bold-flat);
-		--_icon-size: var(--primitives-space-12);
 		--_dot-size: var(--primitives-space-6);
+		--_icon-size: var(--primitives-space-12);
 	}
 
-	:host([hidden]) {
-		display: none;
-	}
-
-
-	/* ## Variants */
-
-	:host([color="critical"]),
-	:host(:not([color])) {
-		--_background-color: var(--components-badge-critical-background-color);
-		--_content-color: var(--components-badge-critical-content-color);
-	}
+	/* ## Color */
 
 	:host([color="accent"]) {
 		--_background-color: var(--components-badge-accent-background-color);
@@ -61,24 +50,36 @@ export const badgeStyles = css `
 		--_content-color: var(--components-badge-success-content-color);
 	}
 
+	:host([hidden]) {
+		display: none;
+	}
+
 
 	/* # Block */
 
 	.badge {
-		display: inline-flex;
 		box-sizing: border-box;
+		display: inline-flex;
 		border-radius: var(--components-badge-corner-radius);
 		box-shadow: 0 0 0 1px var(--context-parent-background-color, var(--semantics-surfaces-background-color));
 		background-color: var(--_background-color);
 		min-width: var(--_height);
 		height: var(--_height);
 		padding: 0 var(--_inline-padding);
+		gap: var(--_gap);
 		align-items: center;
 		justify-content: center;
-		gap: var(--_gap);
 		color: var(--_content-color);
-		white-space: nowrap;
 		font: var(--_font);
+		white-space: nowrap;
+	}
+
+	@media (forced-colors: active) {
+		.badge {
+			border: 1px solid CanvasText;
+			background-color: Canvas;
+			color: CanvasText;
+		}
 	}
 
 	.badge--dot {
@@ -95,15 +96,15 @@ export const badgeStyles = css `
 	}
 
 
-	/* # Icon */
+	/* # Elements */
 
 	.badge__icon {
 		display: inline-flex;
 		width: var(--_icon-size);
 		height: var(--_icon-size);
+		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;
-		flex-shrink: 0;
 	}
 
 	.badge__icon:has(+ .badge__text) {
@@ -115,22 +116,8 @@ export const badgeStyles = css `
 		height: 100%;
 	}
 
-
-	/* # Text */
-
 	.badge__text {
 		display: inline-block;
 	}
-
-
-	/* # Toegankelijkheid */
-
-	@media (forced-colors: active) {
-		.badge {
-			border: 1px solid CanvasText;
-			background-color: Canvas;
-			color: CanvasText;
-		}
-	}
 `;
 //# sourceMappingURL=badge.styles.js.map

package/dist/components/status-and-feedback/badge/badge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqI7B,CAAC"}
+{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwH7B,CAAC"}

package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBA2G9B,CAAC"}
+{"version":3,"file":"inline-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBA0G9B,CAAC"}

package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js

@@ -9,84 +9,86 @@ export const inlineDialogStyles = css `
 		--_icon-color: var(--components-inline-dialog-icon-color);
 
 		display: flex;
-		justify-content: center;
-		align-items: center;
 		flex-grow: 1;
+		align-items: center;
+		justify-content: center;
 	}
 
-	:host([hidden]) {
-		display: none;
+	:host([variant="alert"]) {
+		--_icon-color: var(--components-inline-dialog-icon-warning-color);
 	}
 
-	:host([variant='alert']) {
+	:host([variant="success"]) {
+		--_icon-color: var(--components-inline-dialog-icon-success-color);
+	}
+
+	:host([icon-color="secondary"]) {
+		--_icon-color: var(--components-inline-dialog-icon-secondary-color);
+	}
+
+	:host([icon-color="accent"]) {
+		--_icon-color: var(--components-inline-dialog-icon-accent-color);
+	}
+
+	:host([icon-color="critical"]) {
+		--_icon-color: var(--components-inline-dialog-icon-critical-color);
+	}
+
+	:host([icon-color="warning"]) {
 		--_icon-color: var(--components-inline-dialog-icon-warning-color);
 	}
 
-	:host([variant='success']) {
+	:host([icon-color="success"]) {
 		--_icon-color: var(--components-inline-dialog-icon-success-color);
 	}
 
-	:host([icon-color='secondary']) { --_icon-color: var(--components-inline-dialog-icon-secondary-color); }
-	:host([icon-color='accent'])    { --_icon-color: var(--components-inline-dialog-icon-accent-color); }
-	:host([icon-color='critical'])  { --_icon-color: var(--components-inline-dialog-icon-critical-color); }
-	:host([icon-color='warning'])   { --_icon-color: var(--components-inline-dialog-icon-warning-color); }
-	:host([icon-color='success'])   { --_icon-color: var(--components-inline-dialog-icon-success-color); }
+	:host([hidden]) {
+		display: none;
+	}
 
 
-	/* # Body */
+	/* # Elements */
 
 	.inline-dialog__body {
-		display: flex;
 		box-sizing: border-box;
+		display: flex;
 		max-width: var(--primitives-area-480);
 		flex-direction: column;
-		align-items: center;
 		flex-grow: 1;
+		align-items: center;
 	}
 
-
-	/* # Icon */
-
 	.inline-dialog__icon {
 		display: flex;
 		width: var(--_icon-size);
 		height: var(--_icon-size);
+		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;
-		flex-shrink: 0;
 		color: var(--_icon-color);
 	}
 
-
-	/* # Text */
-
 	.inline-dialog__text {
 		margin: 0;
 		text-align: center;
-		font: var(--primitives-font-body-md-bold-tight);
 		color: var(--semantics-content-color);
+		font: var(--primitives-font-body-md-bold-tight);
 		text-wrap: pretty;
 	}
 
 	.inline-dialog__text:focus-visible {
-		box-shadow: none;
 		outline: none;
+		box-shadow: none;
 	}
 
-
-	/* # Supporting text */
-
 	.inline-dialog__supporting-text {
 		margin: 0;
 		text-align: center;
-		font: var(--primitives-font-body-sm-regular-tight);
 		color: var(--semantics-content-color);
+		font: var(--primitives-font-body-sm-regular-tight);
 		text-wrap: pretty;
 	}
 
-
-	/* # Content */
-
 	.inline-dialog__content {
 		width: 100%;
 	}
@@ -95,9 +97,6 @@ export const inlineDialogStyles = css `
 		display: none;
 	}
 
-
-	/* # Actions */
-
 	.inline-dialog__actions {
 		width: 100%;
 		padding-top: var(--primitives-space-16);

package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"inline-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GpC,CAAC"}
+{"version":3,"file":"inline-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GpC,CAAC"}

package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB,yBA+F7B,CAAC"}
+{"version":3,"file":"modal-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB,yBA2F7B,CAAC"}

package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js

@@ -23,16 +23,15 @@ export const modalDialogStyles = css `
 
 	.modal-dialog {
 		box-sizing: border-box;
+		outline: none;
 		border: none;
 		border-radius: var(--semantics-overlays-corner-radius);
 		box-shadow: var(--semantics-overlays-box-shadow);
-		outline: none;
 		background-color: var(--semantics-surfaces-background-color);
-		max-width: var(--primitives-area-480);
 		width: calc(100% - var(--primitives-space-16) * 2);
+		max-width: var(--primitives-area-480);
 		max-height: var(--_max-height);
 		overflow-y: auto;
-
 		padding: var(--primitives-space-16);
 
 		@media (min-width: ${mdMin}) {
@@ -45,15 +44,30 @@ export const modalDialogStyles = css `
 	}
 
 	.modal-dialog:focus-visible:not(.is-pointer-focus) {
-		box-shadow: var(--semantics-focus-ring-box-shadow), var(--semantics-overlays-box-shadow);
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow), var(--semantics-overlays-box-shadow);
 	}
 
 	.modal-dialog::backdrop {
 		background: var(--semantics-overlays-backdrop-color);
 	}
 
+	.modal-dialog[open] {
+		animation: modal-dialog-in var(--_animation-duration) var(--_animation-easing) both;
+	}
+
+	.modal-dialog.is-closing {
+		animation: modal-dialog-out var(--_animation-duration) var(--_animation-easing) both;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.modal-dialog[open],
+		.modal-dialog.is-closing {
+			animation: none;
+		}
+	}
+
 
 	/* # Keyframes */
 
@@ -78,23 +92,5 @@ export const modalDialogStyles = css `
 			transform: scale(0.95);
 		}
 	}
-
-	.modal-dialog[open] {
-		animation: modal-dialog-in var(--_animation-duration) var(--_animation-easing) both;
-	}
-
-	.modal-dialog.is-closing {
-		animation: modal-dialog-out var(--_animation-duration) var(--_animation-easing) both;
-	}
-
-
-	/* # Reduced motion */
-
-	@media (prefers-reduced-motion: reduce) {
-		.modal-dialog[open],
-		.modal-dialog.is-closing {
-			animation: none;
-		}
-	}
 `;
 //# sourceMappingURL=modal-dialog.styles.js.map

package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAkCb,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D3B,CAAC"}
+{"version":3,"file":"modal-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAiCb,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D3B,CAAC"}

package/dist/css/settings.css

@@ -783,9 +783,9 @@
 
 	/* ## Links */
 
-	--semantics-links-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
-	--semantics-links-is-hovered-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
-	--semantics-links-is-active-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
+	--semantics-links-color: light-dark(var(--primitives-color-lintblauw-550), var(--primitives-color-lintblauw-650));
+	--semantics-links-is-hovered-color: light-dark(var(--primitives-color-lintblauw-600), var(--primitives-color-lintblauw-700));
+	--semantics-links-is-active-color: light-dark(var(--primitives-color-lintblauw-650), var(--primitives-color-lintblauw-750));
 
 	/* ## Blockquotes */
 
@@ -955,7 +955,7 @@
 	/* ## Forms */
 
 	--semantics-forms-gap: var(--primitives-space-16);
-	--semantics-forms-gap-tight: var(--primitives-space-8);
+	--semantics-forms-gap-tight: var(--primitives-space-10);
 	--semantics-forms-label-column-width: var(--primitives-area-240);
 	--semantics-forms-columns-gap: var(--primitives-space-8);
 	--semantics-forms-section-title-font: var(--primitives-font-body-lg-bold-tight);
@@ -1070,9 +1070,32 @@
 
 	--components-document-tab-bar-tab-title-font: var(--primitives-font-body-sm-bold-flat);
 
-	/* ## Form field */
-
-	--components-form-field-gap: var(--primitives-space-2);
+	/* ## Icon — rijkskleuren
+
+	   Shade per rijkskleur picked to keep ≥400 shade distance from the
+	   surface it's painted on (default = neutral-0 / dark mode = neutral-100;
+	   tinted = neutral-25 / neutral-75). Within that contrast budget the
+	   shade closest to --primitives-color-reference-X is preferred. Middle
+	   shades (500) are self-mirroring so a single ref is used. */
+
+	--components-icon-color-lintblauw-color: light-dark(var(--primitives-color-lintblauw-750), var(--primitives-color-lintblauw-500));
+	--components-icon-color-donkerblauw-color: light-dark(var(--primitives-color-donkerblauw-600), var(--primitives-color-donkerblauw-500));
+	--components-icon-color-hemelblauw-color: var(--primitives-color-hemelblauw-500);
+	--components-icon-color-lichtblauw-color: light-dark(var(--primitives-color-lichtblauw-450), var(--primitives-color-lichtblauw-800));
+	--components-icon-color-paars-color: light-dark(var(--primitives-color-paars-850), var(--primitives-color-paars-500));
+	--components-icon-color-violet-color: light-dark(var(--primitives-color-violet-650), var(--primitives-color-violet-500));
+	--components-icon-color-robijnrood-color: light-dark(var(--primitives-color-robijnrood-550), var(--primitives-color-robijnrood-500));
+	--components-icon-color-roze-color: light-dark(var(--primitives-color-roze-450), var(--primitives-color-roze-750));
+	--components-icon-color-rood-color: light-dark(var(--primitives-color-rood-550), var(--primitives-color-rood-500));
+	--components-icon-color-oranje-color: light-dark(var(--primitives-color-oranje-450), var(--primitives-color-oranje-600));
+	--components-icon-color-donkergeel-color: light-dark(var(--primitives-color-donkergeel-450), var(--primitives-color-donkergeel-800));
+	--components-icon-color-geel-color: light-dark(var(--primitives-color-geel-450), var(--primitives-color-geel-900));
+	--components-icon-color-donkerbruin-color: light-dark(var(--primitives-color-donkerbruin-750), var(--primitives-color-donkerbruin-500));
+	--components-icon-color-bruin-color: var(--primitives-color-bruin-500);
+	--components-icon-color-donkergroen-color: light-dark(var(--primitives-color-donkergroen-700), var(--primitives-color-donkergroen-500));
+	--components-icon-color-groen-color: var(--primitives-color-groen-500);
+	--components-icon-color-mosgroen-color: var(--primitives-color-mosgroen-500);
+	--components-icon-color-mintgroen-color: light-dark(var(--primitives-color-mintgroen-450), var(--primitives-color-mintgroen-800));
 
 	/* ## Inline dialog */
 
@@ -1149,6 +1172,9 @@
 	--components-menu-item-is-highlighted-content-color: var(--semantics-controls-is-highlighted-contrast-color);
 	--components-menu-item-is-expanded-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
 	--components-menu-item-is-expanded-content-color: var(--primitives-color-neutral-1000);
+	--components-menu-item-is-destructive-content-color: var(--semantics-content-critical-color);
+	--components-menu-item-is-destructive-is-highlighted-background-color: light-dark(var(--primitives-color-critical-600), var(--primitives-color-critical-650));
+	--components-menu-item-is-destructive-is-highlighted-content-color: var(--primitives-color-neutral-0);
 
 	/* ## Menu bar */
 

package/dist/utilities/color-scheme-repaint.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Notifies subscribers when `:root[data-scheme]` flips, so they can force
+ * a repaint of any scrollable region with `light-dark()` colours.
+ *
+ * Why this exists: browsers (Chromium especially) cache off-screen tiles
+ * for composited scroll layers and don't always invalidate them when a
+ * `color-scheme` flip re-resolves `light-dark()` values. Scroll back
+ * after a theme switch and you see stale colours from the old scheme.
+ * Components with overflowing scroll containers can subscribe here and
+ * drop their compositor layer on each scheme change.
+ *
+ * The MutationObserver runs lazily — set up on first subscribe, torn
+ * down when the last subscriber unsubscribes.
+ */
+type Listener = () => void;
+/**
+ * Subscribe to color-scheme changes. The callback fires synchronously
+ * from the MutationObserver — before the next paint — so dropping a
+ * compositor layer from inside it invalidates stale tiles before they
+ * become visible.
+ *
+ * @returns Unsubscribe function. Tears down the global observer when
+ *          the last subscriber leaves.
+ */
+export declare function onColorSchemeChange(callback: Listener): () => void;
+/**
+ * Force a scrollable element to drop and recreate its compositor layer,
+ * invalidating any stale off-screen paint tiles. Preserves scrollLeft/Top
+ * so the user doesn't lose their position, and restores the caller's
+ * inline `display` value.
+ *
+ * Use this from an `onColorSchemeChange` callback.
+ *
+ * Caveat: the display:none → reflow → display cycle fires any
+ * ResizeObserver watching this element (it reports width/height 0, then
+ * the original size). Harmless for elements no one observes, but a
+ * component that observes its own scroll container should audit for
+ * resize-driven side effects before adopting this.
+ */
+export declare function forceScrollLayerRepaint(el: HTMLElement): void;
+/** @internal Reset state for testing only. */
+export declare function _resetColorSchemeRepaintForTesting(): void;
+export {};
+//# sourceMappingURL=color-scheme-repaint.d.ts.map

package/dist/utilities/color-scheme-repaint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-scheme-repaint.d.ts","sourceRoot":"","sources":["../../src/utilities/color-scheme-repaint.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC;AAqB3B;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,IAAI,CAUlE;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,CAa7D;AAED,8CAA8C;AAC9C,wBAAgB,kCAAkC,IAAI,IAAI,CAIzD"}