@aceshooting/lyra-ui 3.5.0 → 3.6.0

package/dist/components/animated-image/animated-image.class.d.ts

@@ -0,0 +1,131 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface LyraAnimatedImageEventMap {
+    'lyra-load': CustomEvent<undefined>;
+    'lyra-error': CustomEvent<undefined>;
+    'lyra-play': CustomEvent<undefined>;
+    'lyra-pause': CustomEvent<undefined>;
+    blur: CustomEvent<undefined>;
+    focus: CustomEvent<undefined>;
+}
+/**
+ * `<lyra-animated-image>` -- displays an animated GIF/APNG/WebP with a
+ * play/pause control, defaulting to a frozen first frame both at rest and
+ * automatically under `prefers-reduced-motion: reduce` (unless the page
+ * author explicitly opts back in via `respect-reduced-motion="false"`), so
+ * motion is never forced on a user who asked for less of it.
+ *
+ * **Freeze-frame mechanism.** The live `<img>`'s `load` event handler
+ * synchronously draws the just-loaded image to `[part="canvas"]` (a
+ * DPR-aware `drawImage()`, the same pattern `<lyra-heatmap>` uses for its own
+ * canvas sizing) before any animation frames have had a chance to advance.
+ * That captured frame is what pausing always reverts to -- it is not
+ * re-captured on every pause, only once per successful `src` load. Both
+ * `[part="image"]` and `[part="canvas"]` stay mounted at all times (never
+ * `display: none`/removed) so the browser's native decode loop keeps running
+ * even while visually covered by the frozen canvas; only opacity and
+ * `aria-hidden` swap between them, driven by the effective `playing` state.
+ *
+ * **`play` vs. `playing`.** `play` is the caller's intent (settable,
+ * reflects nothing on its own). `playing` is the read-only, reflected effect
+ * after reduced-motion arbitration: `play && !(respectReducedMotion &&
+ * <OS prefers-reduced-motion: reduce>)`. A page can set `.play = true` while
+ * reduced motion still keeps the visual frozen -- `lyra-play`/`lyra-pause`
+ * only fire on a real transition of the resolved `playing` value, never on a
+ * `play` assignment that reduced motion blocks from taking visible effect.
+ *
+ * **Safety.** `src` is re-validated through `safeMediaSrc()` (the same
+ * allowlist `<lyra-media-card>` uses) before it is ever assigned to the real
+ * `<img src>`. An empty `src` renders no `src` attribute and is not an
+ * error; a non-empty `src` that fails the check is treated exactly like a
+ * native image decode failure -- `lyra-error` fires and no request is ever
+ * attempted.
+ *
+ * **Decorative-only is not supported.** An explicit `alt=""` still falls
+ * back to the localized `animatedImageDefaultAlt` string rather than staying
+ * empty/presentational -- the same deliberate tradeoff `<lyra-media-card>`'s
+ * `imgAlt` getter already makes for its own `alt`/`filename` fallback chain.
+ *
+ * Deliberately no label/hint/error chrome -- this is not a form-associated
+ * control (nothing resembling a value the user submits).
+ *
+ * @customElement lyra-animated-image
+ * @slot play-icon - Custom icon shown on `[part="play-button"]` while frozen/paused. Defaults to a play glyph.
+ * @slot pause-icon - Custom icon shown on `[part="play-button"]` while playing. Defaults to a pause glyph.
+ * @event lyra-load - The live `<img>` finished loading. Fires again on every successful subsequent `src` change.
+ * @event lyra-error - The live `<img>` failed to load, or `src` was non-empty but failed the safe-URL check. Never fires for an empty `src`.
+ * @event lyra-play - The effective `playing` state transitioned `false` -> `true`.
+ * @event lyra-pause - The effective `playing` state transitioned `true` -> `false` (including a reduced-motion change forcing a freeze while `play` stays `true`).
+ * @event blur - Re-dispatched from the internal play/pause button as a bubbling, composed event.
+ * @event focus - Re-dispatched from the internal play/pause button as a bubbling, composed event.
+ * @csspart base - Root wrapper; positioning context for `control-box`.
+ * @csspart image - The live `<img>`.
+ * @csspart canvas - The frozen-frame `<canvas>`, shown in place of `image` while not playing.
+ * @csspart control-box - The container that surrounds and backgrounds the play/pause button. Only rendered once loaded and error-free.
+ * @csspart play-button - The `<button type="button">` inside `control-box` that toggles `play`.
+ * @cssprop --lyra-animated-image-control-box-size - The size of `control-box`. Defaults to `var(--lyra-icon-button-size)`.
+ * @cssprop --lyra-animated-image-icon-size - The size of the play/pause icons. Defaults to `calc(var(--lyra-icon-button-size) * 0.35)`.
+ * @cssprop --lyra-animated-image-max-height - Caps the rendered media's block-size. Defaults to `var(--lyra-size-20rem)`.
+ */
+export declare class LyraAnimatedImage extends LyraElement<LyraAnimatedImageEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    /** The path to the image to load. Always re-validated against a
+     *  safe-scheme allowlist before use -- see the class doc. */
+    src: string;
+    /** A description of the image used by assistive devices. Falls back to
+     *  the localized `animatedImageDefaultAlt` when empty -- see the class doc. */
+    alt: string;
+    /** Requests animated playback. Distinct from the read-only `playing`
+     *  effect -- see the class doc's "`play` vs. `playing`" section. */
+    play: boolean;
+    /** When `true` (default) and the platform reports
+     *  `prefers-reduced-motion: reduce`, playback stays frozen and
+     *  `[part="play-button"]` is disabled regardless of `play`. Set to `false`
+     *  to let `play` take effect even under a reduced-motion preference -- a
+     *  deliberate, page-author-level override. */
+    respectReducedMotion: boolean;
+    /** Accessible-name override for `[part="play-button"]`. Maps to the
+     *  host's `aria-label` attribute and, once set, wins verbatim over the
+     *  computed per-state Play/Pause label in both play and pause states --
+     *  it does not itself vary by state. Never touches `[part="image"]`'s
+     *  `alt` / `[part="canvas"]`'s `aria-label`, which stay independently
+     *  sourced from `alt`. A consumer wanting state-sensitive custom wording
+     *  without losing the Play/Pause distinction should override the
+     *  `playWithContext`/`pauseWithContext`/`animatedImageDefaultAlt` strings
+     *  instead. */
+    accessibleLabel: string;
+    private hasLoaded;
+    private hasError;
+    private _playing;
+    private mediaQuery?;
+    private imageEl?;
+    private canvasEl?;
+    private playButtonEl?;
+    /** The effective playing state after reduced-motion arbitration -- also
+     *  reflected as a `playing` host attribute. Read-only; control playback
+     *  via `play`. */
+    get playing(): boolean;
+    set playing(_value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onMotionPreferenceChange;
+    protected willUpdate(changed: PropertyValues): void;
+    private get effectiveAlt();
+    private get toggleLabel();
+    private onImageLoad;
+    private onImageError;
+    private onToggleClick;
+    /** Focus the play/pause control. */
+    focus(options?: FocusOptions): void;
+    /** Blur the play/pause control. */
+    blur(): void;
+    private onControlFocus;
+    private onControlBlur;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-animated-image': LyraAnimatedImage;
+    }
+}
+//# sourceMappingURL=animated-image.class.d.ts.map

package/dist/components/animated-image/animated-image.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-image.class.d.ts","sourceRoot":"","sources":["../../../src/components/animated-image/animated-image.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAM7D,MAAM,WAAW,yBAAyB;IACxC,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACpC,YAAY,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACrC,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACpC,YAAY,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACrC,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,qBAAa,iBAAkB,SAAQ,WAAW,CAAC,yBAAyB,CAAC;IAC3E,MAAM,CAAC,MAAM,iCAAgC;IAE7C;iEAC6D;IACjD,GAAG,SAAM;IAErB;mFAC+E;IACnE,GAAG,SAAM;IAErB;wEACoE;IACvC,IAAI,UAAS;IAE1C;;;;kDAI8C;IACmC,oBAAoB,UAAQ;IAE7G;;;;;;;;mBAQe;IACwB,eAAe,SAAM;IAEnD,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,UAAU,CAAC,CAAiB;IAEX,OAAO,CAAC,OAAO,CAAC,CAAmB;IAClC,OAAO,CAAC,QAAQ,CAAC,CAAoB;IAChC,OAAO,CAAC,YAAY,CAAC,CAAoB;IAExE;;sBAEkB;IAClB,IAAI,OAAO,IAAI,OAAO,CAErB;IAID,IAAI,OAAO,CAAC,MAAM,EAAE,OAAO,EAAI;IAE/B,iBAAiB,IAAI,IAAI,CAKxB;IAED,oBAAoB,IAAI,IAAI,CAI3B;IAED,OAAO,CAAC,wBAAwB,CAI9B;IAEF,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAyBlD;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,WAAW,GAMtB;IAED,OAAO,CAAC,WAAW,CAqBjB;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEF,oCAAoC;IAC3B,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAE3C;IAED,mCAAmC;IAC1B,IAAI,IAAI,IAAI,CAEpB;IAED,OAAO,CAAC,cAAc,CAGpB;IAEF,OAAO,CAAC,aAAa,CAGnB;IAEF,MAAM,IAAI,cAAc,CAmDvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/components/animated-image/animated-image.class.js

@@ -0,0 +1,296 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { playIcon, pauseIcon } from '../../internal/icons.js';
+import { safeMediaSrc } from '../../internal/safe-url.js';
+import { prefersReducedMotion } from '../../internal/motion.js';
+import { styles } from './animated-image.styles.js';
+/**
+ * `<lyra-animated-image>` -- displays an animated GIF/APNG/WebP with a
+ * play/pause control, defaulting to a frozen first frame both at rest and
+ * automatically under `prefers-reduced-motion: reduce` (unless the page
+ * author explicitly opts back in via `respect-reduced-motion="false"`), so
+ * motion is never forced on a user who asked for less of it.
+ *
+ * **Freeze-frame mechanism.** The live `<img>`'s `load` event handler
+ * synchronously draws the just-loaded image to `[part="canvas"]` (a
+ * DPR-aware `drawImage()`, the same pattern `<lyra-heatmap>` uses for its own
+ * canvas sizing) before any animation frames have had a chance to advance.
+ * That captured frame is what pausing always reverts to -- it is not
+ * re-captured on every pause, only once per successful `src` load. Both
+ * `[part="image"]` and `[part="canvas"]` stay mounted at all times (never
+ * `display: none`/removed) so the browser's native decode loop keeps running
+ * even while visually covered by the frozen canvas; only opacity and
+ * `aria-hidden` swap between them, driven by the effective `playing` state.
+ *
+ * **`play` vs. `playing`.** `play` is the caller's intent (settable,
+ * reflects nothing on its own). `playing` is the read-only, reflected effect
+ * after reduced-motion arbitration: `play && !(respectReducedMotion &&
+ * <OS prefers-reduced-motion: reduce>)`. A page can set `.play = true` while
+ * reduced motion still keeps the visual frozen -- `lyra-play`/`lyra-pause`
+ * only fire on a real transition of the resolved `playing` value, never on a
+ * `play` assignment that reduced motion blocks from taking visible effect.
+ *
+ * **Safety.** `src` is re-validated through `safeMediaSrc()` (the same
+ * allowlist `<lyra-media-card>` uses) before it is ever assigned to the real
+ * `<img src>`. An empty `src` renders no `src` attribute and is not an
+ * error; a non-empty `src` that fails the check is treated exactly like a
+ * native image decode failure -- `lyra-error` fires and no request is ever
+ * attempted.
+ *
+ * **Decorative-only is not supported.** An explicit `alt=""` still falls
+ * back to the localized `animatedImageDefaultAlt` string rather than staying
+ * empty/presentational -- the same deliberate tradeoff `<lyra-media-card>`'s
+ * `imgAlt` getter already makes for its own `alt`/`filename` fallback chain.
+ *
+ * Deliberately no label/hint/error chrome -- this is not a form-associated
+ * control (nothing resembling a value the user submits).
+ *
+ * @customElement lyra-animated-image
+ * @slot play-icon - Custom icon shown on `[part="play-button"]` while frozen/paused. Defaults to a play glyph.
+ * @slot pause-icon - Custom icon shown on `[part="play-button"]` while playing. Defaults to a pause glyph.
+ * @event lyra-load - The live `<img>` finished loading. Fires again on every successful subsequent `src` change.
+ * @event lyra-error - The live `<img>` failed to load, or `src` was non-empty but failed the safe-URL check. Never fires for an empty `src`.
+ * @event lyra-play - The effective `playing` state transitioned `false` -> `true`.
+ * @event lyra-pause - The effective `playing` state transitioned `true` -> `false` (including a reduced-motion change forcing a freeze while `play` stays `true`).
+ * @event blur - Re-dispatched from the internal play/pause button as a bubbling, composed event.
+ * @event focus - Re-dispatched from the internal play/pause button as a bubbling, composed event.
+ * @csspart base - Root wrapper; positioning context for `control-box`.
+ * @csspart image - The live `<img>`.
+ * @csspart canvas - The frozen-frame `<canvas>`, shown in place of `image` while not playing.
+ * @csspart control-box - The container that surrounds and backgrounds the play/pause button. Only rendered once loaded and error-free.
+ * @csspart play-button - The `<button type="button">` inside `control-box` that toggles `play`.
+ * @cssprop --lyra-animated-image-control-box-size - The size of `control-box`. Defaults to `var(--lyra-icon-button-size)`.
+ * @cssprop --lyra-animated-image-icon-size - The size of the play/pause icons. Defaults to `calc(var(--lyra-icon-button-size) * 0.35)`.
+ * @cssprop --lyra-animated-image-max-height - Caps the rendered media's block-size. Defaults to `var(--lyra-size-20rem)`.
+ */
+export class LyraAnimatedImage extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The path to the image to load. Always re-validated against a
+         *  safe-scheme allowlist before use -- see the class doc. */
+        this.src = '';
+        /** A description of the image used by assistive devices. Falls back to
+         *  the localized `animatedImageDefaultAlt` when empty -- see the class doc. */
+        this.alt = '';
+        /** Requests animated playback. Distinct from the read-only `playing`
+         *  effect -- see the class doc's "`play` vs. `playing`" section. */
+        this.play = false;
+        /** When `true` (default) and the platform reports
+         *  `prefers-reduced-motion: reduce`, playback stays frozen and
+         *  `[part="play-button"]` is disabled regardless of `play`. Set to `false`
+         *  to let `play` take effect even under a reduced-motion preference -- a
+         *  deliberate, page-author-level override. */
+        this.respectReducedMotion = true;
+        /** Accessible-name override for `[part="play-button"]`. Maps to the
+         *  host's `aria-label` attribute and, once set, wins verbatim over the
+         *  computed per-state Play/Pause label in both play and pause states --
+         *  it does not itself vary by state. Never touches `[part="image"]`'s
+         *  `alt` / `[part="canvas"]`'s `aria-label`, which stay independently
+         *  sourced from `alt`. A consumer wanting state-sensitive custom wording
+         *  without losing the Play/Pause distinction should override the
+         *  `playWithContext`/`pauseWithContext`/`animatedImageDefaultAlt` strings
+         *  instead. */
+        this.accessibleLabel = '';
+        this.hasLoaded = false;
+        this.hasError = false;
+        this._playing = false;
+        this.onMotionPreferenceChange = () => {
+            // Picks up a live OS-level preference change while already connected --
+            // recomputed in willUpdate() below, not read directly off this event.
+            this.requestUpdate();
+        };
+        this.onImageLoad = () => {
+            this.hasError = false;
+            this.hasLoaded = true;
+            const img = this.imageEl;
+            const canvas = this.canvasEl;
+            if (img && canvas) {
+                const width = img.naturalWidth;
+                const height = img.naturalHeight;
+                const dpr = window.devicePixelRatio || 1;
+                // Setting width/height resets any prior transform, so a fresh
+                // ctx.scale() below is always relative to an untransformed canvas --
+                // safe to call again on every subsequent src's own load.
+                canvas.width = width * dpr;
+                canvas.height = height * dpr;
+                const ctx = canvas.getContext('2d');
+                if (ctx) {
+                    ctx.scale(dpr, dpr);
+                    ctx.drawImage(img, 0, 0, width, height);
+                }
+            }
+            this.emit('lyra-load');
+        };
+        this.onImageError = () => {
+            this.hasLoaded = false;
+            this.hasError = true;
+            this.emit('lyra-error');
+        };
+        this.onToggleClick = () => {
+            this.play = !this.play;
+        };
+        this.onControlFocus = (event) => {
+            event.stopPropagation();
+            this.emit('focus');
+        };
+        this.onControlBlur = (event) => {
+            event.stopPropagation();
+            this.emit('blur');
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    /** The effective playing state after reduced-motion arbitration -- also
+     *  reflected as a `playing` host attribute. Read-only; control playback
+     *  via `play`. */
+    get playing() {
+        return this._playing;
+    }
+    // Kept as a no-op setter (rather than omitted) so `el.playing = x` doesn't
+    // throw in this strict-mode class body -- assigning has no defined
+    // effect, per the class doc; control playback via `.play` instead.
+    set playing(_value) { }
+    connectedCallback() {
+        super.connectedCallback();
+        this.mediaQuery =
+            typeof matchMedia === 'function' ? matchMedia('(prefers-reduced-motion: reduce)') : undefined;
+        this.mediaQuery?.addEventListener('change', this.onMotionPreferenceChange);
+    }
+    disconnectedCallback() {
+        this.mediaQuery?.removeEventListener('change', this.onMotionPreferenceChange);
+        this.mediaQuery = undefined;
+        super.disconnectedCallback();
+    }
+    willUpdate(changed) {
+        if (changed.has('src')) {
+            this.hasLoaded = false;
+            this.hasError = false;
+            const trimmed = this.src.trim();
+            // An empty src never asked for anything to load -- not an error. A
+            // non-empty src that fails the safe-URL check never reaches the real
+            // <img src> sink, so its failure has to be reported here instead of
+            // waiting on a native `error` event that will never fire.
+            if (trimmed !== '' && safeMediaSrc(this.src) === null) {
+                this.hasError = true;
+                this.emit('lyra-error');
+            }
+        }
+        const nextPlaying = this.play && !(this.respectReducedMotion && prefersReducedMotion());
+        if (nextPlaying !== this._playing) {
+            this._playing = nextPlaying;
+            this.toggleAttribute('playing', nextPlaying);
+            this.emit(nextPlaying ? 'lyra-play' : 'lyra-pause');
+        }
+        // Private CSS-only hook (see the stylesheet) -- keeps the live <img>
+        // visible while still loading or after a decode failure, independent of
+        // the `playing` attribute above.
+        this.toggleAttribute('data-loaded', this.hasLoaded);
+    }
+    get effectiveAlt() {
+        return this.alt || this.localize('animatedImageDefaultAlt');
+    }
+    get toggleLabel() {
+        if (this.accessibleLabel)
+            return this.accessibleLabel;
+        const name = this.effectiveAlt;
+        return this.playing
+            ? this.localize('pauseWithContext', undefined, { name })
+            : this.localize('playWithContext', undefined, { name });
+    }
+    /** Focus the play/pause control. */
+    focus(options) {
+        this.playButtonEl?.focus(options);
+    }
+    /** Blur the play/pause control. */
+    blur() {
+        this.playButtonEl?.blur();
+    }
+    render() {
+        const src = safeMediaSrc(this.src);
+        const alt = this.effectiveAlt;
+        // The single condition both the stylesheet's [data-loaded]:not([playing])
+        // rule and the aria-hidden bindings below key off of -- kept as one
+        // local so the two never drift out of sync with each other.
+        const frozen = this.hasLoaded && !this.playing;
+        const showControls = this.hasLoaded && !this.hasError;
+        const disabled = this.respectReducedMotion && prefersReducedMotion();
+        return html `
+      <div part="base">
+        <img
+          part="image"
+          src=${src ?? nothing}
+          alt=${alt}
+          aria-hidden=${frozen ? 'true' : nothing}
+          @load=${this.onImageLoad}
+          @error=${this.onImageError}
+        />
+        <canvas
+          part="canvas"
+          role="img"
+          aria-label=${alt}
+          tabindex="-1"
+          aria-hidden=${frozen ? nothing : 'true'}
+        ></canvas>
+        ${showControls
+            ? html `
+              <div part="control-box">
+                <button
+                  part="play-button"
+                  type="button"
+                  aria-label=${this.toggleLabel}
+                  ?disabled=${disabled}
+                  @click=${this.onToggleClick}
+                  @focus=${this.onControlFocus}
+                  @blur=${this.onControlBlur}
+                >
+                  <span class="icon" ?hidden=${this.playing}>
+                    <slot name="play-icon">${playIcon()}</slot>
+                  </span>
+                  <span class="icon" ?hidden=${!this.playing}>
+                    <slot name="pause-icon">${pauseIcon()}</slot>
+                  </span>
+                </button>
+              </div>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraAnimatedImage.prototype, "src", void 0);
+__decorate([
+    property()
+], LyraAnimatedImage.prototype, "alt", void 0);
+__decorate([
+    property({ type: Boolean })
+], LyraAnimatedImage.prototype, "play", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'respect-reduced-motion' })
+], LyraAnimatedImage.prototype, "respectReducedMotion", void 0);
+__decorate([
+    property({ attribute: 'aria-label' })
+], LyraAnimatedImage.prototype, "accessibleLabel", void 0);
+__decorate([
+    state()
+], LyraAnimatedImage.prototype, "hasLoaded", void 0);
+__decorate([
+    state()
+], LyraAnimatedImage.prototype, "hasError", void 0);
+__decorate([
+    query('[part="image"]')
+], LyraAnimatedImage.prototype, "imageEl", void 0);
+__decorate([
+    query('[part="canvas"]')
+], LyraAnimatedImage.prototype, "canvasEl", void 0);
+__decorate([
+    query('[part="play-button"]')
+], LyraAnimatedImage.prototype, "playButtonEl", void 0);
+//# sourceMappingURL=animated-image.class.js.map

package/dist/components/animated-image/animated-image.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-image.class.js","sourceRoot":"","sources":["../../../src/components/animated-image/animated-image.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAA4C,MAAM,KAAK,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAWpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,MAAM,OAAO,iBAAkB,SAAQ,WAAsC;IAA7E;;QAGE;qEAC6D;QACjD,QAAG,GAAG,EAAE,CAAC;QAErB;uFAC+E;QACnE,QAAG,GAAG,EAAE,CAAC;QAErB;4EACoE;QACvC,SAAI,GAAG,KAAK,CAAC;QAE1C;;;;sDAI8C;QACmC,yBAAoB,GAAG,IAAI,CAAC;QAE7G;;;;;;;;uBAQe;QACwB,oBAAe,GAAG,EAAE,CAAC;QAE3C,cAAS,GAAG,KAAK,CAAC;QAClB,aAAQ,GAAG,KAAK,CAAC;QAE1B,aAAQ,GAAG,KAAK,CAAC;QA+BjB,6BAAwB,GAAG,GAAS,EAAE;YAC5C,wEAAwE;YACxE,sEAAsE;YACtE,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CAAC;QAyCM,gBAAW,GAAG,GAAS,EAAE;YAC/B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC;YACzB,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC7B,IAAI,GAAG,IAAI,MAAM,EAAE,CAAC;gBAClB,MAAM,KAAK,GAAG,GAAG,CAAC,YAAY,CAAC;gBAC/B,MAAM,MAAM,GAAG,GAAG,CAAC,aAAa,CAAC;gBACjC,MAAM,GAAG,GAAG,MAAM,CAAC,gBAAgB,IAAI,CAAC,CAAC;gBACzC,8DAA8D;gBAC9D,qEAAqE;gBACrE,yDAAyD;gBACzD,MAAM,CAAC,KAAK,GAAG,KAAK,GAAG,GAAG,CAAC;gBAC3B,MAAM,CAAC,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC;gBAC7B,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;gBACpC,IAAI,GAAG,EAAE,CAAC;oBACR,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;oBACpB,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;gBAC1C,CAAC;YACH,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACzB,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAS,EAAE;YAChC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC1B,CAAC,CAAC;QAEM,kBAAa,GAAG,GAAS,EAAE;YACjC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACzB,CAAC,CAAC;QAYM,mBAAc,GAAG,CAAC,KAAiB,EAAQ,EAAE;YACnD,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACrB,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAiB,EAAQ,EAAE;YAClD,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpB,CAAC,CAAC;IAsDJ,CAAC;aAxNQ,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;IA0C7C;;sBAEkB;IAClB,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IACD,2EAA2E;IAC3E,mEAAmE;IACnE,mEAAmE;IACnE,IAAI,OAAO,CAAC,MAAe,IAAG,CAAC;IAE/B,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,UAAU;YACb,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAChG,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;IAC7E,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,UAAU,EAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;QAC9E,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAC5B,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAQS,UAAU,CAAC,OAAuB;QAC1C,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACvB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;YAChC,mEAAmE;YACnE,qEAAqE;YACrE,oEAAoE;YACpE,0DAA0D;YAC1D,IAAI,OAAO,KAAK,EAAE,IAAI,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;gBACtD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,oBAAoB,IAAI,oBAAoB,EAAE,CAAC,CAAC;QACxF,IAAI,WAAW,KAAK,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;YAC5B,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;YAC7C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;QACtD,CAAC;QACD,qEAAqE;QACrE,wEAAwE;QACxE,iCAAiC;QACjC,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACtD,CAAC;IAED,IAAY,YAAY;QACtB,OAAO,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,yBAAyB,CAAC,CAAC;IAC9D,CAAC;IAED,IAAY,WAAW;QACrB,IAAI,IAAI,CAAC,eAAe;YAAE,OAAO,IAAI,CAAC,eAAe,CAAC;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;QAC/B,OAAO,IAAI,CAAC,OAAO;YACjB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,kBAAkB,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC;YACxD,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5D,CAAC;IAmCD,oCAAoC;IAC3B,KAAK,CAAC,OAAsB;QACnC,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAED,mCAAmC;IAC1B,IAAI;QACX,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC;IAC5B,CAAC;IAYD,MAAM;QACJ,MAAM,GAAG,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACnC,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC;QAC9B,0EAA0E;QAC1E,oEAAoE;QACpE,4DAA4D;QAC5D,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;QAC/C,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACtD,MAAM,QAAQ,GAAG,IAAI,CAAC,oBAAoB,IAAI,oBAAoB,EAAE,CAAC;QAErE,OAAO,IAAI,CAAA;;;;gBAIC,GAAG,IAAI,OAAO;gBACd,GAAG;wBACK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;kBAC/B,IAAI,CAAC,WAAW;mBACf,IAAI,CAAC,YAAY;;;;;uBAKb,GAAG;;wBAEF,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;UAEvC,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA;;;;;+BAKe,IAAI,CAAC,WAAW;8BACjB,QAAQ;2BACX,IAAI,CAAC,aAAa;2BAClB,IAAI,CAAC,cAAc;0BACpB,IAAI,CAAC,aAAa;;+CAEG,IAAI,CAAC,OAAO;6CACd,QAAQ,EAAE;;+CAER,CAAC,IAAI,CAAC,OAAO;8CACd,SAAS,EAAE;;;;aAI5C;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;CACF;AApNa;IAAX,QAAQ,EAAE;8CAAU;AAIT;IAAX,QAAQ,EAAE;8CAAU;AAIQ;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAc;AAOuC;IAAhF,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;+DAA6B;AAWtE;IAAtC,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;0DAAsB;AAE3C;IAAhB,KAAK,EAAE;oDAA2B;AAClB;IAAhB,KAAK,EAAE;mDAA0B;AAKD;IAAhC,KAAK,CAAC,gBAAgB,CAAC;kDAAoC;AAC1B;IAAjC,KAAK,CAAC,iBAAiB,CAAC;mDAAsC;AACxB;IAAtC,KAAK,CAAC,sBAAsB,CAAC;uDAA0C"}

package/dist/components/animated-image/animated-image.d.ts

@@ -0,0 +1,2 @@
+export * from './animated-image.class.js';
+//# sourceMappingURL=animated-image.d.ts.map

package/dist/components/animated-image/animated-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-image.d.ts","sourceRoot":"","sources":["../../../src/components/animated-image/animated-image.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}

package/dist/components/animated-image/animated-image.js

@@ -0,0 +1,5 @@
+export * from './animated-image.class.js';
+import { LyraAnimatedImage } from './animated-image.class.js';
+import { defineElement } from '../../internal/prefix.js';
+defineElement('animated-image', LyraAnimatedImage);
+//# sourceMappingURL=animated-image.js.map

package/dist/components/animated-image/animated-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-image.js","sourceRoot":"","sources":["../../../src/components/animated-image/animated-image.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC"}

package/dist/components/animated-image/animated-image.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=animated-image.styles.d.ts.map

package/dist/components/animated-image/animated-image.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-image.styles.d.ts","sourceRoot":"","sources":["../../../src/components/animated-image/animated-image.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkHlB,CAAC"}

package/dist/components/animated-image/animated-image.styles.js

@@ -0,0 +1,117 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-block;
+    max-inline-size: 100%;
+    /* Mirrors wa-animated-image/sl-animated-image's --control-box-size and
+       --icon-size (component-prefixed per this library's own convention) --
+       both chain through the existing icon-button-size token rather than a
+       new bespoke literal, so the toggle reads at the same scale as
+       lyra-playback's own play/pause button. */
+    --lyra-animated-image-control-box-size: var(--lyra-icon-button-size);
+    --lyra-animated-image-icon-size: calc(var(--lyra-icon-button-size) * 0.35);
+    /* Same purpose/default as --lyra-media-card-max-height -- caps the
+       rendered media's block-size so one oversized animated image can't blow
+       out a layout. */
+    --lyra-animated-image-max-height: var(--lyra-size-20rem);
+  }
+
+  [part='base'] {
+    position: relative;
+    display: grid;
+    max-inline-size: 100%;
+  }
+
+  /* image/canvas overlap in the same grid cell so the crossfade below is a
+     pure opacity swap with no layout shift. */
+  [part='image'],
+  [part='canvas'] {
+    grid-area: 1 / 1;
+    inline-size: 100%;
+    block-size: 100%;
+    max-block-size: var(--lyra-animated-image-max-height);
+    object-fit: contain;
+  }
+
+  [part='image'] {
+    opacity: 1;
+    transition: opacity var(--lyra-transition-fast);
+  }
+  [part='canvas'] {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--lyra-transition-fast);
+  }
+  /* [data-loaded] is a private, JS-driven hook (not part of the public
+     contract -- same pattern as this library's existing [data-invalid]
+     hooks) that keeps the live <img> visible while still loading or after a
+     decode failure, so the browser's own loading/broken-image affordance is
+     never hidden behind an undrawn canvas. Only once a frame has actually
+     been captured does the reflected [playing] host attribute get to decide
+     which of the two is shown. */
+  :host([data-loaded]:not([playing])) [part='image'] {
+    opacity: 0;
+    pointer-events: none;
+  }
+  :host([data-loaded]:not([playing])) [part='canvas'] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  [part='control-box'] {
+    position: absolute;
+    inset-block-start: var(--lyra-space-s);
+    inset-inline-end: var(--lyra-space-s);
+    inline-size: var(--lyra-animated-image-control-box-size);
+    block-size: var(--lyra-animated-image-control-box-size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--lyra-color-surface) 78%, transparent);
+  }
+
+  [part='play-button'] {
+    inline-size: 100%;
+    block-size: 100%;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--lyra-color-text);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--lyra-animated-image-icon-size);
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--lyra-transition-fast);
+  }
+  [part='play-button']:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--lyra-color-surface) 100%, transparent);
+  }
+  [part='play-button']:disabled {
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
+  [part='play-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='play-button'] svg {
+    display: block;
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  /* Both play-icon/pause-icon slots render persistently (see the class doc)
+     and are toggled via the native hidden attribute; a plain .icon display
+     rule at equal specificity is not guaranteed to lose to the UA [hidden]
+     rule, so the override is pinned explicitly here. */
+  .icon[hidden] {
+    display: none;
+  }
+`;
+//# sourceMappingURL=animated-image.styles.js.map

package/dist/components/animated-image/animated-image.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-image.styles.js","sourceRoot":"","sources":["../../../src/components/animated-image/animated-image.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHxB,CAAC"}