@nldd/design-system 0.8.55 → 0.8.57

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

@@ -16,10 +16,7 @@ export const imageStyles = css `
 		--_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);
+		--_error-gap: var(--primitives-space-2);
 		--_caption-row-gap: var(--primitives-space-8);
 		--_object-fit: cover;
 		--_object-position: center;
@@ -55,11 +52,12 @@ export const imageStyles = css `
 
 
 	/* ## 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). */
+	   The :host base --_corner-radius is the design-system rounded token, used by
+	   shape="rounded". The default shape is "square" (set on the property), which
+	   overrides to 0; circle overrides to 50% for avatar-style use (combine with
+	   aspect-ratio 1/1 for a true circle). */
 
-	:host([shape="square"]) { --_corner-radius: 0; }
+	:host([shape="square"]) { --_corner-radius: var(--primitives-corner-radius-none); }
 	:host([shape="circle"]) { --_corner-radius: 50%; }
 
 
@@ -78,14 +76,14 @@ export const imageStyles = css `
 
 	/* # 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. */
+	   from the component when provided, so we don't need a CSS var. The media is
+	   transparent by default; an LQIP paints it while loading, and the error
+	   state paints it grey (see "Error state" below). */
 
 	.image__media {
 		display: block;
 		position: relative;
 		overflow: hidden;
-		background-color: var(--_background-color);
 		max-width: 100%;
 		border-radius: var(--_corner-radius);
 	}
@@ -304,7 +302,7 @@ export const imageStyles = css `
 		transition: opacity 300ms ease-out;
 	}
 
-	.image__media--lqip .image__img--loaded {
+	:host([loaded]) .image__media--lqip .image__img {
 		opacity: 1;
 	}
 
@@ -321,7 +319,7 @@ export const imageStyles = css `
 	   Listeners stay attached — only DOM removal detaches them — so the next
 	   src change still triggers load/error. */
 
-	.image__img--errored {
+	:host([errored]) .image__img {
 		display: none;
 	}
 
@@ -345,31 +343,23 @@ export const imageStyles = css `
 
 
 	/* # 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. */
+	   Centred icon + alt-text shown when the image fails to load. The media is
+	   painted grey (--_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);
+	}
 
 	.image__error {
 		position: absolute;
 		inset: 0;
 		display: flex;
+		flex-direction: column;
 		align-items: center;
 		justify-content: center;
+		gap: var(--_error-gap);
 		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;
@@ -389,6 +379,7 @@ export const imageStyles = css `
 		gap: var(--_caption-row-gap);
 		color: var(--_caption-color);
 		font: var(--_caption-font);
+		text-wrap: pretty;
 	}
 
 	.image__credit {

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoFlB,YAAY;;;;;;;;;;;;;;IAcZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Rf,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;;;;;;;;;;;;;;;;;;;;;;IAsB1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqFlB,YAAY;;;;;;;;;;;;;;IAcZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwRf,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,wCA8GjD"}
+{"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,wCAsGjD"}

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

@@ -29,13 +29,8 @@ export function imageTemplate(component) {
         // 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}
+		<img class="image__img"
 			src=${component.src || nothing}
 			alt=${component.decorative ? '' : component.alt}
 			aria-hidden=${component.decorative ? 'true' : nothing}
@@ -63,10 +58,8 @@ export function imageTemplate(component) {
 		<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>
+			<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>
 	` : nothing;
     // Visually-hidden live region announces "image failed to load" once the
@@ -78,7 +71,7 @@ export function imageTemplate(component) {
     // 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 errorBase = component._t('components.image.error-text');
     const errorStatusMessage = component._imageErrored && !component.decorative
         ? (component.alt ? `${errorBase}: ${component.alt}` : errorBase)
         : '';

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/image/lqip-encoder-element.js

@@ -144,7 +144,7 @@ NLDDLqipEncoder.styles = css `
 			padding: var(--primitives-space-8) var(--primitives-space-16);
 			border-radius: var(--primitives-corner-radius-md);
 			background-color: var(--semantics-buttons-accent-filled-background-color);
-			color: var(--semantics-buttons-accent-filled-content-color);
+			color: var(--semantics-buttons-accent-filled-primary-content-color);
 			cursor: pointer;
 			font: var(--primitives-font-body-md-regular-snug);
 		}