@nldd/design-system 0.8.42 → 0.8.44

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 */
 
@@ -836,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);
 
@@ -850,11 +838,11 @@
 	--semantics-controls-lg-corner-radius: var(--primitives-corner-radius-md);
 
 	--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);
 
@@ -870,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));
@@ -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-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);
@@ -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-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));
@@ -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);
@@ -1033,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);
 
@@ -1160,18 +1147,19 @@
 	--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);
 
 	/* ## 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-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);
-	--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 */
 
@@ -1198,6 +1186,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);
@@ -1231,6 +1222,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/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"}

package/dist/utilities/os.js

@@ -0,0 +1,60 @@
+/**
+ * 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).
+ */
+let cached = null;
+let override = null;
+function classify(platform) {
+    const p = platform.toLowerCase();
+    // UACH (navigator.userAgentData.platform) reports 'iOS'; navigator.platform
+    // reports 'iPhone'/'iPad'/'iPod'. Match both so iOS resolves to 'mac'.
+    if (/mac|iphone|ipad|ipod|ios/.test(p))
+        return 'mac';
+    if (/win/.test(p))
+        return 'windows';
+    // Android's platform string contains "Linux" — bail before the linux check.
+    if (/android/.test(p))
+        return 'other';
+    if (/linux|cros/.test(p))
+        return 'linux';
+    return 'other';
+}
+export function detectOS() {
+    if (override !== null)
+        return override;
+    if (cached !== null)
+        return cached;
+    if (typeof navigator === 'undefined') {
+        cached = 'other';
+        return cached;
+    }
+    const nav = navigator;
+    const platform = nav.userAgentData?.platform || nav.platform || '';
+    cached = classify(platform);
+    return cached;
+}
+/**
+ * @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 function _setOSOverride(os) {
+    override = os;
+}
+/** Reset the detection cache. For tests that mock `navigator` between cases. */
+export function _resetOSDetectionCache() {
+    cached = null;
+}
+export function isMac() { return detectOS() === 'mac'; }
+export function isWindows() { return detectOS() === 'windows'; }
+export function isLinux() { return detectOS() === 'linux'; }
+//# sourceMappingURL=os.js.map

package/dist/utilities/os.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"os.js","sourceRoot":"","sources":["../../src/utilities/os.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,IAAI,MAAM,GAAc,IAAI,CAAC;AAC7B,IAAI,QAAQ,GAAc,IAAI,CAAC;AAM/B,SAAS,QAAQ,CAAC,QAAgB;IACjC,MAAM,CAAC,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;IACjC,4EAA4E;IAC5E,uEAAuE;IACvE,IAAI,0BAA0B,CAAC,IAAI,CAAC,CAAC,CAAC;QAAE,OAAO,KAAK,CAAC;IACrD,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QAAE,OAAO,SAAS,CAAC;IACpC,4EAA4E;IAC5E,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;QAAE,OAAO,OAAO,CAAC;IACtC,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;QAAE,OAAO,OAAO,CAAC;IACzC,OAAO,OAAO,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,QAAQ;IACvB,IAAI,QAAQ,KAAK,IAAI;QAAE,OAAO,QAAQ,CAAC;IACvC,IAAI,MAAM,KAAK,IAAI;QAAE,OAAO,MAAM,CAAC;IACnC,IAAI,OAAO,SAAS,KAAK,WAAW,EAAE,CAAC;QACtC,MAAM,GAAG,OAAO,CAAC;QACjB,OAAO,MAAM,CAAC;IACf,CAAC;IACD,MAAM,GAAG,GAAG,SAAgC,CAAC;IAC7C,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAa,EAAE,QAAQ,IAAI,GAAG,CAAC,QAAQ,IAAI,EAAE,CAAC;IACnE,MAAM,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,OAAO,MAAM,CAAC;AACf,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,cAAc,CAAC,EAAa;IAC3C,QAAQ,GAAG,EAAE,CAAC;AACf,CAAC;AAED,gFAAgF;AAChF,MAAM,UAAU,sBAAsB;IACrC,MAAM,GAAG,IAAI,CAAC;AACf,CAAC;AAED,MAAM,UAAU,KAAK,KAAc,OAAO,QAAQ,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC;AACjE,MAAM,UAAU,SAAS,KAAc,OAAO,QAAQ,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC;AACzE,MAAM,UAAU,OAAO,KAAc,OAAO,QAAQ,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC"}

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.44",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -31,10 +31,6 @@
       "types": "./dist/components/actions/toolbar/toolbar.d.ts",
       "default": "./dist/components/actions/toolbar/toolbar.js"
     },
-    "./link": {
-      "types": "./dist/components/actions/link/link.d.ts",
-      "default": "./dist/components/actions/link/link.js"
-    },
     "./icon": {
       "types": "./dist/components/content/icon/icon.d.ts",
       "default": "./dist/components/content/icon/icon.js"
@@ -299,6 +295,10 @@
       "types": "./dist/components/navigation/menu-bar-item/menu-bar-item.d.ts",
       "default": "./dist/components/navigation/menu-bar-item/menu-bar-item.js"
     },
+    "./link": {
+      "types": "./dist/components/navigation/link/link.d.ts",
+      "default": "./dist/components/navigation/link/link.js"
+    },
     "./skip-link": {
       "types": "./dist/components/navigation/skip-link/skip-link.d.ts",
       "default": "./dist/components/navigation/skip-link/skip-link.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",

package/dist/components/actions/link/link.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/link/link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,8BAA8B,CAAC;AAEtC,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;AAElD,qBACa,QAAS,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAc;IAGpC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAGrC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAGvC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAa;IAGpC,IAAI,CAAC,EAAE,IAAI,CAAC;IAGZ,IAAI,SAAM;IAGV,SAAS,SAAM;IAGf,OAAO,SAAM;IAGb,eAAe,SAAM;IAGrB,QAAQ,UAAS;IAEjB,OAAO,CAAC,YAAY;IAOpB,gBAAgB;IAChB,YAAY,IAAI,MAAM;IASb,MAAM;CAKf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}

package/dist/components/actions/link/link.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../../src/components/actions/link/link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,8BAA8B,CAAC;AAK/B,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAIN,SAAI,GAAuB,SAAS,CAAC;QAGrC,WAAM,GAAuB,SAAS,CAAC;QAGvC,QAAG,GAAuB,SAAS,CAAC;QAMpC,SAAI,GAAG,EAAE,CAAC;QAGV,cAAS,GAAG,EAAE,CAAC;QAGf,YAAO,GAAG,EAAE,CAAC;QAGb,oBAAe,GAAG,EAAE,CAAC;QAGrB,aAAQ,GAAG,KAAK,CAAC;IAwBlB,CAAC;IAtBQ,YAAY,CAAC,CAAa;QACjC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACrB,CAAC;IACF,CAAC;IAED,gBAAgB;IAChB,YAAY;QACX,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;QAC5B,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC;QAC1C,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QACzD,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACtB,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QACxB,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC;IAEQ,MAAM;QACd,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE;YAC1B,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;SACzC,CAAC,CAAC;IACJ,CAAC;;AAlDe,eAAM,GAAG,UAAU,AAAb,CAAc;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACL;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACY;AAGvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACS;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAC9B;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CACrC;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;yCACrC;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;iDACrC;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC1B;AA5BL,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAoDpB"}

package/dist/components/actions/link/link.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"link.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/link/link.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAoJtB,CAAC"}