@nldd/design-system 0.8.82 → 0.8.83

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

@@ -9,6 +9,7 @@ export const badgeStyles = css `
 	/* # Host */
 
 	:host {
+		--_custom-color: transparent;
 		--_background-color: var(--semantics-categories-critical-filled-background-color);
 		--_border-color: var(--semantics-categories-critical-filled-highlight-border-color);
 		--_border-width: var(--components-badge-border-width);
@@ -40,6 +41,18 @@ export const badgeStyles = css `
 
 	/* ## Color */
 
+	/* color on the host, for the same reason as custom-color below: the contrast
+	   token reads currentColor, so without this the flip is computed against the
+	   inherited color while the fill comes from the context channel. A row that
+	   sets the channel to white over dark text then paints white on white. */
+	:host([color="inherit"]) {
+		color: var(--context-content-color, currentColor);
+
+		--_background-color: currentColor;
+		--_border-color: transparent;
+		--_content-color: var(--semantics-content-contrast-color);
+	}
+
 	:host([color="accent"]) {
 		--_background-color: var(--semantics-categories-accent-filled-background-color);
 		--_border-color: var(--semantics-categories-accent-filled-highlight-border-color);
@@ -175,6 +188,17 @@ export const badgeStyles = css `
 		--_content-color: var(--semantics-categories-mintgroen-filled-content-color);
 	}
 
+	/* color on the host rather than on the fill: the contrast token reads
+	   currentColor, so the text lands on black or white without a second formula
+	   to keep in step. After every [color] rule, so it wins over one. */
+	:host([custom-color]) {
+		color: var(--_custom-color);
+
+		--_background-color: var(--_custom-color);
+		--_border-color: transparent;
+		--_content-color: var(--semantics-content-contrast-color);
+	}
+
 	:host([hidden]) {
 		display: none;
 	}
@@ -197,7 +221,6 @@ export const badgeStyles = css `
 		gap: var(--_gap);
 		align-items: center;
 		justify-content: center;
-		color: var(--_content-color);
 		font: var(--_font);
 		white-space: nowrap;
 	}
@@ -206,15 +229,15 @@ export const badgeStyles = css `
 		.badge {
 			border: 1px solid CanvasText;
 			background-color: Canvas;
+		}
+
+		.badge__icon,
+		.badge__text {
 			color: CanvasText;
 		}
 	}
 
-	/* Grows out of the badge and fades: it borrows the badge's own shape and
-	   colour, so it works on a dot as well as on a counter. Behind the content
-	   and inert, so it never affects layout or hit area.
-
-	   A growing box-shadow rather than a scale: scaling multiplies, so a wide
+	/* A growing box-shadow rather than a scale: scaling multiplies, so a wide
 	   badge would throw a halo that is far wider than it is tall. A spread adds
 	   the same distance on every side, whatever the badge measures.
 
@@ -279,7 +302,12 @@ export const badgeStyles = css `
 
 	/* # Elements */
 
+	/* The content carries the content color, not .badge itself: the fill is a
+	   custom property that resolves where it is used, and a fill of currentColor
+	   on an element that also sets color would take that color instead of the
+	   one around it. Mirrors nldd-avatar. */
 	.badge__icon {
+		color: var(--_content-color);
 		display: inline-flex;
 		width: var(--_icon-size);
 		height: var(--_icon-size);
@@ -298,6 +326,7 @@ export const badgeStyles = css `
 	}
 
 	.badge__text {
+		color: var(--_content-color);
 		display: inline-block;
 	}
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;IAuB1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqRrB,CAAC"}
+{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;IAwB1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiTrB,CAAC"}

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

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

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

@@ -27,6 +27,13 @@ export const modalDialogStyles = css `
 	/* # Block */
 
 	.modal-dialog {
+		/* Where the app's layout context ends, as in nldd-sheet: the dialog scrolls
+		   itself and starts at its own top edge, so anything inside it stops
+		   following the app's scroll mode and its layer offsets. */
+		--context-scroll-mode: nested;
+		--context-layer-top: 0px;
+		--context-layer-bottom: 0px;
+
 		box-sizing: border-box;
 		outline: none;
 		border: none;

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

@@ -1 +1 @@
-{"version":3,"file":"modal-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;IAahC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;uBAwBC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D3B,CAAC"}
+{"version":3,"file":"modal-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;IAahC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA+BC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D3B,CAAC"}

package/dist/css/variables.css

@@ -859,7 +859,21 @@
 	--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-600), var(--primitives-color-neutral-700));
 	--semantics-content-secondary-opacity: 75%;
-	--semantics-content-contrast-color: oklch(from currentColor calc((0.65 - l) * infinity) 0 h);
+	/* Black or white on the current color, whichever reads. The threshold is the
+	   relative luminance where the two give the same contrast, Y = (sqrt(21) - 1) / 20,
+	   so the one that is picked always clears 4.5:1. Lightness would be the wrong
+	   input: it is perceptual, and it parts ways with luminance per hue. `/ 1` keeps
+	   the text opaque on a translucent fill. Replaced by contrast-color() below
+	   wherever the browser has it. */
+	--semantics-content-contrast-color: color(from currentColor xyz clamp(0, (0.1791 / y - 1) * infinity, 1) clamp(0, (0.1791 / y - 1) * infinity, 1) clamp(0, (0.1791 / y - 1) * infinity, 1) / 1);
+
+	/* The same question asked of the engine, which knows the rendered color
+	   rather than the one a formula can reach. Nested here so both halves of the
+	   answer stand together. */
+	@supports (color: contrast-color(red)) {
+		--semantics-content-contrast-color: contrast-color(currentColor);
+	}
+
 	--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-600), var(--primitives-color-critical-650));
 	--semantics-content-warning-color: light-dark(var(--primitives-color-warning-600), var(--primitives-color-warning-650));
@@ -1806,9 +1820,19 @@
 	--components-list-item-indicator-inline-inset: var(--primitives-space-8);
 	--components-list-item-is-hovered-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
 	--components-list-item-is-hovered-content-color: var(--primitives-color-neutral-1000);
+	--components-list-item-is-active-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
+	--components-list-item-is-active-content-color: var(--primitives-color-neutral-1000);
+	--components-list-item-is-expanded-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
+	--components-list-item-is-expanded-content-color: var(--primitives-color-neutral-1000);
+	--components-list-item-is-expanded-is-hovered-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
+	--components-list-item-is-expanded-is-active-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
 	--components-list-item-is-selected-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
 	--components-list-item-is-selected-content-color: var(--primitives-color-neutral-1000);
+	--components-list-item-is-selected-is-hovered-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
+	--components-list-item-is-selected-is-active-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
 	--components-list-item-is-highlighted-background-color: var(--semantics-controls-is-highlighted-indicator-color);
+	--components-list-item-is-highlighted-is-hovered-background-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
+	--components-list-item-is-highlighted-is-active-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
 	--components-list-item-is-highlighted-content-color: var(--semantics-controls-is-highlighted-contrast-color);
 
 	/* ## Menu */