@wix/interact 2.0.0-rc.7 → 2.0.0

package/docs/guides/configuration-structure.md

@@ -82,7 +82,7 @@ const config: InteractConfig = {
 
 ### Selector vs ListContainer
 
-- **`selector`**: Selects a single element using CSS selector
+- **`selector`**: Selects all matching elements using CSS selector (`querySelectorAll`)
 - **`listContainer`**: Selects a container for targeting its child elements for list-based interactions
 - **Combined**: Use both to select elements within list items
 
@@ -90,14 +90,14 @@ const config: InteractConfig = {
 // Using selector with listContainer
 {
     key: 'product-grid',
-    listContainer: '.product-item',     // Each product item
-    selector: '.product-image',         // Image within each item
+    listContainer: '.products',         // Container holding all product items
+    selector: '.product-image',         // querySelectorAll finds all images as list items
     trigger: 'hover',
     effects: [
         {
             key: 'product-grid',
-            listContainer: '.product-item',
-            selector: '.product-overlay', // Overlay within each item
+            listContainer: '.products',
+            selector: '.product-overlay', // querySelectorAll finds all overlays as list items
             namedEffect: {
               type: 'FadeIn'
             },
@@ -676,14 +676,14 @@ const galleryConfig: InteractConfig = {
     // Gallery items with list container and selector
     {
       key: 'image-gallery',
-      listContainer: '.gallery-grid', // Container with multiple items
-      selector: '.gallery-item img', // Image within each item
+      listContainer: '.gallery-grid', // Container holding all gallery items
+      selector: '.gallery-item img', // querySelectorAll finds all matching images as list items
       trigger: 'hover',
       effects: [
         {
           key: 'image-gallery',
           listContainer: '.gallery-grid',
-          selector: '.gallery-item .overlay', // Overlay within each item
+          selector: '.gallery-item .overlay', // querySelectorAll finds all matching overlays as list items
           effectId: 'image-overlay',
         },
       ],

package/docs/guides/effects-and-animations.md

@@ -108,8 +108,8 @@ Scrub effects are progress-based animations that respond to scroll position or p
     },
     // No duration - controlled by scroll/pointer progress
     easing: 'linear',
-    rangeStart: { name: 'cover', offset: { type: 'percentage', value: 0 } },
-    rangeEnd: { name: 'cover', offset: { type: 'percentage', value: 100 } }
+    rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 0 } },
+    rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 100 } }
 }
 ```
 
@@ -127,8 +127,8 @@ Control when the animation starts and stops:
             { opacity: '0' }
         ]
     },
-    rangeStart: { name: 'cover', offset: { type: 'percentage', value: 30 } },  // Start at 30% scroll
-    rangeEnd: { name: 'cover', offset: { type: 'percentage', value: 80 } }     // End at 80% scroll
+    rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 30 } },  // Start at 30% scroll
+    rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 80 } }     // End at 80% scroll
 }
 ```
 
@@ -153,8 +153,8 @@ TBD
                     { transform: 'translateY(-150px)' }
                 ]
             },
-            rangeStart: { name: 'cover', offset: { type: 'percentage', value: 0 } },
-            rangeEnd: { name: 'cover', offset: { type: 'percentage', value: 100 } }
+            rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 0 } },
+            rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 100 } }
         },
         // Text fades out faster
         {
@@ -166,8 +166,8 @@ TBD
                     { opacity: '0', transform: 'translateY(-50px)' }
                 ]
             },
-            rangeStart: { name: 'cover', offset: { type: 'percentage', value: 20 } },
-            rangeEnd: { name: 'cover', offset: { type: 'percentage', value: 60 } }
+            rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 20 } },
+            rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 60 } }
         }
     ]
 }
@@ -450,7 +450,7 @@ Avoid animating:
 ### Named Effects vs Keyframes
 
 ```typescript
-// Preferred - optimized by @wix/motion
+// Preferred - optimized; from @wix/motion-presets
 {
     namedEffect: {
         type: 'FadeIn'

package/docs/guides/understanding-triggers.md

@@ -302,6 +302,7 @@ The `viewEnter` trigger uses Intersection Observer to detect when elements enter
 - **`once`** (recommended): Triggers only when element first enters viewport
 - **`repeat`**: Triggers every time element enters viewport
 - **`alternate`**: Plays forward on enter, reverses on exit
+- **`state`**: Plays on enter, pauses on exit
 
 ### Real-World Example: Staggered Card Animation
 
@@ -393,8 +394,8 @@ The `viewProgress` trigger creates scroll-driven animations as elements move thr
                     { filter: 'grayscale(100%)' }
                 ]
             },
-            rangeStart: { name: 'exit', offset: { type: 'percentage', value: 0 } },
-            rangeEnd: { name: 'exit', offset: { type: 'percentage', value: 100 } }
+            rangeStart: { name: 'exit', offset: { unit: 'percentage', value: 0 } },
+            rangeEnd: { name: 'exit', offset: { unit: 'percentage', value: 100 } }
         },
         {
             key: 'foreground-text',
@@ -405,8 +406,8 @@ The `viewProgress` trigger creates scroll-driven animations as elements move thr
                     { opacity: '0', transform: 'scale(0.8)' }
                 ]
             },
-            rangeStart: { name: 'exit', offset: { type: 'percentage', value: 0 } },
-            rangeEnd: { name: 'exit', offset: { type: 'percentage', value: 100 } }
+            rangeStart: { name: 'exit', offset: { unit: 'percentage', value: 0 } },
+            rangeEnd: { name: 'exit', offset: { unit: 'percentage', value: 100 } }
         }
     ]
 }
@@ -428,14 +429,14 @@ The `viewProgress` trigger creates scroll-driven animations as elements move thr
                     { transform: 'scaleX(1)' }
                 ]
             },
-            rangeStart: { name: 'cover', offset: { type: 'percentage', value: 0 } },
-            rangeEnd: { name: 'cover', offset: { type: 'percentage', value: 100 } }
+            rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 0 } },
+            rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 100 } }
         }
     ]
 }
 ```
 
-## 8. PointerMove Trigger
+## 7. PointerMove Trigger
 
 The `pointerMove` trigger creates mouse-following effects and 3D interactions.
 
@@ -467,7 +468,8 @@ The `pointerMove` trigger creates mouse-following effects and 3D interactions.
     key: 'card-section',
     trigger: 'pointerMove',
     params: {
-        hitArea: 'self'  // 'self' | 'root'
+        hitArea: 'self',  // 'self' | 'root'
+        axis: 'y'         // 'x' | 'y' – scrub axis (default 'y')
     },
     effects: [
         {
@@ -508,7 +510,7 @@ The `pointerMove` trigger creates mouse-following effects and 3D interactions.
 }
 ```
 
-## 9. AnimationEnd Trigger
+## 8. AnimationEnd Trigger
 
 The `animationEnd` trigger allows you to chain animations by waiting for a previous animation to complete.
 

package/docs/integration/react.md

@@ -64,13 +64,14 @@ The `Interaction` component is a wrapper that automatically manages interaction
 
 ### Props
 
-| Prop          | Type                          | Required | Description                                                      |
-| ------------- | ----------------------------- | -------- | ---------------------------------------------------------------- |
-| `tagName`     | `keyof JSX.IntrinsicElements` | Yes      | The HTML element to render (e.g., `'div'`, `'button'`, `'span'`) |
-| `interactKey` | `string`                      | Yes      | Unique identifier matching the interaction configuration         |
-| `children`    | `React.ReactNode`             | No       | Child elements to render                                         |
-| `ref`         | `React.Ref<any>`              | No       | Forwarded ref to the underlying DOM element                      |
-| `...rest`     | `JSX.IntrinsicElements[T]`    | No       | Any valid props for the specified `tagName`                      |
+| Prop          | Type                          | Required | Description                                                                                   |
+| ------------- | ----------------------------- | -------- | --------------------------------------------------------------------------------------------- |
+| `tagName`     | `keyof JSX.IntrinsicElements` | Yes      | The HTML element to render (e.g., `'div'`, `'button'`, `'span'`)                              |
+| `interactKey` | `string`                      | Yes      | Unique identifier matching the interaction configuration                                      |
+| `initial`     | `boolean`                     | No       | When `true`, sets `data-interact-initial="true"` for FOUC prevention with entrance animations |
+| `children`    | `React.ReactNode`             | No       | Child elements to render                                                                      |
+| `ref`         | `React.Ref<any>`              | No       | Forwarded ref to the underlying DOM element                                                   |
+| `...rest`     | `JSX.IntrinsicElements[T]`    | No       | Any valid props for the specified `tagName`                                                   |
 
 ### Basic Usage
 
@@ -385,12 +386,14 @@ import { Interact, Interaction, InteractConfig } from '@wix/interact/react';
 const config: InteractConfig = {
   effects: {
     expanded: {
-      transitionEffect: {
-        properties: ['max-height', 'padding'],
-        from: { maxHeight: '0px', padding: '0' },
-        to: { maxHeight: '200px', padding: '16px' },
+      transition: {
+        duration: 300,
+        easing: 'ease-out',
+        styleProperties: [
+          { name: 'max-height', value: '200px' },
+          { name: 'padding', value: '16px' },
+        ],
       },
-      duration: 300,
     },
   },
   interactions: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/interact",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0",
   "description": "A powerful, declarative interaction library for creating engaging web apps.",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -55,7 +55,7 @@
     "url": "https://github.com/wix-incubator/interact/issues"
   },
   "dependencies": {
-    "@wix/motion": "^2.0.0-rc.3",
+    "@wix/motion": "^2.0.0",
     "fastdom": "^1.0.12",
     "fizban": "^0.7.2",
     "kuliso": "^0.4.13"
@@ -86,6 +86,5 @@
     "typescript": "^5.9.3",
     "vite": "^7.2.2",
     "vitest": "^4.0.14"
-  },
-  "stableVersion": "2.0.0-rc.6"
+  }
 }

package/rules/click.md

@@ -119,14 +119,14 @@ These rules help generate click-based interactions using the `@wix/interact` lib
 
 ```typescript
 {
-    source: '[SOURCE_IDENTIFIER]',
+    key: '[SOURCE_IDENTIFIER]',
     trigger: 'click',
     params: {
         type: 'state'
     },
     effects: [
         {
-            target: '[TARGET_IDENTIFIER]',
+            key: '[TARGET_IDENTIFIER]',
             [EFFECT_TYPE]: [EFFECT_DEFINITION],
             fill: 'both',
             reversed: [INITIAL_REVERSED_BOOL],
@@ -309,7 +309,7 @@ These rules help generate click-based interactions using the `@wix/interact` lib
     key: '[SOURCE_IDENTIFIER]',
     trigger: 'click',
     params: {
-        type: 'alternate'
+        method: 'toggle'
     },
     effects: [
         {
@@ -342,7 +342,7 @@ These rules help generate click-based interactions using the `@wix/interact` lib
     key: 'theme-switcher',
     trigger: 'click',
     params: {
-        type: 'alternate'
+        method: 'toggle'
     },
     effects: [
         {
@@ -370,7 +370,7 @@ These rules help generate click-based interactions using the `@wix/interact` lib
     key: 'style-toggle',
     trigger: 'click',
     params: {
-        type: 'alternate'
+        method: 'toggle'
     },
     effects: [
         {
@@ -397,7 +397,7 @@ These rules help generate click-based interactions using the `@wix/interact` lib
     key: 'interactive-card',
     trigger: 'click',
     params: {
-        type: 'alternate'
+        method: 'toggle'
     },
     effects: [
         {

package/rules/full-lean.md

@@ -34,7 +34,7 @@ Interact.create(config);
 
 ```html
 <script type="module">
-  import { Interact } from 'https://esm.sh/@wix/interact@2.0.0-rc.4';
+  import { Interact } from 'https://esm.sh/@wix/interact';
 
   const config = {
     // config-props
@@ -48,7 +48,7 @@ Interact.create(config);
 
 - Use `generate(config)` to create critical CSS that hides elements until their `viewEnter` entrance animation plays.
 - Add `data-interact-initial="true"` to the `<interact-element>` that should have its first child hidden initially.
-- Only use `data-interact-initial="true"` for `<interact-element>` with `viewEnter` trigger.
+- Only use `data-interact-initial="true"` for `<interact-element>` with `viewEnter` trigger and `type: 'once'`, where the source and target elements are the same.
 - Do NOT use for `hover` or `click` interactions.
 
 **Usage:**
@@ -115,9 +115,10 @@ This configuration declares what user/system triggers occur on which source elem
   - **Purpose**: Named predicates that gate interactions/effects by runtime context.
   - **Key (string)**: The condition id. MUST be unique across the registry.
   - **Value (Condition)**:
-    - **type**: `'media' | 'container'`
+    - **type**: `'media' | 'container' | 'selector'`
       - `'media'`: The predicate MUST be a valid CSS media query expression without the outer `@media` keyword (e.g., `'(min-width: 768px)'`).
       - `'container'`: The predicate SHOULD be a valid CSS container query condition string relative to the relevant container context.
+      - `'selector'`: The predicate is a CSS selector pattern. If it contains `&`, the `&` is replaced with the base element selector; otherwise the predicate is appended to the base selector. Used for conditional styling (e.g., `:nth-of-type(odd)`, `.active`).
     - **predicate?**: OPTIONAL textual predicate for the given type. If omitted, the condition is treated as always-true (i.e., a no-op guard).
 
 - **interactions: Interaction[]**
@@ -131,13 +132,13 @@ This configuration declares what user/system triggers occur on which source elem
       - OPTIONAL. A CSS selector used to select items within `listContainer`.
     - **trigger: TriggerType**
       - REQUIRED. One of:
-        - `'hover' | 'click'`: Pointer interactions.
+        - `'hover' | 'click' | 'activate' | 'interest'`: Pointer interactions (`activate` = click with keyboard Space/Enter; `interest` = hover with focus).
         - `'viewEnter' | 'pageVisible' | 'viewProgress'`: Viewport visibility/progress triggers.
         - `'animationEnd'`: Fires when a specific effect completes on the source element.
         - `'pointerMove'`: Continuous pointer motion over an area.
     - **params?: TriggerParams**
       - OPTIONAL. Parameter object that MUST match the trigger:
-        - hover/click: `StateParams | PointerTriggerParams`
+        - hover/click/activate/interest: `StateParams | PointerTriggerParams` (activate uses same params as click; interest uses same params as hover).
           - `StateParams.method`: `'add' | 'remove' | 'toggle' | 'clear'`
           - `PointerTriggerParams.type?`: `'once' | 'repeat' | 'alternate' | 'state'`
           - Usage:
@@ -153,13 +154,14 @@ This configuration declares what user/system triggers occur on which source elem
               - `'once'`: Play once and remove the listener (hover attaches only the enter listener; no leave).
               - `'state'`: Hover — play on enter if idle/paused, pause on leave if running. Click — toggle play/pause on successive clicks until finished.
         - viewEnter/pageVisible/viewProgress: `ViewEnterParams`
-          - `type?`: `'once' | 'repeat' | 'alternate'`
+          - `type?`: `'once' | 'repeat' | 'alternate' | 'state'`
           - `threshold?`: number in [0,1] describing intersection threshold
           - `inset?`: string CSS-style inset for rootMargin/observer geometry
           - Usage:
             - `'once'`: Play on first visibility and unobserve the element.
             - `'repeat'`: Play each time the element re‑enters visibility according to `threshold`/`inset`.
             - `'alternate'`: Triggers on re‑entries; if you need alternating direction, set it on the effect (e.g., `alternate: true`) rather than relying on the trigger.
+            - `'state'`: Play on entry, pause on exit (for looping/continuous animations).
             - `threshold`: Passed to `IntersectionObserver.threshold` — typical values are 0.1–0.6 for entrances.
             - `inset`: Applied as vertical `rootMargin` (`top/bottom`), e.g., `'-100px'` to trigger earlier/later; left/right remain 0.
             - Note: For `viewProgress`, `threshold` and `inset` are ignored; progress is driven by ViewTimeline/scroll scenes. Control the range via `ScrubEffect.rangeStart/rangeEnd` and `namedEffect.range`.
@@ -168,10 +170,11 @@ This configuration declares what user/system triggers occur on which source elem
           - Usage: Fire when the specified effect (by `effectId`) on the source element finishes, useful for chaining sequences.
         - pointerMove: `PointerMoveParams`
           - `hitArea?`: `'root' | 'self'` (default `'self'`)
+          - `axis?`: `'x' | 'y'` - when using `keyframeEffect` with `pointerMove`, selects which pointer coordinate maps to linear 0-1 progress; defaults to `'y'`. Ignored for `namedEffect` and `customEffect`.
           - Usage:
             - `'self'`: Track pointer within the source element’s bounds.
             - `'root'`: Track pointer anywhere in the viewport (document root).
-            - Only use with `ScrubEffect` mouse presets (`namedEffect`) or `customEffect` that consumes pointer progress; avoid `keyframeEffect` with `pointerMove`.
+            - Only use with `ScrubEffect` mouse presets (`namedEffect`) or `customEffect` that consumes pointer progress; avoid `keyframeEffect` with `pointerMove` unless mapping a single axis via `axis`.
           - When using `customEffect` with `pointerMove`, the progress parameter is an object:
             - ```typescript
               type Progress = {
@@ -189,7 +192,9 @@ This configuration declares what user/system triggers occur on which source elem
     - **conditions?: string[]**
       - OPTIONAL. Array of condition ids that MUST all pass for this trigger to be active.
     - **selector?: string**
-      - OPTIONAL. Additional CSS selector to refine the source element's descendants when attaching/observing the trigger (e.g., delegate a click to a child button).
+      - OPTIONAL. Additional CSS selector to refine element selection:
+        - Without `listContainer`: Uses `querySelectorAll` to match all elements within the root element as separate items.
+        - With `listContainer`: Uses `querySelectorAll` within the container to find matching elements as list items. For dynamically added list items, uses `querySelector` within each item to find a single matching element.
     - **effects: Array<Effect | EffectRef>**
       - REQUIRED. The effects to apply when the trigger fires. Ordering is significant: the first array entry is applied first. The system may reverse internal storage to preserve this application order.
 
@@ -309,7 +314,9 @@ The config remains the same for both integrations—only the HTML/JSX setup diff
   - **conditions?: string[]**
     - OPTIONAL. All conditions MUST pass for the effect to run (in addition to interaction conditions).
   - **selector?: string**
-    - OPTIONAL. Additional CSS selector to refine the target element's descendants.
+    - OPTIONAL. Additional CSS selector to refine target element selection:
+      - Without `listContainer`: Uses `querySelectorAll` to match all elements within the target root as separate items.
+      - With `listContainer`: Uses `querySelectorAll` within the container to find matching elements as list items. For dynamically added list items, uses `querySelector` within each item to find a single matching element.
   - **effectId?: string**
     - For `EffectRef` this field is REQUIRED and MUST reference an entry in `effects`.
 
@@ -339,7 +346,7 @@ The config remains the same for both integrations—only the HTML/JSX setup diff
      - `delay?`: number (ms)
      - One of:
        - `keyframeEffect`: `{ name: string; keyframes: Keyframe[] }`
-       - `namedEffect`: `NamedEffect` (from `@wix/motion`)
+       - `namedEffect`: `NamedEffect` (from `@wix/motion-presets`)
        - `customEffect`: `(element: Element, progress: any) => void`
 
   2. **ScrubEffect** (animation driven by scroll/progress)
@@ -387,15 +394,10 @@ The config remains the same for both integrations—only the HTML/JSX setup diff
 
 ### Authoring rules for animation payloads (`namedEffect`, `keyframeEffect`, `customEffect`):
 
-- **namedEffect (Preferred)**: Use first for best performance. These are pre-built presets from `@wix/motion` that are GPU-friendly and tuned.
-  - Structure: `namedEffect: { type: '<PresetName>', /* optional preset options like direction (bottom|top|left|right), power ('soft'|'medium'|'hard'), etc. do not use those without having proper documentation of which options exist and of what types. */ }`
-  - Short list of common preset names:
-    - Entrance: `FadeIn`, `BounceIn`, `SlideIn`, `FlipIn`, `ArcIn`
-    - Ongoing: `Pulse`, `Spin`, `Wiggle`, `Bounce`
-    - Scroll: `ParallaxScroll`, `FadeScroll`, `RevealScroll`, `TiltScroll`
-    - For scroll-effects used with the `viewProgress` trigger, the `namedEffect` options MUST include `range: 'in' | 'out' | 'continuous'`. Prefer `range: 'continuous'` for simplicity.
-    - Mouse: For `pointerMove` (mouse-effects), prefer `namedEffect` presets (e.g., `TrackMouse`, `Tilt3DMouse`, `ScaleMouse`, `BlurMouse`); avoid `keyframeEffect` with `pointerMove` since progress is two‑dimensional.
-    - Mouse: `TrackMouse`, `Tilt3DMouse`, `ScaleMouse`, `BlurMouse`
+- **namedEffect (Preferred)**: Use first for best performance. These are pre-built presets from `@wix/motion-presets` that are GPU-friendly and tuned.
+  - Structure: `namedEffect: { type: '<PresetName>', /* optional preset options like direction (bottom|top|left|right), etc. do not use those without having proper documentation of which options exist and of what types. */ }`
+  - Short list of common preset names: - Entrance: `FadeIn`, `BounceIn`, `SlideIn`, `F
+lipIn`, `ArcIn` - Ongoing: `Pulse`, `Spin`, `Wiggle`, `Bounce` - Scroll: `ParallaxScroll`, `FadeScroll`, `RevealScroll`, `TiltScroll` - For scroll-effects used with the `viewProgress` trigger, the `namedEffect` options MUST include `range: 'in' | 'out' | 'continuous'`. Prefer `range: 'continuous'` for simplicity. - Mouse: For `pointerMove` (mouse-effects), prefer `namedEffect` presets (e.g., `TrackMouse`, `Tilt3DMouse`, `ScaleMouse`, `BlurMouse`); avoid `keyframeEffect` with `pointerMove` since progress is two‑dimensional. - Mouse: `TrackMouse`, `Tilt3DMouse`, `ScaleMouse`, `BlurMouse`
 - **keyframeEffect (Default for custom animations)**: Prefer this when you need a custom-made animation.
   - Structure: `keyframeEffect: { name: string; keyframes: Keyframe[] }` (keyframes use standard CSS/WAAPI properties).
   - Not compatible with `pointerMove` (mouse-effects) because pointer progress is two‑dimensional; use `customEffect` for custom pointer‑driven animations.

package/rules/hover.md

@@ -95,7 +95,7 @@ This document contains rules for generating hover trigger interactions in `@wix/
 
 ## Rule 2: Hover Enter/Leave Animations with Named Effects
 
-**Purpose**: Generate hover interactions using pre-built named effects from @wix/motion
+**Purpose**: Generate hover interactions using pre-built named effects from @wix/motion-presets
 
 **Pattern**:
 
@@ -125,7 +125,7 @@ This document contains rules for generating hover trigger interactions in `@wix/
 **Variables**:
 
 - `[REVERSED_BOOL]`: Optional boolean value indicating whether the mouse enter animation is reversed (and mouse leave is forwards).
-- `[NAMED_EFFECT_TYPE]`: Name of the pre-built named effect from @wix/motion to use.
+- `[NAMED_EFFECT_TYPE]`: Name of the pre-built named effect from @wix/motion-presets to use.
 - `[EFFECT_PROPERTIES]`: Named effect specific properties (distance, angle, perspective, etc.)
 - Other variables same as Rule 1
 

package/rules/{Integration.md → integration.md}

@@ -120,9 +120,10 @@ type InteractConfig = {
 
 ### Element Selection Hierarchy
 
-1. **`listContainer`**: If present, selects a container to target its immediate children as list items.
-2. **`selector`**: Matches elements within the root, or within each list item.
-3. **Fallback**: If neither is provided, targets the **first child** of `<interact-element>` in `web` or the root element in `react`.
+1. **`listContainer` + `selector`**: If both are present, uses `querySelectorAll(selector)` within the container to find all matching elements as list items.
+2. **`listContainer` only**: If present without `selector`, targets the immediate children of the container as list items.
+3. **`selector` only**: If present without `listContainer`, matches all elements within the root element (using `querySelectorAll`).
+4. **Fallback**: If neither is provided, targets the **first child** of `<interact-element>` in `web` or the root element in `react`.
 
 ## 4. Generating Critical CSS for Entrance Animations
 
@@ -168,20 +169,22 @@ const html = `
 
 **When to Use:**
 
-- For elements with an entrance efffect that is triggered a with `viewEnter`
+- For elements with an entrance effect that is triggered with `viewEnter`
 - To prevent elements from being visible before their entrance animation plays
 - For server-side rendering (SSR) or static site generation (SSG) scenarios
 
 ## 5. Triggers & Behaviors
 
-| Trigger        | Description                      | Key Parameters                                                                                                            | Rules File          |
-| :------------- | :------------------------------- | :------------------------------------------------------------------------------------------------------------------------ | :------------------ |
-| `hover`        | Mouse enter/leave                | `type`: 'once', 'alternate', 'repeat', 'state' for animations, or `method`: 'add', 'remove', 'toggle', 'clear' for states | `./hover.md`        |
-| `click`        | Mouse click                      | `type`: 'once', 'alternate', 'repeat', 'state' for animations, or `method`: 'add', 'remove', 'toggle', 'clear' for states | `./click.md`        |
-| `viewEnter`    | Element enters viewport          | `type`: 'once', 'alternate', 'repeat', 'state'; `threshold` (0-1)                                                         | `./viewEnter.md`    |
-| `viewProgress` | Scroll-driven using ViewTimeline | (No specific params, uses effect ranges)                                                                                  | `./viewprogress.md` |
-| `pointerMove`  | Mouse movement                   | `hitArea`: 'self' (default) or 'root'                                                                                     | `./pointermove.md`  |
-| `animationEnd` | Chaining animations              | `effectId`: ID of the previous effect                                                                                     | --                  |
+| Trigger        | Description                                     | Key Parameters                                                                                                            | Rules File          |
+| :------------- | :---------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------ | :------------------ |
+| `hover`        | Mouse enter/leave                               | `type`: 'once', 'alternate', 'repeat', 'state' for animations, or `method`: 'add', 'remove', 'toggle', 'clear' for states | `./hover.md`        |
+| `click`        | Mouse click                                     | `type`: 'once', 'alternate', 'repeat', 'state' for animations, or `method`: 'add', 'remove', 'toggle', 'clear' for states | `./click.md`        |
+| `activate`     | Accessible click (click + keyboard Space/Enter) | Same as `click` with keyboard support                                                                                     | `./click.md`        |
+| `interest`     | Accessible hover (hover + focus)                | Same as `hover` with focus support                                                                                        | `./hover.md`        |
+| `viewEnter`    | Element enters viewport                         | `type`: 'once', 'alternate', 'repeat', 'state'; `threshold` (0-1)                                                         | `./viewenter.md`    |
+| `viewProgress` | Scroll-driven using ViewTimeline                | (No specific params, uses effect ranges)                                                                                  | `./viewprogress.md` |
+| `pointerMove`  | Mouse movement                                  | `hitArea`: 'self' (default) or 'root'; `axis`: 'x' or 'y' for keyframeEffect                                              | `./pointermove.md`  |
+| `animationEnd` | Chaining animations                             | `effectId`: ID of the previous effect                                                                                     | --                  |
 
 ## 6. Effects & Animations