tiny-essentials 1.21.8 → 1.21.9

package/dist/v1/libs/TinyHtml.mjs

@@ -1,5 +1,9 @@
 import * as TinyCollision from '../basics/collision.mjs';
 const { areElsColliding, areElsPerfColliding, areElsCollTop, areElsCollBottom, areElsCollLeft, areElsCollRight, } = TinyCollision;
+/**
+ * Represents a TinyHtml instance with any constructor element values.
+ * @typedef {TinyHtml<ConstructorElValues>} TinyHtmlAny
+ */
 /**
  * Callback invoked on each animation frame with the current scroll position,
  * normalized animation time (`0` to `1`), and a completion flag.
@@ -16,42 +20,42 @@ const { areElsColliding, areElsPerfColliding, areElsCollTop, areElsCollBottom, a
  * This type is used to abstract interactions with both plain elements
  * and wrapped elements via the TinyHtml class.
  *
- * @typedef {Node|TinyHtml|null} TinyNode
+ * @typedef {Node|TinyHtmlAny|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
+ * @typedef {Element|TinyHtmlAny} 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
+ * @typedef {HTMLElement|TinyHtmlAny} 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
+ * @typedef {EventTarget|TinyHtmlAny} 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
+ * @typedef {InputElement|TinyHtmlAny} 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
+ * @typedef {ElementAndWindow|TinyHtmlAny} TinyElementAndWindow
  */
 /**
  * Represents a value that can be either a DOM Element or the global Window object.
@@ -64,7 +68,7 @@ const { areElsColliding, areElsPerfColliding, areElsCollTop, areElsCollBottom, a
  * This type is used to abstract interactions with both plain elements
  * and wrapped elements via the TinyHtml class.
  *
- * @typedef {ElementAndWinAndDoc|TinyHtml} TinyElementAndWinAndDoc
+ * @typedef {ElementAndWinAndDoc|TinyHtmlAny} TinyElementAndWinAndDoc
  */
 /**
  * Represents a value that can be either a DOM Element, or the global Window object, or the document object.
@@ -77,7 +81,7 @@ const { areElsColliding, areElsPerfColliding, areElsCollTop, areElsCollBottom, a
  * This type is used to abstract interactions with both plain elements
  * and wrapped elements via the TinyHtml class.
  *
- * @typedef {ElementWithDoc|TinyHtml} TinyElementWithDoc
+ * @typedef {ElementWithDoc|TinyHtmlAny} TinyElementWithDoc
  */
 /**
  * Represents a value that can be either a DOM Element, or the document object.
@@ -203,6 +207,7 @@ const __elemCollision = {
  * 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.
  *
+ * @template {ConstructorElValues|ConstructorElValues[]|NodeListOf<Element>|HTMLCollectionOf<Element>|NodeListOf<HTMLElement>} TinyHtmlT
  * @class
  */
 class TinyHtml {
@@ -243,7 +248,7 @@ class TinyHtml {
      *
      * @param {string} url - The URL of the HTML file.
      * @param {RequestInit} [ops] - Optional fetch configuration (e.g., method, headers, cache, etc).
-     * @returns {Promise<TinyHtml[]>} A promise that resolves with the TinyHtml instances.
+     * @returns {Promise<TinyHtml<TinyElement|Text>[]>} A promise that resolves with the TinyHtml instances.
      */
     static async fetchHtmlTinyElems(url, ops) {
         const nodes = await TinyHtml.fetchHtmlNodes(url, ops);
@@ -281,7 +286,7 @@ class TinyHtml {
      * Converts the content of a <template> to an array of TinyHtml elements.
      *
      * @param {HTMLTemplateElement} nodes
-     * @returns {TinyHtml[]}
+     * @returns {TinyHtml<Element|Text>[]}
      */
     static templateToTinyElems(nodes) {
         return TinyHtml.toTinyElm(TinyHtml.templateToNodes(nodes));
@@ -362,7 +367,7 @@ class TinyHtml {
      * Converts a JSON-like HTML structure back to TinyHtml instances.
      *
      * @param {HtmlParsed[]} jsonArray - Parsed JSON format of HTML.
-     * @returns {TinyHtml[]} List of TinyHtml instances.
+     * @returns {TinyHtml<HTMLElement | Text>[]} List of TinyHtml instances.
      */
     static jsonToTinyElems(jsonArray) {
         return TinyHtml.toTinyElm(TinyHtml.jsonToNodes(jsonArray));
@@ -379,7 +384,7 @@ class TinyHtml {
      * @param {string} tagName - The HTML tag name (e.g., 'div', 'span', 'button').
      * @param {Record<string, string|null>} [attrs] - Optional key-value pairs representing HTML attributes.
      *                                                If the value is `null`, the attribute will still be set with an empty value.
-     * @returns {TinyHtml} - A new instance of TinyHtml representing the created element.
+     * @returns {TinyHtml<HTMLElement>} - A new instance of TinyHtml representing the created element.
      * @throws {TypeError} - If `tagName` is not a string, or `attrs` is not a plain object when defined.
      */
     static createFrom(tagName, attrs) {
@@ -400,7 +405,7 @@ class TinyHtml {
      *
      * @param {string} tagName - The tag name of the element to create (e.g., 'div', 'span').
      * @param {ElementCreationOptions} [ops] - Optional settings for creating the element.
-     * @returns {TinyHtml} A TinyHtml instance wrapping the newly created DOM element.
+     * @returns {TinyHtml<HTMLElement>} A TinyHtml instance wrapping the newly created DOM element.
      * @throws {TypeError} If tagName is not a string or ops is not an object.
      */
     static createElement(tagName, ops) {
@@ -418,7 +423,7 @@ class TinyHtml {
      * other TinyHtml element and can be appended or manipulated as needed.
      *
      * @param {string} value - The plain text content to be wrapped in a TextNode.
-     * @returns {TinyHtml} A TinyHtml instance wrapping the newly created DOM TextNode.
+     * @returns {TinyHtml<Text>} A TinyHtml instance wrapping the newly created DOM TextNode.
      * @throws {TypeError} If the provided value is not a string.
      */
     static createTextNode(value) {
@@ -431,7 +436,7 @@ class TinyHtml {
      * Supports both elements and plain text.
      *
      * @param {string} htmlString - The HTML string to convert.
-     * @returns {TinyHtml} - A single HTMLElement or TextNode.
+     * @returns {TinyHtml<Element>} - A single HTMLElement or TextNode.
      */
     static createElementFromHTML(htmlString) {
         const template = document.createElement('template');
@@ -450,7 +455,7 @@ class TinyHtml {
      *
      * @param {string} selector - A valid CSS selector string.
      * @param {Document|Element} elem - Target element.
-     * @returns {TinyHtml|null} A TinyHtml instance wrapping the matched element.
+     * @returns {TinyHtml<Element>|null} A TinyHtml instance wrapping the matched element.
      */
     static query(selector, elem = document) {
         const newEl = elem.querySelector(selector);
@@ -462,7 +467,7 @@ class TinyHtml {
      * Queries the element 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|null} A TinyHtml instance wrapping the matched element.
+     * @returns {TinyHtml<Element>|null} A TinyHtml instance wrapping the matched element.
      */
     querySelector(selector) {
         return TinyHtml.query(selector, TinyHtml._preElem(this, 'query'));
@@ -472,7 +477,7 @@ class TinyHtml {
      *
      * @param {string} selector - A valid CSS selector string.
      * @param {Document|Element} elem - Target element.
-     * @returns {TinyHtml} An array of TinyHtml instances wrapping the matched elements.
+     * @returns {TinyHtml<NodeListOf<Element>>} An array of TinyHtml instances wrapping the matched elements.
      */
     static queryAll(selector, elem = document) {
         return new TinyHtml(elem.querySelectorAll(selector));
@@ -481,7 +486,7 @@ class TinyHtml {
      * Queries the element 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.
+     * @returns {TinyHtml<NodeListOf<Element>>} An array of TinyHtml instances wrapping the matched elements.
      */
     querySelectorAll(selector) {
         return TinyHtml.queryAll(selector, TinyHtml._preElem(this, 'queryAll'));
@@ -490,7 +495,7 @@ class TinyHtml {
      * 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|null} A TinyHtml instance wrapping the found element.
+     * @returns {TinyHtml<HTMLElement>|null} A TinyHtml instance wrapping the found element.
      */
     static getById(selector) {
         const newEl = document.getElementById(selector);
@@ -503,7 +508,7 @@ class TinyHtml {
      *
      * @param {string} selector - The class name to search for.
      * @param {Document|Element} elem - Target element.
-     * @returns {TinyHtml} An array of TinyHtml instances wrapping the found elements.
+     * @returns {TinyHtml<HTMLCollectionOf<Element>>} An array of TinyHtml instances wrapping the found elements.
      */
     static getByClassName(selector, elem = document) {
         return new TinyHtml(elem.getElementsByClassName(selector));
@@ -512,7 +517,7 @@ class TinyHtml {
      * 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.
+     * @returns {TinyHtml<HTMLCollectionOf<Element>>} An array of TinyHtml instances wrapping the found elements.
      */
     getElementsByClassName(selector) {
         return TinyHtml.getByClassName(selector, TinyHtml._preElem(this, 'getByClassName'));
@@ -521,7 +526,7 @@ class TinyHtml {
      * 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.
+     * @returns {TinyHtml<NodeListOf<HTMLElement>>} An array of TinyHtml instances wrapping the found elements.
      */
     static getByName(selector) {
         return new TinyHtml(document.getElementsByName(selector));
@@ -533,7 +538,7 @@ class TinyHtml {
      * @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.
      * @param {Document|Element} elem - Target element.
-     * @returns {TinyHtml} An array of TinyHtml instances wrapping the found elements.
+     * @returns {TinyHtml<HTMLCollectionOf<Element>>} An array of TinyHtml instances wrapping the found elements.
      */
     static getByTagNameNS(localName, namespaceURI = 'http://www.w3.org/1999/xhtml', elem = document) {
         return new TinyHtml(elem.getElementsByTagNameNS(namespaceURI, localName));
@@ -544,7 +549,7 @@ class TinyHtml {
      *
      * @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.
+     * @returns {TinyHtml<HTMLCollectionOf<Element>>} An array of TinyHtml instances wrapping the found elements.
      */
     getElementsByTagNameNS(localName, namespaceURI = 'http://www.w3.org/1999/xhtml') {
         return TinyHtml.getByTagNameNS(localName, namespaceURI, TinyHtml._preElem(this, 'getByTagNameNS'));
@@ -552,8 +557,8 @@ class TinyHtml {
     //////////////////////////////////////////////////////////////////
     /**
      * Iterates over all elements, executing the provided callback on each.
-     * @param {(element: TinyHtml, index: number, items: TinyHtml[]) => void} callback - Function invoked for each element.
-     * @returns {TinyHtml} The current instance for chaining.
+     * @param {(element: TinyHtmlAny, index: number, items: TinyHtmlAny[]) => void} callback - Function invoked for each element.
+     * @returns {this} The current instance for chaining.
      */
     forEach(callback) {
         const elems = this.getAll().map((el, index) => this.extract(index));
@@ -578,7 +583,7 @@ class TinyHtml {
      * Extracts a single DOM element from the internal list at the specified index.
      *
      * @param {number} index - The index of the element to extract.
-     * @returns {TinyHtml} A new TinyHtml instance wrapping the extracted element.
+     * @returns {TinyHtmlAny} A new TinyHtml instance wrapping the extracted element.
      */
     extract(index) {
         if (typeof index !== 'number')
@@ -935,7 +940,7 @@ class TinyHtml {
      * of the input form.
      *
      * @param {TinyElement|Text|(TinyElement|Text)[]} elems - A single element or an array of elements (DOM or TinyHtml).
-     * @returns {TinyHtml[]} An array of TinyHtml instances corresponding to the input elements.
+     * @returns {TinyHtml<TinyElement|Text>[]} An array of TinyHtml instances corresponding to the input elements.
      */
     static toTinyElm(elems) {
         /** @param {(TinyElement|Text)[]} item */
@@ -1246,11 +1251,12 @@ class TinyHtml {
     /**
      * Stores a value associated with a specific key for a DOM element.
      *
-     * @param {TinyElement} el - The DOM element.
+     * @template {TinyElement} T
+     * @param {T} 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 {TinyElement}
+     * @returns {T}
      */
     static setData(el, key, value, isPrivate = false) {
         const data = TinyHtml._dataSelector[!isPrivate ? 'public' : 'private']('setData', el);
@@ -1265,7 +1271,7 @@ class TinyHtml {
      * @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 {TinyElement}
+     * @returns {this}
      */
     setData(key, value, isPrivate = false) {
         return TinyHtml.setData(this, key, value, isPrivate);
@@ -1583,9 +1589,10 @@ class TinyHtml {
     /**
      * Appends child elements or strings to the end of the target element(s).
      *
-     * @param {TinyElement} el - The target element(s) to receive children.
+     * @template {TinyElement} T
+     * @param {T} el - The target element(s) to receive children.
      * @param {...(TinyNode | TinyNode[] | string)} children - The child elements or text to append.
-     * @returns {TinyElement}
+     * @returns {T}
      */
     static append(el, ...children) {
         const elem = TinyHtml._preElem(el, 'append');
@@ -1596,7 +1603,7 @@ class TinyHtml {
      * 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.
-     * @returns {TinyElement}
+     * @returns {this}
      */
     append(...children) {
         return TinyHtml.append(this, ...children);
@@ -1604,9 +1611,10 @@ class TinyHtml {
     /**
      * Prepends child elements or strings to the beginning of the target element(s).
      *
-     * @param {TinyElement} el - The target element(s) to receive children.
+     * @template {TinyElement} T
+     * @param {T} el - The target element(s) to receive children.
      * @param {...(TinyNode | TinyNode[] | string)} children - The child elements or text to prepend.
-     * @returns {TinyElement}
+     * @returns {T}
      */
     static prepend(el, ...children) {
         const elem = TinyHtml._preElem(el, 'prepend');
@@ -1617,7 +1625,7 @@ class TinyHtml {
      * 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.
-     * @returns {TinyElement}
+     * @returns {this}
      */
     prepend(...children) {
         return TinyHtml.prepend(this, ...children);
@@ -1625,9 +1633,10 @@ class TinyHtml {
     /**
      * Inserts elements or strings immediately before the target element(s) in the DOM.
      *
-     * @param {TinyElement} el - The target element(s) before which new content is inserted.
+     * @template {TinyElement} T
+     * @param {T} el - The target element(s) before which new content is inserted.
      * @param {...(TinyNode | TinyNode[] | string)} children - Elements or text to insert before the target.
-     * @returns {TinyElement}
+     * @returns {T}
      */
     static before(el, ...children) {
         const elem = TinyHtml._preElem(el, 'before');
@@ -1638,7 +1647,7 @@ class TinyHtml {
      * 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.
-     * @returns {TinyElement}
+     * @returns {this}
      */
     before(...children) {
         return TinyHtml.before(this, ...children);
@@ -1646,9 +1655,10 @@ class TinyHtml {
     /**
      * Inserts elements or strings immediately after the target element(s) in the DOM.
      *
-     * @param {TinyElement} el - The target element(s) after which new content is inserted.
+     * @template {TinyElement} T
+     * @param {T} el - The target element(s) after which new content is inserted.
      * @param {...(TinyNode | TinyNode[] | string)} children - Elements or text to insert after the target.
-     * @returns {TinyElement}
+     * @returns {T}
      */
     static after(el, ...children) {
         const elem = TinyHtml._preElem(el, 'after');
@@ -1659,7 +1669,7 @@ class TinyHtml {
      * 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.
-     * @returns {TinyElement}
+     * @returns {this}
      */
     after(...children) {
         return TinyHtml.after(this, ...children);
@@ -1667,9 +1677,10 @@ class TinyHtml {
     /**
      * Replaces the target element(s) in the DOM with new elements or text.
      *
-     * @param {TinyElement} el - The element(s) to be replaced.
+     * @template {TinyElement} T
+     * @param {T} el - The element(s) to be replaced.
      * @param {...(TinyNode | TinyNode[] | string)} newNodes - New elements or text to replace the target.
-     * @returns {TinyElement}
+     * @returns {T}
      */
     static replaceWith(el, ...newNodes) {
         const elem = TinyHtml._preElem(el, 'replaceWith');
@@ -1680,7 +1691,7 @@ class TinyHtml {
      * 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.
-     * @returns {TinyElement}
+     * @returns {this}
      */
     replaceWith(...newNodes) {
         return TinyHtml.replaceWith(this, ...newNodes);
@@ -1688,9 +1699,10 @@ class TinyHtml {
     /**
      * Appends the given element(s) to each target element in sequence.
      *
-     * @param {TinyNode | TinyNode[]} el - The element(s) to append.
+     * @template {TinyNode | TinyNode[]} T
+     * @param {T} el - The element(s) to append.
      * @param {TinyNode | TinyNode[]} targets - Target element(s) where content will be appended.
-     * @returns {TinyNode|TinyNode[]}
+     * @returns {T}
      */
     static appendTo(el, targets) {
         const elems = TinyHtml._preNodeElems(el, 'appendTo');
@@ -1704,7 +1716,7 @@ class TinyHtml {
      * Appends the given element(s) to each target element in sequence.
      *
      * @param {TinyNode | TinyNode[]} targets - Target element(s) where content will be appended.
-     * @returns {TinyNode|TinyNode[]}
+     * @returns {this}
      */
     appendTo(targets) {
         return TinyHtml.appendTo(this, targets);
@@ -1712,9 +1724,10 @@ class TinyHtml {
     /**
      * Prepends the given element(s) to each target element in sequence.
      *
-     * @param {TinyElement | TinyElement[]} el - The element(s) to prepend.
+     * @template {TinyElement | TinyElement[]} T
+     * @param {T} el - The element(s) to prepend.
      * @param {TinyElement | TinyElement[]} targets - Target element(s) where content will be prepended.
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {T}
      */
     static prependTo(el, targets) {
         const elems = TinyHtml._preElems(el, 'prependTo');
@@ -1731,7 +1744,7 @@ class TinyHtml {
      * Prepends the given element(s) to each target element in sequence.
      *
      * @param {TinyElement | TinyElement[]} targets - Target element(s) where content will be prepended.
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     prependTo(targets) {
         return TinyHtml.prependTo(this, targets);
@@ -1739,10 +1752,11 @@ class TinyHtml {
     /**
      * Inserts the element before a child of a given target, or before the target itself.
      *
-     * @param {TinyNode | TinyNode[]} el - The element(s) to insert.
+     * @template {TinyNode | TinyNode[]} T
+     * @param {T} 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.
-     * @returns {TinyNode|TinyNode[]}
+     * @returns {T}
      */
     static insertBefore(el, target, child = null) {
         const elem = TinyHtml._preNodeElem(el, 'insertBefore');
@@ -1758,7 +1772,7 @@ class TinyHtml {
      *
      * @param {TinyNode | TinyNode[]} target - The reference element where insertion happens.
      * @param {TinyNode | TinyNode[] | null} [child=null] - Optional child to insert before, defaults to target.
-     * @returns {TinyNode|TinyNode[]}
+     * @returns {this}
      */
     insertBefore(target, child) {
         return TinyHtml.insertBefore(this, target, child);
@@ -1766,10 +1780,11 @@ class TinyHtml {
     /**
      * Inserts the element after a child of a given target, or after the target itself.
      *
-     * @param {TinyNode | TinyNode[]} el - The element(s) to insert.
+     * @template {TinyNode | TinyNode[]} T
+     * @param {T} 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.
-     * @returns {TinyNode|TinyNode[]}
+     * @returns {T}
      */
     static insertAfter(el, target, child = null) {
         const elem = TinyHtml._preNodeElem(el, 'insertAfter');
@@ -1785,7 +1800,7 @@ class TinyHtml {
      *
      * @param {TinyNode | TinyNode[]} target - The reference element where insertion happens.
      * @param {TinyNode | TinyNode[] | null} [child=null] - Optional child to insert after, defaults to target.
-     * @returns {TinyNode|TinyNode[]}
+     * @returns {this}
      */
     insertAfter(target, child) {
         return TinyHtml.insertAfter(this, target, child);
@@ -1794,9 +1809,10 @@ class TinyHtml {
      * 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.
+     * @template {TinyNode | TinyNode[]} T
+     * @param {T} el - The new element(s) to insert.
      * @param {TinyNode | TinyNode[]} targets - The elements to be replaced.
-     * @returns {TinyNode|TinyNode[]}
+     * @returns {T}
      */
     static replaceAll(el, targets) {
         const elems = TinyHtml._preNodeElems(el, 'replaceAll');
@@ -1815,7 +1831,7 @@ class TinyHtml {
      * If multiple targets exist, the inserted elements are cloned accordingly.
      *
      * @param {TinyNode | TinyNode[]} targets - The elements to be replaced.
-     * @returns {TinyNode|TinyNode[]}
+     * @returns {this}
      */
     replaceAll(targets) {
         return TinyHtml.replaceAll(this, targets);
@@ -1837,7 +1853,7 @@ class TinyHtml {
     /**
      * 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|ConstructorElValues[]|NodeListOf<Element>|HTMLCollectionOf<Element>|NodeListOf<HTMLElement>} el - The element to wrap and manipulate.
+     * @param {TinyHtmlT} el - The element to wrap and manipulate.
      */
     constructor(el) {
         if (el instanceof TinyHtml)
@@ -1855,6 +1871,8 @@ class TinyHtml {
             this.#el = el;
         }
         else if (el instanceof NodeList || el instanceof HTMLCollection) {
+            /** @type {ConstructorElValues[]} */
+            // @ts-ignore
             const els = [...el];
             elCheck(els);
             this.#el = els;
@@ -2303,10 +2321,11 @@ class TinyHtml {
      * - If `prop` is a string, the `value` will be applied to that property.
      * - If `prop` is an object, each key-value pair will be applied as a CSS property and value.
      *
-     * @param {TinyHtmlElement|TinyHtmlElement[]} el - The element to inspect.
+     * @template {TinyHtmlElement|TinyHtmlElement[]} T
+     * @param {T} el - The element to inspect.
      * @param {string|Object} prop - The property name or an object with key-value pairs
      * @param {string|null} [value=null] - The value to set (if `prop` is a string)
-     * @returns {TinyHtmlElement|TinyHtmlElement[]}
+     * @returns {T}
      */
     static setStyle(el, prop, value = null) {
         TinyHtml._preHtmlElems(el, 'setStyle').forEach((elem) => {
@@ -2328,7 +2347,7 @@ class TinyHtml {
      *
      * @param {string|Object} prop - The property name or an object with key-value pairs
      * @param {string|null} [value=null] - The value to set (if `prop` is a string)
-     * @returns {TinyHtmlElement|TinyHtmlElement[]}
+     * @returns {this}
      */
     setStyle(prop, value) {
         return TinyHtml.setStyle(this, prop, value);
@@ -2415,9 +2434,10 @@ class TinyHtml {
     /**
      * Removes one or more inline CSS properties from the given element(s).
      *
-     * @param {TinyHtmlElement|TinyHtmlElement[]} el - A single element or an array of elements.
+     * @template {TinyHtmlElement|TinyHtmlElement[]} T
+     * @param {T} el - A single element or an array of elements.
      * @param {string|string[]} prop - A property name or an array of property names to remove.
-     * @returns {TinyHtmlElement|TinyHtmlElement[]}
+     * @returns {T}
      */
     static removeStyle(el, prop) {
         TinyHtml._preHtmlElems(el, 'removeStyle').forEach((elem) => {
@@ -2435,7 +2455,7 @@ class TinyHtml {
      * Removes one or more inline CSS properties from the given element(s).
      *
      * @param {string|string[]} prop - A property name or an array of property names to remove.
-     * @returns {TinyHtmlElement|TinyHtmlElement[]}
+     * @returns {this}
      */
     removeStyle(prop) {
         return TinyHtml.removeStyle(this, prop);
@@ -2445,11 +2465,12 @@ class TinyHtml {
      *
      * The current computed value is compared to `val1`. If it matches, the property is set to `val2`. Otherwise, it is set to `val1`.
      *
-     * @param {TinyHtmlElement|TinyHtmlElement[]} el - A single element or an array of elements.
+     * @template {TinyHtmlElement|TinyHtmlElement[]} T
+     * @param {T} el - A single element or an array of elements.
      * @param {string} prop - The CSS property to toggle.
      * @param {string} val1 - The first value (used as "current" check).
      * @param {string} val2 - The second value (used as the "alternative").
-     * @returns {TinyHtmlElement|TinyHtmlElement[]}
+     * @returns {T}
      */
     static toggleStyle(el, prop, val1, val2) {
         TinyHtml._preHtmlElems(el, 'toggleStyle').forEach((elem) => {
@@ -2467,7 +2488,7 @@ class TinyHtml {
      * @param {string} prop - The CSS property to toggle.
      * @param {string} val1 - The first value (used as "current" check).
      * @param {string} val2 - The second value (used as the "alternative").
-     * @returns {TinyHtmlElement|TinyHtmlElement[]}
+     * @returns {this}
      */
     toggleStyle(prop, val1, val2) {
         return TinyHtml.toggleStyle(this, prop, val1, val2);
@@ -2475,8 +2496,9 @@ class TinyHtml {
     /**
      * Removes all inline styles (`style` attribute) from the given element(s).
      *
-     * @param {TinyElement|TinyElement[]} el - A single element or an array of elements.
-     * @returns {TinyElement|TinyElement[]}
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el - A single element or an array of elements.
+     * @returns {T}
      */
     static clearStyle(el) {
         TinyHtml._preElems(el, 'clearStyle').forEach((elem) => elem.removeAttribute('style'));
@@ -2484,7 +2506,7 @@ class TinyHtml {
     }
     /**
      * Removes all inline styles (`style` attribute) from the given element(s).
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     clearStyle() {
         return TinyHtml.clearStyle(this);
@@ -2493,8 +2515,9 @@ class TinyHtml {
     /**
      * Focus the element.
      *
-     * @param {TinyHtmlElement} el - The element or a selector string.
-     * @returns {TinyHtmlElement}
+     * @template {TinyHtmlElement} T
+     * @param {T} el - The element or a selector string.
+     * @returns {T}
      */
     static focus(el) {
         const elem = TinyHtml._preHtmlElem(el, 'focus');
@@ -2503,7 +2526,7 @@ class TinyHtml {
     }
     /**
      * Focus the element.
-     * @returns {TinyHtmlElement}
+     * @returns {this}
      */
     focus() {
         return TinyHtml.focus(this);
@@ -2511,8 +2534,9 @@ class TinyHtml {
     /**
      * Blur the element.
      *
-     * @param {TinyHtmlElement} el - The element or a selector string.
-     * @returns {TinyHtmlElement}
+     * @template {TinyHtmlElement} T
+     * @param {T} el - The element or a selector string.
+     * @returns {T}
      */
     static blur(el) {
         const elem = TinyHtml._preHtmlElem(el, 'blur');
@@ -2521,7 +2545,7 @@ class TinyHtml {
     }
     /**
      * Blur the element.
-     * @returns {TinyHtmlElement}
+     * @returns {this}
      */
     blur() {
         return TinyHtml.blur(this);
@@ -2529,8 +2553,9 @@ class TinyHtml {
     /**
      * Select the text content of an input or textarea element.
      *
-     * @param {TinyHtml|HTMLInputElement|HTMLTextAreaElement} el - The element or a selector string.
-     * @returns {TinyHtml|HTMLInputElement|HTMLTextAreaElement}
+     * @template {TinyHtmlAny|HTMLInputElement|HTMLTextAreaElement} T
+     * @param {T} el - The element or a selector string.
+     * @returns {T}
      */
     static select(el) {
         const elem = TinyHtml._preHtmlElem(el, 'select');
@@ -2542,7 +2567,7 @@ class TinyHtml {
     }
     /**
      * Select the text content of an input or textarea element.
-     * @returns {TinyHtml|HTMLInputElement|HTMLTextAreaElement}
+     * @returns {this}
      */
     select() {
         return TinyHtml.select(this);
@@ -2715,10 +2740,11 @@ class TinyHtml {
     }
     /**
      * Sets the height of the element.
-     * @param {TinyHtmlElement} el - Target element.
+     * @template {TinyHtmlElement} T
+     * @param {T} el - Target element.
      * @param {string|number} value - Height value.
      * @throws {TypeError} If `value` is neither a string nor number.
-     * @returns {TinyHtmlElement}
+     * @returns {T}
      */
     static setHeight(el, value) {
         const elem = TinyHtml._preHtmlElem(el, 'setHeight');
@@ -2730,17 +2756,18 @@ class TinyHtml {
     /**
      * Sets the height of the element.
      * @param {string|number} value - Height value.
-     * @returns {TinyHtmlElement}
+     * @returns {this}
      */
     setHeight(value) {
         return TinyHtml.setHeight(this, value);
     }
     /**
      * Sets the width of the element.
-     * @param {TinyHtmlElement} el - Target element.
+     * @template {TinyHtmlElement} T
+     * @param {T} el - Target element.
      * @param {string|number} value - Width value.
      * @throws {TypeError} If `value` is neither a string nor number.
-     * @returns {TinyHtmlElement}
+     * @returns {T}
      */
     static setWidth(el, value) {
         const elem = TinyHtml._preHtmlElem(el, 'setWidth');
@@ -2752,7 +2779,7 @@ class TinyHtml {
     /**
      * Sets the width of the element.
      * @param {string|number} value - Width value.
-     * @returns {TinyHtmlElement}
+     * @returns {this}
      */
     setWidth(value) {
         return TinyHtml.setWidth(this, value);
@@ -2865,10 +2892,11 @@ class TinyHtml {
     /**
      * Applies an animation to one or multiple TinyElement instances.
      *
-     * @param {TinyElement|TinyElement[]} el - A single TinyElement or an array of TinyElements to animate.
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el - A single TinyElement or an array of TinyElements to animate.
      * @param {Keyframe[] | PropertyIndexedKeyframes | null} keyframes - The keyframes used to define the animation.
      * @param {number | KeyframeAnimationOptions} [ops] - Timing or configuration options for the animation.
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {T}
      */
     static animate(el, keyframes, ops) {
         TinyHtml._preElems(el, 'animate').forEach((elem) => elem.animate(keyframes, ops));
@@ -2879,7 +2907,7 @@ class TinyHtml {
      *
      * @param {Keyframe[] | PropertyIndexedKeyframes | null} keyframes - The keyframes used to define the animation.
      * @param {number | KeyframeAnimationOptions} [ops] - Timing or configuration options for the animation.
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     animate(keyframes, ops) {
         return TinyHtml.animate(this, keyframes, ops);
@@ -3038,7 +3066,8 @@ class TinyHtml {
      *
      * If `duration` or a valid `easing` is not provided, the scroll will be performed immediately.
      *
-     * @param {TinyElementAndWindow | TinyElementAndWindow[]} el - A single element, array of elements, or the window to scroll.
+     * @template {TinyElementAndWindow|TinyElementAndWindow[]} T
+     * @param {T} el - A single element, array of elements, or the window to scroll.
      * @param {Object} [settings={}] - Configuration object for the scroll animation.
      * @param {number} [settings.targetX] - The horizontal scroll target in pixels.
      * @param {number} [settings.targetY] - The vertical scroll target in pixels.
@@ -3046,7 +3075,7 @@ class TinyHtml {
      * @param {Easings} [settings.easing] - The easing function name to use for the scroll animation.
      * @param {OnScrollAnimation} [settings.onAnimation] - Optional callback invoked on each animation
      *   frame with the current scroll position, normalized animation time (`0` to `1`), and a completion flag.
-     * @returns {TinyElementAndWindow|TinyElementAndWindow[]}
+     * @returns {T}
      * @throws {TypeError} If `el` is not a valid element, array, or window.
      * @throws {TypeError} If `targetX` or `targetY` is defined but not a number.
      * @throws {TypeError} If `duration` is defined but not a number.
@@ -3138,16 +3167,17 @@ class TinyHtml {
      * @param {Easings} [settings.easing] - The easing function name to use for the scroll animation.
      * @param {OnScrollAnimation} [settings.onAnimation] - Optional callback invoked on each animation
      *   frame with the current scroll position, normalized animation time (`0` to `1`), and a completion flag.
-     * @returns {TinyElementAndWindow|TinyElementAndWindow[]}
+     * @returns {this}
      */
     scrollToXY({ targetX, targetY, duration, easing, onAnimation } = {}) {
         return TinyHtml.scrollToXY(this, { targetX, targetY, duration, easing, onAnimation });
     }
     /**
      * Sets the vertical scroll position.
-     * @param {TinyElementAndWindow|TinyElementAndWindow[]} el - Element or window.
+     * @template {TinyElementAndWindow|TinyElementAndWindow[]} T
+     * @param {T} el - Element or window.
      * @param {number} value - Scroll top value.
-     * @returns {TinyElementAndWindow|TinyElementAndWindow[]}
+     * @returns {T}
      */
     static setScrollTop(el, value) {
         if (typeof value !== 'number')
@@ -3157,16 +3187,17 @@ class TinyHtml {
     /**
      * Sets the vertical scroll position.
      * @param {number} value - Scroll top value.
-     * @returns {TinyElementAndWindow|TinyElementAndWindow[]}
+     * @returns {this}
      */
     setScrollTop(value) {
         return TinyHtml.setScrollTop(this, value);
     }
     /**
      * Sets the horizontal scroll position.
-     * @param {TinyElementAndWindow|TinyElementAndWindow[]} el - Element or window.
+     * @template {TinyElementAndWindow|TinyElementAndWindow[]} T
+     * @param {T} el - Element or window.
      * @param {number} value - Scroll left value.
-     * @returns {TinyElementAndWindow|TinyElementAndWindow[]}
+     * @returns {T}
      */
     static setScrollLeft(el, value) {
         if (typeof value !== 'number')
@@ -3176,7 +3207,7 @@ class TinyHtml {
     /**
      * Sets the horizontal scroll position.
      * @param {number} value - Scroll left value.
-     * @returns {TinyElementAndWindow|TinyElementAndWindow[]}
+     * @returns {this}
      */
     setScrollLeft(value) {
         return TinyHtml.setScrollLeft(this, value);
@@ -3273,7 +3304,10 @@ class TinyHtml {
     /////////////////////////////////////////////
     /**
      * Adds one or more CSS class names to the element.
-     * @type {(el: TinyElement|TinyElement[], ...tokens: string[]) => (TinyElement|TinyElement[])} - One or more class names to add.
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el
+     * @param {...string} args - One or more class names to add.
+     * @returns {T}
      */
     static addClass(el, ...args) {
         TinyHtml._preElems(el, 'addClass').forEach((elem) => elem.classList.add(...args));
@@ -3281,14 +3315,18 @@ class TinyHtml {
     }
     /**
      * Adds one or more CSS class names to the element.
-     * @type {(...tokens: string[]) => (TinyElement|TinyElement[])} - One or more class names to add.
+     * @param {...string} args - One or more class names to add.
+     * @returns {this}
      */
     addClass(...args) {
         return TinyHtml.addClass(this, ...args);
     }
     /**
      * Removes one or more CSS class names from the element.
-     * @type {(el: TinyElement|TinyElement[], ...tokens: string[]) => (TinyElement|TinyElement[])} - One or more class names to remove.
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el
+     * @param {...string} args - One or more class names to remove.
+     * @returns {T}
      */
     static removeClass(el, ...args) {
         TinyHtml._preElems(el, 'removeClass').forEach((elem) => elem.classList.remove(...args));
@@ -3296,7 +3334,8 @@ class TinyHtml {
     }
     /**
      * Removes one or more CSS class names from the element.
-     * @type {(...tokens: string[]) => (TinyElement|TinyElement[])} - One or more class names to remove.
+     * @param {...string} args - One or more class names to remove.
+     * @returns {this}
      */
     removeClass(...args) {
         return TinyHtml.removeClass(this, ...args);
@@ -3492,9 +3531,10 @@ class TinyHtml {
     }
     /**
      * Set BigInt content of elements.
-     * @param {TinyElement|TinyElement[]} el
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el
      * @param {bigint} value
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {T}
      */
     static setBigInt(el, value) {
         if (typeof value !== 'bigint')
@@ -3506,7 +3546,7 @@ class TinyHtml {
     /**
      * Set BigInt content of the element.
      * @param {bigint} value
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     setBigInt(value) {
         return TinyHtml.setBigInt(this, value);
@@ -3533,9 +3573,10 @@ class TinyHtml {
     }
     /**
      * Set Date content of elements.
-     * @param {TinyElement|TinyElement[]} el
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el
      * @param {Date} value
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {T}
      */
     static setDate(el, value) {
         if (!(value instanceof Date) || Number.isNaN(value.getTime()))
@@ -3547,7 +3588,7 @@ class TinyHtml {
     /**
      * Set Date content of the element.
      * @param {Date} value
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     setDate(value) {
         return TinyHtml.setDate(this, value);
@@ -3578,11 +3619,12 @@ class TinyHtml {
     }
     /**
      * Set JSON content of elements.
-     * @param {TinyElement|TinyElement[]} el
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el
      * @param {any} value - A JavaScript value, usually an object or array, to be converted.
      * @param {(this: any, key: string, value: any) => any} [replacer] - A function that transforms the results.
      * @param {number|string} [space] - Indentation level or string for formatting.
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {T}
      */
     static setJson(el, value, replacer, space) {
         const data = JSON.stringify(value, replacer, space);
@@ -3594,7 +3636,7 @@ class TinyHtml {
      * @param {any} value - A JavaScript value, usually an object or array, to be converted.
      * @param {(this: any, key: string, value: any) => any} [replacer] - A function that transforms the results.
      * @param {number|string} [space] - Indentation level or string for formatting.
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     setJson(value, replacer, space) {
         return TinyHtml.setJson(this, value, replacer, space);
@@ -3617,9 +3659,10 @@ class TinyHtml {
     }
     /**
      * Set number content of elements.
-     * @param {TinyElement|TinyElement[]} el
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el
      * @param {number} value
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {T}
      */
     static setNumber(el, value) {
         if (typeof value !== 'number')
@@ -3631,7 +3674,7 @@ class TinyHtml {
     /**
      * Set number content of the element.
      * @param {number} value
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     setNumber(value) {
         return TinyHtml.setNumber(this, value);
@@ -3657,9 +3700,10 @@ class TinyHtml {
     }
     /**
      * Set boolean content of elements.
-     * @param {TinyElement|TinyElement[]} el
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el
      * @param {boolean} value
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {T}
      */
     static setBoolean(el, value) {
         if (typeof value !== 'boolean')
@@ -3671,7 +3715,7 @@ class TinyHtml {
     /**
      * Set boolean content of the element.
      * @param {boolean} value
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     setBoolean(value) {
         return TinyHtml.setBoolean(this, value);
@@ -3694,9 +3738,10 @@ class TinyHtml {
     }
     /**
      * Set string content of elements.
-     * @param {TinyElement|TinyElement[]} el
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el
      * @param {string} value
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {T}
      */
     static setString(el, value) {
         if (typeof value !== 'string')
@@ -3707,7 +3752,7 @@ class TinyHtml {
     /**
      * Set string content of the element.
      * @param {string} value
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     setString(value) {
         return TinyHtml.setString(this, value);
@@ -3730,9 +3775,10 @@ class TinyHtml {
     }
     /**
      * Set text content of elements.
-     * @param {TinyElement|TinyElement[]} el
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el
      * @param {*} value
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {T}
      */
     static setText(el, value) {
         const data = typeof value !== 'undefined' && value !== null ? String(value) : '';
@@ -3742,15 +3788,16 @@ class TinyHtml {
     /**
      * Set text content of the element.
      * @param {*} value
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     setText(value) {
         return TinyHtml.setText(this, value);
     }
     /**
      * Remove all child nodes from each element.
-     * @param {TinyElement|TinyElement[]} el
-     * @returns {TinyElement|TinyElement[]}
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el
+     * @returns {T}
      */
     static empty(el) {
         TinyHtml._preElems(el, 'empty').forEach((el) => (el.textContent = ''));
@@ -3758,7 +3805,7 @@ class TinyHtml {
     }
     /**
      * Remove all child nodes of the element.
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     empty() {
         return TinyHtml.empty(this);
@@ -3783,9 +3830,10 @@ class TinyHtml {
     }
     /**
      * Set the innerHTML of each element.
-     * @param {TinyElement|TinyElement[]} el
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el
      * @param {string} value
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {T}
      */
     static setHtml(el, value) {
         if (typeof value !== 'string')
@@ -3796,7 +3844,7 @@ class TinyHtml {
     /**
      * Set the innerHTML of the element.
      * @param {string} value
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     setHtml(value) {
         return TinyHtml.setHtml(this, value);
@@ -3914,10 +3962,11 @@ class TinyHtml {
      * 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.
+     * @template {TinyInputElement|TinyInputElement[]} T
+     * @param {T} 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.
-     * @returns {TinyInputElement|TinyInputElement[]}
+     * @returns {T}
      */
     static setVal(el, value) {
         TinyHtml._preInputElems(el, 'setVal').forEach((elem) => {
@@ -3963,7 +4012,7 @@ class TinyHtml {
      * 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.
-     * @returns {TinyInputElement|TinyInputElement[]}
+     * @returns {this}
      * @throws {Error} If the computed value is not a valid string or boolean.
      */
     setVal(value) {
@@ -4321,11 +4370,12 @@ class TinyHtml {
     /**
      * Registers an event listener on the specified element.
      *
-     * @param {TinyEventTarget|TinyEventTarget[]} el - The target to listen on.
+     * @template {TinyEventTarget|TinyEventTarget[]} T
+     * @param {T} el - The target to listen on.
      * @param {string|string[]} events - The event type (e.g. 'click', 'keydown').
      * @param {EventListenerOrEventListenerObject|null} handler - The callback function to run on event.
      * @param {EventRegistryOptions} [options] - Optional event listener options.
-     * @returns {TinyEventTarget|TinyEventTarget[]}
+     * @returns {T}
      */
     static on(el, events, handler, options) {
         if (typeof events !== 'string' &&
@@ -4354,7 +4404,7 @@ class TinyHtml {
      * @param {string|string[]} events - The event type (e.g. 'click', 'keydown').
      * @param {EventListenerOrEventListenerObject|null} handler - The callback function to run on event.
      * @param {EventRegistryOptions} [options] - Optional event listener options.
-     * @returns {TinyEventTarget|TinyEventTarget[]}
+     * @returns {this}
      */
     on(events, handler, options) {
         return TinyHtml.on(this, events, handler, options);
@@ -4362,11 +4412,12 @@ class TinyHtml {
     /**
      * Registers an event listener that runs only once, then is removed.
      *
-     * @param {TinyEventTarget|TinyEventTarget[]} el - The target to listen on.
+     * @template {TinyEventTarget|TinyEventTarget[]} T
+     * @param {T} el - The target to listen on.
      * @param {string|string[]} events - The event type (e.g. 'click', 'keydown').
      * @param {EventListenerOrEventListenerObject} handler - The callback function to run on event.
      * @param {EventRegistryOptions} [options={}] - Optional event listener options.
-     * @returns {TinyEventTarget|TinyEventTarget[]}
+     * @returns {T}
      */
     static once(el, events, handler, options = {}) {
         if (typeof events !== 'string' &&
@@ -4393,7 +4444,7 @@ class TinyHtml {
      * @param {string|string[]} events - The event type (e.g. 'click', 'keydown').
      * @param {EventListenerOrEventListenerObject} handler - The callback function to run on event.
      * @param {EventRegistryOptions} [options={}] - Optional event listener options.
-     * @returns {TinyEventTarget|TinyEventTarget[]}
+     * @returns {this}
      */
     once(events, handler, options = {}) {
         return TinyHtml.once(this, events, handler, options);
@@ -4401,11 +4452,12 @@ class TinyHtml {
     /**
      * Removes a specific event listener from an element.
      *
-     * @param {TinyEventTarget|TinyEventTarget[]} el - The target element.
+     * @template {TinyEventTarget|TinyEventTarget[]} T
+     * @param {T} el - The target element.
      * @param {string|string[]} events - The event type.
      * @param {EventListenerOrEventListenerObject|null} handler - The function originally bound to the event.
      * @param {boolean|EventListenerOptions} [options] - Optional listener options.
-     * @returns {TinyEventTarget|TinyEventTarget[]}
+     * @returns {T}
      */
     static off(el, events, handler, options) {
         if (typeof events !== 'string' &&
@@ -4432,7 +4484,7 @@ class TinyHtml {
      * @param {string|string[]} events - The event type.
      * @param {EventListenerOrEventListenerObject|null} handler - The function originally bound to the event.
      * @param {boolean|EventListenerOptions} [options] - Optional listener options.
-     * @returns {TinyEventTarget|TinyEventTarget[]}
+     * @returns {this}
      */
     off(events, handler, options) {
         return TinyHtml.off(this, events, handler, options);
@@ -4440,9 +4492,10 @@ class TinyHtml {
     /**
      * Removes all event listeners of a specific type from the element.
      *
-     * @param {TinyEventTarget|TinyEventTarget[]} el - The target element.
+     * @template {TinyEventTarget|TinyEventTarget[]} T
+     * @param {T} el - The target element.
      * @param {string|string[]} events - The event type to remove (e.g. 'click').
-     * @returns {TinyEventTarget|TinyEventTarget[]}
+     * @returns {T}
      */
     static offAll(el, events) {
         if (typeof events !== 'string' &&
@@ -4467,7 +4520,7 @@ class TinyHtml {
      * Removes all event listeners of a specific type from the element.
      *
      * @param {string|string[]} events - The event type to remove (e.g. 'click').
-     * @returns {TinyEventTarget|TinyEventTarget[]}
+     * @returns {this}
      */
     offAll(events) {
         return TinyHtml.offAll(this, events);
@@ -4475,10 +4528,11 @@ class TinyHtml {
     /**
      * Removes all event listeners of all types from the element.
      *
-     * @param {TinyEventTarget|TinyEventTarget[]} el - The target element.
+     * @template {TinyEventTarget|TinyEventTarget[]} T
+     * @param {T} el - The target element.
      * @param {((handler: EventListenerOrEventListenerObject|null, event: string) => boolean)|null} [filterFn=null] -
      *        Optional filter function to selectively remove specific handlers.
-     * @returns {TinyEventTarget|TinyEventTarget[]}
+     * @returns {T}
      */
     static offAllTypes(el, filterFn = null) {
         if (filterFn !== null && typeof filterFn !== 'function')
@@ -4503,7 +4557,7 @@ class TinyHtml {
      *
      * @param {((handler: EventListenerOrEventListenerObject|null, event: string) => boolean)|null} [filterFn=null] -
      *        Optional filter function to selectively remove specific handlers.
-     * @returns {TinyEventTarget|TinyEventTarget[]}
+     * @returns {this}
      */
     offAllTypes(filterFn = null) {
         return TinyHtml.offAllTypes(this, filterFn);
@@ -4511,10 +4565,11 @@ class TinyHtml {
     /**
      * Triggers all handlers associated with a specific event on the given element.
      *
-     * @param {TinyEventTarget|TinyEventTarget[]} el - Target element where the event should be triggered.
+     * @template {TinyEventTarget|TinyEventTarget[]} T
+     * @param {T} el - Target element where the event should be triggered.
      * @param {string|string[]} events - Name of the event to trigger.
      * @param {Event|CustomEvent|CustomEventInit} [payload] - Optional event object or data to pass.
-     * @returns {TinyEventTarget|TinyEventTarget[]}
+     * @returns {T}
      */
     static trigger(el, events, payload = {}) {
         if (typeof events !== 'string' &&
@@ -4541,7 +4596,7 @@ class TinyHtml {
      *
      * @param {string|string[]} events - Name of the event to trigger.
      * @param {Event|CustomEvent|CustomEventInit} [payload] - Optional event object or data to pass.
-     * @returns {TinyEventTarget|TinyEventTarget[]}
+     * @returns {this}
      */
     trigger(events, payload = {}) {
         return TinyHtml.trigger(this, events, payload);
@@ -4634,10 +4689,11 @@ class TinyHtml {
     }
     /**
      * Set an attribute on an element.
-     * @param {TinyElement|TinyElement[]} el
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el
      * @param {string} name
      * @param {string|null} [value=null]
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {T}
      */
     static setAttr(el, name, value = null) {
         if (typeof name !== 'string')
@@ -4656,16 +4712,17 @@ class TinyHtml {
      * Set an attribute on an element.
      * @param {string} name
      * @param {string|null} [value=null]
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     setAttr(name, value) {
         return TinyHtml.setAttr(this, name, value);
     }
     /**
      * Remove attribute(s) from an element.
-     * @param {TinyElement|TinyElement[]} el
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el
      * @param {string} name Space-separated list of attributes.
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {T}
      */
     static removeAttr(el, name) {
         if (typeof name !== 'string')
@@ -4676,7 +4733,7 @@ class TinyHtml {
     /**
      * Remove attribute(s) from an element.
      * @param {string} name Space-separated list of attributes.
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     removeAttr(name) {
         return TinyHtml.removeAttr(this, name);
@@ -4724,9 +4781,10 @@ class TinyHtml {
     }
     /**
      * Set a property on an element.
-     * @param {TinyElement|TinyElement[]} el
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el
      * @param {string} name
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {T}
      */
     static addProp(el, name) {
         if (typeof name !== 'string')
@@ -4740,16 +4798,17 @@ class TinyHtml {
     /**
      * Set a property on an element.
      * @param {string} name
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     addProp(name) {
         return TinyHtml.addProp(this, name);
     }
     /**
      * Remove a property from an element.
-     * @param {TinyElement|TinyElement[]} el
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el
      * @param {string} name
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {T}
      */
     static removeProp(el, name) {
         if (typeof name !== 'string')
@@ -4763,16 +4822,18 @@ class TinyHtml {
     /**
      * Remove a property from an element.
      * @param {string} name
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     removeProp(name) {
         return TinyHtml.removeProp(this, name);
     }
     /**
      * Toggle a boolean property.
-     * @param {TinyElement|TinyElement[]} el
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el
      * @param {string} name
      * @param {boolean} [force]
+     * @returns {T}
      */
     static toggleProp(el, name, force) {
         if (typeof name !== 'string')
@@ -4788,11 +4849,13 @@ class TinyHtml {
             else
                 TinyHtml.removeProp(elem, name);
         });
+        return el;
     }
     /**
      * Toggle a boolean property.
      * @param {string} name
      * @param {boolean} [force]
+     * @returns {this}
      */
     toggleProp(name, force) {
         return TinyHtml.toggleProp(this, name, force);
@@ -4800,8 +4863,9 @@ class TinyHtml {
     /////////////////////////////////////////////////////
     /**
      * Removes an element from the DOM.
-     * @param {TinyElement|TinyElement[]} el - The DOM element or selector to remove.
-     * @returns {TinyElement|TinyElement[]}
+     * @template {TinyElement|TinyElement[]} T
+     * @param {T} el - The DOM element or selector to remove.
+     * @returns {T}
      */
     static remove(el) {
         TinyHtml._preElems(el, 'remove').forEach((elem) => elem.remove());
@@ -4809,7 +4873,7 @@ class TinyHtml {
     }
     /**
      * Removes the element from the DOM.
-     * @returns {TinyElement|TinyElement[]}
+     * @returns {this}
      */
     remove() {
         return TinyHtml.remove(this);