import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';export interface LyraAnimatedImageEventMap{'lr-load':CustomEvent<null>;'lr-error':CustomEvent<null>;'lr-play':CustomEvent<null>;'lr-pause':CustomEvent<null>;blur:FocusEvent;focus:FocusEvent;}
/**
* `<lr-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 `<lr-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 and
* reflected). `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 -- `lr-play`/`lr-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 `<lr-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 -- `lr-error` fires and no request is ever
* attempted.
*
* **Alternative text follows native image presence semantics.** An absent or explicitly empty
* `alt` keeps the image and frozen canvas decorative, matching the mirrored components. A
* nonempty value names whichever of those two mutually-exclusive visual owners is exposed. The
* play/pause button remains independently named with localized action text.
*
* Lyra deliberately adds a reduced-motion safety policy and a bounded `--lr-animated-image-max-height`
* default beyond the mirrored components. Set `respect-reduced-motion="false"` when preserving
* upstream playback under a reduced-motion preference is required, and override the max-height
* hook with `none` when the upstream unconstrained block-size is required.
*
* Deliberately no label/hint/error chrome -- this is not a form-associated
* control (nothing resembling a value the user submits).
*
* @customElement lr-animated-image
* @slot play-icon - Decorative custom play glyph shown while frozen/paused. Rendered in an inert,
*   aria-hidden, pointer-transparent sibling layer over the play/pause button.
* @slot pause-icon - Decorative custom pause glyph shown while playing. Rendered through the same
*   inert sibling layer.
* @event lr-load - The live `<img>` finished loading. Fires again on every successful subsequent `src` change.
* @event lr-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 lr-play - The effective `playing` state transitioned `false` -> `true`.
* @event lr-pause - The effective `playing` state transitioned `true` -> `false` (including a reduced-motion change forcing a freeze while `play` stays `true`).
* @event {FocusEvent} blur - Relayed once from the internal play/pause button as a bubbling,
*   composed native event.
* @event {FocusEvent} focus - Relayed once from the internal play/pause button as a bubbling,
*   composed native 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 --lr-animated-image-control-box-size - The size of `control-box`. Defaults to `var(--lr-icon-button-size)`.
* @cssprop --lr-animated-image-icon-size - The size of the play/pause icons. Defaults to `calc(var(--lr-icon-button-size) * 0.35)`.
* @cssprop --control-box-size - Upstream-compatible alias for `--lr-animated-image-control-box-size`.
* @cssprop --icon-size - Upstream-compatible alias for `--lr-animated-image-icon-size`.
* @cssprop --lr-animated-image-max-height - Caps the rendered media's block-size. Defaults to `var(--lr-size-20rem)`.
* @status stable
* @since 4.0.0
*/
export declare class LyraAnimatedImage extends LyraElement<LyraAnimatedImageEventMap>{
/** `playing` is the read-only live playback state this component reflects itself; `play` is
*  the settable request. Authoring `playing` means nothing, so it is not observed. */
protected static readonly knownUnobservedAttributes:readonly string[];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. Absent/empty means decorative. */
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?;
/**
* Each connection starts from state, not from an observable transition. Keep this armed until
* the first connected update commits so a property write made while detached cannot emit merely
* because Lit happened to flush it after reattachment. Updates that do flush while detached also
* leave the guard armed for the reconnect baseline.
*/
private connectionEventBaselinePending;private imageEl?;private canvasEl?;private playButtonEl?;
/** Lit's server renderer constructs the element without a browser-owned document. */
private get ownerWindow();
/** The effective playing state after reduced-motion arbitration -- also
*  reflected as a `playing` host attribute. Read-only; control playback
*  via `play`. */
get playing():boolean;connectedCallback():void;disconnectedCallback():void;private onMotionPreferenceChange;protected willUpdate(changed:PropertyValues):void;protected updated(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;
/** Activate the play/pause control. */
click():void;private onControlFocus;private onControlBlur;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-animated-image':LyraAnimatedImage;}}