@nldd/design-system 0.8.42 → 0.8.43

package/dist/css/rich-text.css

@@ -76,15 +76,15 @@ nldd-rich-text h1 {
 		font: var(--primitives-font-display-1-lg);
 	}
 
-	@container layout-area (max-width: 640px) {
+	@container layout-container (max-width: 640px) {
 		font: var(--primitives-font-display-1-sm);
 	}
 
-	@container layout-area (min-width: 641px) and (max-width: 1007px) {
+	@container layout-container (min-width: 641px) and (max-width: 1007px) {
 		font: var(--primitives-font-display-1-md);
 	}
 
-	@container layout-area (min-width: 1008px) {
+	@container layout-container (min-width: 1008px) {
 		font: var(--primitives-font-display-1-lg);
 	}
 }
@@ -109,15 +109,15 @@ nldd-rich-text h2 {
 		font: var(--primitives-font-display-2-lg);
 	}
 
-	@container layout-area (max-width: 640px) {
+	@container layout-container (max-width: 640px) {
 		font: var(--primitives-font-display-2-sm);
 	}
 
-	@container layout-area (min-width: 641px) and (max-width: 1007px) {
+	@container layout-container (min-width: 641px) and (max-width: 1007px) {
 		font: var(--primitives-font-display-2-md);
 	}
 
-	@container layout-area (min-width: 1008px) {
+	@container layout-container (min-width: 1008px) {
 		font: var(--primitives-font-display-2-lg);
 	}
 }
@@ -142,15 +142,15 @@ nldd-rich-text h3 {
 		font: var(--primitives-font-display-3-lg);
 	}
 
-	@container layout-area (max-width: 640px) {
+	@container layout-container (max-width: 640px) {
 		font: var(--primitives-font-display-3-sm);
 	}
 
-	@container layout-area (min-width: 641px) and (max-width: 1007px) {
+	@container layout-container (min-width: 641px) and (max-width: 1007px) {
 		font: var(--primitives-font-display-3-md);
 	}
 
-	@container layout-area (min-width: 1008px) {
+	@container layout-container (min-width: 1008px) {
 		font: var(--primitives-font-display-3-lg);
 	}
 }
@@ -175,15 +175,15 @@ nldd-rich-text h4 {
 		font: var(--primitives-font-display-4-lg);
 	}
 
-	@container layout-area (max-width: 640px) {
+	@container layout-container (max-width: 640px) {
 		font: var(--primitives-font-display-4-sm);
 	}
 
-	@container layout-area (min-width: 641px) and (max-width: 1007px) {
+	@container layout-container (min-width: 641px) and (max-width: 1007px) {
 		font: var(--primitives-font-display-4-md);
 	}
 
-	@container layout-area (min-width: 1008px) {
+	@container layout-container (min-width: 1008px) {
 		font: var(--primitives-font-display-4-lg);
 	}
 }
@@ -208,15 +208,15 @@ nldd-rich-text h5 {
 		font: var(--primitives-font-display-5-lg);
 	}
 
-	@container layout-area (max-width: 640px) {
+	@container layout-container (max-width: 640px) {
 		font: var(--primitives-font-display-5-sm);
 	}
 
-	@container layout-area (min-width: 641px) and (max-width: 1007px) {
+	@container layout-container (min-width: 641px) and (max-width: 1007px) {
 		font: var(--primitives-font-display-5-md);
 	}
 
-	@container layout-area (min-width: 1008px) {
+	@container layout-container (min-width: 1008px) {
 		font: var(--primitives-font-display-5-lg);
 	}
 }
@@ -241,15 +241,15 @@ nldd-rich-text h6 {
 		font: var(--primitives-font-display-6-lg);
 	}
 
-	@container layout-area (max-width: 640px) {
+	@container layout-container (max-width: 640px) {
 		font: var(--primitives-font-display-6-sm);
 	}
 
-	@container layout-area (min-width: 641px) and (max-width: 1007px) {
+	@container layout-container (min-width: 641px) and (max-width: 1007px) {
 		font: var(--primitives-font-display-6-md);
 	}
 
-	@container layout-area (min-width: 1008px) {
+	@container layout-container (min-width: 1008px) {
 		font: var(--primitives-font-display-6-lg);
 	}
 }
@@ -391,7 +391,7 @@ nldd-rich-text blockquote {
 		font: var(--semantics-blockquotes-sm-quote-font);
 	}
 
-	@container layout-area (max-width: 640px) {
+	@container layout-container (max-width: 640px) {
 		gap: calc(var(--semantics-blockquotes-sm-spacing) / 2);
 		margin-block: var(--semantics-blockquotes-sm-spacing);
 		padding-inline: var(--semantics-blockquotes-sm-spacing);
@@ -456,7 +456,7 @@ nldd-rich-text table {
 		scrollbar-width: unset;
 	}
 
-	@container layout-area (min-width: 641px) {
+	@container layout-container (min-width: 641px) {
 		display: table;
 		overflow-x: unset;
 		scrollbar-width: unset;
@@ -486,7 +486,7 @@ nldd-rich-text td {
 		min-width: unset;
 	}
 
-	@container layout-area (min-width: 641px) {
+	@container layout-container (min-width: 641px) {
 		min-width: unset;
 	}
 }

package/dist/css/settings.css

@@ -293,14 +293,6 @@
 	--primitives-area-1280: 1280px;
 	--primitives-area-1440: 1440px;
 
-	/* ## Breakpoints */
-
-	--primitives-breakpoint-sm-min: 320px;
-	--primitives-breakpoint-sm-max: 640px;
-	--primitives-breakpoint-md-min: 641px;
-	--primitives-breakpoint-md-max: 1007px;
-	--primitives-breakpoint-lg-min: 1008px;
-
 	/* ## Border width */
 
 	--primitives-border-width-thin: 1px;
@@ -732,56 +724,44 @@
 
 	/* ## Box shadow */
 
-	--primitives-box-shadow-opacity-factor: 1;
-
-	@media (prefers-color-scheme: dark) {
-		&:not([data-scheme="light"]) {
-			--primitives-box-shadow-opacity-factor: 3;
-		}
-	}
-
-	&[data-scheme="dark"] {
-		--primitives-box-shadow-opacity-factor: 3;
-	}
-
 	--primitives-box-shadows-level-1:
-		0px 2px 4px 0px rgba(0, 0, 0, calc(0.11 * var(--primitives-box-shadow-opacity-factor))),
-		0px 0px 2px 0px rgba(0, 0, 0, calc(0.09 * var(--primitives-box-shadow-opacity-factor)))
+		0px 2px 4px 0px light-dark(rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.33)),
+		0px 0px 2px 0px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.27))
 	;
 	--primitives-box-shadows-level-2:
-		0px 2px 8px 0px rgba(0, 0, 0, calc(0.1 * var(--primitives-box-shadow-opacity-factor))),
-		0px 1px 4px 0px rgba(0, 0, 0, calc(0.08 * var(--primitives-box-shadow-opacity-factor))),
-		0px 0px 2px 0px rgba(0, 0, 0, calc(0.06 * var(--primitives-box-shadow-opacity-factor)))
+		0px 2px 8px 0px light-dark(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.30)),
+		0px 1px 4px 0px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24)),
+		0px 0px 2px 0px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18))
 	;
 	--primitives-box-shadows-level-3:
-		0px 4px 16px 0px rgba(0, 0, 0, calc(0.12 * var(--primitives-box-shadow-opacity-factor))),
-		0px 2px 8px 0px rgba(0, 0, 0, calc(0.06 * var(--primitives-box-shadow-opacity-factor))),
-		0px 1px 4px 0px rgba(0, 0, 0, calc(0.05 * var(--primitives-box-shadow-opacity-factor))),
-		0px 0px 2px 0px rgba(0, 0, 0, calc(0.04 * var(--primitives-box-shadow-opacity-factor)))
+		0px 4px 16px 0px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.36)),
+		0px 2px 8px 0px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18)),
+		0px 1px 4px 0px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15)),
+		0px 0px 2px 0px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12))
 	;
 	--primitives-box-shadows-level-4:
-		0px 8px 32px 0px rgba(0, 0, 0, calc(0.1 * var(--primitives-box-shadow-opacity-factor))),
-		0px 4px 16px 0px rgba(0, 0, 0, calc(0.08 * var(--primitives-box-shadow-opacity-factor))),
-		0px 2px 8px 0px rgba(0, 0, 0, calc(0.06 * var(--primitives-box-shadow-opacity-factor))),
-		0px 1px 4px 0px rgba(0, 0, 0, calc(0.04 * var(--primitives-box-shadow-opacity-factor))),
-		0px 0px 2px 0px rgba(0, 0, 0, calc(0.02 * var(--primitives-box-shadow-opacity-factor)))
+		0px 8px 32px 0px light-dark(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.30)),
+		0px 4px 16px 0px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24)),
+		0px 2px 8px 0px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18)),
+		0px 1px 4px 0px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12)),
+		0px 0px 2px 0px light-dark(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.06))
 	;
 	--primitives-box-shadows-level-5:
-		0px 16px 64px 0px rgba(0, 0, 0, calc(0.11 * var(--primitives-box-shadow-opacity-factor))),
-		0px 8px 32px 0px rgba(0, 0, 0, calc(0.09 * var(--primitives-box-shadow-opacity-factor))),
-		0px 4px 16px 0px rgba(0, 0, 0, calc(0.06 * var(--primitives-box-shadow-opacity-factor))),
-		0px 2px 8px 0px rgba(0, 0, 0, calc(0.04 * var(--primitives-box-shadow-opacity-factor))),
-		0px 1px 4px 0px rgba(0, 0, 0, calc(0.03 * var(--primitives-box-shadow-opacity-factor))),
-		0px 0px 2px 0px rgba(0, 0, 0, calc(0.02 * var(--primitives-box-shadow-opacity-factor)))
+		0px 16px 64px 0px light-dark(rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.33)),
+		0px 8px 32px 0px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.27)),
+		0px 4px 16px 0px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18)),
+		0px 2px 8px 0px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12)),
+		0px 1px 4px 0px light-dark(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.09)),
+		0px 0px 2px 0px light-dark(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.06))
 	;
 	--primitives-box-shadows-level-6:
-		0px 32px 128px 0px rgba(0, 0, 0, calc(0.16 * var(--primitives-box-shadow-opacity-factor))),
-		0px 16px 64px 0px rgba(0, 0, 0, calc(0.1 * var(--primitives-box-shadow-opacity-factor))),
-		0px 8px 32px 0px rgba(0, 0, 0, calc(0.08 * var(--primitives-box-shadow-opacity-factor))),
-		0px 4px 16px 0px rgba(0, 0, 0, calc(0.06 * var(--primitives-box-shadow-opacity-factor))),
-		0px 2px 8px 0px rgba(0, 0, 0, calc(0.04 * var(--primitives-box-shadow-opacity-factor))),
-		0px 1px 4px 0px rgba(0, 0, 0, calc(0.03 * var(--primitives-box-shadow-opacity-factor))),
-		0px 0px 2px 0px rgba(0, 0, 0, calc(0.02 * var(--primitives-box-shadow-opacity-factor)))
+		0px 32px 128px 0px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.48)),
+		0px 16px 64px 0px light-dark(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.30)),
+		0px 8px 32px 0px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24)),
+		0px 4px 16px 0px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18)),
+		0px 2px 8px 0px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12)),
+		0px 1px 4px 0px light-dark(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.09)),
+		0px 0px 2px 0px light-dark(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.06))
 	;
 
 
@@ -794,8 +774,8 @@
 
 	/* ## Content */
 
-	--semantics-content-color: light-dark(var(--primitives-color-neutral-800), var(--primitives-color-neutral-850));
-	--semantics-content-secondary-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
+	--semantics-content-color: light-dark(var(--primitives-color-neutral-800), var(--primitives-color-neutral-900));
+	--semantics-content-secondary-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-700));
 	--semantics-content-accent-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
 	--semantics-content-critical-color: light-dark(var(--primitives-color-critical-550), var(--primitives-color-critical-650));
 	--semantics-content-warning-color: light-dark(var(--primitives-color-warning-550), var(--primitives-color-warning-650));
@@ -803,9 +783,9 @@
 
 	/* ## Links */
 
-	--semantics-links-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-600));
-	--semantics-links-is-hovered-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-650));
-	--semantics-links-is-active-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-700));
+	--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));
 
 	/* ## Blockquotes */
 
@@ -849,12 +829,20 @@
 	--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: var(--semantics-surfaces-background-color);
+	--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));
-	--semantics-controls-is-highlighted-is-hovered-contrast-color: var(--semantics-surfaces-background-color);
+	--semantics-controls-is-highlighted-is-hovered-contrast-color: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-0));
 	--semantics-controls-is-highlighted-is-active-indicator-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
-	--semantics-controls-is-highlighted-is-active-contrast-color: var(--semantics-surfaces-background-color);
+	--semantics-controls-is-highlighted-is-active-contrast-color: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-0));
 
 	--semantics-controls-is-dragging-opacity: var(--primitives-opacity-40);
 
@@ -884,6 +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-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);
@@ -900,19 +897,17 @@
 
 	--semantics-buttons-accent-filled-background-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
 	--semantics-buttons-accent-filled-content-color: light-dark(var(--primitives-color-accent-0), var(--primitives-color-accent-0));
+	--semantics-buttons-accent-filled-divider-color: light-dark(var(--primitives-color-accent-500), var(--primitives-color-accent-450));
 	--semantics-buttons-accent-filled-is-hovered-background-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
 	--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-divider-color: light-dark(var(--primitives-color-accent-500), var(--primitives-color-accent-450));
-
-	--semantics-buttons-accent-outlined-border-thickness: var(--primitives-border-width-regular);
-	--semantics-buttons-accent-outlined-border-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
-	--semantics-buttons-accent-outlined-content-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
-	--semantics-buttons-accent-outlined-is-hovered-border-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
-	--semantics-buttons-accent-outlined-is-hovered-content-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
-	--semantics-buttons-accent-outlined-is-active-border-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
-	--semantics-buttons-accent-outlined-is-active-content-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
+	--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-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));
@@ -925,6 +920,10 @@
 	--semantics-buttons-critical-tinted-is-active-background-color: light-dark(var(--primitives-color-critical-150), var(--primitives-color-critical-250));
 	--semantics-buttons-critical-tinted-is-active-content-color: light-dark(var(--primitives-color-critical-750), var(--primitives-color-critical-800));
 
+	--semantics-buttons-critical-transparent-content-color: light-dark(var(--primitives-color-critical-600), var(--primitives-color-critical-650));
+	--semantics-buttons-critical-transparent-is-hovered-content-color: light-dark(var(--primitives-color-critical-650), var(--primitives-color-critical-700));
+	--semantics-buttons-critical-transparent-is-active-content-color: light-dark(var(--primitives-color-critical-700), var(--primitives-color-critical-750));
+
 	/* ## Input fields */
 
 	--semantics-input-fields-border-thickness: var(--primitives-border-width-regular);
@@ -988,19 +987,7 @@
 
 	/* ## Overlays */
 
-	--semantics-overlays-backdrop-opacity-factor: 1;
-
-	@media (prefers-color-scheme: dark) {
-		&:not([data-scheme="light"]) {
-			--semantics-overlays-backdrop-opacity-factor: 2;
-		}
-	}
-
-	&[data-scheme="dark"] {
-		--semantics-overlays-backdrop-opacity-factor: 2;
-	}
-
-	--semantics-overlays-backdrop-color: rgba(0, 0, 0, calc(0.2 * var(--semantics-overlays-backdrop-opacity-factor)));
+	--semantics-overlays-backdrop-color: light-dark(rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.40));
 	--semantics-overlays-corner-radius: var(--primitives-corner-radius-none);
 	--semantics-overlays-inset: var(--primitives-space-16);
 	--semantics-overlays-box-shadow: var(--primitives-box-shadows-level-5);
@@ -1165,13 +1152,14 @@
 
 	/* ## Menu bar */
 
+	--components-menu-bar-item-font: var(--primitives-font-body-md-bold-flat);
+	--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-current-indicator-background-color: var(--semantics-controls-is-highlighted-indicator-color);
 	--components-menu-bar-item-is-current-indicator-height: var(--primitives-space-4);
-	--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-100), var(--primitives-color-neutral-250));
-	--components-menu-bar-item-font: var(--primitives-font-body-md-bold-flat);
-	--components-menu-bar-item-inline-padding: var(--primitives-space-8);
 
 	/* ## Popover */
 
@@ -1231,6 +1219,47 @@
 	--components-tag-critical-background-color: light-dark(var(--primitives-color-critical-75), var(--primitives-color-critical-150));
 	--components-tag-critical-content-color: var(--primitives-color-critical-750);
 
+	/* ### Tag — rijkskleuren */
+
+	--components-tag-coolgray-background-color: light-dark(var(--primitives-color-coolgray-75), var(--primitives-color-coolgray-150));
+	--components-tag-coolgray-content-color: var(--primitives-color-coolgray-750);
+	--components-tag-lintblauw-background-color: light-dark(var(--primitives-color-lintblauw-75), var(--primitives-color-lintblauw-150));
+	--components-tag-lintblauw-content-color: var(--primitives-color-lintblauw-750);
+	--components-tag-donkerblauw-background-color: light-dark(var(--primitives-color-donkerblauw-75), var(--primitives-color-donkerblauw-150));
+	--components-tag-donkerblauw-content-color: var(--primitives-color-donkerblauw-750);
+	--components-tag-hemelblauw-background-color: light-dark(var(--primitives-color-hemelblauw-75), var(--primitives-color-hemelblauw-150));
+	--components-tag-hemelblauw-content-color: var(--primitives-color-hemelblauw-750);
+	--components-tag-lichtblauw-background-color: light-dark(var(--primitives-color-lichtblauw-75), var(--primitives-color-lichtblauw-150));
+	--components-tag-lichtblauw-content-color: var(--primitives-color-lichtblauw-750);
+	--components-tag-paars-background-color: light-dark(var(--primitives-color-paars-75), var(--primitives-color-paars-150));
+	--components-tag-paars-content-color: var(--primitives-color-paars-750);
+	--components-tag-violet-background-color: light-dark(var(--primitives-color-violet-75), var(--primitives-color-violet-150));
+	--components-tag-violet-content-color: var(--primitives-color-violet-750);
+	--components-tag-robijnrood-background-color: light-dark(var(--primitives-color-robijnrood-75), var(--primitives-color-robijnrood-150));
+	--components-tag-robijnrood-content-color: var(--primitives-color-robijnrood-750);
+	--components-tag-roze-background-color: light-dark(var(--primitives-color-roze-75), var(--primitives-color-roze-150));
+	--components-tag-roze-content-color: var(--primitives-color-roze-750);
+	--components-tag-rood-background-color: light-dark(var(--primitives-color-rood-75), var(--primitives-color-rood-150));
+	--components-tag-rood-content-color: var(--primitives-color-rood-750);
+	--components-tag-oranje-background-color: light-dark(var(--primitives-color-oranje-75), var(--primitives-color-oranje-150));
+	--components-tag-oranje-content-color: var(--primitives-color-oranje-750);
+	--components-tag-donkergeel-background-color: light-dark(var(--primitives-color-donkergeel-75), var(--primitives-color-donkergeel-150));
+	--components-tag-donkergeel-content-color: var(--primitives-color-donkergeel-750);
+	--components-tag-geel-background-color: light-dark(var(--primitives-color-geel-75), var(--primitives-color-geel-150));
+	--components-tag-geel-content-color: var(--primitives-color-geel-750);
+	--components-tag-donkerbruin-background-color: light-dark(var(--primitives-color-donkerbruin-75), var(--primitives-color-donkerbruin-150));
+	--components-tag-donkerbruin-content-color: var(--primitives-color-donkerbruin-750);
+	--components-tag-bruin-background-color: light-dark(var(--primitives-color-bruin-75), var(--primitives-color-bruin-150));
+	--components-tag-bruin-content-color: var(--primitives-color-bruin-750);
+	--components-tag-donkergroen-background-color: light-dark(var(--primitives-color-donkergroen-75), var(--primitives-color-donkergroen-150));
+	--components-tag-donkergroen-content-color: var(--primitives-color-donkergroen-750);
+	--components-tag-groen-background-color: light-dark(var(--primitives-color-groen-75), var(--primitives-color-groen-150));
+	--components-tag-groen-content-color: var(--primitives-color-groen-750);
+	--components-tag-mosgroen-background-color: light-dark(var(--primitives-color-mosgroen-75), var(--primitives-color-mosgroen-150));
+	--components-tag-mosgroen-content-color: var(--primitives-color-mosgroen-750);
+	--components-tag-mintgroen-background-color: light-dark(var(--primitives-color-mintgroen-75), var(--primitives-color-mintgroen-150));
+	--components-tag-mintgroen-content-color: var(--primitives-color-mintgroen-750);
+
 	/* ## Title */
 
 	--components-title-sm-overline-font: var(--primitives-font-body-sm-regular-tight);

package/dist/utilities/visibility-mixin.d.ts

@@ -2,25 +2,31 @@ import { LitElement } from 'lit';
 type Constructor<T = LitElement> = new (...args: any[]) => T;
 /**
  * Adds `hide-below` and `hide-above` attributes that toggle visibility based
- * on the inline-size of the nearest ancestor CSS container.
+ * on the inline-size of an ancestor CSS container.
  *
- * The ancestor (typically the component's direct parent in usage) must declare
- * `container-type: inline-size`. The generated `@container` rule is anonymous
- * — Safari does not reliably resolve named containers across shadow-DOM
- * boundaries when the querying element is slotted.
+ * Without a `containerName` argument the generated rule is an anonymous
+ * `@container (…)` query — it matches the nearest ancestor that declares
+ * `container-type: inline-size`. Pass a name to target a specific container
+ * (e.g. `'list-container'` for cells inside `nldd-list`, which sets that
+ * name inline on its host as a Safari shadow-DOM workaround).
  *
- * Values are CSS lengths (e.g. '320px', '20rem'). Container queries can't read
- * CSS variables in their conditions, so the query rule is generated at runtime
- * and injected as a <style> element in the component's shadow root, wrapped in
- * `:host { @container (…) { display: none !important; } }` (nested form —
- * flattened `@container { :host { … } }` is similarly unreliable in Safari).
+ * Values are CSS lengths (e.g. '320px', '20rem'). Container queries can't
+ * read CSS variables in their conditions, so the query rule is generated at
+ * runtime and injected as a <style> element in the component's shadow root,
+ * wrapped in `:host { @container <name>? (…) { display: none !important; } }`
+ * (nested form — the flattened `@container { :host { … } }` is unreliable in
+ * Safari).
  *
  * @example
  * ```ts
- * class NLDDTextCell extends VisibilityMixin(LitElement) { ... }
+ * // Cell inside nldd-list — target the named list-container
+ * class NLDDTextCell extends VisibilityMixin(LitElement, 'list-container') { … }
+ *
+ * // Other component — fall back to the nearest unnamed container
+ * class SomeComponent extends VisibilityMixin(LitElement) { … }
  * ```
  */
-export declare function VisibilityMixin<TBase extends Constructor<LitElement>>(Base: TBase): TBase & Constructor<LitElement & {
+export declare function VisibilityMixin<TBase extends Constructor<LitElement>>(Base: TBase, containerName?: string): TBase & Constructor<LitElement & {
     hideBelow?: string;
     hideAbove?: string;
 }>;

package/dist/utilities/visibility-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visibility-mixin.d.ts","sourceRoot":"","sources":["../../src/utilities/visibility-mixin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAGtD,KAAK,WAAW,CAAC,CAAC,GAAG,UAAU,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,eAAe,CAAC,KAAK,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,KAAK,GA0C7C,KAAK,GACxC,WAAW,CAAC,UAAU,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CACrE"}
+{"version":3,"file":"visibility-mixin.d.ts","sourceRoot":"","sources":["../../src/utilities/visibility-mixin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAGtD,KAAK,WAAW,CAAC,CAAC,GAAG,UAAU,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,eAAe,CAAC,KAAK,SAAS,WAAW,CAAC,UAAU,CAAC,EACpE,IAAI,EAAE,KAAK,EACX,aAAa,CAAC,EAAE,MAAM,GA4Cc,KAAK,GACxC,WAAW,CAAC,UAAU,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CACrE"}

package/dist/utilities/visibility-mixin.js

@@ -7,25 +7,31 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { property } from 'lit/decorators.js';
 /**
  * Adds `hide-below` and `hide-above` attributes that toggle visibility based
- * on the inline-size of the nearest ancestor CSS container.
+ * on the inline-size of an ancestor CSS container.
  *
- * The ancestor (typically the component's direct parent in usage) must declare
- * `container-type: inline-size`. The generated `@container` rule is anonymous
- * — Safari does not reliably resolve named containers across shadow-DOM
- * boundaries when the querying element is slotted.
+ * Without a `containerName` argument the generated rule is an anonymous
+ * `@container (…)` query — it matches the nearest ancestor that declares
+ * `container-type: inline-size`. Pass a name to target a specific container
+ * (e.g. `'list-container'` for cells inside `nldd-list`, which sets that
+ * name inline on its host as a Safari shadow-DOM workaround).
  *
- * Values are CSS lengths (e.g. '320px', '20rem'). Container queries can't read
- * CSS variables in their conditions, so the query rule is generated at runtime
- * and injected as a <style> element in the component's shadow root, wrapped in
- * `:host { @container (…) { display: none !important; } }` (nested form —
- * flattened `@container { :host { … } }` is similarly unreliable in Safari).
+ * Values are CSS lengths (e.g. '320px', '20rem'). Container queries can't
+ * read CSS variables in their conditions, so the query rule is generated at
+ * runtime and injected as a <style> element in the component's shadow root,
+ * wrapped in `:host { @container <name>? (…) { display: none !important; } }`
+ * (nested form — the flattened `@container { :host { … } }` is unreliable in
+ * Safari).
  *
  * @example
  * ```ts
- * class NLDDTextCell extends VisibilityMixin(LitElement) { ... }
+ * // Cell inside nldd-list — target the named list-container
+ * class NLDDTextCell extends VisibilityMixin(LitElement, 'list-container') { … }
+ *
+ * // Other component — fall back to the nearest unnamed container
+ * class SomeComponent extends VisibilityMixin(LitElement) { … }
  * ```
  */
-export function VisibilityMixin(Base) {
+export function VisibilityMixin(Base, containerName) {
     class WithVisibility extends Base {
         updated(changed) {
             super.updated(changed);
@@ -36,12 +42,13 @@ export function VisibilityMixin(Base) {
         _updateVisibilityStyle() {
             if (!this.shadowRoot)
                 return;
+            const containerPrefix = containerName ? `${containerName} ` : '';
             const rules = [];
             if (this.hideBelow) {
-                rules.push(`:host { @container (max-width: ${this.hideBelow}) { display: none !important; } }`);
+                rules.push(`:host { @container ${containerPrefix}(max-width: ${this.hideBelow}) { display: none !important; } }`);
             }
             if (this.hideAbove) {
-                rules.push(`:host { @container (min-width: ${this.hideAbove}) { display: none !important; } }`);
+                rules.push(`:host { @container ${containerPrefix}(min-width: ${this.hideAbove}) { display: none !important; } }`);
             }
             if (rules.length === 0) {
                 this._visibilityStyle?.remove();

package/dist/utilities/visibility-mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"visibility-mixin.js","sourceRoot":"","sources":["../../src/utilities/visibility-mixin.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAM7C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,eAAe,CAAwC,IAAW;IACjF,MAAM,cAAe,SAAQ,IAAI;QASvB,OAAO,CAAC,OAAuB;YACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACvB,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;gBAC1D,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC/B,CAAC;QACF,CAAC;QAEO,sBAAsB;YAC7B,IAAI,CAAC,IAAI,CAAC,UAAU;gBAAE,OAAO;YAC7B,MAAM,KAAK,GAAa,EAAE,CAAC;YAC3B,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACpB,KAAK,CAAC,IAAI,CACT,kCAAkC,IAAI,CAAC,SAAS,mCAAmC,CACnF,CAAC;YACH,CAAC;YACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACpB,KAAK,CAAC,IAAI,CACT,kCAAkC,IAAI,CAAC,SAAS,mCAAmC,CACnF,CAAC;YACH,CAAC;YACD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACxB,IAAI,CAAC,gBAAgB,EAAE,MAAM,EAAE,CAAC;gBAChC,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC;gBAClC,OAAO;YACR,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC5B,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;gBACxD,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YACpD,CAAC;YACD,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,CAAC;KACD;IAtCA;QADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;qDAChD;IAGnB;QADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;qDAChD;IAoCpB,OAAO,cAC8D,CAAC;AACvE,CAAC;AACD,sDAAsD"}
+{"version":3,"file":"visibility-mixin.js","sourceRoot":"","sources":["../../src/utilities/visibility-mixin.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAM7C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,eAAe,CAC9B,IAAW,EACX,aAAsB;IAEtB,MAAM,cAAe,SAAQ,IAAI;QASvB,OAAO,CAAC,OAAuB;YACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACvB,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;gBAC1D,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC/B,CAAC;QACF,CAAC;QAEO,sBAAsB;YAC7B,IAAI,CAAC,IAAI,CAAC,UAAU;gBAAE,OAAO;YAC7B,MAAM,eAAe,GAAG,aAAa,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;YACjE,MAAM,KAAK,GAAa,EAAE,CAAC;YAC3B,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACpB,KAAK,CAAC,IAAI,CACT,sBAAsB,eAAe,eAAe,IAAI,CAAC,SAAS,mCAAmC,CACrG,CAAC;YACH,CAAC;YACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACpB,KAAK,CAAC,IAAI,CACT,sBAAsB,eAAe,eAAe,IAAI,CAAC,SAAS,mCAAmC,CACrG,CAAC;YACH,CAAC;YACD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACxB,IAAI,CAAC,gBAAgB,EAAE,MAAM,EAAE,CAAC;gBAChC,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC;gBAClC,OAAO;YACR,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC5B,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;gBACxD,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YACpD,CAAC;YACD,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,CAAC;KACD;IAvCA;QADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;qDAChD;IAGnB;QADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;qDAChD;IAqCpB,OAAO,cAC8D,CAAC;AACvE,CAAC;AACD,sDAAsD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.42",
+  "version": "0.8.43",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -355,7 +355,7 @@
   },
   "scripts": {
     "build": "npm run build:styles && npm run validate:styles && npm run build:components",
-    "build:styles": "mkdir -p dist/css dist/fonts && cp src/assets/styles/settings.css dist/css/settings.css && cp src/assets/styles/palettes.generated.css dist/css/palettes.generated.css && cp src/components/content/rich-text/rich-text.css dist/css/rich-text.css && cp src/components/forms/form/form.css dist/css/form.css && cp src/components/forms/form-section/form-section.css dist/css/form-section.css && printf '@import \"./settings.css\";\\n@import \"./rich-text.css\";\\n@import \"./form-section.css\";\\n@import \"./form.css\";\\n' > dist/css/global.css && cp src/assets/fonts/*.woff2 dist/fonts/",
+    "build:styles": "mkdir -p dist/css dist/fonts && cp src/assets/styles/settings.css dist/css/settings.css && cp src/assets/styles/reset.css dist/css/reset.css && cp src/assets/styles/palettes.generated.css dist/css/palettes.generated.css && cp src/components/content/rich-text/rich-text.css dist/css/rich-text.css && cp src/components/forms/form/form.css dist/css/form.css && cp src/components/forms/form-section/form-section.css dist/css/form-section.css && printf '@import \"./settings.css\";\\n@import \"./reset.css\";\\n@import \"./rich-text.css\";\\n@import \"./form-section.css\";\\n@import \"./form.css\";\\n' > dist/css/global.css && cp src/assets/fonts/*.woff2 dist/fonts/",
     "generate:palettes": "node scripts/generate-palettes.js",
     "validate:styles": "node scripts/validate-css-variables.js",
     "build:components": "npm run clean:components && npm run build:icons && npm run build:components:modules && npm run build:components:bundle && npm run build:exports",