import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import{type LyraMirrorAnimationName}from'./animation-catalog.js';export{animations,getAnimationNames,getEasingNames,LYRA_ANIMATION_NAMES,LYRA_EASINGS,type LyraAnimationEasingName,type LyraAnimationCatalog,type LyraMirrorAnimationName,}from'./animation-catalog.js'; /** Curated preset catalog for the `name` property. `slide-in-start`/`slide-in-end`/ * `slide-out-start`/`slide-out-end` are resolved separately (see `slidePreset()`) * because they depend on the element's inherited text direction. */ export type LyraAnimationPreset=LyraMirrorAnimationName|'none'|'fade-in'|'fade-out'|'zoom-in'|'zoom-out'|'slide-in-start'|'slide-in-end'|'slide-out-start'|'slide-out-end'|'slide-in-up'|'slide-in-down'|'bounce'|'pulse'|'spin'|'shake'; /** Ties `duration`/`easing` to the shared `--lr-transition-*` tokens instead of * the raw numeric properties. `'custom'` (the default) leaves `duration`/`easing` * fully consumer-controlled. */ export type LyraAnimationTimingPreset='custom'|'fast'|'base'|'ambient';export interface LyraAnimationEventMap{'lr-start':CustomEvent;'lr-finish':CustomEvent;'lr-cancel':CustomEvent;} /** * `` declaratively animates its single slotted child through the * native Web Animations API: a small curated preset catalog (`name`) or fully * custom `keyframes`, explicit WAAPI timing controls, an optional * `playOnVisible` trigger, and a `lr-start`/`lr-finish`/`lr-cancel` event * contract. An initial playing mount creates one animation and emits one start; later target or * timing changes still rebuild, and replay keeps its normal lifecycle. * * `keyframes`, when set, always wins over `name`. The `iterations` default is * `Infinity` (mirrors the upstream Web Awesome/Shoelace animation contract * verbatim) -- a named preset plays forever unless the consumer sets * `iterations="1"`. * * `direction` is the Web Animations API's `PlaybackDirection` * (`'normal' | 'reverse' | 'alternate' | 'alternate-reverse'`) and is entirely * unrelated to text direction. Only the `slide-in-start`/`slide-in-end`/ * `slide-out-start`/`slide-out-end` presets read the inherited text direction * (`effectiveDirection`) to resolve which physical edge "start"/"end" means, * and they do so fresh every time the animation is (re)built -- an animation * already mid-flight is not retroactively re-mirrored if an ancestor `dir` * flips while it plays; the next rebuild picks up the change. * * `respectReducedMotion` (default `true`) caps playback to one iteration and * calls `finish()` immediately instead of playing, whenever the OS/browser * reports `prefers-reduced-motion: reduce` -- the target snaps straight to * its resolved end state, and `lr-start`/`lr-finish` still fire in order * so a consumer sequencing further UI off those events keeps working even * though nothing visibly interpolated. Set `respectReducedMotion="false"` * only for genuine user-triggered feedback (e.g. a drag-confirm snap-back) * where a silent jump would be more confusing than a fast real animation -- * ambient/decorative animation should always leave this at its default. * * `timingPreset` (default `'custom'`) optionally derives `duration`/`easing` * from the shared `--lr-transition-fast`/`-base`/`-ambient` tokens instead * of the raw `duration`/`easing` property values, so an app's global motion * retiming reaches this component's animations too. * * Named presets resolve through the public animation registry as `animation.`. Per-element * overrides win over page defaults; `rtlKeyframes` follows the live inherited text direction and * a `null` override disables interpolation without skipping `lr-start`/`lr-finish`. * * @customElement lr-animation * @slot - The element to animate. A second slotted element is accepted without error but ignored. * @event lr-start - A new animation was created and playback began or restarted. * @event lr-finish - The animation reached its natural end, including the reduced-motion instant-finish path. * @event lr-cancel - The animation was canceled via the public `cancel()` method or external cancellation. * @cssprop [--lr-animation-slide-distance=100%] - Travel distance for the slide-in/slide-out/slide-in-up/slide-in-down presets. * @cssprop [--lr-animation-zoom-scale=0.5] - Starting/ending scale factor for the zoom-in/zoom-out presets. * @cssprop [--lr-animation-bounce-height=25%] - Peak lift height of the bounce preset. * @cssprop [--lr-animation-shake-distance=4%] - Horizontal travel of the shake preset. * @status stable * @since 4.0.0 */ export declare class LyraAnimation extends LyraElement{static styles:import("lit").CSSResultGroup[]; /** Built-in preset or consumer-registered `animation.` key. */ name:string;keyframes:Keyframe[]|undefined;play:boolean;delay:number;direction:PlaybackDirection;duration:number;easing:string;endDelay:number;fill:FillMode;iterations:number;iterationStart:number;playbackRate:number;timingPreset:LyraAnimationTimingPreset;respectReducedMotion:boolean;playOnVisible:boolean;playOnVisibleRepeat:boolean;rootMargin:string;private _threshold; /** Intersection thresholds for `playOnVisible`; arrays are bounded, filtered, and frozen. */ get threshold():number|readonly number[];set threshold(next:number|readonly number[]);root:Element|null;private animation?;private animationTarget?;private hasStarted;private visibilityObserver?;private motionQuery?;private motionQueryListener?;private lastTextDirection?;private get safeDelay();private get safeDuration();private get safeEndDelay(); /** `iterations` normalized to a finite, non-negative real -- *or* `Infinity` verbatim. * `Infinity` is this property's own documented default (an animation that repeats forever, * mirroring the upstream Web Awesome/Shoelace contract) and a legitimate, spec-sanctioned * `EffectTiming.iterations` value, so it must never be coerced away by `finiteRange`'s clamp * (which cannot itself represent "fall back to Infinity" -- its fallback parameter must be * finite). Only a genuinely invalid raw value (`NaN`, negative, `-Infinity`) falls back to `1`. */ private get safeIterations();private get safeIterationStart();private get safePlaybackRate();private get safeDirection();private get safeFill();private get safeTimingPreset();private safeEasing;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;private bindMotionPreference;private unbindMotionPreference;protected updated(changed:PropertyValues):void;private onSlotChange;private currentTarget;private resolveAnimation;private syncVisibilityObserver;private disconnectVisibilityObserver;private destroyAnimation;private createAnimation;private applyPlayState;private onAnimationFinish;private onAnimationCancel;get currentTime():CSSNumberish;set currentTime(value:CSSNumberish); /** Convenience sugar for `this.play = true`. Named `start()`, not `play()`, * because `play` is already a reactive boolean property on this class and a * method cannot share that identifier. */ start():void; /** Convenience sugar for `this.play = false`. */ pause():void; /** Forwards to the underlying `Animation.cancel()`. Fires `lr-cancel`. */ cancel():void; /** Forwards to the underlying `Animation.finish()`. */ finish():void;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-animation':LyraAnimation;}}