@tenerife.music/ui 1.2.0 → 2.0.0

package/dist/preset.mjs

@@ -124,7 +124,7 @@ var tailwindThemeColors = {
 };
 
 // src/FOUNDATION/tokens/motion/v2.ts
-var motionV2Durations = {
+var motionDurations = {
   fast: "150ms",
   // Quick interactions
   normal: "250ms",
@@ -134,7 +134,7 @@ var motionV2Durations = {
   reduced: "0ms"
   // For prefers-reduced-motion
 };
-var motionV2Easings = {
+var motionEasings = {
   soft: "cubic-bezier(0.22, 1, 0.36, 1)",
   // Gentle, smooth
   standard: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -142,366 +142,166 @@ var motionV2Easings = {
   emphasized: "cubic-bezier(0.2, 0, 0, 1)"
   // Strong, decisive
 };
-var motionV2Fade = {
+var motionFade = {
   in: {
-    from: { opacity: 0 },
-    to: { opacity: 1 }
+    from: { opacity: "0" },
+    to: { opacity: "1" }
   },
   out: {
-    from: { opacity: 1 },
-    to: { opacity: 0 }
+    from: { opacity: "1" },
+    to: { opacity: "0" }
   }
 };
-var motionV2Scale = {
+var motionScale = {
   in: {
-    from: { transform: "scale(0.95)", opacity: 0 },
-    to: { transform: "scale(1)", opacity: 1 }
+    from: { transform: "scale(0.95)", opacity: "0" },
+    to: { transform: "scale(1)", opacity: "1" }
   },
   out: {
-    from: { transform: "scale(1)", opacity: 1 },
-    to: { transform: "scale(0.95)", opacity: 0 }
+    from: { transform: "scale(1)", opacity: "1" },
+    to: { transform: "scale(0.95)", opacity: "0" }
   }
 };
-var motionV2Slide = {
+var motionSlide = {
   up: {
     in: {
-      from: { transform: "translateY(100%)", opacity: 0 },
-      to: { transform: "translateY(0)", opacity: 1 }
+      from: { transform: "translateY(100%)", opacity: "0" },
+      to: { transform: "translateY(0)", opacity: "1" }
     },
     out: {
-      from: { transform: "translateY(0)", opacity: 1 },
-      to: { transform: "translateY(100%)", opacity: 0 }
+      from: { transform: "translateY(0)", opacity: "1" },
+      to: { transform: "translateY(100%)", opacity: "0" }
     }
   },
   down: {
     in: {
-      from: { transform: "translateY(-100%)", opacity: 0 },
-      to: { transform: "translateY(0)", opacity: 1 }
+      from: { transform: "translateY(-100%)", opacity: "0" },
+      to: { transform: "translateY(0)", opacity: "1" }
     },
     out: {
-      from: { transform: "translateY(0)", opacity: 1 },
-      to: { transform: "translateY(-100%)", opacity: 0 }
+      from: { transform: "translateY(0)", opacity: "1" },
+      to: { transform: "translateY(-100%)", opacity: "0" }
     }
   },
   left: {
     in: {
-      from: { transform: "translateX(100%)", opacity: 0 },
-      to: { transform: "translateX(0)", opacity: 1 }
+      from: { transform: "translateX(100%)", opacity: "0" },
+      to: { transform: "translateX(0)", opacity: "1" }
     },
     out: {
-      from: { transform: "translateX(0)", opacity: 1 },
-      to: { transform: "translateX(100%)", opacity: 0 }
+      from: { transform: "translateX(0)", opacity: "1" },
+      to: { transform: "translateX(100%)", opacity: "0" }
     }
   },
   right: {
     in: {
-      from: { transform: "translateX(-100%)", opacity: 0 },
-      to: { transform: "translateX(0)", opacity: 1 }
+      from: { transform: "translateX(-100%)", opacity: "0" },
+      to: { transform: "translateX(0)", opacity: "1" }
     },
     out: {
-      from: { transform: "translateX(0)", opacity: 1 },
-      to: { transform: "translateX(-100%)", opacity: 0 }
+      from: { transform: "translateX(0)", opacity: "1" },
+      to: { transform: "translateX(-100%)", opacity: "0" }
     }
   }
 };
-var motionV2Combined = {
+var motionCombined = {
   fadeScale: {
     in: {
-      from: { transform: "scale(0.95)", opacity: 0 },
-      to: { transform: "scale(1)", opacity: 1 }
+      from: { transform: "scale(0.95)", opacity: "0" },
+      to: { transform: "scale(1)", opacity: "1" }
     },
     out: {
-      from: { transform: "scale(1)", opacity: 1 },
-      to: { transform: "scale(0.95)", opacity: 0 }
+      from: { transform: "scale(1)", opacity: "1" },
+      to: { transform: "scale(0.95)", opacity: "0" }
     }
   },
   fadeSlideUp: {
     in: {
-      from: { transform: "translateY(100%)", opacity: 0 },
-      to: { transform: "translateY(0)", opacity: 1 }
+      from: { transform: "translateY(100%)", opacity: "0" },
+      to: { transform: "translateY(0)", opacity: "1" }
     },
     out: {
-      from: { transform: "translateY(0)", opacity: 1 },
-      to: { transform: "translateY(100%)", opacity: 0 }
+      from: { transform: "translateY(0)", opacity: "1" },
+      to: { transform: "translateY(100%)", opacity: "0" }
     }
   },
   fadeSlideDown: {
     in: {
-      from: { transform: "translateY(-100%)", opacity: 0 },
-      to: { transform: "translateY(0)", opacity: 1 }
+      from: { transform: "translateY(-100%)", opacity: "0" },
+      to: { transform: "translateY(0)", opacity: "1" }
     },
     out: {
-      from: { transform: "translateY(0)", opacity: 1 },
-      to: { transform: "translateY(-100%)", opacity: 0 }
+      from: { transform: "translateY(0)", opacity: "1" },
+      to: { transform: "translateY(-100%)", opacity: "0" }
     }
   },
   fadeSlideLeft: {
     in: {
-      from: { transform: "translateX(100%)", opacity: 0 },
-      to: { transform: "translateX(0)", opacity: 1 }
+      from: { transform: "translateX(100%)", opacity: "0" },
+      to: { transform: "translateX(0)", opacity: "1" }
     },
     out: {
-      from: { transform: "translateX(0)", opacity: 1 },
-      to: { transform: "translateX(100%)", opacity: 0 }
+      from: { transform: "translateX(0)", opacity: "1" },
+      to: { transform: "translateX(100%)", opacity: "0" }
     }
   },
   fadeSlideRight: {
     in: {
-      from: { transform: "translateX(-100%)", opacity: 0 },
-      to: { transform: "translateX(0)", opacity: 1 }
+      from: { transform: "translateX(-100%)", opacity: "0" },
+      to: { transform: "translateX(0)", opacity: "1" }
     },
     out: {
-      from: { transform: "translateX(0)", opacity: 1 },
-      to: { transform: "translateX(-100%)", opacity: 0 }
+      from: { transform: "translateX(0)", opacity: "1" },
+      to: { transform: "translateX(-100%)", opacity: "0" }
     }
   }
 };
-var motionV2TailwindConfig = {
+var motionTransitionProperty = {
+  DEFAULT: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+  colors: "color, background-color, border-color, text-decoration-color, fill, stroke",
+  opacity: "opacity",
+  shadow: "box-shadow",
+  transform: "transform",
+  all: "all",
+  none: "none"
+};
+var motionTailwindConfig = {
   transitionDuration: {
-    ...motionV2Durations
+    ...motionDurations
   },
   transitionTimingFunction: {
-    ...motionV2Easings
+    ...motionEasings
+  },
+  transitionProperty: {
+    ...motionTransitionProperty
   },
   keyframes: {
     // Fade
-    "fade-in": motionV2Fade.in,
-    "fade-out": motionV2Fade.out,
+    "fade-in": motionFade.in,
+    "fade-out": motionFade.out,
     // Scale
-    "scale-in": motionV2Scale.in,
-    "scale-out": motionV2Scale.out,
+    "scale-in": motionScale.in,
+    "scale-out": motionScale.out,
     // Slide
-    "slide-up-in": motionV2Slide.up.in,
-    "slide-up-out": motionV2Slide.up.out,
-    "slide-down-in": motionV2Slide.down.in,
-    "slide-down-out": motionV2Slide.down.out,
-    "slide-left-in": motionV2Slide.left.in,
-    "slide-left-out": motionV2Slide.left.out,
-    "slide-right-in": motionV2Slide.right.in,
-    "slide-right-out": motionV2Slide.right.out,
+    "slide-up-in": motionSlide.up.in,
+    "slide-up-out": motionSlide.up.out,
+    "slide-down-in": motionSlide.down.in,
+    "slide-down-out": motionSlide.down.out,
+    "slide-left-in": motionSlide.left.in,
+    "slide-left-out": motionSlide.left.out,
+    "slide-right-in": motionSlide.right.in,
+    "slide-right-out": motionSlide.right.out,
     // Combined
-    "fade-scale-in": motionV2Combined.fadeScale.in,
-    "fade-scale-out": motionV2Combined.fadeScale.out,
-    "fade-slide-up-in": motionV2Combined.fadeSlideUp.in,
-    "fade-slide-up-out": motionV2Combined.fadeSlideUp.out,
-    "fade-slide-down-in": motionV2Combined.fadeSlideDown.in,
-    "fade-slide-down-out": motionV2Combined.fadeSlideDown.out,
-    "fade-slide-left-in": motionV2Combined.fadeSlideLeft.in,
-    "fade-slide-left-out": motionV2Combined.fadeSlideLeft.out,
-    "fade-slide-right-in": motionV2Combined.fadeSlideRight.in,
-    "fade-slide-right-out": motionV2Combined.fadeSlideRight.out
-  }
-};
-
-// src/FOUNDATION/tokens/motion.ts
-var durations = {
-  instant: "0ms",
-  fast: "150ms",
-  // 1.5 × base (quick interactions)
-  normal: "300ms",
-  // 3 × base (default)
-  slow: "500ms",
-  // 5 × base (emphasized)
-  slower: "700ms",
-  // 7 × base (very emphasized)
-  slowest: "1000ms",
-  // 10 × base (maximum emphasis)
-  // Additional granular durations
-  "75": "75ms",
-  // Ultra-fast
-  "100": "100ms",
-  // Base unit
-  "200": "200ms",
-  // Fast-normal
-  "250": "250ms",
-  // Between fast and normal
-  "400": "400ms",
-  // Between normal and slow
-  "600": "600ms",
-  // Between slow and slower
-  "800": "800ms"
-  // Between slower and slowest
-};
-var easings = {
-  // Linear (no easing)
-  linear: "linear",
-  // Ease-in (accelerate) - cubic-bezier
-  "ease-in": "cubic-bezier(0.4, 0, 1, 1)",
-  // Ease-out (decelerate) - recommended for most UI - cubic-bezier
-  "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
-  // Ease-in-out (accelerate and decelerate)
-  "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
-  // Standard easing functions
-  ease: "ease",
-  // Advanced easing functions
-  bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
-  elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-  // Material Design easing
-  "ease-out-cubic": "cubic-bezier(0.215, 0.61, 0.355, 1)",
-  "ease-in-cubic": "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
-  "ease-in-out-cubic": "cubic-bezier(0.645, 0.045, 0.355, 1)"
-};
-var keyframes = {
-  // Fade animations
-  fadeIn: {
-    from: { opacity: "0" },
-    to: { opacity: "1" }
-  },
-  fadeOut: {
-    from: { opacity: "1" },
-    to: { opacity: "0" }
-  },
-  // Slide animations
-  slideInUp: {
-    from: { transform: "translateY(100%)", opacity: "0" },
-    to: { transform: "translateY(0)", opacity: "1" }
-  },
-  slideInDown: {
-    from: { transform: "translateY(-100%)", opacity: "0" },
-    to: { transform: "translateY(0)", opacity: "1" }
-  },
-  slideInLeft: {
-    from: { transform: "translateX(-100%)", opacity: "0" },
-    to: { transform: "translateX(0)", opacity: "1" }
-  },
-  slideInRight: {
-    from: { transform: "translateX(100%)", opacity: "0" },
-    to: { transform: "translateX(0)", opacity: "1" }
-  },
-  slideOutUp: {
-    from: { transform: "translateY(0)", opacity: "1" },
-    to: { transform: "translateY(-100%)", opacity: "0" }
-  },
-  slideOutDown: {
-    from: { transform: "translateY(0)", opacity: "1" },
-    to: { transform: "translateY(100%)", opacity: "0" }
-  },
-  slideOutLeft: {
-    from: { transform: "translateX(0)", opacity: "1" },
-    to: { transform: "translateX(-100%)", opacity: "0" }
-  },
-  slideOutRight: {
-    from: { transform: "translateX(0)", opacity: "1" },
-    to: { transform: "translateX(100%)", opacity: "0" }
-  },
-  // Scale animations
-  scaleIn: {
-    from: { transform: "scale(0.95)", opacity: "0" },
-    to: { transform: "scale(1)", opacity: "1" }
-  },
-  scaleOut: {
-    from: { transform: "scale(1)", opacity: "1" },
-    to: { transform: "scale(0.95)", opacity: "0" }
-  },
-  scaleUp: {
-    from: { transform: "scale(1)" },
-    to: { transform: "scale(1.05)" }
-  },
-  scaleDown: {
-    from: { transform: "scale(1.05)" },
-    to: { transform: "scale(1)" }
-  },
-  // Rotation animations
-  spin: {
-    from: { transform: "rotate(0deg)" },
-    to: { transform: "rotate(360deg)" }
-  },
-  spinReverse: {
-    from: { transform: "rotate(360deg)" },
-    to: { transform: "rotate(0deg)" }
-  },
-  // Pulse and bounce
-  pulse: {
-    "0%, 100%": { opacity: "1" },
-    "50%": { opacity: "0.5" }
-  },
-  bounce: {
-    "0%, 100%": {
-      transform: "translateY(-25%)",
-      animationTimingFunction: "cubic-bezier(0.8, 0, 1, 1)"
-    },
-    "50%": {
-      transform: "translateY(0)",
-      animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)"
-    }
-  },
-  // Shake animation
-  shake: {
-    "0%, 100%": { transform: "translateX(0)" },
-    "10%, 30%, 50%, 70%, 90%": { transform: "translateX(-4px)" },
-    "20%, 40%, 60%, 80%": { transform: "translateX(4px)" }
-  },
-  // Ping animation
-  ping: {
-    "75%, 100%": {
-      transform: "scale(2)",
-      opacity: "0"
-    }
-  },
-  // Accordion animations (for Radix UI)
-  "accordion-down": {
-    from: { height: "0" },
-    to: { height: "var(--radix-accordion-content-height)" }
-  },
-  "accordion-up": {
-    from: { height: "var(--radix-accordion-content-height)" },
-    to: { height: "0" }
-  }
-};
-var animations = {
-  // Fade animations
-  fadeIn: `fadeIn ${durations.normal} ${easings["ease-out"]}`,
-  fadeOut: `fadeOut ${durations.fast} ${easings["ease-in"]}`,
-  // Slide animations
-  slideInUp: `slideInUp ${durations.normal} ${easings["ease-out"]}`,
-  slideInDown: `slideInDown ${durations.normal} ${easings["ease-out"]}`,
-  slideInLeft: `slideInLeft ${durations.normal} ${easings["ease-out"]}`,
-  slideInRight: `slideInRight ${durations.normal} ${easings["ease-out"]}`,
-  slideOutUp: `slideOutUp ${durations.fast} ${easings["ease-in"]}`,
-  slideOutDown: `slideOutDown ${durations.fast} ${easings["ease-in"]}`,
-  slideOutLeft: `slideOutLeft ${durations.fast} ${easings["ease-in"]}`,
-  slideOutRight: `slideOutRight ${durations.fast} ${easings["ease-in"]}`,
-  // Scale animations
-  scaleIn: `scaleIn ${durations.normal} ${easings["ease-out"]}`,
-  scaleOut: `scaleOut ${durations.fast} ${easings["ease-in"]}`,
-  // Continuous animations
-  spin: `spin 1s ${easings.linear} infinite`,
-  pulse: `pulse 2s ${easings["ease-in-out"]} infinite`,
-  bounce: `bounce 1s ${easings.linear} infinite`,
-  ping: `ping 1s ${easings["ease-out"]} cubic-bezier(0, 0, 0.2, 1) infinite`,
-  shake: `shake 0.5s ${easings["ease-in-out"]}`,
-  // Accordion animations
-  "accordion-down": `accordion-down ${durations.normal} ${easings["ease-out"]}`,
-  "accordion-up": `accordion-up ${durations.normal} ${easings["ease-out"]}`
-};
-var tailwindMotionConfig = {
-  transitionDuration: {
-    ...durations
-  },
-  transitionTimingFunction: {
-    ...easings
-  },
-  transitionProperty: {
-    DEFAULT: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
-    colors: "color, background-color, border-color, text-decoration-color, fill, stroke",
-    opacity: "opacity",
-    shadow: "box-shadow",
-    transform: "transform",
-    all: "all",
-    none: "none"
-  },
-  keyframes: {
-    ...keyframes
-  },
-  animation: {
-    ...animations,
-    // Additional animation utilities
-    none: "none",
-    spin: animations.spin,
-    pulse: animations.pulse,
-    bounce: animations.bounce,
-    ping: animations.ping,
-    shake: animations.shake
+    "fade-scale-in": motionCombined.fadeScale.in,
+    "fade-scale-out": motionCombined.fadeScale.out,
+    "fade-slide-up-in": motionCombined.fadeSlideUp.in,
+    "fade-slide-up-out": motionCombined.fadeSlideUp.out,
+    "fade-slide-down-in": motionCombined.fadeSlideDown.in,
+    "fade-slide-down-out": motionCombined.fadeSlideDown.out,
+    "fade-slide-left-in": motionCombined.fadeSlideLeft.in,
+    "fade-slide-left-out": motionCombined.fadeSlideLeft.out,
+    "fade-slide-right-in": motionCombined.fadeSlideRight.in,
+    "fade-slide-right-out": motionCombined.fadeSlideRight.out
   }
 };
 
@@ -1119,23 +919,31 @@ var preset = {
       ringColor: tailwindShadowConfig.ringColor,
       // Token-based border radius from tokens/radius
       borderRadius: tailwindRadiusConfig.borderRadius,
-      // Token-based motion from tokens/motion
-      transitionDuration: {
-        ...tailwindMotionConfig.transitionDuration,
-        ...motionV2TailwindConfig.transitionDuration
-      },
-      transitionTimingFunction: {
-        ...tailwindMotionConfig.transitionTimingFunction,
-        ...motionV2TailwindConfig.transitionTimingFunction
-      },
-      transitionProperty: tailwindMotionConfig.transitionProperty,
-      keyframes: {
-        ...tailwindMotionConfig.keyframes,
-        ...motionV2TailwindConfig.keyframes
-      },
+      // Token-based motion
+      transitionDuration: motionTailwindConfig.transitionDuration,
+      transitionTimingFunction: motionTailwindConfig.transitionTimingFunction,
+      transitionProperty: motionTailwindConfig.transitionProperty,
+      keyframes: motionTailwindConfig.keyframes,
       animation: {
-        ...tailwindMotionConfig.animation,
-        ...motionV2TailwindConfig.keyframes
+        // Motion animations - map keyframes to animation utilities
+        "fade-in": `fade-in ${motionDurations.normal} ${motionEasings.standard}`,
+        "fade-out": `fade-out ${motionDurations.fast} ${motionEasings.standard}`,
+        "scale-in": `scale-in ${motionDurations.normal} ${motionEasings.standard}`,
+        "scale-out": `scale-out ${motionDurations.fast} ${motionEasings.standard}`,
+        "slide-up-in": `slide-up-in ${motionDurations.normal} ${motionEasings.standard}`,
+        "slide-down-in": `slide-down-in ${motionDurations.normal} ${motionEasings.standard}`,
+        "slide-left-in": `slide-left-in ${motionDurations.normal} ${motionEasings.standard}`,
+        "slide-right-in": `slide-right-in ${motionDurations.normal} ${motionEasings.standard}`,
+        "fade-scale-in": `fade-scale-in ${motionDurations.normal} ${motionEasings.standard}`,
+        "fade-slide-up-in": `fade-slide-up-in ${motionDurations.normal} ${motionEasings.standard}`,
+        "fade-slide-down-in": `fade-slide-down-in ${motionDurations.normal} ${motionEasings.standard}`,
+        "fade-slide-left-in": `fade-slide-left-in ${motionDurations.normal} ${motionEasings.standard}`,
+        "fade-slide-right-in": `fade-slide-right-in ${motionDurations.normal} ${motionEasings.standard}`,
+        "fade-scale-out": `fade-scale-out ${motionDurations.fast} ${motionEasings.standard}`,
+        "fade-slide-up-out": `fade-slide-up-out ${motionDurations.fast} ${motionEasings.standard}`,
+        "fade-slide-down-out": `fade-slide-down-out ${motionDurations.fast} ${motionEasings.standard}`,
+        "fade-slide-left-out": `fade-slide-left-out ${motionDurations.fast} ${motionEasings.standard}`,
+        "fade-slide-right-out": `fade-slide-right-out ${motionDurations.fast} ${motionEasings.standard}`
       }
     }
   },
@@ -1144,62 +952,62 @@ var preset = {
       addUtilities({
         // Fade animations
         ".tm-motion-fade-in": {
-          animation: `fade-in var(--motion-duration-normal) var(--motion-easing-standard)`
+          animation: `fade-in var(--motion-duration-normal) var(--motion-easing-standard) both`
         },
         ".tm-motion-fade-out": {
-          animation: `fade-out var(--motion-duration-fast) var(--motion-easing-standard)`
+          animation: `fade-out var(--motion-duration-fast) var(--motion-easing-standard) both`
         },
         // Scale animations
         ".tm-motion-scale-in": {
-          animation: `scale-in var(--motion-duration-normal) var(--motion-easing-standard)`
+          animation: `scale-in var(--motion-duration-normal) var(--motion-easing-standard) both`
         },
         ".tm-motion-scale-out": {
-          animation: `scale-out var(--motion-duration-fast) var(--motion-easing-standard)`
+          animation: `scale-out var(--motion-duration-fast) var(--motion-easing-standard) both`
         },
         // Slide animations
         ".tm-motion-slide-up": {
-          animation: `slide-up-in var(--motion-duration-normal) var(--motion-easing-standard)`
+          animation: `slide-up-in var(--motion-duration-normal) var(--motion-easing-standard) both`
         },
         ".tm-motion-slide-down": {
-          animation: `slide-down-in var(--motion-duration-normal) var(--motion-easing-standard)`
+          animation: `slide-down-in var(--motion-duration-normal) var(--motion-easing-standard) both`
         },
         ".tm-motion-slide-left": {
-          animation: `slide-left-in var(--motion-duration-normal) var(--motion-easing-standard)`
+          animation: `slide-left-in var(--motion-duration-normal) var(--motion-easing-standard) both`
         },
         ".tm-motion-slide-right": {
-          animation: `slide-right-in var(--motion-duration-normal) var(--motion-easing-standard)`
+          animation: `slide-right-in var(--motion-duration-normal) var(--motion-easing-standard) both`
         },
         // Compound animations
         ".tm-motion-fade-scale": {
-          animation: `fade-scale-in var(--motion-duration-normal) var(--motion-easing-standard)`
+          animation: `fade-scale-in var(--motion-duration-normal) var(--motion-easing-standard) both`
         },
         ".tm-motion-fade-slide-up": {
-          animation: `fade-slide-up-in var(--motion-duration-normal) var(--motion-easing-standard)`
+          animation: `fade-slide-up-in var(--motion-duration-normal) var(--motion-easing-standard) both`
         },
         ".tm-motion-fade-slide-down": {
-          animation: `fade-slide-down-in var(--motion-duration-normal) var(--motion-easing-standard)`
+          animation: `fade-slide-down-in var(--motion-duration-normal) var(--motion-easing-standard) both`
         },
         ".tm-motion-fade-slide-left": {
-          animation: `fade-slide-left-in var(--motion-duration-normal) var(--motion-easing-standard)`
+          animation: `fade-slide-left-in var(--motion-duration-normal) var(--motion-easing-standard) both`
         },
         ".tm-motion-fade-slide-right": {
-          animation: `fade-slide-right-in var(--motion-duration-normal) var(--motion-easing-standard)`
+          animation: `fade-slide-right-in var(--motion-duration-normal) var(--motion-easing-standard) both`
         },
         // Exit animations (for use with data attributes or state classes)
         ".tm-motion-fade-scale-out": {
-          animation: `fade-scale-out var(--motion-duration-fast) var(--motion-easing-standard)`
+          animation: `fade-scale-out var(--motion-duration-fast) var(--motion-easing-standard) both`
         },
         ".tm-motion-fade-slide-up-out": {
-          animation: `fade-slide-up-out var(--motion-duration-fast) var(--motion-easing-standard)`
+          animation: `fade-slide-up-out var(--motion-duration-fast) var(--motion-easing-standard) both`
         },
         ".tm-motion-fade-slide-down-out": {
-          animation: `fade-slide-down-out var(--motion-duration-fast) var(--motion-easing-standard)`
+          animation: `fade-slide-down-out var(--motion-duration-fast) var(--motion-easing-standard) both`
         },
         ".tm-motion-fade-slide-left-out": {
-          animation: `fade-slide-left-out var(--motion-duration-fast) var(--motion-easing-standard)`
+          animation: `fade-slide-left-out var(--motion-duration-fast) var(--motion-easing-standard) both`
         },
         ".tm-motion-fade-slide-right-out": {
-          animation: `fade-slide-right-out var(--motion-duration-fast) var(--motion-easing-standard)`
+          animation: `fade-slide-right-out var(--motion-duration-fast) var(--motion-easing-standard) both`
         },
         // Hover animations
         ".tm-motion-hover-lift": {