Add x-image web component

[avanelsas]

Summary

• Adds x-image, a stateless image component that wraps a native <img> in open shadow DOM with a skeleton shimmer placeholder, fade-in on load, optional aspect-ratio box (ratio="16:9" etc.) to prevent CLS, a default or slotted error fallback, and an enforced alt hygiene warning.
• Public API: attributes src, alt, decorative, ratio, fit, position, loading; properties mirror attributes plus read-only naturalWidth / naturalHeight / state; events x-image-load and x-image-error (both bubbles + composed, non-cancelable).
• Ships with 18 model unit tests, 21 browser integration tests, full docs, and a demo with a live editor + a11y state readout.

Test plan

• npx shadow-cljs watch test → http://localhost:8021 — all baredom.components.x-image.* deftests green.
• npx shadow-cljs watch app → http://localhost:8000 — walk the demo: ratio variants reserve space (no CLS), fit variants render as expected, decorative toggle flips the a11y readout, default 404 fallback renders, slotted <div slot="error"> fallback renders, event log shows x-image-load / x-image-error with detail payloads.
• Chrome devtools mobile: 320 px width, no horizontal overflow; prefers-reduced-motion: reduce → shimmer static, fade-in instant; prefers-color-scheme: dark → surface background adapts.
• npm run build — clean Closure Advanced release, 0 warnings, dist/x-image.js emitted.

🤖 Generated with Claude Code