svelte-kit-vice/src/uix/eidos/components/image/image-error.svelte

<script lang="ts">
	/**
	 * Eidos `<Image.Error>` — rendered when the parent Image reports
	 * `error` status (image failed to load). `role="img"` + a
	 * translated `aria-label` so screen readers know it's a broken
	 * image, not arbitrary chrome.
	 */
	import { ActiveEidos } from '$uix/eidos';
	import { IMAGE_LANGS } from './langs';
	import type { ImageErrorProps } from './types';
	import { getImageEidosContext } from './image-context';

	let {
		'aria-label': ariaLabel,
		children,
		...rest
	}: ImageErrorProps = $props();

	const image = getImageEidosContext();
	const eidos = ActiveEidos.require();
	const resolvedLabel = $derived(ariaLabel ?? eidos.langs.ts(IMAGE_LANGS.ERROR_LABEL));
</script>

{#if image?.status === 'error'}
	<span
		{...rest}
		data-image-error=""
		{...image.fallbackAttrs}
		role="img"
		aria-label={resolvedLabel}
	>
		{@render children?.()}
	</span>
{/if}