@breadstone/mosaik-elements-foundation 0.0.224 → 0.0.227

package/Animations/AnimationPlayer.d.ts

@@ -1,19 +1,70 @@
-import type { IAnimationReferenceMetadata } from './Types';
+import type { IAnimationReferenceMetadata } from './IAnimationReferenceMetadata';
 /**
+ * The `AnimationPlayer` class provides functionality to play and manage animations on HTML elements.
+ *
  * @public
  */
 export declare class AnimationPlayer {
-    private readonly _target;
-    constructor(target: HTMLElement);
     /**
-     * Returns the `target` property.
+     * Constructs a new instance of the `AnimationPlayer` class.
      *
      * @public
-     * @readonly
      */
-    get target(): HTMLElement;
-    play(metadata: IAnimationReferenceMetadata): Promise<AnimationPlaybackEvent>;
-    stopAll(): Promise<unknown>;
+    constructor();
+    /**
+     * Plays an animation on the specified element.
+     *
+     * @param element - The element to animate.
+     * @param animation - The animation reference metadata containing keyframes and options.
+     * @param overrideOptions - Optional override options for the animation.
+     * @returns A promise that resolves when the animation completes.
+     * @public
+     */
+    play(element: HTMLElement, animation: IAnimationReferenceMetadata, overrideOptions?: KeyframeAnimationOptions): Promise<AnimationPlaybackEvent>;
+    /**
+     * Stops all running animations on the specified element.
+     *
+     * @param element - The element to stop animations on.
+     * @returns A promise that resolves when all animations are stopped.
+     * @public
+     */
+    stopAll(element: HTMLElement): Promise<unknown>;
+    /**
+     * Parses keyframes and resolves special values like `height: 'auto'`.
+     *
+     * @param element - The element being animated.
+     * @param keyframes - The keyframes to parse.
+     * @returns The parsed keyframes with resolved values.
+     * @private
+     */
     private parseKeyframes;
+    /**
+     * Plays an animation from the current element state to the final keyframe.
+     * This is useful when initial styles have been applied and you want to animate
+     * from those styles to the final state.
+     *
+     * @param element - The element to animate.
+     * @param animation - The animation reference metadata containing keyframes and options.
+     * @param overrideOptions - Optional override options for the animation.
+     * @returns A promise that resolves when the animation completes.
+     * @public
+     */
+    playToFinal(element: HTMLElement, animation: IAnimationReferenceMetadata, overrideOptions?: KeyframeAnimationOptions): Promise<AnimationPlaybackEvent>;
+    /**
+     * Applies the final keyframe values to the element's style.
+     *
+     * @param element - The element to apply styles to.
+     * @param keyframes - The keyframes array.
+     * @private
+     */
+    private applyKeyframes;
+    /**
+     * Applies styles from a PropertyIndexedKeyframes object to the element.
+     *
+     * @param element - The element to apply styles to.
+     * @param props - The property values to apply.
+     * @private
+     */
+    private applyStyles;
 }
 //# sourceMappingURL=AnimationPlayer.d.ts.map

package/Animations/AnimationPlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimationPlayer.d.ts","sourceRoot":"","sources":["../../src/Animations/AnimationPlayer.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAI3D;;GAEG;AACH,qBAAa,eAAe;IAIxB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAc;gBAMnB,MAAM,EAAE,WAAW;IAQtC;;;;;OAKG;IACH,IAAW,MAAM,IAAI,WAAW,CAE/B;IAIY,IAAI,CAAC,QAAQ,EAAE,2BAA2B,GAAG,OAAO,CAAC,sBAAsB,CAAC;IAqBlF,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC;IAiBlC,OAAO,CAAC,cAAc;CAgBzB"}
+{"version":3,"file":"AnimationPlayer.d.ts","sourceRoot":"","sources":["../../src/Animations/AnimationPlayer.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAIjF;;;;GAIG;AACH,qBAAa,eAAe;IAIxB;;;;OAIG;;IAQH;;;;;;;;OAQG;IACI,IAAI,CACP,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,2BAA2B,EACtC,eAAe,CAAC,EAAE,wBAAwB,GAC3C,OAAO,CAAC,sBAAsB,CAAC;IAgClC;;;;;;OAMG;IACI,OAAO,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;IAatD;;;;;;;OAOG;IACH,OAAO,CAAC,cAAc;IAgBtB;;;;;;;;;;OAUG;IACI,WAAW,CACd,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,2BAA2B,EACtC,eAAe,CAAC,EAAE,wBAAwB,GAC3C,OAAO,CAAC,sBAAsB,CAAC;IAgDlC;;;;;;OAMG;IACH,OAAO,CAAC,cAAc;IAgBtB;;;;;;OAMG;IACH,OAAO,CAAC,WAAW;CAUtB"}

package/Animations/AnimationPlayer.js

@@ -1,69 +1,174 @@
 // #region Imports
+import { RendererServiceLocator } from '../Dom/Renderer';
 // #endregion
 /**
+ * The `AnimationPlayer` class provides functionality to play and manage animations on HTML elements.
+ *
  * @public
  */
 export class AnimationPlayer {
-    // #region Fields
-    _target;
-    // #endregion
     // #region Ctor
-    constructor(target) {
-        this._target = target;
-    }
-    // #endregion
-    // #region Properties
     /**
-     * Returns the `target` property.
+     * Constructs a new instance of the `AnimationPlayer` class.
      *
      * @public
-     * @readonly
      */
-    get target() {
-        return this._target;
+    constructor() {
     }
     // #endregion
-    async play(metadata) {
+    // #region Methods
+    /**
+     * Plays an animation on the specified element.
+     *
+     * @param element - The element to animate.
+     * @param animation - The animation reference metadata containing keyframes and options.
+     * @param overrideOptions - Optional override options for the animation.
+     * @returns A promise that resolves when the animation completes.
+     * @public
+     */
+    play(element, animation, overrideOptions) {
         return new Promise((resolve) => {
-            if (metadata.options?.duration === Infinity) {
-                throw new Error('Promise-based animations must be finite.');
-            }
-            const parsedKeyframes = this.parseKeyframes(metadata.steps);
+            const parsedKeyframes = this.parseKeyframes(element, animation.steps);
             const options = {
-                ...metadata.options,
-                duration: window.matchMedia('(prefers-reduced-motion: reduce)').matches
-                    ? 0
-                    : metadata.options?.duration
+                duration: 333,
+                easing: 'ease',
+                fill: 'forwards',
+                ...animation.options,
+                ...overrideOptions
             };
-            const animation = this._target.animate(parsedKeyframes, options);
-            animation.addEventListener('cancel', resolve, { once: true });
-            animation.addEventListener('finish', resolve, { once: true });
+            // Respect prefers-reduced-motion
+            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+                options.duration = 0;
+            }
+            const anim = element.animate(parsedKeyframes, options);
+            anim.addEventListener('cancel', (event) => {
+                resolve(event);
+            }, { once: true });
+            anim.addEventListener('finish', (event) => {
+                this.applyKeyframes(element, parsedKeyframes);
+                resolve(event);
+            }, { once: true });
+            anim.play();
         });
     }
-    stopAll() {
-        return Promise.all(this._target.getAnimations().map((animation) => new Promise((resolve) => {
+    /**
+     * Stops all running animations on the specified element.
+     *
+     * @param element - The element to stop animations on.
+     * @returns A promise that resolves when all animations are stopped.
+     * @public
+     */
+    stopAll(element) {
+        return Promise.all(element.getAnimations().map((animation) => new Promise((resolve) => {
             const handleAnimationEvent = () => requestAnimationFrame(resolve);
-            animation.addEventListener('cancel', handleAnimationEvent, {
-                once: true
-            });
-            animation.addEventListener('finish', handleAnimationEvent, {
-                once: true
-            });
+            animation.addEventListener('cancel', handleAnimationEvent, { once: true });
+            animation.addEventListener('finish', handleAnimationEvent, { once: true });
             animation.cancel();
         })));
     }
-    parseKeyframes(keyframes) {
+    /**
+     * Parses keyframes and resolves special values like `height: 'auto'`.
+     *
+     * @param element - The element being animated.
+     * @param keyframes - The keyframes to parse.
+     * @returns The parsed keyframes with resolved values.
+     * @private
+     */
+    parseKeyframes(element, keyframes) {
         return keyframes.map((keyframe) => {
-            if (!keyframe.height) {
-                return keyframe;
+            const parsed = { ...keyframe };
+            if (parsed.height === 'auto') {
+                parsed.height = `${element.scrollHeight}px`;
+            }
+            if (parsed.width === 'auto') {
+                parsed.width = `${element.scrollWidth}px`;
             }
-            return {
-                ...keyframe,
-                height: keyframe.height === 'auto'
-                    ? `${this._target.scrollHeight}px`
-                    : keyframe.height
+            return parsed;
+        });
+    }
+    /**
+     * Plays an animation from the current element state to the final keyframe.
+     * This is useful when initial styles have been applied and you want to animate
+     * from those styles to the final state.
+     *
+     * @param element - The element to animate.
+     * @param animation - The animation reference metadata containing keyframes and options.
+     * @param overrideOptions - Optional override options for the animation.
+     * @returns A promise that resolves when the animation completes.
+     * @public
+     */
+    playToFinal(element, animation, overrideOptions) {
+        return new Promise((resolve) => {
+            if (animation.steps.length === 0) {
+                resolve(new AnimationPlaybackEvent('finish', { currentTime: 0, timelineTime: 0 }));
+                return;
+            }
+            // Get the final keyframe as the target
+            const finalKeyframe = this.parseKeyframes(element, [animation.steps[animation.steps.length - 1]])[0];
+            // Convert to PropertyIndexedKeyframes format (animates from current state to target)
+            const targetProps = {};
+            for (const [key, value] of Object.entries(finalKeyframe)) {
+                if (key === 'offset' || key === 'easing' || key === 'composite') {
+                    continue;
+                }
+                targetProps[key] = value;
+            }
+            const options = {
+                duration: 333,
+                easing: 'ease',
+                fill: 'forwards',
+                ...animation.options,
+                ...overrideOptions
             };
+            // Respect prefers-reduced-motion
+            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+                options.duration = 0;
+            }
+            const anim = element.animate(targetProps, options);
+            anim.addEventListener('cancel', (event) => {
+                resolve(event);
+            }, { once: true });
+            anim.addEventListener('finish', (event) => {
+                this.applyStyles(element, targetProps);
+                resolve(event);
+            }, { once: true });
+            anim.play();
         });
     }
+    /**
+     * Applies the final keyframe values to the element's style.
+     *
+     * @param element - The element to apply styles to.
+     * @param keyframes - The keyframes array.
+     * @private
+     */
+    applyKeyframes(element, keyframes) {
+        if (keyframes.length === 0) {
+            return;
+        }
+        const finalKeyframe = keyframes[keyframes.length - 1];
+        for (const [key, value] of Object.entries(finalKeyframe)) {
+            if (key === 'offset' || key === 'easing' || key === 'composite') {
+                continue;
+            }
+            if (key in element.style) {
+                RendererServiceLocator.current.setStyle(element, key, value?.toString() ?? '');
+            }
+        }
+    }
+    /**
+     * Applies styles from a PropertyIndexedKeyframes object to the element.
+     *
+     * @param element - The element to apply styles to.
+     * @param props - The property values to apply.
+     * @private
+     */
+    applyStyles(element, props) {
+        for (const [key, value] of Object.entries(props)) {
+            if (key in element.style) {
+                RendererServiceLocator.current.setStyle(element, key, value?.toString() ?? '');
+            }
+        }
+    }
 }
 //# sourceMappingURL=AnimationPlayer.js.map

package/Animations/AnimationPlayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimationPlayer.js","sourceRoot":"","sources":["../../src/Animations/AnimationPlayer.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAIlB,aAAa;AAEb;;GAEG;AACH,MAAM,OAAO,eAAe;IAExB,iBAAiB;IAEA,OAAO,CAAc;IAEtC,aAAa;IAEb,eAAe;IAEf,YAAmB,MAAmB;QAClC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;IAC1B,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;OAKG;IACH,IAAW,MAAM;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IAED,aAAa;IAEN,KAAK,CAAC,IAAI,CAAC,QAAqC;QACnD,OAAO,IAAI,OAAO,CAAyB,CAAC,OAAO,EAAE,EAAE;YACnD,IAAI,QAAQ,CAAC,OAAO,EAAE,QAAQ,KAAK,QAAQ,EAAE,CAAC;gBAC1C,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;YAChE,CAAC;YAED,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC5D,MAAM,OAAO,GAAG;gBACZ,GAAG,QAAQ,CAAC,OAAO;gBACnB,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO;oBACnE,CAAC,CAAC,CAAC;oBACH,CAAC,CAAC,QAAQ,CAAC,OAAO,EAAE,QAAQ;aACnC,CAAC;YAEF,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;YAEjE,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9D,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QAClE,CAAC,CAAC,CAAC;IACP,CAAC;IAEM,OAAO;QACV,OAAO,OAAO,CAAC,GAAG,CACd,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACpE,MAAM,oBAAoB,GAAG,GAAW,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;YAE1E,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,EAAE;gBACvD,IAAI,EAAE,IAAI;aACb,CAAC,CAAC;YACH,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,EAAE;gBACvD,IAAI,EAAE,IAAI;aACb,CAAC,CAAC;YAEH,SAAS,CAAC,MAAM,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC,CACN,CAAC;IACN,CAAC;IAEO,cAAc,CAAC,SAA0B;QAC7C,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;YAC9B,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACnB,OAAO,QAAQ,CAAC;YACpB,CAAC;YAED,OAAO;gBACH,GAAG,QAAQ;gBACX,MAAM,EACF,QAAQ,CAAC,MAAM,KAAK,MAAM;oBACtB,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,IAAI;oBAClC,CAAC,CAAC,QAAQ,CAAC,MAAM;aAC5B,CAAC;QACN,CAAC,CAAC,CAAC;IACP,CAAC;CAEJ"}
+{"version":3,"file":"AnimationPlayer.js","sourceRoot":"","sources":["../../src/Animations/AnimationPlayer.ts"],"names":[],"mappings":"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"}

package/Animations/Directives/AnimateDirective.d.ts

@@ -1,27 +1,60 @@
-import { type AsyncDirectiveArgs, AsyncDirectiveBase } from '../../Controls/Directives/Abstracts/AsyncDirectiveBase';
+import { type ElementPart } from 'lit/directive.js';
+import { type DirectiveArgs, DirectiveBase } from '../../Controls/Directives/Abstracts/DirectiveBase';
+import type { IAnimationReferenceMetadata } from '../IAnimationReferenceMetadata';
 import { type IAnimationRef } from './AnimationRefDirective';
-import type { IAnimateOptions } from './IAnimateOptions';
+import type { IAnimationDirectiveOptions } from './IAnimationDirectiveOptions';
 /**
  * The `AnimateDirective` class.
  *
  * @public
  */
-export declare class AnimateDirective extends AsyncDirectiveBase {
+export declare class AnimateDirective extends DirectiveBase {
     private readonly _animationPlayer;
     private _wasTriggered;
+    private _element;
     /**
      * Constructs a new instance of the `AnimateDirective` class.
      *
      * @public
      */
-    constructor(args: AsyncDirectiveArgs);
+    constructor(args: DirectiveArgs);
     /**
+     * Renders the directive with the provided animation options.
+     *
+     * @param _optionsOrRef - The animation options or an animation reference.
+     * @returns Empty string (actual work is done in update).
+     * @public
+     */
+    render(_optionsOrRef: IAnimationDirectiveOptions | IAnimationReferenceMetadata | IAnimationRef): unknown;
+    /**
+     * Updates the directive and triggers the animation.
+     *
+     * @param part - The element part containing the target element.
+     * @param args - The directive arguments.
+     * @returns The render result.
      * @public
      */
-    render(optionsOrRef: (IAnimateOptions & {
-        trigger?: (cb: () => void) => void;
-    }) | IAnimationRef): unknown;
-    private play;
+    update(part: ElementPart, [optionsOrRef]: Parameters<this['render']>): unknown;
+    /**
+     * Applies the initial styles to the element.
+     *
+     * @param options - The animation options containing the initial keyframe.
+     * @private
+     */
+    private applyInitialStyles;
+    /**
+     * Plays the animation on the element.
+     * Uses playToFinal to animate from current state (with initial styles) to the final keyframe.
+     *
+     * @param options - The animation options.
+     * @private
+     */
+    private playAnimation;
 }
+/**
+ * A directive that triggers an animation on an element.
+ *
+ * @public
+ */
 export declare const animate: (...values: Parameters<AnimateDirective["render"]>) => any;
 //# sourceMappingURL=AnimateDirective.d.ts.map

package/Animations/Directives/AnimateDirective.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimateDirective.d.ts","sourceRoot":"","sources":["../../../src/Animations/Directives/AnimateDirective.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,kBAAkB,EAAE,kBAAkB,EAAqB,MAAM,wDAAwD,CAAC;AAIxI,OAAO,EAAE,KAAK,aAAa,EAAkB,MAAM,yBAAyB,CAAC;AAC7E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIzD;;;;GAIG;AACH,qBAAa,gBAAiB,SAAQ,kBAAkB;IAIpD,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAmB;IACpD,OAAO,CAAC,aAAa,CAAU;IAM/B;;;;OAIG;gBACgB,IAAI,EAAE,kBAAkB;IAe3C;;OAEG;IACI,MAAM,CAAC,YAAY,EAAE,CAAC,eAAe,GAAG;QAAE,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAA;KAAE,CAAC,GAAG,aAAa,GAAG,OAAO;IAmChH,OAAO,CAAC,IAAI;CAcf;AAED,eAAO,MAAM,OAAO,EAAuC,CAAC,GAAG,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,CAAC"}
+{"version":3,"file":"AnimateDirective.d.ts","sourceRoot":"","sources":["../../../src/Animations/Directives/AnimateDirective.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,WAAW,EAAY,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,KAAK,aAAa,EAAE,aAAa,EAAE,MAAM,mDAAmD,CAAC;AAGtG,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,KAAK,aAAa,EAAkB,MAAM,yBAAyB,CAAC;AAC7E,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAI/E;;;;GAIG;AACH,qBAAa,gBAAiB,SAAQ,aAAa;IAI/C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAkB;IACnD,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,QAAQ,CAAqB;IAMrC;;;;OAIG;gBACgB,IAAI,EAAE,aAAa;IAgBtC;;;;;;OAMG;IACI,MAAM,CAAC,aAAa,EAAE,0BAA0B,GAAG,2BAA2B,GAAG,aAAa,GAAG,OAAO;IAI/G;;;;;;;OAOG;IACa,MAAM,CAAC,IAAI,EAAE,WAAW,EAAE,CAAC,YAAY,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,OAAO;IA+B9F;;;;;OAKG;IACH,OAAO,CAAC,kBAAkB;IAiB1B;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;CAYxB;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAyC,CAAC,GAAG,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,CAAC"}

package/Animations/Directives/AnimateDirective.js

@@ -1,11 +1,8 @@
-/* eslint-disable @typescript-eslint/consistent-return */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 // #region Imports
-import { AsyncDirectiveBase, PartType, compose } from '../../Controls/Directives/Abstracts/AsyncDirectiveBase';
-import { nothing } from '../../Dom/Html';
+import { directive, PartType } from 'lit/directive.js';
+import { DirectiveBase } from '../../Controls/Directives/Abstracts/DirectiveBase';
 import { RendererServiceLocator } from '../../Dom/Renderer';
-import { AnimationPlayer2 } from '../AnimationPlayer2';
+import { AnimationPlayer } from '../AnimationPlayer';
 import { isAnimationRef } from './AnimationRefDirective';
 // #endregion
 /**
@@ -13,10 +10,11 @@ import { isAnimationRef } from './AnimationRefDirective';
  *
  * @public
  */
-export class AnimateDirective extends AsyncDirectiveBase {
+export class AnimateDirective extends DirectiveBase {
     // #region Fields
     _animationPlayer;
     _wasTriggered;
+    _element;
     // #endregion
     // #region Ctor
     /**
@@ -30,52 +28,94 @@ export class AnimateDirective extends AsyncDirectiveBase {
             throw new Error('The `animate` directive must be used in attribute position.');
         }
         this._wasTriggered = false;
-        this._animationPlayer = new AnimationPlayer2();
+        this._animationPlayer = new AnimationPlayer();
+        this._element = null;
     }
     // #endregion
     // #region Methods
     /**
+     * Renders the directive with the provided animation options.
+     *
+     * @param _optionsOrRef - The animation options or an animation reference.
+     * @returns Empty string (actual work is done in update).
+     * @public
+     */
+    render(_optionsOrRef) {
+        return '';
+    }
+    /**
+     * Updates the directive and triggers the animation.
+     *
+     * @param part - The element part containing the target element.
+     * @param args - The directive arguments.
+     * @returns The render result.
      * @public
      */
-    render(optionsOrRef) {
+    update(part, [optionsOrRef]) {
+        this._element = part.element;
         if (!this._wasTriggered) {
             this._wasTriggered = true;
             if (isAnimationRef(optionsOrRef)) {
-                return;
+                return this.render(optionsOrRef);
             }
-            Object.entries({
-                ...optionsOrRef.from,
-                ...optionsOrRef.initial,
-                ...{}
-            }).forEach(([k, v]) => {
-                if (k in this.internals.element.style) {
-                    RendererServiceLocator.current.setProperty(this.internals.element, k, v?.toString() ?? '');
-                }
-            });
-            if (optionsOrRef.to) {
-                if (optionsOrRef.trigger) {
-                    optionsOrRef.trigger(() => {
-                        this.play(optionsOrRef);
+            const animationOptions = optionsOrRef;
+            // Apply initial styles immediately (synchronously)
+            this.applyInitialStyles(animationOptions);
+            // Only animate if there are steps defined
+            if (animationOptions.steps && animationOptions.steps.length > 0) {
+                if (animationOptions.trigger) {
+                    animationOptions.trigger(() => {
+                        this.playAnimation(animationOptions);
                     });
                 }
                 else {
-                    this.play(optionsOrRef);
+                    // Play animation immediately - initial styles are already applied
+                    this.playAnimation(animationOptions);
                 }
             }
         }
-        return nothing;
+        return this.render(optionsOrRef);
     }
-    play(options) {
-        void this._animationPlayer.play(this.internals.element, options.to, {
-            ...{
-                duration: 333,
-                easing: 'ease'
-            },
-            ...options.options
-        }).then(() => {
+    /**
+     * Applies the initial styles to the element.
+     *
+     * @param options - The animation options containing the initial keyframe.
+     * @private
+     */
+    applyInitialStyles(options) {
+        if (!options.initial || !this._element) {
+            return;
+        }
+        for (const [key, value] of Object.entries(options.initial)) {
+            // Skip non-style keyframe properties
+            if (key === 'offset' || key === 'easing' || key === 'composite') {
+                continue;
+            }
+            if (key in this._element.style) {
+                RendererServiceLocator.current.setStyle(this._element, key, value?.toString() ?? '');
+            }
+        }
+    }
+    /**
+     * Plays the animation on the element.
+     * Uses playToFinal to animate from current state (with initial styles) to the final keyframe.
+     *
+     * @param options - The animation options.
+     * @private
+     */
+    playAnimation(options) {
+        if (!this._element) {
+            return;
+        }
+        void this._animationPlayer.playToFinal(this._element, options).then(() => {
             options.onFinished?.();
         });
     }
 }
-export const animate = compose(AnimateDirective);
+/**
+ * A directive that triggers an animation on an element.
+ *
+ * @public
+ */
+export const animate = directive(AnimateDirective);
 //# sourceMappingURL=AnimateDirective.js.map

package/Animations/Directives/AnimateDirective.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimateDirective.js","sourceRoot":"","sources":["../../../src/Animations/Directives/AnimateDirective.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,uDAAuD;AACvD,gEAAgE;AAChE,kBAAkB;AAElB,OAAO,EAA2B,kBAAkB,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,wDAAwD,CAAC;AACxI,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAsB,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG7E,aAAa;AAEb;;;;GAIG;AACH,MAAM,OAAO,gBAAiB,SAAQ,kBAAkB;IAEpD,iBAAiB;IAEA,gBAAgB,CAAmB;IAC5C,aAAa,CAAU;IAE/B,aAAa;IAEb,eAAe;IAEf;;;;OAIG;IACH,YAAmB,IAAwB;QACvC,KAAK,CAAC,IAAI,CAAC,CAAC;QAEZ,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,6DAA6D,CAAC,CAAC;QACnF,CAAC;QAED,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,EAAE,CAAC;IACnD,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;OAEG;IACI,MAAM,CAAC,YAAwF;QAClG,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACtB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAE1B,IAAI,cAAc,CAAC,YAAY,CAAC,EAAE,CAAC;gBAC/B,OAAO;YACX,CAAC;YAED,MAAM,CAAC,OAAO,CAAC;gBACX,GAAG,YAAY,CAAC,IAAI;gBACpB,GAAG,YAAY,CAAC,OAAO;gBACvB,GAAG,EAAE;aACR,CAAC,CAAC,OAAO,CAAC,CAAC,CACR,CAAC,EACD,CAAC,CACJ,EAAE,EAAE;gBACD,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;oBACpC,sBAAsB,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;gBAC/F,CAAC;YACL,CAAC,CAAC,CAAC;YAEH,IAAI,YAAY,CAAC,EAAE,EAAE,CAAC;gBAClB,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;oBACvB,YAAY,CAAC,OAAO,CAAC,GAAG,EAAE;wBACtB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;oBAC5B,CAAC,CAAC,CAAC;gBACP,CAAC;qBAAM,CAAC;oBACJ,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;gBAC5B,CAAC;YACL,CAAC;QACL,CAAC;QAED,OAAO,OAAO,CAAC;IACnB,CAAC;IAEO,IAAI,CAAC,OAAwB;QACjC,KAAK,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,EAAE;YAChE,GAAG;gBACC,QAAQ,EAAE,GAAG;gBACb,MAAM,EAAE,MAAM;aACjB;YACD,GAAG,OAAO,CAAC,OAAO;SACrB,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;YACT,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC;QAC3B,CAAC,CAAC,CAAC;IACP,CAAC;CAIJ;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC,gBAAuB,CAA+D,CAAC"}
+{"version":3,"file":"AnimateDirective.js","sourceRoot":"","sources":["../../../src/Animations/Directives/AnimateDirective.ts"],"names":[],"mappings":"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"}

package/Animations/Directives/AnimationRefDirective.d.ts

@@ -1,23 +1,56 @@
 import { type AsyncDirectiveArgs, AsyncDirectiveBase } from '../../Controls/Directives/Abstracts/AsyncDirectiveBase';
-import type { IAnimateOptions } from './IAnimateOptions';
+import type { IAnimationReferenceMetadata } from '../IAnimationReferenceMetadata';
+/**
+ * Interface for an animation reference that can be used to trigger animations programmatically.
+ *
+ * @public
+ */
 export interface IAnimationRef {
-    play: (options: IAnimateOptions) => Promise<AnimationPlaybackEvent>;
+    /**
+     * Plays the specified animation on the element.
+     *
+     * @param animation - The animation to play.
+     * @param overrideOptions - Optional override options for the animation.
+     * @returns A promise that resolves when the animation completes.
+     */
+    play: (animation: IAnimationReferenceMetadata, overrideOptions?: KeyframeAnimationOptions) => Promise<AnimationPlaybackEvent>;
 }
-export declare function isAnimationRef(value: any): value is IAnimationRef;
 /**
- * The `AnimateDirective` class.
+ * Type guard to check if a value is an `IAnimationRef`.
+ *
+ * @param value - The value to check.
+ * @returns True if the value is an `IAnimationRef`, false otherwise.
+ * @public
+ */
+export declare function isAnimationRef(value: unknown): value is IAnimationRef;
+/**
+ * The `AnimationRefDirective` class.
+ *
+ * This directive provides a reference to an element that can be used to trigger animations programmatically.
  *
  * @public
  */
 export declare class AnimationRefDirective extends AsyncDirectiveBase {
     private readonly _animationPlayer;
     /**
-     * Constructs a new instance of the `AnimateDirective` class.
+     * Constructs a new instance of the `AnimationRefDirective` class.
      *
      * @public
      */
     constructor(args: AsyncDirectiveArgs);
-    render(cb: (ref: IAnimationRef) => void): unknown;
+    /**
+     * Renders the directive and provides an animation reference to the callback.
+     *
+     * @param callback - A callback that receives the animation reference.
+     * @returns Nothing.
+     * @public
+     */
+    render(callback: (ref: IAnimationRef) => void): unknown;
 }
+/**
+ * A directive that provides an animation reference to programmatically trigger animations.
+ *
+ * @public
+ */
 export declare const animationRef: (...values: Parameters<AnimationRefDirective["render"]>) => any;
 //# sourceMappingURL=AnimationRefDirective.d.ts.map

package/Animations/Directives/AnimationRefDirective.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimationRefDirective.d.ts","sourceRoot":"","sources":["../../../src/Animations/Directives/AnimationRefDirective.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAAE,kBAAkB,EAAqB,MAAM,wDAAwD,CAAC;AAGxI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIzD,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC,sBAAsB,CAAC,CAAC;CACvE;AAGD,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,KAAK,IAAI,aAAa,CAEjE;AAED;;;;GAIG;AACH,qBAAa,qBAAsB,SAAQ,kBAAkB;IAIzD,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAmB;IAMpD;;;;OAIG;gBACgB,IAAI,EAAE,kBAAkB;IAcpC,MAAM,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO;CAQ3D;AAED,eAAO,MAAM,YAAY,EAA4C,CAAC,GAAG,MAAM,EAAE,UAAU,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,CAAC"}
+{"version":3,"file":"AnimationRefDirective.d.ts","sourceRoot":"","sources":["../../../src/Animations/Directives/AnimationRefDirective.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAAE,kBAAkB,EAAqB,MAAM,wDAAwD,CAAC;AAGxI,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAIlF;;;;GAIG;AACH,MAAM,WAAW,aAAa;IAE1B;;;;;;OAMG;IACH,IAAI,EAAE,CAAC,SAAS,EAAE,2BAA2B,EAAE,eAAe,CAAC,EAAE,wBAAwB,KAAK,OAAO,CAAC,sBAAsB,CAAC,CAAC;CAEjI;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,aAAa,CAErE;AAED;;;;;;GAMG;AACH,qBAAa,qBAAsB,SAAQ,kBAAkB;IAIzD,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAkB;IAMnD;;;;OAIG;gBACgB,IAAI,EAAE,kBAAkB;IAc3C;;;;;;OAMG;IACI,MAAM,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO;CAajE;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAA4C,CAAC,GAAG,MAAM,EAAE,UAAU,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,CAAC"}