tiny-essentials 1.21.10 → 1.22.0

package/dist/v1/libs/TinyHtml.mjs

@@ -1,9 +1,56 @@
+import { diffArrayList } from '../basics/array.mjs';
+import { diffStrings } from '../basics/text.mjs';
 import * as TinyCollision from '../basics/collision.mjs';
+import TinyElementObserver from './TinyElementObserver.mjs';
+// TITLE: Introduction
 const { areElsColliding, areElsPerfColliding, areElsCollTop, areElsCollBottom, areElsCollLeft, areElsCollRight, } = TinyCollision;
 /**
  * Represents a TinyHtml instance with any constructor element values.
  * @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.
@@ -143,6 +190,31 @@ const __eventRegistry = new WeakMap();
  * @type {WeakMap<ConstructorElValues, ElementDataStore>}
  */
 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.
@@ -199,6 +271,7 @@ const __elemCollision = {
  *   ...children: (string | HtmlParsed)[] // Text or nested elements
  * ]} 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.
@@ -213,6 +286,106 @@ const __elemCollision = {
 class TinyHtml {
     /** @typedef {import('../basics/collision.mjs').ObjRect} ObjRect */
     static Utils = { ...TinyCollision };
+    /**
+     * 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 = 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 = 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.
      *
@@ -254,6 +427,7 @@ class TinyHtml {
         const nodes = await TinyHtml.fetchHtmlNodes(url, ops);
         return TinyHtml.toTinyElm(nodes);
     }
+    // TITLE: Fetch Template List
     /**
      * Converts the content of a <template> to an array of HtmlParsed.
      *
@@ -291,6 +465,7 @@ class TinyHtml {
     static templateToTinyElems(nodes) {
         return TinyHtml.toTinyElm(TinyHtml.templateToNodes(nodes));
     }
+    // TITLE: Fetch Json List
     /**
      * Parses a full HTML string into a JSON-like structure.
      *
@@ -372,6 +547,7 @@ class TinyHtml {
     static jsonToTinyElems(jsonArray) {
         return TinyHtml.toTinyElm(TinyHtml.jsonToNodes(jsonArray));
     }
+    // TITLE: Element Creator
     /**
      * Creates a new TinyHtml element from a tag name and optional attributes.
      *
@@ -450,6 +626,8 @@ class TinyHtml {
             throw new Error('The HTML string must contain a valid HTML element.');
         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.
      *
@@ -555,6 +733,7 @@ class TinyHtml {
         return TinyHtml.getByTagNameNS(localName, namespaceURI, TinyHtml._preElem(this, 'getByTagNameNS'));
     }
     //////////////////////////////////////////////////////////////////
+    // 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.
@@ -613,6 +792,8 @@ class TinyHtml {
     getAll() {
         return [...this.#el];
     }
+    ////////////////////////////////////////////////
+    // TITLE: Element Getter (Private) (Pt1)
     /**
      * Returns the current Element held by this instance.
      *
@@ -645,6 +826,7 @@ class TinyHtml {
         return [...this.#el];
     }
     //////////////////////////////////////////////////////
+    // TITLE: Element Getter (Private) (Pt2)
     /**
      * Prepares and validates multiple elements against allowed types.
      *
@@ -928,6 +1110,8 @@ class TinyHtml {
     static _preElemWithDoc(elems, where) {
         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.
@@ -977,6 +1161,8 @@ class TinyHtml {
             return checkElement([elems]);
         return checkElement(elems);
     }
+    //////////////////////////////////////////////////
+    // TITLE: DOM Getter
     /**
      * Filters an array of elements based on a selector, function, element, or array of elements.
      *
@@ -1169,6 +1355,7 @@ class TinyHtml {
         return TinyHtml.isSameDom(this, elem);
     }
     //////////////////////////////////////////////////////////////////
+    // TITLE: Data Manager
     /**
      * Internal data storage for element information.
      * @type {ElementDataStore}
@@ -1277,6 +1464,7 @@ class TinyHtml {
         return TinyHtml.setData(this, key, value, isPrivate);
     }
     //////////////////////////////////////////////////////
+    // TITLE: DOM Getter 2
     /**
      * Get the sibling element in a given direction.
      *
@@ -1549,6 +1737,8 @@ class TinyHtml {
     contents() {
         return TinyHtml.contents(this);
     }
+    ////////////////////////////////////////////
+    // TITLE: Clone Dom
     /**
      * Clone each element.
      * @param {TinyNode|TinyNode[]} el
@@ -1568,6 +1758,8 @@ class TinyHtml {
     clone(deep) {
         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.
@@ -1837,6 +2029,7 @@ class TinyHtml {
         return TinyHtml.replaceAll(this, targets);
     }
     //////////////////////////////////////////////////////
+    // TITLE: Constructor Base
     /**
      * The target HTML element for instance-level operations.
      * @type {ConstructorElValues[]}
@@ -1893,6 +2086,7 @@ class TinyHtml {
         return obj != null && obj === obj.window;
     }
     /////////////////////////////////////////////////////
+    // TITLE: CSS Stuff
     /**
      * Returns the full computed CSS styles for the given element.
      *
@@ -2016,6 +2210,7 @@ class TinyHtml {
         return TinyHtml.cssFloats(this, prop);
     }
     //////////////////////////////////////////////////////////////////////
+    // TITLE: Style Stuff
     /**
      * Stores camelCase to kebab-case CSS property aliases.
      *
@@ -2512,6 +2707,7 @@ class TinyHtml {
         return TinyHtml.clearStyle(this);
     }
     //////////////////////////////////////////////////////////////////////
+    // TITLE: Focus/Blur
     /**
      * Focus the element.
      *
@@ -2550,6 +2746,8 @@ class TinyHtml {
     blur() {
         return TinyHtml.blur(this);
     }
+    /////////////////////////////////////////////////////////
+    // TITLE: Select
     /**
      * Select the text content of an input or textarea element.
      *
@@ -2572,6 +2770,7 @@ class TinyHtml {
     select() {
         return TinyHtml.select(this);
     }
+    // TITLE: Bool Checker
     /**
      * Interprets a value as a boolean `true` if it matches a common truthy representation.
      *
@@ -2595,6 +2794,7 @@ class TinyHtml {
         }
     }
     //////////////////////////////////////////////////////////////////////
+    // TITLE: Window Getter/Setter
     /**
      * Sets the vertical scroll position of the window.
      * @param {number} value - Sets the scroll position.
@@ -2889,29 +3089,888 @@ class TinyHtml {
         return TinyHtml.outerWidth(this, includeMargin);
     }
     //////////////////////////////////////////////////
+    // 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];
+    }
+    /**
+     * Stores animation data for a given element and key.
+     * Used to cache original size/values for animations.
+     *
+     * @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.
+     */
+    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)
+    /**
+     * Global configuration flag controlling whether old style-based animations
+     * are cancelled before a new one starts. Defaults to true.
+     *
+     * @type {boolean}
+     */
+    static #cancelOldStyleFx = true;
+    /**
+     * Returns the current global setting for cancelling old style-based animations.
+     *
+     * @returns {boolean} True if old animations are cancelled by default, false otherwise.
+     */
+    static get cancelOldStyleFx() {
+        return TinyHtml.#cancelOldStyleFx;
+    }
+    /**
+     * 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 set cancelOldStyleFx(value) {
+        if (typeof value !== 'boolean')
+            throw new TypeError('Expected a boolean value.');
+        TinyHtml.#cancelOldStyleFx = value;
+    }
+    // TITLE: Animate DOM (styleFxSpeeds)
+    /**
+     * 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' },
+    };
+    /**
+     * 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;
+    }
+    /**
+     * 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.');
+        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.`);
+        }
+        TinyHtml.#styleFxSpeeds = {};
+        for (const [k, v] of Object.entries(speeds))
+            TinyHtml.setStyleFxSpeed(k, v);
+    }
+    /**
+     * 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.
+     */
+    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;
+    }
+    /**
+     * 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 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;
+    }
+    /**
+     * 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.
+     */
+    static deleteStyleFxSpeed(name) {
+        if (typeof name !== 'string')
+            throw new TypeError('The "name" parameter must be a string.');
+        return delete TinyHtml.#styleFxSpeeds[name];
+    }
+    /**
+     * 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 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)
+    /**
+     * CSS expansion shorthand used by genStyleFx to include margin/padding values.
+     * @typedef {['Top', 'Right', 'Bottom', 'Left']}
+     */
+    static #cssExpand = ['Top', 'Right', 'Bottom', 'Left'];
+    // TITLE: Animate DOM (styleEffects)
+    /**
+     * Generate shortcuts
+     * @type {Record<string, StyleEffects>}
+     */
+    static #styleEffects = {
+        slideDown: TinyHtml.genStyleFx('show'),
+        slideUp: TinyHtml.genStyleFx('hide'),
+        fadeIn: { opacity: 'show' },
+        fadeOut: { opacity: 'hide' },
+    };
+    /**
+     * Returns a deep-cloned copy of the registered style effects.
+     *
+     * @returns {Record<string, StyleEffects>}
+     */
+    static get styleEffects() {
+        return JSON.parse(JSON.stringify(TinyHtml.#styleEffects));
+    }
+    /**
+     * Replace the entire styleEffects map with a new one.
+     *
+     * @param {Record<string, StyleEffects>} value
+     */
+    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.
      *
-     * @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}
+     * 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}
      */
-    animate(keyframes, ops) {
-        return TinyHtml.animate(this, keyframes, ops);
+    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.
@@ -3003,6 +4062,8 @@ class TinyHtml {
     offsetParent() {
         return TinyHtml.offsetParent(this);
     }
+    /////////////////////////////////////////////////
+    // TITLE: Scroll Stuff
     /**
      * Gets the vertical scroll position.
      * @param {TinyElementAndWindow} el - Element or window.
@@ -3212,6 +4273,8 @@ class TinyHtml {
     setScrollLeft(value) {
         return TinyHtml.setScrollLeft(this, value);
     }
+    ///////////////////////////////////////////
+    // TITLE: Border Stuff
     /**
      * Returns the total border width and individual sides from `border{Side}Width` CSS properties.
      *
@@ -3302,6 +4365,7 @@ class TinyHtml {
         return TinyHtml.padding(this);
     }
     /////////////////////////////////////////////
+    // TITLE: Class Stuff
     /**
      * Adds one or more CSS class names to the element.
      * @template {TinyElement|TinyElement[]} T
@@ -3473,6 +4537,7 @@ class TinyHtml {
         return TinyHtml.classList(this);
     }
     /////////////////////////////////////////
+    // TITLE: Tag Stuff
     /**
      * Returns the tag name of the element.
      * @param {TinyElement} el - Target element.
@@ -3505,6 +4570,8 @@ class TinyHtml {
     id() {
         return TinyHtml.id(this);
     }
+    //////////////////////////////////////////////////////////////
+    // TITLE: DOM Content Stuff
     /**
      * Returns the BigInt content of the element.
      * @param {TinyElement} el - Target element.
@@ -3793,6 +4860,8 @@ class TinyHtml {
     setText(value) {
         return TinyHtml.setText(this, value);
     }
+    //////////////////////////////////////////////////////
+    // TITLE: DOM Content Stuff (Part 2)
     /**
      * Remove all child nodes from each element.
      * @template {TinyElement|TinyElement[]} T
@@ -3849,6 +4918,8 @@ class TinyHtml {
     setHtml(value) {
         return TinyHtml.setHtml(this, value);
     }
+    ///////////////////////////////////////////////
+    // TITLE: Value Stuff
     /** @readonly */
     static _valHooks = {
         option: {
@@ -4262,6 +5333,7 @@ class TinyHtml {
         return TinyHtml.valBool(this);
     }
     ////////////////////////////////////////////
+    // 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).
      *
@@ -4315,6 +5387,8 @@ class TinyHtml {
     listenForPaste({ onFilePaste, onTextPaste } = {}) {
         return TinyHtml.listenForPaste(this, { onFilePaste, onTextPaste });
     }
+    /////////////////////////////////////////////////////
+    // TITLE: Events Stuff
     /**
      * Checks if the element has a listener for a specific event.
      *
@@ -4367,6 +5441,40 @@ class TinyHtml {
     hasExactEventListener(event, handler) {
         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.
      *
@@ -4602,6 +5710,7 @@ class TinyHtml {
         return TinyHtml.trigger(this, events, payload);
     }
     ///////////////////////////////////////////////////////////////
+    // TITLE: ProFix Manager
     /**
      * Internal property name normalization map (similar to jQuery's `propFix`).
      * Maps attribute-like names to their JavaScript DOM property equivalents.
@@ -4885,6 +5994,7 @@ class TinyHtml {
         return TinyHtml.toggleProp(this, name, force);
     }
     /////////////////////////////////////////////////////
+    // TITLE: Remove Element
     /**
      * Removes an element from the DOM.
      * @template {TinyElement|TinyElement[]} T
@@ -4902,6 +6012,8 @@ class TinyHtml {
     remove() {
         return TinyHtml.remove(this);
     }
+    ///////////////////////////////////////////////////
+    // TITLE: Index Manager
     /**
      * Returns the index of the first element within its parent or relative to a selector/element.
      *
@@ -4932,6 +6044,7 @@ class TinyHtml {
         return TinyHtml.index(this, elem);
     }
     ////////////////////////////////////////////////////////////////////
+    // TITLE: Collision Stuff
     /**
      * Creates a new DOMRect object by copying the base rect and applying optional additional dimensions.
      *
@@ -5200,6 +6313,7 @@ class TinyHtml {
         return TinyHtml.resetCollLockDir(this, direction);
     }
     //////////////////////////////////////////////////////////////////////////////
+    // TITLE: Viewport Stuff
     /**
      * Checks if the given element is at least partially visible in the viewport.
      *
@@ -5320,6 +6434,7 @@ class TinyHtml {
     isFullyInContainer(cont) {
         return TinyHtml.isFullyInContainer(this, cont);
     }
+    // TITLE: Has Scroll
     /**
      * Checks if an element has scrollable content.
      *