@wix/interact 2.1.4 → 2.2.1

package/dist/types/types/index.d.ts

@@ -0,0 +1,8 @@
+export * from './triggers';
+export * from './effects';
+export * from './config';
+export * from './controller';
+export * from './handlers';
+export * from './internal';
+import './global';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,OAAO,UAAU,CAAC"}

package/dist/types/types/internal.d.ts

@@ -0,0 +1,36 @@
+import type { Effect, EffectRef, StateEffect, TransitionProperty } from './effects';
+import type { Condition, SequenceConfig, Interaction, InteractionTrigger } from './config';
+export type InteractCache = {
+    effects: {
+        [effectId: string]: Effect;
+    };
+    sequences: {
+        [sequenceId: string]: SequenceConfig;
+    };
+    conditions: {
+        [conditionId: string]: Condition;
+    };
+    interactions: {
+        [path: string]: {
+            triggers: Interaction[];
+            effects: Record<string, (InteractionTrigger & {
+                effect: Effect | EffectRef;
+            })[]>;
+            sequences: Record<string, (InteractionTrigger & {
+                sequence: SequenceConfig;
+            })[]>;
+            interactionIds: Set<string>;
+            selectors: Set<string>;
+        };
+    };
+};
+export type CreateTransitionCSSParams = {
+    key: string;
+    effectId: string;
+    transition?: StateEffect['transition'];
+    properties?: TransitionProperty[];
+    childSelector?: string;
+    selectorCondition?: string;
+    useFirstChild?: boolean;
+};
+//# sourceMappingURL=internal.d.ts.map

package/dist/types/types/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/types/internal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AACpF,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE3F,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE;QACP,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;KAC5B,CAAC;IACF,SAAS,EAAE;QACT,CAAC,UAAU,EAAE,MAAM,GAAG,cAAc,CAAC;KACtC,CAAC;IACF,UAAU,EAAE;QACV,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;KAClC,CAAC;IACF,YAAY,EAAE;QACZ,CAAC,IAAI,EAAE,MAAM,GAAG;YACd,QAAQ,EAAE,WAAW,EAAE,CAAC;YACxB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,kBAAkB,GAAG;gBAAE,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;aAAE,CAAC,EAAE,CAAC,CAAC;YACjF,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,kBAAkB,GAAG;gBAAE,QAAQ,EAAE,cAAc,CAAA;aAAE,CAAC,EAAE,CAAC,CAAC;YACjF,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;YAC5B,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;SACxB,CAAC;KACH,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC"}

package/dist/types/types/triggers.d.ts

@@ -0,0 +1,28 @@
+import type { RangeOffset } from '@wix/motion';
+export type { RangeOffset };
+export type PointerMoveAxis = 'x' | 'y';
+export type TriggerType = 'hover' | 'click' | 'viewEnter' | 'pageVisible' | 'animationEnd' | 'viewProgress' | 'pointerMove' | 'activate' | 'interest';
+export type EventTriggerKind = 'toggle' | 'enterLeave';
+export type EventTriggerConfigToggle = readonly string[] | string[];
+export type EventTriggerConfigEnterLeave = {
+    enter?: readonly string[];
+    leave?: readonly string[];
+};
+export type EventTriggerConfig = string | EventTriggerConfigToggle | EventTriggerConfigEnterLeave;
+export type EventTriggerParams = {
+    eventConfig: EventTriggerConfig;
+};
+export type ViewEnterParams = {
+    threshold?: number;
+    inset?: string;
+    useSafeViewEnter?: boolean;
+};
+export type PointerMoveParams = {
+    hitArea?: 'root' | 'self';
+    axis?: PointerMoveAxis;
+};
+export type AnimationEndParams = {
+    effectId: string;
+};
+export type TriggerParams = ViewEnterParams | PointerMoveParams | AnimationEndParams;
+//# sourceMappingURL=triggers.d.ts.map

package/dist/types/types/triggers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"triggers.d.ts","sourceRoot":"","sources":["../../../src/types/triggers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B,MAAM,MAAM,eAAe,GAAG,GAAG,GAAG,GAAG,CAAC;AAExC,MAAM,MAAM,WAAW,GACnB,OAAO,GACP,OAAO,GACP,WAAW,GACX,aAAa,GACb,cAAc,GACd,cAAc,GACd,aAAa,GACb,UAAU,GACV,UAAU,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,YAAY,CAAC;AACvD,MAAM,MAAM,wBAAwB,GAAG,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;AACpE,MAAM,MAAM,4BAA4B,GAAG;IACzC,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,wBAAwB,GAAG,4BAA4B,CAAC;AAElG,MAAM,MAAM,kBAAkB,GAAG;IAC/B,WAAW,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG,iBAAiB,GAAG,kBAAkB,CAAC"}

package/dist/types/web/InteractElement.d.ts

@@ -1,4 +1,4 @@
-import type { IInteractionController, StateParams } from '../types';
+import type { IInteractionController, StateAction } from '../types';
 export declare const INTERACT_EFFECT_DATA_ATTR = "interactEffect";
 export declare function getInteractElement(): {
     new (): {
@@ -12,7 +12,7 @@ export declare function getInteractElement(): {
         disconnect(options?: {
             removeFromCache?: boolean;
         }): void;
-        toggleEffect(effectId: string, method: StateParams["method"], item?: HTMLElement | null): void;
+        toggleEffect(effectId: string, stateAction: StateAction, item?: HTMLElement | null): void;
         getActiveEffects(): string[];
         accessKey: string;
         readonly accessKeyLabel: string;

package/dist/types/web/InteractElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InteractElement.d.ts","sourceRoot":"","sources":["../../../src/web/InteractElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGpE,eAAO,MAAM,yBAAyB,mBAAmB,CAAC;AAE1D,wBAAgB,kBAAkB;;oBAKlB,CAAC,gBAAgB,GAAG;YAAE,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;SAAE,CAAC,GAAG,IAAI;oBACnD,sBAAsB;;;sBAiCpB,MAAM;6BAQC;YAAE,eAAe,CAAC,EAAE,OAAO,CAAA;SAAE;+BAI3B,MAAM,UAAU,WAAW,CAAC,QAAQ,CAAC,SAAS,WAAW,GAAG,IAAI;4BA4BnE,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAS/B"}
+{"version":3,"file":"InteractElement.d.ts","sourceRoot":"","sources":["../../../src/web/InteractElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGpE,eAAO,MAAM,yBAAyB,mBAAmB,CAAC;AAE1D,wBAAgB,kBAAkB;;oBAKlB,CAAC,gBAAgB,GAAG;YAAE,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;SAAE,CAAC,GAAG,IAAI;oBACnD,sBAAsB;;;sBAiCpB,MAAM;6BAQC;YAAE,eAAe,CAAC,EAAE,OAAO,CAAA;SAAE;+BAI3B,MAAM,eAAe,WAAW,SAAS,WAAW,GAAG,IAAI;4BA4B9D,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAS/B"}

package/dist/types/web/index.d.ts

@@ -2,5 +2,5 @@ import { Interact } from '../core/Interact';
 export { add, remove } from '../dom/api';
 export { generate } from '../core/css';
 export { Interact };
-export * from '../types';
+export * from '../types/external';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/web/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/web/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAI5C,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,CAAC;AAEpB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/web/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAI5C,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,CAAC;AAEpB,cAAc,mBAAmB,CAAC"}

package/docs/api/README.md

@@ -54,7 +54,6 @@ Complete reference documentation for all public APIs in `@wix/interact`.
 
 - [**TriggerType**](types.md#triggertype) - Union of all supported triggers
 - [**ViewEnterParams**](types.md#viewenterparams) - Viewport entry configuration
-- [**StateParams**](types.md#stateparams) - State transition parameters
 - [**PointerMoveParams**](types.md#pointermoveparams) - Pointer movement configuration
 - [**AnimationEndParams**](types.md#animationendparams) - Animation completion triggers
 
@@ -62,7 +61,7 @@ Complete reference documentation for all public APIs in `@wix/interact`.
 
 - [**TimeEffect**](types.md#timeeffect) - Time-based animations with examples
 - [**ScrubEffect**](types.md#scrubeffect) - Progress-based animations with named ranges
-- [**TransitionEffect**](types.md#transitioneffect) - CSS transition effects
+- [**StateEffect**](types.md#stateeffect) - CSS transition effects
 - [**EffectRef**](types.md#effectref) - Effect reference by ID
 
 ### Advanced Types
@@ -126,7 +125,7 @@ InteractConfig
 ├── effects?: Record<string, Effect>
 │   ├── TimeEffect (duration-based)
 │   ├── ScrubEffect (progress-based)
-│   └── TransitionEffect (CSS transitions)
+│   └── StateEffect (CSS transitions)
 └── conditions?: Record<string, Condition>
     ├── Media queries
     ├── Container queries

package/docs/api/functions.md

@@ -198,7 +198,7 @@ console.log('Interactions removed for hero');
 
 ## `generate(config, useFirstChild?)`
 
-Generates CSS styles needed to hide elements that have entrance animations with a `viewEnter` trigger and `type: 'once'`. This prevents a flash of unstyled content (FOUC) where elements briefly appear before their entrance animation starts.
+Generates CSS styles needed to hide elements that have entrance animations with a `viewEnter` trigger and the default (or explicit) `triggerType: 'once'` on effects. This prevents a flash of unstyled content (FOUC) where elements briefly appear before their entrance animation starts.
 
 ### Signature
 
@@ -208,7 +208,7 @@ function generate(config: InteractConfig, useFirstChild?: boolean): string;
 
 ### Parameters
 
-**`config: InteractConfig`** - The interaction configuration; used to find `viewEnter`/`once` interactions and build selectors.
+**`config: InteractConfig`** - The interaction configuration; used to find `viewEnter` interactions whose time effects use `triggerType: 'once'` (the default) and build selectors.
 
 **`useFirstChild?: boolean`** - When `true`, targets the first child of each key (e.g. for `<interact-element>`). Default `false`.
 
@@ -221,7 +221,7 @@ function generate(config: InteractConfig, useFirstChild?: boolean): string;
 The function generates CSS that:
 
 1. **Respects reduced motion**: Wrapped in `@media (prefers-reduced-motion: no-preference)`.
-2. **Targets elements by key**: Selectors use `[data-interact-key="..."]` for each interaction key that has a `viewEnter`/`once` entrance.
+2. **Targets elements by key**: Selectors use `[data-interact-key="..."]` for each interaction key that has a `viewEnter` entrance with `triggerType: 'once'` (including the default).
 3. **Excludes completed animations**: Uses `:not([data-interact-enter])` so elements are shown after the animation runs.
 
 **With `useFirstChild: false` (vanilla/React, element is the target)**:
@@ -264,7 +264,7 @@ const config = {
     {
       key: 'hero',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.2 },
+      params: { threshold: 0.2 },
       effects: [
         {
           keyframeEffect: {

package/docs/api/interact-class.md

@@ -20,7 +20,7 @@ import { Interact } from '@wix/interact';
 ```typescript
 class Interact {
   // Static methods
-  static create(config: InteractConfig, options?: { useCutsomElement?: boolean }): Interact;
+  static create(config: InteractConfig, options?: { useCustomElement?: boolean }): Interact;
   static getInstance(key: string): Interact | undefined;
   static destroy(): void;
   static setup(options: {
@@ -33,7 +33,7 @@ class Interact {
   static getController(key: string | undefined): IInteractionController | undefined;
 
   // Instance methods
-  init(config: InteractConfig, options?: { useCutsomElement?: boolean }): void;
+  init(config: InteractConfig, options?: { useCustomElement?: boolean }): void;
   destroy(): void;
   has(key: string): boolean;
   get(key: string): InteractCache['interactions'][string] | undefined;
@@ -61,7 +61,6 @@ const config = {
   interactions: [
     {
       trigger: 'viewEnter',
-      params: { type: 'once' },
       key: 'hero',
       effects: [{ effectId: 'fade-in' }],
     },

package/docs/api/interact-element.md

@@ -148,14 +148,14 @@ const element = document.querySelector('interact-element') as IInteractElement;
 element.disconnect();
 ```
 
-### `toggleEffect(effectId, method, item?)`
+### `toggleEffect(effectId, stateAction, item?)`
 
 Toggles a CSS state effect on the element.
 
 **Parameters:**
 
 - `effectId: string` - The effect identifier
-- `method: 'add' | 'remove' | 'toggle' | 'clear'` - How to change the state
+- `stateAction: StateAction` - How to change the state (`'add' | 'remove' | 'toggle' | 'clear'`)
 - `item?: HTMLElement | null` - Optional specific element for list items
 
 **Example:**

package/docs/api/interaction-controller.md

@@ -36,7 +36,7 @@ interface IInteractionController {
   update(): void;
   toggleEffect(
     effectId: string,
-    method: StateParams['method'],
+    stateAction: StateAction,
     item?: HTMLElement | null,
     isLegacy?: boolean,
   ): void;
@@ -189,7 +189,7 @@ if (controller) {
 - To reset all interaction state
 - After modifying the element's structure
 
-### `toggleEffect(effectId, method, item?, isLegacy?)`
+### `toggleEffect(effectId, stateAction, item?, isLegacy?)`
 
 Toggles a CSS state effect on the element or a specific list item.
 
@@ -198,7 +198,7 @@ Toggles a CSS state effect on the element or a specific list item.
 ```typescript
 toggleEffect(
   effectId: string,
-  method: 'add' | 'remove' | 'toggle' | 'clear',
+  stateAction: StateAction,
   item?: HTMLElement | null,
   isLegacy?: boolean
 ): void
@@ -207,7 +207,7 @@ toggleEffect(
 **Parameters:**
 
 - `effectId: string` - The effect identifier
-- `method` - How to change the state:
+- `stateAction` - How to change the state:
   - `'add'` - Add the effect
   - `'remove'` - Remove the effect
   - `'toggle'` - Toggle the effect on/off

package/docs/api/types.md

@@ -172,7 +172,7 @@ interface IInteractionController {
   update(): void;
   toggleEffect(
     effectId: string,
-    method: StateParams['method'],
+    stateAction: StateAction,
     item?: HTMLElement | null,
     isLegacy?: boolean,
   ): void;
@@ -230,7 +230,7 @@ interface IInteractElement extends HTMLElement {
   disconnectedCallback(): void;
   connect(key?: string): void;
   disconnect(options?: { removeFromCache?: boolean }): void;
-  toggleEffect(effectId: string, method: StateParams['method'], item?: HTMLElement | null): void;
+  toggleEffect(effectId: string, stateAction: StateAction, item?: HTMLElement | null): void;
   getActiveEffects(): string[];
 }
 ```
@@ -342,7 +342,6 @@ type TriggerType =
   | 'interest'
   | 'activate'
   | 'viewEnter'
-  | 'pageVisible'
   | 'animationEnd'
   | 'viewProgress'
   | 'pointerMove';
@@ -352,22 +351,18 @@ type TriggerType =
 
 #### `ViewEnterParams`
 
-Parameters for viewport entry triggers (`viewEnter`, `pageVisible`, `viewProgress`).
+Parameters for viewport entry triggers (`viewEnter`). Controls IntersectionObserver configuration only. Playback behavior (`'once'`, `'repeat'`, `'alternate'`, `'state'`) is configured via `triggerType` on the effect (see [TimeEffect](#timeeffect)) or on the sequence config (see [SequenceOptionsConfig](#sequenceoptionsconfig)).
 
 ```typescript
 type ViewEnterParams = {
-  type?: ViewEnterType;
   threshold?: number;
   inset?: string;
   useSafeViewEnter?: boolean;
 };
-
-type ViewEnterType = 'once' | 'repeat' | 'alternate' | 'state';
 ```
 
 **Properties:**
 
-- `type` - How the trigger behaves: `'once'` (default), `'repeat'`, `'alternate'`, `'state'` (play on enter, pause on exit)
 - `threshold` - Percentage of element that must be visible (0-1)
 - `inset` - CSS-style inset to shrink the root intersection area
 - `useSafeViewEnter` - When true, handles elements taller than viewport
@@ -375,58 +370,16 @@ type ViewEnterType = 'once' | 'repeat' | 'alternate' | 'state';
 **Examples:**
 
 ```typescript
-// Trigger once when 50% visible
-const onceParams: ViewEnterParams = {
-  type: 'once',
+// Trigger when 50% visible
+const params: ViewEnterParams = {
   threshold: 0.5,
 };
 
-// Trigger repeatedly with margin
-const repeatParams: ViewEnterParams = {
-  type: 'repeat',
+// Trigger with margin
+const paramsWithMargin: ViewEnterParams = {
   threshold: 0.1,
   inset: '100px',
 };
-
-// Alternate effects on enter/exit
-const alternateParams: ViewEnterParams = {
-  type: 'alternate',
-  threshold: 0.3,
-};
-```
-
-#### `StateParams`
-
-Parameters for state-based triggers (`hover`, `click`, `interest`, `activate`).
-
-```typescript
-type StateParams = {
-  method: TransitionMethod;
-};
-
-type TransitionMethod = 'add' | 'remove' | 'toggle' | 'clear';
-```
-
-**Properties:**
-
-- `method` - How to modify the element's state
-  - `'add'` - Add the effect state
-  - `'remove'` - Remove the effect state
-  - `'toggle'` - Toggle the effect state
-  - `'clear'` - Clear all effect states
-
-**Examples:**
-
-```typescript
-// Toggle effect on click
-const toggleClick: StateParams = {
-  method: 'toggle',
-};
-
-// Add effect on hover enter, remove on hover exit
-const hoverState: StateParams = {
-  method: 'add', // hover exit automatically uses 'remove'
-};
 ```
 
 #### `PointerMoveParams`
@@ -485,7 +438,7 @@ const chainedAnimation: AnimationEndParams = {
 Union type of all effect types.
 
 ```typescript
-type Effect = (TimeEffect | ScrubEffect | TransitionEffect) & {
+type Effect = (TimeEffect | ScrubEffect | StateEffect) & {
   conditions?: string[];
 };
 ```
@@ -507,6 +460,7 @@ type TimeEffect = {
   reversed?: boolean;
   delay?: number;
   effectId?: string;
+  triggerType?: TimeAnimationTriggerType;
 } & EffectProperty;
 
 type Fill = 'none' | 'forwards' | 'backwards' | 'both';
@@ -524,6 +478,11 @@ type Fill = 'none' | 'forwards' | 'backwards' | 'both';
 - `fill` - How to apply styles before/after animation
 - `reversed` - Whether to play animation in reverse
 - `delay` - Delay before animation starts in milliseconds
+- `triggerType` - Controls play behavior for event triggers (`hover`, `click`, `activate`, `interest`, `viewEnter`):
+  - `'alternate'` (default for hover/click) - Hover & viewEnter: play on enter, reverse on leave. Click: alternate play/reverse on successive clicks.
+  - `'repeat'` - Restart from progress 0 on each event; on hover leave the animation is canceled; on viewEnter full exit, pause and reset.
+  - `'once'` (default for viewEnter) - Play once and remove the listener (hover & viewEnter attach only the enter listener; no leave).
+  - `'state'` - Hover & viewEnter: play on enter if idle/paused, pause on leave if running. Click: toggle play/pause on successive clicks until finished.
 
 **Examples:**
 
@@ -623,20 +582,23 @@ const progressFade: ScrubEffect = {
 };
 ```
 
-### `TransitionEffect`
+### `StateEffect`
 
 CSS transition-based effects for style property changes.
 
 ```typescript
-type TransitionEffect = {
+type StateEffect = {
   key?: string;
   effectId?: string;
+  stateAction?: StateAction;
   transition?: TransitionOptions & {
     styleProperties: StyleProperty[];
   };
   transitionProperties?: TransitionProperty[];
 };
 
+type StateAction = 'add' | 'remove' | 'toggle' | 'clear';
+
 type TransitionOptions = {
   duration?: number;
   delay?: number;
@@ -651,11 +613,19 @@ type StyleProperty = {
 type TransitionProperty = StyleProperty & TransitionOptions;
 ```
 
+**Properties:**
+
+- `stateAction` - How to modify the element's CSS state on event triggers (`hover`, `click`, `activate`, `interest`):
+  - `'toggle'` (default) - Hover: adds on enter, removes on leave. Click: toggles on each click.
+  - `'add'` - Add the effect state; hover leave will NOT auto-remove.
+  - `'remove'` - Remove the effect state.
+  - `'clear'` - Clear all effect states for the element (or list item when list context is used).
+
 **Examples:**
 
 ```typescript
 // Simple color transition
-const colorTransition: TransitionEffect = {
+const colorTransition: StateEffect = {
   transition: {
     duration: 300,
     easing: 'ease-out',
@@ -667,7 +637,7 @@ const colorTransition: TransitionEffect = {
 };
 
 // Individual property transitions
-const complexTransition: TransitionEffect = {
+const complexTransition: StateEffect = {
   transitionProperties: [
     {
       name: 'transform',
@@ -792,6 +762,7 @@ type SequenceOptionsConfig = {
   offsetEasing?: string | ((p: number) => number);
   sequenceId?: string;
   conditions?: string[];
+  triggerType?: TimeAnimationTriggerType;
 };
 ```
 
@@ -802,6 +773,7 @@ type SequenceOptionsConfig = {
 - `offsetEasing` - Easing function or named string for offset distribution (`'linear'`, `'quadIn'`, `'sineOut'`, etc.). Default: `linear`.
 - `sequenceId` - Optional ID for referencing a reusable sequence from `InteractConfig.sequences`.
 - `conditions` - Optional array of condition IDs. When set, the sequence is only active when all conditions match.
+- `triggerType` - Controls play behavior for event trigger sequences (`hover`, `click`, `activate`, `interest`, `viewEnter`). Same values as `TimeEffect.triggerType`: `'once'` (default for viewEnter), `'alternate'` (default for hover/click), `'repeat'`, `'state'`.
 
 ### `SequenceConfig`
 
@@ -944,10 +916,10 @@ Map of trigger types to their parameter types.
 
 ```typescript
 type InteractionParamsTypes = {
-  hover: StateParams | PointerTriggerParams;
-  click: StateParams | PointerTriggerParams;
-  interest: StateParams | PointerTriggerParams;
-  activate: StateParams | PointerTriggerParams;
+  hover: Record<string, never>;
+  click: Record<string, never>;
+  interest: Record<string, never>;
+  activate: Record<string, never>;
   viewEnter: ViewEnterParams;
   pageVisible: ViewEnterParams;
   animationEnd: AnimationEndParams;
@@ -956,17 +928,14 @@ type InteractionParamsTypes = {
 };
 ```
 
+> **Note:** `hover`, `click`, `interest`, `activate`, and `viewEnter` triggers no longer use params for playback behavior. Animation behavior (`triggerType`) is now configured on `TimeEffect` (or `SequenceOptionsConfig` for sequences), and state behavior (`stateAction`) is now configured on `StateEffect`. `viewEnter`/`pageVisible` params only contain observer configuration (`threshold`, `inset`, `useSafeViewEnter`).
+
 ### `TriggerParams`
 
 Union type of all trigger parameter types.
 
 ```typescript
-type TriggerParams =
-  | StateParams
-  | PointerTriggerParams
-  | ViewEnterParams
-  | PointerMoveParams
-  | AnimationEndParams;
+type TriggerParams = ViewEnterParams | PointerMoveParams | AnimationEndParams;
 ```
 
 ## See Also

package/docs/examples/README.md

@@ -179,7 +179,7 @@ const entranceConfig = {
     {
       trigger: 'viewEnter',
       key: 'element',
-      params: { type: 'once', threshold: 0.1 },
+      params: { threshold: 0.1 },
       effects: [{ effectId: 'entrance-effect' }],
     },
   ],

package/docs/examples/click-interactions.md

@@ -172,7 +172,6 @@ Toggle between two states.
 {
     key: 'toggle-switch',
     trigger: 'click',
-    params: { method: 'toggle' },
     effects: [{
         key: 'toggle-switch',
         transition: {
@@ -231,7 +230,6 @@ Custom checkbox with animation.
 {
     key: 'checkbox',
     trigger: 'click',
-    params: { method: 'toggle' },
     effects: [{
         key: 'checkbox',
         selector: '.checkmark',
@@ -271,7 +269,6 @@ Heart animation for like button.
 {
     key: 'like-button',
     trigger: 'click',
-    params: { method: 'toggle' },
     effects: [{
         key: 'like-button',
         selector: '.heart-icon',
@@ -301,7 +298,6 @@ Click to reveal hidden content.
     key: 'accordion-trigger',
     selector: '.accordion-header',
     trigger: 'click',
-    params: { method: 'toggle' },
     effects: [{
         key: 'accordion-trigger',
         selector: '.accordion-content',
@@ -350,7 +346,6 @@ Expand text content on click.
     key: 'read-more',
     selector: '.read-more-btn',
     trigger: 'click',
-    params: { method: 'toggle' },
     effects: [
         // Expand content
         {
@@ -705,7 +700,6 @@ Toggle mobile navigation menu.
 {
     key: 'menu-toggle',
     trigger: 'click',
-    params: { method: 'toggle' },
     effects: [
         // Hamburger icon animation
         {
@@ -760,7 +754,6 @@ Click to toggle dropdown.
 {
     key: 'dropdown-trigger',
     trigger: 'click',
-    params: { method: 'toggle' },
     effects: [
         {
             key: 'dropdown-trigger',