tiny-essentials 1.21.9 → 1.22.0

package/dist/v1/libs/TinyHtml.cjs

@@ -1,7 +1,11 @@
 'use strict';
 
+var array = require('../basics/array.cjs');
+var text = require('../basics/text.cjs');
 var collision = require('../basics/collision.cjs');
+var TinyElementObserver = require('./TinyElementObserver.cjs');
 
+// TITLE: Introduction
 const {
   areElsColliding,
   areElsPerfColliding,
@@ -16,6 +20,55 @@ const {
  * @typedef {TinyHtml<ConstructorElValues>} TinyHtmlAny
  */
 
+/**
+ * Callback function used for hover events.
+ * @callback HoverEventCallback
+ * @param {MouseEvent} ev - The mouse event triggered on enter or leave.
+ * @returns {void} Returns nothing.
+ */
+
+/**
+ * Represents a collection of active style-based animations.
+ *
+ * Each HTMLElement is associated with an array of its currently running
+ * `Animation` objects (from the Web Animations API).
+ *
+ * @typedef {Map<HTMLElement, Animation|null>} StyleFxResult
+ */
+
+/**
+ * Represents a collection of animation keyframe data mapped by CSS property.
+ *
+ * - The **key** is the CSS property name (e.g. `"height"`, `"opacity"`).
+ * - The **value** is an array of values representing the start and end
+ *   states of the property during the animation.
+ *
+ * @typedef {Record<string, (string|number)[]>} AnimationSfxData
+ */
+
+/**
+ * Function signature for style effects repeat detectors.
+ *
+ * @typedef {(effects: AnimationSfxData) => boolean} StyleEffectsRdFn
+ */
+
+/**
+ * Function signature for style effect property handlers.
+ *
+ * @typedef {(
+ *   el: HTMLElement,
+ *   keyframes: AnimationSfxData,
+ *   prop: string,
+ *   style: CSSStyleDeclaration
+ * ) => void} StyleEffectsFn
+ */
+
+/**
+ * A collection of style effect property handlers.
+ *
+ * @typedef {Record<string, StyleEffectsFn>} StyleEffectsProps
+ */
+
 /**
  * Callback invoked on each animation frame with the current scroll position,
  * normalized animation time (`0` to `1`), and a completion flag.
@@ -176,6 +229,34 @@ const __eventRegistry = new WeakMap();
  */
 const __elementDataMap = new WeakMap();
 
+/**
+ * Internal storage for animation-related data, associated with elements.
+ * Used to remember original dimensions (height/width) and other properties
+ * so that animations like `slideUp` and `slideDown` can restore or continue
+ * smoothly, mimicking jQuery's behavior.
+ *
+ * Each element is mapped to a plain object with keys such as `origHeight`,
+ * `origWidth`, etc.
+ *
+ * @type {WeakMap<HTMLElement, Record<string, string|number>>}
+ */
+const __elementAnimateData = new WeakMap();
+
+/**
+ * Stores the currently active animation for each element,
+ * allowing cancellation or replacement of ongoing animations.
+ *
+ * @type {WeakMap<HTMLElement, { animation: Animation, id: string }>}
+ */
+const __elementCurrentAnimation = new WeakMap();
+
+/**
+ * Mapping of animation shortcuts to their effect definitions.
+ * Similar to jQuery's predefined effects (slideDown, fadeIn, etc.).
+ *
+ * @typedef {Record<string, string|(string|number)[]>} StyleEffects
+ */
+
 /**
  * Stores directional collision locks separately.
  * Each direction has its own WeakMap to allow independent locking.
@@ -240,6 +321,8 @@ const __elemCollision = {
  * ]} HtmlParsed
  */
 
+// TITLE: Class Intro
+
 /**
  * TinyHtml is a utility class that provides static and instance-level methods
  * for precise dimension and position computations on HTML elements.
@@ -256,6 +339,132 @@ class TinyHtml {
 
   static Utils = { ...collision };
 
+  /**
+   * Parse inline styles into an object.
+   * @param {string} styleText
+   * @returns {Record<string,string>}
+   */
+  static parseStyle(styleText) {
+    /** @type {Record<string,string>}} */
+    const styles = {};
+    styleText.split(';').forEach((rule) => {
+      const [prop, value] = rule.split(':').map((s) => s && s.trim());
+      if (prop && value) {
+        styles[prop] = value;
+      }
+    });
+    return styles;
+  }
+
+  /////////////////////////////////////////////////////////////////////
+
+  /**
+   * Flag to determine if element observer should start automatically.
+   * @type {boolean}
+   */
+  static #autoStartElemObserver = true;
+
+  /**
+   * Get the auto-start flag for the observer.
+   * @returns {boolean}
+   */
+  static get autoStartElemObserver() {
+    return TinyHtml.#autoStartElemObserver;
+  }
+
+  /**
+   * Set the auto-start flag for the observer.
+   * @param {boolean} value
+   */
+  static set autoStartElemObserver(value) {
+    if (typeof value !== 'boolean') throw new TypeError('autoStartElemObserver must be a boolean.');
+    TinyHtml.#autoStartElemObserver = value;
+  }
+
+  /** @type {TinyElementObserver} */
+  static #tinyObserver = new TinyElementObserver({
+    el:
+      typeof window !== 'undefined' && typeof window.document !== 'undefined'
+        ? window.document.documentElement
+        : undefined,
+    initDetectors: [
+      // Style Detector
+      [
+        'tinyStyleEvent',
+        (mutation) => {
+          if (
+            mutation.type !== 'attributes' ||
+            mutation.attributeName !== 'style' ||
+            !(mutation.target instanceof HTMLElement)
+          )
+            return;
+          const oldVal = mutation.oldValue || '';
+          const newVal = mutation.target.getAttribute('style') || '';
+
+          const oldStyles = TinyHtml.parseStyle(oldVal);
+          const newStyles = TinyHtml.parseStyle(newVal);
+
+          const changes = text.diffStrings(oldStyles, newStyles);
+
+          if (
+            Object.keys(changes.added).length ||
+            Object.keys(changes.removed).length ||
+            Object.keys(changes.modified).length
+          ) {
+            mutation.target.dispatchEvent(
+              new CustomEvent('tinyhtml.stylechanged', {
+                detail: changes,
+              }),
+            );
+          }
+        },
+      ],
+
+      // Class Detector
+      [
+        'tinyClassEvent',
+        (mutation) => {
+          if (
+            mutation.type !== 'attributes' ||
+            mutation.attributeName !== 'class' ||
+            !(mutation.target instanceof HTMLElement)
+          )
+            return;
+          const oldVal = mutation.oldValue || '';
+          const newVal = mutation.target.className || '';
+
+          const oldClasses = oldVal.split(/\s+/).filter(Boolean);
+          const newClasses = newVal.split(/\s+/).filter(Boolean);
+
+          const changes = array.diffArrayList(oldClasses, newClasses);
+
+          if (changes.added.length || changes.removed.length) {
+            mutation.target.dispatchEvent(
+              new CustomEvent('tinyhtml.classchanged', {
+                detail: changes,
+              }),
+            );
+          }
+        },
+      ],
+    ],
+    initCfg: {
+      attributeOldValue: true,
+      attributes: true,
+      subtree: true,
+      attributeFilter: ['style', 'class'],
+    },
+  });
+
+  /** @returns {TinyElementObserver} */
+  static get tinyObserver() {
+    return TinyHtml.#tinyObserver;
+  }
+
+  ///////////////////////////////////////////////////////////////////
+
+  // TITLE: Fetch Html List
+
   /**
    * Fetches an HTML file from the given URL, parses it to JSON.
    *
@@ -302,6 +511,8 @@ class TinyHtml {
     return TinyHtml.toTinyElm(nodes);
   }
 
+  // TITLE: Fetch Template List
+
   /**
    * Converts the content of a <template> to an array of HtmlParsed.
    *
@@ -347,6 +558,8 @@ class TinyHtml {
     return TinyHtml.toTinyElm(TinyHtml.templateToNodes(nodes));
   }
 
+  // TITLE: Fetch Json List
+
   /**
    * Parses a full HTML string into a JSON-like structure.
    *
@@ -438,6 +651,8 @@ class TinyHtml {
     return TinyHtml.toTinyElm(TinyHtml.jsonToNodes(jsonArray));
   }
 
+  // TITLE: Element Creator
+
   /**
    * Creates a new TinyHtml element from a tag name and optional attributes.
    *
@@ -521,6 +736,9 @@ class TinyHtml {
     return new TinyHtml(template.content.firstChild);
   }
 
+  ///////////////////////////////////////////////////
+  // TITLE: Query Script
+
   /**
    * Queries the document for the first element matching the CSS selector and wraps it in a TinyHtml instance.
    *
@@ -639,6 +857,8 @@ class TinyHtml {
 
   //////////////////////////////////////////////////////////////////
 
+  // TITLE: Element getter
+
   /**
    * Iterates over all elements, executing the provided callback on each.
    * @param {(element: TinyHtmlAny, index: number, items: TinyHtmlAny[]) => void} callback - Function invoked for each element.
@@ -695,6 +915,10 @@ class TinyHtml {
     return [...this.#el];
   }
 
+  ////////////////////////////////////////////////
+
+  // TITLE: Element Getter (Private) (Pt1)
+
   /**
    * Returns the current Element held by this instance.
    *
@@ -737,6 +961,8 @@ class TinyHtml {
 
   //////////////////////////////////////////////////////
 
+  // TITLE: Element Getter (Private) (Pt2)
+
   /**
    * Prepares and validates multiple elements against allowed types.
    *
@@ -1069,6 +1295,10 @@ class TinyHtml {
     return TinyHtml._preElemTemplate(elems, where, [Element, Document], ['Element', 'Document']);
   }
 
+  //////////////////////////////////////////////////////
+
+  // TITLE: Converter DOM <--> TinyHtml
+
   /**
    * Normalizes and converts one or more DOM elements (or TinyHtml instances)
    * into an array of `TinyHtml` instances.
@@ -1122,6 +1352,10 @@ class TinyHtml {
     return checkElement(elems);
   }
 
+  //////////////////////////////////////////////////
+
+  // TITLE: DOM Getter
+
   /**
    * Filters an array of elements based on a selector, function, element, or array of elements.
    *
@@ -1348,6 +1582,8 @@ class TinyHtml {
 
   //////////////////////////////////////////////////////////////////
 
+  // TITLE: Data Manager
+
   /**
    * Internal data storage for element information.
    * @type {ElementDataStore}
@@ -1464,6 +1700,8 @@ class TinyHtml {
 
   //////////////////////////////////////////////////////
 
+  // TITLE: DOM Getter 2
+
   /**
    * Get the sibling element in a given direction.
    *
@@ -1763,6 +2001,10 @@ class TinyHtml {
     return TinyHtml.contents(this);
   }
 
+  ////////////////////////////////////////////
+
+  // TITLE: Clone Dom
+
   /**
    * Clone each element.
    * @param {TinyNode|TinyNode[]} el
@@ -1783,6 +2025,10 @@ class TinyHtml {
     return TinyHtml.clone(this, deep)[0];
   }
 
+  //////////////////////////////////////////////////
+
+  // TITLE: Append Content
+
   /**
    * Normalize and validate nodes before DOM insertion.
    * Converts TinyNode-like structures or strings into DOM-compatible nodes.
@@ -2073,6 +2319,8 @@ class TinyHtml {
 
   //////////////////////////////////////////////////////
 
+  // TITLE: Constructor Base
+
   /**
    * The target HTML element for instance-level operations.
    * @type {ConstructorElValues[]}
@@ -2141,6 +2389,8 @@ class TinyHtml {
 
   /////////////////////////////////////////////////////
 
+  // TITLE: CSS Stuff
+
   /**
    * Returns the full computed CSS styles for the given element.
    *
@@ -2274,6 +2524,8 @@ class TinyHtml {
 
   //////////////////////////////////////////////////////////////////////
 
+  // TITLE: Style Stuff
+
   /**
    * Stores camelCase to kebab-case CSS property aliases.
    *
@@ -2789,6 +3041,8 @@ class TinyHtml {
 
   //////////////////////////////////////////////////////////////////////
 
+  // TITLE: Focus/Blur
+
   /**
    * Focus the element.
    *
@@ -2831,6 +3085,10 @@ class TinyHtml {
     return TinyHtml.blur(this);
   }
 
+  /////////////////////////////////////////////////////////
+
+  // TITLE: Select
+
   /**
    * Select the text content of an input or textarea element.
    *
@@ -2853,6 +3111,8 @@ class TinyHtml {
     return TinyHtml.select(this);
   }
 
+  // TITLE: Bool Checker
+
   /**
    * Interprets a value as a boolean `true` if it matches a common truthy representation.
    *
@@ -2879,6 +3139,8 @@ class TinyHtml {
 
   //////////////////////////////////////////////////////////////////////
 
+  // TITLE: Window Getter/Setter
+
   /**
    * Sets the vertical scroll position of the window.
    * @param {number} value - Sets the scroll position.
@@ -3213,194 +3475,1143 @@ class TinyHtml {
 
   //////////////////////////////////////////////////
 
+  // TITLE: Animate DOM (Data)
+
   /**
-   * Applies an animation to one or multiple TinyElement instances.
+   * Retrieves stored animation data for a given element and key.
+   * If no data exists yet, initializes storage for that element.
    *
-   * @template {TinyElement|TinyElement[]} T
-   * @param {T} el - A single TinyElement or an array of TinyElements to animate.
-   * @param {Keyframe[] | PropertyIndexedKeyframes | null} keyframes - The keyframes used to define the animation.
-   * @param {number | KeyframeAnimationOptions} [ops] - Timing or configuration options for the animation.
-   * @returns {T}
+   * @param {HTMLElement} el - The element whose data should be retrieved.
+   * @param {string} where - The key to read (e.g., "origHeight").
+   * @returns {string|number|undefined} - The stored value, or undefined.
    */
-  static animate(el, keyframes, ops) {
-    TinyHtml._preElems(el, 'animate').forEach((elem) => elem.animate(keyframes, ops));
-    return el;
+  static getAnimateData(el, where) {
+    let dataset = __elementAnimateData.get(el);
+    if (!dataset) {
+      dataset = {};
+      __elementAnimateData.set(el, dataset);
+    }
+    return dataset[where];
   }
 
   /**
-   * Applies an animation to one or multiple TinyElement instances.
+   * Stores animation data for a given element and key.
+   * Used to cache original size/values for animations.
    *
-   * @param {Keyframe[] | PropertyIndexedKeyframes | null} keyframes - The keyframes used to define the animation.
-   * @param {number | KeyframeAnimationOptions} [ops] - Timing or configuration options for the animation.
-   * @returns {this}
+   * @param {HTMLElement} el - The element whose data should be set.
+   * @param {string} where - The key to store under (e.g., "origHeight").
+   * @param {string|number} value - The value to store.
    */
-  animate(keyframes, ops) {
-    return TinyHtml.animate(this, keyframes, ops);
+  static setAnimateData(el, where, value) {
+    if (!(el instanceof HTMLElement))
+      throw new TypeError('setAnimateData: el must be an HTMLElement.');
+    if (typeof where !== 'string') throw new TypeError('setAnimateData: where must be a string.');
+    if (!(typeof value === 'string' || typeof value === 'number'))
+      throw new TypeError('setAnimateData: value must be a string or number.');
+
+    let dataset = __elementAnimateData.get(el);
+    if (!dataset) {
+      dataset = {};
+      __elementAnimateData.set(el, dataset);
+    }
+    dataset[where] = value;
   }
 
+  // TITLE: Animate DOM (cancelOldStyleFx)
+
   /**
-   * Gets the offset of the element relative to the document.
-   * @param {TinyElement} el - Target element.
-   * @returns {{top: number, left: number}}
+   * Global configuration flag controlling whether old style-based animations
+   * are cancelled before a new one starts. Defaults to true.
+   *
+   * @type {boolean}
    */
-  static offset(el) {
-    const elem = TinyHtml._preElem(el, 'offset');
-    const rect = elem.getBoundingClientRect();
-    const scrollTop = window.scrollY || document.documentElement.scrollTop;
-    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
-
-    return {
-      top: rect.top + scrollTop,
-      left: rect.left + scrollLeft,
-    };
-  }
+  static #cancelOldStyleFx = true;
 
   /**
-   * Gets the offset of the element relative to the document.
-   * @returns {{top: number, left: number}}
+   * Returns the current global setting for cancelling old style-based animations.
+   *
+   * @returns {boolean} True if old animations are cancelled by default, false otherwise.
    */
-  offset() {
-    return TinyHtml.offset(this);
+  static get cancelOldStyleFx() {
+    return TinyHtml.#cancelOldStyleFx;
   }
 
   /**
-   * Gets the position of the element relative to its offset parent.
-   * @param {TinyHtmlElement} el - Target element.
-   * @returns {{top: number, left: number}}
+   * Updates the global setting that determines whether old style-based animations
+   * are cancelled before new ones start.
+   *
+   * @param {boolean} value - True to cancel old animations by default, false to keep them running.
+   * @throws {TypeError} If the value is not a boolean.
    */
-  static position(el) {
-    const elem = TinyHtml._preHtmlElem(el, 'position');
-
-    let offsetParent;
-    let offset;
-    let parentOffset = { top: 0, left: 0 };
+  static set cancelOldStyleFx(value) {
+    if (typeof value !== 'boolean') throw new TypeError('Expected a boolean value.');
+    TinyHtml.#cancelOldStyleFx = value;
+  }
 
-    const computedStyle = window.getComputedStyle(elem);
+  // TITLE: Animate DOM (styleFxSpeeds)
 
-    if (computedStyle.position === 'fixed') {
-      offset = elem.getBoundingClientRect();
-    } else {
-      offset = TinyHtml.offset(elem);
+  /**
+   * Predefined animation speed options, inspired by jQuery.fx.speeds.
+   * Each entry can be either a number (duration in ms) or a KeyframeAnimationOptions object.
+   *
+   * Usage example:
+   *   TinyHtml.animate(el, keyframes, TinyHtml.#fxSpeeds.fast);
+   *   TinyHtml.slideDown(el, TinyHtml.#fxSpeeds.slow);
+   *
+   * @type {Record<string, number | KeyframeAnimationOptions>}
+   */
+  static #styleFxSpeeds = {
+    slow: { duration: 600, easing: 'ease' },
+    fast: { duration: 200, easing: 'ease-out' },
+    _default: { duration: 400, easing: 'linear' },
+  };
 
-      offsetParent = elem.offsetParent || document.documentElement;
-      const { position } = window.getComputedStyle(offsetParent);
+  /**
+   * Get a cloned copy of predefined animation speeds.
+   * @returns {Record<string, number | KeyframeAnimationOptions>}
+   */
+  static get styleFxSpeeds() {
+    /** @type {Record<string, number | KeyframeAnimationOptions>} */
+    const data = {};
+    for (const name in TinyHtml.#styleFxSpeeds) {
+      const info = TinyHtml.#styleFxSpeeds[name];
+      data[name] = typeof info === 'object' ? { ...info } : info;
+    }
+    return data;
+  }
 
-      while (
-        offsetParent instanceof HTMLElement &&
-        (offsetParent === document.body || offsetParent === document.documentElement) &&
-        position === 'static'
-      ) {
-        offsetParent = offsetParent.parentNode;
-      }
+  /**
+   * Replace the predefined animation speeds.
+   * @param {Record<string, number | KeyframeAnimationOptions>} speeds
+   * @throws {TypeError} If input is not a valid object of speed definitions.
+   */
+  static set styleFxSpeeds(speeds) {
+    if (typeof speeds !== 'object' || speeds === null || Array.isArray(speeds))
+      throw new TypeError('styleFxSpeeds must be an object.');
 
-      if (
-        offsetParent instanceof HTMLElement &&
-        offsetParent !== elem &&
-        offsetParent.nodeType === 1
-      ) {
-        const { borderTopWidth, borderLeftWidth } = TinyHtml.cssFloats(offsetParent, [
-          'borderTopWidth',
-          'borderLeftWidth',
-        ]);
-        parentOffset = TinyHtml.offset(offsetParent);
-        parentOffset.top += borderTopWidth;
-        parentOffset.left += borderLeftWidth;
-      }
+    for (const [k, v] of Object.entries(speeds)) {
+      if (!(typeof v === 'number' || typeof v === 'object'))
+        throw new TypeError(`styleFxSpeeds["${k}"] must be a number or KeyframeAnimationOptions.`);
     }
 
-    return {
-      top: offset.top - parentOffset.top - TinyHtml.cssFloat(elem, 'marginTop'),
-      left: offset.left - parentOffset.left - TinyHtml.cssFloat(elem, 'marginLeft'),
-    };
+    TinyHtml.#styleFxSpeeds = {};
+    for (const [k, v] of Object.entries(speeds)) TinyHtml.setStyleFxSpeed(k, v);
   }
 
   /**
-   * Gets the position of the element relative to its offset parent.
-   * @returns {{top: number, left: number}}
+   * Get a predefined animation speed by name.
+   *
+   * @param {string} name - The name of the speed entry.
+   * @returns {number | KeyframeAnimationOptions | undefined} A cloned value of the speed entry, or undefined if not found.
    */
-  position() {
-    return TinyHtml.position(this);
+  static getStyleFxSpeed(name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    const spd = TinyHtml.#styleFxSpeeds[name];
+    return typeof spd === 'object' ? { ...spd } : spd;
   }
 
   /**
-   * Gets the closest positioned ancestor element.
-   * @param {TinyHtmlElement} el - Target element.
-   * @returns {HTMLElement} - Offset parent element.
+   * Set or overwrite a predefined animation speed.
+   *
+   * @param {string} name - The name of the speed entry.
+   * @param {number | KeyframeAnimationOptions} value - The value to store.
+   * @throws {TypeError} If value is not a number or KeyframeAnimationOptions object.
    */
-  static offsetParent(el) {
-    const elem = TinyHtml._preHtmlElem(el, 'offsetParent');
-    let offsetParent = elem.offsetParent;
-
-    while (
-      offsetParent instanceof HTMLElement &&
-      window.getComputedStyle(offsetParent).position === 'static'
-    ) {
-      offsetParent = offsetParent.offsetParent;
-    }
-
-    // Fallback to document.documentElement
-    return offsetParent instanceof HTMLElement ? offsetParent : document.documentElement;
+  static setStyleFxSpeed(name, value) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    if (!(typeof value === 'number' || typeof value === 'object'))
+      throw new TypeError('styleFxSpeed must be a number or KeyframeAnimationOptions');
+    TinyHtml.#styleFxSpeeds[name] = typeof value === 'object' ? { ...value } : value;
   }
 
   /**
-   * Gets the closest positioned ancestor element.
-   * @returns {HTMLElement} - Offset parent element.
+   * Delete a predefined animation speed by name.
+   *
+   * @param {string} name - The name of the speed entry to delete.
+   * @returns {boolean} True if the property was deleted, false otherwise.
    */
-  offsetParent() {
-    return TinyHtml.offsetParent(this);
+  static deleteStyleFxSpeed(name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    return delete TinyHtml.#styleFxSpeeds[name];
   }
 
   /**
-   * Gets the vertical scroll position.
-   * @param {TinyElementAndWindow} el - Element or window.
-   * @returns {number}
+   * Check if a predefined animation speed exists.
+   *
+   * @param {string} name - The name of the speed entry to check.
+   * @returns {boolean} True if the speed entry exists, false otherwise.
    */
-  static scrollTop(el) {
-    const elem = TinyHtml._preElemAndWindow(el, 'scrollTop');
-    if (TinyHtml.isWindow(elem)) return elem.pageYOffset;
-    // @ts-ignore
-    if (elem.nodeType === 9) return elem.defaultView.pageYOffset;
-    return elem.scrollTop;
+  static hasStyleFxSpeed(name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    return Object.prototype.hasOwnProperty.call(TinyHtml.#styleFxSpeeds, name);
   }
 
+  // TITLE: Animate DOM (cssExpand)
+
   /**
-   * Gets the vertical scroll position.
-   * @returns {number}
+   * CSS expansion shorthand used by genStyleFx to include margin/padding values.
+   * @typedef {['Top', 'Right', 'Bottom', 'Left']}
    */
-  scrollTop() {
-    return TinyHtml.scrollTop(this);
-  }
+  static #cssExpand = ['Top', 'Right', 'Bottom', 'Left'];
+
+  // TITLE: Animate DOM (styleEffects)
 
   /**
-   * Gets the horizontal scroll position.
-   * @param {TinyElementAndWindow} el - Element or window.
-   * @returns {number}
+   * Generate shortcuts
+   * @type {Record<string, StyleEffects>}
    */
-  static scrollLeft(el) {
-    const elem = TinyHtml._preElemAndWindow(el, 'scrollLeft');
-    if (TinyHtml.isWindow(elem)) return elem.pageXOffset;
-    // @ts-ignore
-    if (elem.nodeType === 9) return elem.defaultView.pageXOffset;
-    return elem.scrollLeft;
-  }
+  static #styleEffects = {
+    slideDown: TinyHtml.genStyleFx('show'),
+    slideUp: TinyHtml.genStyleFx('hide'),
+    fadeIn: { opacity: 'show' },
+    fadeOut: { opacity: 'hide' },
+  };
 
   /**
-   * Gets the horizontal scroll position.
-   * @returns {number}
+   * Returns a deep-cloned copy of the registered style effects.
+   *
+   * @returns {Record<string, StyleEffects>}
    */
-  scrollLeft() {
-    return TinyHtml.scrollLeft(this);
+  static get styleEffects() {
+    return JSON.parse(JSON.stringify(TinyHtml.#styleEffects));
   }
 
   /**
-   * Collection of easing functions used for scroll and animation calculations.
-   * Each function receives a normalized time value (`t` from 0 to 1) and returns the eased progress.
+   * Replace the entire styleEffects map with a new one.
    *
-   * @type {Record<string, (t: number) => number>}
+   * @param {Record<string, StyleEffects>} value
    */
-  static easings = {
-    linear: (t) => t,
-    easeInQuad: (t) => t * t,
+  static set styleEffects(value) {
+    if (typeof value !== 'object' || value === null || Array.isArray(value))
+      throw new TypeError('styleEffects must be an object');
+    for (const name in value) {
+      for (const [prop, mode] of Object.entries(value[name])) {
+        if (
+          typeof mode !== 'string' &&
+          (!Array.isArray(mode) ||
+            !mode.every((v) => typeof v === 'string' || typeof v === 'number'))
+        )
+          throw new TypeError(`Invalid styleEffect["${prop}"]`);
+      }
+    }
+
+    TinyHtml.#styleEffects = {};
+    for (const name in value) TinyHtml.setStyleEffect(name, value[name]);
+  }
+
+  /**
+   * Get a deep-cloned style effect by name.
+   * @param {string} name
+   * @returns {StyleEffects|undefined}
+   */
+  static getStyleEffect(name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    const eff = TinyHtml.#styleEffects[name];
+    return eff ? JSON.parse(JSON.stringify(eff)) : undefined;
+  }
+
+  /**
+   * Set or replace a style effect.
+   * @param {string} name
+   * @param {StyleEffects} value
+   */
+  static setStyleEffect(name, value) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+      throw new TypeError('styleEffect must be an object');
+    }
+    /** @type {StyleEffects} */
+    const copy = {};
+    for (const [prop, mode] of Object.entries(value)) {
+      if (typeof mode === 'string') {
+        copy[prop] = mode;
+      } else if (
+        Array.isArray(mode) &&
+        mode.every((v) => typeof v === 'string' || typeof v === 'number')
+      ) {
+        copy[prop] = [...mode];
+      } else {
+        throw new TypeError(`Invalid styleEffect["${prop}"]`);
+      }
+    }
+    TinyHtml.#styleEffects[name] = copy;
+  }
+
+  /**
+   * Delete a style effect.
+   * @param {string} name
+   * @returns {boolean} True if deleted.
+   */
+  static deleteStyleEffect(name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    return delete TinyHtml.#styleEffects[name];
+  }
+
+  /**
+   * Check if a style effect exists.
+   * @param {string} name
+   * @returns {boolean}
+   */
+  static hasStyleEffect(name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    return Object.prototype.hasOwnProperty.call(TinyHtml.#styleEffects, name);
+  }
+
+  // TITLE: Animate DOM (styleEffectInverse)
+
+  /**
+   * Style Effect Inverse Values
+   * @type {Record<string, string>}
+   */
+  static #styleEffectInverse = {
+    slideDown: 'slideUp',
+    slideUp: 'slideDown',
+    fadeIn: 'fadeOut',
+    fadeOut: 'fadeIn',
+  };
+
+  /**
+   * Get a cloned copy of style inverse values.
+   * @returns {Record<string, string>}
+   */
+  static get styleEffectInverse() {
+    return { ...TinyHtml.#styleEffectInverse };
+  }
+
+  /**
+   * Replace the style inverse values.
+   * @param {Record<string, string>} values
+   * @throws {TypeError} If not a valid object with functions as values.
+   */
+  static set styleEffectInverse(values) {
+    if (typeof values !== 'object' || values === null)
+      throw new TypeError('styleEffectInverse must be an object.');
+
+    for (const [k, v] of Object.entries(values)) {
+      if (typeof v !== 'string')
+        throw new TypeError(`styleEffectInverse["${k}"] must be a string.`);
+    }
+
+    TinyHtml.#styleEffectInverse = {};
+    for (const [k, v] of Object.entries(values)) TinyHtml.setStyleEffectInverse(k, v);
+  }
+
+  /**
+   * Get a registered inverse values.
+   *
+   * @param {string} name - The detector name.
+   * @returns {string | null} The value if found, otherwise undefined.
+   */
+  static getStyleEffectInverse(name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    return TinyHtml.#styleEffectInverse[name] || null;
+  }
+
+  /**
+   * Register or overwrite a inverse value.
+   *
+   * @param {string} name - The detector name.
+   * @param {string} value - The inverse value.
+   * @throws {TypeError} If fn is not a string.
+   */
+  static setStyleEffectInverse(name, value) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    if (typeof value !== 'string')
+      throw new TypeError(`styleEffectInverse["${name}"] must be a string.`);
+    TinyHtml.#styleEffectInverse[name] = value;
+  }
+
+  /**
+   * Delete a inverse value by name.
+   *
+   * @param {string} name - The inverse value name to delete.
+   * @returns {boolean} True if deleted, false otherwise.
+   */
+  static deleteStyleEffectInverse(name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    return delete TinyHtml.#styleEffectInverse[name];
+  }
+
+  /**
+   * Check if a inverse value is registered.
+   *
+   * @param {string} name - The inverse value name to check.
+   * @returns {boolean} True if registered, false otherwise.
+   */
+  static hasStyleEffectInverse(name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    return Object.prototype.hasOwnProperty.call(TinyHtml.#styleEffectInverse, name);
+  }
+
+  // TITLE: Animate DOM (styleEffectsRd)
+
+  /**
+   * Style Effect Repeat Detector
+   * @type {Record<string, StyleEffectsRdFn>}
+   */
+  static #styleEffectsRd = {
+    slideDown: (effects) =>
+      effects.height[0] === effects.height[1] &&
+      (!effects.width || effects.width[0] === effects.width[1]),
+    slideUp: (effects) =>
+      effects.height[0] === effects.height[1] &&
+      (!effects.width || effects.width[0] === effects.width[1]),
+    fadeIn: (effects) => Number(effects.opacity[0]) === Number(effects.opacity[1]),
+    fadeOut: (effects) => Number(effects.opacity[0]) === Number(effects.opacity[1]),
+  };
+
+  /**
+   * Get a cloned copy of style effects repeat detectors.
+   * @returns {Record<string, StyleEffectsRdFn>}
+   */
+  static get styleEffectsRd() {
+    return { ...TinyHtml.#styleEffectsRd };
+  }
+
+  /**
+   * Replace the style effects repeat detectors.
+   * @param {Record<string, StyleEffectsRdFn>} detectors
+   * @throws {TypeError} If not a valid object with functions as values.
+   */
+  static set styleEffectsRd(detectors) {
+    if (typeof detectors !== 'object' || detectors === null)
+      throw new TypeError('styleEffectsRd must be an object.');
+
+    for (const [k, v] of Object.entries(detectors)) {
+      if (typeof v !== 'function')
+        throw new TypeError(`styleEffectsRd["${k}"] must be a function.`);
+    }
+
+    TinyHtml.#styleEffectsRd = {};
+    for (const [k, v] of Object.entries(detectors)) TinyHtml.setStyleEffectRd(k, v);
+  }
+
+  /**
+   * Get a registered repeat detector function by name.
+   *
+   * @param {string} name - The detector name.
+   * @returns {StyleEffectsRdFn | null} The function if found, otherwise undefined.
+   */
+  static getStyleEffectRd(name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    return TinyHtml.#styleEffectsRd[name] || null;
+  }
+
+  /**
+   * Register or overwrite a repeat detector function.
+   *
+   * @param {string} name - The detector name.
+   * @param {StyleEffectsRdFn} fn - The detector function.
+   * @throws {TypeError} If fn is not a function.
+   */
+  static setStyleEffectRd(name, fn) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    if (typeof fn !== 'function')
+      throw new TypeError(`styleEffectsRd["${name}"] must be a function.`);
+    TinyHtml.#styleEffectsRd[name] = fn;
+  }
+
+  /**
+   * Delete a repeat detector function by name.
+   *
+   * @param {string} name - The detector name to delete.
+   * @returns {boolean} True if deleted, false otherwise.
+   */
+  static deleteStyleEffectRd(name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    return delete TinyHtml.#styleEffectsRd[name];
+  }
+
+  /**
+   * Check if a repeat detector function is registered.
+   *
+   * @param {string} name - The detector name to check.
+   * @returns {boolean} True if registered, false otherwise.
+   */
+  static hasStyleEffectRd(name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    return Object.prototype.hasOwnProperty.call(TinyHtml.#styleEffectsRd, name);
+  }
+
+  // TITLE: Animate DOM (styleEffectsPromps)
+
+  /**
+   * Effect property handlers for show, hide, and toggle.
+   * Each function builds keyframes depending on the property being animated.
+   *
+   * @type {StyleEffectsProps}
+   */
+  static #styleEffectsProps = {
+    show: (el, keyframes, prop, style) => {
+      if (prop === 'height' || prop === 'width') {
+        const targetSize = TinyHtml.getAnimateData(el, `orig${prop}`) || el.scrollHeight + 'px';
+        TinyHtml.setAnimateData(el, `orig${prop}`, targetSize);
+
+        const current = style[prop]; // pega valor atual
+        keyframes[prop] = [current, targetSize];
+      } else if (prop.startsWith('margin') || prop.startsWith('padding')) {
+        // @ts-ignore
+        const orig = TinyHtml.getAnimateData(el, prop) || style[prop];
+        TinyHtml.setAnimateData(el, prop, orig);
+        keyframes[prop] = ['0px', orig];
+      } else if (prop === 'opacity') {
+        const current = style.opacity;
+        keyframes[prop] = [current, 1];
+      } else {
+        // @ts-ignore
+        const current = TinyHtml.getAnimateData(el, prop) || style[prop];
+        TinyHtml.setAnimateData(el, prop, current);
+        // @ts-ignore
+        keyframes[prop] = [current, style[prop] || 1];
+      }
+    },
+    hide: (el, keyframes, prop, style) => {
+      if (prop === 'height' || prop === 'width') {
+        const targetSize = TinyHtml.getAnimateData(el, `orig${prop}`) || style[prop];
+        TinyHtml.setAnimateData(el, `orig${prop}`, targetSize);
+
+        const current = style[prop]; // pega valor atual
+        keyframes[prop] = [current, 0];
+      } else if (prop.startsWith('margin') || prop.startsWith('padding')) {
+        // @ts-ignore
+        const orig = TinyHtml.getAnimateData(el, prop) || style[prop];
+        TinyHtml.setAnimateData(el, prop, orig);
+
+        // @ts-ignore
+        keyframes[prop] = [style[prop], '0px'];
+      } else if (prop === 'opacity') {
+        const current = style.opacity;
+        keyframes[prop] = [current, 0];
+      } else {
+        // @ts-ignore
+        const current = TinyHtml.getAnimateData(el, prop) || style[prop];
+        TinyHtml.setAnimateData(el, prop, current);
+        keyframes[prop] = [current, 0];
+      }
+    },
+  };
+
+  /**
+   * Returns a shallow-cloned copy of the property effect handlers.
+   *
+   * @returns {StyleEffectsProps}
+   */
+  static get styleEffectsProps() {
+    return { ...TinyHtml.#styleEffectsProps };
+  }
+
+  /**
+   * Replace the entire styleEffectsProps map with a new one.
+   *
+   * @param {StyleEffectsProps} value
+   */
+  static set styleEffectsProps(value) {
+    if (typeof value !== 'object' || value === null || Array.isArray(value))
+      throw new TypeError('styleEffectsProps must be an object');
+
+    for (const [k, fn] of Object.entries(value)) {
+      if (typeof fn !== 'function')
+        throw new TypeError(`styleEffectsProps["${k}"] must be a function`);
+    }
+
+    TinyHtml.#styleEffectsProps = {};
+    for (const [k, fn] of Object.entries(value)) TinyHtml.setStyleEffectProp(k, fn);
+  }
+
+  /**
+   * Get a style effect property handler by name.
+   *
+   * @param {string} name - The property handler name.
+   * @returns {StyleEffectsFn | null} The handler function, or undefined if not found.
+   */
+  static getStyleEffectProp(name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    return TinyHtml.#styleEffectsProps[name] || null;
+  }
+
+  /**
+   * Register or overwrite a style effect property handler.
+   *
+   * @param {string} name - The property handler name.
+   * @param {StyleEffectsFn} fn - The handler function.
+   * @throws {TypeError} If fn is not a function.
+   */
+  static setStyleEffectProp(name, fn) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    if (typeof fn !== 'function')
+      throw new TypeError(`styleEffectsProps["${name}"] must be a function`);
+    TinyHtml.#styleEffectsProps[name] = fn;
+  }
+
+  /**
+   * Delete a style effect property handler by name.
+   *
+   * @param {string} name - The property handler name to delete.
+   * @returns {boolean} True if deleted, false otherwise.
+   */
+  static deleteStyleEffectProp(name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    return delete TinyHtml.#styleEffectsProps[name];
+  }
+
+  /**
+   * Check if a style effect property handler exists.
+   *
+   * @param {string} name - The property handler name to check.
+   * @returns {boolean} True if the handler exists, false otherwise.
+   */
+  static hasStyleEffectProp(name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" parameter must be a string.');
+    return Object.prototype.hasOwnProperty.call(TinyHtml.#styleEffectsProps, name);
+  }
+
+  // TITLE: Gen Style FX Manager
+
+  /**
+   * Generates effect parameters to create standard animations.
+   *
+   * @param {string} type - The effect type.
+   * @param {boolean} [includeWidth=false] - Whether width (and opacity) should be included.
+   * @returns {Record<string, string>} - A mapping of CSS properties to effect type.
+   */
+  static genStyleFx(type, includeWidth = false) {
+    if (typeof type !== 'string') throw new TypeError('genStyleFx: type must be a string.');
+    if (typeof includeWidth !== 'boolean')
+      throw new TypeError('genStyleFx: includeWidth must be a boolean.');
+
+    /** @type {string} */
+    let which;
+    /** @type {number} */
+    let i = 0;
+    /** @type {Record<string, string>} */
+    const attrs = { height: type };
+
+    const includeWidthNb = includeWidth ? 1 : 0;
+    for (; i < 4; i += 2 - includeWidthNb) {
+      which = TinyHtml.#cssExpand[i];
+      attrs['margin' + which] = type;
+      attrs['padding' + which] = type;
+    }
+
+    if (includeWidth) {
+      attrs.opacity = type;
+      attrs.width = type;
+    }
+
+    return attrs;
+  }
+
+  /**
+   * Applies style-based effects (slide, fade) to one or more elements.
+   * Converts abstract effect definitions (e.g., `{ height: "show" }`)
+   * into concrete Web Animations API keyframes.
+   *
+   * @param {TinyHtmlElement|TinyHtmlElement[]} el - A single element or an array of elements.
+   * @param {string} id - The style effect id.
+   * @param {StyleEffects} props - The style effect definition.
+   * @param {number | KeyframeAnimationOptions | string} [ops] - Timing options.
+   * @returns {StyleFxResult}
+   */
+  static applyStyleFx(el, id, props, ops) {
+    if (typeof id !== 'string') throw new TypeError('applyStyleFx: id must be a string.');
+    if (typeof props !== 'object' || props === null)
+      throw new TypeError('applyStyleFx: props must be a non-null object.');
+    if (
+      ops !== undefined &&
+      !(
+        typeof ops === 'number' ||
+        typeof ops === 'string' ||
+        (typeof ops === 'object' && ops !== null)
+      )
+    )
+      throw new TypeError(
+        'applyStyleFx: ops must be a number, string, KeyframeAnimationOptions, or undefined.',
+      );
+
+    /** @type {StyleFxResult} */
+    const results = new Map();
+    TinyHtml._preHtmlElems(el, 'applyStyleFx').forEach((first) => {
+      /**
+       * Generate keyframes based on props
+       * @type {AnimationSfxData}
+       */
+      const keyframes = {};
+      for (const [prop, action] of Object.entries(props)) {
+        if (typeof action === 'string' && this.#styleEffectsProps[action]) {
+          const style = getComputedStyle(first);
+          this.#styleEffectsProps[action](first, keyframes, prop, style);
+        } else if (typeof action === 'object') {
+          keyframes[prop] = action;
+        } else {
+          throw new TypeError(
+            `applyStyleFx: invalid action for prop "${prop}". Must be string or array.`,
+          );
+        }
+      }
+
+      const isRepeat =
+        typeof TinyHtml.#styleEffectsRd[id] === 'function'
+          ? TinyHtml.#styleEffectsRd[id](keyframes)
+          : false;
+      if (isRepeat) {
+        results.set(first, null);
+        return;
+      }
+
+      /**
+       *  Build Web Animations keyframe objects
+       * @type {Keyframe[]}
+       */
+      const kf = [];
+      const numFrames = keyframes[Object.keys(keyframes)[0]].length; // assume que todos têm o mesmo tamanho
+      for (let i = 0; i < numFrames; i++) {
+        /** @type {Keyframe} */
+        const frame = {};
+        for (const prop in keyframes) {
+          frame[prop] = keyframes[prop][i];
+        }
+        kf.push(frame);
+      }
+
+      results.set(first, TinyHtml.animate(el, kf, ops, id)[0]);
+    });
+    return results;
+  }
+
+  /**
+   * Applies style-based effects (slide, fade) to one or more elements.
+   * Converts abstract effect definitions (e.g., `{ height: "show" }`)
+   * into concrete Web Animations API keyframes.
+   *
+   * @param {string} id - The style effect id.
+   * @param {StyleEffects} props - The style effect definition.
+   * @param {number | KeyframeAnimationOptions} [ops] - Timing options.
+   * @returns {StyleFxResult}
+   */
+  applyStyleFx(id, props, ops) {
+    return TinyHtml.applyStyleFx(this, id, props, ops);
+  }
+
+  // TITLE: Animate Stuff
+
+  /**
+   * Get the current animation entry for a given element.
+   * @param {HTMLElement} el - The target element.
+   * @returns {string|null|undefined} Returns string or null to animation.
+   */
+  static getCurrentAnimationId(el) {
+    if (!(el instanceof HTMLElement)) throw new TypeError('Expected an HTMLElement.');
+    return __elementCurrentAnimation.get(el)?.id ?? undefined;
+  }
+
+  /**
+   * Applies an animation to one or multiple TinyElement instances.
+   *
+   * If `cancelOldAnim` is true, any currently running animation on the same element
+   * will be cancelled before the new one starts.
+   *
+   * @param {TinyHtmlElement|TinyHtmlElement[]} el - A single TinyElement or an array of TinyElements to animate.
+   * @param {Keyframe[] | PropertyIndexedKeyframes | null} keyframes - Keyframes that define the animation.
+   * @param {number | KeyframeAnimationOptions | string} [ops] - Timing or configuration options for the animation.
+   * @param {string|null} [id] - The style effect id.
+   * @param {boolean} [cancelOldAnim=TinyHtml.cancelOldStyleFx] - Whether to cancel previous animations on the same element.
+   * @returns {Animation[]}
+   */
+  static animate(
+    el,
+    keyframes,
+    ops = TinyHtml.#styleFxSpeeds._default,
+    id = null,
+    cancelOldAnim = TinyHtml.#cancelOldStyleFx,
+  ) {
+    /** @type {number | KeyframeAnimationOptions}  */
+    const fxSpeed =
+      typeof ops === 'string'
+        ? (TinyHtml.#styleFxSpeeds[ops] ?? undefined)
+        : typeof ops !== 'number'
+          ? { ...ops }
+          : ops;
+
+    if (typeof fxSpeed === 'object' && typeof fxSpeed.fill === 'undefined') {
+      fxSpeed.fill = 'forwards';
+    }
+
+    /** @type {Animation[]} */
+    const results = [];
+    TinyHtml._preHtmlElems(el, 'animate').forEach((elem) => {
+      if (cancelOldAnim) {
+        const prevAnim = __elementCurrentAnimation.get(elem);
+        if (prevAnim) prevAnim.animation.cancel();
+      }
+
+      const anim = elem.animate(keyframes, fxSpeed);
+      results.push(anim);
+      __elementCurrentAnimation.set(elem, { animation: anim, id: id ?? '' });
+      anim.addEventListener('finish', () => {
+        if (__elementCurrentAnimation.get(elem)?.animation === anim)
+          __elementCurrentAnimation.delete(elem);
+      });
+    });
+
+    return results;
+  }
+
+  /**
+   * Applies an animation to one or multiple TinyElement instances.
+   *
+   * If `cancelOldAnim` is true, any currently running animation on the same element
+   * will be cancelled before the new one starts.
+   *
+   * @param {Keyframe[] | PropertyIndexedKeyframes | null} keyframes - Keyframes that define the animation.
+   * @param {number | KeyframeAnimationOptions | string} [ops] - Timing or configuration options for the animation.
+   * @param {string|null} [id] - The style effect id.
+   * @param {boolean} [cancelOldAnim=TinyHtml.cancelOldStyleFx] - Whether to cancel previous animations on the same element.
+   * @returns {Animation[]}
+   */
+  animate(keyframes, ops, id, cancelOldAnim) {
+    return TinyHtml.animate(this, keyframes, ops, id, cancelOldAnim);
+  }
+
+  /**
+   * Stops the current animation(s) on one or multiple TinyElement instances.
+   *
+   * If an animation is running on the element(s), it will be cancelled immediately.
+   *
+   * @param {TinyHtmlElement|TinyHtmlElement[]} el - A single TinyElement or an array of TinyElements.
+   * @returns {boolean[]} The same element(s) provided as input, for chaining.
+   */
+  static stop(el) {
+    /** @type {boolean[]} */
+    const results = [];
+    TinyHtml._preHtmlElems(el, 'stop').forEach((elem) => {
+      const anim = __elementCurrentAnimation.get(elem);
+      if (anim) {
+        anim.animation.cancel();
+        __elementCurrentAnimation.delete(elem);
+        results.push(true);
+      } else results.push(false);
+    });
+    return results;
+  }
+
+  /**
+   * Stops the current animation(s) on this TinyElement instance.
+   *
+   * @returns {boolean[]}
+   */
+  stop() {
+    return TinyHtml.stop(this);
+  }
+
+  // TITLE: Animate FXs
+
+  /**
+   * Show animation (slideDown).
+   * @param {TinyHtmlElement|TinyHtmlElement[]} el
+   * @param {number | KeyframeAnimationOptions | string} [ops]
+   * @returns {StyleFxResult}
+   */
+  static slideDown(el, ops) {
+    return TinyHtml.applyStyleFx(
+      el,
+      'slideDown',
+      this.#styleEffects['slideDown'],
+      ops ?? { duration: 500, easing: 'ease-out' },
+    );
+  }
+
+  /**
+   * Show animation (slideDown).
+   * @param {number | KeyframeAnimationOptions | string} [ops]
+   * @returns {StyleFxResult}
+   */
+  slideDown(ops) {
+    return TinyHtml.slideDown(this, ops);
+  }
+
+  /**
+   * Hide animation (slideUp).
+   * @param {TinyHtmlElement|TinyHtmlElement[]} el
+   * @param {number | KeyframeAnimationOptions | string} [ops]
+   * @returns {StyleFxResult}
+   */
+  static slideUp(el, ops) {
+    return TinyHtml.applyStyleFx(
+      el,
+      'slideUp',
+      this.#styleEffects['slideUp'],
+      ops ?? { duration: 500, easing: 'ease-out' },
+    );
+  }
+
+  /**
+   * Hide animation (slideUp).
+   * @param {number | KeyframeAnimationOptions | string} [ops]
+   * @returns {StyleFxResult}
+   */
+  slideUp(ops) {
+    return TinyHtml.slideUp(this, ops);
+  }
+
+  /**
+   * Toggle slide animation.
+   * @param {TinyHtmlElement|TinyHtmlElement[]} el
+   * @param {number | KeyframeAnimationOptions | string} [ops]
+   * @returns {StyleFxResult}
+   */
+  static slideToggle(el, ops) {
+    const first = TinyHtml._preHtmlElem(el, 'slideToggle');
+    const style = getComputedStyle(first);
+    const id = TinyHtml.getCurrentAnimationId(first);
+    const isHidden = style.display === 'none' || first.offsetHeight === 0;
+    return (typeof id === 'string' ? id === 'slideUp' : isHidden)
+      ? TinyHtml.slideDown(el, ops)
+      : TinyHtml.slideUp(el, ops);
+  }
+
+  /**
+   * Toggle slide animation.
+   * @param {number | KeyframeAnimationOptions | string} [ops]
+   * @returns {StyleFxResult}
+   */
+  slideToggle(ops) {
+    return TinyHtml.slideToggle(this, ops);
+  }
+
+  /**
+   * Fade in animation.
+   * @param {TinyHtmlElement|TinyHtmlElement[]} el
+   * @param {number | KeyframeAnimationOptions | string} [ops]
+   * @returns {StyleFxResult}
+   */
+  static fadeIn(el, ops) {
+    return TinyHtml.applyStyleFx(el, 'fadeIn', this.#styleEffects['fadeIn'], ops);
+  }
+
+  /**
+   * Fade in animation.
+   * @param {number | KeyframeAnimationOptions | string} [ops]
+   * @returns {StyleFxResult}
+   */
+  fadeIn(ops) {
+    return TinyHtml.fadeIn(this, ops);
+  }
+
+  /**
+   * Fade out animation.
+   * @param {TinyHtmlElement|TinyHtmlElement[]} el
+   * @param {number | KeyframeAnimationOptions | string} [ops]
+   * @returns {StyleFxResult}
+   */
+  static fadeOut(el, ops) {
+    return TinyHtml.applyStyleFx(el, 'fadeOut', this.#styleEffects['fadeOut'], ops);
+  }
+
+  /**
+   * Fade out animation.
+   * @param {number | KeyframeAnimationOptions | string} [ops]
+   * @returns {StyleFxResult}
+   */
+  fadeOut(ops) {
+    return TinyHtml.fadeOut(this, ops);
+  }
+
+  /**
+   * Fade toggle animation.
+   * @param {TinyHtmlElement|TinyHtmlElement[]} el
+   * @param {number | KeyframeAnimationOptions | string} [ops]
+   * @returns {StyleFxResult}
+   */
+  static fadeToggle(el, ops) {
+    const first = TinyHtml._preHtmlElem(el, 'fadeToggle');
+    const style = getComputedStyle(first);
+    const id = TinyHtml.getCurrentAnimationId(first);
+    const isHidden = style.opacity === '0' || first.offsetParent === null;
+    return (typeof id === 'string' ? id === 'fadeOut' : isHidden)
+      ? TinyHtml.fadeIn(el, ops)
+      : TinyHtml.fadeOut(el, ops);
+  }
+
+  /**
+   * Fade toggle animation.
+   * @param {number | KeyframeAnimationOptions | string} [ops]
+   * @returns {StyleFxResult}
+   */
+  fadeToggle(ops) {
+    return TinyHtml.fadeToggle(this, ops);
+  }
+
+  ///////////////////////////////////////////////////////////////
+
+  // TITLE: DOM Positions
+
+  /**
+   * Gets the offset of the element relative to the document.
+   * @param {TinyElement} el - Target element.
+   * @returns {{top: number, left: number}}
+   */
+  static offset(el) {
+    const elem = TinyHtml._preElem(el, 'offset');
+    const rect = elem.getBoundingClientRect();
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+
+    return {
+      top: rect.top + scrollTop,
+      left: rect.left + scrollLeft,
+    };
+  }
+
+  /**
+   * Gets the offset of the element relative to the document.
+   * @returns {{top: number, left: number}}
+   */
+  offset() {
+    return TinyHtml.offset(this);
+  }
+
+  /**
+   * Gets the position of the element relative to its offset parent.
+   * @param {TinyHtmlElement} el - Target element.
+   * @returns {{top: number, left: number}}
+   */
+  static position(el) {
+    const elem = TinyHtml._preHtmlElem(el, 'position');
+
+    let offsetParent;
+    let offset;
+    let parentOffset = { top: 0, left: 0 };
+
+    const computedStyle = window.getComputedStyle(elem);
+
+    if (computedStyle.position === 'fixed') {
+      offset = elem.getBoundingClientRect();
+    } else {
+      offset = TinyHtml.offset(elem);
+
+      offsetParent = elem.offsetParent || document.documentElement;
+      const { position } = window.getComputedStyle(offsetParent);
+
+      while (
+        offsetParent instanceof HTMLElement &&
+        (offsetParent === document.body || offsetParent === document.documentElement) &&
+        position === 'static'
+      ) {
+        offsetParent = offsetParent.parentNode;
+      }
+
+      if (
+        offsetParent instanceof HTMLElement &&
+        offsetParent !== elem &&
+        offsetParent.nodeType === 1
+      ) {
+        const { borderTopWidth, borderLeftWidth } = TinyHtml.cssFloats(offsetParent, [
+          'borderTopWidth',
+          'borderLeftWidth',
+        ]);
+        parentOffset = TinyHtml.offset(offsetParent);
+        parentOffset.top += borderTopWidth;
+        parentOffset.left += borderLeftWidth;
+      }
+    }
+
+    return {
+      top: offset.top - parentOffset.top - TinyHtml.cssFloat(elem, 'marginTop'),
+      left: offset.left - parentOffset.left - TinyHtml.cssFloat(elem, 'marginLeft'),
+    };
+  }
+
+  /**
+   * Gets the position of the element relative to its offset parent.
+   * @returns {{top: number, left: number}}
+   */
+  position() {
+    return TinyHtml.position(this);
+  }
+
+  /**
+   * Gets the closest positioned ancestor element.
+   * @param {TinyHtmlElement} el - Target element.
+   * @returns {HTMLElement} - Offset parent element.
+   */
+  static offsetParent(el) {
+    const elem = TinyHtml._preHtmlElem(el, 'offsetParent');
+    let offsetParent = elem.offsetParent;
+
+    while (
+      offsetParent instanceof HTMLElement &&
+      window.getComputedStyle(offsetParent).position === 'static'
+    ) {
+      offsetParent = offsetParent.offsetParent;
+    }
+
+    // Fallback to document.documentElement
+    return offsetParent instanceof HTMLElement ? offsetParent : document.documentElement;
+  }
+
+  /**
+   * Gets the closest positioned ancestor element.
+   * @returns {HTMLElement} - Offset parent element.
+   */
+  offsetParent() {
+    return TinyHtml.offsetParent(this);
+  }
+
+  /////////////////////////////////////////////////
+
+  // TITLE: Scroll Stuff
+
+  /**
+   * Gets the vertical scroll position.
+   * @param {TinyElementAndWindow} el - Element or window.
+   * @returns {number}
+   */
+  static scrollTop(el) {
+    const elem = TinyHtml._preElemAndWindow(el, 'scrollTop');
+    if (TinyHtml.isWindow(elem)) return elem.pageYOffset;
+    // @ts-ignore
+    if (elem.nodeType === 9) return elem.defaultView.pageYOffset;
+    return elem.scrollTop;
+  }
+
+  /**
+   * Gets the vertical scroll position.
+   * @returns {number}
+   */
+  scrollTop() {
+    return TinyHtml.scrollTop(this);
+  }
+
+  /**
+   * Gets the horizontal scroll position.
+   * @param {TinyElementAndWindow} el - Element or window.
+   * @returns {number}
+   */
+  static scrollLeft(el) {
+    const elem = TinyHtml._preElemAndWindow(el, 'scrollLeft');
+    if (TinyHtml.isWindow(elem)) return elem.pageXOffset;
+    // @ts-ignore
+    if (elem.nodeType === 9) return elem.defaultView.pageXOffset;
+    return elem.scrollLeft;
+  }
+
+  /**
+   * Gets the horizontal scroll position.
+   * @returns {number}
+   */
+  scrollLeft() {
+    return TinyHtml.scrollLeft(this);
+  }
+
+  /**
+   * Collection of easing functions used for scroll and animation calculations.
+   * Each function receives a normalized time value (`t` from 0 to 1) and returns the eased progress.
+   *
+   * @type {Record<string, (t: number) => number>}
+   */
+  static easings = {
+    linear: (t) => t,
+    easeInQuad: (t) => t * t,
     easeOutQuad: (t) => t * (2 - t),
     easeInOutQuad: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
     easeInCubic: (t) => t * t * t,
@@ -3566,6 +4777,10 @@ class TinyHtml {
     return TinyHtml.setScrollLeft(this, value);
   }
 
+  ///////////////////////////////////////////
+
+  // TITLE: Border Stuff
+
   /**
    * Returns the total border width and individual sides from `border{Side}Width` CSS properties.
    *
@@ -3689,6 +4904,8 @@ class TinyHtml {
 
   /////////////////////////////////////////////
 
+  // TITLE: Class Stuff
+
   /**
    * Adds one or more CSS class names to the element.
    * @template {TinyElement|TinyElement[]} T
@@ -3877,6 +5094,8 @@ class TinyHtml {
 
   /////////////////////////////////////////
 
+  // TITLE: Tag Stuff
+
   /**
    * Returns the tag name of the element.
    * @param {TinyElement} el - Target element.
@@ -3913,6 +5132,10 @@ class TinyHtml {
     return TinyHtml.id(this);
   }
 
+  //////////////////////////////////////////////////////////////
+
+  // TITLE: DOM Content Stuff
+
   /**
    * Returns the BigInt content of the element.
    * @param {TinyElement} el - Target element.
@@ -4220,6 +5443,10 @@ class TinyHtml {
     return TinyHtml.setText(this, value);
   }
 
+  //////////////////////////////////////////////////////
+
+  // TITLE: DOM Content Stuff (Part 2)
+
   /**
    * Remove all child nodes from each element.
    * @template {TinyElement|TinyElement[]} T
@@ -4281,6 +5508,10 @@ class TinyHtml {
     return TinyHtml.setHtml(this, value);
   }
 
+  ///////////////////////////////////////////////
+
+  // TITLE: Value Stuff
+
   /** @readonly */
   static _valHooks = {
     option: {
@@ -4721,6 +5952,8 @@ class TinyHtml {
 
   ////////////////////////////////////////////
 
+  // TITLE: Listen for Paste
+
   /**
    * Registers a listener for the "paste" event to extract files and text from the clipboard (e.g., when the user presses Ctrl+V).
    *
@@ -4777,6 +6010,10 @@ class TinyHtml {
     return TinyHtml.listenForPaste(this, { onFilePaste, onTextPaste });
   }
 
+  /////////////////////////////////////////////////////
+
+  // TITLE: Events Stuff
+
   /**
    * Checks if the element has a listener for a specific event.
    *
@@ -4829,6 +6066,42 @@ class TinyHtml {
     return TinyHtml.hasExactEventListener(this, event, handler);
   }
 
+  /**
+   * Hover event shortcut.
+   *
+   * Adds `mouseenter` and `mouseleave` event listeners to the target.
+   *
+   * @template {TinyEventTarget|TinyEventTarget[]} T
+   * @param {T} el - The target element(s) to attach the hover handlers.
+   * @param {HoverEventCallback} fnOver - Callback executed when the mouse enters the target.
+   * @param {HoverEventCallback|null} [fnOut] - Optional callback executed when the mouse leaves
+   * the target. If not provided, `fnOver` will be used for both events.
+   * @param {EventRegistryOptions} [options] - Optional event listener options.
+   * @returns {T}
+   */
+  static hover(el, fnOver, fnOut, options) {
+    // @ts-ignore
+    TinyHtml.on(el, 'mouseenter', fnOver, options);
+    // @ts-ignore
+    TinyHtml.on(el, 'mouseleave', fnOut || fnOver, options);
+    return el;
+  }
+
+  /**
+   * Hover event shortcut.
+   *
+   * Adds `mouseenter` and `mouseleave` event listeners to the target.
+   *
+   * @param {HoverEventCallback} fnOver - Callback executed when the mouse enters the target.
+   * @param {HoverEventCallback|null} [fnOut] - Optional callback executed when the mouse leaves
+   * the target. If not provided, `fnOver` will be used for both events.
+   * @param {EventRegistryOptions} [options] - Optional event listener options.
+   * @returns {this}
+   */
+  hover(fnOver, fnOut, options) {
+    return TinyHtml.hover(this, fnOver, fnOut, options);
+  }
+
   /**
    * Registers an event listener on the specified element.
    *
@@ -5088,6 +6361,8 @@ class TinyHtml {
 
   ///////////////////////////////////////////////////////////////
 
+  // TITLE: ProFix Manager
+
   /**
    * Internal property name normalization map (similar to jQuery's `propFix`).
    * Maps attribute-like names to their JavaScript DOM property equivalents.
@@ -5182,28 +6457,46 @@ class TinyHtml {
   }
 
   /**
-   * Set an attribute on an element.
+   * Set one or multiple attributes on an element.
    * @template {TinyElement|TinyElement[]} T
-   * @param {T} el
-   * @param {string} name
-   * @param {string|null} [value=null]
+   * @param {T} el - Target element(s).
+   * @param {string|Record<string, string|null>} name - Attribute name or an object of attributes.
+   * @param {string|null} [value=null] - Attribute value (ignored if "name" is an object).
    * @returns {T}
    */
   static setAttr(el, name, value = null) {
+    const elems = TinyHtml._preElems(el, 'setAttr');
+
+    // Multiple attributes at once
+    if (typeof name === 'object' && name !== null) {
+      Object.entries(name).forEach(([attr, val]) => {
+        if (val !== null && typeof val !== 'string')
+          throw new TypeError(`The value for "${attr}" must be a string or null.`);
+        elems.forEach((elem) => {
+          if (val === null) elem.removeAttribute(TinyHtml.getAttrName(attr));
+          else elem.setAttribute(TinyHtml.getAttrName(attr), val);
+        });
+      });
+      return el;
+    }
+
+    // Single attribute
     if (typeof name !== 'string') throw new TypeError('The "name" must be a string.');
     if (value !== null && typeof value !== 'string')
       throw new TypeError('The "value" must be a string.');
-    TinyHtml._preElems(el, 'setAttr').forEach((elem) => {
+
+    elems.forEach((elem) => {
       if (value === null) elem.removeAttribute(TinyHtml.getAttrName(name));
       else elem.setAttribute(TinyHtml.getAttrName(name), value);
     });
+
     return el;
   }
 
   /**
-   * Set an attribute on an element.
-   * @param {string} name
-   * @param {string|null} [value=null]
+   * Set one or multiple attributes on an element.
+   * @param {string|Record<string, string|null>} name - Attribute name or an object of attributes.
+   * @param {string|null} [value=null] - Attribute value (ignored if "name" is an object).
    * @returns {this}
    */
   setAttr(name, value) {
@@ -5278,81 +6571,92 @@ class TinyHtml {
   }
 
   /**
-   * Set a property on an element.
+   * Set one or multiple properties on an element.
    * @template {TinyElement|TinyElement[]} T
-   * @param {T} el
-   * @param {string} name
+   * @param {T} el - Target element(s).
+   * @param {...string} names - Property name(s).
    * @returns {T}
    */
-  static addProp(el, name) {
-    if (typeof name !== 'string') throw new TypeError('The "name" must be a string.');
+  static addProp(el, ...names) {
     TinyHtml._preElems(el, 'addProp').forEach((elem) => {
-      // @ts-ignore
-      elem[TinyHtml.getPropName(name)] = true;
+      names.forEach((name) => {
+        if (typeof name !== 'string') throw new TypeError('Each "name" must be a string.');
+        // @ts-ignore
+        elem[TinyHtml.getPropName(name)] = true;
+      });
     });
     return el;
   }
 
   /**
    * Set a property on an element.
-   * @param {string} name
+   * @param {...string} names - Property name(s).
    * @returns {this}
    */
-  addProp(name) {
-    return TinyHtml.addProp(this, name);
+  addProp(...names) {
+    return TinyHtml.addProp(this, ...names);
   }
 
   /**
-   * Remove a property from an element.
+   * Remove one or multiple properties from an element.
    * @template {TinyElement|TinyElement[]} T
-   * @param {T} el
-   * @param {string} name
+   * @param {T} el - Target element(s).
+   * @param {...string} names - Property name(s).
    * @returns {T}
    */
-  static removeProp(el, name) {
-    if (typeof name !== 'string') throw new TypeError('The "name" must be a string.');
+  static removeProp(el, ...names) {
     TinyHtml._preElems(el, 'removeProp').forEach((elem) => {
-      // @ts-ignore
-      elem[TinyHtml.getPropName(name)] = false;
+      names.forEach((name) => {
+        if (typeof name !== 'string') throw new TypeError('Each "name" must be a string.');
+        // @ts-ignore
+        elem[TinyHtml.getPropName(name)] = false;
+      });
     });
     return el;
   }
 
   /**
    * Remove a property from an element.
-   * @param {string} name
+   * @param {...string} names - Property name(s).
    * @returns {this}
    */
-  removeProp(name) {
-    return TinyHtml.removeProp(this, name);
+  removeProp(...names) {
+    return TinyHtml.removeProp(this, ...names);
   }
 
   /**
-   * Toggle a boolean property.
+   * Toggle one or multiple boolean properties.
    * @template {TinyElement|TinyElement[]} T
-   * @param {T} el
-   * @param {string} name
-   * @param {boolean} [force]
+   * @param {T} el - Target element(s).
+   * @param {string|string[]} name - Property name or a list of property names.
+   * @param {boolean} [force] - Force true/false instead of toggling.
    * @returns {T}
    */
   static toggleProp(el, name, force) {
-    if (typeof name !== 'string') throw new TypeError('The "name" must be a string.');
+    const elems = TinyHtml._preElems(el, 'toggleProp');
     if (typeof force !== 'undefined' && typeof force !== 'boolean')
       throw new TypeError('The "force" must be a boolean.');
-    TinyHtml._preElems(el, 'toggleProp').forEach((elem) => {
-      // @ts-ignore
-      const shouldEnable = force === undefined ? !elem[TinyHtml.getPropName(name)] : force;
-      // @ts-ignore
-      if (shouldEnable) TinyHtml.addProp(elem, name);
-      else TinyHtml.removeProp(elem, name);
+
+    // Normalize list of properties
+    const props = Array.isArray(name) ? name : [name];
+
+    props.forEach((prop) => {
+      if (typeof prop !== 'string') throw new TypeError('Each property name must be a string.');
+      elems.forEach((elem) => {
+        // @ts-ignore
+        const shouldEnable = force === undefined ? !elem[TinyHtml.getPropName(prop)] : force;
+        if (shouldEnable) TinyHtml.addProp(elem, prop);
+        else TinyHtml.removeProp(elem, prop);
+      });
     });
+
     return el;
   }
 
   /**
-   * Toggle a boolean property.
-   * @param {string} name
-   * @param {boolean} [force]
+   * Toggle one or multiple boolean properties.
+   * @param {string|string[]} name - Property name or a list of property names.
+   * @param {boolean} [force] - Force true/false instead of toggling.
    * @returns {this}
    */
   toggleProp(name, force) {
@@ -5361,6 +6665,8 @@ class TinyHtml {
 
   /////////////////////////////////////////////////////
 
+  // TITLE: Remove Element
+
   /**
    * Removes an element from the DOM.
    * @template {TinyElement|TinyElement[]} T
@@ -5380,6 +6686,10 @@ class TinyHtml {
     return TinyHtml.remove(this);
   }
 
+  ///////////////////////////////////////////////////
+
+  // TITLE: Index Manager
+
   /**
    * Returns the index of the first element within its parent or relative to a selector/element.
    *
@@ -5416,6 +6726,8 @@ class TinyHtml {
 
   ////////////////////////////////////////////////////////////////////
 
+  // TITLE: Collision Stuff
+
   /**
    * Creates a new DOMRect object by copying the base rect and applying optional additional dimensions.
    *
@@ -5710,6 +7022,8 @@ class TinyHtml {
 
   //////////////////////////////////////////////////////////////////////////////
 
+  // TITLE: Viewport Stuff
+
   /**
    * Checks if the given element is at least partially visible in the viewport.
    *
@@ -5860,6 +7174,8 @@ class TinyHtml {
     return TinyHtml.isFullyInContainer(this, cont);
   }
 
+  // TITLE: Has Scroll
+
   /**
    * Checks if an element has scrollable content.
    *