@wix/motion 2.1.6 → 2.1.7

package/dist/es/motion.js

@@ -1,68 +1,68 @@
-class I {
+class O {
   animations;
   options;
   ready;
   isCSS;
   longestAnimation;
-  constructor(e, n) {
-    this.animations = e, this.options = n, this.ready = n?.measured || Promise.resolve(), this.isCSS = e[0] instanceof CSSAnimation, this.longestAnimation = this._getAnimationWithLongestEndTime();
+  constructor(t, n) {
+    this.animations = t, this.options = n, this.ready = n?.measured || Promise.resolve(), this.isCSS = t[0] instanceof CSSAnimation, this.longestAnimation = this._getAnimationWithLongestEndTime();
   }
   _getAnimationWithLongestEndTime() {
-    return this.animations.reduce((e, n) => {
-      const i = e.effect?.getComputedTiming().endTime ?? 0, s = n.effect?.getComputedTiming().endTime ?? 0;
-      return i > s ? e : n;
+    return this.animations.reduce((t, n) => {
+      const i = t.effect?.getComputedTiming().endTime ?? 0, s = n.effect?.getComputedTiming().endTime ?? 0;
+      return i > s ? t : n;
     }, this.animations[0]);
   }
   getProgress() {
     return this.longestAnimation?.effect?.getComputedTiming().progress || 0;
   }
-  async play(e) {
+  async play(t) {
     await this.ready;
     for (const n of this.animations)
       n.play();
-    await Promise.all(this.animations.map((n) => n.ready)), e && e();
+    await Promise.all(this.animations.map((n) => n.ready)), t && t();
   }
   pause() {
-    for (const e of this.animations)
-      e.pause();
+    for (const t of this.animations)
+      t.pause();
   }
-  async reverse(e) {
+  async reverse(t) {
     await this.ready;
     for (const n of this.animations)
       n.reverse();
-    await Promise.all(this.animations.map((n) => n.ready)), e && e();
+    await Promise.all(this.animations.map((n) => n.ready)), t && t();
   }
-  progress(e) {
+  progress(t) {
     for (const n of this.animations) {
       const { delay: i, duration: s, iterations: r } = n.effect.getTiming(), c = (Number.isFinite(s) ? s : 0) * (Number.isFinite(r) ? r : 1);
-      n.currentTime = ((i || 0) + c) * e;
+      n.currentTime = ((i || 0) + c) * t;
     }
   }
   cancel() {
-    for (const e of this.animations)
-      e.cancel();
+    for (const t of this.animations)
+      t.cancel();
   }
-  setPlaybackRate(e) {
+  setPlaybackRate(t) {
     for (const n of this.animations)
-      n.playbackRate = e;
+      n.playbackRate = t;
   }
-  async onFinish(e) {
+  async onFinish(t) {
     try {
       await Promise.all(this.animations.map((i) => i.finished));
       const n = this.animations[0];
       if (n && !this.isCSS) {
         const i = n.effect?.target;
         if (i) {
-          const s = new Event("animationend");
-          i.dispatchEvent(s);
+          const s = this.options?.effectId || n.id, r = new CustomEvent("animationend", { detail: { effectId: s } });
+          i.dispatchEvent(r);
         }
       }
-      e();
+      t();
     } catch (n) {
       console.warn("animation was interrupted - aborting onFinish callback - ", n);
     }
   }
-  async onAbort(e) {
+  async onAbort(t) {
     try {
       await Promise.all(this.animations.map((n) => n.finished));
     } catch (n) {
@@ -75,19 +75,25 @@ class I {
             s.dispatchEvent(r);
           }
         }
-        e();
+        t();
       }
     }
   }
   get finished() {
-    return Promise.all(this.animations.map((e) => e.finished));
+    return Promise.all(this.animations.map((t) => t.finished));
   }
   get playState() {
-    return this.animations[0]?.playState;
+    return this.animations.some((t) => t.playState === "running") ? "running" : this.animations[0]?.playState;
+  }
+  hasAnimationName(t) {
+    return this.animations.some((n) => n.animationName === t);
+  }
+  hasAnimationId(t) {
+    return this.animations.some((n) => n.id === t);
   }
   getTimingOptions() {
-    return this.animations.map((e) => {
-      const n = e.effect?.getTiming(), i = n?.delay ?? 0, s = Number(n?.duration) || 0, r = n?.iterations ?? 1;
+    return this.animations.map((t) => {
+      const n = t.effect?.getTiming(), i = n?.delay ?? 0, s = Number(n?.duration) || 0, r = n?.iterations ?? 1;
       return {
         delay: i,
         duration: s,
@@ -96,7 +102,7 @@ class I {
     });
   }
 }
-const G = (t) => t, V = (t) => 1 - Math.cos(t * Math.PI / 2), B = (t) => Math.sin(t * Math.PI / 2), K = (t) => -(Math.cos(Math.PI * t) - 1) / 2, X = (t) => t ** 2, J = (t) => 1 - (1 - t) ** 2, U = (t) => t < 0.5 ? 2 * t ** 2 : 1 - (-2 * t + 2) ** 2 / 2, Y = (t) => t ** 3, Q = (t) => 1 - (1 - t) ** 3, Z = (t) => t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2, tt = (t) => t ** 4, et = (t) => 1 - (1 - t) ** 4, nt = (t) => t < 0.5 ? 8 * t ** 4 : 1 - (-2 * t + 2) ** 4 / 2, it = (t) => t ** 5, st = (t) => 1 - (1 - t) ** 5, rt = (t) => t < 0.5 ? 16 * t ** 5 : 1 - (-2 * t + 2) ** 5 / 2, ot = (t) => t === 0 ? 0 : 2 ** (10 * t - 10), at = (t) => t === 1 ? 1 : 1 - 2 ** (-10 * t), ct = (t) => t === 0 ? 0 : t === 1 ? 1 : t < 0.5 ? 2 ** (20 * t - 10) / 2 : (2 - 2 ** (-20 * t + 10)) / 2, ut = (t) => 1 - Math.sqrt(1 - t ** 2), ft = (t) => Math.sqrt(1 - (t - 1) ** 2), mt = (t) => t < 0.5 ? (1 - Math.sqrt(1 - 4 * t ** 2)) / 2 : (Math.sqrt(-(2 * t - 3) * (2 * t - 1)) + 1) / 2, lt = (t) => 2.70158 * t ** 3 - 1.70158 * t ** 2, ht = (t) => 1 + 2.70158 * (t - 1) ** 3 + 1.70158 * (t - 1) ** 2, dt = (t, e = 1.70158 * 1.525) => t < 0.5 ? (2 * t) ** 2 * ((e + 1) * 2 * t - e) / 2 : ((2 * t - 2) ** 2 * ((e + 1) * (t * 2 - 2) + e) + 2) / 2, C = {
+const G = (e) => e, V = (e) => 1 - Math.cos(e * Math.PI / 2), B = (e) => Math.sin(e * Math.PI / 2), K = (e) => -(Math.cos(Math.PI * e) - 1) / 2, X = (e) => e ** 2, J = (e) => 1 - (1 - e) ** 2, U = (e) => e < 0.5 ? 2 * e ** 2 : 1 - (-2 * e + 2) ** 2 / 2, Y = (e) => e ** 3, Q = (e) => 1 - (1 - e) ** 3, Z = (e) => e < 0.5 ? 4 * e ** 3 : 1 - (-2 * e + 2) ** 3 / 2, tt = (e) => e ** 4, et = (e) => 1 - (1 - e) ** 4, nt = (e) => e < 0.5 ? 8 * e ** 4 : 1 - (-2 * e + 2) ** 4 / 2, it = (e) => e ** 5, st = (e) => 1 - (1 - e) ** 5, rt = (e) => e < 0.5 ? 16 * e ** 5 : 1 - (-2 * e + 2) ** 5 / 2, ot = (e) => e === 0 ? 0 : 2 ** (10 * e - 10), at = (e) => e === 1 ? 1 : 1 - 2 ** (-10 * e), ct = (e) => e === 0 ? 0 : e === 1 ? 1 : e < 0.5 ? 2 ** (20 * e - 10) / 2 : (2 - 2 ** (-20 * e + 10)) / 2, ut = (e) => 1 - Math.sqrt(1 - e ** 2), ft = (e) => Math.sqrt(1 - (e - 1) ** 2), mt = (e) => e < 0.5 ? (1 - Math.sqrt(1 - 4 * e ** 2)) / 2 : (Math.sqrt(-(2 * e - 3) * (2 * e - 1)) + 1) / 2, lt = (e) => 2.70158 * e ** 3 - 1.70158 * e ** 2, ht = (e) => 1 + 2.70158 * (e - 1) ** 3 + 1.70158 * (e - 1) ** 2, dt = (e, t = 1.70158 * 1.525) => e < 0.5 ? (2 * e) ** 2 * ((t + 1) * 2 * e - t) / 2 : ((2 * e - 2) ** 2 * ((t + 1) * (e * 2 - 2) + t) + 2) / 2, C = {
   linear: G,
   sineIn: V,
   sineOut: B,
@@ -153,14 +159,14 @@ const G = (t) => t, V = (t) => 1 - Math.cos(t * Math.PI / 2), B = (t) => Math.si
   backOut: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
   backInOut: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
 };
-function pt(t) {
-  return t === "percentage" ? "%" : t || "px";
+function pt(e) {
+  return e === "percentage" ? "%" : e || "px";
 }
-function gt(t) {
-  return t ? z[t] || t : z.linear;
+function gt(e) {
+  return e ? z[e] || e : z.linear;
 }
-function yt(t, e, n, i) {
-  const s = 3 * t, r = 3 * (n - t) - s, c = 1 - s - r, a = 3 * e, m = 3 * (i - e) - a, l = 1 - a - m, o = (h) => ((c * h + r) * h + s) * h, u = (h) => ((l * h + m) * h + a) * h, f = (h) => (3 * c * h + 2 * r) * h + s;
+function yt(e, t, n, i) {
+  const s = 3 * e, r = 3 * (n - e) - s, c = 1 - s - r, a = 3 * t, m = 3 * (i - t) - a, l = 1 - a - m, o = (h) => ((c * h + r) * h + s) * h, u = (h) => ((l * h + m) * h + a) * h, f = (h) => (3 * c * h + 2 * r) * h + s;
   function p(h) {
     let d = h;
     for (let y = 0; y < 8; y++) {
@@ -180,19 +186,19 @@ function yt(t, e, n, i) {
   }
   return (h) => h <= 0 ? 0 : h >= 1 ? 1 : u(p(h));
 }
-function bt(t) {
-  const e = t.match(
+function bt(e) {
+  const t = e.match(
     /^cubic-bezier\(\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*\)$/
   );
-  if (!e) return;
-  const n = parseFloat(e[1]), i = parseFloat(e[2]), s = parseFloat(e[3]), r = parseFloat(e[4]);
+  if (!t) return;
+  const n = parseFloat(t[1]), i = parseFloat(t[2]), s = parseFloat(t[3]), r = parseFloat(t[4]);
   if (![n, i, s, r].some(isNaN))
     return yt(n, i, s, r);
 }
-function vt(t) {
-  const e = t.match(/^linear\((.+)\)$/);
-  if (!e) return;
-  const n = e[1].split(",").map((c) => c.trim()).filter(Boolean);
+function vt(e) {
+  const t = e.match(/^linear\((.+)\)$/);
+  if (!t) return;
+  const n = t[1].split(",").map((c) => c.trim()).filter(Boolean);
   if (n.length === 0) return;
   const i = [];
   for (const c of n) {
@@ -237,24 +243,24 @@ function vt(t) {
     return u.pos === o.pos ? u.output : o.output + (u.output - o.output) * (c - o.pos) / (u.pos - o.pos);
   };
 }
-function D(t) {
-  if (!t) return;
-  const e = C[t];
-  return e || (bt(t) ?? vt(t) ?? C.linear);
+function D(e) {
+  if (!e) return;
+  const t = C[e];
+  return t || (bt(e) ?? vt(e) ?? C.linear);
 }
-class Et extends I {
+class Et extends O {
   animationGroups;
   delay;
   offset;
   offsetEasing;
   timingOptions;
-  constructor(e, n = {}) {
-    const i = e.flatMap((s) => [...s.animations]);
-    super(i), this.animationGroups = e, this.delay = n.delay ?? 0, this.offset = n.offset ?? 0, this.offsetEasing = typeof n.offsetEasing == "function" ? n.offsetEasing : D(n.offsetEasing) ?? G, this.timingOptions = this.animationGroups.map((s) => s.getTimingOptions().map(({ delay: r, duration: c, iterations: a }) => ({
+  constructor(t, n = {}) {
+    const i = t.flatMap((s) => [...s.animations]);
+    super(i), this.animationGroups = t, this.delay = n.delay ?? 0, this.offset = n.offset ?? 0, this.offsetEasing = typeof n.offsetEasing == "function" ? n.offsetEasing : D(n.offsetEasing) ?? G, this.timingOptions = this.animationGroups.map((s) => s.getTimingOptions().map(({ delay: r, duration: c, iterations: a }) => ({
       delay: r,
       duration: Number.isFinite(c) ? c : 0,
       iterations: Number.isFinite(a) ? a : 1
-    }))), this.applyOffsets(), this.ready = Promise.all(e.map((s) => s.ready)).then(() => {
+    }))), this.applyOffsets(), this.ready = Promise.all(t.map((s) => s.ready)).then(() => {
     });
   }
   /**
@@ -263,27 +269,27 @@ class Et extends I {
    * where i is the group index and last is the index of the final group.
    */
   calculateOffsets() {
-    const e = this.animationGroups.length;
-    if (e <= 1) return [0];
-    const n = e - 1;
+    const t = this.animationGroups.length;
+    if (t <= 1) return [0];
+    const n = t - 1;
     return Array.from(
-      { length: e },
+      { length: t },
       (i, s) => this.offsetEasing(s / n) * n * this.offset | 0
     );
   }
   applyOffsets() {
     if (this.animationGroups.length === 0 || this.animations.length === 0) return;
-    const e = this.calculateOffsets(), n = this.getSequenceActiveDuration(e);
+    const t = this.calculateOffsets(), n = this.getSequenceActiveDuration(t);
     this.animationGroups.forEach((i, s) => {
       i.animations.forEach((r, c) => {
         const a = r.effect;
         if (!a) return;
-        const { delay: m, duration: l, iterations: o } = this.timingOptions[s][c], u = m + e[s], f = n - (u + l * o);
+        const { delay: m, duration: l, iterations: o } = this.timingOptions[s][c], u = m + t[s], f = n - (u + l * o);
         a.updateTiming({ delay: u + this.delay, endDelay: f });
       });
     });
   }
-  getSequenceActiveDuration(e) {
+  getSequenceActiveDuration(t) {
     const n = [];
     for (let i = 0; i < this.timingOptions.length; i++) {
       const s = this.timingOptions[i].reduce((r, c) => {
@@ -291,7 +297,7 @@ class Et extends I {
         const { delay: a, duration: m, iterations: l } = c;
         return Math.max(r, a + m * l);
       }, 0);
-      n.push(e[i] + s);
+      n.push(t[i] + s);
     }
     return Math.max(...n);
   }
@@ -300,9 +306,9 @@ class Et extends I {
    * stagger offsets for all groups. Each entry specifies the target index
    * in the animationGroups array where the group should be inserted.
    */
-  addGroups(e) {
-    if (e.length === 0) return;
-    const n = [...e].sort((i, s) => s.index - i.index);
+  addGroups(t) {
+    if (t.length === 0) return;
+    const n = [...t].sort((i, s) => s.index - i.index);
     for (const { index: i, group: s } of n) {
       const r = Math.min(i, this.animationGroups.length);
       this.animationGroups.splice(r, 0, s), this.timingOptions.splice(r, 0, s.getTimingOptions());
@@ -317,19 +323,19 @@ class Et extends I {
    * stagger offsets for remaining groups. Cancelled animations in removed
    * groups are returned.
    */
-  removeGroups(e) {
+  removeGroups(t) {
     const n = [], i = [], s = [];
     for (let r = 0; r < this.animationGroups.length; r++)
-      e(this.animationGroups[r]) ? n.push(this.animationGroups[r]) : (i.push(this.animationGroups[r]), s.push(this.timingOptions[r]));
+      t(this.animationGroups[r]) ? n.push(this.animationGroups[r]) : (i.push(this.animationGroups[r]), s.push(this.timingOptions[r]));
     if (n.length === 0) return n;
     for (const r of n)
       r.cancel();
     return this.animationGroups = i, this.timingOptions = s, this.animations = i.flatMap((r) => [...r.animations]), this.applyOffsets(), this.ready = Promise.all(this.animationGroups.map((r) => r.ready)).then(() => {
     }), n;
   }
-  async onFinish(e) {
+  async onFinish(t) {
     try {
-      await Promise.all(this.animationGroups.map((n) => n.finished)), e();
+      await Promise.all(this.animationGroups.map((n) => n.finished)), t();
     } catch (n) {
       console.warn("animation was interrupted - aborting onFinish callback - ", n);
     }
@@ -341,25 +347,25 @@ class _t {
   progress;
   _tickCbId;
   _finishHandler;
-  constructor(e, n, i, s) {
+  constructor(t, n, i, s) {
     const r = new KeyframeEffect(n, [], {
       ...i,
       composite: "add"
     }), { timeline: c } = s;
-    this._animation = new Animation(r, c), this._tickCbId = null, this.progress = null, this.customEffect = (a) => e(r.target, a), this._finishHandler = (a) => {
+    this._animation = new Animation(r, c), this._tickCbId = null, this.progress = null, this.customEffect = (a) => t(r.target, a), this._finishHandler = (a) => {
       this.effect.target?.getAnimations().find((m) => m === this._animation) || this.cancel();
     }, this.addEventListener("finish", this._finishHandler), this.addEventListener("remove", this._finishHandler);
   }
   // private tick method for customEffect loop implementation
   _tick() {
     try {
-      const e = this.effect?.getComputedTiming().progress ?? null;
-      e !== this.progress && (this.customEffect?.(e), this.progress = e), this._tickCbId = requestAnimationFrame(() => {
+      const t = this.effect?.getComputedTiming().progress ?? null;
+      t !== this.progress && (this.customEffect?.(t), this.progress = t), this._tickCbId = requestAnimationFrame(() => {
         this._tick();
       });
-    } catch (e) {
+    } catch (t) {
       this._tickCbId = null, console.error(
-        `failed to run customEffect! effectId: ${this.id}, error: ${e instanceof Error ? e.message : e}`
+        `failed to run customEffect! effectId: ${this.id}, error: ${t instanceof Error ? t.message : t}`
       );
     }
   }
@@ -367,39 +373,39 @@ class _t {
   get currentTime() {
     return this._animation.currentTime;
   }
-  set currentTime(e) {
-    this._animation.currentTime = e;
+  set currentTime(t) {
+    this._animation.currentTime = t;
   }
   get startTime() {
     return this._animation.startTime;
   }
-  set startTime(e) {
-    this._animation.startTime = e;
+  set startTime(t) {
+    this._animation.startTime = t;
   }
   get playbackRate() {
     return this._animation.playbackRate;
   }
-  set playbackRate(e) {
-    this._animation.playbackRate = e;
+  set playbackRate(t) {
+    this._animation.playbackRate = t;
   }
   // Animation basic properties
   get id() {
     return this._animation.id;
   }
-  set id(e) {
-    this._animation.id = e;
+  set id(t) {
+    this._animation.id = t;
   }
   get effect() {
     return this._animation.effect;
   }
-  set effect(e) {
-    this._animation.effect = e;
+  set effect(t) {
+    this._animation.effect = t;
   }
   get timeline() {
     return this._animation.timeline;
   }
-  set timeline(e) {
-    this._animation.timeline = e;
+  set timeline(t) {
+    this._animation.timeline = t;
   }
   // Animation readonly state properties
   get finished() {
@@ -421,20 +427,20 @@ class _t {
   get oncancel() {
     return this._animation.oncancel;
   }
-  set oncancel(e) {
-    this._animation.oncancel = e;
+  set oncancel(t) {
+    this._animation.oncancel = t;
   }
   get onfinish() {
     return this._animation.onfinish;
   }
-  set onfinish(e) {
-    this._animation.onfinish = e;
+  set onfinish(t) {
+    this._animation.onfinish = t;
   }
   get onremove() {
     return this._animation.onremove;
   }
-  set onremove(e) {
-    this._animation.onremove = e;
+  set onremove(t) {
+    this._animation.onremove = t;
   }
   // CustomAnimation overridden methods
   play() {
@@ -461,34 +467,34 @@ class _t {
   reverse() {
     this._animation.reverse();
   }
-  updatePlaybackRate(e) {
-    this._animation.updatePlaybackRate(e);
+  updatePlaybackRate(t) {
+    this._animation.updatePlaybackRate(t);
   }
   // Animation events API
-  addEventListener(e, n, i) {
-    this._animation.addEventListener(e, n, i);
+  addEventListener(t, n, i) {
+    this._animation.addEventListener(t, n, i);
   }
-  removeEventListener(e, n, i) {
-    this._animation.removeEventListener(e, n, i);
+  removeEventListener(t, n, i) {
+    this._animation.removeEventListener(t, n, i);
   }
-  dispatchEvent(e) {
-    return this._animation.dispatchEvent(e);
+  dispatchEvent(t) {
+    return this._animation.dispatchEvent(t);
   }
 }
-function wt(t) {
-  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+function wt(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
 var A = { exports: {} }, F = A.exports, x;
-function Ot() {
-  return x || (x = 1, (function(t) {
-    (function(e) {
+function It() {
+  return x || (x = 1, (function(e) {
+    (function(t) {
       var n = function() {
-      }, i = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.msRequestAnimationFrame || function(o) {
+      }, i = t.requestAnimationFrame || t.webkitRequestAnimationFrame || t.mozRequestAnimationFrame || t.msRequestAnimationFrame || function(o) {
         return setTimeout(o, 16);
       };
       function s() {
         var o = this;
-        o.reads = [], o.writes = [], o.raf = i.bind(e);
+        o.reads = [], o.writes = [], o.raf = i.bind(t);
       }
       s.prototype = {
         constructor: s,
@@ -604,68 +610,68 @@ function Ot() {
         for (var f in u)
           u.hasOwnProperty(f) && (o[f] = u[f]);
       }
-      var l = e.fastdom = e.fastdom || new s();
-      t.exports = l;
+      var l = t.fastdom = t.fastdom || new s();
+      e.exports = l;
     })(typeof window < "u" ? window : typeof F < "u" ? F : globalThis);
   })(A)), A.exports;
 }
-var It = Ot();
-const E = /* @__PURE__ */ wt(It), $ = {};
-function Nt(t) {
-  Object.assign($, t);
+var Ot = It();
+const E = /* @__PURE__ */ wt(Ot), $ = {};
+function Nt(e) {
+  Object.assign($, e);
 }
-function At(t) {
-  return t in $ ? $[t] : (console.warn(
-    `${t} not found in registry. Please make sure to import and register the preset.`
+function At(e) {
+  return e in $ ? $[e] : (console.warn(
+    `${e} not found in registry. Please make sure to import and register the preset.`
   ), null);
 }
-function w(t, e) {
-  return t ? (e || document).getElementById(t) : null;
+function w(e, t) {
+  return e ? (t || document).getElementById(e) : null;
 }
-function Tt(t, e) {
-  return t?.matches(`[data-motion-part~="${e}"]`) ? t : t?.querySelector(`[data-motion-part~="${e}"]`);
+function Tt(e, t) {
+  return e?.matches(`[data-motion-part~="${t}"]`) ? e : e?.querySelector(`[data-motion-part~="${t}"]`);
 }
-function kt(t) {
-  const e = t.alternate ? "alternate" : "";
-  return t.reversed ? `${e ? `${e}-` : ""}reverse` : e || "normal";
+function kt(e) {
+  const t = e.alternate ? "alternate" : "";
+  return e.reversed ? `${t ? `${t}-` : ""}reverse` : t || "normal";
 }
-function k(t) {
-  return `${t.value}${pt(t.unit)}`;
+function k(e) {
+  return `${e.value}${pt(e.unit)}`;
 }
-function M(t, e, n) {
-  return `${t.name || "cover"} ${n && t.offset.unit !== "percentage" ? `calc(100% + ${k(t.offset)}${e ? ` + ${e}` : ""})` : e ? `calc(${k(t.offset)} + ${e})` : k(t.offset)}`;
+function M(e, t, n) {
+  return `${e.name || "cover"} ${n && e.offset.unit !== "percentage" ? `calc(100% + ${k(e.offset)}${t ? ` + ${t}` : ""})` : t ? `calc(${k(e.offset)} + ${t})` : k(e.offset)}`;
 }
-function R(t) {
+function R(e) {
   return {
-    start: M(t.startOffset, t.startOffsetAdd),
-    end: M(t.endOffset, t.endOffsetAdd, !0)
+    start: M(e.startOffset, e.startOffsetAdd),
+    end: M(e.endOffset, e.endOffsetAdd, !0)
   };
 }
-function L(t) {
-  return (e) => E.measure(() => e(t));
+function L(e) {
+  return (t) => E.measure(() => t(e));
 }
-function j(t) {
-  return (e) => E.mutate(() => e(t));
+function j(e) {
+  return (t) => E.mutate(() => t(e));
 }
-function O(t) {
-  if (t.namedEffect) {
-    const e = t.namedEffect.type;
-    return typeof e == "string" ? At(e) : null;
-  } else if (t.keyframeEffect) {
-    const e = (i) => {
+function I(e) {
+  if (e.namedEffect) {
+    const t = e.namedEffect.type;
+    return typeof t == "string" ? At(t) : null;
+  } else if (e.keyframeEffect) {
+    const t = (i) => {
       const { name: s, keyframes: r } = i.keyframeEffect;
       return [{ ...i, name: s, keyframes: r }];
     };
-    return { web: e, style: e, getNames: (i) => {
+    return { web: t, style: t, getNames: (i) => {
       const { effectId: s } = i, { name: r } = i.keyframeEffect, c = r || s;
       return c ? [c] : [];
     } };
-  } else if (t.customEffect)
-    return (e) => [{ ...e, keyframes: [] }];
+  } else if (e.customEffect)
+    return (t) => [{ ...t, keyframes: [] }];
   return null;
 }
-function H(t, e, n, i) {
-  return t.map((s, r) => {
+function H(e, t, n, i) {
+  return e.map((s, r) => {
     const c = {
       fill: s.fill,
       easing: gt(s.easing),
@@ -673,7 +679,7 @@ function H(t, e, n, i) {
       composite: s.composite,
       direction: kt(s)
     };
-    return S(e) ? (c.duration = s.duration, c.delay = s.delay || 0) : e?.trigger === "view-progress" && (i || window.ViewTimeline) ? c.duration = "auto" : (c.duration = 99.99, c.delay = 0.01), {
+    return S(t) ? (c.duration = s.duration, c.delay = s.delay || 0) : t?.trigger === "view-progress" && (i || window.ViewTimeline) ? c.duration = "auto" : (c.duration = 99.99, c.delay = 0.01), {
       effect: s,
       options: c,
       id: n && `${n}-${r + 1}`,
@@ -681,50 +687,50 @@ function H(t, e, n, i) {
     };
   });
 }
-function S(t) {
-  return !t || t.trigger !== "pointer-move" && t.trigger !== "view-progress";
+function S(e) {
+  return !e || e.trigger !== "pointer-move" && e.trigger !== "view-progress";
 }
-function N(t, e, n, i, s) {
-  if (t) {
-    if (S(i) && (e.duration = e.duration || 1, s?.reducedMotion))
-      if (e.iterations === 1 || e.iterations == null)
-        e = { ...e, duration: 1 };
+function N(e, t, n, i, s) {
+  if (e) {
+    if (S(i) && (t.duration = t.duration || 1, s?.reducedMotion))
+      if (t.iterations === 1 || t.iterations == null)
+        t = { ...t, duration: 1 };
       else
         return [];
     let r;
-    return n instanceof HTMLElement && (r = { measure: L(n), mutate: j(n) }), t.web ? t.web(e, r, s) : t(e, r, s);
+    return n instanceof HTMLElement && (r = { measure: L(n), mutate: j(n) }), e.web ? e.web(t, r, s) : e(t, r, s);
   }
   return [];
 }
-function W(t, e, n, i, s) {
-  const r = t instanceof HTMLElement ? t : w(t, s);
-  if (n?.trigger === "pointer-move" && !e.keyframeEffect) {
-    let f = e;
-    e.customEffect && (f = {
-      ...e,
+function W(e, t, n, i, s) {
+  const r = e instanceof HTMLElement ? e : w(e, s);
+  if (n?.trigger === "pointer-move" && !t.keyframeEffect) {
+    let f = t;
+    t.customEffect && (f = {
+      ...t,
       namedEffect: { id: "", type: "CustomMouse" }
     });
-    const p = O(
+    const p = I(
       f
     ), h = N(
       p,
-      e,
+      t,
       r,
       n,
       i
     );
     return typeof h != "function" ? null : h(r);
   }
-  const c = O(e), a = N(
+  const c = I(t), a = N(
     c,
-    e,
+    t,
     r,
     n,
     i
   );
   if (!a || a.length === 0)
     return null;
-  const m = H(a, n, e.effectId);
+  const m = H(a, n, t.effectId);
   let l;
   const o = n?.trigger === "view-progress";
   o && window.ViewTimeline && (l = new ViewTimeline({
@@ -748,7 +754,7 @@ function W(t, e, n, i, s) {
           b.rangeStart = _, b.rangeEnd = T, b.play();
         });
       else {
-        const { startOffset: _, endOffset: T } = e;
+        const { startOffset: _, endOffset: T } = t;
         E.mutate(() => {
           const q = f.startOffset || _, P = f.endOffset || T;
           Object.assign(b, {
@@ -767,29 +773,29 @@ function W(t, e, n, i, s) {
       }
     return h && (b.id = h), b;
   });
-  return new I(u, {
-    ...e,
+  return new O(u, {
+    ...t,
     trigger: { ...n || {} },
     // make sure the group is ready after all animation targets are measured and mutated
     measured: new Promise((f) => E.mutate(f))
   });
 }
-function $t(t, e) {
-  return t ? `#${t}${e ? `[data-motion-part~="${e}"]` : ""}` : "";
+function $t(e, t) {
+  return e ? `#${e}${t ? `[data-motion-part~="${t}"]` : ""}` : "";
 }
-function St(t, e) {
-  const { duration: n, delay: i, iterations: s = 1, fill: r, easing: c = "linear", direction: a } = t.options, m = t.effect.name, l = n === "auto";
-  return `${m} ${l ? "auto" : `${n}ms`}${l ? " " : ` ${i || 1}ms `}${c}${r && r !== "none" ? ` ${r}` : ""} ${!s || s === 1 / 0 ? "infinite" : s}${a === "normal" ? "" : ` ${a}`} ${e ? "" : "paused"}`;
+function St(e, t) {
+  const { duration: n, delay: i, iterations: s = 1, fill: r, easing: c = "linear", direction: a } = e.options, m = e.effect.name, l = n === "auto";
+  return `${m} ${l ? "auto" : `${n}ms`}${l ? " " : ` ${i || 1}ms `}${c}${r && r !== "none" ? ` ${r}` : ""} ${!s || s === 1 / 0 ? "infinite" : s}${a === "normal" ? "" : ` ${a}`} ${t ? "" : "paused"}`;
 }
-function qt(t, e, n) {
-  return t?.style ? (S(n) && (e.duration = e.duration || 1), t.style(e)) : [];
+function qt(e, t, n) {
+  return e?.style ? (S(n) && (t.duration = t.duration || 1), e.style(t)) : [];
 }
-function Gt(t, e, n) {
-  const i = O(e), s = qt(i, e), r = H(s, n, e.effectId, !0), c = n?.trigger === "view-progress";
+function Gt(e, t, n) {
+  const i = I(t), s = qt(i, t), r = H(s, n, t.effectId, !0), c = n?.trigger === "view-progress";
   return r.map((a, m) => {
     const { start: l, end: o } = c ? R(a.effect) : {};
     return {
-      target: $t(t, a.part),
+      target: $t(e, a.part),
       animation: St(a, c),
       composition: a.options.composite,
       custom: a.effect.custom,
@@ -801,36 +807,36 @@ function Gt(t, e, n) {
     };
   });
 }
-function Pt(t, e, n) {
-  const i = O(e), s = t instanceof HTMLElement ? t : w(t);
+function Pt(e, t, n) {
+  const i = I(t), s = e instanceof HTMLElement ? e : w(e);
   if (i && i.prepare && s) {
     const r = { measure: L(s), mutate: j(s) };
-    i.prepare(e, r);
+    i.prepare(t, r);
   }
   n && E.mutate(n);
 }
-function Ct(t, e) {
-  const n = O(e);
+function Ct(e, t) {
+  const n = I(t);
   if (!n)
     return null;
   if (!n.style)
-    return e.effectId && t ? zt(t, e.effectId) : null;
-  const i = n.getNames(e), r = (typeof t == "string" ? w(t) : t)?.getAnimations(), c = r?.map((m) => m.animationName) || [], a = [];
+    return t.effectId && e ? zt(e, t.effectId) : null;
+  const i = n.getNames(t), r = (typeof e == "string" ? w(e) : e)?.getAnimations(), c = r?.map((m) => m.animationName) || [], a = [];
   return i.forEach((m) => {
     c.includes(m) && a.push(
       r?.find((l) => l.animationName === m)
     );
-  }), a?.length ? new I(a) : null;
+  }), a?.length ? new O(a) : null;
 }
-function zt(t, e) {
-  const i = (typeof t == "string" ? w(t) : t)?.getAnimations().filter((s) => {
+function zt(e, t) {
+  const i = (typeof e == "string" ? w(e) : e)?.getAnimations().filter((s) => {
     const r = s.id || s.animationName;
-    return r ? r.startsWith(e) : !0;
+    return r ? r.startsWith(t) : !0;
   });
-  return i?.length ? new I(i) : null;
+  return i?.length ? new O(i) : null;
 }
-function Dt(t, e, n, i = {}) {
-  const { disabled: s, allowActiveEvent: r, ...c } = i, a = W(t, e, n, c);
+function Dt(e, t, n, i = {}) {
+  const { disabled: s, allowActiveEvent: r, ...c } = i, a = W(e, t, n, c);
   if (!a)
     return null;
   let m = {};
@@ -860,7 +866,7 @@ function Dt(t, e, n, i = {}) {
       }
     }));
   } else if (n.trigger === "pointer-move") {
-    const l = e, { centeredToTarget: o, transitionDuration: u, transitionEasing: f } = l, p = n.axis;
+    const l = t, { centeredToTarget: o, transitionDuration: u, transitionEasing: f } = l, p = n.axis;
     if (l.keyframeEffect) {
       const h = a;
       return h.animations?.length === 0 ? null : {
@@ -884,7 +890,7 @@ function Dt(t, e, n, i = {}) {
     m = {
       centeredToTarget: o,
       allowActiveEvent: r
-    }, e.customEffect && u && (m.transitionDuration = u, m.transitionEasing = D(f)), m.target = a.target;
+    }, t.customEffect && u && (m.transitionDuration = u, m.transitionEasing = D(f)), m.target = a.target;
   }
   return {
     ...m,
@@ -907,34 +913,34 @@ function Dt(t, e, n, i = {}) {
     }
   };
 }
-function Ft(t, e, n, i = !1) {
-  const s = Ct(t, e);
+function Ft(e, t, n, i = !1) {
+  const s = Ct(e, t);
   return s ? (s.ready = new Promise((r) => {
-    Pt(t, e, r);
-  }), s) : W(t, e, n, { reducedMotion: i });
+    Pt(e, t, r);
+  }), s) : W(e, t, n, { reducedMotion: i });
 }
-function xt(t) {
-  return t === null ? [null] : typeof t == "string" ? Array.from(document.querySelectorAll(t)) : Array.isArray(t) ? t : [t];
+function xt(e) {
+  return e === null ? [null] : typeof e == "string" ? Array.from(document.querySelectorAll(e)) : Array.isArray(e) ? e : [e];
 }
-function Mt(t, e) {
+function Mt(e, t) {
   const n = [];
-  for (const { target: i, options: s } of t) {
+  for (const { target: i, options: s } of e) {
     const r = xt(i);
     for (const c of r) {
       const a = Ft(
         c,
         s,
         void 0,
-        e?.reducedMotion
+        t?.reducedMotion
       );
-      a instanceof I && n.push(a);
+      a instanceof O && n.push(a);
     }
   }
   return n;
 }
-function Rt(t, e, n) {
-  const i = Mt(e, n);
-  return new Et(i, t);
+function Rt(e, t, n) {
+  const i = Mt(t, n);
+  return new Et(i, e);
 }
 export {
   lt as backIn,