@humanspeak/svelte-motion 0.4.6 → 0.4.7

package/README.md

@@ -36,18 +36,18 @@ npm install @humanspeak/svelte-motion
 
 Goal: Framer Motion API parity for Svelte where common React examples can be translated with minimal changes.
 
-| Capability                                                | Status                          |
-| --------------------------------------------------------- | ------------------------------- |
-| `initial` / `animate` / `transition`                      | Supported                       |
-| `variants` (string keys + inheritance)                    | Supported                       |
-| `whileHover` / `whileTap` / `whileFocus` / `whileInView`  | Supported                       |
-| Drag (`drag`, constraints, momentum, controls, callbacks) | Supported                       |
-| `AnimatePresence` (`initial`, `mode`, `onExitComplete`)   | Supported                       |
-| Layout (`layout`, `layout="position"`)                    | Supported (single-element FLIP) |
-| Shared layout (`layoutId`, `LayoutGroup`, `layoutScroll`) | Supported                       |
-| Pan gesture API (`whilePan`, `onPan*`)                    | Not yet supported               |
-| `MotionConfig` parity beyond `transition`                 | Partial                         |
-| `reducedMotion`, `features`, `transformPagePoint`         | Not yet supported               |
+| Capability                                                             | Status                                     |
+| ---------------------------------------------------------------------- | ------------------------------------------ |
+| `initial` / `animate` / `transition`                                   | Supported                                  |
+| `variants` (string keys + inheritance, function-form `custom`)         | Supported                                  |
+| `whileHover` / `whileTap` / `whileFocus` / `whileDrag` / `whileInView` | Supported (inline + variant keys / arrays) |
+| Drag (`drag`, constraints, momentum, controls, callbacks)              | Supported                                  |
+| `AnimatePresence` (`initial`, `mode`, `onExitComplete`)                | Supported                                  |
+| Layout (`layout`, `layout="position"`)                                 | Supported (single-element FLIP)            |
+| Shared layout (`layoutId`, `LayoutGroup`, `layoutScroll`)              | Supported                                  |
+| Pan gesture API (`whilePan`, `onPan*`)                                 | Not yet supported                          |
+| `MotionConfig` parity beyond `transition`                              | Partial                                    |
+| `reducedMotion`, `features`, `transformPagePoint`                      | Not yet supported                          |
 
 ## Supported elements
 

package/dist/html/_MotionContainer.svelte

@@ -48,7 +48,7 @@
     } from '../utils/presence'
     import { getInitialKeyframes } from '../utils/initial'
     import { attachDrag } from '../utils/drag'
-    import { resolveInitial, resolveAnimate, resolveExit } from '../utils/variants'
+    import { resolveInitial, resolveAnimate, resolveExit, resolveWhile } from '../utils/variants'
     import {
         setVariantContext,
         getVariantContext,
@@ -446,6 +446,19 @@
     )
     const resolvedExit = $derived(resolveExit(exitProp, variantsProp, effectiveCustom))
 
+    // Resolve `whileX` props against `variants` so each gesture's attach
+    // helper receives a plain keyframes object regardless of whether the
+    // consumer wrote inline keyframes, a variant key, or an array of
+    // variant keys. Mirrors framer-motion's `whileHover` etc. surface
+    // (#349).
+    const resolvedWhileTap = $derived(resolveWhile(whileTapProp, variantsProp, effectiveCustom))
+    const resolvedWhileHover = $derived(resolveWhile(whileHoverProp, variantsProp, effectiveCustom))
+    const resolvedWhileFocus = $derived(resolveWhile(whileFocusProp, variantsProp, effectiveCustom))
+    const resolvedWhileDrag = $derived(resolveWhile(whileDragProp, variantsProp, effectiveCustom))
+    const resolvedWhileInView = $derived(
+        resolveWhile(whileInViewProp, variantsProp, effectiveCustom)
+    )
+
     // Extract keyframes from resolved initial, handling initial={false}
     const initialKeyframes = $derived(
         filterReducedMotionKeyframes(
@@ -457,7 +470,12 @@
     // Derived attributes to keep both branches in sync (focusability, data flags, style, class)
     const derivedAttrs = $derived<Record<string, unknown>>({
         ...(rest as Record<string, unknown>),
-        ...(whileTapProp &&
+        // Gate on the *resolved* whileTap, not the raw prop. With
+        // variant-label support a truthy-but-unresolved value (unknown
+        // key, empty array) would otherwise add `tabindex=0` for an
+        // element that never actually receives a tap gesture — an
+        // unintended tab stop. (#349 CR feedback)
+        ...(isNotEmpty(resolvedWhileTap) &&
         !isNativelyFocusable(tag, rest as Record<string, unknown>) &&
         ((rest as Record<string, unknown>)?.tabindex ??
             (rest as Record<string, unknown>)?.tabIndex ??
@@ -541,7 +559,7 @@
             directionLock: !!dragDirectionLockProp,
             listener: dragListenerProp !== false,
             controls,
-            whileDrag: whileDragProp as MotionWhileDrag,
+            whileDrag: resolvedWhileDrag as MotionWhileDrag,
             mergedTransition: (mergedTransition ?? {}) as AnimationOptions,
             callbacks: {
                 onStart: onDragStartProp as (e: PointerEvent, info: DragInfo) => void,
@@ -801,18 +819,18 @@
 
     // whileTap handling via motion-dom's press()
     $effect(() => {
-        if (!(element && isLoaded === 'ready' && isNotEmpty(whileTapProp))) return
+        if (!(element && isLoaded === 'ready' && isNotEmpty(resolvedWhileTap))) return
         return attachWhileTap(
             element!,
-            (whileTapProp ?? {}) as Record<string, unknown>,
+            (resolvedWhileTap ?? {}) as Record<string, unknown>,
             (resolvedInitial ?? {}) as Record<string, unknown>,
             (resolvedAnimate ?? {}) as Record<string, unknown>,
             {
                 onTapStart: onTapStartProp,
                 onTap: onTapProp,
                 onTapCancel: onTapCancelProp,
-                hoverDef: isNotEmpty(whileHoverProp ?? {})
-                    ? ((whileHoverProp ?? {}) as Record<string, unknown>)
+                hoverDef: isNotEmpty(resolvedWhileHover ?? {})
+                    ? ((resolvedWhileHover ?? {}) as Record<string, unknown>)
                     : undefined,
                 hoverFallbackTransition: (mergedTransition ?? {}) as AnimationOptions
             }
@@ -821,10 +839,10 @@
 
     // whileHover handling, gated to true-hover devices to avoid sticky states on touch
     $effect(() => {
-        if (!(element && isLoaded === 'ready' && isNotEmpty(whileHoverProp))) return
+        if (!(element && isLoaded === 'ready' && isNotEmpty(resolvedWhileHover))) return
         return attachWhileHover(
             element!,
-            (whileHoverProp ?? {}) as Record<string, unknown>,
+            (resolvedWhileHover ?? {}) as Record<string, unknown>,
             (mergedTransition ?? {}) as AnimationOptions,
             { onStart: onHoverStartProp, onEnd: onHoverEndProp },
             {
@@ -836,10 +854,10 @@
 
     // whileFocus handling for keyboard focus interactions
     $effect(() => {
-        if (!(element && isLoaded === 'ready' && isNotEmpty(whileFocusProp))) return
+        if (!(element && isLoaded === 'ready' && isNotEmpty(resolvedWhileFocus))) return
         return attachWhileFocus(
             element!,
-            (whileFocusProp ?? {}) as Record<string, unknown>,
+            (resolvedWhileFocus ?? {}) as Record<string, unknown>,
             (mergedTransition ?? {}) as AnimationOptions,
             { onStart: onFocusStartProp, onEnd: onFocusEndProp },
             {
@@ -851,10 +869,10 @@
 
     // whileInView handling for viewport intersection
     $effect(() => {
-        if (!(element && isLoaded === 'ready' && isNotEmpty(whileInViewProp))) return
+        if (!(element && isLoaded === 'ready' && isNotEmpty(resolvedWhileInView))) return
         return attachWhileInView(
             element!,
-            (whileInViewProp ?? {}) as Record<string, unknown>,
+            (resolvedWhileInView ?? {}) as Record<string, unknown>,
             (mergedTransition ?? {}) as AnimationOptions,
             {
                 onStart: onInViewStartProp,

package/dist/types.d.ts

@@ -59,7 +59,7 @@ export type Variants = Record<string, Variant>;
  * <motion.div variants={myVariants} initial="hidden" animate="visible" />
  * ```
  */
-export type MotionInitial = DOMKeyframesDefinition | string | false | undefined;
+export type MotionInitial = DOMKeyframesDefinition | string | string[] | false | undefined;
 /**
  * Target animation properties for a motion component.
  *
@@ -74,7 +74,7 @@ export type MotionInitial = DOMKeyframesDefinition | string | false | undefined;
  * <motion.div variants={myVariants} animate="visible" />
  * ```
  */
-export type MotionAnimate = DOMKeyframesDefinition | string | undefined;
+export type MotionAnimate = DOMKeyframesDefinition | string | string[] | undefined;
 /**
  * Exit animation properties for a motion component when unmounted.
  *
@@ -91,7 +91,7 @@ export type MotionAnimate = DOMKeyframesDefinition | string | undefined;
  */
 export type MotionExit = (Record<string, unknown> & {
     transition?: AnimationOptions;
-}) | DOMKeyframesDefinition | string | undefined;
+}) | DOMKeyframesDefinition | string | string[] | undefined;
 /**
  * Animation transition configuration.
  * @example
@@ -111,52 +111,80 @@ export type MotionExit = (Record<string, unknown> & {
 export type MotionTransition = AnimationOptions | undefined;
 /**
  * Animation properties for tap/click interactions.
+ *
+ * Accepts inline keyframes, a variant key, or an array of variant keys
+ * (later entries override earlier ones on key collisions).
+ *
  * @example
  * ```svelte
  * <motion.button whileTap={{ scale: 0.95 }} />
+ *
+ * <!-- Variant key -->
+ * <motion.button variants={{ pressed: { scale: 0.95 } }} whileTap="pressed" />
+ *
+ * <!-- Array — later wins on conflicts -->
+ * <motion.button whileTap={["pressed", "muted"]} />
  * ```
  */
-export type MotionWhileTap = DOMKeyframesDefinition | undefined;
+export type MotionWhileTap = (Record<string, unknown> & {
+    transition?: AnimationOptions;
+}) | DOMKeyframesDefinition | string | string[] | undefined;
 /**
  * Animation properties for hover interactions.
+ *
+ * Accepts inline keyframes, a variant key, or an array of variant keys.
+ *
  * @example
  * ```svelte
  * <motion.div whileHover={{ scale: 1.05 }} />
+ *
+ * <!-- Variant key -->
+ * <motion.div variants={{ hover: { scale: 1.05 } }} whileHover="hover" />
  * ```
  */
 export type MotionWhileHover = (Record<string, unknown> & {
     transition?: AnimationOptions;
-}) | DOMKeyframesDefinition | undefined;
+}) | DOMKeyframesDefinition | string | string[] | undefined;
 /**
  * Animation properties for focus interactions.
+ *
+ * Accepts inline keyframes, a variant key, or an array of variant keys.
+ *
  * @example
  * ```svelte
  * <motion.button whileFocus={{ scale: 1.05 }} />
+ * <motion.button variants={{ active: { outline: '2px solid blue' } }} whileFocus="active" />
  * ```
  */
 export type MotionWhileFocus = (Record<string, unknown> & {
     transition?: AnimationOptions;
-}) | DOMKeyframesDefinition | undefined;
+}) | DOMKeyframesDefinition | string | string[] | undefined;
 /**
  * Animation properties for drag interactions.
  * When a drag gesture starts, the element animates to this state; when it ends,
  * it animates back to its baseline (from animate/initial), restoring only the changed keys.
+ *
+ * Accepts inline keyframes, a variant key, or an array of variant keys.
  */
 export type MotionWhileDrag = (Record<string, unknown> & {
     transition?: AnimationOptions;
-}) | DOMKeyframesDefinition | undefined;
+}) | DOMKeyframesDefinition | string | string[] | undefined;
 /**
  * Animation properties for in-view interactions.
  * When the element enters the viewport, it animates to this state; when it leaves,
  * it animates back to its baseline (from animate/initial), restoring only the changed keys.
+ *
+ * Accepts inline keyframes, a variant key, or an array of variant keys.
+ *
  * @example
  * ```svelte
  * <motion.div whileInView={{ opacity: 1, y: 0 }} />
+ * <motion.div variants={{ inView: { opacity: 1 } }} whileInView="inView" />
  * ```
  */
 export type MotionWhileInView = (Record<string, unknown> & {
     transition?: AnimationOptions;
-}) | DOMKeyframesDefinition | undefined;
+}) | DOMKeyframesDefinition | string | string[] | undefined;
 /**
  * IntersectionObserver configuration for `whileInView`. Mirrors framer-motion's
  * `viewport` prop. Same shape as `UseInViewOptions` minus `initial` (which is

package/dist/utils/variants.d.ts

@@ -1,4 +1,4 @@
-import type { MotionAnimate, MotionExit, MotionInitial, Variants } from '../types';
+import type { MotionAnimate, MotionExit, MotionInitial, MotionWhileDrag, MotionWhileFocus, MotionWhileHover, MotionWhileInView, MotionWhileTap, Variants } from '../types';
 import type { DOMKeyframesDefinition } from 'motion';
 /**
  * Resolves a variant key to its keyframes definition.
@@ -27,6 +27,33 @@ import type { DOMKeyframesDefinition } from 'motion';
  * ```
  */
 export declare const resolveVariant: (variants: Variants | undefined, key: string | undefined, custom?: unknown) => DOMKeyframesDefinition | undefined;
+/**
+ * Resolves a single variant key or an ordered list of keys to merged
+ * keyframes. Matches framer-motion's `VariantLabels = string | string[]`
+ * surface: later keys in the list override earlier ones on key
+ * collisions (`Object.assign` semantics).
+ *
+ * Missing keys are skipped. An empty list, an empty string, or an
+ * undefined argument all resolve to `undefined`.
+ *
+ * @param variants - The variants object containing named animation states.
+ * @param keys - A single variant key or an array of variant keys.
+ * @param custom - Forwarded to function-form variants (per-entry).
+ * @returns Merged keyframes definition, or `undefined` when nothing resolved.
+ *
+ * @example
+ * ```ts
+ * const variants = {
+ *   hover:  { scale: 1.1 },
+ *   active: { scale: 1.2, color: 'red' }
+ * }
+ * resolveVariantList(variants, 'hover')             // { scale: 1.1 }
+ * resolveVariantList(variants, ['hover', 'active']) // { scale: 1.2, color: 'red' }
+ * resolveVariantList(variants, ['hover', 'missing']) // { scale: 1.1 }
+ * resolveVariantList(variants, [])                   // undefined
+ * ```
+ */
+export declare const resolveVariantList: (variants: Variants | undefined, keys: string | string[] | undefined, custom?: unknown) => DOMKeyframesDefinition | undefined;
 /**
  * Resolves the initial prop to keyframes, handling variant keys and `initial={false}`.
  *
@@ -52,25 +79,72 @@ export declare const resolveInitial: (initial: MotionInitial, variants: Variants
 /**
  * Resolves the animate prop to keyframes, handling variant keys.
  *
- * When `animate` is a string, looks it up in the variants object (invoking
- * dynamic variants with `custom`). Otherwise returns the keyframes directly.
+ * When `animate` is a string (or array of strings), looks it up in the
+ * variants object (invoking dynamic variants with `custom`). Otherwise
+ * returns the keyframes directly.
  *
- * @param animate - The animate prop value (keyframes, variant key, or undefined).
+ * @param animate - The animate prop value (keyframes, variant key, array
+ *     of variant keys, or undefined).
  * @param variants - The variants object for resolving string keys.
  * @param custom - Forwarded to function-form variants.
  * @returns Keyframes definition or undefined.
+ *
+ * @example
+ * ```ts
+ * const variants = { visible: { opacity: 1 }, shifted: { x: 100 } }
+ * resolveAnimate('visible', variants)              // { opacity: 1 }
+ * resolveAnimate(['visible', 'shifted'], variants) // { opacity: 1, x: 100 }
+ * resolveAnimate({ scale: 1.2 }, variants)         // { scale: 1.2 }  (pass-through)
+ * resolveAnimate(undefined, variants)              // undefined
+ * ```
  */
 export declare const resolveAnimate: (animate: MotionAnimate, variants: Variants | undefined, custom?: unknown) => DOMKeyframesDefinition | undefined;
 /**
  * Resolves the exit prop to keyframes, handling variant keys.
  *
- * When `exit` is a string, looks it up in the variants object (invoking
- * dynamic variants with `custom`). Otherwise returns the keyframes directly.
- * Used by AnimatePresence for exit animations.
+ * When `exit` is a string (or array of strings), looks it up in the
+ * variants object (invoking dynamic variants with `custom`). Otherwise
+ * returns the keyframes directly. Used by AnimatePresence for exit
+ * animations.
  *
- * @param exit - The exit prop value (keyframes, variant key, or undefined).
+ * @param exit - The exit prop value (keyframes, variant key, array of
+ *     variant keys, or undefined).
  * @param variants - The variants object for resolving string keys.
  * @param custom - Forwarded to function-form variants.
  * @returns Keyframes definition or undefined.
+ *
+ * @example
+ * ```ts
+ * const variants = { hidden: { opacity: 0 }, small: { scale: 0.8 } }
+ * resolveExit('hidden', variants)              // { opacity: 0 }
+ * resolveExit(['hidden', 'small'], variants)   // { opacity: 0, scale: 0.8 }
+ * resolveExit({ y: -20 }, variants)            // { y: -20 }
+ * resolveExit(undefined, variants)             // undefined
+ * ```
  */
 export declare const resolveExit: (exit: MotionExit, variants: Variants | undefined, custom?: unknown) => DOMKeyframesDefinition | undefined;
+/**
+ * Resolves a `whileX` prop (hover, tap, focus, drag, in-view) to
+ * keyframes. Mirrors `resolveAnimate` — pass-through for inline
+ * keyframes, look up variant keys via `resolveVariantList` (single
+ * string or array of strings, merged left-to-right).
+ *
+ * Used by `_MotionContainer.svelte` to feed the gesture attach helpers
+ * a consistent keyframes object regardless of whether the consumer
+ * wrote inline keyframes or a variant reference.
+ *
+ * @param value - The whileX prop value.
+ * @param variants - The variants object for resolving string keys.
+ * @param custom - Forwarded to function-form variants.
+ * @returns Keyframes definition or `undefined` when nothing applies.
+ *
+ * @example
+ * ```ts
+ * const variants = { hover: { scale: 1.1 }, active: { color: 'red' } }
+ * resolveWhile('hover', variants)            // { scale: 1.1 }
+ * resolveWhile(['hover', 'active'], variants) // { scale: 1.1, color: 'red' }
+ * resolveWhile({ scale: 1.2 }, variants)     // { scale: 1.2 }  (pass-through)
+ * resolveWhile(undefined, variants)          // undefined
+ * ```
+ */
+export declare const resolveWhile: (value: MotionWhileTap | MotionWhileHover | MotionWhileFocus | MotionWhileDrag | MotionWhileInView, variants: Variants | undefined, custom?: unknown) => DOMKeyframesDefinition | undefined;

package/dist/utils/variants.js

@@ -27,11 +27,69 @@
 export const resolveVariant = (variants, key, custom) => {
     if (!variants || !key)
         return undefined;
+    // Guard against built-in / inherited keys like 'toString' or
+    // 'constructor' — without this, `whileHover="toString"` would
+    // resolve to `Function.prototype.toString` and leak a function into
+    // the merge path.
+    if (!Object.prototype.hasOwnProperty.call(variants, key))
+        return undefined;
     const entry = variants[key];
     if (typeof entry === 'function')
         return entry(custom);
     return entry;
 };
+/**
+ * Resolves a single variant key or an ordered list of keys to merged
+ * keyframes. Matches framer-motion's `VariantLabels = string | string[]`
+ * surface: later keys in the list override earlier ones on key
+ * collisions (`Object.assign` semantics).
+ *
+ * Missing keys are skipped. An empty list, an empty string, or an
+ * undefined argument all resolve to `undefined`.
+ *
+ * @param variants - The variants object containing named animation states.
+ * @param keys - A single variant key or an array of variant keys.
+ * @param custom - Forwarded to function-form variants (per-entry).
+ * @returns Merged keyframes definition, or `undefined` when nothing resolved.
+ *
+ * @example
+ * ```ts
+ * const variants = {
+ *   hover:  { scale: 1.1 },
+ *   active: { scale: 1.2, color: 'red' }
+ * }
+ * resolveVariantList(variants, 'hover')             // { scale: 1.1 }
+ * resolveVariantList(variants, ['hover', 'active']) // { scale: 1.2, color: 'red' }
+ * resolveVariantList(variants, ['hover', 'missing']) // { scale: 1.1 }
+ * resolveVariantList(variants, [])                   // undefined
+ * ```
+ */
+export const resolveVariantList = (variants, keys, custom) => {
+    if (keys === undefined)
+        return undefined;
+    if (typeof keys === 'string')
+        return resolveVariant(variants, keys, custom);
+    if (keys.length === 0)
+        return undefined;
+    let merged;
+    for (const key of keys) {
+        const entry = resolveVariant(variants, key, custom);
+        // Defensive: only merge plain keyframe objects. A function-form
+        // variant could return something else (array, class instance,
+        // string) under a misuse, and spreading those would corrupt the
+        // merged result. Reject arrays explicitly and require the
+        // prototype to be `Object.prototype` (or `null` for objects
+        // created via `Object.create(null)`).
+        if (!entry || typeof entry !== 'object' || Array.isArray(entry))
+            continue;
+        const proto = Object.getPrototypeOf(entry);
+        if (proto !== Object.prototype && proto !== null)
+            continue;
+        const obj = entry;
+        merged = merged ? { ...merged, ...obj } : { ...obj };
+    }
+    return merged;
+};
 /**
  * Resolves the initial prop to keyframes, handling variant keys and `initial={false}`.
  *
@@ -58,44 +116,97 @@ export const resolveInitial = (initial, variants, custom) => {
         return false;
     if (initial === undefined)
         return undefined;
-    if (typeof initial === 'string')
-        return resolveVariant(variants, initial, custom);
+    if (typeof initial === 'string' || Array.isArray(initial))
+        return resolveVariantList(variants, initial, custom);
     return initial;
 };
 /**
  * Resolves the animate prop to keyframes, handling variant keys.
  *
- * When `animate` is a string, looks it up in the variants object (invoking
- * dynamic variants with `custom`). Otherwise returns the keyframes directly.
+ * When `animate` is a string (or array of strings), looks it up in the
+ * variants object (invoking dynamic variants with `custom`). Otherwise
+ * returns the keyframes directly.
  *
- * @param animate - The animate prop value (keyframes, variant key, or undefined).
+ * @param animate - The animate prop value (keyframes, variant key, array
+ *     of variant keys, or undefined).
  * @param variants - The variants object for resolving string keys.
  * @param custom - Forwarded to function-form variants.
  * @returns Keyframes definition or undefined.
+ *
+ * @example
+ * ```ts
+ * const variants = { visible: { opacity: 1 }, shifted: { x: 100 } }
+ * resolveAnimate('visible', variants)              // { opacity: 1 }
+ * resolveAnimate(['visible', 'shifted'], variants) // { opacity: 1, x: 100 }
+ * resolveAnimate({ scale: 1.2 }, variants)         // { scale: 1.2 }  (pass-through)
+ * resolveAnimate(undefined, variants)              // undefined
+ * ```
  */
 export const resolveAnimate = (animate, variants, custom) => {
     if (animate === undefined)
         return undefined;
-    if (typeof animate === 'string')
-        return resolveVariant(variants, animate, custom);
+    if (typeof animate === 'string' || Array.isArray(animate))
+        return resolveVariantList(variants, animate, custom);
     return animate;
 };
 /**
  * Resolves the exit prop to keyframes, handling variant keys.
  *
- * When `exit` is a string, looks it up in the variants object (invoking
- * dynamic variants with `custom`). Otherwise returns the keyframes directly.
- * Used by AnimatePresence for exit animations.
+ * When `exit` is a string (or array of strings), looks it up in the
+ * variants object (invoking dynamic variants with `custom`). Otherwise
+ * returns the keyframes directly. Used by AnimatePresence for exit
+ * animations.
  *
- * @param exit - The exit prop value (keyframes, variant key, or undefined).
+ * @param exit - The exit prop value (keyframes, variant key, array of
+ *     variant keys, or undefined).
  * @param variants - The variants object for resolving string keys.
  * @param custom - Forwarded to function-form variants.
  * @returns Keyframes definition or undefined.
+ *
+ * @example
+ * ```ts
+ * const variants = { hidden: { opacity: 0 }, small: { scale: 0.8 } }
+ * resolveExit('hidden', variants)              // { opacity: 0 }
+ * resolveExit(['hidden', 'small'], variants)   // { opacity: 0, scale: 0.8 }
+ * resolveExit({ y: -20 }, variants)            // { y: -20 }
+ * resolveExit(undefined, variants)             // undefined
+ * ```
  */
 export const resolveExit = (exit, variants, custom) => {
     if (exit === undefined)
         return undefined;
-    if (typeof exit === 'string')
-        return resolveVariant(variants, exit, custom);
+    if (typeof exit === 'string' || Array.isArray(exit))
+        return resolveVariantList(variants, exit, custom);
     return exit;
 };
+/**
+ * Resolves a `whileX` prop (hover, tap, focus, drag, in-view) to
+ * keyframes. Mirrors `resolveAnimate` — pass-through for inline
+ * keyframes, look up variant keys via `resolveVariantList` (single
+ * string or array of strings, merged left-to-right).
+ *
+ * Used by `_MotionContainer.svelte` to feed the gesture attach helpers
+ * a consistent keyframes object regardless of whether the consumer
+ * wrote inline keyframes or a variant reference.
+ *
+ * @param value - The whileX prop value.
+ * @param variants - The variants object for resolving string keys.
+ * @param custom - Forwarded to function-form variants.
+ * @returns Keyframes definition or `undefined` when nothing applies.
+ *
+ * @example
+ * ```ts
+ * const variants = { hover: { scale: 1.1 }, active: { color: 'red' } }
+ * resolveWhile('hover', variants)            // { scale: 1.1 }
+ * resolveWhile(['hover', 'active'], variants) // { scale: 1.1, color: 'red' }
+ * resolveWhile({ scale: 1.2 }, variants)     // { scale: 1.2 }  (pass-through)
+ * resolveWhile(undefined, variants)          // undefined
+ * ```
+ */
+export const resolveWhile = (value, variants, custom) => {
+    if (value === undefined)
+        return undefined;
+    if (typeof value === 'string' || Array.isArray(value))
+        return resolveVariantList(variants, value, custom);
+    return value;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-motion",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "Framer Motion for Svelte 5. Declarative motion.<tag> components with AnimatePresence exit animations, gestures (hover, tap, drag, focus, in-view), variants, FLIP layout animations, shared-layout transitions, spring physics, and scroll-linked motion values. The drop-in Framer Motion alternative for Svelte and SvelteKit.",
   "keywords": [
     "svelte",