@splendidlabz/utils 1.9.1 → 1.10.1

package/dist/esm/dom/observers/index.js

@@ -102,12 +102,14 @@ function mutationObserver(target, options) {
 function resizeObserver(target, options) {
   const { callback, ...opts } = options;
   const observer = new ResizeObserver(observerFn);
-  if (target === window) target = document.body;
+  if (target === window || target === document)
+    target = document.documentElement;
   useObserverMethodOnTarget(target, observer, "observe", opts);
   function observerFn(entries) {
     for (const entry of entries) {
       if (callback) callback({ entry, entries, observer });
-      else dispatchEvent(target, "resize-obs", { entry, entries, observer });
+      else
+        dispatchEvent(entry.target, "resize-obs", { entry, entries, observer });
     }
   }
   return {
@@ -128,40 +130,44 @@ var defaultOptions2 = {
   // Float between 0 to 1.
   tolerance: 0.1,
   // Float between 0 to 1. Tolerance for event firing
-  throttle: 16,
-  // Throttle interval in ms (default: ~60fps)
   once: false
   // Only fire threshold callback once
 };
+function getScrollElement(node) {
+  if (node === document || node === window || node === document.documentElement) {
+    return document.documentElement;
+  }
+  return (
+    /** @type {Element} */
+    node
+  );
+}
 function scrollObserver(node, options = {}) {
   const { callback, onScrollDown, onScrollUp, onEnterThreshold, ...userOpts } = options;
   const opts = { ...defaultOptions2, ...userOpts };
-  const { threshold, tolerance, throttle, once } = opts;
-  const prevScrollDirection = null;
+  const { threshold, tolerance, once } = opts;
+  let prevScrollDirection = null;
   let prevScrollTop = 0;
   let prevScrollPercent = 0;
-  let lastThrottleTime = 0;
   let thresholdFired = false;
   let rafId = null;
-  const isDocumentScroll = node === document || node === window;
-  const scrollElement = isDocumentScroll ? document.documentElement : node;
+  const isDocumentScroll = node === document || node === window || node === document.documentElement;
+  const scrollElement = getScrollElement(node);
+  const eventTarget = isDocumentScroll ? window : node;
   let cachedScrollHeight = 0;
   let cachedClientHeight = 0;
   updateCache();
   const cacheObserver = resizeObserver(scrollElement, {
     callback: updateCache
   });
-  node.addEventListener("scroll", throttledObserve, { passive: true });
+  eventTarget.addEventListener("scroll", throttledObserve, { passive: true });
+  function throttledObserve() {
+    rafId = requestAnimationFrame(observe);
+  }
   function updateCache() {
     cachedScrollHeight = scrollElement.scrollHeight;
     cachedClientHeight = scrollElement.clientHeight;
   }
-  function throttledObserve() {
-    const now = Date.now();
-    if (now - lastThrottleTime < throttle) return;
-    lastThrottleTime = now;
-    rafId = requestAnimationFrame(observe);
-  }
   function observe() {
     const scrollTop = scrollElement.scrollTop;
     if (Math.abs(scrollTop - prevScrollTop) < 1) return;
@@ -200,10 +206,11 @@ function scrollObserver(node, options = {}) {
     }
     prevScrollTop = scrollTop;
     prevScrollPercent = scrollPercent;
+    prevScrollDirection = scrollDirection;
   }
   return {
     destroy() {
-      node.removeEventListener("scroll", throttledObserve);
+      eventTarget.removeEventListener("scroll", throttledObserve);
       if (rafId) cancelAnimationFrame(rafId);
       cacheObserver.destroy();
     }

package/dist/esm/dom/observers/resize-observer.js

@@ -32,12 +32,14 @@ function useObserverMethodOnTarget(target, observer, method = "observe", options
 function resizeObserver(target, options) {
   const { callback, ...opts } = options;
   const observer = new ResizeObserver(observerFn);
-  if (target === window) target = document.body;
+  if (target === window || target === document)
+    target = document.documentElement;
   useObserverMethodOnTarget(target, observer, "observe", opts);
   function observerFn(entries) {
     for (const entry of entries) {
       if (callback) callback({ entry, entries, observer });
-      else dispatchEvent(target, "resize-obs", { entry, entries, observer });
+      else
+        dispatchEvent(entry.target, "resize-obs", { entry, entries, observer });
     }
   }
   return {

package/dist/esm/dom/observers/scroll-observer.js

@@ -32,12 +32,14 @@ function useObserverMethodOnTarget(target, observer, method = "observe", options
 function resizeObserver(target, options) {
   const { callback, ...opts } = options;
   const observer = new ResizeObserver(observerFn);
-  if (target === window) target = document.body;
+  if (target === window || target === document)
+    target = document.documentElement;
   useObserverMethodOnTarget(target, observer, "observe", opts);
   function observerFn(entries) {
     for (const entry of entries) {
       if (callback) callback({ entry, entries, observer });
-      else dispatchEvent(target, "resize-obs", { entry, entries, observer });
+      else
+        dispatchEvent(entry.target, "resize-obs", { entry, entries, observer });
     }
   }
   return {
@@ -58,40 +60,44 @@ var defaultOptions = {
   // Float between 0 to 1.
   tolerance: 0.1,
   // Float between 0 to 1. Tolerance for event firing
-  throttle: 16,
-  // Throttle interval in ms (default: ~60fps)
   once: false
   // Only fire threshold callback once
 };
+function getScrollElement(node) {
+  if (node === document || node === window || node === document.documentElement) {
+    return document.documentElement;
+  }
+  return (
+    /** @type {Element} */
+    node
+  );
+}
 function scrollObserver(node, options = {}) {
   const { callback, onScrollDown, onScrollUp, onEnterThreshold, ...userOpts } = options;
   const opts = { ...defaultOptions, ...userOpts };
-  const { threshold, tolerance, throttle, once } = opts;
-  const prevScrollDirection = null;
+  const { threshold, tolerance, once } = opts;
+  let prevScrollDirection = null;
   let prevScrollTop = 0;
   let prevScrollPercent = 0;
-  let lastThrottleTime = 0;
   let thresholdFired = false;
   let rafId = null;
-  const isDocumentScroll = node === document || node === window;
-  const scrollElement = isDocumentScroll ? document.documentElement : node;
+  const isDocumentScroll = node === document || node === window || node === document.documentElement;
+  const scrollElement = getScrollElement(node);
+  const eventTarget = isDocumentScroll ? window : node;
   let cachedScrollHeight = 0;
   let cachedClientHeight = 0;
   updateCache();
   const cacheObserver = resizeObserver(scrollElement, {
     callback: updateCache
   });
-  node.addEventListener("scroll", throttledObserve, { passive: true });
+  eventTarget.addEventListener("scroll", throttledObserve, { passive: true });
+  function throttledObserve() {
+    rafId = requestAnimationFrame(observe);
+  }
   function updateCache() {
     cachedScrollHeight = scrollElement.scrollHeight;
     cachedClientHeight = scrollElement.clientHeight;
   }
-  function throttledObserve() {
-    const now = Date.now();
-    if (now - lastThrottleTime < throttle) return;
-    lastThrottleTime = now;
-    rafId = requestAnimationFrame(observe);
-  }
   function observe() {
     const scrollTop = scrollElement.scrollTop;
     if (Math.abs(scrollTop - prevScrollTop) < 1) return;
@@ -130,10 +136,11 @@ function scrollObserver(node, options = {}) {
     }
     prevScrollTop = scrollTop;
     prevScrollPercent = scrollPercent;
+    prevScrollDirection = scrollDirection;
   }
   return {
     destroy() {
-      node.removeEventListener("scroll", throttledObserve);
+      eventTarget.removeEventListener("scroll", throttledObserve);
       if (rafId) cancelAnimationFrame(rafId);
       cacheObserver.destroy();
     }

package/dist/types/dom/events.d.cts

@@ -2,7 +2,7 @@
  * @typedef {Object} EventListener
  * @property {Element} node - The DOM element to attach the event listener to
  * @property {string} event - The event type (e.g., 'click', 'keydown')
- * @property {Function} handler - The event handler function
+ * @property {EventListenerOrEventListenerObject} handler - The event handler function
  */
 /**
  * @typedef {Object} ListenerManager
@@ -54,7 +54,7 @@ type EventListener = {
     /**
      * - The event handler function
      */
-    handler: Function;
+    handler: EventListenerOrEventListenerObject;
 };
 type ListenerManager = {
     /**

package/dist/types/dom/font-size.d.cts

@@ -1,7 +1,8 @@
 declare function getUnit(value: any): any;
-declare function em(element?: HTMLElement, multiple?: number): number;
 declare function rem(multiple?: number): number;
+declare function em(element?: HTMLElement, multiple?: number): number;
+declare function rlh(multiple?: number): number;
 declare function lh(element?: HTMLElement, multiple?: number): number;
 declare function toPx(value: any, element?: any): number;
 
-export { em, getUnit, lh, rem, toPx };
+export { em, getUnit, lh, rem, rlh, toPx };

package/dist/types/dom/index.d.cts

@@ -8,7 +8,7 @@ export { cookies, getCookie } from './cookie.cjs';
 export { getCSSValue, getCSSVar, setCSSValue, setCSSVar } from './css-vars.cjs';
 export { CustomEventOptions, EventListener, ListenerManager, addListeners, dispatchEvent, removeListeners, updateEvent } from './events.cjs';
 export { Focusable, Focusables, getFocusableElements } from './focusable.cjs';
-export { em, getUnit, lh, rem, toPx } from './font-size.cjs';
+export { em, getUnit, lh, rem, rlh, toPx } from './font-size.cjs';
 export { getAncestorWithSiblings, getChildrenElements, getElement, getNodeType, getParentElement, getSelfIndex, getSiblingElements, isAncestor } from './get-element.cjs';
 export { sha256Hash } from './hash.cjs';
 export { isArrowKey, isEscapeKey, isShiftTab, isTab, isTabKey } from './keyboard.cjs';
@@ -17,7 +17,7 @@ export { imagesLoaded, mediaLoaded, videosLoaded } from './media.cjs';
 export { intersectionObserver } from './observers/intersection-observer.cjs';
 export { mutationObserver } from './observers/mutation-observer.cjs';
 export { resizeObserver } from './observers/resize-observer.cjs';
-export { scrollObserver } from './observers/scroll-observer.cjs';
+export { ScrollObserverOptions, scrollObserver } from './observers/scroll-observer.cjs';
 export { PKCE } from './pkce.cjs';
 export { queryParams } from './query-params.cjs';
 export { randomString, uuid } from './random-string.cjs';

package/dist/types/dom/observers/index.d.cts

@@ -1,4 +1,4 @@
 export { intersectionObserver } from './intersection-observer.cjs';
 export { mutationObserver } from './mutation-observer.cjs';
 export { resizeObserver } from './resize-observer.cjs';
-export { scrollObserver } from './scroll-observer.cjs';
+export { ScrollObserverOptions, scrollObserver } from './scroll-observer.cjs';

package/dist/types/dom/observers/resize-observer.d.cts

@@ -1,8 +1,8 @@
 /**
  * Creates and manages a ResizeObserver instance to monitor size changes of a target element.
  *
- * @param {Element|Window|NodeList|Element[]} target - The element(s) to observe.
- *   - If window is provided, document.body will be observed instead.
+ * @param {Element|Window|Document|NodeList|Element[]} target - The element(s) to observe.
+ *   - If window or document is provided, document.documentElement will be observed instead.
  *   - If NodeList or Array of elements is provided, all elements will be observed.
  * @param {Object} options - Configuration options for the resize observer
  * @param {boolean} [options.observe=true] - Whether to start observing immediately. If false, the observer won't be created.
@@ -31,7 +31,7 @@
  *   console.log('Element resized:', detail.entry.contentRect);
  * });
  */
-declare function resizeObserver(target: Element | Window | NodeList | Element[], options: {
+declare function resizeObserver(target: Element | Window | Document | NodeList | Element[], options: {
     observe?: boolean;
     callback?: Function;
     observerOptions?: any;

package/dist/types/dom/observers/scroll-observer.d.cts

@@ -1,27 +1,40 @@
 /**
  * Scroll Observer - Optimized for performance
- * @param {Element} node - The element to observe scroll events on
- * @param {Object} options - Configuration options
- * @param {Number} options.threshold - Float between 0 to 1. When to trigger callback (0.75 = 75% down page)
- * @param {Number} options.tolerance - Float between 0 to 1. Tolerance zone around threshold
- * @param {Number} options.throttle - Throttle interval in ms (default: 16ms for ~60fps)
- * @param {Boolean} options.once - Only fire threshold callback once (default: false)
- * @param {Function} options.callback - Called on every scroll with scrollPercent
- * @param {Function} options.onScrollDown - Called when scrolling down
- * @param {Function} options.onScrollUp - Called when scrolling up
- * @param {Function} options.onEnterThreshold - Called when entering threshold zone
+ * @param {Element | Document | Window} node - The element to observe scroll events on
+ * @param {ScrollObserverOptions} [options] - Configuration options
  */
-declare function scrollObserver(node: Element, options?: {
-    threshold: number;
-    tolerance: number;
-    throttle: number;
-    once: boolean;
-    callback: Function;
-    onScrollDown: Function;
-    onScrollUp: Function;
-    onEnterThreshold: Function;
-}): {
+declare function scrollObserver(node: Element | Document | Window, options?: ScrollObserverOptions): {
     destroy(): void;
 };
+type ScrollObserverOptions = {
+    /**
+     * - Float between 0 to 1. When to trigger callback (0.75 = 75% down page)
+     */
+    threshold?: number;
+    /**
+     * - Float between 0 to 1. Tolerance zone around threshold
+     */
+    tolerance?: number;
+    /**
+     * - Only fire threshold callback once (default: false)
+     */
+    once?: boolean;
+    /**
+     * - Called on every scroll with scrollPercent
+     */
+    callback?: Function;
+    /**
+     * - Called when scrolling down
+     */
+    onScrollDown?: Function;
+    /**
+     * - Called when scrolling up
+     */
+    onScrollUp?: Function;
+    /**
+     * - Called when entering threshold zone
+     */
+    onEnterThreshold?: Function;
+};
 
-export { scrollObserver };
+export { type ScrollObserverOptions, scrollObserver };

package/dist/types/dom/spam-prevention.d.cts

@@ -1,14 +1,14 @@
 /**
  * Enhances a form element with spam detection capabilities
  * @param {HTMLFormElement} form - The form element to enhance
- * @param {Object} options - Configuration options
- * @param {string} options.honeypotField - Name of the honeypot field (default: 'hp')
- * @param {number} options.honeypotDuration - Minimum time in ms for legitimate form fill (default: 2000)
- * @returns {Function} Cleanup function to remove listeners and method
+ * @param {Object} [options] - Configuration options
+ * @param {string} [options.honeypotField] - Name of the honeypot field (default: 'hp')
+ * @param {number} [options.honeypotDuration] - Minimum time in ms for legitimate form fill (default: 2000)
+ * @returns {void}
  */
 declare function preventSpam(form: HTMLFormElement, { honeypotField, honeypotDuration }?: {
-    honeypotField: string;
-    honeypotDuration: number;
-}): Function;
+    honeypotField?: string;
+    honeypotDuration?: number;
+}): void;
 
 export { preventSpam };

package/dist/types/lib/checks.d.cts

@@ -27,6 +27,6 @@ declare function isArray(x: unknown): boolean;
  * notObject({}) // false
  */
 declare function notObject(x: unknown): boolean;
-declare function getType(x: any): "array" | "string" | "integer" | "float" | "boolean" | "function" | "undefined" | "symbol" | "bigint" | "object" | "unknown";
+declare function getType(x: any): "string" | "integer" | "float" | "boolean" | "function" | "undefined" | "symbol" | "bigint" | "array" | "object" | "unknown";
 
 export { getType, isArray, isObject, notObject };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/utils",
-  "version": "1.9.1",
+  "version": "1.10.1",
   "description": "",
   "type": "module",
   "sideEffects": false,

package/src/dom/actions/prefer-horizontal-scroll.js

@@ -1,11 +1,6 @@
-import {
-    addListeners,
-    getCSSVar,
-    removeListeners,
-    setCSSVar,
-} from '../index.js'
-
-import { omitEmpty } from '../../lib/index.js'
+import { omitEmpty } from '../../lib/objects/omit-empty.js'
+import { getCSSVar, setCSSVar } from '../css-vars.js'
+import { addListeners, removeListeners } from '../events.js'
 
 const DEFAULT_OPTIONS = {
   scrollSnapDelay: 1000,

package/src/dom/events.js

@@ -2,7 +2,7 @@
  * @typedef {Object} EventListener
  * @property {Element} node - The DOM element to attach the event listener to
  * @property {string} event - The event type (e.g., 'click', 'keydown')
- * @property {Function} handler - The event handler function
+ * @property {EventListenerOrEventListenerObject} handler - The event handler function
  */
 
 /**

package/src/dom/font-size.js

@@ -1,18 +1,23 @@
-import { splitUnit } from '../lib/index.js'
+import { splitUnit } from '../lib/numbers/index.js'
 
 export function getUnit(value) {
   const [, unit] = splitUnit(value)
   return unit
 }
 
+export function rem(multiple = 1) {
+  const value = parseFloat(getComputedStyle(document.body)['font-size'])
+  return Math.round(value * multiple)
+}
+
 export function em(element = document.body, multiple = 1) {
   const value = parseFloat(getComputedStyle(element)['font-size'])
   return Math.round(value * multiple)
 }
 
-export function rem(multiple = 1) {
-  const value = parseFloat(getComputedStyle(document.body)['font-size'])
-  return Math.round(value * multiple)
+export function rlh(multiple = 1) {
+  const lineHeight = parseFloat(getComputedStyle(document.body)['line-height'])
+  return Math.round(lineHeight * multiple)
 }
 
 export function lh(element = document.body, multiple = 1) {

package/src/dom/observers/resize-observer.js

@@ -5,8 +5,8 @@ import { useObserverMethodOnTarget } from './observer.js'
 /**
  * Creates and manages a ResizeObserver instance to monitor size changes of a target element.
  *
- * @param {Element|Window|NodeList|Element[]} target - The element(s) to observe.
- *   - If window is provided, document.body will be observed instead.
+ * @param {Element|Window|Document|NodeList|Element[]} target - The element(s) to observe.
+ *   - If window or document is provided, document.documentElement will be observed instead.
  *   - If NodeList or Array of elements is provided, all elements will be observed.
  * @param {Object} options - Configuration options for the resize observer
  * @param {boolean} [options.observe=true] - Whether to start observing immediately. If false, the observer won't be created.
@@ -39,13 +39,15 @@ export function resizeObserver(target, options) {
   const { callback, ...opts } = options
   const observer = new ResizeObserver(observerFn)
 
-  if (target === window) target = document.body
+  if (target === window || target === document)
+    target = document.documentElement
   useObserverMethodOnTarget(target, observer, 'observe', opts)
 
   function observerFn(entries) {
     for (const entry of entries) {
       if (callback) callback({ entry, entries, observer })
-      else dispatchEvent(target, 'resize-obs', { entry, entries, observer })
+      else
+        dispatchEvent(entry.target, 'resize-obs', { entry, entries, observer })
     }
   }
 

package/src/dom/observers/scroll-observer.js

@@ -4,40 +4,57 @@ import { resizeObserver } from './resize-observer.js'
 const defaultOptions = {
   threshold: 0, // Float between 0 to 1.
   tolerance: 0.1, // Float between 0 to 1. Tolerance for event firing
-  throttle: 16, // Throttle interval in ms (default: ~60fps)
   once: false, // Only fire threshold callback once
 }
 
-// TODO: Move to Utils/Dom
+/**
+ * @typedef {Object} ScrollObserverOptions
+ * @property {number} [threshold] - Float between 0 to 1. When to trigger callback (0.75 = 75% down page)
+ * @property {number} [tolerance] - Float between 0 to 1. Tolerance zone around threshold
+ * @property {boolean} [once] - Only fire threshold callback once (default: false)
+ * @property {Function} [callback] - Called on every scroll with scrollPercent
+ * @property {Function} [onScrollDown] - Called when scrolling down
+ * @property {Function} [onScrollUp] - Called when scrolling up
+ * @property {Function} [onEnterThreshold] - Called when entering threshold zone
+ */
+
+/**
+ * @param {Element | Document | Window} node
+ * @returns {Element}
+ */
+function getScrollElement(node) {
+  if (
+    node === document ||
+    node === window ||
+    node === document.documentElement
+  ) {
+    return document.documentElement
+  }
+  return /** @type {Element} */ (node)
+}
+
 /**
  * Scroll Observer - Optimized for performance
- * @param {Element} node - The element to observe scroll events on
- * @param {Object} options - Configuration options
- * @param {Number} options.threshold - Float between 0 to 1. When to trigger callback (0.75 = 75% down page)
- * @param {Number} options.tolerance - Float between 0 to 1. Tolerance zone around threshold
- * @param {Number} options.throttle - Throttle interval in ms (default: 16ms for ~60fps)
- * @param {Boolean} options.once - Only fire threshold callback once (default: false)
- * @param {Function} options.callback - Called on every scroll with scrollPercent
- * @param {Function} options.onScrollDown - Called when scrolling down
- * @param {Function} options.onScrollUp - Called when scrolling up
- * @param {Function} options.onEnterThreshold - Called when entering threshold zone
+ * @param {Element | Document | Window} node - The element to observe scroll events on
+ * @param {ScrollObserverOptions} [options] - Configuration options
  */
 export function scrollObserver(node, options = {}) {
   const { callback, onScrollDown, onScrollUp, onEnterThreshold, ...userOpts } =
     options
   const opts = { ...defaultOptions, ...userOpts }
-  const { threshold, tolerance, throttle, once } = opts
+  const { threshold, tolerance, once } = opts
 
-  const prevScrollDirection = null
+  let prevScrollDirection = null
   let prevScrollTop = 0
   let prevScrollPercent = 0
-  let lastThrottleTime = 0
   let thresholdFired = false
   let rafId = null
 
   // Determine scroll context once at initialization
-  const isDocumentScroll = node === document || node === window
-  const scrollElement = isDocumentScroll ? document.documentElement : node
+  const isDocumentScroll =
+    node === document || node === window || node === document.documentElement
+  const scrollElement = getScrollElement(node)
+  const eventTarget = isDocumentScroll ? window : node
 
   // Cache DOM references and expensive calculations
   let cachedScrollHeight = 0
@@ -49,21 +66,17 @@ export function scrollObserver(node, options = {}) {
     callback: updateCache,
   })
 
-  node.addEventListener('scroll', throttledObserve, { passive: true })
+  eventTarget.addEventListener('scroll', throttledObserve, { passive: true })
+
+  function throttledObserve() {
+    rafId = requestAnimationFrame(observe)
+  }
 
   function updateCache() {
     cachedScrollHeight = scrollElement.scrollHeight
     cachedClientHeight = scrollElement.clientHeight
   }
 
-  function throttledObserve() {
-    const now = Date.now()
-    if (now - lastThrottleTime < throttle) return
-
-    lastThrottleTime = now
-    rafId = requestAnimationFrame(observe)
-  }
-
   function observe() {
     const scrollTop = scrollElement.scrollTop
 
@@ -120,11 +133,12 @@ export function scrollObserver(node, options = {}) {
 
     prevScrollTop = scrollTop
     prevScrollPercent = scrollPercent
+    prevScrollDirection = scrollDirection
   }
 
   return {
     destroy() {
-      node.removeEventListener('scroll', throttledObserve)
+      eventTarget.removeEventListener('scroll', throttledObserve)
       if (rafId) cancelAnimationFrame(rafId)
       cacheObserver.destroy()
     },

package/src/dom/spam-prevention.js

@@ -1,10 +1,10 @@
 /**
  * Enhances a form element with spam detection capabilities
  * @param {HTMLFormElement} form - The form element to enhance
- * @param {Object} options - Configuration options
- * @param {string} options.honeypotField - Name of the honeypot field (default: 'hp')
- * @param {number} options.honeypotDuration - Minimum time in ms for legitimate form fill (default: 2000)
- * @returns {Function} Cleanup function to remove listeners and method
+ * @param {Object} [options] - Configuration options
+ * @param {string} [options.honeypotField] - Name of the honeypot field (default: 'hp')
+ * @param {number} [options.honeypotDuration] - Minimum time in ms for legitimate form fill (default: 2000)
+ * @returns {void}
  */
 export function preventSpam(
   form,
@@ -25,6 +25,7 @@ export function preventSpam(
   form.containsSpam = function () {
     const fillTime = Date.now() - startTime
     const isTooFast = fillTime < honeypotDuration
+    /** @type {HTMLInputElement | null} */
     const honeypotInput = form.querySelector(`[name="${honeypotField}"]`)
     const hasHoneypotValue = honeypotInput?.value?.trim()
     const noInteraction = !hasInteraction