@nldd/design-system 0.8.95 → 0.8.97

package/dist/components/content/image/image.styles.js

@@ -9,26 +9,30 @@ export const imageStyles = css `
 	/* # Host */
 
 	:host {
-		--_corner-radius: var(--components-image-corner-radius);
-		--_background-color: var(--components-image-background-color);
-		--_caption-gap: var(--components-image-caption-gap);
-		--_caption-color: var(--components-image-caption-color);
-		--_caption-font: var(--components-image-caption-font);
-		--_credit-color: var(--components-image-credit-color);
-		--_credit-font: var(--components-image-credit-font);
-		--_error-text-color: var(--components-image-error-text-color);
-		--_error-font: var(--components-image-error-font);
-		--_error-padding: var(--primitives-space-8);
-		--_error-gap: var(--primitives-space-2);
-		--_caption-row-gap: var(--primitives-space-8);
-		--_object-fit: cover;
-		--_object-position: center;
-		--_max-width: 100%;
+		--_image-corner-radius: var(--primitives-corner-radius-none);
+		--_image-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-50));
+		--_image-caption-gap: var(--primitives-space-4);
+		--_image-caption-color: var(--semantics-content-color);
+		--_image-caption-font: var(--primitives-font-body-sm-regular-tight);
+		--_image-credit-color: var(--semantics-content-secondary-color);
+		--_image-credit-font: var(--primitives-font-body-sm-regular-tight);
+		--_image-error-text-color: var(--semantics-content-color);
+		--_image-error-font: var(--primitives-font-body-sm-regular-snug);
+		--_image-error-padding: var(--primitives-space-8);
+		--_image-error-gap: var(--primitives-space-2);
+		--_image-caption-row-gap: var(--primitives-space-8);
+		--_image-pending-background-color: var(--semantics-categories-neutral-tinted-background-color);
+		--_image-empty-icon-size: var(--primitives-space-32);
+		--_image-empty-icon-color: light-dark(var(--primitives-color-neutral-450), var(--primitives-color-neutral-550));
+		--_image-object-fit: cover;
+		--_image-object-position: center;
+		--_image-max-width: 100%;
+		--_image-media-height: var(--context-image-height, auto);
 
 		${inheritedTextReset}
 		box-sizing: border-box;
 		display: block;
-		max-width: var(--_max-width);
+		max-width: var(--_image-max-width);
 	}
 
 	:host([hidden]) {
@@ -40,24 +44,24 @@ export const imageStyles = css `
 	   Driven by the reflected attribute so we can also style slotted img/picture
 	   via ::slotted() with the same CSS var. */
 
-	:host([object-fit="contain"]) { --_object-fit: contain; }
-	:host([object-fit="fill"]) { --_object-fit: fill; }
-	:host([object-fit="scale-down"]) { --_object-fit: scale-down; }
-	:host([object-fit="none"]) { --_object-fit: none; }
+	:host([object-fit="contain"]) { --_image-object-fit: contain; }
+	:host([object-fit="fill"]) { --_image-object-fit: fill; }
+	:host([object-fit="scale-down"]) { --_image-object-fit: scale-down; }
+	:host([object-fit="none"]) { --_image-object-fit: none; }
 
 
 	/* ## Object-position variants */
 
-	:host([object-position="top"]) { --_object-position: top; }
-	:host([object-position="bottom"]) { --_object-position: bottom; }
-	:host([object-position="left"]) { --_object-position: left; }
-	:host([object-position="right"]) { --_object-position: right; }
+	:host([object-position="top"]) { --_image-object-position: top; }
+	:host([object-position="bottom"]) { --_image-object-position: bottom; }
+	:host([object-position="left"]) { --_image-object-position: left; }
+	:host([object-position="right"]) { --_image-object-position: right; }
 
 
 	/* ## Shape variants */
 
-	:host([shape="rounded"]) { --_corner-radius: var(--components-image-rounded-corner-radius); }
-	:host([shape="circle"]) { --_corner-radius: 50%; }
+	:host([shape="rounded"]) { --_image-corner-radius: var(--semantics-controls-md-corner-radius); }
+	:host([shape="circle"]) { --_image-corner-radius: 50%; }
 
 
 	/* # Figure
@@ -69,7 +73,7 @@ export const imageStyles = css `
 		display: flex;
 		flex-direction: column;
 		margin: 0;
-		gap: var(--_caption-gap);
+		gap: var(--_image-caption-gap);
 	}
 
 
@@ -84,7 +88,8 @@ export const imageStyles = css `
 		position: relative;
 		overflow: hidden;
 		max-width: 100%;
-		border-radius: var(--_corner-radius);
+		height: var(--_image-media-height);
+		border-radius: var(--_image-corner-radius);
 	}
 
 
@@ -101,8 +106,8 @@ export const imageStyles = css `
 		width: 100%;
 		height: 100%;
 		max-width: 100%;
-		object-fit: var(--_object-fit);
-		object-position: var(--_object-position);
+		object-fit: var(--_image-object-fit);
+		object-position: var(--_image-object-position);
 	}
 
 	::slotted(img) {
@@ -111,8 +116,8 @@ export const imageStyles = css `
 		width: 100% !important;
 		height: 100% !important;
 		max-width: 100% !important;
-		object-fit: var(--_object-fit) !important;
-		object-position: var(--_object-position) !important;
+		object-fit: var(--_image-object-fit) !important;
+		object-position: var(--_image-object-position) !important;
 	}
 
 	/* An inline <svg> is a drawing rather than a file, and it arrives through the
@@ -162,144 +167,144 @@ export const imageStyles = css `
 	   Firefox 113-127 would pass the gate but render transparent/black
 	   stops because rgb(from …) wouldn't parse. Older engines drop the
 	   LQIP gradient entirely and fall through to the neutral
-	   --_background-color set on .image__media. Degraded but harmless:
+	   --_image-background-color set on .image__media. Degraded but harmless:
 	   the placeholder is a "nice to have", not a load-bearing element. */
 
 	@supports (left: mod(1px, 1px)) and (background: oklab(0 0 0)) and (color: rgb(from red r g b)) {
 
 	.image__media--lqip {
-		--_lqip-base-ll: mod(round(down, var(--context-lqip-base) / 64), 4);
-		--_lqip-base-aaa: mod(round(down, var(--context-lqip-base) / 8), 8);
-		--_lqip-base-bbb: mod(var(--context-lqip-base), 8);
-		--_lqip-c1-ll: mod(round(down, var(--context-lqip-c1) / 64), 4);
-		--_lqip-c1-aaa: mod(round(down, var(--context-lqip-c1) / 8), 8);
-		--_lqip-c1-bbb: mod(var(--context-lqip-c1), 8);
-		--_lqip-c2-ll: mod(round(down, var(--context-lqip-c2) / 64), 4);
-		--_lqip-c2-aaa: mod(round(down, var(--context-lqip-c2) / 8), 8);
-		--_lqip-c2-bbb: mod(var(--context-lqip-c2), 8);
-		--_lqip-c3-ll: mod(round(down, var(--context-lqip-c3) / 64), 4);
-		--_lqip-c3-aaa: mod(round(down, var(--context-lqip-c3) / 8), 8);
-		--_lqip-c3-bbb: mod(var(--context-lqip-c3), 8);
-		--_lqip-c4-ll: mod(round(down, var(--context-lqip-c4) / 64), 4);
-		--_lqip-c4-aaa: mod(round(down, var(--context-lqip-c4) / 8), 8);
-		--_lqip-c4-bbb: mod(var(--context-lqip-c4), 8);
-		--_lqip-c5-ll: mod(round(down, var(--context-lqip-c5) / 64), 4);
-		--_lqip-c5-aaa: mod(round(down, var(--context-lqip-c5) / 8), 8);
-		--_lqip-c5-bbb: mod(var(--context-lqip-c5), 8);
-		--_lqip-c6-ll: mod(round(down, var(--context-lqip-c6) / 64), 4);
-		--_lqip-c6-aaa: mod(round(down, var(--context-lqip-c6) / 8), 8);
-		--_lqip-c6-bbb: mod(var(--context-lqip-c6), 8);
-
-		--_lqip-base-clr: oklab(
-			calc(var(--_lqip-base-ll) / 3 * 0.6 + 0.2)
-			calc(var(--_lqip-base-aaa) / 8 * 0.7 - 0.35)
-			calc((var(--_lqip-base-bbb) + 1) / 8 * 0.7 - 0.35)
+		--_image-lqip-base-ll: mod(round(down, var(--context-lqip-base) / 64), 4);
+		--_image-lqip-base-aaa: mod(round(down, var(--context-lqip-base) / 8), 8);
+		--_image-lqip-base-bbb: mod(var(--context-lqip-base), 8);
+		--_image-lqip-c1-ll: mod(round(down, var(--context-lqip-c1) / 64), 4);
+		--_image-lqip-c1-aaa: mod(round(down, var(--context-lqip-c1) / 8), 8);
+		--_image-lqip-c1-bbb: mod(var(--context-lqip-c1), 8);
+		--_image-lqip-c2-ll: mod(round(down, var(--context-lqip-c2) / 64), 4);
+		--_image-lqip-c2-aaa: mod(round(down, var(--context-lqip-c2) / 8), 8);
+		--_image-lqip-c2-bbb: mod(var(--context-lqip-c2), 8);
+		--_image-lqip-c3-ll: mod(round(down, var(--context-lqip-c3) / 64), 4);
+		--_image-lqip-c3-aaa: mod(round(down, var(--context-lqip-c3) / 8), 8);
+		--_image-lqip-c3-bbb: mod(var(--context-lqip-c3), 8);
+		--_image-lqip-c4-ll: mod(round(down, var(--context-lqip-c4) / 64), 4);
+		--_image-lqip-c4-aaa: mod(round(down, var(--context-lqip-c4) / 8), 8);
+		--_image-lqip-c4-bbb: mod(var(--context-lqip-c4), 8);
+		--_image-lqip-c5-ll: mod(round(down, var(--context-lqip-c5) / 64), 4);
+		--_image-lqip-c5-aaa: mod(round(down, var(--context-lqip-c5) / 8), 8);
+		--_image-lqip-c5-bbb: mod(var(--context-lqip-c5), 8);
+		--_image-lqip-c6-ll: mod(round(down, var(--context-lqip-c6) / 64), 4);
+		--_image-lqip-c6-aaa: mod(round(down, var(--context-lqip-c6) / 8), 8);
+		--_image-lqip-c6-bbb: mod(var(--context-lqip-c6), 8);
+
+		--_image-lqip-base-clr: oklab(
+			calc(var(--_image-lqip-base-ll) / 3 * 0.6 + 0.2)
+			calc(var(--_image-lqip-base-aaa) / 8 * 0.7 - 0.35)
+			calc((var(--_image-lqip-base-bbb) + 1) / 8 * 0.7 - 0.35)
 		);
-		--_lqip-c1-clr: oklab(
-			calc(var(--_lqip-c1-ll) / 3 * 0.6 + 0.2)
-			calc(var(--_lqip-c1-aaa) / 8 * 0.7 - 0.35)
-			calc((var(--_lqip-c1-bbb) + 1) / 8 * 0.7 - 0.35)
+		--_image-lqip-c1-clr: oklab(
+			calc(var(--_image-lqip-c1-ll) / 3 * 0.6 + 0.2)
+			calc(var(--_image-lqip-c1-aaa) / 8 * 0.7 - 0.35)
+			calc((var(--_image-lqip-c1-bbb) + 1) / 8 * 0.7 - 0.35)
 		);
-		--_lqip-c2-clr: oklab(
-			calc(var(--_lqip-c2-ll) / 3 * 0.6 + 0.2)
-			calc(var(--_lqip-c2-aaa) / 8 * 0.7 - 0.35)
-			calc((var(--_lqip-c2-bbb) + 1) / 8 * 0.7 - 0.35)
+		--_image-lqip-c2-clr: oklab(
+			calc(var(--_image-lqip-c2-ll) / 3 * 0.6 + 0.2)
+			calc(var(--_image-lqip-c2-aaa) / 8 * 0.7 - 0.35)
+			calc((var(--_image-lqip-c2-bbb) + 1) / 8 * 0.7 - 0.35)
 		);
-		--_lqip-c3-clr: oklab(
-			calc(var(--_lqip-c3-ll) / 3 * 0.6 + 0.2)
-			calc(var(--_lqip-c3-aaa) / 8 * 0.7 - 0.35)
-			calc((var(--_lqip-c3-bbb) + 1) / 8 * 0.7 - 0.35)
+		--_image-lqip-c3-clr: oklab(
+			calc(var(--_image-lqip-c3-ll) / 3 * 0.6 + 0.2)
+			calc(var(--_image-lqip-c3-aaa) / 8 * 0.7 - 0.35)
+			calc((var(--_image-lqip-c3-bbb) + 1) / 8 * 0.7 - 0.35)
 		);
-		--_lqip-c4-clr: oklab(
-			calc(var(--_lqip-c4-ll) / 3 * 0.6 + 0.2)
-			calc(var(--_lqip-c4-aaa) / 8 * 0.7 - 0.35)
-			calc((var(--_lqip-c4-bbb) + 1) / 8 * 0.7 - 0.35)
+		--_image-lqip-c4-clr: oklab(
+			calc(var(--_image-lqip-c4-ll) / 3 * 0.6 + 0.2)
+			calc(var(--_image-lqip-c4-aaa) / 8 * 0.7 - 0.35)
+			calc((var(--_image-lqip-c4-bbb) + 1) / 8 * 0.7 - 0.35)
 		);
-		--_lqip-c5-clr: oklab(
-			calc(var(--_lqip-c5-ll) / 3 * 0.6 + 0.2)
-			calc(var(--_lqip-c5-aaa) / 8 * 0.7 - 0.35)
-			calc((var(--_lqip-c5-bbb) + 1) / 8 * 0.7 - 0.35)
+		--_image-lqip-c5-clr: oklab(
+			calc(var(--_image-lqip-c5-ll) / 3 * 0.6 + 0.2)
+			calc(var(--_image-lqip-c5-aaa) / 8 * 0.7 - 0.35)
+			calc((var(--_image-lqip-c5-bbb) + 1) / 8 * 0.7 - 0.35)
 		);
-		--_lqip-c6-clr: oklab(
-			calc(var(--_lqip-c6-ll) / 3 * 0.6 + 0.2)
-			calc(var(--_lqip-c6-aaa) / 8 * 0.7 - 0.35)
-			calc((var(--_lqip-c6-bbb) + 1) / 8 * 0.7 - 0.35)
+		--_image-lqip-c6-clr: oklab(
+			calc(var(--_image-lqip-c6-ll) / 3 * 0.6 + 0.2)
+			calc(var(--_image-lqip-c6-aaa) / 8 * 0.7 - 0.35)
+			calc((var(--_image-lqip-c6-bbb) + 1) / 8 * 0.7 - 0.35)
 		);
 
-		--_lqip-stop10: 2%;
-		--_lqip-stop20: 8%;
-		--_lqip-stop30: 18%;
-		--_lqip-stop40: 32%;
+		--_image-lqip-stop10: 2%;
+		--_image-lqip-stop20: 8%;
+		--_image-lqip-stop30: 18%;
+		--_image-lqip-stop40: 32%;
 
 		background-color: transparent;
 		background-image:
 			radial-gradient(50% 75% at 16.67% 25%,
-				var(--_lqip-c1-clr),
-				rgb(from var(--_lqip-c1-clr) r g b / calc(100% - var(--_lqip-stop10))) 10%,
-				rgb(from var(--_lqip-c1-clr) r g b / calc(100% - var(--_lqip-stop20))) 20%,
-				rgb(from var(--_lqip-c1-clr) r g b / calc(100% - var(--_lqip-stop30))) 30%,
-				rgb(from var(--_lqip-c1-clr) r g b / calc(100% - var(--_lqip-stop40))) 40%,
-				rgb(from var(--_lqip-c1-clr) r g b / var(--_lqip-stop40)) 60%,
-				rgb(from var(--_lqip-c1-clr) r g b / var(--_lqip-stop30)) 70%,
-				rgb(from var(--_lqip-c1-clr) r g b / var(--_lqip-stop20)) 80%,
-				rgb(from var(--_lqip-c1-clr) r g b / var(--_lqip-stop10)) 90%,
+				var(--_image-lqip-c1-clr),
+				rgb(from var(--_image-lqip-c1-clr) r g b / calc(100% - var(--_image-lqip-stop10))) 10%,
+				rgb(from var(--_image-lqip-c1-clr) r g b / calc(100% - var(--_image-lqip-stop20))) 20%,
+				rgb(from var(--_image-lqip-c1-clr) r g b / calc(100% - var(--_image-lqip-stop30))) 30%,
+				rgb(from var(--_image-lqip-c1-clr) r g b / calc(100% - var(--_image-lqip-stop40))) 40%,
+				rgb(from var(--_image-lqip-c1-clr) r g b / var(--_image-lqip-stop40)) 60%,
+				rgb(from var(--_image-lqip-c1-clr) r g b / var(--_image-lqip-stop30)) 70%,
+				rgb(from var(--_image-lqip-c1-clr) r g b / var(--_image-lqip-stop20)) 80%,
+				rgb(from var(--_image-lqip-c1-clr) r g b / var(--_image-lqip-stop10)) 90%,
 				transparent),
 			radial-gradient(50% 75% at 50% 25%,
-				var(--_lqip-c2-clr),
-				rgb(from var(--_lqip-c2-clr) r g b / calc(100% - var(--_lqip-stop10))) 10%,
-				rgb(from var(--_lqip-c2-clr) r g b / calc(100% - var(--_lqip-stop20))) 20%,
-				rgb(from var(--_lqip-c2-clr) r g b / calc(100% - var(--_lqip-stop30))) 30%,
-				rgb(from var(--_lqip-c2-clr) r g b / calc(100% - var(--_lqip-stop40))) 40%,
-				rgb(from var(--_lqip-c2-clr) r g b / var(--_lqip-stop40)) 60%,
-				rgb(from var(--_lqip-c2-clr) r g b / var(--_lqip-stop30)) 70%,
-				rgb(from var(--_lqip-c2-clr) r g b / var(--_lqip-stop20)) 80%,
-				rgb(from var(--_lqip-c2-clr) r g b / var(--_lqip-stop10)) 90%,
+				var(--_image-lqip-c2-clr),
+				rgb(from var(--_image-lqip-c2-clr) r g b / calc(100% - var(--_image-lqip-stop10))) 10%,
+				rgb(from var(--_image-lqip-c2-clr) r g b / calc(100% - var(--_image-lqip-stop20))) 20%,
+				rgb(from var(--_image-lqip-c2-clr) r g b / calc(100% - var(--_image-lqip-stop30))) 30%,
+				rgb(from var(--_image-lqip-c2-clr) r g b / calc(100% - var(--_image-lqip-stop40))) 40%,
+				rgb(from var(--_image-lqip-c2-clr) r g b / var(--_image-lqip-stop40)) 60%,
+				rgb(from var(--_image-lqip-c2-clr) r g b / var(--_image-lqip-stop30)) 70%,
+				rgb(from var(--_image-lqip-c2-clr) r g b / var(--_image-lqip-stop20)) 80%,
+				rgb(from var(--_image-lqip-c2-clr) r g b / var(--_image-lqip-stop10)) 90%,
 				transparent),
 			radial-gradient(50% 75% at 83.33% 25%,
-				var(--_lqip-c3-clr),
-				rgb(from var(--_lqip-c3-clr) r g b / calc(100% - var(--_lqip-stop10))) 10%,
-				rgb(from var(--_lqip-c3-clr) r g b / calc(100% - var(--_lqip-stop20))) 20%,
-				rgb(from var(--_lqip-c3-clr) r g b / calc(100% - var(--_lqip-stop30))) 30%,
-				rgb(from var(--_lqip-c3-clr) r g b / calc(100% - var(--_lqip-stop40))) 40%,
-				rgb(from var(--_lqip-c3-clr) r g b / var(--_lqip-stop40)) 60%,
-				rgb(from var(--_lqip-c3-clr) r g b / var(--_lqip-stop30)) 70%,
-				rgb(from var(--_lqip-c3-clr) r g b / var(--_lqip-stop20)) 80%,
-				rgb(from var(--_lqip-c3-clr) r g b / var(--_lqip-stop10)) 90%,
+				var(--_image-lqip-c3-clr),
+				rgb(from var(--_image-lqip-c3-clr) r g b / calc(100% - var(--_image-lqip-stop10))) 10%,
+				rgb(from var(--_image-lqip-c3-clr) r g b / calc(100% - var(--_image-lqip-stop20))) 20%,
+				rgb(from var(--_image-lqip-c3-clr) r g b / calc(100% - var(--_image-lqip-stop30))) 30%,
+				rgb(from var(--_image-lqip-c3-clr) r g b / calc(100% - var(--_image-lqip-stop40))) 40%,
+				rgb(from var(--_image-lqip-c3-clr) r g b / var(--_image-lqip-stop40)) 60%,
+				rgb(from var(--_image-lqip-c3-clr) r g b / var(--_image-lqip-stop30)) 70%,
+				rgb(from var(--_image-lqip-c3-clr) r g b / var(--_image-lqip-stop20)) 80%,
+				rgb(from var(--_image-lqip-c3-clr) r g b / var(--_image-lqip-stop10)) 90%,
 				transparent),
 			radial-gradient(50% 75% at 16.67% 75%,
-				var(--_lqip-c4-clr),
-				rgb(from var(--_lqip-c4-clr) r g b / calc(100% - var(--_lqip-stop10))) 10%,
-				rgb(from var(--_lqip-c4-clr) r g b / calc(100% - var(--_lqip-stop20))) 20%,
-				rgb(from var(--_lqip-c4-clr) r g b / calc(100% - var(--_lqip-stop30))) 30%,
-				rgb(from var(--_lqip-c4-clr) r g b / calc(100% - var(--_lqip-stop40))) 40%,
-				rgb(from var(--_lqip-c4-clr) r g b / var(--_lqip-stop40)) 60%,
-				rgb(from var(--_lqip-c4-clr) r g b / var(--_lqip-stop30)) 70%,
-				rgb(from var(--_lqip-c4-clr) r g b / var(--_lqip-stop20)) 80%,
-				rgb(from var(--_lqip-c4-clr) r g b / var(--_lqip-stop10)) 90%,
+				var(--_image-lqip-c4-clr),
+				rgb(from var(--_image-lqip-c4-clr) r g b / calc(100% - var(--_image-lqip-stop10))) 10%,
+				rgb(from var(--_image-lqip-c4-clr) r g b / calc(100% - var(--_image-lqip-stop20))) 20%,
+				rgb(from var(--_image-lqip-c4-clr) r g b / calc(100% - var(--_image-lqip-stop30))) 30%,
+				rgb(from var(--_image-lqip-c4-clr) r g b / calc(100% - var(--_image-lqip-stop40))) 40%,
+				rgb(from var(--_image-lqip-c4-clr) r g b / var(--_image-lqip-stop40)) 60%,
+				rgb(from var(--_image-lqip-c4-clr) r g b / var(--_image-lqip-stop30)) 70%,
+				rgb(from var(--_image-lqip-c4-clr) r g b / var(--_image-lqip-stop20)) 80%,
+				rgb(from var(--_image-lqip-c4-clr) r g b / var(--_image-lqip-stop10)) 90%,
 				transparent),
 			radial-gradient(50% 75% at 50% 75%,
-				var(--_lqip-c5-clr),
-				rgb(from var(--_lqip-c5-clr) r g b / calc(100% - var(--_lqip-stop10))) 10%,
-				rgb(from var(--_lqip-c5-clr) r g b / calc(100% - var(--_lqip-stop20))) 20%,
-				rgb(from var(--_lqip-c5-clr) r g b / calc(100% - var(--_lqip-stop30))) 30%,
-				rgb(from var(--_lqip-c5-clr) r g b / calc(100% - var(--_lqip-stop40))) 40%,
-				rgb(from var(--_lqip-c5-clr) r g b / var(--_lqip-stop40)) 60%,
-				rgb(from var(--_lqip-c5-clr) r g b / var(--_lqip-stop30)) 70%,
-				rgb(from var(--_lqip-c5-clr) r g b / var(--_lqip-stop20)) 80%,
-				rgb(from var(--_lqip-c5-clr) r g b / var(--_lqip-stop10)) 90%,
+				var(--_image-lqip-c5-clr),
+				rgb(from var(--_image-lqip-c5-clr) r g b / calc(100% - var(--_image-lqip-stop10))) 10%,
+				rgb(from var(--_image-lqip-c5-clr) r g b / calc(100% - var(--_image-lqip-stop20))) 20%,
+				rgb(from var(--_image-lqip-c5-clr) r g b / calc(100% - var(--_image-lqip-stop30))) 30%,
+				rgb(from var(--_image-lqip-c5-clr) r g b / calc(100% - var(--_image-lqip-stop40))) 40%,
+				rgb(from var(--_image-lqip-c5-clr) r g b / var(--_image-lqip-stop40)) 60%,
+				rgb(from var(--_image-lqip-c5-clr) r g b / var(--_image-lqip-stop30)) 70%,
+				rgb(from var(--_image-lqip-c5-clr) r g b / var(--_image-lqip-stop20)) 80%,
+				rgb(from var(--_image-lqip-c5-clr) r g b / var(--_image-lqip-stop10)) 90%,
 				transparent),
 			radial-gradient(50% 75% at 83.33% 75%,
-				var(--_lqip-c6-clr),
-				rgb(from var(--_lqip-c6-clr) r g b / calc(100% - var(--_lqip-stop10))) 10%,
-				rgb(from var(--_lqip-c6-clr) r g b / calc(100% - var(--_lqip-stop20))) 20%,
-				rgb(from var(--_lqip-c6-clr) r g b / calc(100% - var(--_lqip-stop30))) 30%,
-				rgb(from var(--_lqip-c6-clr) r g b / calc(100% - var(--_lqip-stop40))) 40%,
-				rgb(from var(--_lqip-c6-clr) r g b / var(--_lqip-stop40)) 60%,
-				rgb(from var(--_lqip-c6-clr) r g b / var(--_lqip-stop30)) 70%,
-				rgb(from var(--_lqip-c6-clr) r g b / var(--_lqip-stop20)) 80%,
-				rgb(from var(--_lqip-c6-clr) r g b / var(--_lqip-stop10)) 90%,
+				var(--_image-lqip-c6-clr),
+				rgb(from var(--_image-lqip-c6-clr) r g b / calc(100% - var(--_image-lqip-stop10))) 10%,
+				rgb(from var(--_image-lqip-c6-clr) r g b / calc(100% - var(--_image-lqip-stop20))) 20%,
+				rgb(from var(--_image-lqip-c6-clr) r g b / calc(100% - var(--_image-lqip-stop30))) 30%,
+				rgb(from var(--_image-lqip-c6-clr) r g b / calc(100% - var(--_image-lqip-stop40))) 40%,
+				rgb(from var(--_image-lqip-c6-clr) r g b / var(--_image-lqip-stop40)) 60%,
+				rgb(from var(--_image-lqip-c6-clr) r g b / var(--_image-lqip-stop30)) 70%,
+				rgb(from var(--_image-lqip-c6-clr) r g b / var(--_image-lqip-stop20)) 80%,
+				rgb(from var(--_image-lqip-c6-clr) r g b / var(--_image-lqip-stop10)) 90%,
 				transparent),
-			linear-gradient(0deg, var(--_lqip-base-clr), var(--_lqip-base-clr));
+			linear-gradient(0deg, var(--_image-lqip-base-clr), var(--_image-lqip-base-clr));
 	}
 
 	} /* end @supports for LQIP gradient */
@@ -352,13 +357,44 @@ export const imageStyles = css `
 	}
 
 
+	/* # Empty and loading */
+
+	.image__media.is-loading {
+		background-color: var(--_image-pending-background-color);
+	}
+
+	.image__media--empty {
+		display: flex;
+		background-color: var(--_image-pending-background-color);
+		width: 100%;
+		height: 100%;
+		aspect-ratio: 16 / 9;
+		align-items: center;
+		justify-content: center;
+	}
+
+	@media (forced-colors: active) {
+		.image__media--empty {
+			outline: 1px solid CanvasText;
+			outline-offset: -1px;
+		}
+	}
+
+	.image__empty-icon {
+		display: block;
+		width: var(--_image-empty-icon-size);
+		height: var(--_image-empty-icon-size);
+		color: var(--_image-empty-icon-color);
+	}
+
+
 	/* # Error state
 	   Centred icon + alt-text shown when the image fails to load. The media is
-	   painted gray (--_background-color) via :host([errored]) so the icon and
+	   painted gray (--_image-background-color) via :host([errored]) so the icon and
 	   label stay legible — no separate card needed. */
 
 	:host([errored]) .image__media {
-		background-color: var(--_background-color);
+		background-color: var(--_image-background-color);
 	}
 
 	.image__error {
@@ -368,10 +404,10 @@ export const imageStyles = css `
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		gap: var(--_error-gap);
-		padding: var(--_error-padding);
-		color: var(--_error-text-color);
-		font: var(--_error-font);
+		gap: var(--_image-error-gap);
+		padding: var(--_image-error-padding);
+		color: var(--_image-error-text-color);
+		font: var(--_image-error-font);
 		text-align: center;
 	}
 
@@ -386,15 +422,15 @@ export const imageStyles = css `
 	.image__caption {
 		display: flex;
 		flex-wrap: wrap;
-		gap: var(--_caption-row-gap);
-		color: var(--_caption-color);
-		font: var(--_caption-font);
+		gap: var(--_image-caption-row-gap);
+		color: var(--_image-caption-color);
+		font: var(--_image-caption-font);
 		text-wrap: pretty;
 	}
 
 	.image__credit {
-		color: var(--_credit-color);
-		font: var(--_credit-font);
+		color: var(--_image-credit-color);
+		font: var(--_image-credit-font);
 	}
 
 

package/dist/components/content/image/image.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.styles.js","sourceRoot":"","sources":["../../../../src/components/content/image/image.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE3F,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;IAyB1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiFlB,YAAY;;;;;;;;;;;;;IAaZ,YAAY;;;;;;;;;;;;IAYZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Rf,CAAC"}
+{"version":3,"file":"image.styles.js","sourceRoot":"","sources":["../../../../src/components/content/image/image.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE3F,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6B1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkFlB,YAAY;;;;;;;;;;;;;IAaZ,YAAY;;;;;;;;;;;;IAYZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Tf,CAAC"}

package/dist/components/content/image/image.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/image/image.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,wBAAgB,aAAa,CAAC,SAAS,EAAE,SAAS,wCA6GjD"}
+{"version":3,"file":"image.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/image/image.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,wBAAgB,aAAa,CAAC,SAAS,EAAE,SAAS,wCAyHjD"}

package/dist/components/content/image/image.template.js

@@ -22,8 +22,16 @@ export function imageTemplate(component) {
             mediaStyles[`--context-lqip-c${i + 1}`] = String(cell);
         });
     }
+    const isEmpty = component._isEmpty;
     const mediaClasses = classMap({
         'image__media': true,
+        // No image at all: a neutral area with an icon, where an image belongs.
+        'image__media--empty': isEmpty,
+        // The built-in img is on its way and there is no LQIP to show meanwhile:
+        // the same neutral area, without the icon, so a fast load does not flash
+        // one. Slotted media is left alone, since its load cannot be observed and
+        // the fill would stay behind a transparent image.
+        'is-loading': !isEmpty && !hasLqip && !component._hasSlottedMedia && !component._imageLoaded && !component._imageErrored,
         // LQIP only renders while the image is in-flight. Once it errors we
         // fall back to the neutral background so the error card sits on a
         // calm surface instead of a distracting gradient.
@@ -82,11 +90,15 @@ export function imageTemplate(component) {
     const liveRegion = html `<span class="image__status"
 		aria-live="polite"
 	>${errorStatusMessage}</span>`;
+    // An empty image conveys nothing, so the whole area is hidden from
+    // assistive technology. The slot stays, so media that arrives later is seen.
     const media = html `
 		<div class=${mediaClasses}
 			style=${styleMap(mediaStyles)}
+			aria-hidden=${isEmpty ? 'true' : nothing}
 		>
-			<slot @slotchange=${component._onMediaSlotChange}>${fallbackImg}</slot>
+			<slot @slotchange=${component._onMediaSlotChange}>${isEmpty ? nothing : fallbackImg}</slot>
+			${isEmpty ? html `<span class="image__empty-icon"><nldd-icon icon="image"></nldd-icon></span>` : nothing}
 			${errorOverlay}
 			${liveRegion}
 		</div>

package/dist/components/content/image/image.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.template.js","sourceRoot":"","sources":["../../../../src/components/content/image/image.template.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"image.template.js","sourceRoot":"","sources":["../../../../src/components/content/image/image.template.ts"],"names":[],"mappings":"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"}

package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,sBAAsB,yBAyIlC,CAAC"}
+{"version":3,"file":"keyboard-shortcut.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,sBAAsB,yBA2IlC,CAAC"}