@nldd/design-system 0.8.43 → 0.8.45

package/dist/css/rich-text.css

@@ -2,34 +2,55 @@
 
 nldd-rich-text {
 	--_spacing: var(--components-rich-text-spacing-snug);
-
-	display: block;
+	--_wide-max-width: var(--components-rich-text-wide-max-width);
+	--_wide-bleed-width: calc(
+		(var(--_wide-max-width) - var(--components-rich-text-main-max-width)) / 2
+	);
+	--_main-shortfall: max(
+		0px,
+		calc(100% - var(--components-rich-text-main-max-width))
+	);
+
+	display: grid;
+	grid-template-columns:
+		[full-start]   0
+		[wide-start]   0
+		[main-start]   minmax(0, var(--components-rich-text-main-max-width))
+		[main-end]     min(calc(var(--_wide-bleed-width) * 2), var(--_main-shortfall))
+		[wide-end]     1fr
+		[full-end];
+	row-gap: var(--_spacing);
 	color: var(--semantics-content-color);
 	font: var(--primitives-font-body-md-regular-snug);
 	-webkit-text-size-adjust: 100%;
 	text-size-adjust: 100%;
 }
 
-nldd-rich-text[spacing="flat"] {
-	--_spacing: var(--components-rich-text-spacing-flat);
-}
-
-nldd-rich-text[spacing="tight"] {
-	--_spacing: var(--components-rich-text-spacing-tight);
-}
+nldd-rich-text[centered] {
+	--_wide-max-width: var(--components-rich-text-centered-wide-max-width);
 
-nldd-rich-text[spacing="snug"] {
-	--_spacing: var(--components-rich-text-spacing-snug);
+	grid-template-columns:
+		[full-start]   1fr
+		[wide-start]   min(var(--_wide-bleed-width), calc(var(--_main-shortfall) / 2))
+		[main-start]   minmax(0, var(--components-rich-text-main-max-width))
+		[main-end]     min(var(--_wide-bleed-width), calc(var(--_main-shortfall) / 2))
+		[wide-end]     1fr
+		[full-end];
 }
 
-nldd-rich-text[spacing="loose"] {
-	--_spacing: var(--components-rich-text-spacing-loose);
-}
+nldd-rich-text[spacing="flat"]  { --_spacing: var(--components-rich-text-spacing-flat); }
+nldd-rich-text[spacing="tight"] { --_spacing: var(--components-rich-text-spacing-tight); }
+nldd-rich-text[spacing="snug"]  { --_spacing: var(--components-rich-text-spacing-snug); }
+nldd-rich-text[spacing="loose"] { --_spacing: var(--components-rich-text-spacing-loose); }
 
 nldd-rich-text[hidden] {
 	display: none;
 }
 
+nldd-rich-text > * {
+	grid-column: main;
+}
+
 nldd-rich-text > :first-child {
 	margin-top: 0;
 }
@@ -49,21 +70,18 @@ nldd-rich-text *:focus:not(:focus-visible) {
 }
 
 
-/* # Paragraph */
+/* # Headings */
 
-nldd-rich-text p {
-	max-width: var(--primitives-area-720);
-	margin: var(--_spacing) 0;
+nldd-rich-text :is(h1, h2, h3, h4, h5, h6) {
+	margin-top: var(--_spacing);
+	margin-bottom: 0;
+	text-wrap: pretty;
 }
 
 
 /* # Heading 1 */
 
 nldd-rich-text h1 {
-	margin-top: calc(var(--_spacing) * 2);
-	margin-bottom: var(--_spacing);
-	text-wrap: pretty;
-
 	@media (max-width: 640px) {
 		font: var(--primitives-font-display-1-sm);
 	}
@@ -93,10 +111,6 @@ nldd-rich-text h1 {
 /* # Heading 2 */
 
 nldd-rich-text h2 {
-	margin-top: calc(var(--_spacing) * 2);
-	margin-bottom: var(--_spacing);
-	text-wrap: pretty;
-
 	@media (max-width: 640px) {
 		font: var(--primitives-font-display-2-sm);
 	}
@@ -126,10 +140,6 @@ nldd-rich-text h2 {
 /* # Heading 3 */
 
 nldd-rich-text h3 {
-	margin-top: calc(var(--_spacing) * 2);
-	margin-bottom: var(--_spacing);
-	text-wrap: pretty;
-
 	@media (max-width: 640px) {
 		font: var(--primitives-font-display-3-sm);
 	}
@@ -159,10 +169,6 @@ nldd-rich-text h3 {
 /* # Heading 4 */
 
 nldd-rich-text h4 {
-	margin-top: calc(var(--_spacing) * 2);
-	margin-bottom: var(--_spacing);
-	text-wrap: pretty;
-
 	@media (max-width: 640px) {
 		font: var(--primitives-font-display-4-sm);
 	}
@@ -192,10 +198,6 @@ nldd-rich-text h4 {
 /* # Heading 5 */
 
 nldd-rich-text h5 {
-	margin-top: calc(var(--_spacing) * 2);
-	margin-bottom: var(--_spacing);
-	text-wrap: pretty;
-
 	@media (max-width: 640px) {
 		font: var(--primitives-font-display-5-sm);
 	}
@@ -225,10 +227,6 @@ nldd-rich-text h5 {
 /* # Heading 6 */
 
 nldd-rich-text h6 {
-	margin-top: calc(var(--_spacing) * 2);
-	margin-bottom: var(--_spacing);
-	text-wrap: pretty;
-
 	@media (max-width: 640px) {
 		font: var(--primitives-font-display-6-sm);
 	}
@@ -255,6 +253,13 @@ nldd-rich-text h6 {
 }
 
 
+/* # Paragraph */
+
+nldd-rich-text p {
+	margin: 0;
+}
+
+
 /* # Lists */
 
 nldd-rich-text ul {
@@ -269,9 +274,8 @@ nldd-rich-text ol {
 	list-style-type: decimal;
 }
 
-nldd-rich-text > ul,
-nldd-rich-text > ol {
-	margin: var(--_spacing) 0;
+nldd-rich-text > :is(ul, ol) {
+	margin-block: calc(var(--_spacing) / -2);
 }
 
 nldd-rich-text ol > li > ol {
@@ -282,7 +286,6 @@ nldd-rich-text ol > li > ol {
 /* # List Item */
 
 nldd-rich-text li {
-	max-width: var(--primitives-area-720);
 	margin: calc(var(--_spacing) / 2) 0;
 	padding: 0;
 }
@@ -367,16 +370,21 @@ nldd-rich-text figcaption {
 
 /* # Blockquote */
 
+nldd-rich-text > blockquote {
+	grid-column: main-start / wide-end;
+}
+
 nldd-rich-text blockquote {
 	display: flex;
 	flex-direction: column;
 	gap: calc(var(--semantics-blockquotes-md-spacing) / 2);
-	max-width: var(--semantics-blockquotes-max-width);
-	margin-block: var(--semantics-blockquotes-md-spacing);
+	margin-block: max(
+		0px,
+		calc(var(--semantics-blockquotes-md-spacing) - var(--_spacing))
+	);
 	margin-inline: 0;
+	padding-block-start: var(--semantics-blockquotes-md-spacing);
 	padding-inline: var(--semantics-blockquotes-md-spacing);
-	padding-top: var(--semantics-blockquotes-md-spacing);
-	padding-bottom: 0;
 	border-top: var(--semantics-blockquotes-border);
 	border-left: var(--semantics-blockquotes-border);
 	border-top-left-radius: var(--semantics-blockquotes-corner-radius);
@@ -384,19 +392,23 @@ nldd-rich-text blockquote {
 
 	@media (max-width: 640px) {
 		gap: calc(var(--semantics-blockquotes-sm-spacing) / 2);
-		margin-block: var(--semantics-blockquotes-sm-spacing);
+		margin-block: max(
+			0px,
+			calc(var(--semantics-blockquotes-sm-spacing) - var(--_spacing))
+		);
+		padding-block-start: var(--semantics-blockquotes-sm-spacing);
 		padding-inline: var(--semantics-blockquotes-sm-spacing);
-		padding-top: var(--semantics-blockquotes-sm-spacing);
-		padding-bottom: 0;
 		font: var(--semantics-blockquotes-sm-quote-font);
 	}
 
 	@container layout-container (max-width: 640px) {
 		gap: calc(var(--semantics-blockquotes-sm-spacing) / 2);
-		margin-block: var(--semantics-blockquotes-sm-spacing);
+		margin-block: max(
+			0px,
+			calc(var(--semantics-blockquotes-sm-spacing) - var(--_spacing))
+		);
+		padding-block-start: var(--semantics-blockquotes-sm-spacing);
 		padding-inline: var(--semantics-blockquotes-sm-spacing);
-		padding-top: var(--semantics-blockquotes-sm-spacing);
-		padding-bottom: 0;
 		font: var(--semantics-blockquotes-sm-quote-font);
 	}
 }
@@ -432,18 +444,33 @@ nldd-rich-text img {
 
 /* # Horizontal Rule */
 
+nldd-rich-text > hr {
+	grid-column: full;
+}
+
 nldd-rich-text hr {
-	margin: var(--_spacing) 0;
+	margin: 0;
 	border: none;
 	border-top: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
 }
 
 
-/* # Table */
+/* # Table
+   Spans the full container width by default so wide data tables aren't
+   cramped to the main text width. Same min-block-spacing floor as
+   blockquote so it always reads as a distinct chunk even in flat mode. */
+
+nldd-rich-text > table {
+	grid-column: main-start / full-end;
+}
 
 nldd-rich-text table {
 	display: block;
 	width: 100%;
+	margin-block: max(
+		0px,
+		calc(var(--components-rich-text-spacing-snug) - var(--_spacing))
+	);
 	border-collapse: collapse;
 	font: var(--primitives-font-body-md-regular-tight);
 	overflow-x: auto;

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 */
 
@@ -816,11 +816,19 @@
 	--semantics-controls-md-min-size: var(--primitives-space-44);
 	--semantics-controls-lg-min-size: var(--primitives-space-56);
 
+	--semantics-buttons-xs-icon-size: var(--primitives-space-16);
+	--semantics-buttons-sm-icon-size: var(--primitives-space-18);
+	--semantics-buttons-md-icon-size: var(--primitives-space-20);
+
+	--semantics-buttons-xs-icon-only-icon-size: var(--primitives-space-16);
+	--semantics-buttons-sm-icon-only-icon-size: var(--primitives-space-20);
+	--semantics-buttons-md-icon-only-icon-size: var(--primitives-space-24);
+
 	--semantics-controls-md-inline-padding: var(--primitives-space-12);
 	--semantics-controls-sm-inline-padding: var(--primitives-space-10);
 	--semantics-controls-xs-inline-padding: var(--primitives-space-6);
 
-	--semantics-controls-md-block-padding: var(--primitives-space-12);
+	--semantics-controls-md-block-padding: var(--primitives-space-10);
 	--semantics-controls-sm-block-padding: var(--primitives-space-6);
 	--semantics-controls-xs-block-padding: var(--primitives-space-4);
 
@@ -829,14 +837,6 @@
 	--semantics-controls-md-corner-radius: var(--primitives-corner-radius-md);
 	--semantics-controls-lg-corner-radius: var(--primitives-corner-radius-md);
 
-	--semantics-buttons-xs-icon-size: var(--primitives-space-16);
-	--semantics-buttons-sm-icon-size: var(--primitives-space-18);
-	--semantics-buttons-md-icon-size: var(--primitives-space-20);
-
-	--semantics-buttons-xs-icon-only-icon-size: var(--primitives-space-16);
-	--semantics-buttons-sm-icon-only-icon-size: var(--primitives-space-20);
-	--semantics-buttons-md-icon-only-icon-size: var(--primitives-space-24);
-
 	--semantics-controls-is-highlighted-indicator-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
 	--semantics-controls-is-highlighted-contrast-color: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-0));
 	--semantics-controls-is-highlighted-is-hovered-indicator-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
@@ -858,9 +858,9 @@
 	--semantics-buttons-sm-divider-length: var(--primitives-space-20);
 	--semantics-buttons-md-divider-length: var(--primitives-space-28);
 
-	--semantics-buttons-md-gap: var(--primitives-space-6);
-	--semantics-buttons-sm-gap: var(--primitives-space-4);
-	--semantics-buttons-xs-gap: var(--primitives-space-3);
+	--semantics-buttons-md-gap: var(--primitives-space-4);
+	--semantics-buttons-sm-gap: var(--primitives-space-3);
+	--semantics-buttons-xs-gap: var(--primitives-space-2);
 
 	--semantics-buttons-neutral-tinted-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
 	--semantics-buttons-neutral-tinted-content-color: light-dark(var(--primitives-color-neutral-900), var(--primitives-color-neutral-900));
@@ -872,15 +872,15 @@
 	--semantics-buttons-neutral-tinted-is-active-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
 	--semantics-buttons-neutral-tinted-is-active-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
 	--semantics-buttons-neutral-tinted-is-active-secondary-content-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-850));
-	--semantics-buttons-neutral-tinted-is-open-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
-	--semantics-buttons-neutral-tinted-is-open-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
-	--semantics-buttons-neutral-tinted-is-open-secondary-content-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-850));
-	--semantics-buttons-neutral-tinted-is-open-is-hovered-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
-	--semantics-buttons-neutral-tinted-is-open-is-hovered-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
-	--semantics-buttons-neutral-tinted-is-open-is-hovered-secondary-content-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-850));
-	--semantics-buttons-neutral-tinted-is-open-is-active-background-color: light-dark(var(--primitives-color-neutral-250), var(--primitives-color-neutral-400));
-	--semantics-buttons-neutral-tinted-is-open-is-active-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
-	--semantics-buttons-neutral-tinted-is-open-is-active-secondary-content-color: light-dark(var(--primitives-color-neutral-750), var(--primitives-color-neutral-900));
+	--semantics-buttons-neutral-tinted-is-expanded-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
+	--semantics-buttons-neutral-tinted-is-expanded-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
+	--semantics-buttons-neutral-tinted-is-expanded-secondary-content-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-850));
+	--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
+	--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
+	--semantics-buttons-neutral-tinted-is-expanded-is-hovered-secondary-content-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-850));
+	--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color: light-dark(var(--primitives-color-neutral-250), var(--primitives-color-neutral-400));
+	--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color: light-dark(var(--primitives-color-neutral-1000), var(--primitives-color-neutral-1000));
+	--semantics-buttons-neutral-tinted-is-expanded-is-active-secondary-content-color: light-dark(var(--primitives-color-neutral-750), var(--primitives-color-neutral-900));
 	--semantics-buttons-neutral-tinted-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
 	--semantics-buttons-neutral-tinted-is-selected-content-color: var(--semantics-controls-is-highlighted-contrast-color);
 	--semantics-buttons-neutral-tinted-is-selected-secondary-content-color: var(--semantics-controls-is-highlighted-contrast-color);
@@ -902,12 +902,12 @@
 	--semantics-buttons-accent-filled-is-hovered-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
 	--semantics-buttons-accent-filled-is-active-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
 	--semantics-buttons-accent-filled-is-active-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
-	--semantics-buttons-accent-filled-is-open-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
-	--semantics-buttons-accent-filled-is-open-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
-	--semantics-buttons-accent-filled-is-open-is-hovered-background-color: light-dark(var(--primitives-color-accent-900), var(--primitives-color-accent-800));
-	--semantics-buttons-accent-filled-is-open-is-hovered-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
-	--semantics-buttons-accent-filled-is-open-is-active-background-color: light-dark(var(--primitives-color-accent-950), var(--primitives-color-accent-850));
-	--semantics-buttons-accent-filled-is-open-is-active-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
+	--semantics-buttons-accent-filled-is-expanded-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
+	--semantics-buttons-accent-filled-is-expanded-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
+	--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color: light-dark(var(--primitives-color-accent-900), var(--primitives-color-accent-800));
+	--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
+	--semantics-buttons-accent-filled-is-expanded-is-active-background-color: light-dark(var(--primitives-color-accent-950), var(--primitives-color-accent-850));
+	--semantics-buttons-accent-filled-is-expanded-is-active-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
 
 	--semantics-buttons-accent-transparent-content-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
 	--semantics-buttons-accent-transparent-is-hovered-content-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
@@ -1020,8 +1020,8 @@
 	--components-badge-accent-content-color: var(--primitives-color-accent-0);
 	--components-badge-neutral-background-color: var(--primitives-color-neutral-800);
 	--components-badge-neutral-content-color: var(--primitives-color-neutral-0);
-	--components-badge-warning-background-color: var(--primitives-color-warning-300);
-	--components-badge-warning-content-color: var(--primitives-color-warning-1000);
+	--components-badge-warning-background-color: light-dark(var(--primitives-color-warning-300), var(--primitives-color-warning-700));
+	--components-badge-warning-content-color: light-dark(var(--primitives-color-warning-1000), var(--primitives-color-warning-0));
 	--components-badge-success-background-color: var(--primitives-color-success-550);
 	--components-badge-success-content-color: var(--primitives-color-success-0);
 
@@ -1074,6 +1074,33 @@
 
 	--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 */
 
 	--components-inline-dialog-icon-color: var(--semantics-content-color);
@@ -1147,8 +1174,11 @@
 	--components-menu-box-shadow: var(--primitives-box-shadows-level-5);
 	--components-menu-item-is-highlighted-background-color: var(--semantics-controls-is-highlighted-indicator-color);
 	--components-menu-item-is-highlighted-content-color: var(--semantics-controls-is-highlighted-contrast-color);
-	--components-menu-item-is-open-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
-	--components-menu-item-is-open-content-color: var(--primitives-color-neutral-1000);
+	--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 */
 
@@ -1156,8 +1186,8 @@
 	--components-menu-bar-item-inline-padding: var(--primitives-space-8);
 	--components-menu-bar-item-content-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-750));
 	--components-menu-bar-item-is-hovered-indicator-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-200));
-	--components-menu-bar-item-is-open-indicator-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-250));
-	--components-menu-bar-item-is-open-is-hovered-indicator-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-300));
+	--components-menu-bar-item-is-expanded-indicator-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-250));
+	--components-menu-bar-item-is-expanded-is-hovered-indicator-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-300));
 	--components-menu-bar-item-is-current-indicator-background-color: var(--semantics-controls-is-highlighted-indicator-color);
 	--components-menu-bar-item-is-current-indicator-height: var(--primitives-space-4);
 
@@ -1186,6 +1216,9 @@
 	/* ## Rich text */
 
 	--components-rich-text-grid-size: calc(var(--primitives-font-size-100) * var(--primitives-line-height-snug));
+	--components-rich-text-main-max-width: var(--primitives-area-720);
+	--components-rich-text-wide-max-width: var(--primitives-area-800);
+	--components-rich-text-centered-wide-max-width: var(--primitives-area-960);
 	--components-rich-text-spacing-flat: var(--primitives-space-0);
 	--components-rich-text-spacing-tight: calc(var(--components-rich-text-grid-size) / 4);
 	--components-rich-text-spacing-snug: calc(var(--components-rich-text-grid-size) / 2);

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"}

package/dist/utilities/color-scheme-repaint.js

@@ -0,0 +1,88 @@
+/**
+ * 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.
+ */
+const listeners = new Set();
+let observer = null;
+function init() {
+    if (observer)
+        return;
+    observer = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+            if (m.attributeName === 'data-scheme') {
+                for (const l of listeners)
+                    l();
+                return;
+            }
+        }
+    });
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-scheme'],
+    });
+}
+/**
+ * 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 function onColorSchemeChange(callback) {
+    init();
+    listeners.add(callback);
+    return () => {
+        listeners.delete(callback);
+        if (listeners.size === 0) {
+            observer?.disconnect();
+            observer = null;
+        }
+    };
+}
+/**
+ * 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 function forceScrollLayerRepaint(el) {
+    const x = el.scrollLeft;
+    const y = el.scrollTop;
+    // Save the caller's inline display so a legitimate value (e.g. an
+    // explicit `display: flex`) survives — clearing to '' would drop it.
+    const prevDisplay = el.style.display;
+    el.style.display = 'none';
+    // Synchronous reflow drops the layer; the browser doesn't paint
+    // between this and re-showing, so there's no visible flicker.
+    void el.offsetHeight;
+    el.style.display = prevDisplay;
+    el.scrollLeft = x;
+    el.scrollTop = y;
+}
+/** @internal Reset state for testing only. */
+export function _resetColorSchemeRepaintForTesting() {
+    observer?.disconnect();
+    observer = null;
+    listeners.clear();
+}
+//# sourceMappingURL=color-scheme-repaint.js.map

package/dist/utilities/color-scheme-repaint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-scheme-repaint.js","sourceRoot":"","sources":["../../src/utilities/color-scheme-repaint.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAIH,MAAM,SAAS,GAAG,IAAI,GAAG,EAAY,CAAC;AACtC,IAAI,QAAQ,GAA4B,IAAI,CAAC;AAE7C,SAAS,IAAI;IACZ,IAAI,QAAQ;QAAE,OAAO;IACrB,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE;QAC7C,KAAK,MAAM,CAAC,IAAI,SAAS,EAAE,CAAC;YAC3B,IAAI,CAAC,CAAC,aAAa,KAAK,aAAa,EAAE,CAAC;gBACvC,KAAK,MAAM,CAAC,IAAI,SAAS;oBAAE,CAAC,EAAE,CAAC;gBAC/B,OAAO;YACR,CAAC;QACF,CAAC;IACF,CAAC,CAAC,CAAC;IACH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;QAC1C,UAAU,EAAE,IAAI;QAChB,eAAe,EAAE,CAAC,aAAa,CAAC;KAChC,CAAC,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,mBAAmB,CAAC,QAAkB;IACrD,IAAI,EAAE,CAAC;IACP,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACxB,OAAO,GAAG,EAAE;QACX,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC3B,IAAI,SAAS,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;YAC1B,QAAQ,EAAE,UAAU,EAAE,CAAC;YACvB,QAAQ,GAAG,IAAI,CAAC;QACjB,CAAC;IACF,CAAC,CAAC;AACH,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,uBAAuB,CAAC,EAAe;IACtD,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC;IACxB,MAAM,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC;IACvB,kEAAkE;IAClE,qEAAqE;IACrE,MAAM,WAAW,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC;IACrC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IAC1B,gEAAgE;IAChE,8DAA8D;IAC9D,KAAK,EAAE,CAAC,YAAY,CAAC;IACrB,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,WAAW,CAAC;IAC/B,EAAE,CAAC,UAAU,GAAG,CAAC,CAAC;IAClB,EAAE,CAAC,SAAS,GAAG,CAAC,CAAC;AAClB,CAAC;AAED,8CAA8C;AAC9C,MAAM,UAAU,kCAAkC;IACjD,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,QAAQ,GAAG,IAAI,CAAC;IAChB,SAAS,CAAC,KAAK,EAAE,CAAC;AACnB,CAAC"}

package/dist/utilities/os.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Detects the user's operating system from the browser's navigator API.
+ * Used to pick OS-specific keyboard shortcut labels and similar
+ * platform-aware UI variants.
+ *
+ * ChromeOS is reported as `'linux'` (its platform string matches
+ * `cros`/`linux`). Falls back to `'other'` when the platform can't be
+ * classified (Android, unknown UA strings, non-browser environments).
+ */
+export type OS = 'mac' | 'windows' | 'linux' | 'other';
+export declare function detectOS(): OS;
+/**
+ * @internal — test/dev only.
+ *
+ * Force a specific OS for the duration of testing or Storybook stories.
+ * Pass `null` to clear the override and fall back to real detection.
+ * Mutates module-level singleton state and affects every component on
+ * the page that calls `detectOS()` — not a supported public API
+ * (hence the `_` prefix, matching `_resetOSDetectionCache`).
+ */
+export declare function _setOSOverride(os: OS | null): void;
+/** Reset the detection cache. For tests that mock `navigator` between cases. */
+export declare function _resetOSDetectionCache(): void;
+export declare function isMac(): boolean;
+export declare function isWindows(): boolean;
+export declare function isLinux(): boolean;
+//# sourceMappingURL=os.d.ts.map

package/dist/utilities/os.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"os.d.ts","sourceRoot":"","sources":["../../src/utilities/os.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,MAAM,EAAE,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAqBvD,wBAAgB,QAAQ,IAAI,EAAE,CAW7B;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,GAAG,IAAI,CAElD;AAED,gFAAgF;AAChF,wBAAgB,sBAAsB,IAAI,IAAI,CAE7C;AAED,wBAAgB,KAAK,IAAI,OAAO,CAAiC;AACjE,wBAAgB,SAAS,IAAI,OAAO,CAAqC;AACzE,wBAAgB,OAAO,IAAI,OAAO,CAAmC"}