@nldd/design-system 0.8.49 → 0.8.51

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

@@ -0,0 +1,402 @@
+import { css } from 'lit';
+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-card-padding-block: var(--primitives-space-12);
+		--_error-card-padding-inline: var(--primitives-space-16);
+		--_error-card-gap: var(--primitives-space-2);
+		--_error-card-corner-radius: var(--primitives-corner-radius-md);
+		--_caption-row-gap: var(--primitives-space-8);
+		--_object-fit: cover;
+		--_object-position: center;
+		--_max-width: 100%;
+
+		box-sizing: border-box;
+		display: block;
+		max-width: var(--_max-width);
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* ## Object-fit variants
+	   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; }
+
+
+	/* ## 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; }
+
+
+	/* ## Shape variants
+	   Rounded is the default (already set via the --_corner-radius in :host
+	   pointing at the design-system token). Square overrides to 0, circle to
+	   50% for avatar-style use (combine with aspect-ratio 1/1 for a true circle). */
+
+	:host([shape="square"]) { --_corner-radius: 0; }
+	:host([shape="circle"]) { --_corner-radius: 50%; }
+
+
+	/* # Figure
+	   Only rendered when caption or credit is present. Acts as the layout
+	   wrapper holding image + figcaption with a small gap. */
+
+	.image__figure {
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		margin: 0;
+		gap: var(--_caption-gap);
+	}
+
+
+	/* # Media wrapper
+	   The box that constrains the image. aspect-ratio is set as an inline style
+	   from the component when provided, so we don't need a CSS var. The
+	   background acts as a placeholder while the image loads. */
+
+	.image__media {
+		display: block;
+		position: relative;
+		overflow: hidden;
+		background-color: var(--_background-color);
+		max-width: 100%;
+		border-radius: var(--_corner-radius);
+	}
+
+
+	/* # Image element
+	   Both the internal img and any slotted img get the same styling so the
+	   wrapper behaves identically in both cases. ::slotted() can't reach
+	   descendants, so a slotted <picture> works for source switching but
+	   consumers must put any extra styling on the inner <img> themselves —
+	   object-fit / object-position aren't inheritable into <picture>'s child
+	   <img>, so we don't bother targeting <picture> here. */
+
+	.image__img,
+	::slotted(img) {
+		display: block;
+		width: 100%;
+		height: 100%;
+		max-width: 100%;
+		object-fit: var(--_object-fit);
+		object-position: var(--_object-position);
+	}
+
+	/* <picture> is a wrapper that picks the right <source>; layout properties
+	   like width/height DO apply to it directly even though object-fit doesn't.
+	   Size it so the slotted picture fills the media wrapper, then let the
+	   consumer style the inner <img> for fit/position. */
+	::slotted(picture) {
+		display: block;
+		width: 100%;
+		height: 100%;
+		max-width: 100%;
+	}
+
+
+	/* # LQIP placeholder
+	   Per-cell Oklab LQIP — extends Lean Rada's CSS-only LQIP technique
+	   (https://leanrada.com/notes/css-only-lqip/) with one quantized
+	   color per cell instead of grayscale-only cells. The component
+	   parses lqip="base,c1,c2,c3,c4,c5,c6" and forwards each byte as an
+	   inline --context-lqip-* variable (crosses the shadow boundary;
+	   hence the --context-* prefix, not --_).
+	   Each byte packs 2 bits L + 3 bits a + 3 bits b — the same format
+	   Lean uses for his single base color, applied 7 times. The base
+	   shows through cell-gradient transparent edges; the six cells carry
+	   the per-zone hue. No blend modes are needed because every cell
+	   already has its own real color — overlap zones blend naturally
+	   through the smooth alpha falloff (stop10/20/30/40).
+	   Browser support: depends on CSS mod() (Chrome 113+, Safari 15.4+,
+	   Firefox 118+, May 2023 baseline), CSS round(down, ...) (Chrome 111+,
+	   Safari 15.4+, Firefox 118+), oklab() (Chrome 111+, Safari 15.4+,
+	   Firefox 113+), and the relative-color syntax rgb(from … r g b / α)
+	   used in the gradient stops (Chrome 119+, Safari 16.4+, Firefox 128+,
+	   mid-2024 baseline). The @supports gate probes all three of the
+	   youngest-per-engine capabilities — without the relative-color probe,
+	   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:
+	   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)
+		);
+		--_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)
+		);
+		--_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)
+		);
+		--_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)
+		);
+		--_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)
+		);
+		--_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)
+		);
+		--_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)
+		);
+
+		--_lqip-stop10: 2%;
+		--_lqip-stop20: 8%;
+		--_lqip-stop30: 18%;
+		--_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%,
+				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%,
+				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%,
+				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%,
+				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%,
+				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%,
+				transparent),
+			linear-gradient(0deg, var(--_lqip-base-clr), var(--_lqip-base-clr));
+	}
+
+	} /* end @supports for LQIP gradient */
+
+	/* Fade-in transitions live OUTSIDE the @supports — they only run when the
+	   --lqip class is present and the engine renders the gradient anyway. */
+
+	.image__media--lqip .image__img {
+		opacity: 0;
+		transition: opacity 300ms ease-out;
+	}
+
+	.image__media--lqip .image__img--loaded {
+		opacity: 1;
+	}
+
+
+	/* # Errored image
+	   Hide the broken <img> entirely so the browser's native fallback rendering
+	   (alt text leaking out + broken-image icon/border) doesn't show through
+	   underneath our own error overlay. display:none also drops the element
+	   from the accessibility tree, so its alt isn't announced alongside the
+	   visible .image__error-text in the overlay (the overlay wrapper itself
+	   carries no role/aria-label — the visible text serves AT users too, so a
+	   duplicate label there would just announce the alt twice). Box dimensions
+	   are preserved by aspect-ratio on .image__media, not by the img itself.
+	   Listeners stay attached — only DOM removal detaches them — so the next
+	   src change still triggers load/error. */
+
+	.image__img--errored {
+		display: none;
+	}
+
+
+	/* # Live region for dynamic load failures
+	   Visually-hidden span sits inside .image__media and announces the
+	   translated "image could not be loaded" message + alt text via
+	   aria-live="polite" when _imageErrored flips mid-session. The element
+	   is always rendered (so AT subscribes from first paint) but the
+	   content only flows in on the error transition, which is what fires
+	   the announcement. Standard visually-hidden recipe. */
+
+	.image__status {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+
+
+	/* # Error state
+	   Centred card with icon + alt-text shown when the image fails to load.
+	   Sits over whatever background --_background-color provides (the LQIP
+	   gradient when present, otherwise the neutral fallback color). The
+	   card has its own neutral background so the icon + label stay legible
+	   against the LQIP behind it. */
+
+	.image__error {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--_error-padding);
+	}
+
+	.image__error-card {
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		max-width: 100%;
+		padding: var(--_error-card-padding-block) var(--_error-card-padding-inline);
+		gap: var(--_error-card-gap);
+		background-color: var(--_background-color);
+		border-radius: var(--_error-card-corner-radius);
+		color: var(--_error-text-color);
+		font: var(--_error-font);
+		text-align: center;
+	}
+
+	.image__error-text {
+		max-width: 100%;
+		overflow-wrap: anywhere;
+	}
+
+
+	/* # Caption */
+
+	.image__caption {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--_caption-row-gap);
+		color: var(--_caption-color);
+		font: var(--_caption-font);
+	}
+
+	.image__credit {
+		color: var(--_credit-color);
+		font: var(--_credit-font);
+	}
+
+
+	/* # Accessibility */
+
+	@media (prefers-reduced-motion: reduce) {
+		.image__media--lqip .image__img {
+			transition: none;
+		}
+	}
+
+	@media (forced-colors: active) {
+		.image__media {
+			border: 1px solid CanvasText;
+		}
+	}
+`;
+//# sourceMappingURL=image.styles.js.map

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

@@ -0,0 +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;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Y7B,CAAC"}

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

@@ -0,0 +1,3 @@
+import type { NLDDImage } from './image.js';
+export declare function imageTemplate(component: NLDDImage): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=image.template.d.ts.map

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

@@ -0,0 +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,wCA8GjD"}

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

@@ -0,0 +1,109 @@
+import { html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
+export function imageTemplate(component) {
+    // aspect-ratio is applied to the media wrapper (not the img) so it
+    // reserves space in the layout *before* the image loads, avoiding CLS.
+    // Slotted img/picture also fills this wrapper.
+    // --context-lqip-base / --context-lqip-c1..c6 carry the seven quantised
+    // Oklab bytes from the parsed lqip attribute across the shadow boundary
+    // into the stylesheet. Each byte decodes back into an oklab() colour at
+    // render time. Uses the --context-* prefix because the inline style and
+    // the consuming CSS live in different scopes.
+    const parsedLqip = component._parsedLqip;
+    const hasLqip = parsedLqip !== null;
+    const mediaStyles = {};
+    if (component._cssAspectRatio)
+        mediaStyles.aspectRatio = component._cssAspectRatio;
+    if (hasLqip) {
+        mediaStyles['--context-lqip-base'] = String(parsedLqip.base);
+        parsedLqip.cells.forEach((cell, i) => {
+            mediaStyles[`--context-lqip-c${i + 1}`] = String(cell);
+        });
+    }
+    const mediaClasses = classMap({
+        'image__media': true,
+        // 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.
+        'image__media--lqip': hasLqip && !component._imageErrored,
+    });
+    const imgClasses = classMap({
+        'image__img': true,
+        'image__img--loaded': component._imageLoaded,
+        'image__img--errored': component._imageErrored,
+    });
+    const fallbackImg = html `
+		<img class=${imgClasses}
+			src=${component.src || nothing}
+			alt=${component.decorative ? '' : component.alt}
+			aria-hidden=${component.decorative ? 'true' : nothing}
+			srcset=${component.srcset || nothing}
+			sizes=${component.sizes || nothing}
+			width=${ifDefined(component._numericWidth)}
+			height=${ifDefined(component.height)}
+			loading=${component.loading}
+			decoding=${component.decoding}
+			fetchpriority=${ifDefined(component.fetchPriority)}
+			@load=${component._onImageLoad}
+			@error=${component._onImageError}
+		>
+	`;
+    // Error overlay: shown when the fallback img fires an error. Sits centred
+    // over the media area on top of the LQIP gradient (or the neutral fallback
+    // background when no LQIP is provided).
+    // A11y: the visible .image__error-text already carries the alt as readable
+    // text for both sighted and screen-reader users, so the wrapper does NOT
+    // repeat it via role="img" + aria-label — that produced a duplicate
+    // announcement ("image: X" followed by "X"). Decorative images skip the
+    // text entirely and aria-hidden the whole overlay so AT users don't get a
+    // spurious failure announcement for an image that conveyed nothing anyway.
+    const errorOverlay = component._imageErrored ? html `
+		<div class="image__error"
+			aria-hidden=${component.decorative ? 'true' : nothing}
+		>
+			<div class="image__error-card">
+				<nldd-icon name="broken-image" size="32" color="secondary-content"></nldd-icon>
+				${component.decorative ? nothing : html `<span class="image__error-text">${component.alt}</span>`}
+			</div>
+		</div>
+	` : nothing;
+    // Visually-hidden live region announces "image failed to load" once the
+    // internal img errors mid-session (gallery swap, lazy reload, etc.). The
+    // element is always rendered (so AT subscribes to it from first paint),
+    // but populated only on error so the announcement fires when the text
+    // flips from empty to non-empty. Decorative images stay silent — they
+    // convey nothing, so a failure isn't worth announcing.
+    // Append the alt only — never the raw src. A CDN URL with a long path
+    // and query string is noise to AT users; when alt is empty (valid in
+    // production, DEV-warned) we announce the plain translated message.
+    const errorBase = component._t('components.image.error-status-message');
+    const errorStatusMessage = component._imageErrored && !component.decorative
+        ? (component.alt ? `${errorBase}: ${component.alt}` : errorBase)
+        : '';
+    const liveRegion = html `<span class="image__status" aria-live="polite">${errorStatusMessage}</span>`;
+    const media = html `
+		<div class=${mediaClasses}
+			style=${styleMap(mediaStyles)}
+		>
+			<slot>${fallbackImg}</slot>
+			${errorOverlay}
+			${liveRegion}
+		</div>
+	`;
+    if (!component._hasCaption) {
+        return media;
+    }
+    return html `
+		<figure class="image__figure">
+			${media}
+			<figcaption class="image__caption">
+				<slot name="caption" @slotchange=${component._onCaptionSlotChange}
+				>${component.caption}</slot>
+				${component.credit ? html `<span class="image__credit">${component.credit}</span>` : nothing}
+			</figcaption>
+		</figure>
+	`;
+}
+//# sourceMappingURL=image.template.js.map

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

@@ -0,0 +1 @@
+{"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/image/lqip-encoder-element.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Storybook UI element wrapping `encodeLqip()` in a file-picker. Kept in a
+ * separate module from the pure encoder so consumers importing just the
+ * functions (e.g. a Node build pipeline) don't accidentally register the
+ * `nldd-lqip-encoder` custom element into their registry.
+ *
+ * Intentionally NOT exported from `src/components/index.ts` — this is a
+ * developer tool, not a design-system component.
+ */
+import { LitElement } from 'lit';
+import './image.js';
+export declare const nlddLqipEncoderTranslations: {
+    'components.lqip-encoder.upload-label': string;
+    'components.lqip-encoder.file-prefix-text': string;
+    'components.lqip-encoder.copy-instruction-text': string;
+    'components.lqip-encoder.preview-heading-text': string;
+    'components.lqip-encoder.preview-lqip-label': string;
+    'components.lqip-encoder.preview-image-label': string;
+};
+export type NLDDLqipEncoderTranslations = typeof nlddLqipEncoderTranslations;
+export declare class NLDDLqipEncoder extends LitElement {
+    translations: Partial<NLDDLqipEncoderTranslations>;
+    private _lqip;
+    private _imageUrl;
+    private _filename;
+    private _aspectRatio;
+    private _error;
+    _t(key: keyof NLDDLqipEncoderTranslations): string;
+    static styles: import("lit").CSSResult;
+    private _handleFileChange;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-lqip-encoder': NLDDLqipEncoder;
+    }
+}
+//# sourceMappingURL=lqip-encoder-element.d.ts.map

package/dist/components/content/image/lqip-encoder-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lqip-encoder-element.d.ts","sourceRoot":"","sources":["../../../../src/components/content/image/lqip-encoder-element.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,YAAY,CAAC;AAMpB,eAAO,MAAM,2BAA2B;;;;;;;CAOvC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,OAAO,2BAA2B,CAAC;AAM7E,qBACa,eAAgB,SAAQ,UAAU;IAE9C,YAAY,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAM;IAE/C,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,YAAY,CAAU;IAC9B,OAAO,CAAC,MAAM,CAAM;IAEtB,EAAE,CAAC,GAAG,EAAE,MAAM,2BAA2B,GAAG,MAAM;IAIzD,OAAgB,MAAM,0BAyFpB;IAEF,OAAO,CAAC,iBAAiB,CA0BvB;IAEO,oBAAoB,IAAI,IAAI;IAK5B,MAAM;CA4Cf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}