tiny-essentials 1.14.0 → 1.16.0

package/dist/v1/libs/TinyHtml.cjs

@@ -0,0 +1,3859 @@
+'use strict';
+
+var collision = require('../basics/collision.cjs');
+
+const {
+  areElsColliding,
+  areElsPerfColliding,
+  areElsCollTop,
+  areElsCollBottom,
+  areElsCollLeft,
+  areElsCollRight,
+} = collision;
+
+/**
+ * Represents a raw Node element or an instance of TinyHtml.
+ * This type is used to abstract interactions with both plain elements
+ * and wrapped elements via the TinyHtml class.
+ *
+ * @typedef {Node|TinyHtml|null} TinyNode
+ */
+
+/**
+ * Represents a raw DOM element or an instance of TinyHtml.
+ * This type is used to abstract interactions with both plain elements
+ * and wrapped elements via the TinyHtml class.
+ *
+ * @typedef {Element|TinyHtml} TinyElement
+ */
+
+/**
+ * Represents a raw DOM html element or an instance of TinyHtml.
+ * This type is used to abstract interactions with both plain elements
+ * and wrapped elements via the TinyHtml class.
+ *
+ * @typedef {HTMLElement|TinyHtml} TinyHtmlElement
+ */
+
+/**
+ * Represents a raw DOM event target element or an instance of TinyHtml.
+ * This type is used to abstract interactions with both plain elements
+ * and wrapped elements via the TinyHtml class.
+ *
+ * @typedef {EventTarget|TinyHtml} TinyEventTarget
+ */
+
+/**
+ * Represents a raw DOM input element or an instance of TinyHtml.
+ * This type is used to abstract interactions with both plain elements
+ * and wrapped elements via the TinyHtml class.
+ *
+ * @typedef {InputElement|TinyHtml} TinyInputElement
+ */
+
+/**
+ * Represents a raw DOM element/window or an instance of TinyHtml.
+ * This type is used to abstract interactions with both plain elements
+ * and wrapped elements via the TinyHtml class.
+ *
+ * @typedef {ElementAndWindow|TinyHtml} TinyElementAndWindow
+ */
+
+/**
+ * Represents a value that can be either a DOM Element or the global Window object.
+ * Useful for functions that operate generically on scrollable or measurable targets.
+ *
+ * @typedef {Element|Window} ElementAndWindow
+ */
+
+/**
+ * A parameter type used for filtering or matching elements.
+ * It can be:
+ * - A string (CSS selector),
+ * - A raw DOM element,
+ * - An array of raw DOM elements,
+ * - A filtering function that receives an index and element,
+ *   and returns true if it matches.
+ *
+ * @typedef {string|Element|Element[]|((index: number, el: Element) => boolean)} WinnowRequest
+ */
+
+/**
+ * Elements accepted as constructor values for TinyHtml.
+ * These include common DOM elements and root containers.
+ *
+ * @typedef {Window|Element|Document} ConstructorElValues
+ */
+
+/**
+ * The handler function used in event listeners.
+ *
+ * @typedef {(e: Event) => any} EventRegistryHandle
+ */
+
+/**
+ * Options passed to `addEventListener` or `removeEventListener`.
+ * Can be a boolean or an object of type `AddEventListenerOptions`.
+ *
+ * @typedef {boolean|AddEventListenerOptions} EventRegistryOptions
+ */
+
+/**
+ * Structure describing a registered event callback and its options.
+ *
+ * @typedef {Object} EventRegistryItem
+ * @property {EventRegistryHandle} handler - The function to be executed when the event is triggered.
+ * @property {EventRegistryOptions} [options] - Optional configuration passed to the listener.
+ */
+
+/**
+ * Maps event names (e.g., `"click"`, `"keydown"`) to a list of registered handlers and options.
+ *
+ * @typedef {Record<string, EventRegistryItem[]>} EventRegistryList
+ */
+
+/**
+ * WeakMap storing all event listeners per element.
+ * Each element has a registry mapping event names to their handler lists.
+ *
+ * @type {WeakMap<ConstructorElValues|EventTarget, EventRegistryList>}
+ */
+const __eventRegistry = new WeakMap();
+
+/**
+ * A key-value store associated with a specific DOM element.
+ * Keys are strings, and values can be of any type.
+ *
+ * @typedef {Record<string, *>} ElementDataStore
+ */
+
+/**
+ * WeakMap to hold private data for elements
+ *
+ * @type {WeakMap<ConstructorElValues, ElementDataStore>}
+ */
+const __elementDataMap = new WeakMap();
+
+/**
+ * Stores directional collision locks separately.
+ * Each direction has its own WeakMap to allow independent locking.
+ *
+ * @type {{
+ *   top: WeakMap<Element, true>,
+ *   bottom: WeakMap<Element, true>,
+ *   left: WeakMap<Element, true>,
+ *   right: WeakMap<Element, true>
+ * }}
+ */
+const __elemCollision = {
+  top: new WeakMap(),
+  bottom: new WeakMap(),
+  left: new WeakMap(),
+  right: new WeakMap(),
+};
+
+/**
+ * Possible directions from which a collision was detected and locked.
+ *
+ * @typedef {'top'|'bottom'|'left'|'right'} CollisionDirLock
+ */
+
+/**
+ * @typedef {Object} HtmlElBoxSides
+ * @property {number} x - Total horizontal size (left + right)
+ * @property {number} y - Total vertical size (top + bottom)
+ * @property {number} left
+ * @property {number} right
+ * @property {number} top
+ * @property {number} bottom
+ */
+
+/**
+ * @typedef {string | number | Date | boolean | null} SetValueBase - Primitive types accepted as input values.
+ */
+
+/**
+ * @typedef {'string' | 'date' | 'number'} GetValueTypes
+ * Types of value extractors supported by TinyHtml._valTypes.
+ */
+
+/**
+ * @typedef {SetValueBase|SetValueBase[]} SetValueList - A single value or an array of values to be assigned to the input element.
+ */
+
+/**
+ * A list of HTML form elements that can have a `.value` property used by TinyHtml.
+ * Includes common input types used in forms.
+ *
+ * @typedef {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement|HTMLOptionElement} InputElement
+ */
+
+/**
+ * TinyHtml is a utility class that provides static and instance-level methods
+ * for precise dimension and position computations on HTML elements.
+ * It mimics some jQuery functionalities while using native browser APIs.
+ *
+ * Inspired by the jQuery project's open source implementations of element dimension
+ * and offset utilities. This class serves as a lightweight alternative using modern DOM APIs.
+ *
+ * @class
+ */
+class TinyHtml {
+  /** @typedef {import('../basics/collision.mjs').ObjRect} ObjRect */
+
+  static Utils = { ...collision };
+
+  /**
+   * Queries the document for the first element matching the CSS selector and wraps it in a TinyHtml instance.
+   *
+   * @param {string} selector - A valid CSS selector string.
+   * @returns {TinyHtml} A TinyHtml instance wrapping the matched element.
+   * @throws {Error} If no element matches the selector.
+   */
+  static query(selector) {
+    const newEl = document.querySelector(selector);
+    if (!newEl) throw new Error(`[TinyHtml] query(): No element found for selector "${selector}".`);
+    return new TinyHtml(newEl);
+  }
+
+  /**
+   * Queries the document for all elements matching the CSS selector and wraps them in TinyHtml instances.
+   *
+   * @param {string} selector - A valid CSS selector string.
+   * @returns {TinyHtml[]} An array of TinyHtml instances wrapping the matched elements.
+   */
+  static queryAll(selector) {
+    const newEls = document.querySelectorAll(selector);
+    return TinyHtml.toTinyElm([...newEls]);
+  }
+
+  /**
+   * Retrieves an element by its ID and wraps it in a TinyHtml instance.
+   *
+   * @param {string} selector - The ID of the element to retrieve.
+   * @returns {TinyHtml} A TinyHtml instance wrapping the found element.
+   * @throws {Error} If no element is found with the specified ID.
+   */
+  static getById(selector) {
+    const newEl = document.getElementById(selector);
+    if (!newEl) throw new Error(`[TinyHtml] getById(): No element found with ID "${selector}".`);
+    return new TinyHtml(newEl);
+  }
+
+  /**
+   * Retrieves all elements with the specified class name and wraps them in TinyHtml instances.
+   *
+   * @param {string} selector - The class name to search for.
+   * @returns {TinyHtml[]} An array of TinyHtml instances wrapping the found elements.
+   */
+  static getByClassName(selector) {
+    const newEls = document.getElementsByClassName(selector);
+    return TinyHtml.toTinyElm([...newEls]);
+  }
+
+  /**
+   * Retrieves all elements with the specified name attribute and wraps them in TinyHtml instances.
+   *
+   * @param {string} selector - The name attribute to search for.
+   * @returns {TinyHtml[]} An array of TinyHtml instances wrapping the found elements.
+   */
+  static getByName(selector) {
+    const newEls = document.getElementsByName(selector);
+    return TinyHtml.toTinyElm([...newEls]);
+  }
+
+  /**
+   * Retrieves all elements with the specified local tag name within the given namespace URI,
+   * and wraps them in TinyHtml instances.
+   *
+   * @param {string} localName - The local name (tag) of the elements to search for.
+   * @param {string|null} [namespaceURI='http://www.w3.org/1999/xhtml'] - The namespace URI to search within.
+   * @returns {TinyHtml[]} An array of TinyHtml instances wrapping the found elements.
+   */
+  static getByTagNameNS(localName, namespaceURI = 'http://www.w3.org/1999/xhtml') {
+    const newEls = document.getElementsByTagNameNS(namespaceURI, localName);
+    return TinyHtml.toTinyElm([...newEls]);
+  }
+
+  //////////////////////////////////////////////////////////////////
+
+  /**
+   * Returns the current target held by this instance.
+   *
+   * @returns {ConstructorElValues} - The instance's target element.
+   */
+  get() {
+    return this.#el;
+  }
+
+  /**
+   * Returns the current Element held by this instance.
+   *
+   * @param {string} where - The method name or context calling this.
+   * @returns {ConstructorElValues} - The instance's element.
+   * @readonly
+   */
+  _getElement(where) {
+    if (
+      !(this.#el instanceof Element) &&
+      !(this.#el instanceof Window) &&
+      !(this.#el instanceof Document)
+    )
+      throw new Error(`[TinyHtml] Invalid Element in ${where}().`);
+    return this.#el;
+  }
+
+  //////////////////////////////////////////////////////
+
+  /**
+   * @param {TinyElement|EventTarget|null|(TinyElement|EventTarget|null)[]} elems
+   * @param {string} where
+   * @param {any[]} TheTinyElements
+   * @param {string[]} elemName
+   * @returns {any[]}
+   * @readonly
+   */
+  static _preElemsTemplate(elems, where, TheTinyElements, elemName) {
+    /** @param {(TinyElement|EventTarget|null)[]} item */
+    const checkElement = (item) =>
+      item.map((elem) => {
+        const result = elem instanceof TinyHtml ? elem._getElement(where) : elem;
+        let allowed = false;
+        for (const TheTinyElement of TheTinyElements) {
+          if (result instanceof TheTinyElement) {
+            allowed = true;
+            break;
+          }
+        }
+        if (!allowed)
+          throw new Error(
+            `[TinyHtml] Invalid element of the list "${elemName.join(',')}" in ${where}().`,
+          );
+        return result;
+      });
+    if (!Array.isArray(elems)) return checkElement([elems]);
+    return checkElement(elems);
+  }
+
+  /**
+   * @param {TinyElement|EventTarget|null|(TinyElement|EventTarget|null)[]} elems
+   * @param {string} where
+   * @param {any[]} TheTinyElements
+   * @param {string[]} elemName
+   * @param {boolean} [canNull=false]
+   * @returns {any}
+   * @readonly
+   */
+  static _preElemTemplate(elems, where, TheTinyElements, elemName, canNull = false) {
+    /** @param {(TinyElement|EventTarget|null)[]} item */
+    const checkElement = (item) => {
+      const elem = item[0];
+      let result = elem instanceof TinyHtml ? elem._getElement(where) : elem;
+      let allowed = false;
+      for (const TheTinyElement of TheTinyElements) {
+        if (result instanceof TheTinyElement) {
+          allowed = true;
+          break;
+        }
+      }
+
+      if (canNull && (result === null || typeof result === 'undefined')) {
+        result = null;
+        allowed = true;
+      }
+
+      if (!allowed)
+        throw new Error(
+          `[TinyHtml] Invalid element of the list "${elemName.join(',')}" in ${where}().`,
+        );
+      return result;
+    };
+    if (!Array.isArray(elems)) return checkElement([elems]);
+    if (elems.length > 1)
+      throw new Error(
+        `[TinyHtml] Invalid element amount in ${where}() (Received ${elems.length}/1).`,
+      );
+    return checkElement(elems);
+  }
+
+  /**
+   * Ensures the input is returned as an array.
+   * Useful to normalize operations across multiple or single elements.
+   *
+   * @param {TinyElement|TinyElement[]} elems - A single element or array of elements.
+   * @param {string} where - The method or context name where validation is being called.
+   * @returns {Element[]} - Always returns an array of elements.
+   * @readonly
+   */
+  static _preElems(elems, where) {
+    return TinyHtml._preElemsTemplate(elems, where, [Element], ['Element']);
+  }
+
+  /**
+   * Ensures the input is returned as an single element.
+   * Useful to normalize operations across multiple or single elements.
+   *
+   * @param {TinyElement|TinyElement[]} elems - A single element or array of elements.
+   * @param {string} where - The method or context name where validation is being called.
+   * @returns {Element} - Always returns an single element.
+   * @readonly
+   */
+  static _preElem(elems, where) {
+    return TinyHtml._preElemTemplate(elems, where, [Element], ['Element']);
+  }
+
+  /**
+   * Ensures the input is returned as an array.
+   * Useful to normalize operations across multiple or single nodes.
+   *
+   * @param {TinyNode|TinyNode[]} elems - A single node or array of nodes.
+   * @param {string} where - The method or context name where validation is being called.
+   * @returns {Node[]} - Always returns an array of nodes.
+   * @readonly
+   */
+  static _preNodeElems(elems, where) {
+    return TinyHtml._preElemsTemplate(elems, where, [Node], ['Node']);
+  }
+
+  /**
+   * Ensures the input is returned as an single node.
+   * Useful to normalize operations across multiple or single nodes.
+   *
+   * @param {TinyNode|TinyNode[]} elems - A single node or array of nodes.
+   * @param {string} where - The method or context name where validation is being called.
+   * @returns {Node} - Always returns an single node.
+   * @readonly
+   */
+  static _preNodeElem(elems, where) {
+    return TinyHtml._preElemTemplate(elems, where, [Node], ['Node']);
+  }
+
+  /**
+   * Ensures the input is returned as an single node.
+   * Useful to normalize operations across multiple or single nodes.
+   *
+   * @param {TinyNode|TinyNode[]} elems - A single node or array of nodes.
+   * @param {string} where - The method or context name where validation is being called.
+   * @returns {Node|null} - Always returns an single node or null.
+   * @readonly
+   */
+  static _preNodeElemWithNull(elems, where) {
+    return TinyHtml._preElemTemplate(elems, where, [Node], ['Node'], true);
+  }
+
+  /**
+   * Ensures the input is returned as an array.
+   * Useful to normalize operations across multiple or single html elements.
+   *
+   * @param {TinyElement|TinyElement[]} elems - A single html element or array of html elements.
+   * @param {string} where - The method or context name where validation is being called.
+   * @returns {HTMLElement[]} - Always returns an array of html elements.
+   * @readonly
+   */
+  static _preHtmlElems(elems, where) {
+    return TinyHtml._preElemsTemplate(elems, where, [HTMLElement], ['HTMLElement']);
+  }
+
+  /**
+   * Ensures the input is returned as an single html element.
+   * Useful to normalize operations across multiple or single html elements.
+   *
+   * @param {TinyElement|TinyElement[]} elems - A single html element or array of html elements.
+   * @param {string} where - The method or context name where validation is being called.
+   * @returns {HTMLElement} - Always returns an single html element.
+   * @readonly
+   */
+  static _preHtmlElem(elems, where) {
+    return TinyHtml._preElemTemplate(elems, where, [HTMLElement], ['HTMLElement']);
+  }
+
+  /**
+   * Ensures the input is returned as an array.
+   * Useful to normalize operations across multiple or single event target elements.
+   *
+   * @param {TinyInputElement|TinyInputElement[]} elems - A single event target element or array of html elements.
+   * @param {string} where - The method or context name where validation is being called.
+   * @returns {InputElement[]} - Always returns an array of event target elements.
+   * @readonly
+   */
+  static _preInputElems(elems, where) {
+    return TinyHtml._preElemsTemplate(
+      elems,
+      where,
+      [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement, HTMLOptionElement],
+      ['HTMLInputElement', 'HTMLSelectElement', 'HTMLTextAreaElement', 'HTMLOptionElement'],
+    );
+  }
+
+  /**
+   * Ensures the input is returned as an single event target element.
+   * Useful to normalize operations across multiple or single event target elements.
+   *
+   * @param {TinyInputElement|TinyInputElement[]} elems - A single event target element or array of html elements.
+   * @param {string} where - The method or context name where validation is being called.
+   * @returns {InputElement} - Always returns an single event target element.
+   * @readonly
+   */
+  static _preInputElem(elems, where) {
+    return TinyHtml._preElemTemplate(
+      elems,
+      where,
+      [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement, HTMLOptionElement],
+      ['HTMLInputElement', 'HTMLSelectElement', 'HTMLTextAreaElement', 'HTMLOptionElement'],
+    );
+  }
+
+  /**
+   * Ensures the input is returned as an array.
+   * Useful to normalize operations across multiple or single event target elements.
+   *
+   * @param {TinyEventTarget|TinyEventTarget[]} elems - A single event target element or array of html elements.
+   * @param {string} where - The method or context name where validation is being called.
+   * @returns {EventTarget[]} - Always returns an array of event target elements.
+   * @readonly
+   */
+  static _preEventTargetElems(elems, where) {
+    return TinyHtml._preElemsTemplate(elems, where, [EventTarget], ['EventTarget']);
+  }
+
+  /**
+   * Ensures the input is returned as an single event target element.
+   * Useful to normalize operations across multiple or single event target elements.
+   *
+   * @param {TinyEventTarget|TinyEventTarget[]} elems - A single event target element or array of html elements.
+   * @param {string} where - The method or context name where validation is being called.
+   * @returns {EventTarget} - Always returns an single event target element.
+   * @readonly
+   */
+  static _preEventTargetElem(elems, where) {
+    return TinyHtml._preElemTemplate(elems, where, [EventTarget], ['EventTarget']);
+  }
+
+  /**
+   * Ensures the input is returned as an array.
+   * Useful to normalize operations across multiple or single element/window elements.
+   *
+   * @param {TinyElementAndWindow|TinyElementAndWindow[]} elems - A single element/window element or array of html elements.
+   * @param {string} where - The method or context name where validation is being called.
+   * @returns {ElementAndWindow[]} - Always returns an array of element/window elements.
+   * @readonly
+   */
+  static _preElemsAndWindow(elems, where) {
+    return TinyHtml._preElemsTemplate(elems, where, [Element, Window], ['Element', 'Window']);
+  }
+
+  /**
+   * Ensures the input is returned as an single element/window element.
+   * Useful to normalize operations across multiple or single element/window elements.
+   *
+   * @param {TinyElementAndWindow|TinyElementAndWindow[]} elems - A single element/window element or array of html elements.
+   * @param {string} where - The method or context name where validation is being called.
+   * @returns {ElementAndWindow} - Always returns an single element/window element.
+   * @readonly
+   */
+  static _preElemAndWindow(elems, where) {
+    return TinyHtml._preElemTemplate(elems, where, [Element, Window], ['Element', 'Window']);
+  }
+
+  /**
+   * Normalizes and converts one or more DOM elements (or TinyHtml instances)
+   * into an array of `TinyHtml` instances.
+   *
+   * - If a plain DOM element is passed, it is wrapped into a `TinyHtml` instance.
+   * - If a `TinyHtml` instance is already passed, it is preserved.
+   * - If an array is passed, all elements inside are converted accordingly.
+   *
+   * This ensures consistent access to methods of the `TinyHtml` class regardless
+   * of the input form.
+   *
+   * @param {TinyElement|TinyElement[]} elems - A single element or an array of elements (DOM or TinyHtml).
+   * @returns {TinyHtml[]} An array of TinyHtml instances corresponding to the input elements.
+   */
+  static toTinyElm(elems) {
+    /** @param {TinyElement[]} item */
+    const checkElement = (item) =>
+      item.map((elem) => (!(elem instanceof TinyHtml) ? new TinyHtml(elem) : elem));
+    if (!Array.isArray(elems)) return checkElement([elems]);
+    return checkElement(elems);
+  }
+
+  /**
+   * Extracts native `Element` instances from one or more elements,
+   * which can be either raw DOM elements or wrapped in `TinyHtml`.
+   *
+   * - If a `TinyHtml` instance is passed, its internal DOM element is extracted.
+   * - If a raw DOM element is passed, it is returned as-is.
+   * - If an array is passed, each element is processed accordingly.
+   *
+   * This function guarantees that the return value is always an array of
+   * raw `Element` objects, regardless of whether the input was
+   * a mix of `TinyHtml` or native DOM elements.
+   *
+   * @param {TinyElement|TinyElement[]} elems - A single element or an array of elements (DOM or TinyHtml`).
+   * @returns {Element[]} An array of Element instances extracted from the input.
+   */
+  static fromTinyElm(elems) {
+    /** @param {TinyElement[]} item */
+    const checkElement = (item) =>
+      item.map(
+        (elem) =>
+          /** @type {Element} */ (
+            elem instanceof TinyHtml ? elem._getElement('fromTinyElm') : elem
+          ),
+      );
+    if (!Array.isArray(elems)) return checkElement([elems]);
+    return checkElement(elems);
+  }
+
+  /**
+   * Filters an array of elements based on a selector, function, element, or array of elements.
+   *
+   * @param {TinyElement|TinyElement[]} elems
+   * @param {WinnowRequest} qualifier
+   * @param {string} where - The context/method name using this validation.
+   * @param {boolean} not Whether to invert the result (used for .not())
+   * @returns {Element[]}
+   */
+  static winnow(elems, qualifier, where, not = false) {
+    if (typeof not !== 'boolean') throw new TypeError('The "not" must be a boolean.');
+    if (typeof qualifier === 'function') {
+      return TinyHtml._preElems(elems, where).filter(
+        (el, i) => !!qualifier.call(el, i, el) !== not,
+      );
+    }
+
+    if (qualifier instanceof Element) {
+      return TinyHtml._preElems(elems, where).filter((el) => (el === qualifier) !== not);
+    }
+
+    if (
+      Array.isArray(qualifier) ||
+      (typeof qualifier !== 'string' &&
+        // @ts-ignore
+        qualifier.length != null)
+    ) {
+      return TinyHtml._preElems(elems, where).filter((el) => qualifier.includes(el) !== not);
+    }
+
+    // Assume it's a selector string
+    let selector = qualifier;
+    if (not) selector = `:not(${selector})`;
+    return TinyHtml._preElems(elems, where).filter(
+      (el) => el.nodeType === 1 && el.matches(selector),
+    );
+  }
+
+  /**
+   * Filters a set of elements by a CSS selector.
+   *
+   * @param {TinyElement|TinyElement[]} elems
+   * @param {string} selector
+   * @param {boolean} not
+   * @returns {Element[]}
+   */
+  static filter(elems, selector, not = false) {
+    if (not) selector = `:not(${selector})`;
+    return TinyHtml._preElems(elems, 'filter').filter(
+      (el) => el.nodeType === 1 && el.matches(selector),
+    );
+  }
+
+  /**
+   * Returns only the elements matching the given selector or function.
+   *
+   * @param {TinyElement|TinyElement[]} elems
+   * @param {WinnowRequest} selector
+   * @returns {Element[]}
+   */
+  static filterOnly(elems, selector) {
+    return TinyHtml.winnow(elems, selector, 'filterOnly', false);
+  }
+
+  /**
+   * Returns only the elements **not** matching the given selector or function.
+   *
+   * @param {TinyElement|TinyElement[]} elems
+   * @param {WinnowRequest} selector
+   * @returns {Element[]}
+   */
+  static not(elems, selector) {
+    return TinyHtml.winnow(elems, selector, 'not', true);
+  }
+
+  /**
+   * Returns only the elements **not** matching the given selector or function.
+   *
+   * @param {WinnowRequest} selector
+   * @returns {Element[]}
+   */
+  not(selector) {
+    return TinyHtml.not(this, selector);
+  }
+
+  /**
+   * Finds elements matching a selector within a context.
+   *
+   * @param {TinyElement|TinyElement[]} context
+   * @param {string} selector
+   * @returns {Element[]}
+   */
+  static find(context, selector) {
+    const result = [];
+    for (const el of TinyHtml._preElems(context, 'find')) {
+      result.push(...el.querySelectorAll(selector));
+    }
+    return [...new Set(result)];
+  }
+
+  /**
+   * Finds elements in your element matching a selector within a context.
+   *
+   * @param {string} selector
+   * @returns {Element[]}
+   */
+  find(selector) {
+    return TinyHtml.find(this, selector);
+  }
+
+  /**
+   * Checks if at least one element matches the selector.
+   *
+   * @param {TinyElement|TinyElement[]} elems
+   * @param {WinnowRequest} selector
+   * @returns {boolean}
+   */
+  static is(elems, selector) {
+    return TinyHtml.winnow(elems, selector, 'is', false).length > 0;
+  }
+
+  /**
+   * Checks if the element matches the selector.
+   *
+   * @param {WinnowRequest} selector
+   * @returns {boolean}
+   */
+  is(selector) {
+    return TinyHtml.is(this, selector);
+  }
+
+  /**
+   * Returns elements from the current list that contain the given target(s).
+   * @param {TinyElement|TinyElement[]} roots - A single element or an array of elements (DOM or TinyHtml).
+   * @param {string|TinyElement|TinyElement[]} target - Selector or DOM element(s).
+   * @returns {Element[]} Elements that contain the target.
+   */
+  static has(roots, target) {
+    const targets =
+      typeof target === 'string'
+        ? [...document.querySelectorAll(target)]
+        : TinyHtml._preElems(target, 'has');
+
+    return TinyHtml._preElems(roots, 'has').filter((root) =>
+      targets.some((t) => root && root.contains(t)),
+    );
+  }
+
+  /**
+   * Return if the element has the target(s).
+   * @param {string|TinyElement|TinyElement[]} target - Selector or DOM element(s).
+   * @returns {boolean} Elements that contain the target.
+   */
+  has(target) {
+    return TinyHtml.has(this, target).length > 0;
+  }
+
+  /**
+   * Finds the closest ancestor (including self) that matches the selector.
+   *
+   * @param {TinyElement|TinyElement[]} els - A single element or an array of elements (DOM or TinyHtml).
+   * @param {string|Element} selector - A selector string or DOM element to match.
+   * @param {Element|null} [context] - An optional context to stop searching.
+   * @returns {Element[]}
+   */
+  static closest(els, selector, context) {
+    const matched = [];
+
+    for (const el of TinyHtml._preElems(els, 'closest')) {
+      /** @type {Element | null} */
+      let current = el;
+      while (current && current !== context) {
+        if (
+          current.nodeType === 1 &&
+          (typeof selector === 'string' ? current.matches(selector) : current === selector)
+        ) {
+          matched.push(current);
+          break;
+        }
+        current = current.parentElement;
+      }
+    }
+
+    return [...new Set(matched)];
+  }
+
+  /**
+   * Finds the closest ancestor (including self) that matches the selector.
+   *
+   * @param {string|Element} selector - A selector string or DOM element to match.
+   * @param {Element|null} [context] - An optional context to stop searching.
+   * @returns {Element[]}
+   */
+  closest(selector, context) {
+    return TinyHtml.closest(this, selector, context);
+  }
+
+  /**
+   * Compares two DOM elements to determine if they refer to the same node in the document.
+   *
+   * This performs a strict equality check (`===`) between the two elements.
+   *
+   * @param {TinyNode} elem - The first DOM element to compare.
+   * @param {TinyNode} otherElem - The second DOM element to compare.
+   * @returns {boolean} `true` if both elements are the same DOM node; otherwise, `false`.
+   */
+  static isSameDom(elem, otherElem) {
+    return (
+      TinyHtml._preNodeElem(elem, 'isSameDom') === TinyHtml._preNodeElem(otherElem, 'isSameDom')
+    );
+  }
+
+  /**
+   * Compares two DOM elements to determine if they refer to the same node in the document.
+   *
+   * This performs a strict equality check (`===`) between the two elements.
+   *
+   * @param {TinyNode} elem - The DOM element to compare.
+   * @returns {boolean} `true` if both elements are the same DOM node; otherwise, `false`.
+   */
+  isSameDom(elem) {
+    return TinyHtml.isSameDom(this, elem);
+  }
+
+  //////////////////////////////////////////////////////////////////
+
+  /** @type {ElementDataStore} */
+  _data = {};
+
+  /**
+   * Internal data selectors for accessing public or private data stores.
+   *
+   * @type {Record<string, (where: string, elem: TinyElement) => ElementDataStore>}
+   * @readonly
+   */
+  static _dataSelector = {
+    public: (where, el) => {
+      const elem = TinyHtml._preElem(el, where);
+      let data = __elementDataMap.get(elem);
+      if (!data) {
+        data = {};
+        __elementDataMap.set(elem, data);
+      }
+      return data;
+    },
+    private: (where, el) => {
+      if (!(el instanceof TinyHtml))
+        throw new Error(`Element must be a TinyHtml instance to execute ${where}().`);
+      return el._data;
+    },
+  };
+
+  /**
+   * Retrieves data associated with a DOM element.
+   *
+   * If a `key` is provided, the corresponding value is returned.
+   * If no `key` is given, a shallow copy of all stored data is returned.
+   *
+   * @param {TinyElement} el - The DOM element.
+   * @param {string|null} [key] - The specific key to retrieve from the data store.
+   * @param {boolean} [isPrivate=false] - Whether to access the private data store.
+   * @returns {ElementDataStore|undefined|any} - The stored value, all data, or undefined if the key doesn't exist.
+   */
+  static data(el, key, isPrivate = false) {
+    // Get or initialize the data object
+    const data = TinyHtml._dataSelector[!isPrivate ? 'public' : 'private']('data', el);
+
+    // Getter for all
+    if (key === undefined || key === null) return { ...data };
+
+    // Getter for specific key
+    if (typeof key !== 'string') throw new TypeError('The key must be a string.');
+    return data.hasOwnProperty(key) ? data[key] : undefined;
+  }
+
+  /**
+   * Retrieves data associated with a DOM element.
+   *
+   * If a `key` is provided, the corresponding value is returned.
+   * If no `key` is given, a shallow copy of all stored data is returned.
+   *
+   * @param {string} [key] - The specific key to retrieve from the data store.
+   * @param {boolean} [isPrivate=false] - Whether to access the private data store.
+   * @returns {ElementDataStore|undefined|any} - The stored value, all data, or undefined if the key doesn't exist.
+   */
+  data(key, isPrivate) {
+    return TinyHtml.data(this, key, isPrivate);
+  }
+
+  /**
+   * Stores a value associated with a specific key for a DOM element.
+   *
+   * @param {TinyElement} el - The DOM element.
+   * @param {string} key - The key under which the data will be stored.
+   * @param {any} value - The value to store.
+   * @param {boolean} [isPrivate=false] - Whether to store the data in the private store.
+   * @returns {void}
+   */
+  static setData(el, key, value, isPrivate = false) {
+    const data = TinyHtml._dataSelector[!isPrivate ? 'public' : 'private']('setData', el);
+    if (typeof key !== 'string') throw new TypeError('The key must be a string.');
+    data[key] = value;
+  }
+
+  /**
+   * Stores a value associated with a specific key for a DOM element.
+   *
+   * @param {string} key - The key under which the data will be stored.
+   * @param {any} value - The value to store.
+   * @param {boolean} [isPrivate=false] - Whether to store the data in the private store.
+   * @returns {void}
+   */
+  setData(key, value, isPrivate = false) {
+    return TinyHtml.setData(this, key, value, isPrivate);
+  }
+
+  //////////////////////////////////////////////////////
+
+  /**
+   * Get the sibling element in a given direction.
+   *
+   * @param {TinyNode} el
+   * @param {"previousSibling"|"nextSibling"} direction
+   * @param {string} where
+   * @returns {ChildNode|null}
+   * @readonly
+   */
+  static _getSibling(el, direction, where) {
+    /** @type {Node|null} */
+    let newCurrent = TinyHtml._preNodeElemWithNull(el, where);
+    while (newCurrent && (newCurrent = newCurrent[direction]) && newCurrent.nodeType !== 1) {}
+    if (!(newCurrent instanceof Node)) return null;
+    return /** @type {ChildNode} */ (newCurrent);
+  }
+
+  /**
+   * Get all sibling elements excluding the given one.
+   *
+   * @param {Node|null} start
+   * @param {Node|null} [exclude]
+   * @returns {ChildNode[]}
+   * @readonly
+   */
+  static _getSiblings(start, exclude) {
+    /** @type {Node|null} */
+    let st = start;
+    const siblings = [];
+    for (; st; st = st.nextSibling) {
+      if (st.nodeType === 1 && st !== exclude) {
+        siblings.push(st);
+      }
+    }
+    return /** @type {ChildNode[]} */ (siblings);
+  }
+
+  /**
+   * Traverse DOM in a direction collecting elements.
+   *
+   * @param {TinyNode} el
+   * @param {"parentNode"|"nextSibling"|"previousSibling"} direction
+   * @param {TinyNode|string} [until]
+   * @param {string} [where='domDir']
+   * @returns {ChildNode[]}
+   */
+  static domDir(el, direction, until, where = 'domDir') {
+    if (typeof direction !== 'string') throw new TypeError('The "direction" must be a string.');
+    let elem = TinyHtml._preNodeElemWithNull(el, where);
+    const matched = [];
+    // @ts-ignore
+    while (elem && (elem = elem[direction])) {
+      if (elem.nodeType !== 1) continue;
+      if (
+        until &&
+        (typeof until === 'string'
+          ? // @ts-ignore
+            elem.matches(until)
+          : elem === until)
+      )
+        break;
+      matched.push(elem);
+    }
+    return /** @type {ChildNode[]} */ (matched);
+  }
+
+  /**
+   * Returns the direct parent node of the given element, excluding document fragments.
+   *
+   * @param {TinyNode} el - The DOM node to find the parent of.
+   * @returns {ParentNode|null} The parent node or null if not found.
+   */
+  static parent(el) {
+    let elem = TinyHtml._preNodeElemWithNull(el, 'parent');
+    const parent = elem ? elem.parentNode : null;
+    return parent && parent.nodeType !== 11 ? parent : null;
+  }
+
+  /**
+   * Returns the direct parent node of the given element, excluding document fragments.
+   *
+   * @returns {ParentNode|null} The parent node or null if not found.
+   */
+  parent() {
+    return TinyHtml.parent(this);
+  }
+
+  /**
+   * Returns all ancestor nodes of the given element, optionally stopping before a specific ancestor.
+   *
+   * @param {TinyNode} el - The DOM node to start from.
+   * @param {TinyNode|string} [until] - A node or selector to stop before.
+   * @returns {ChildNode[]} An array of ancestor nodes.
+   */
+  static parents(el, until) {
+    return TinyHtml.domDir(el, 'parentNode', until, 'parents');
+  }
+
+  /**
+   * Returns all ancestor nodes of the given element, optionally stopping before a specific ancestor.
+   *
+   * @param {TinyNode|string} [until] - A node or selector to stop before.
+   * @returns {ChildNode[]} An array of ancestor nodes.
+   */
+  parents(until) {
+    return TinyHtml.parents(this, until);
+  }
+
+  /**
+   * Returns the next sibling of the given element.
+   *
+   * @param {TinyNode} el - The DOM node to start from.
+   * @returns {ChildNode|null} The next sibling or null if none found.
+   */
+  static next(el) {
+    return TinyHtml._getSibling(el, 'nextSibling', 'next');
+  }
+
+  /**
+   * Returns the next sibling of the given element.
+   *
+   * @returns {ChildNode|null} The next sibling or null if none found.
+   */
+  next() {
+    return TinyHtml.next(this);
+  }
+
+  /**
+   * Returns the previous sibling of the given element.
+   *
+   * @param {TinyNode} el - The DOM node to start from.
+   * @returns {ChildNode|null} The previous sibling or null if none found.
+   */
+  static prev(el) {
+    return TinyHtml._getSibling(el, 'previousSibling', 'prev');
+  }
+
+  /**
+   * Returns the previous sibling of the given element.
+   *
+   * @returns {ChildNode|null} The previous sibling or null if none found.
+   */
+  prev() {
+    return TinyHtml.prev(this);
+  }
+
+  /**
+   * Returns all next sibling nodes after the given element.
+   *
+   * @param {TinyNode} el - The DOM node to start from.
+   * @returns {ChildNode[]} An array of next sibling nodes.
+   */
+  static nextAll(el) {
+    return TinyHtml.domDir(el, 'nextSibling', undefined, 'nextAll');
+  }
+
+  /**
+   * Returns all next sibling nodes after the given element.
+   *
+   * @returns {ChildNode[]} An array of next sibling nodes.
+   */
+  nextAll() {
+    return TinyHtml.nextAll(this);
+  }
+
+  /**
+   * Returns all previous sibling nodes before the given element.
+   *
+   * @param {TinyNode} el - The DOM node to start from.
+   * @returns {ChildNode[]} An array of previous sibling nodes.
+   */
+  static prevAll(el) {
+    return TinyHtml.domDir(el, 'previousSibling', undefined, 'prevAll');
+  }
+
+  /**
+   * Returns all previous sibling nodes before the given element.
+   *
+   * @returns {ChildNode[]} An array of previous sibling nodes.
+   */
+  prevAll() {
+    return TinyHtml.prevAll(this);
+  }
+
+  /**
+   * Returns all next sibling nodes up to (but not including) the node matched by a selector or element.
+   *
+   * @param {TinyNode} el - The DOM node to start from.
+   * @param {TinyNode|string} [until] - A node or selector to stop before.
+   * @returns {ChildNode[]} An array of next sibling nodes.
+   */
+  static nextUntil(el, until) {
+    return TinyHtml.domDir(el, 'nextSibling', until, 'nextUtil');
+  }
+
+  /**
+   * Returns all next sibling nodes up to (but not including) the node matched by a selector or element.
+   *
+   * @param {TinyNode|string} [until] - A node or selector to stop before.
+   * @returns {ChildNode[]} An array of next sibling nodes.
+   */
+  nextUntil(until) {
+    return TinyHtml.nextUntil(this, until);
+  }
+
+  /**
+   * Returns all previous sibling nodes up to (but not including) the node matched by a selector or element.
+   *
+   * @param {TinyNode} el - The DOM node to start from.
+   * @param {TinyNode|string} [until] - A node or selector to stop before.
+   * @returns {ChildNode[]} An array of previous sibling nodes.
+   */
+  static prevUntil(el, until) {
+    return TinyHtml.domDir(el, 'previousSibling', until, 'prevUtil');
+  }
+
+  /**
+   * Returns all previous sibling nodes up to (but not including) the node matched by a selector or element.
+   *
+   * @param {TinyNode|string} [until] - A node or selector to stop before.
+   * @returns {ChildNode[]} An array of previous sibling nodes.
+   */
+  prevUntil(until) {
+    return TinyHtml.prevUntil(this, until);
+  }
+
+  /**
+   * Returns all sibling nodes of the given element, excluding itself.
+   *
+   * @param {TinyNode} el - The DOM node to find siblings of.
+   * @returns {ChildNode[]} An array of sibling nodes.
+   */
+  static siblings(el) {
+    const elem = TinyHtml._preNodeElemWithNull(el, 'siblings');
+    return TinyHtml._getSiblings(elem && elem.parentNode ? elem.parentNode.firstChild : null, elem);
+  }
+
+  /**
+   * Returns all sibling nodes of the given element, excluding itself.
+   *
+   * @returns {ChildNode[]} An array of sibling nodes.
+   */
+  siblings() {
+    return TinyHtml.siblings(this);
+  }
+
+  /**
+   * Returns all child nodes of the given element.
+   *
+   * @param {TinyNode} el - The DOM node to get children from.
+   * @returns {ChildNode[]} An array of child nodes.
+   */
+  static children(el) {
+    const elem = TinyHtml._preNodeElemWithNull(el, 'children');
+    return TinyHtml._getSiblings(elem ? elem.firstChild : null);
+  }
+
+  /**
+   * Returns all child nodes of the given element.
+   *
+   * @returns {ChildNode[]} An array of child nodes.
+   */
+  children() {
+    return TinyHtml.children(this);
+  }
+
+  /**
+   * Returns the contents of the given node. For `<template>` it returns its content; for `<iframe>`, the document.
+   *
+   * @param {TinyNode} el - The DOM node to get contents from.
+   * @returns {(ChildNode|DocumentFragment)[]|Document[]} An array of child nodes or the content document of an iframe.
+   */
+  static contents(el) {
+    const elem = TinyHtml._preNodeElemWithNull(el, 'contents');
+    if (
+      elem instanceof HTMLIFrameElement &&
+      elem.contentDocument != null &&
+      Object.getPrototypeOf(elem.contentDocument)
+    ) {
+      return [elem.contentDocument];
+    }
+
+    if (elem instanceof HTMLTemplateElement) {
+      return Array.from((elem.content || elem).childNodes);
+    }
+
+    if (elem) return Array.from(elem.childNodes);
+    return [];
+  }
+
+  /**
+   * Returns the contents of the given node. For `<template>` it returns its content; for `<iframe>`, the document.
+   *
+   * @returns {(ChildNode|DocumentFragment)[]|Document[]} An array of child nodes or the content document of an iframe.
+   */
+  contents() {
+    return TinyHtml.contents(this);
+  }
+
+  /**
+   * Clone each element.
+   * @param {TinyNode|TinyNode[]} el
+   * @param {boolean} [deep=true]
+   * @returns {Node[]}
+   */
+  static clone(el, deep = true) {
+    if (typeof deep !== 'boolean') throw new TypeError('The "deep" must be a boolean.');
+    return TinyHtml._preNodeElems(el, 'clone').map((el) => el.cloneNode(deep));
+  }
+
+  /**
+   * Clone the element.
+   * @param {boolean} [deep=true]
+   * @returns {Node}
+   */
+  clone(deep) {
+    return TinyHtml.clone(this, deep)[0];
+  }
+
+  /**
+   * Normalize and validate nodes before DOM insertion.
+   * Converts TinyNode-like structures or strings into DOM-compatible nodes.
+   * @type {(where: string, ...nodes: (TinyNode | TinyNode[] | string)[]) => (Node | string)[]}
+   * @readonly
+   */
+  static _appendChecker(where, ...nodes) {
+    const results = [];
+    const nds = [...nodes];
+    for (const index in nds) {
+      if (typeof nds[index] !== 'string') {
+        results.push(TinyHtml._preNodeElem(nds[index], where));
+      } else results.push(nds[index]);
+    }
+    return results;
+  }
+
+  /**
+   * Appends child elements or strings to the end of the target element(s).
+   *
+   * @param {TinyElement | TinyElement[]} el - The target element(s) to receive children.
+   * @param {...(TinyNode | TinyNode[] | string)} children - The child elements or text to append.
+   */
+  static append(el, ...children) {
+    const elem = TinyHtml._preElem(el, 'append');
+    elem.append(...TinyHtml._appendChecker('append', ...children));
+  }
+
+  /**
+   * Appends child elements or strings to the end of the target element(s).
+   *
+   * @param {...(TinyNode | TinyNode[] | string)} children - The child elements or text to append.
+   */
+  append(...children) {
+    return TinyHtml.append(this, ...children);
+  }
+
+  /**
+   * Prepends child elements or strings to the beginning of the target element(s).
+   *
+   * @param {TinyElement | TinyElement[]} el - The target element(s) to receive children.
+   * @param {...(TinyNode | TinyNode[] | string)} children - The child elements or text to prepend.
+   */
+  static prepend(el, ...children) {
+    const elem = TinyHtml._preElem(el, 'prepend');
+    elem.prepend(...TinyHtml._appendChecker('prepend', ...children));
+  }
+
+  /**
+   * Prepends child elements or strings to the beginning of the target element(s).
+   *
+   * @param {...(TinyNode | TinyNode[] | string)} children - The child elements or text to prepend.
+   */
+  prepend(...children) {
+    return TinyHtml.prepend(this, ...children);
+  }
+
+  /**
+   * Inserts elements or strings immediately before the target element(s) in the DOM.
+   *
+   * @param {TinyElement | TinyElement[]} el - The target element(s) before which new content is inserted.
+   * @param {...(TinyNode | TinyNode[] | string)} children - Elements or text to insert before the target.
+   */
+  static before(el, ...children) {
+    const elem = TinyHtml._preElem(el, 'before');
+    elem.before(...TinyHtml._appendChecker('before', ...children));
+  }
+
+  /**
+   * Inserts elements or strings immediately before the target element(s) in the DOM.
+   *
+   * @param {...(TinyNode | TinyNode[] | string)} children - Elements or text to insert before the target.
+   */
+  before(...children) {
+    return TinyHtml.before(this, ...children);
+  }
+
+  /**
+   * Inserts elements or strings immediately after the target element(s) in the DOM.
+   *
+   * @param {TinyElement | TinyElement[]} el - The target element(s) after which new content is inserted.
+   * @param {...(TinyNode | TinyNode[] | string)} children - Elements or text to insert after the target.
+   */
+  static after(el, ...children) {
+    const elem = TinyHtml._preElem(el, 'after');
+    elem.after(...TinyHtml._appendChecker('after', ...children));
+  }
+
+  /**
+   * Inserts elements or strings immediately after the target element(s) in the DOM.
+   *
+   * @param {...(TinyNode | TinyNode[] | string)} children - Elements or text to insert after the target.
+   */
+  after(...children) {
+    return TinyHtml.after(this, ...children);
+  }
+
+  /**
+   * Replaces the target element(s) in the DOM with new elements or text.
+   *
+   * @param {TinyElement | TinyElement[]} el - The element(s) to be replaced.
+   * @param {...(TinyNode | TinyNode[] | string)} newNodes - New elements or text to replace the target.
+   */
+  static replaceWith(el, ...newNodes) {
+    const elem = TinyHtml._preElem(el, 'replaceWith');
+    elem.replaceWith(...TinyHtml._appendChecker('replaceWith', ...newNodes));
+  }
+
+  /**
+   * Replaces the target element(s) in the DOM with new elements or text.
+   *
+   * @param {...(TinyNode | TinyNode[] | string)} newNodes - New elements or text to replace the target.
+   */
+  replaceWith(...newNodes) {
+    return TinyHtml.replaceWith(this, ...newNodes);
+  }
+
+  /**
+   * Appends the given element(s) to each target element in sequence.
+   *
+   * @param {TinyNode | TinyNode[]} el - The element(s) to append.
+   * @param {TinyNode | TinyNode[]} targets - Target element(s) where content will be appended.
+   */
+  static appendTo(el, targets) {
+    const elems = TinyHtml._preNodeElems(el, 'appendTo');
+    const tars = TinyHtml._preNodeElems(targets, 'appendTo');
+    tars.forEach((target, i) => {
+      elems.forEach((elem) =>
+        target.appendChild(i === tars.length - 1 ? elem : elem.cloneNode(true)),
+      );
+    });
+  }
+
+  /**
+   * Appends the given element(s) to each target element in sequence.
+   *
+   * @param {TinyNode | TinyNode[]} targets - Target element(s) where content will be appended.
+   */
+  appendTo(targets) {
+    return TinyHtml.appendTo(this, targets);
+  }
+
+  /**
+   * Prepends the given element(s) to each target element in sequence.
+   *
+   * @param {TinyElement | TinyElement[]} el - The element(s) to prepend.
+   * @param {TinyElement | TinyElement[]} targets - Target element(s) where content will be prepended.
+   */
+  static prependTo(el, targets) {
+    const elems = TinyHtml._preElems(el, 'prependTo');
+    const tars = TinyHtml._preElems(targets, 'prependTo');
+    tars.forEach((target, i) => {
+      elems
+        .slice()
+        .reverse()
+        .forEach((elem) => target.prepend(i === tars.length - 1 ? elem : elem.cloneNode(true)));
+    });
+  }
+
+  /**
+   * Prepends the given element(s) to each target element in sequence.
+   *
+   * @param {TinyElement | TinyElement[]} targets - Target element(s) where content will be prepended.
+   */
+  prependTo(targets) {
+    return TinyHtml.prependTo(this, targets);
+  }
+
+  /**
+   * Inserts the element before a child of a given target, or before the target itself.
+   *
+   * @param {TinyNode | TinyNode[]} el - The element(s) to insert.
+   * @param {TinyNode | TinyNode[]} target - The reference element where insertion happens.
+   * @param {TinyNode | TinyNode[] | null} [child=null] - Optional child to insert before, defaults to target.
+   */
+  static insertBefore(el, target, child = null) {
+    const elem = TinyHtml._preNodeElem(el, 'insertBefore');
+    const targ = TinyHtml._preNodeElem(target, 'insertBefore');
+    const childNode = TinyHtml._preNodeElemWithNull(child, 'insertBefore');
+    if (!targ.parentNode) throw new Error('');
+    targ.parentNode.insertBefore(elem, childNode || targ);
+  }
+
+  /**
+   * Inserts the element before a child of a given target, or before the target itself.
+   *
+   * @param {TinyNode | TinyNode[]} target - The reference element where insertion happens.
+   * @param {TinyNode | TinyNode[] | null} [child=null] - Optional child to insert before, defaults to target.
+   */
+  insertBefore(target, child) {
+    return TinyHtml.insertBefore(this, target, child);
+  }
+
+  /**
+   * Inserts the element after a child of a given target, or after the target itself.
+   *
+   * @param {TinyNode | TinyNode[]} el - The element(s) to insert.
+   * @param {TinyNode | TinyNode[]} target - The reference element where insertion happens.
+   * @param {TinyNode | TinyNode[] | null} [child=null] - Optional child to insert after, defaults to target.
+   */
+  static insertAfter(el, target, child = null) {
+    const elem = TinyHtml._preNodeElem(el, 'insertAfter');
+    const targ = TinyHtml._preNodeElem(target, 'insertBefore');
+    const childNode = TinyHtml._preNodeElemWithNull(child, 'insertBefore');
+    if (!targ.parentNode) throw new Error('');
+    targ.parentNode.insertBefore(elem, childNode || targ.nextSibling);
+  }
+
+  /**
+   * Inserts the element after a child of a given target, or after the target itself.
+   *
+   * @param {TinyNode | TinyNode[]} target - The reference element where insertion happens.
+   * @param {TinyNode | TinyNode[] | null} [child=null] - Optional child to insert after, defaults to target.
+   */
+  insertAfter(target, child) {
+    return TinyHtml.insertAfter(this, target, child);
+  }
+
+  /**
+   * Replaces all target elements with the provided element(s).
+   * If multiple targets exist, the inserted elements are cloned accordingly.
+   *
+   * @param {TinyNode | TinyNode[]} el - The new element(s) to insert.
+   * @param {TinyNode | TinyNode[]} targets - The elements to be replaced.
+   */
+  static replaceAll(el, targets) {
+    const elems = TinyHtml._preNodeElems(el, 'replaceAll');
+    const tars = TinyHtml._preNodeElems(targets, 'replaceAll');
+    tars.forEach((target, i) => {
+      const parent = target.parentNode;
+      elems.forEach((elem) => {
+        if (parent)
+          parent.replaceChild(i === tars.length - 1 ? elem : elem.cloneNode(true), target);
+      });
+    });
+  }
+
+  /**
+   * Replaces all target elements with the provided element(s).
+   * If multiple targets exist, the inserted elements are cloned accordingly.
+   *
+   * @param {TinyNode | TinyNode[]} targets - The elements to be replaced.
+   */
+  replaceAll(targets) {
+    return TinyHtml.replaceAll(this, targets);
+  }
+
+  //////////////////////////////////////////////////////
+
+  /**
+   * The target HTML element for instance-level operations.
+   * @type {ConstructorElValues}
+   */
+  #el;
+
+  /**
+   * Creates an instance of TinyHtml for a specific Element.
+   * Useful when you want to operate repeatedly on the same element using instance methods.
+   * @param {ConstructorElValues} el - The element to wrap and manipulate.
+   */
+  constructor(el) {
+    if (el instanceof TinyHtml)
+      throw new Error(
+        `[TinyHtml] You are trying to put a TinyHtml inside another TinyHtml in constructor.`,
+      );
+    if (!(el instanceof Element) && !(el instanceof Window) && !(el instanceof Document))
+      throw new Error(`[TinyHtml] Invalid Target in constructor.`);
+    this.#el = el;
+  }
+
+  /**
+   * Checks whether the given object is a window.
+   * @param {*} obj - The object to test.
+   * @returns {obj is Window} - True if it's a Window.
+   */
+  static isWindow(obj) {
+    return obj != null && obj === obj.window;
+  }
+
+  /////////////////////////////////////////////////////
+
+  /**
+   * Returns the full computed CSS styles for the given element.
+   *
+   * @param {TinyElement} el - The element to retrieve styles from.
+   * @returns {CSSStyleDeclaration} The computed style object for the element.
+   */
+  static css(el) {
+    const elem = TinyHtml._preElem(el, 'css');
+    return window.getComputedStyle(elem);
+  }
+
+  /**
+   * Returns the full computed CSS styles for the given element.
+   *
+   * @returns {CSSStyleDeclaration} The computed style object for the element.
+   */
+  css() {
+    return TinyHtml.css(this);
+  }
+
+  /**
+   * Returns the value of a specific computed CSS property from the given element as a string.
+   *
+   * @param {TinyElement} el - The element to retrieve the style property from.
+   * @param {string} prop - The name of the CSS property (camelCase or kebab-case).
+   * @returns {string|null} The value of the CSS property as a string, or null if not found or invalid.
+   */
+  static cssString(el, prop) {
+    const elem = TinyHtml._preElem(el, 'cssString');
+    if (typeof prop !== 'string') throw new TypeError('The prop must be a string.');
+    // @ts-ignore
+    const val = window.getComputedStyle(elem)[prop];
+    return typeof val === 'string' ? val : typeof val === 'number' ? val.toString() : null;
+  }
+
+  /**
+   * Returns the value of a specific computed CSS property from the given element as a string.
+   *
+   * @param {string} prop - The name of the CSS property (camelCase or kebab-case).
+   * @returns {string|null} The value of the CSS property as a string, or null if not found or invalid.
+   */
+  cssString(prop) {
+    return TinyHtml.cssString(this, prop);
+  }
+
+  /**
+   * Returns a subset of computed CSS styles based on the given list of properties.
+   *
+   * @param {TinyElement} el - The element to retrieve styles from.
+   * @param {string[]} prop - An array of CSS property names to retrieve.
+   * @returns {Partial<CSSStyleDeclaration>} An object containing the requested styles.
+   */
+  static cssList(el, prop) {
+    const elem = TinyHtml._preElem(el, 'cssList');
+    if (!Array.isArray(prop)) throw new TypeError('The prop must be an array of strings.');
+
+    const css = window.getComputedStyle(elem);
+    /** @type {Partial<CSSStyleDeclaration>} */
+    const result = {};
+
+    for (const p of prop) {
+      if (typeof p !== 'undefined') {
+        // @ts-ignore
+        result[p] = css.getPropertyValue(p);
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Returns a subset of computed CSS styles based on the given list of properties.
+   *
+   * @param {string[]} prop - An array of CSS property names to retrieve.
+   * @returns {Partial<CSSStyleDeclaration>} An object containing the requested styles.
+   */
+  cssList(prop) {
+    return TinyHtml.cssList(this, prop);
+  }
+
+  /**
+   * Returns the computed CSS float value of a property.
+   * @param {TinyElement} el - The element to inspect.
+   * @param {string} prop - The CSS property.
+   * @returns {number} - The parsed float value.
+   */
+  static cssFloat(el, prop) {
+    const elem = TinyHtml._preElem(el, 'cssFloat');
+    if (typeof prop !== 'string') throw new TypeError('The prop must be a string.');
+    // @ts-ignore
+    const val = window.getComputedStyle(elem)[prop];
+    return parseFloat(val) || 0;
+  }
+
+  /**
+   * Returns the computed CSS float value of a property.
+   * @param {string} prop - The CSS property.
+   * @returns {number} - The parsed float value.
+   */
+  cssFloat(prop) {
+    return TinyHtml.cssFloat(this, prop);
+  }
+
+  /**
+   * Returns computed float values of multiple CSS properties.
+   * @param {TinyElement} el - The element to inspect.
+   * @param {string[]} prop - An array of CSS properties.
+   * @returns {Record<string, number>} - Map of property to float value.
+   */
+  static cssFloats(el, prop) {
+    const elem = TinyHtml._preElem(el, 'cssFloats');
+    if (!Array.isArray(prop)) throw new TypeError('The prop must be an array of strings.');
+    const css = window.getComputedStyle(elem);
+    /** @type {Record<string, number>} */
+    const result = {};
+    for (const name of prop) {
+      // @ts-ignore
+      result[name] = parseFloat(css[name]) || 0;
+    }
+    return result;
+  }
+
+  /**
+   * Returns computed float values of multiple CSS properties.
+   * @param {string[]} prop - An array of CSS properties.
+   * @returns {Record<string, number>} - Map of property to float value.
+   */
+  cssFloats(prop) {
+    return TinyHtml.cssFloats(this, prop);
+  }
+
+  //////////////////////////////////////////////////////////////////////
+
+  /**
+   * Focus the element.
+   *
+   * @param {TinyHtmlElement} el - The element or a selector string.
+   */
+  static focus(el) {
+    const elem = TinyHtml._preHtmlElem(el, 'focus');
+    elem.focus();
+  }
+
+  /**
+   * Focus the element.
+   */
+  focus() {
+    return TinyHtml.focus(this);
+  }
+
+  /**
+   * Blur the element.
+   *
+   * @param {TinyHtmlElement} el - The element or a selector string.
+   */
+  static blur(el) {
+    const elem = TinyHtml._preHtmlElem(el, 'blur');
+    elem.blur();
+  }
+
+  /**
+   * Blur the element.
+   */
+  blur() {
+    return TinyHtml.blur(this);
+  }
+
+  //////////////////////////////////////////////////////////////////////
+
+  /**
+   * Sets the vertical scroll position of the window.
+   * @param {number} value - Sets the scroll position.
+   */
+  static setWinScrollTop(value) {
+    if (typeof value !== 'number') throw new TypeError('The value must be a number.');
+    window.scrollTo({ top: value });
+  }
+
+  /**
+   * Sets the horizontal scroll position of the window.
+   * @param {number} value - Sets the scroll position.
+   */
+  static setWinScrollLeft(value) {
+    if (typeof value !== 'number') throw new TypeError('The value must be a number.');
+    window.scrollTo({ left: value });
+  }
+
+  /**
+   * Gets the vertical scroll position of the window.
+   * @returns {number} - The current scroll top value.
+   */
+  static winScrollTop() {
+    return window.scrollY || document.documentElement.scrollTop;
+  }
+
+  /**
+   * Gets the horizontal scroll position of the window.
+   * @returns {number} - The current scroll left value.
+   */
+  static winScrollLeft() {
+    return window.scrollX || document.documentElement.scrollLeft;
+  }
+
+  /**
+   * Returns the current height of the viewport.
+   * @returns {number} - Viewport height in pixels.
+   */
+  static winInnerHeight() {
+    return window.innerHeight || document.documentElement.clientHeight;
+  }
+
+  /**
+   * Returns the current width of the viewport.
+   * @returns {number} - Viewport width in pixels.
+   */
+  static winInnerWidth() {
+    return window.innerWidth || document.documentElement.clientWidth;
+  }
+
+  /**
+   * Gets the width or height of an element based on the box model.
+   * @param {TinyElementAndWindow} el - The element or window.
+   * @param {"width"|"height"} type - Dimension type.
+   * @param {"content"|"padding"|"border"|"margin"} [extra='content'] - Box model context.
+   * @returns {number} - Computed dimension.
+   * @throws {TypeError} If `type` or `extra` is not a string.
+   */
+  static getDimension(el, type, extra = 'content') {
+    const elem = TinyHtml._preElemAndWindow(el, 'getDimension');
+    if (typeof type !== 'string') throw new TypeError('The type must be a string.');
+    if (typeof extra !== 'string') throw new TypeError('The extra must be a string.');
+
+    const name = type === 'width' ? 'Width' : 'Height';
+
+    if (TinyHtml.isWindow(elem)) {
+      return extra === 'margin'
+        ? // @ts-ignore
+          elem['inner' + name]
+        : // @ts-ignore
+          elem.document.documentElement['client' + name];
+    }
+    /** @type {Element} */
+    const elHtml = elem;
+
+    if (elHtml.nodeType === 9) {
+      // @ts-ignore
+      const doc = elHtml.documentElement;
+      return Math.max(
+        // @ts-ignore
+        elHtml.body['scroll' + name],
+        doc['scroll' + name],
+        // @ts-ignore
+        elHtml.body['offset' + name],
+        doc['offset' + name],
+        doc['client' + name],
+      );
+    }
+
+    let size = elHtml.getBoundingClientRect()[type];
+
+    /**
+     * Auxiliary function to add measures on one side and the other
+     * @param {string} prefix
+     */
+    function sumSides(prefix) {
+      if (type === 'width') {
+        return (
+          TinyHtml.cssFloat(elHtml, prefix + 'Left') + TinyHtml.cssFloat(elHtml, prefix + 'Right')
+        );
+      } else {
+        return (
+          TinyHtml.cssFloat(elHtml, prefix + 'Top') + TinyHtml.cssFloat(elHtml, prefix + 'Bottom')
+        );
+      }
+    }
+
+    switch (extra) {
+      case 'content':
+        // remove padding + border
+        size -= sumSides('padding');
+        size -= sumSides('border');
+        break;
+
+      case 'padding':
+        // remove border only (padding included in the bounding rect)
+        size -= sumSides('border');
+        break;
+
+      case 'border':
+        // bounding rect already includes border + padding, so do not move the size
+        break;
+
+      case 'margin':
+        // adds margin (margin is out of bounding rect)
+        size += sumSides('margin');
+        break;
+    }
+
+    return size;
+  }
+
+  /**
+   * Gets the width or height of an element based on the box model.
+   * @param {"width"|"height"} type - Dimension type.
+   * @param {"content"|"padding"|"border"|"margin"} extra - Box model context.
+   * @returns {number} - Computed dimension.
+   */
+  getDimension(type, extra) {
+    return TinyHtml.getDimension(this, type, extra);
+  }
+
+  /**
+   * Sets the height of the element.
+   * @param {TinyHtmlElement} el - Target element.
+   * @param {string|number} value - Height value.
+   * @throws {TypeError} If `value` is neither a string nor number.
+   */
+  static setHeight(el, value) {
+    const elem = TinyHtml._preHtmlElem(el, 'setHeight');
+    if (typeof value !== 'number' && typeof value !== 'string')
+      throw new TypeError('The value must be a string or number.');
+    elem.style.height = typeof value === 'number' ? `${value}px` : value;
+  }
+
+  /**
+   * Sets the height of the element.
+   * @param {string|number} value - Height value.
+   */
+  setHeight(value) {
+    return TinyHtml.setHeight(this, value);
+  }
+
+  /**
+   * Sets the width of the element.
+   * @param {TinyHtmlElement} el - Target element.
+   * @param {string|number} value - Width value.
+   * @throws {TypeError} If `value` is neither a string nor number.
+   */
+  static setWidth(el, value) {
+    const elem = TinyHtml._preHtmlElem(el, 'setWidth');
+    if (typeof value !== 'number' && typeof value !== 'string')
+      throw new TypeError('The value must be a string or number.');
+    elem.style.width = typeof value === 'number' ? `${value}px` : value;
+  }
+
+  /**
+   * Sets the width of the element.
+   * @param {string|number} value - Width value.
+   */
+  setWidth(value) {
+    return TinyHtml.setWidth(this, value);
+  }
+
+  /**
+   * Returns content box height.
+   * @param {TinyElementAndWindow} el - Target element.
+   * @returns {number}
+   */
+  static height(el) {
+    const elem = TinyHtml._preElemAndWindow(el, 'height');
+    return TinyHtml.getDimension(elem, 'height', 'content');
+  }
+
+  /**
+   * Returns content box height.
+   * @returns {number}
+   */
+  height() {
+    return TinyHtml.height(this);
+  }
+
+  /**
+   * Returns content box width.
+   * @param {TinyElementAndWindow} el - Target element.
+   * @returns {number}
+   */
+  static width(el) {
+    const elem = TinyHtml._preElemAndWindow(el, 'width');
+    return TinyHtml.getDimension(elem, 'width', 'content');
+  }
+
+  /**
+   * Returns content box width.
+   * @returns {number}
+   */
+  width() {
+    return TinyHtml.width(this);
+  }
+
+  /**
+   * Returns padding box height.
+   * @param {TinyElementAndWindow} el - Target element.
+   * @returns {number}
+   */
+  static innerHeight(el) {
+    const elem = TinyHtml._preElemAndWindow(el, 'innerHeight');
+    return TinyHtml.getDimension(elem, 'height', 'padding');
+  }
+
+  /**
+   * Returns padding box height.
+   * @returns {number}
+   */
+  innerHeight() {
+    return TinyHtml.innerHeight(this);
+  }
+
+  /**
+   * Returns padding box width.
+   * @param {TinyElementAndWindow} el - Target element.
+   * @returns {number}
+   */
+  static innerWidth(el) {
+    const elem = TinyHtml._preElemAndWindow(el, 'innerWidth');
+    return TinyHtml.getDimension(elem, 'width', 'padding');
+  }
+
+  /**
+   * Returns padding box width.
+   * @returns {number}
+   */
+  innerWidth() {
+    return TinyHtml.innerWidth(this);
+  }
+
+  /**
+   * Returns outer height of the element, optionally including margin.
+   * @param {TinyElementAndWindow} el - Target element.
+   * @param {boolean} [includeMargin=false] - Whether to include margin.
+   * @returns {number}
+   */
+  static outerHeight(el, includeMargin = false) {
+    if (typeof includeMargin !== 'boolean')
+      throw new TypeError('The "includeMargin" must be a boolean.');
+    const elem = TinyHtml._preElemAndWindow(el, 'outerHeight');
+    return TinyHtml.getDimension(elem, 'height', includeMargin ? 'margin' : 'border');
+  }
+
+  /**
+   * Returns outer height of the element, optionally including margin.
+   * @param {boolean} [includeMargin=false] - Whether to include margin.
+   * @returns {number}
+   */
+  outerHeight(includeMargin) {
+    return TinyHtml.outerHeight(this, includeMargin);
+  }
+
+  /**
+   * Returns outer width of the element, optionally including margin.
+   * @param {TinyElementAndWindow} el - Target element.
+   * @param {boolean} [includeMargin=false] - Whether to include margin.
+   * @returns {number}
+   */
+  static outerWidth(el, includeMargin = false) {
+    if (typeof includeMargin !== 'boolean')
+      throw new TypeError('The "includeMargin" must be a boolean.');
+    const elem = TinyHtml._preElemAndWindow(el, 'outerWidth');
+    return TinyHtml.getDimension(elem, 'width', includeMargin ? 'margin' : 'border');
+  }
+
+  /**
+   * Returns outer width of the element, optionally including margin.
+   * @param {boolean} [includeMargin=false] - Whether to include margin.
+   * @returns {number}
+   */
+  outerWidth(includeMargin) {
+    return TinyHtml.outerWidth(this, includeMargin);
+  }
+
+  //////////////////////////////////////////////////
+
+  /**
+   * 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);
+  }
+
+  /**
+   * 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);
+  }
+
+  /**
+   * Sets the vertical scroll position.
+   * @param {TinyElementAndWindow|TinyElementAndWindow[]} el - Element or window.
+   * @param {number} value - Scroll top value.
+   */
+  static setScrollTop(el, value) {
+    if (typeof value !== 'number') throw new TypeError('ScrollTop value must be a number.');
+    TinyHtml._preElemsAndWindow(el, 'setScrollTop').forEach((elem) => {
+      if (TinyHtml.isWindow(elem)) {
+        elem.scrollTo(elem.pageXOffset, value);
+      } else if (elem.nodeType === 9) {
+        // @ts-ignore
+        elem.defaultView.scrollTo(elem.defaultView.pageXOffset, value);
+      } else {
+        elem.scrollTop = value;
+      }
+    });
+  }
+
+  /**
+   * Sets the vertical scroll position.
+   * @param {number} value - Scroll top value.
+   */
+  setScrollTop(value) {
+    return TinyHtml.setScrollTop(this, value);
+  }
+
+  /**
+   * Sets the horizontal scroll position.
+   * @param {TinyElementAndWindow|TinyElementAndWindow[]} el - Element or window.
+   * @param {number} value - Scroll left value.
+   */
+  static setScrollLeft(el, value) {
+    if (typeof value !== 'number') throw new TypeError('ScrollLeft value must be a number.');
+    TinyHtml._preElemsAndWindow(el, 'setScrollLeft').forEach((elem) => {
+      if (TinyHtml.isWindow(elem)) {
+        elem.scrollTo(value, elem.pageYOffset);
+      } else if (elem.nodeType === 9) {
+        // @ts-ignore
+        elem.defaultView.scrollTo(value, elem.defaultView.pageYOffset);
+      } else {
+        elem.scrollLeft = value;
+      }
+    });
+  }
+
+  /**
+   * Sets the horizontal scroll position.
+   * @param {number} value - Scroll left value.
+   */
+  setScrollLeft(value) {
+    return TinyHtml.setScrollLeft(this, value);
+  }
+
+  /**
+   * Returns the total border width and individual sides from `border{Side}Width` CSS properties.
+   *
+   * @param {TinyElement} el - The target DOM element.
+   * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) border widths, and each side individually.
+   */
+  static borderWidth(el) {
+    const elem = TinyHtml._preElem(el, 'borderWidth');
+    const {
+      borderLeftWidth: left,
+      borderRightWidth: right,
+      borderTopWidth: top,
+      borderBottomWidth: bottom,
+    } = TinyHtml.cssFloats(elem, [
+      'borderLeftWidth',
+      'borderRightWidth',
+      'borderTopWidth',
+      'borderBottomWidth',
+    ]);
+    const x = left + right;
+    const y = top + bottom;
+
+    return { x, y, left, right, top, bottom };
+  }
+
+  /**
+   * Returns the total border width and individual sides from `border{Side}Width` CSS properties.
+   *
+   * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) border widths, and each side individually.
+   */
+  borderWidth() {
+    return TinyHtml.borderWidth(this);
+  }
+
+  /**
+   * Returns the total border size and individual sides from `border{Side}` CSS properties.
+   *
+   * @param {TinyElement} el - The target DOM element.
+   * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) border sizes, and each side individually.
+   */
+  static border(el) {
+    const elem = TinyHtml._preElem(el, 'border');
+    const {
+      borderLeft: left,
+      borderRight: right,
+      borderTop: top,
+      borderBottom: bottom,
+    } = TinyHtml.cssFloats(elem, ['borderLeft', 'borderRight', 'borderTop', 'borderBottom']);
+    const x = left + right;
+    const y = top + bottom;
+
+    return { x, y, left, right, top, bottom };
+  }
+
+  /**
+   * Returns the total border size and individual sides from `border{Side}` CSS properties.
+   *
+   * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) border sizes, and each side individually.
+   */
+  border() {
+    return TinyHtml.border(this);
+  }
+
+  /**
+   * Returns the total margin and individual sides from `margin{Side}` CSS properties.
+   *
+   * @param {TinyElement} el - The target DOM element.
+   * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) margins, and each side individually.
+   */
+  static margin(el) {
+    const elem = TinyHtml._preElem(el, 'margin');
+    const {
+      marginLeft: left,
+      marginRight: right,
+      marginTop: top,
+      marginBottom: bottom,
+    } = TinyHtml.cssFloats(elem, ['marginLeft', 'marginRight', 'marginTop', 'marginBottom']);
+    const x = left + right;
+    const y = top + bottom;
+
+    return { x, y, left, right, top, bottom };
+  }
+
+  /**
+   * Returns the total margin and individual sides from `margin{Side}` CSS properties.
+   *
+   * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) margins, and each side individually.
+   */
+  margin() {
+    return TinyHtml.margin(this);
+  }
+
+  /**
+   * Returns the total padding and individual sides from `padding{Side}` CSS properties.
+   *
+   * @param {TinyElement} el - The target DOM element.
+   * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) paddings, and each side individually.
+   */
+  static padding(el) {
+    const elem = TinyHtml._preElem(el, 'padding');
+    const {
+      paddingLeft: left,
+      paddingRight: right,
+      paddingTop: top,
+      paddingBottom: bottom,
+    } = TinyHtml.cssFloats(elem, ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']);
+    const x = left + right;
+    const y = top + bottom;
+
+    return { x, y, left, right, top, bottom };
+  }
+
+  /**
+   * Returns the total padding and individual sides from `padding{Side}` CSS properties.
+   *
+   * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) paddings, and each side individually.
+   */
+  padding() {
+    return TinyHtml.padding(this);
+  }
+
+  /////////////////////////////////////////////
+
+  /**
+   * Adds one or more CSS class names to the element.
+   * @type {(el: TinyElement|TinyElement[], ...tokens: string[]) => void} - One or more class names to add.
+   */
+  static addClass(el, ...args) {
+    TinyHtml._preElems(el, 'addClass').forEach((elem) => elem.classList.add(...args));
+  }
+
+  /**
+   * Adds one or more CSS class names to the element.
+   * @type {(...tokens: string[]) => void} - One or more class names to add.
+   */
+  addClass(...args) {
+    return TinyHtml.addClass(this, ...args);
+  }
+
+  /**
+   * Removes one or more CSS class names from the element.
+   * @type {(el: TinyElement|TinyElement[], ...tokens: string[]) => void} - One or more class names to remove.
+   */
+  static removeClass(el, ...args) {
+    TinyHtml._preElems(el, 'removeClass').forEach((elem) => elem.classList.remove(...args));
+  }
+
+  /**
+   * Removes one or more CSS class names from the element.
+   * @type {(...tokens: string[]) => void} - One or more class names to remove.
+   */
+  removeClass(...args) {
+    return TinyHtml.removeClass(this, ...args);
+  }
+
+  /**
+   * Replaces an existing class name with a new one.
+   * @param {TinyElement|TinyElement[]} el - Target element.
+   * @param {string} token - The class name to be replaced.
+   * @param {string} newToken - The new class name to apply.
+   * @returns {boolean[]} Whether the replacement was successful.
+   * @throws {TypeError} If either argument is not a string.
+   */
+  static replaceClass(el, token, newToken) {
+    if (typeof token !== 'string') throw new TypeError('The "token" parameter must be a string.');
+    if (typeof newToken !== 'string')
+      throw new TypeError('The "newToken" parameter must be a string.');
+    /** @type {boolean[]} */
+    const result = [];
+    TinyHtml._preElems(el, 'replaceClass').forEach((elem) =>
+      result.push(elem.classList.replace(token, newToken)),
+    );
+    return result;
+  }
+
+  /**
+   * Replaces an existing class name with a new one.
+   * @param {string} token - The class name to be replaced.
+   * @param {string} newToken - The new class name to apply.
+   * @returns {boolean} Whether the replacement was successful.
+   * @throws {TypeError} If either argument is not a string.
+   */
+  replaceClass(token, newToken) {
+    return TinyHtml.replaceClass(this, token, newToken)[0];
+  }
+
+  /**
+   * Returns the class name at the specified index.
+   * @param {TinyElement} el - Target element.
+   * @param {number} index - The index of the class name.
+   * @returns {string|null} The class name at the index or null if not found.
+   * @throws {TypeError} If the index is not a number.
+   */
+  static classItem(el, index) {
+    const elem = TinyHtml._preElem(el, 'classItem');
+    if (typeof index !== 'number') throw new TypeError('The "index" parameter must be a number.');
+    return elem.classList.item(index);
+  }
+
+  /**
+   * Returns the class name at the specified index.
+   * @param {number} index - The index of the class name.
+   * @returns {string|null} The class name at the index or null if not found.
+   * @throws {TypeError} If the index is not a number.
+   */
+  classItem(index) {
+    return TinyHtml.classItem(this, index);
+  }
+
+  /**
+   * Toggles a class name on the element with an optional force boolean.
+   * @param {TinyElement|TinyElement[]} el - Target element.
+   * @param {string} token - The class name to toggle.
+   * @param {boolean} [force] - If true, adds the class; if false, removes it.
+   * @returns {boolean[]} Whether the class is present after the toggle.
+   * @throws {TypeError} If token is not a string or force is not a boolean.
+   */
+  static toggleClass(el, token, force) {
+    if (typeof token !== 'string') throw new TypeError('The "token" parameter must be a string.');
+    if (typeof force !== 'undefined' && typeof force !== 'boolean')
+      throw new TypeError('The "force" parameter must be a boolean.');
+    /** @type {boolean[]} */
+    const result = [];
+    TinyHtml._preElems(el, 'toggleClass').forEach((elem) =>
+      result.push(elem.classList.toggle(token, force)),
+    );
+    return result;
+  }
+
+  /**
+   * Toggles a class name on the element with an optional force boolean.
+   * @param {string} token - The class name to toggle.
+   * @param {boolean} force - If true, adds the class; if false, removes it.
+   * @returns {boolean} Whether the class is present after the toggle.
+   * @throws {TypeError} If token is not a string or force is not a boolean.
+   */
+  toggleClass(token, force) {
+    return TinyHtml.toggleClass(this, token, force)[0];
+  }
+
+  /**
+   * Checks if the element contains the given class name.
+   * @param {TinyElement} el - Target element.
+   * @param {string} token - The class name to check.
+   * @returns {boolean} True if the class is present, false otherwise.
+   * @throws {TypeError} If token is not a string.
+   */
+  static hasClass(el, token) {
+    const elem = TinyHtml._preElem(el, 'hasClass');
+    if (typeof token !== 'string') throw new TypeError('The "token" parameter must be a string.');
+    return elem.classList.contains(token);
+  }
+
+  /**
+   * Checks if the element contains the given class name.
+   * @param {string} token - The class name to check.
+   * @returns {boolean} True if the class is present, false otherwise.
+   * @throws {TypeError} If token is not a string.
+   */
+  hasClass(token) {
+    return TinyHtml.hasClass(this, token);
+  }
+
+  /**
+   * Returns the number of classes applied to the element.
+   * @param {TinyElement} el - Target element.
+   * @returns {number} The number of classes.
+   */
+  static classLength(el) {
+    const elem = TinyHtml._preElem(el, 'classLength');
+    return elem.classList.length;
+  }
+
+  /**
+   * Returns the number of classes applied to the element.
+   * @returns {number} The number of classes.
+   */
+  classLength() {
+    return TinyHtml.classLength(this);
+  }
+
+  /**
+   * Returns all class names as an array of strings.
+   * @param {TinyElement} el - Target element.
+   * @returns {string[]} An array of class names.
+   */
+  static classList(el) {
+    const elem = TinyHtml._preElem(el, 'classList');
+    return elem.classList.values().toArray();
+  }
+
+  /**
+   * Returns all class names as an array of strings.
+   * @returns {string[]} An array of class names.
+   */
+  classList() {
+    return TinyHtml.classList(this);
+  }
+
+  /////////////////////////////////////////
+
+  /**
+   * Returns the tag name of the element.
+   * @param {TinyElement} el - Target element.
+   * @returns {string} The tag name in uppercase.
+   */
+  static tagName(el) {
+    const elem = TinyHtml._preElem(el, 'tagName');
+    return elem.tagName;
+  }
+
+  /**
+   * Returns the tag name of the element.
+   * @returns {string} The tag name in uppercase.
+   */
+  tagName() {
+    return TinyHtml.tagName(this);
+  }
+
+  /**
+   * Returns the ID of the element.
+   * @param {TinyElement} el - Target element.
+   * @returns {string} The element's ID.
+   */
+  static id(el) {
+    const elem = TinyHtml._preElem(el, 'id');
+    return elem.id;
+  }
+
+  /**
+   * Returns the ID of the element.
+   * @returns {string} The element's ID.
+   */
+  id() {
+    return TinyHtml.id(this);
+  }
+
+  /**
+   * Returns the text content of the element.
+   * @param {TinyElement} el - Target element.
+   * @returns {string|null} The text content or null if none.
+   */
+  static text(el) {
+    const elem = TinyHtml._preElem(el, 'text');
+    return elem.textContent;
+  }
+
+  /**
+   * Returns the text content of the element.
+   * @returns {string|null} The text content or null if none.
+   */
+  text() {
+    return TinyHtml.text(this);
+  }
+
+  /**
+   * Set text content of elements.
+   * @param {TinyElement|TinyElement[]} el
+   * @param {string} value
+   */
+  static setText(el, value) {
+    if (typeof value !== 'string') throw new Error('Value is not a valid string.');
+    TinyHtml._preElems(el, 'setText').forEach((el) => (el.textContent = value));
+  }
+
+  /**
+   * Set text content of the element.
+   * @param {string} value
+   */
+  setText(value) {
+    return TinyHtml.setText(this, value);
+  }
+
+  /**
+   * Remove all child nodes from each element.
+   * @param {TinyElement|TinyElement[]} el
+   */
+  static empty(el) {
+    TinyHtml._preElems(el, 'empty').forEach((el) => (el.textContent = ''));
+  }
+
+  /**
+   * Remove all child nodes of the element.
+   */
+  empty() {
+    return TinyHtml.empty(this);
+  }
+
+  /**
+   * Get the innerHTML of the element.
+   * @param {TinyElement|TinyElement[]} el
+   * @returns {string}
+   */
+  static html(el) {
+    const elem = TinyHtml._preElem(el, 'html');
+    return elem.innerHTML;
+  }
+
+  /**
+   * Get the innerHTML of the element.
+   * @returns {string}
+   */
+  html() {
+    return TinyHtml.html(this);
+  }
+
+  /**
+   * Set the innerHTML of each element.
+   * @param {TinyElement|TinyElement[]} el
+   * @param {string} value
+   */
+  static setHtml(el, value) {
+    if (typeof value !== 'string') throw new Error('Value is not a valid string.');
+    TinyHtml._preElems(el, 'setHtml').forEach((el) => (el.innerHTML = value));
+  }
+
+  /**
+   * Set the innerHTML of the element.
+   * @param {string} value
+   */
+  setHtml(value) {
+    return TinyHtml.setHtml(this, value);
+  }
+
+  /** @readonly */
+  static _valHooks = {
+    option: {
+      /**
+       * @param {HTMLOptionElement} elem
+       * @returns {string|null}
+       */
+      get: (elem) => {
+        const val = elem.getAttribute('value');
+        return val != null ? val : elem.textContent;
+      },
+    },
+
+    select: {
+      /**
+       * @param {HTMLSelectElement} elem
+       * @returns {(string | null)[] | string | null}
+       */
+      get: (elem) => {
+        const options = elem.options;
+        const index = elem.selectedIndex;
+        const isSingle = elem.type === 'select-one';
+        const max = isSingle ? index + 1 : options.length;
+
+        /** @type {(string | null)[] | null} */
+        const values = [];
+        let i = index < 0 ? max : isSingle ? index : 0;
+
+        for (; i < max; i++) {
+          const option = options[i];
+          /** @type {HTMLSelectElement|null} */
+          // @ts-ignore
+          const parentNode = option.parentNode;
+          if (
+            (option.selected || i === index) &&
+            !option.disabled &&
+            (!parentNode || !parentNode.disabled || parentNode.tagName !== 'OPTGROUP')
+          ) {
+            const val = TinyHtml._valHooks.option.get(option);
+            if (isSingle) return val;
+            values.push(val);
+          }
+        }
+
+        return values;
+      },
+
+      /**
+       * @param {HTMLSelectElement} elem
+       * @param {string[]|string} value
+       */
+      set: (elem, value) => {
+        const options = elem.options;
+        const values = Array.isArray(value) ? value.map(String) : [String(value)];
+        let optionSet = false;
+
+        for (let i = 0; i < options.length; i++) {
+          const option = options[i];
+          const optionVal = TinyHtml._valHooks.option.get(option);
+          if (typeof optionVal === 'string' && (option.selected = values.includes(optionVal))) {
+            optionSet = true;
+          }
+        }
+
+        if (!optionSet) {
+          elem.selectedIndex = -1;
+        }
+
+        return values;
+      },
+    },
+
+    radio: {
+      /**
+       * @param {HTMLInputElement} elem
+       * @returns {string}
+       */
+      get(elem) {
+        return elem.checked ? 'on' : 'off';
+      },
+      /**
+       * @param {HTMLInputElement} elem
+       * @param {string[]} value
+       */
+      set(elem, value) {
+        if (typeof value === 'boolean') {
+          const label = elem.closest('label');
+          if (value && label) {
+            const otherRadios = label.querySelectorAll('input[type="radio"]');
+            otherRadios.forEach((otherRadio) => {
+              if (otherRadio instanceof HTMLInputElement && otherRadio !== elem)
+                otherRadio.checked = false;
+            });
+          }
+          elem.checked = value;
+          return value;
+        }
+      },
+    },
+
+    checkbox: {
+      /**
+       * @param {HTMLInputElement} elem
+       * @returns {string}
+       */
+      get(elem) {
+        return elem.checked ? 'on' : 'off';
+      },
+      /**
+       * @param {HTMLInputElement} elem
+       * @param {boolean} value
+       */
+      set(elem, value) {
+        if (typeof value === 'boolean') {
+          elem.checked = value;
+          return value;
+        }
+      },
+    },
+  };
+
+  /**
+   * Sets the value of the current HTML value element (input, select, textarea, etc.).
+   * Accepts strings, numbers, booleans or arrays of these values, or a callback function that computes them.
+   *
+   * @param {TinyInputElement|TinyInputElement[]} el - Target element.
+   * @param {SetValueList|((el: InputElement, val: SetValueList) => SetValueList)} value - The value to assign or a function that returns it.
+   * @throws {Error} If the computed value is not a valid string or boolean.
+   */
+  static setVal(el, value) {
+    TinyHtml._preInputElems(el, 'setVal').forEach((elem) => {
+      /**
+       * @param {SetValueBase[]} array
+       * @param {(v: SetValueBase, i: number) => SetValueBase} callback
+       */
+      const mapArray = (array, callback) => {
+        const result = [];
+        for (let i = 0; i < array.length; i++) {
+          result.push(callback(array[i], i));
+        }
+        return result;
+      };
+
+      if (elem.nodeType !== 1) return;
+      /** @type {SetValueList} */
+      let valToSet = typeof value === 'function' ? value(elem, TinyHtml.val(elem)) : value;
+
+      if (valToSet == null) {
+        valToSet = '';
+      } else if (typeof valToSet === 'number') {
+        valToSet = String(valToSet);
+      } else if (Array.isArray(valToSet)) {
+        valToSet = mapArray(valToSet, (v) => (v == null ? '' : String(v)));
+      }
+
+      // @ts-ignore
+      const hook = TinyHtml._valHooks[elem.type] || TinyHtml._valHooks[elem.nodeName.toLowerCase()];
+      if (
+        !hook ||
+        typeof hook.set !== 'function' ||
+        hook.set(elem, valToSet, 'value') === undefined
+      ) {
+        if (typeof valToSet !== 'string' && typeof valToSet !== 'boolean')
+          throw new Error(`Invalid setValue "${typeof valToSet}" value.`);
+        if (typeof valToSet === 'string') elem.value = valToSet;
+      }
+    });
+  }
+
+  /**
+   * Sets the value of the current HTML value element (input, select, textarea, etc.).
+   * Accepts strings, numbers, booleans or arrays of these values, or a callback function that computes them.
+   *
+   * @param {SetValueList|((el: InputElement, val: SetValueList) => SetValueList)} value - The value to assign or a function that returns it.
+   * @throws {Error} If the computed value is not a valid string or boolean.
+   */
+  setVal(value) {
+    return TinyHtml.setVal(this, value);
+  }
+
+  /**
+   * Maps value types to their corresponding getter functions.
+   * Each function extracts a value of a specific type from a compatible HTMLInputElement.
+   * @readonly
+   */
+  static _valTypes = {
+    /**
+     * Gets the string value from any HTMLInputElement.
+     * @type {(elem: HTMLInputElement) => string}
+     */
+    string: (elem) => elem.value,
+
+    /**
+     * Gets the value as a Date object from supported input types.
+     * Valid only for types: "date", "datetime-local", "month", "time", "week".
+     * Returns `null` if the field is empty or invalid.
+     * @type {(elem: HTMLInputElement & { type: "date" | "datetime-local" | "month" | "time" | "week" }) => Date | null}
+     */
+    date: (elem) => elem.valueAsDate,
+
+    /**
+     * Gets the numeric value from supported input types.
+     * Valid for types: "number", "range", "date", "time".
+     * Returns `NaN` if the value is invalid or empty.
+     * @type {(elem: HTMLInputElement & { type: "number" | "range" | "date" | "time" }) => number}
+     */
+    number: (elem) => elem.valueAsNumber,
+  };
+
+  /**
+   * Gets the value of an input element according to the specified type.
+   *
+   * @param {InputElement} elem - The input element to extract the value from.
+   * @param {GetValueTypes} type - The type of value to retrieve ("string", "date", or "number").
+   * @param {string} where - The context/method name using this validation.
+   * @returns {any} The extracted value, depending on the type.
+   * @throws {Error} If the element is not an HTMLInputElement or if the type handler is invalid.
+   * @readonly
+   */
+  static _getValByType(elem, type, where) {
+    if (typeof type !== 'string') throw new TypeError('The "type" must be a string.');
+    if (typeof where !== 'string') throw new TypeError('The "where" must be a string.');
+    if (!(elem instanceof HTMLInputElement))
+      throw new Error(`Provided element is not an HTMLInputElement in ${where}().`);
+    if (typeof TinyHtml._valTypes[type] !== 'function')
+      throw new Error(`No handler found for type "${type}" in ${where}().`);
+    // @ts-ignore
+    return TinyHtml._valTypes[type](elem);
+  }
+
+  /**
+   * Retrieves the raw value from the HTML input element.
+   * If a custom value hook exists, it will be used first.
+   *
+   * @param {TinyInputElement} el - Target element.
+   * @param {GetValueTypes} type - The type of value to retrieve ("string", "date", or "number").
+   * @param {string} where - The context/method name using this validation.
+   * @returns {any} The raw value retrieved from the element or hook.
+   * @readonly
+   */
+  static _val(el, where, type) {
+    const elem = TinyHtml._preInputElem(el, where);
+    // @ts-ignore
+    const hook = TinyHtml._valHooks[elem.type] || TinyHtml._valHooks[elem.nodeName.toLowerCase()];
+    if (hook && typeof hook.get === 'function') {
+      const ret = hook.get(elem, 'value', type);
+      if (ret !== undefined) return typeof ret === 'string' ? ret.replace(/\r/g, '') : ret;
+    }
+
+    return TinyHtml._getValByType(elem, type, where);
+  }
+
+  /**
+   * Retrieves the raw value from the HTML input element.
+   * If a custom value hook exists, it will be used first.
+   *
+   * @param {GetValueTypes} type - The type of value to retrieve ("string", "date", or "number").
+   * @param {string} where - The context/method name using this validation.
+   * @returns {any} The raw value retrieved from the element or hook.
+   * @readonly
+   */
+  _val(where, type) {
+    return TinyHtml._val(this, where, type);
+  }
+
+  /**
+   * Gets the value of the current HTML value element.
+   *
+   * @param {TinyInputElement} el - Target element.
+   * @returns {SetValueList} The normalized value, with carriage returns removed.
+   */
+  static val(el) {
+    return /** @type {SetValueList} */ (TinyHtml._val(el, 'val', 'string'));
+  }
+
+  /**
+   * Gets the value of the current HTML value element.
+   *
+   * @returns {SetValueList} The normalized value, with carriage returns removed.
+   */
+  val() {
+    return TinyHtml.val(this);
+  }
+
+  /**
+   * Gets the text of the current HTML value element (for text).
+   *
+   * @param {TinyInputElement} el - Target element.
+   * @returns {string} The text value.
+   * @throws {Error} If the element is not a string value.
+   */
+  static valTxt(el) {
+    /** @type {string} */
+    const ret = TinyHtml._val(el, 'valTxt', 'string');
+    if (typeof ret !== 'string' && ret !== null) throw new Error('Value is not a valid string.');
+    return ret == null ? '' : typeof ret === 'string' ? ret.replace(/\r/g, '') : ret;
+  }
+
+  /**
+   * Gets the text of the current HTML value element (for text).
+   *
+   * @returns {string} The text value.
+   * @throws {Error} If the element is not a string value.
+   */
+  valTxt() {
+    return TinyHtml.valTxt(this);
+  }
+
+  /**
+   * Internal helper to get a value from an input expected to return an array.
+   *
+   * @param {TinyInputElement} el - Target element.
+   * @param {string} where - The method name or context using this validation (for error reporting).
+   * @param {GetValueTypes} type - The type of value to retrieve ("string", "date", or "number").
+   * @returns {SetValueBase[]} - The validated value as an array.
+   * @throws {Error} If the returned value is not an array.
+   * @readonly
+   */
+  static _valArr(el, where, type) {
+    /** @type {SetValueBase[]} */
+    const ret = TinyHtml._val(el, where, type);
+    if (!Array.isArray(ret)) throw new Error(`Value expected an array but got ${typeof ret}.`);
+    return ret;
+  }
+
+  /**
+   * Internal helper to get a value from an input expected to return an array.
+   *
+   * @param {string} where - The method name or context using this validation (for error reporting).
+   * @param {GetValueTypes} type - The type of value to retrieve ("string", "date", or "number").
+   * @returns {SetValueBase[]} - The validated value as an array.
+   * @throws {Error} If the returned value is not an array.
+   * @readonly
+   */
+  _valArr(where, type) {
+    return TinyHtml._valArr(this, where, type);
+  }
+
+  /**
+   * Gets the raw value as a generic array of the current HTML value element (for select).
+   *
+   * @param {TinyInputElement} el - Target element.
+   * @returns {SetValueBase[]} - The value cast as a generic array.
+   * @throws {Error} If the value is not a valid array.
+   */
+  static valArr(el) {
+    return TinyHtml._valArr(el, 'valArr', 'string');
+  }
+
+  /**
+   * Gets the raw value as a generic array of the current HTML value element (for select).
+   *
+   * @returns {SetValueBase[]} - The value cast as a generic array.
+   * @throws {Error} If the value is not a valid array.
+   */
+  valArr() {
+    return TinyHtml.valArr(this);
+  }
+
+  /**
+   * Gets the current value parsed as a number (for number/text).
+   *
+   * @param {TinyInputElement} el - Target element.
+   * @returns {number} The numeric value.
+   * @throws {Error} If the element is not a number-compatible input or value is NaN.
+   */
+  static valNb(el) {
+    const elem = TinyHtml._preInputElem(el, 'valNb');
+    if (!(elem instanceof HTMLInputElement)) throw new Error('Element must be an input element.');
+    /** @type {number} */
+    const result = TinyHtml._val(el, 'valNb', 'number');
+    if (Number.isNaN(result)) throw new Error('Value is not a valid number.');
+    return result;
+  }
+
+  /**
+   * Gets the current value parsed as a number (for number/text).
+   *
+   * @returns {number} The numeric value.
+   * @throws {Error} If the element is not a number-compatible input or value is NaN.
+   */
+  valNb() {
+    return TinyHtml.valNb(this);
+  }
+
+  /**
+   * Gets the current value parsed as a Date (for time/date).
+   *
+   * @param {TinyInputElement} el - Target element.
+   * @returns {Date} The date value.
+   * @throws {Error} If the element is not a date-compatible input.
+   */
+  static valDate(el) {
+    const elem = TinyHtml._preInputElem(el, 'valDate');
+    if (!(elem instanceof HTMLInputElement)) throw new Error('Element must be an input element.');
+    /** @type {Date} */
+    const result = TinyHtml._val(el, 'valDate', 'date');
+    if (!(result instanceof Date)) throw new Error('Value is not a valid date.');
+    return result;
+  }
+
+  /**
+   * Gets the current value parsed as a Date (for time/date).
+   *
+   * @returns {Date} The date value.
+   * @throws {Error} If the element is not a date-compatible input.
+   */
+  valDate() {
+    return TinyHtml.valDate(this);
+  }
+
+  /**
+   * Checks if the input element is boolean (for checkboxes/radios).
+   *
+   * @param {TinyInputElement} el - Target element.
+   * @returns {boolean} True if the input is considered checked (value === "on"), false otherwise.
+   * @throws {Error} If the element is not a checkbox/radio input.
+   */
+  static valBool(el) {
+    const elem = TinyHtml._preInputElem(el, 'valBool');
+    if (!(elem instanceof HTMLInputElement)) throw new Error('Element must be an input element.');
+    return TinyHtml.val(elem) === 'on' ? true : false;
+  }
+
+  /**
+   * Checks if the input element is boolean (for checkboxes/radios).
+   *
+   * @returns {boolean} True if the input is considered checked (value === "on"), false otherwise.
+   * @throws {Error} If the element is not a checkbox/radio input.
+   */
+  valBool() {
+    return TinyHtml.valBool(this);
+  }
+
+  ////////////////////////////////////////////
+
+  /**
+   * Registers an event listener on the specified element.
+   *
+   * @param {TinyEventTarget|TinyEventTarget[]} el - The target to listen on.
+   * @param {string} event - The event type (e.g. 'click', 'keydown').
+   * @param {EventRegistryHandle} handler - The callback function to run on event.
+   * @param {EventRegistryOptions} [options] - Optional event listener options.
+   */
+  static on(el, event, handler, options) {
+    if (typeof event !== 'string') throw new TypeError('The event name must be a string.');
+    TinyHtml._preEventTargetElems(el, 'on').forEach((elem) => {
+      elem.addEventListener(event, handler, options);
+
+      if (!__eventRegistry.has(elem)) __eventRegistry.set(elem, {});
+      const events = __eventRegistry.get(elem);
+      if (!events) return;
+      if (!Array.isArray(events[event])) events[event] = [];
+      events[event].push({ handler, options });
+    });
+  }
+
+  /**
+   * Registers an event listener on the specified element.
+   *
+   * @param {string} event - The event type (e.g. 'click', 'keydown').
+   * @param {EventRegistryHandle} handler - The callback function to run on event.
+   * @param {EventRegistryOptions} [options] - Optional event listener options.
+   */
+  on(event, handler, options) {
+    return TinyHtml.on(this, event, handler, options);
+  }
+
+  /**
+   * Registers an event listener that runs only once, then is removed.
+   *
+   * @param {TinyEventTarget|TinyEventTarget[]} el - The target to listen on.
+   * @param {string} event - The event type (e.g. 'click', 'keydown').
+   * @param {EventRegistryHandle} handler - The callback function to run on event.
+   * @param {EventRegistryOptions} [options={}] - Optional event listener options.
+   */
+  static once(el, event, handler, options = {}) {
+    if (typeof event !== 'string') throw new TypeError('The event name must be a string.');
+    TinyHtml._preEventTargetElems(el, 'once').forEach((elem) => {
+      /** @type {EventRegistryHandle} e */
+      const wrapped = (e) => {
+        TinyHtml.off(elem, event, wrapped);
+        handler(e);
+      };
+
+      TinyHtml.on(
+        elem,
+        event,
+        wrapped,
+        typeof options === 'boolean' ? options : { ...options, once: true },
+      );
+    });
+  }
+
+  /**
+   * Registers an event listener that runs only once, then is removed.
+   *
+   * @param {string} event - The event type (e.g. 'click', 'keydown').
+   * @param {EventRegistryHandle} handler - The callback function to run on event.
+   * @param {EventRegistryOptions} [options={}] - Optional event listener options.
+   */
+  once(event, handler, options = {}) {
+    return TinyHtml.once(this, event, handler, options);
+  }
+
+  /**
+   * Removes a specific event listener from an element.
+   *
+   * @param {TinyEventTarget|TinyEventTarget[]} el - The target element.
+   * @param {string} event - The event type.
+   * @param {EventRegistryHandle} handler - The function originally bound to the event.
+   * @param {boolean|EventListenerOptions} [options] - Optional listener options.
+   */
+  static off(el, event, handler, options) {
+    if (typeof event !== 'string') throw new TypeError('The event name must be a string.');
+    TinyHtml._preEventTargetElems(el, 'off').forEach((elem) => {
+      elem.removeEventListener(event, handler, options);
+
+      const events = __eventRegistry.get(elem);
+      if (events && events[event]) {
+        events[event] = events[event].filter((entry) => entry.handler !== handler);
+        if (events[event].length === 0) delete events[event];
+      }
+    });
+  }
+
+  /**
+   * Removes a specific event listener from an element.
+   *
+   * @param {string} event - The event type.
+   * @param {EventRegistryHandle} handler - The function originally bound to the event.
+   * @param {boolean|EventListenerOptions} [options] - Optional listener options.
+   */
+  off(event, handler, options) {
+    return TinyHtml.off(this, event, handler, options);
+  }
+
+  /**
+   * Removes all event listeners of a specific type from the element.
+   *
+   * @param {TinyEventTarget|TinyEventTarget[]} el - The target element.
+   * @param {string} event - The event type to remove (e.g. 'click').
+   */
+  static offAll(el, event) {
+    if (typeof event !== 'string') throw new TypeError('The event name must be a string.');
+    TinyHtml._preEventTargetElems(el, 'offAll').forEach((elem) => {
+      const events = __eventRegistry.get(elem);
+      if (events && events[event]) {
+        for (const entry of events[event]) {
+          elem.removeEventListener(event, entry.handler, entry.options);
+        }
+        delete events[event];
+      }
+    });
+  }
+
+  /**
+   * Removes all event listeners of a specific type from the element.
+   *
+   * @param {string} event - The event type to remove (e.g. 'click').
+   */
+  offAll(event) {
+    return TinyHtml.offAll(this, event);
+  }
+
+  /**
+   * Removes all event listeners of all types from the element.
+   *
+   * @param {TinyEventTarget|TinyEventTarget[]} el - The target element.
+   * @param {((handler: EventListenerOrEventListenerObject, event: string) => boolean)|null} [filterFn=null] -
+   *        Optional filter function to selectively remove specific handlers.
+   */
+  static offAllTypes(el, filterFn = null) {
+    if (filterFn !== null && typeof filterFn !== 'function')
+      throw new TypeError('The "filterFn" must be a function.');
+    TinyHtml._preEventTargetElems(el, 'offAllTypes').forEach((elem) => {
+      const events = __eventRegistry.get(elem);
+      if (!events) return;
+
+      for (const event in events) {
+        for (const entry of events[event]) {
+          if (typeof filterFn !== 'function' || filterFn(entry.handler, event)) {
+            elem.removeEventListener(event, entry.handler, entry.options);
+          }
+        }
+      }
+
+      __eventRegistry.delete(elem);
+    });
+  }
+
+  /**
+   * Removes all event listeners of all types from the element.
+   *
+   * @param {((handler: EventListenerOrEventListenerObject, event: string) => boolean)|null} [filterFn=null] -
+   *        Optional filter function to selectively remove specific handlers.
+   */
+  offAllTypes(filterFn = null) {
+    return TinyHtml.offAllTypes(this, filterFn);
+  }
+
+  /**
+   * Triggers all handlers associated with a specific event on the given element.
+   *
+   * @param {TinyEventTarget|TinyEventTarget[]} el - Target element where the event should be triggered.
+   * @param {string} event - Name of the event to trigger.
+   * @param {Event|CustomEvent|CustomEventInit} [payload] - Optional event object or data to pass.
+   */
+  static trigger(el, event, payload = {}) {
+    if (typeof event !== 'string') throw new TypeError('The event name must be a string.');
+    TinyHtml._preEventTargetElems(el, 'trigger').forEach((elem) => {
+      const evt =
+        payload instanceof Event || payload instanceof CustomEvent
+          ? payload
+          : new CustomEvent(event, {
+              bubbles: true,
+              cancelable: true,
+              detail: payload,
+            });
+
+      elem.dispatchEvent(evt);
+    });
+  }
+
+  /**
+   * Triggers all handlers associated with a specific event on the given element.
+   *
+   * @param {string} event - Name of the event to trigger.
+   * @param {Event|CustomEvent|CustomEventInit} [payload] - Optional event object or data to pass.
+   */
+  trigger(event, payload = {}) {
+    return TinyHtml.trigger(this, event, payload);
+  }
+
+  ///////////////////////////////////////////////////////////////
+
+  /**
+   * Property name normalization similar to jQuery's propFix.
+   * @readonly
+   */
+  static _propFix = {
+    for: 'htmlFor',
+    class: 'className',
+  };
+
+  /**
+   * Get an attribute on an element.
+   * @param {TinyElement} el
+   * @param {string} name
+   * @returns {string|null}
+   */
+  static attr(el, name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" must be a string.');
+    const elem = TinyHtml._preElem(el, 'attr');
+    return elem.getAttribute(name);
+  }
+
+  /**
+   * Get an attribute on an element.
+   * @param {string} name
+   * @returns {string|null}
+   */
+  attr(name) {
+    return TinyHtml.attr(this, name);
+  }
+
+  /**
+   * Set an attribute on an element.
+   * @param {TinyElement|TinyElement[]} el
+   * @param {string} name
+   * @param {string|null} [value=null]
+   */
+  static setAttr(el, name, value = null) {
+    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) => {
+      if (value === null) elem.removeAttribute(name);
+      else elem.setAttribute(name, value);
+    });
+  }
+
+  /**
+   * Set an attribute on an element.
+   * @param {string} name
+   * @param {string|null} [value=null]
+   */
+  setAttr(name, value) {
+    return TinyHtml.setAttr(this, name, value);
+  }
+
+  /**
+   * Remove attribute(s) from an element.
+   * @param {TinyElement|TinyElement[]} el
+   * @param {string} name Space-separated list of attributes.
+   */
+  static removeAttr(el, name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" must be a string.');
+    TinyHtml._preElems(el, 'removeAttr').forEach((elem) => elem.removeAttribute(name));
+  }
+
+  /**
+   * Remove attribute(s) from an element.
+   * @param {string} name Space-separated list of attributes.
+   */
+  removeAttr(name) {
+    return TinyHtml.removeAttr(this, name);
+  }
+
+  /**
+   * Check if an attribute exists on an element.
+   * @param {TinyElement} el
+   * @param {string} name
+   * @returns {boolean}
+   */
+  static hasAttr(el, name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" must be a string.');
+    const elem = TinyHtml._preElem(el, 'hasAttr');
+    return elem.hasAttribute(name);
+  }
+
+  /**
+   * Check if an attribute exists on an element.
+   * @param {string} name
+   * @returns {boolean}
+   */
+  hasAttr(name) {
+    return TinyHtml.hasAttr(this, name);
+  }
+
+  /**
+   * Check if a property exists.
+   * @param {TinyElement} el
+   * @param {string} name
+   * @returns {boolean}
+   */
+  static hasProp(el, name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" must be a string.');
+    const elem = TinyHtml._preElem(el, 'hasProp');
+    // @ts-ignore
+    const propName = TinyHtml._propFix[name] || name;
+    // @ts-ignore
+    return !!elem[propName];
+  }
+
+  /**
+   * Check if a property exists.
+   * @param {string} name
+   * @returns {boolean}
+   */
+  hasProp(name) {
+    return TinyHtml.hasProp(this, name);
+  }
+
+  /**
+   * Set a property on an element.
+   * @param {TinyElement|TinyElement[]} el
+   * @param {string} name
+   */
+  static addProp(el, name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" must be a string.');
+    TinyHtml._preElems(el, 'addProp').forEach((elem) => {
+      // @ts-ignore
+      name = TinyHtml._propFix[name] || name;
+      // @ts-ignore
+      elem[name] = true;
+    });
+  }
+
+  /**
+   * Set a property on an element.
+   * @param {string} name
+   */
+  addProp(name) {
+    return TinyHtml.addProp(this, name);
+  }
+
+  /**
+   * Remove a property from an element.
+   * @param {TinyElement|TinyElement[]} el
+   * @param {string} name
+   */
+  static removeProp(el, name) {
+    if (typeof name !== 'string') throw new TypeError('The "name" must be a string.');
+    TinyHtml._preElems(el, 'removeProp').forEach((elem) => {
+      // @ts-ignore
+      name = TinyHtml._propFix[name] || name;
+      // @ts-ignore
+      elem[name] = false;
+    });
+  }
+
+  /**
+   * Remove a property from an element.
+   * @param {string} name
+   */
+  removeProp(name) {
+    return TinyHtml.removeProp(this, name);
+  }
+
+  /**
+   * Toggle a boolean property.
+   * @param {TinyElement|TinyElement[]} el
+   * @param {string} name
+   * @param {boolean} [force]
+   */
+  static toggleProp(el, name, force) {
+    if (typeof name !== 'string') throw new TypeError('The "name" must be a string.');
+    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 propName = TinyHtml._propFix[name] || name;
+      // @ts-ignore
+      const shouldEnable = force === undefined ? !elem[propName] : force;
+      // @ts-ignore
+      if (shouldEnable) TinyHtml.addProp(elem, name);
+      else TinyHtml.removeProp(elem, name);
+    });
+  }
+
+  /**
+   * Toggle a boolean property.
+   * @param {string} name
+   * @param {boolean} [force]
+   */
+  toggleProp(name, force) {
+    return TinyHtml.toggleProp(this, name, force);
+  }
+
+  /////////////////////////////////////////////////////
+
+  /**
+   * Removes an element from the DOM.
+   * @param {TinyElement|TinyElement[]} el - The DOM element or selector to remove.
+   */
+  static remove(el) {
+    TinyHtml._preElems(el, 'remove').forEach((elem) => elem.remove());
+  }
+
+  /**
+   * Removes the element from the DOM.
+   */
+  remove() {
+    return TinyHtml.remove(this);
+  }
+
+  /**
+   * Returns the index of the first element within its parent or relative to a selector/element.
+   *
+   * @param {TinyElement} el - The element target
+   * @param {string|TinyElement|null} [el2] - Optional target to compare index against.
+   * @returns {number}
+   */
+  static index(el, el2 = null) {
+    const elem = TinyHtml._preElem(el, 'index');
+    if (!elem) return -1;
+
+    if (!el2) {
+      return Array.prototype.indexOf.call(elem.parentNode?.children || [], elem);
+    }
+
+    if (el2) {
+      const matchEls =
+        typeof el2 === 'string' ? document.querySelectorAll(el2) : TinyHtml._preElems(el2, 'index');
+      return Array.prototype.indexOf.call(matchEls, elem);
+    }
+
+    return -1;
+  }
+
+  /**
+   * Returns the index of the first element within its parent or relative to a selector/element.
+   *
+   * @param {string|TinyElement|null} [elem] - Optional target to compare index against.
+   * @returns {number}
+   */
+  index(elem) {
+    return TinyHtml.index(this, elem);
+  }
+
+  ////////////////////////////////////////////////////////////////////
+
+  /**
+   * Creates a new DOMRect object by copying the base rect and applying optional additional dimensions.
+   *
+   * @param {DOMRect} rect - The base rectangle to be cloned and extended.
+   * @param {Partial<DOMRect>} extraRect - Additional dimensions to apply to the base rect (e.g., extra padding or offset).
+   * @returns {DOMRect} - A new DOMRect object with the combined dimensions.
+   * @readonly
+   */
+  static _getCustomRect(rect, extraRect) {
+    /** @type {DOMRect} */
+    const result = {
+      height: 0,
+      width: 0,
+      x: 0,
+      y: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+      toJSON: function () {
+        throw new Error('Function not implemented.');
+      },
+    };
+    for (const name in rect) {
+      // @ts-ignore
+      if (typeof rect[name] === 'number')
+        // @ts-ignore
+        result[name] = rect[name];
+    }
+
+    if (typeof extraRect !== 'object' || extraRect === null || Array.isArray(extraRect))
+      throw new Error('');
+    const { height = 0, width = 0, top = 0, bottom = 0, left = 0, right = 0 } = extraRect;
+    if (typeof height !== 'number') throw new Error('');
+    if (typeof width !== 'number') throw new Error('');
+    if (typeof top !== 'number') throw new Error('');
+    if (typeof bottom !== 'number') throw new Error('');
+    if (typeof left !== 'number') throw new Error('');
+    if (typeof right !== 'number') throw new Error('');
+
+    // @ts-ignore
+    result.height += height;
+    // @ts-ignore
+    result.width += width;
+    // @ts-ignore
+    result.top += top;
+    // @ts-ignore
+    result.bottom += bottom;
+    // @ts-ignore
+    result.left += left;
+    // @ts-ignore
+    result.right += right;
+    return result;
+  }
+
+  /**
+   * Determines if two HTML elements are colliding, using a simple bounding box comparison.
+   *
+   * @param {TinyElement} el1 - The first element to compare.
+   * @param {TinyElement} el2 - The second element to compare.
+   * @param {Partial<ObjRect>} [extraRect] - Optional values to expand the size of the first element's rect.
+   * @returns {boolean} - `true` if the elements are colliding, `false` otherwise.
+   */
+  static isCollWith(el1, el2, extraRect = {}) {
+    const rect1 = TinyHtml._getCustomRect(
+      TinyHtml._preElem(el1, 'isCollWith').getBoundingClientRect(),
+      extraRect,
+    );
+    const rect2 = TinyHtml._preElem(el2, 'isCollWith').getBoundingClientRect();
+    return areElsColliding(rect1, rect2);
+  }
+
+  /**
+   * Determines if two HTML elements are colliding, using a simple bounding box comparison.
+   *
+   * @param {TinyElement} el2 - The second element to compare.
+   * @param {Partial<ObjRect>} [extraRect] - Optional values to expand the size of the first element's rect.
+   * @returns {boolean} - `true` if the elements are colliding, `false` otherwise.
+   */
+  isCollWith(el2, extraRect) {
+    return TinyHtml.isCollWith(this, el2, extraRect);
+  }
+
+  /**
+   * Determines if two HTML elements are colliding using a pixel-perfect collision algorithm.
+   *
+   * @param {TinyElement} el1 - The first element to compare.
+   * @param {TinyElement} el2 - The second element to compare.
+   * @param {Partial<ObjRect>} [extraRect] - Optional values to expand the size of the first element's rect.
+   * @returns {boolean} - `true` if the elements are colliding with higher precision, `false` otherwise.
+   */
+  static isCollPerfWith(el1, el2, extraRect = {}) {
+    const rect1 = TinyHtml._getCustomRect(
+      TinyHtml._preElem(el1, 'isCollPerfWith').getBoundingClientRect(),
+      extraRect,
+    );
+    const rect2 = TinyHtml._preElem(el2, 'isCollPerfWith').getBoundingClientRect();
+    return areElsPerfColliding(rect1, rect2);
+  }
+
+  /**
+   * Determines if two HTML elements are colliding using a pixel-perfect collision algorithm.
+   *
+   * @param {TinyElement} el2 - The second element to compare.
+   * @param {Partial<ObjRect>} [extraRect] - Optional values to expand the size of the first element's rect.
+   * @returns {boolean} - `true` if the elements are colliding with higher precision, `false` otherwise.
+   */
+  isCollPerfWith(el2, extraRect) {
+    return TinyHtml.isCollPerfWith(this, el2, extraRect);
+  }
+
+  /**
+   * Determines whether two elements are colliding with a directional lock mechanism.
+   *
+   * This function tracks the direction from which an element (`elem1`) initially collided with another,
+   * and keeps the collision "locked" until the element exits the collision from the same direction.
+   *
+   * - If `isColliding` is true and no lock is stored yet, it saves the direction of entry.
+   * - If `isColliding` is false but a previous lock exists, it checks if the element has exited
+   *   in the same direction it entered to remove the lock.
+   *
+   * @param {boolean} isColliding - Indicates whether `rect1` and `rect2` are currently colliding.
+   * @param {DOMRect} rect1 - The bounding box of the first element.
+   * @param {DOMRect} rect2 - The bounding box of the second element.
+   * @param {Element} elem1 - The element to track collision state for.
+   * @param {CollisionDirLock} lockDirection - The direction from which the collision was first detected.
+   * @returns {boolean} Returns `true` if the element is still considered colliding (locked), otherwise `false`.
+   * @readonly
+   */
+  static _isCollWithLock(isColliding, rect1, rect2, elem1, lockDirection) {
+    const lockMap = __elemCollision[lockDirection];
+
+    if (isColliding) {
+      // Save entry direction
+      if (!lockMap.has(elem1)) {
+        lockMap.set(elem1, true);
+      }
+      return true;
+    }
+
+    // Handle unlock logic
+    if (lockMap.has(elem1)) {
+      let shouldUnlock = false;
+
+      switch (lockDirection) {
+        case 'top':
+          shouldUnlock = areElsCollTop(rect1, rect2);
+          break;
+        case 'bottom':
+          shouldUnlock = areElsCollBottom(rect1, rect2);
+          break;
+        case 'left':
+          shouldUnlock = areElsCollLeft(rect1, rect2);
+          break;
+        case 'right':
+          shouldUnlock = areElsCollRight(rect1, rect2);
+          break;
+      }
+
+      if (shouldUnlock) lockMap.delete(elem1);
+
+      return lockMap.has(elem1); // still colliding (locked)
+    }
+
+    return false;
+  }
+
+  /**
+   * Checks if two DOM elements are colliding on the screen, and locks the collision
+   * until the element exits through the same side it entered.
+   *
+   * @param {TinyElement} el1 - First DOM element (e.g. draggable or moving element).
+   * @param {TinyElement} el2 - Second DOM element (e.g. a container or boundary element).
+   * @param {CollisionDirLock} lockDirection - Direction that must be respected to unlock the collision.
+   * @param {Partial<ObjRect>} [extraRect] - Optional values to expand the size of the first element's rect.
+   * @returns {boolean} True if collision is still active.
+   */
+  static isCollWithLock(el1, el2, lockDirection, extraRect = {}) {
+    const elem1 = TinyHtml._preElem(el1, 'isCollWithLock');
+    const elem2 = TinyHtml._preElem(el2, 'isCollWithLock');
+    const rect1 = TinyHtml._getCustomRect(elem1.getBoundingClientRect(), extraRect);
+    const rect2 = elem2.getBoundingClientRect();
+    const isColliding = areElsColliding(rect1, rect2);
+    return TinyHtml._isCollWithLock(isColliding, rect1, rect2, elem1, lockDirection);
+  }
+
+  /**
+   * Checks if two DOM elements are colliding on the screen, and locks the collision
+   * until the element exits through the same side it entered.
+   *
+   * @param {TinyElement} el2 - Second DOM element (e.g. a container or boundary element).
+   * @param {CollisionDirLock} lockDirection - Direction that must be respected to unlock the collision.
+   * @param {Partial<ObjRect>} [extraRect] - Optional values to expand the size of the first element's rect.
+   * @returns {boolean} True if collision is still active.
+   */
+  isCollWithLock(el2, lockDirection, extraRect) {
+    return TinyHtml.isCollWithLock(this, el2, lockDirection, extraRect);
+  }
+
+  /**
+   * Checks if two DOM elements are colliding on the screen, and locks the collision
+   * until the element exits through the same side it entered.
+   *
+   * @param {TinyElement} el1 - First DOM element (e.g. draggable or moving element).
+   * @param {TinyElement} el2 - Second DOM element (e.g. a container or boundary element).
+   * @param {CollisionDirLock} lockDirection - Direction that must be respected to unlock the collision.
+   * @param {Partial<ObjRect>} [extraRect] - Optional values to expand the size of the first element's rect.
+   * @returns {boolean} True if collision is still active.
+   */
+  static isCollPerfWithLock(el1, el2, lockDirection, extraRect = {}) {
+    const elem1 = TinyHtml._preElem(el1, 'isCollPerfWithLock');
+    const elem2 = TinyHtml._preElem(el2, 'isCollPerfWithLock');
+    const rect1 = TinyHtml._getCustomRect(elem1.getBoundingClientRect(), extraRect);
+    const rect2 = elem2.getBoundingClientRect();
+    const isColliding = areElsPerfColliding(rect1, rect2);
+    return TinyHtml._isCollWithLock(isColliding, rect1, rect2, elem1, lockDirection);
+  }
+
+  /**
+   * Checks if two DOM elements are colliding on the screen, and locks the collision
+   * until the element exits through the same side it entered.
+   *
+   * @param {TinyElement} el2 - Second DOM element (e.g. a container or boundary element).
+   * @param {CollisionDirLock} lockDirection - Direction that must be respected to unlock the collision.
+   * @param {Partial<ObjRect>} [extraRect] - Optional values to expand the size of the first element's rect.
+   * @returns {boolean} True if collision is still active.
+   */
+  isCollPerfWithLock(el2, lockDirection, extraRect) {
+    return TinyHtml.isCollPerfWithLock(this, el2, lockDirection, extraRect);
+  }
+
+  /**
+   * Resets all collision locks for a specific element (for all directions).
+   *
+   * @param {TinyElement} el - The element whose locks should be removed.
+   * @returns {boolean} True if at least one lock was removed.
+   */
+  static resetCollLock(el) {
+    const elem = TinyHtml._preElem(el, 'resetCollLock');
+    let removed = false;
+
+    for (const dir of /** @type {CollisionDirLock[]} */ (['top', 'bottom', 'left', 'right'])) {
+      if (__elemCollision[dir].has(elem)) {
+        __elemCollision[dir].delete(elem);
+        removed = true;
+      }
+    }
+
+    return removed;
+  }
+
+  /**
+   * Resets the collision lock for a specific element.
+   *
+   * This removes any previously stored collision direction for the given element,
+   * effectively unlocking its collision state.
+   *
+   * @returns {boolean} Returns `true` if a lock was removed, `false` if no lock was present.
+   */
+  resetCollLock() {
+    return TinyHtml.resetCollLock(this);
+  }
+
+  /**
+   * Resets the collision lock for a specific element and direction.
+   *
+   * @param {TinyElement} el - The element whose lock should be removed.
+   * @param {CollisionDirLock} direction - The direction to clear the lock from.
+   * @returns {boolean} True if the lock was removed.
+   */
+  static resetCollLockDir(el, direction) {
+    const elem = TinyHtml._preElem(el, 'resetCollLockDir');
+    const lockMap = __elemCollision[direction];
+
+    if (lockMap.has(elem)) {
+      lockMap.delete(elem);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Resets the collision lock for a specific element and direction.
+   *
+   * @param {CollisionDirLock} direction - The direction to clear the lock from.
+   * @returns {boolean} True if the lock was removed.
+   */
+  resetCollLockDir(direction) {
+    return TinyHtml.resetCollLockDir(this, direction);
+  }
+
+  //////////////////////////////////////////////////////////////////////////////
+
+  /**
+   * Checks if the given element is at least partially visible in the viewport.
+   *
+   * @param {TinyElement} el - The DOM element to check.
+   * @returns {boolean} True if the element is partially in the viewport, false otherwise.
+   */
+  static isInViewport(el) {
+    const elem = TinyHtml._preElem(el, 'isInViewport');
+    const elementTop = TinyHtml.offset(elem).top;
+    const elementBottom = elementTop + TinyHtml.outerHeight(elem);
+
+    const viewportTop = TinyHtml.scrollTop(window);
+    const viewportBottom = viewportTop + TinyHtml.height(window);
+
+    return elementBottom > viewportTop && elementTop < viewportBottom;
+  }
+
+  /**
+   * Checks if the given element is at least partially visible in the viewport.
+   *
+   * @returns {boolean} True if the element is partially in the viewport, false otherwise.
+   */
+  isInViewport() {
+    return TinyHtml.isInViewport(this);
+  }
+
+  /**
+   * Checks if the given element is fully visible in the viewport (top and bottom).
+   *
+   * @param {TinyElement} el - The DOM element to check.
+   * @returns {boolean} True if the element is fully visible in the viewport, false otherwise.
+   */
+  static isScrolledIntoView(el) {
+    const elem = TinyHtml._preElem(el, 'isScrolledIntoView');
+    const docViewTop = TinyHtml.scrollTop(window);
+    const docViewBottom = docViewTop + TinyHtml.height(window);
+
+    const elemTop = TinyHtml.offset(elem).top;
+    const elemBottom = elemTop + TinyHtml.height(elem);
+
+    return elemBottom <= docViewBottom && elemTop >= docViewTop;
+  }
+
+  /**
+   * Checks if the given element is fully visible in the viewport (top and bottom).
+   *
+   * @returns {boolean} True if the element is fully visible in the viewport, false otherwise.
+   */
+  isScrolledIntoView() {
+    return TinyHtml.isScrolledIntoView(this);
+  }
+}
+
+module.exports = TinyHtml;