tiny-essentials 1.14.0 → 1.16.0

package/dist/v1/TinyBasicsEs.js

@@ -2143,6 +2143,16 @@ __webpack_require__.r(__webpack_exports__);
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
   addAiMarkerShortcut: () => (/* reexport */ addAiMarkerShortcut),
+  areElsCollBottom: () => (/* reexport */ areElsCollBottom),
+  areElsCollLeft: () => (/* reexport */ areElsCollLeft),
+  areElsCollPerfBottom: () => (/* reexport */ areElsCollPerfBottom),
+  areElsCollPerfLeft: () => (/* reexport */ areElsCollPerfLeft),
+  areElsCollPerfRight: () => (/* reexport */ areElsCollPerfRight),
+  areElsCollPerfTop: () => (/* reexport */ areElsCollPerfTop),
+  areElsCollRight: () => (/* reexport */ areElsCollRight),
+  areElsCollTop: () => (/* reexport */ areElsCollTop),
+  areElsColliding: () => (/* reexport */ areElsColliding),
+  areElsPerfColliding: () => (/* reexport */ areElsPerfColliding),
   areHtmlElsColliding: () => (/* reexport */ areHtmlElsColliding),
   arraySortPositions: () => (/* reexport */ arraySortPositions),
   asyncReplace: () => (/* reexport */ asyncReplace),
@@ -2158,16 +2168,26 @@ __webpack_require__.d(__webpack_exports__, {
   formatTimer: () => (/* reexport */ formatTimer),
   genFibonacciSeq: () => (/* reexport */ genFibonacciSeq),
   getAge: () => (/* reexport */ getAge),
+  getElsCollDetails: () => (/* reexport */ getElsCollDetails),
+  getElsCollDirDepth: () => (/* reexport */ getElsCollDirDepth),
+  getElsCollOverlap: () => (/* reexport */ getElsCollOverlap),
+  getElsCollOverlapPos: () => (/* reexport */ getElsCollOverlapPos),
+  getElsColliding: () => (/* reexport */ getElsColliding),
+  getElsPerfColliding: () => (/* reexport */ getElsPerfColliding),
+  getElsRelativeCenterOffset: () => (/* reexport */ getElsRelativeCenterOffset),
   getHtmlElBorders: () => (/* reexport */ getHtmlElBorders),
   getHtmlElBordersWidth: () => (/* reexport */ getHtmlElBordersWidth),
   getHtmlElMargin: () => (/* reexport */ getHtmlElMargin),
   getHtmlElPadding: () => (/* reexport */ getHtmlElPadding),
+  getRectCenter: () => (/* reexport */ getRectCenter),
   getSimplePerc: () => (/* reexport */ getSimplePerc),
   getTimeDuration: () => (/* reexport */ getTimeDuration),
   installWindowHiddenScript: () => (/* reexport */ installWindowHiddenScript),
   isFullScreenMode: () => (/* reexport */ isFullScreenMode),
+  isInViewport: () => (/* reexport */ isInViewport),
   isJsonObject: () => (/* reexport */ isJsonObject),
   isScreenFilled: () => (/* reexport */ isScreenFilled),
+  isScrolledIntoView: () => (/* reexport */ isScrolledIntoView),
   objType: () => (/* reexport */ objType),
   offFullScreenChange: () => (/* reexport */ offFullScreenChange),
   onFullScreenChange: () => (/* reexport */ onFullScreenChange),
@@ -2184,6 +2204,30 @@ __webpack_require__.d(__webpack_exports__, {
   toTitleCaseLowerFirst: () => (/* reexport */ toTitleCaseLowerFirst)
 });
 
+// NAMESPACE OBJECT: ./src/v1/basics/collision.mjs
+var collision_namespaceObject = {};
+__webpack_require__.r(collision_namespaceObject);
+__webpack_require__.d(collision_namespaceObject, {
+  areElsCollBottom: () => (areElsCollBottom),
+  areElsCollLeft: () => (areElsCollLeft),
+  areElsCollPerfBottom: () => (areElsCollPerfBottom),
+  areElsCollPerfLeft: () => (areElsCollPerfLeft),
+  areElsCollPerfRight: () => (areElsCollPerfRight),
+  areElsCollPerfTop: () => (areElsCollPerfTop),
+  areElsCollRight: () => (areElsCollRight),
+  areElsCollTop: () => (areElsCollTop),
+  areElsColliding: () => (areElsColliding),
+  areElsPerfColliding: () => (areElsPerfColliding),
+  getElsCollDetails: () => (getElsCollDetails),
+  getElsCollDirDepth: () => (getElsCollDirDepth),
+  getElsCollOverlap: () => (getElsCollOverlap),
+  getElsCollOverlapPos: () => (getElsCollOverlapPos),
+  getElsColliding: () => (getElsColliding),
+  getElsPerfColliding: () => (getElsPerfColliding),
+  getElsRelativeCenterOffset: () => (getElsRelativeCenterOffset),
+  getRectCenter: () => (getRectCenter)
+});
+
 ;// ./src/legacy/libs/arraySortPositions.mjs
 /**
  * Generates a comparator function to sort an array of objects by a given key.
@@ -2854,24 +2898,7 @@ extendObjType([
 ;// ./src/v1/basics/html.mjs
 
 
-/**
- * Checks if two DOM elements are colliding on the screen.
- *
- * @param {Element} elem1 - First DOM element.
- * @param {Element} elem2 - Second DOM element.
- * @returns {boolean} - Returns true if the elements are colliding.
- */
-function areHtmlElsColliding(elem1, elem2) {
-  const rect1 = elem1.getBoundingClientRect();
-  const rect2 = elem2.getBoundingClientRect();
-
-  return !(
-    rect1.right < rect2.left ||
-    rect1.left > rect2.right ||
-    rect1.bottom < rect2.top ||
-    rect1.top > rect2.bottom
-  );
-}
+/////////////////////////////////////////////////////////////////
 
 /**
  * Reads the contents of a file using the specified FileReader method.
@@ -3092,89 +3119,7 @@ async function fetchJson(
   );
 }
 
-/**
- * @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
- */
-
-/**
- * Returns the total border width and individual sides from `border{Side}Width` CSS properties.
- *
- * @param {Element} el - The target DOM element.
- * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) border widths, and each side individually.
- */
-const getHtmlElBordersWidth = (el) => {
-  const styles = getComputedStyle(el);
-  const left = parseFloat(styles.borderLeftWidth) || 0;
-  const right = parseFloat(styles.borderRightWidth) || 0;
-  const top = parseFloat(styles.borderTopWidth) || 0;
-  const bottom = parseFloat(styles.borderBottomWidth) || 0;
-  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.
- *
- * @param {Element} el - The target DOM element.
- * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) border sizes, and each side individually.
- */
-const getHtmlElBorders = (el) => {
-  const styles = getComputedStyle(el);
-  const left = parseFloat(styles.borderLeft) || 0;
-  const right = parseFloat(styles.borderRight) || 0;
-  const top = parseFloat(styles.borderTop) || 0;
-  const bottom = parseFloat(styles.borderBottom) || 0;
-  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.
- *
- * @param {Element} el - The target DOM element.
- * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) margins, and each side individually.
- */
-const getHtmlElMargin = (el) => {
-  const styles = getComputedStyle(el);
-  const left = parseFloat(styles.marginLeft) || 0;
-  const right = parseFloat(styles.marginRight) || 0;
-  const top = parseFloat(styles.marginTop) || 0;
-  const bottom = parseFloat(styles.marginBottom) || 0;
-
-  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.
- *
- * @param {Element} el - The target DOM element.
- * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) paddings, and each side individually.
- */
-const getHtmlElPadding = (el) => {
-  const styles = getComputedStyle(el);
-  const left = parseFloat(styles.paddingLeft) || 0;
-  const right = parseFloat(styles.paddingRight) || 0;
-  const top = parseFloat(styles.paddingTop) || 0;
-  const bottom = parseFloat(styles.paddingBottom) || 0;
-
-  const x = left + right;
-  const y = top + bottom;
-
-  return { x, y, left, right, top, bottom };
-};
+///////////////////////////////////////////////////////////////////////////////
 
 /**
  * Installs a script that toggles CSS classes on a given element
@@ -3182,7 +3127,7 @@ const getHtmlElPadding = (el) => {
  * triggers callbacks on visibility changes.
  *
  * @param {Object} [settings={}]
- * @param {HTMLElement} [settings.element=document.body] - The element to receive visibility classes.
+ * @param {Element} [settings.element=document.body] - The element to receive visibility classes.
  * @param {string} [settings.hiddenClass='windowHidden'] - CSS class applied when the page is hidden.
  * @param {string} [settings.visibleClass='windowVisible'] - CSS class applied when the page is visible.
  * @param {() => void} [settings.onVisible] - Callback called when page becomes visible.
@@ -3197,8 +3142,8 @@ function installWindowHiddenScript({
   onVisible,
   onHidden,
 } = {}) {
-  if (!(element instanceof HTMLElement))
-    throw new TypeError(`"element" must be an instance of HTMLElement.`);
+  if (!(element instanceof Element))
+    throw new TypeError(`"element" must be an instance of Element.`);
   if (typeof hiddenClass !== 'string') throw new TypeError(`"hiddenClass" must be a string.`);
   if (typeof visibleClass !== 'string') throw new TypeError(`"visibleClass" must be a string.`);
   if (onVisible !== undefined && typeof onVisible !== 'function')
@@ -3299,224 +3244,4592 @@ function installWindowHiddenScript({
   return uninstall;
 }
 
-;// ./src/v1/basics/fullScreen.mjs
+;// ./src/v1/basics/collision.mjs
 /**
- * Checks if the document is currently in fullscreen mode.
+ * A direction relative to a rectangle.
  *
- * @returns {boolean}
+ * Represents one of the four cardinal directions from the perspective of the element.
+ *
+ * @typedef {'top' | 'bottom' | 'left' | 'right'} Dirs
  */
-const documentIsFullScreen = () =>
-  !!(
-    document.fullscreenElement ||
-    // @ts-ignore
-    document.webkitFullscreenElement ||
-    // @ts-ignore
-    document.mozFullScreenElement ||
-    // @ts-ignore
-    document.msFullscreenElement ||
-    // @ts-ignore
-    document.webkitIsFullScreen ||
-    // @ts-ignore
-    document.mozFullScreen
-  );
 
 /**
- * Checks if the window occupies the entire screen dimensions.
+ * Represents all directional aspects of a collision.
  *
- * @returns {boolean}
+ * @typedef {Object} CollDirs
+ * @property {Dirs | 'center' | null} in - The dominant direction of entry. `'center'` if all sides are equally overlapped. `null` if no collision.
+ * @property {Dirs | null} x - The horizontal direction (`'left'` or `'right'`) the collision is biased toward, or `null`.
+ * @property {Dirs | null} y - The vertical direction (`'top'` or `'bottom'`) the collision is biased toward, or `null`.
  */
-const isScreenFilled = () =>
-  window.innerHeight === screen.height && window.innerWidth === screen.width;
 
 /**
- * Checks if fullscreen mode is active either via document API or by matching screen dimensions.
+ * Indicates if a collision is in the negative direction (rect2 is outside rect1).
  *
- * @returns {boolean}
+ * @typedef {Object} NegCollDirs
+ * @property {Dirs | null} x - Horizontal direction of negative overlap, if any.
+ * @property {Dirs | null} y - Vertical direction of negative overlap, if any.
  */
-const isFullScreenMode = () => documentIsFullScreen() || isScreenFilled();
 
 /**
- * Requests fullscreen mode for the document.
+ * Collision depth values from each side of rect2 inside rect1.
  *
- * @param {FullscreenOptions} [ops]
- * @returns {Promise<void>}
+ * Positive values indicate penetration; negative values indicate gaps.
+ *
+ * @typedef {Object} CollData
+ * @property {number} top - Depth from rect2's top into rect1.
+ * @property {number} bottom - Depth from rect2's bottom into rect1.
+ * @property {number} left - Depth from rect2's left into rect1.
+ * @property {number} right - Depth from rect2's right into rect1.
  */
-const requestFullScreen = (ops) =>
-  new Promise(async (resolve, reject) => {
-    const docElm = document.documentElement;
-    try {
-      if (docElm.requestFullscreen) {
-        await docElm.requestFullscreen(ops);
-        // @ts-ignore
-      } else if (docElm.mozRequestFullScreen) {
-        // @ts-ignore
-        docElm.mozRequestFullScreen(ops);
-        // @ts-ignore
-      } else if (docElm.webkitRequestFullScreen) {
-        // @ts-ignore
-        docElm.webkitRequestFullScreen(ops);
-        // @ts-ignore
-      } else if (docElm.msRequestFullscreen) {
-        // @ts-ignore
-        docElm.msRequestFullscreen(ops);
-      }
-      resolve();
-    } catch (err) {
-      reject(err);
-    }
-  });
 
 /**
- * Exits fullscreen mode.
+ * X and Y offset representing center difference between two rectangles.
  *
- * @returns {Promise<void>}
+ * Useful to measure how far one element's center is from another.
+ *
+ * @typedef {Object} CollCenter
+ * @property {number} x - Horizontal distance in pixels from rect1's center to rect2's center.
+ * @property {number} y - Vertical distance in pixels from rect1's center to rect2's center.
  */
-const exitFullScreen = () =>
-  new Promise((resolve, reject) => {
-    if (document.exitFullscreen) {
-      document.exitFullscreen().then(resolve).catch(reject);
-    } else {
-      try {
-        // @ts-ignore
-        if (document.mozCancelFullScreen) document.mozCancelFullScreen();
-        // @ts-ignore
-        else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen();
-        // @ts-ignore
-        else if (document.msExitFullscreen) document.msExitFullscreen();
-        else throw new Error('Fullscreen API is not supported');
-        resolve();
-      } catch (err) {
-        reject(err);
-      }
-    }
-  });
-
-/** @type {readonly string[]} */
-const fullScreenEvents = [
-  'fullscreenchange',
-  'webkitfullscreenchange',
-  'mozfullscreenchange',
-  'MSFullscreenChange',
-];
 
 /**
- * Attaches a listener to fullscreen change events.
+ * Represents a rectangular area in absolute pixel values.
  *
- * @param {EventListenerOrEventListenerObject} listener
- * @param {boolean|AddEventListenerOptions} [ops]
- * @returns {void}
+ * Similar to `DOMRect`, this object describes the dimensions and position of a box
+ * in the 2D plane, typically representing an element's bounding box.
+ *
+ * @typedef {Object} ObjRect
+ * @property {number} height - The total height of the rectangle in pixels.
+ * @property {number} width - The total width of the rectangle in pixels.
+ * @property {number} top - The Y-coordinate of the top edge of the rectangle.
+ * @property {number} bottom - The Y-coordinate of the bottom edge of the rectangle.
+ * @property {number} left - The X-coordinate of the left edge of the rectangle.
+ * @property {number} right - The X-coordinate of the right edge of the rectangle.
  */
-const onFullScreenChange = (listener, ops) => {
-  fullScreenEvents.forEach((event) => {
-    document.addEventListener(event, listener, ops);
-  });
-};
+
+// Normal collision checks (loose overlap detection)
 
 /**
- * Removes a listener from fullscreen change events.
+ * Checks if rect1 is completely above rect2 (no vertical overlap).
  *
- * @param {EventListenerOrEventListenerObject} listener
- * @param {boolean|AddEventListenerOptions} [ops]
- * @returns {void}
+ * @param {ObjRect} rect1 - The bounding rectangle of the first element.
+ * @param {ObjRect} rect2 - The bounding rectangle of the second element.
+ * @returns {boolean} True if rect1 is entirely above rect2.
  */
-const offFullScreenChange = (listener, ops) => {
-  fullScreenEvents.forEach((event) => {
-    document.removeEventListener(event, listener, ops);
-  });
-};
+const areElsCollTop = (rect1, rect2) => rect1.bottom < rect2.top;
 
-;// ./src/v1/basics/simpleMath.mjs
 /**
- * Executes a Rule of Three calculation.
- *
- * @param {number} val1 - The first reference value (numerator in direct proportion, denominator in inverse).
- * @param {number} val2 - The second reference value (denominator in direct proportion, numerator in inverse).
- * @param {number} val3 - The third value (numerator in direct proportion, denominator in inverse).
- * @param {boolean} [inverse] - Whether the calculation should use inverse proportion (true for inverse, false for direct).
- * @returns {number} The result of the Rule of Three operation.
- *
- * Rule of Three Formula (Direct Proportion):
- *      val1 / val2 = val3 / result
- *
- * For Inverse Proportion:
- *      val1 / val3 = val2 / result
- *
- * Visual Representation:
- *
- * For Direct Proportion:
- *      val1      val2
- *      -----  =  ------
- *      val3      result
- *
- * For Inverse Proportion:
- *      val1      val2
- *      -----  =  ------
- *      val3      result
+ * Checks if rect1 is completely below rect2 (no vertical overlap).
  *
- * @example
- * // Direct proportion:
- * ruleOfThree.execute(2, 6, 3, false); // → 9
+ * @param {ObjRect} rect1
+ * @param {ObjRect} rect2
+ * @returns {boolean} True if rect1 is entirely below rect2.
+ */
+const areElsCollBottom = (rect1, rect2) => rect1.top > rect2.bottom;
+
+/**
+ * Checks if rect1 is completely to the left of rect2 (no horizontal overlap).
  *
- * @example
- * // Inverse proportion:
- * ruleOfThree.execute(2, 6, 3, true); // → 4
+ * @param {ObjRect} rect1
+ * @param {ObjRect} rect2
+ * @returns {boolean} True if rect1 is entirely to the left of rect2.
  */
-function ruleOfThree(val1, val2, val3, inverse = false) {
-  return inverse ? Number(val1 * val2) / val3 : Number(val3 * val2) / val1;
-}
+const areElsCollLeft = (rect1, rect2) => rect1.right < rect2.left;
 
 /**
- * Calculates a percentage of a given base value.
- * @param {number} price - The base value.
- * @param {number} percentage - The percentage to apply.
- * @returns {number} The result of the percentage calculation.
+ * Checks if rect1 is completely to the right of rect2 (no horizontal overlap).
  *
- * @example
- * getSimplePerc(200, 15); // 30
+ * @param {ObjRect} rect1
+ * @param {ObjRect} rect2
+ * @returns {boolean} True if rect1 is entirely to the right of rect2.
  */
-function getSimplePerc(price, percentage) {
-  return price * (percentage / 100);
-}
+const areElsCollRight = (rect1, rect2) => rect1.left > rect2.right;
+
+// Perfect collision checks (touch included)
 
 /**
- * Calculates the age based on the given date.
+ * Checks if rect1 is perfectly above rect2 (no vertical touch or overlap).
  *
- * @param {number|string|Date} timeData - The birth date (can be a timestamp, ISO string, or Date object).
- * @param {Date|null} [now=null] - The Date object representing the current date. Defaults to the current date and time if not provided.
- * @returns {number|null} The age in years, or null if `timeData` is not provided or invalid.
+ * @param {ObjRect} rect1
+ * @param {ObjRect} rect2
+ * @returns {boolean} True if rect1 is fully above or touching rect2's top.
  */
-function getAge(timeData = 0, now = null) {
-  if (typeof timeData !== 'undefined' && timeData !== null && timeData !== 0) {
-    const birthDate = new Date(timeData);
-    if (Number.isNaN(birthDate.getTime())) return null;
+const areElsCollPerfTop = (rect1, rect2) => rect1.bottom <= rect2.top;
 
-    const currentDate = now instanceof Date ? now : new Date();
+/**
+ * Checks if rect1 is perfectly below rect2 (no vertical touch or overlap).
+ *
+ * @param {ObjRect} rect1
+ * @param {ObjRect} rect2
+ * @returns {boolean} True if rect1 is fully below or touching rect2's bottom.
+ */
+const areElsCollPerfBottom = (rect1, rect2) => rect1.top >= rect2.bottom;
 
-    let age = currentDate.getFullYear() - birthDate.getFullYear();
+/**
+ * Checks if rect1 is perfectly to the left of rect2 (no horizontal touch or overlap).
+ *
+ * @param {ObjRect} rect1
+ * @param {ObjRect} rect2
+ * @returns {boolean} True if rect1 is fully left or touching rect2's left.
+ */
+const areElsCollPerfLeft = (rect1, rect2) => rect1.right <= rect2.left;
 
-    const currentMonth = currentDate.getMonth();
-    const birthMonth = birthDate.getMonth();
+/**
+ * Checks if rect1 is perfectly to the right of rect2 (no horizontal touch or overlap).
+ *
+ * @param {ObjRect} rect1
+ * @param {ObjRect} rect2
+ * @returns {boolean} True if rect1 is fully right or touching rect2's right.
+ */
+const areElsCollPerfRight = (rect1, rect2) => rect1.left >= rect2.right;
 
-    const currentDay = currentDate.getDate();
-    const birthDay = birthDate.getDate();
+// Main collision check
 
-    // Adjust if birthday hasn't occurred yet this year
-    if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) age--;
+/**
+ * Returns true if rect1 and rect2 are colliding (partially or fully overlapping).
+ *
+ * @param {ObjRect} rect1
+ * @param {ObjRect} rect2
+ * @returns {boolean} True if there's any collision between rect1 and rect2.
+ */
+const areElsColliding = (rect1, rect2) =>
+  !(
+    areElsCollLeft(rect1, rect2) ||
+    areElsCollRight(rect1, rect2) ||
+    areElsCollTop(rect1, rect2) ||
+    areElsCollBottom(rect1, rect2)
+  );
 
-    return Math.abs(age);
-  }
+/**
+ * Returns true if rect1 and rect2 are colliding or perfectly touching.
+ *
+ * @param {ObjRect} rect1
+ * @param {ObjRect} rect2
+ * @returns {boolean} True if there's any contact or overlap.
+ */
+const areElsPerfColliding = (rect1, rect2) =>
+  !(
+    areElsCollPerfLeft(rect1, rect2) ||
+    areElsCollPerfRight(rect1, rect2) ||
+    areElsCollPerfTop(rect1, rect2) ||
+    areElsCollPerfBottom(rect1, rect2)
+  );
 
-  return null;
-}
+// Collision direction guess (loose and perfect)
 
 /**
- * @typedef {Object} FormattedByteResult
- * @property {string|null} unit - The resulting unit (e.g., 'MB', 'GB') or null if input is invalid.
- * @property {number|null} value - The numerical value in the chosen unit, or null if input is invalid.
+ * Attempts to determine the direction rect1 entered rect2 based on loose overlap rules.
+ *
+ * @param {ObjRect} rect1
+ * @param {ObjRect} rect2
+ * @returns {string|null} 'top' | 'bottom' | 'left' | 'right' | null
  */
+const getElsColliding = (rect1, rect2) => {
+  if (areElsCollLeft(rect1, rect2)) return 'left';
+  else if (areElsCollRight(rect1, rect2)) return 'right';
+  else if (areElsCollTop(rect1, rect2)) return 'top';
+  else if (areElsCollBottom(rect1, rect2)) return 'bottom';
+  return null;
+};
 
 /**
- * Converts a byte value into a human-readable format with unit and value separated.
+ * Attempts to determine the direction rect1 touched or entered rect2 using perfect mode.
+ *
+ * @param {ObjRect} rect1
+ * @param {ObjRect} rect2
+ * @returns {'top' | 'bottom' | 'left' | 'right' | null}
+ */
+const getElsPerfColliding = (rect1, rect2) => {
+  if (areElsCollPerfLeft(rect1, rect2)) return 'left';
+  else if (areElsCollPerfRight(rect1, rect2)) return 'right';
+  else if (areElsCollPerfTop(rect1, rect2)) return 'top';
+  else if (areElsCollPerfBottom(rect1, rect2)) return 'bottom';
+  return null;
+};
+
+// Overlap Calculation
+
+/**
+ * Calculates overlap values between rect1 and rect2 in all directions.
+ *
+ * @param {ObjRect} rect1
+ * @param {ObjRect} rect2
+ * @returns {{
+ *   overlapLeft: number,
+ *   overlapRight: number,
+ *   overlapTop: number,
+ *   overlapBottom: number
+ * }} Distance of overlap from each direction (can be negative).
+ */
+const getElsCollOverlap = (rect1, rect2) => ({
+  overlapLeft: rect2.right - rect1.left,
+  overlapRight: rect1.right - rect2.left,
+  overlapTop: rect2.bottom - rect1.top,
+  overlapBottom: rect1.bottom - rect2.top,
+});
+
+/**
+ * Determines directional collision based on overlap depth.
+ *
+ * @param {Object} [settings={}]
+ * @param {number} [settings.overlapLeft]
+ * @param {number} [settings.overlapRight]
+ * @param {number} [settings.overlapTop]
+ * @param {number} [settings.overlapBottom]
+ * @returns {{ dirX: Dirs, dirY: Dirs }} Direction of strongest X/Y overlap.
+ */
+const getElsCollOverlapPos = ({
+  overlapLeft = -1,
+  overlapRight = -1,
+  overlapTop = -1,
+  overlapBottom = -1,
+} = {}) => ({
+  dirX: overlapLeft < overlapRight ? 'right' : 'left',
+  dirY: overlapTop < overlapBottom ? 'bottom' : 'top',
+});
+
+// Center utils
+
+/**
+ * Calculates the center point (X and Y) of a given Rect.
+ *
+ * @param {ObjRect} rect - The bounding rectangle of the element.
+ * @returns {{ x: number, y: number }} An object with the `x` and `y` coordinates of the center.
+ */
+const getRectCenter = (rect) => ({
+  x: rect.left + rect.width / 2,
+  y: rect.top + rect.height / 2,
+});
+
+/**
+ * Calculates the offset between the center of rect2 and the center of rect1.
+ *
+ * The values will be 0 when rect1 is perfectly centered over rect2.
+ *
+ * @param {ObjRect} rect1 - The bounding rectangle of the reference element.
+ * @param {ObjRect} rect2 - The bounding rectangle of the element being compared.
+ * @returns {{
+ *   x: number,
+ *   y: number
+ * }} An object with the X and Y offset in pixels from rect1's center to rect2's center.
+ */
+function getElsRelativeCenterOffset(rect1, rect2) {
+  const center1X = rect1.left + rect1.width / 2;
+  const center1Y = rect1.top + rect1.height / 2;
+
+  const center2X = rect2.left + rect2.width / 2;
+  const center2Y = rect2.top + rect2.height / 2;
+
+  return {
+    x: center2X - center1X,
+    y: center2Y - center1Y,
+  };
+}
+
+// Direction & Depth detection
+
+/**
+ * Detects the direction of the dominant collision between two elements
+ * and calculates how deep the overlap is in both x and y axes.
+ *
+ * @param {ObjRect} rect1 - The bounding rectangle of the first element.
+ * @param {ObjRect} rect2 - The bounding rectangle of the second element.
+ * @returns {{
+ *   inDir: Dirs | null;
+ *   dirX: Dirs | null;
+ *   dirY: Dirs | null;
+ *   depthX: number;
+ *   depthY: number;
+ * }} An object containing the collision direction and how deep the overlap is.
+ */
+function getElsCollDirDepth(rect1, rect2) {
+  if (!areElsPerfColliding(rect1, rect2))
+    return {
+      inDir: null,
+      dirX: null,
+      dirY: null,
+      depthX: 0,
+      depthY: 0,
+    };
+
+  const { overlapLeft, overlapRight, overlapTop, overlapBottom } = getElsCollOverlap(rect1, rect2);
+  const { dirX, dirY } = getElsCollOverlapPos({
+    overlapLeft,
+    overlapRight,
+    overlapTop,
+    overlapBottom,
+  });
+  const depthX = Math.min(overlapLeft, overlapRight);
+  const depthY = Math.min(overlapTop, overlapBottom);
+
+  /** @type {Dirs} */
+  let inDir;
+
+  if (depthX < depthY) inDir = dirX;
+  else inDir = dirY;
+  return { inDir, dirX, dirY, depthX, depthY };
+}
+
+// Full detail report
+
+/**
+ * Detects the collision direction and depth between two DOMRects.
+ *
+ * @param {ObjRect} rect1 - The bounding rectangle of the first element.
+ * @param {ObjRect} rect2 - The bounding rectangle of the second element.
+ * @returns {{ depth: CollData; dirs: CollDirs; isNeg: NegCollDirs; }} Collision info or null if no collision is detected.
+ */
+function getElsCollDetails(rect1, rect2) {
+  const isColliding = areElsPerfColliding(rect1, rect2);
+
+  /** @type {CollDirs} */
+  const dirs = { in: null, x: null, y: null };
+
+  /** @type {NegCollDirs} */
+  const isNeg = { y: null, x: null };
+
+  /** @type {Record<Dirs, number>} */
+  const depth = { top: 0, bottom: 0, left: 0, right: 0 };
+
+  // Depth
+  // Yes, it's actually reversed the values orders
+  const { overlapLeft, overlapRight, overlapTop, overlapBottom } = getElsCollOverlap(rect2, rect1);
+  depth.top = overlapTop;
+  depth.bottom = overlapBottom;
+  depth.left = overlapLeft;
+  depth.right = overlapRight;
+
+  // Dirs
+  /**
+   * Detect the direction with the smallest positive overlap (entry point)
+   * @type {[Dirs, number][]}
+   */
+  // @ts-ignore
+  const entries = Object.entries(depth)
+    .filter(([, val]) => val > 0)
+    .sort((a, b) => a[1] - b[1]);
+
+  // Yes, it's actually reversed the values orders here too
+  const { dirX, dirY } = getElsCollOverlapPos({
+    overlapLeft: overlapRight,
+    overlapRight: overlapLeft,
+    overlapTop: overlapBottom,
+    overlapBottom: overlapTop,
+  });
+  dirs.y = dirY;
+  dirs.x = dirX;
+
+  // isNeg
+  if (depth.bottom < 0) isNeg.y = 'bottom';
+  else if (depth.top < 0) isNeg.y = 'top';
+  if (depth.left < 0) isNeg.x = 'left';
+  else if (depth.right < 0) isNeg.x = 'right';
+
+  // Inside Dir
+  dirs.in = isColliding
+    ? depth.top === depth.bottom && depth.bottom === depth.left && depth.left === depth.right
+      ? 'center'
+      : entries.length
+        ? entries[0][0]
+        : 'top'
+    : null; // fallback in case of exact match
+
+  // Complete
+  return { dirs, depth, isNeg };
+}
+
+;// ./src/v1/libs/TinyHtml.mjs
+
+
+const {
+  areElsColliding: TinyHtml_areElsColliding,
+  areElsPerfColliding: TinyHtml_areElsPerfColliding,
+  areElsCollTop: TinyHtml_areElsCollTop,
+  areElsCollBottom: TinyHtml_areElsCollBottom,
+  areElsCollLeft: TinyHtml_areElsCollLeft,
+  areElsCollRight: TinyHtml_areElsCollRight,
+} = collision_namespaceObject;
+
+/**
+ * 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_TinyHtml {
+  /** @typedef {import('../basics/collision.mjs').ObjRect} ObjRect */
+
+  static Utils = { ...collision_namespaceObject };
+
+  /**
+   * 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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_TinyHtml) ? new TinyHtml_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_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_TinyHtml._preElems(elems, where).filter(
+        (el, i) => !!qualifier.call(el, i, el) !== not,
+      );
+    }
+
+    if (qualifier instanceof Element) {
+      return TinyHtml_TinyHtml._preElems(elems, where).filter((el) => (el === qualifier) !== not);
+    }
+
+    if (
+      Array.isArray(qualifier) ||
+      (typeof qualifier !== 'string' &&
+        // @ts-ignore
+        qualifier.length != null)
+    ) {
+      return TinyHtml_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_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_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_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_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_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_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_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_TinyHtml.winnow(elems, selector, 'is', false).length > 0;
+  }
+
+  /**
+   * Checks if the element matches the selector.
+   *
+   * @param {WinnowRequest} selector
+   * @returns {boolean}
+   */
+  is(selector) {
+    return TinyHtml_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_TinyHtml._preElems(target, 'has');
+
+    return TinyHtml_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_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_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_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_TinyHtml._preNodeElem(elem, 'isSameDom') === TinyHtml_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_TinyHtml._preNodeElemWithNull(el, 'siblings');
+    return TinyHtml_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_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_TinyHtml._preNodeElemWithNull(el, 'children');
+    return TinyHtml_TinyHtml._getSiblings(elem ? elem.firstChild : null);
+  }
+
+  /**
+   * Returns all child nodes of the given element.
+   *
+   * @returns {ChildNode[]} An array of child nodes.
+   */
+  children() {
+    return TinyHtml_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_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_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_TinyHtml._preNodeElems(el, 'clone').map((el) => el.cloneNode(deep));
+  }
+
+  /**
+   * Clone the element.
+   * @param {boolean} [deep=true]
+   * @returns {Node}
+   */
+  clone(deep) {
+    return TinyHtml_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_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_TinyHtml._preElem(el, 'append');
+    elem.append(...TinyHtml_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_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_TinyHtml._preElem(el, 'prepend');
+    elem.prepend(...TinyHtml_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_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_TinyHtml._preElem(el, 'before');
+    elem.before(...TinyHtml_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_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_TinyHtml._preElem(el, 'after');
+    elem.after(...TinyHtml_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_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_TinyHtml._preElem(el, 'replaceWith');
+    elem.replaceWith(...TinyHtml_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_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_TinyHtml._preNodeElems(el, 'appendTo');
+    const tars = TinyHtml_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_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_TinyHtml._preElems(el, 'prependTo');
+    const tars = TinyHtml_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_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_TinyHtml._preNodeElem(el, 'insertBefore');
+    const targ = TinyHtml_TinyHtml._preNodeElem(target, 'insertBefore');
+    const childNode = TinyHtml_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_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_TinyHtml._preNodeElem(el, 'insertAfter');
+    const targ = TinyHtml_TinyHtml._preNodeElem(target, 'insertBefore');
+    const childNode = TinyHtml_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_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_TinyHtml._preNodeElems(el, 'replaceAll');
+    const tars = TinyHtml_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_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_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_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_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_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_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_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_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_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_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_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_TinyHtml.cssFloats(this, prop);
+  }
+
+  //////////////////////////////////////////////////////////////////////
+
+  /**
+   * Focus the element.
+   *
+   * @param {TinyHtmlElement} el - The element or a selector string.
+   */
+  static focus(el) {
+    const elem = TinyHtml_TinyHtml._preHtmlElem(el, 'focus');
+    elem.focus();
+  }
+
+  /**
+   * Focus the element.
+   */
+  focus() {
+    return TinyHtml_TinyHtml.focus(this);
+  }
+
+  /**
+   * Blur the element.
+   *
+   * @param {TinyHtmlElement} el - The element or a selector string.
+   */
+  static blur(el) {
+    const elem = TinyHtml_TinyHtml._preHtmlElem(el, 'blur');
+    elem.blur();
+  }
+
+  /**
+   * Blur the element.
+   */
+  blur() {
+    return TinyHtml_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_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_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_TinyHtml.cssFloat(elHtml, prefix + 'Left') + TinyHtml_TinyHtml.cssFloat(elHtml, prefix + 'Right')
+        );
+      } else {
+        return (
+          TinyHtml_TinyHtml.cssFloat(elHtml, prefix + 'Top') + TinyHtml_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_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_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_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_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_TinyHtml.setWidth(this, value);
+  }
+
+  /**
+   * Returns content box height.
+   * @param {TinyElementAndWindow} el - Target element.
+   * @returns {number}
+   */
+  static height(el) {
+    const elem = TinyHtml_TinyHtml._preElemAndWindow(el, 'height');
+    return TinyHtml_TinyHtml.getDimension(elem, 'height', 'content');
+  }
+
+  /**
+   * Returns content box height.
+   * @returns {number}
+   */
+  height() {
+    return TinyHtml_TinyHtml.height(this);
+  }
+
+  /**
+   * Returns content box width.
+   * @param {TinyElementAndWindow} el - Target element.
+   * @returns {number}
+   */
+  static width(el) {
+    const elem = TinyHtml_TinyHtml._preElemAndWindow(el, 'width');
+    return TinyHtml_TinyHtml.getDimension(elem, 'width', 'content');
+  }
+
+  /**
+   * Returns content box width.
+   * @returns {number}
+   */
+  width() {
+    return TinyHtml_TinyHtml.width(this);
+  }
+
+  /**
+   * Returns padding box height.
+   * @param {TinyElementAndWindow} el - Target element.
+   * @returns {number}
+   */
+  static innerHeight(el) {
+    const elem = TinyHtml_TinyHtml._preElemAndWindow(el, 'innerHeight');
+    return TinyHtml_TinyHtml.getDimension(elem, 'height', 'padding');
+  }
+
+  /**
+   * Returns padding box height.
+   * @returns {number}
+   */
+  innerHeight() {
+    return TinyHtml_TinyHtml.innerHeight(this);
+  }
+
+  /**
+   * Returns padding box width.
+   * @param {TinyElementAndWindow} el - Target element.
+   * @returns {number}
+   */
+  static innerWidth(el) {
+    const elem = TinyHtml_TinyHtml._preElemAndWindow(el, 'innerWidth');
+    return TinyHtml_TinyHtml.getDimension(elem, 'width', 'padding');
+  }
+
+  /**
+   * Returns padding box width.
+   * @returns {number}
+   */
+  innerWidth() {
+    return TinyHtml_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_TinyHtml._preElemAndWindow(el, 'outerHeight');
+    return TinyHtml_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_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_TinyHtml._preElemAndWindow(el, 'outerWidth');
+    return TinyHtml_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_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_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_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_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_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_TinyHtml.cssFloats(offsetParent, [
+          'borderTopWidth',
+          'borderLeftWidth',
+        ]);
+        parentOffset = TinyHtml_TinyHtml.offset(offsetParent);
+        parentOffset.top += borderTopWidth;
+        parentOffset.left += borderLeftWidth;
+      }
+    }
+
+    return {
+      top: offset.top - parentOffset.top - TinyHtml_TinyHtml.cssFloat(elem, 'marginTop'),
+      left: offset.left - parentOffset.left - TinyHtml_TinyHtml.cssFloat(elem, 'marginLeft'),
+    };
+  }
+
+  /**
+   * Gets the position of the element relative to its offset parent.
+   * @returns {{top: number, left: number}}
+   */
+  position() {
+    return TinyHtml_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_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_TinyHtml.offsetParent(this);
+  }
+
+  /**
+   * Gets the vertical scroll position.
+   * @param {TinyElementAndWindow} el - Element or window.
+   * @returns {number}
+   */
+  static scrollTop(el) {
+    const elem = TinyHtml_TinyHtml._preElemAndWindow(el, 'scrollTop');
+    if (TinyHtml_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_TinyHtml.scrollTop(this);
+  }
+
+  /**
+   * Gets the horizontal scroll position.
+   * @param {TinyElementAndWindow} el - Element or window.
+   * @returns {number}
+   */
+  static scrollLeft(el) {
+    const elem = TinyHtml_TinyHtml._preElemAndWindow(el, 'scrollLeft');
+    if (TinyHtml_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_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_TinyHtml._preElemsAndWindow(el, 'setScrollTop').forEach((elem) => {
+      if (TinyHtml_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_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_TinyHtml._preElemsAndWindow(el, 'setScrollLeft').forEach((elem) => {
+      if (TinyHtml_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_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_TinyHtml._preElem(el, 'borderWidth');
+    const {
+      borderLeftWidth: left,
+      borderRightWidth: right,
+      borderTopWidth: top,
+      borderBottomWidth: bottom,
+    } = TinyHtml_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_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_TinyHtml._preElem(el, 'border');
+    const {
+      borderLeft: left,
+      borderRight: right,
+      borderTop: top,
+      borderBottom: bottom,
+    } = TinyHtml_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_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_TinyHtml._preElem(el, 'margin');
+    const {
+      marginLeft: left,
+      marginRight: right,
+      marginTop: top,
+      marginBottom: bottom,
+    } = TinyHtml_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_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_TinyHtml._preElem(el, 'padding');
+    const {
+      paddingLeft: left,
+      paddingRight: right,
+      paddingTop: top,
+      paddingBottom: bottom,
+    } = TinyHtml_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_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_TinyHtml._preElem(el, 'tagName');
+    return elem.tagName;
+  }
+
+  /**
+   * Returns the tag name of the element.
+   * @returns {string} The tag name in uppercase.
+   */
+  tagName() {
+    return TinyHtml_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_TinyHtml._preElem(el, 'id');
+    return elem.id;
+  }
+
+  /**
+   * Returns the ID of the element.
+   * @returns {string} The element's ID.
+   */
+  id() {
+    return TinyHtml_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_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_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_TinyHtml._preElems(el, 'setText').forEach((el) => (el.textContent = value));
+  }
+
+  /**
+   * Set text content of the element.
+   * @param {string} value
+   */
+  setText(value) {
+    return TinyHtml_TinyHtml.setText(this, value);
+  }
+
+  /**
+   * Remove all child nodes from each element.
+   * @param {TinyElement|TinyElement[]} el
+   */
+  static empty(el) {
+    TinyHtml_TinyHtml._preElems(el, 'empty').forEach((el) => (el.textContent = ''));
+  }
+
+  /**
+   * Remove all child nodes of the element.
+   */
+  empty() {
+    return TinyHtml_TinyHtml.empty(this);
+  }
+
+  /**
+   * Get the innerHTML of the element.
+   * @param {TinyElement|TinyElement[]} el
+   * @returns {string}
+   */
+  static html(el) {
+    const elem = TinyHtml_TinyHtml._preElem(el, 'html');
+    return elem.innerHTML;
+  }
+
+  /**
+   * Get the innerHTML of the element.
+   * @returns {string}
+   */
+  html() {
+    return TinyHtml_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_TinyHtml._preElems(el, 'setHtml').forEach((el) => (el.innerHTML = value));
+  }
+
+  /**
+   * Set the innerHTML of the element.
+   * @param {string} value
+   */
+  setHtml(value) {
+    return TinyHtml_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_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_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_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_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_TinyHtml._valHooks[elem.type] || TinyHtml_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_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_TinyHtml._valTypes[type] !== 'function')
+      throw new Error(`No handler found for type "${type}" in ${where}().`);
+    // @ts-ignore
+    return TinyHtml_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_TinyHtml._preInputElem(el, where);
+    // @ts-ignore
+    const hook = TinyHtml_TinyHtml._valHooks[elem.type] || TinyHtml_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_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_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_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_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_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_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_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_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_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_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_TinyHtml._preInputElem(el, 'valNb');
+    if (!(elem instanceof HTMLInputElement)) throw new Error('Element must be an input element.');
+    /** @type {number} */
+    const result = TinyHtml_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_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_TinyHtml._preInputElem(el, 'valDate');
+    if (!(elem instanceof HTMLInputElement)) throw new Error('Element must be an input element.');
+    /** @type {Date} */
+    const result = TinyHtml_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_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_TinyHtml._preInputElem(el, 'valBool');
+    if (!(elem instanceof HTMLInputElement)) throw new Error('Element must be an input element.');
+    return TinyHtml_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_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_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_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_TinyHtml._preEventTargetElems(el, 'once').forEach((elem) => {
+      /** @type {EventRegistryHandle} e */
+      const wrapped = (e) => {
+        TinyHtml_TinyHtml.off(elem, event, wrapped);
+        handler(e);
+      };
+
+      TinyHtml_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_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_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_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_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_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_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_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_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_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_TinyHtml._preElem(el, 'attr');
+    return elem.getAttribute(name);
+  }
+
+  /**
+   * Get an attribute on an element.
+   * @param {string} name
+   * @returns {string|null}
+   */
+  attr(name) {
+    return TinyHtml_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_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_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_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_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_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_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_TinyHtml._preElem(el, 'hasProp');
+    // @ts-ignore
+    const propName = TinyHtml_TinyHtml._propFix[name] || name;
+    // @ts-ignore
+    return !!elem[propName];
+  }
+
+  /**
+   * Check if a property exists.
+   * @param {string} name
+   * @returns {boolean}
+   */
+  hasProp(name) {
+    return TinyHtml_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_TinyHtml._preElems(el, 'addProp').forEach((elem) => {
+      // @ts-ignore
+      name = TinyHtml_TinyHtml._propFix[name] || name;
+      // @ts-ignore
+      elem[name] = true;
+    });
+  }
+
+  /**
+   * Set a property on an element.
+   * @param {string} name
+   */
+  addProp(name) {
+    return TinyHtml_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_TinyHtml._preElems(el, 'removeProp').forEach((elem) => {
+      // @ts-ignore
+      name = TinyHtml_TinyHtml._propFix[name] || name;
+      // @ts-ignore
+      elem[name] = false;
+    });
+  }
+
+  /**
+   * Remove a property from an element.
+   * @param {string} name
+   */
+  removeProp(name) {
+    return TinyHtml_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_TinyHtml._preElems(el, 'toggleProp').forEach((elem) => {
+      // @ts-ignore
+      const propName = TinyHtml_TinyHtml._propFix[name] || name;
+      // @ts-ignore
+      const shouldEnable = force === undefined ? !elem[propName] : force;
+      // @ts-ignore
+      if (shouldEnable) TinyHtml_TinyHtml.addProp(elem, name);
+      else TinyHtml_TinyHtml.removeProp(elem, name);
+    });
+  }
+
+  /**
+   * Toggle a boolean property.
+   * @param {string} name
+   * @param {boolean} [force]
+   */
+  toggleProp(name, force) {
+    return TinyHtml_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_TinyHtml._preElems(el, 'remove').forEach((elem) => elem.remove());
+  }
+
+  /**
+   * Removes the element from the DOM.
+   */
+  remove() {
+    return TinyHtml_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_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_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_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_TinyHtml._getCustomRect(
+      TinyHtml_TinyHtml._preElem(el1, 'isCollWith').getBoundingClientRect(),
+      extraRect,
+    );
+    const rect2 = TinyHtml_TinyHtml._preElem(el2, 'isCollWith').getBoundingClientRect();
+    return TinyHtml_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_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_TinyHtml._getCustomRect(
+      TinyHtml_TinyHtml._preElem(el1, 'isCollPerfWith').getBoundingClientRect(),
+      extraRect,
+    );
+    const rect2 = TinyHtml_TinyHtml._preElem(el2, 'isCollPerfWith').getBoundingClientRect();
+    return TinyHtml_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_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 = TinyHtml_areElsCollTop(rect1, rect2);
+          break;
+        case 'bottom':
+          shouldUnlock = TinyHtml_areElsCollBottom(rect1, rect2);
+          break;
+        case 'left':
+          shouldUnlock = TinyHtml_areElsCollLeft(rect1, rect2);
+          break;
+        case 'right':
+          shouldUnlock = TinyHtml_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_TinyHtml._preElem(el1, 'isCollWithLock');
+    const elem2 = TinyHtml_TinyHtml._preElem(el2, 'isCollWithLock');
+    const rect1 = TinyHtml_TinyHtml._getCustomRect(elem1.getBoundingClientRect(), extraRect);
+    const rect2 = elem2.getBoundingClientRect();
+    const isColliding = TinyHtml_areElsColliding(rect1, rect2);
+    return TinyHtml_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_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_TinyHtml._preElem(el1, 'isCollPerfWithLock');
+    const elem2 = TinyHtml_TinyHtml._preElem(el2, 'isCollPerfWithLock');
+    const rect1 = TinyHtml_TinyHtml._getCustomRect(elem1.getBoundingClientRect(), extraRect);
+    const rect2 = elem2.getBoundingClientRect();
+    const isColliding = TinyHtml_areElsPerfColliding(rect1, rect2);
+    return TinyHtml_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_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_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_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_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_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_TinyHtml._preElem(el, 'isInViewport');
+    const elementTop = TinyHtml_TinyHtml.offset(elem).top;
+    const elementBottom = elementTop + TinyHtml_TinyHtml.outerHeight(elem);
+
+    const viewportTop = TinyHtml_TinyHtml.scrollTop(window);
+    const viewportBottom = viewportTop + TinyHtml_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_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_TinyHtml._preElem(el, 'isScrolledIntoView');
+    const docViewTop = TinyHtml_TinyHtml.scrollTop(window);
+    const docViewBottom = docViewTop + TinyHtml_TinyHtml.height(window);
+
+    const elemTop = TinyHtml_TinyHtml.offset(elem).top;
+    const elemBottom = elemTop + TinyHtml_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_TinyHtml.isScrolledIntoView(this);
+  }
+}
+
+/* harmony default export */ const libs_TinyHtml = (TinyHtml_TinyHtml);
+
+;// ./src/v1/basics/html_deprecated.mjs
+
+
+/**
+ * Checks if two DOM elements are colliding on the screen.
+ *
+ * @param {Element} elem1 - First DOM element.
+ * @param {Element} elem2 - Second DOM element.
+ * @returns {boolean} - Returns true if the elements are colliding.
+ * @deprecated - Use TinyHtml.isCollWith instead.
+ */
+function areHtmlElsColliding(elem1, elem2) {
+  return libs_TinyHtml.isCollWith(elem1, elem2);
+}
+
+/**
+ * Checks if two DOM elements are colliding on the screen.
+ *
+ * @param {Element} elem1 - First DOM element.
+ * @param {Element} elem2 - Second DOM element.
+ * @returns {boolean} - Returns true if the elements are colliding.
+ * @deprecated - Use TinyHtml.isCollPerfWith instead.
+ */
+function areHtmlElsPerfColliding(elem1, elem2) {
+  return TinyHtml.isCollPerfWith(elem1, elem2);
+}
+
+///////////////////////////////////////////////////////////////////////////
+
+/**
+ * @typedef {import('../libs/TinyHtml.mjs').HtmlElBoxSides} HtmlElBoxSides
+ */
+
+/**
+ * Returns the total border width and individual sides from `border{Side}Width` CSS properties.
+ *
+ * @param {Element} el - The target DOM element.
+ * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) border widths, and each side individually.
+ * @deprecated - Use TinyHtml.borderWidth instead.
+ */
+const getHtmlElBordersWidth = (el) => {
+  return libs_TinyHtml.borderWidth(el);
+};
+
+/**
+ * Returns the total border size and individual sides from `border{Side}` CSS properties.
+ *
+ * @param {Element} el - The target DOM element.
+ * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) border sizes, and each side individually.
+ * @deprecated - Use TinyHtml.border instead.
+ */
+const getHtmlElBorders = (el) => {
+  return libs_TinyHtml.border(el);
+};
+
+/**
+ * Returns the total margin and individual sides from `margin{Side}` CSS properties.
+ *
+ * @param {Element} el - The target DOM element.
+ * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) margins, and each side individually.
+ * @deprecated - Use TinyHtml.margin instead.
+ */
+const getHtmlElMargin = (el) => {
+  return libs_TinyHtml.margin(el);
+};
+
+/**
+ * Returns the total padding and individual sides from `padding{Side}` CSS properties.
+ *
+ * @param {Element} el - The target DOM element.
+ * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) paddings, and each side individually.
+ * @deprecated - Use TinyHtml.padding instead.
+ */
+const getHtmlElPadding = (el) => {
+  return libs_TinyHtml.padding(el);
+};
+
+/////////////////////////////////////////////////////////////
+
+// The new version will receive great modifications, the deprecated code has been preserved for non-glitch designs that are using the original code.
+
+/**
+ * Checks if the given element is at least partially visible in the viewport.
+ *
+ * @param {HTMLElement} element - The DOM element to check.
+ * @returns {boolean} True if the element is partially in the viewport, false otherwise.
+ * @deprecated - Use TinyHtml.isInViewport instead.
+ */
+function isInViewport(element) {
+  const elementTop = element.offsetTop;
+  const elementBottom = elementTop + element.offsetHeight;
+
+  const viewportTop = window.scrollY;
+  const viewportBottom = viewportTop + window.innerHeight;
+
+  return elementBottom > viewportTop && elementTop < viewportBottom;
+}
+
+/**
+ * Checks if the given element is fully visible in the viewport (top and bottom).
+ *
+ * @param {HTMLElement} element - The DOM element to check.
+ * @returns {boolean} True if the element is fully visible in the viewport, false otherwise.
+ * @deprecated - Use TinyHtml.isScrolledIntoView instead.
+ */
+function isScrolledIntoView(element) {
+  const viewportTop = window.scrollY;
+  const viewportBottom = viewportTop + window.innerHeight;
+
+  const elemTop = element.offsetTop;
+  const elemBottom = elemTop + element.offsetHeight;
+
+  return elemBottom <= viewportBottom && elemTop >= viewportTop;
+}
+
+;// ./src/v1/basics/fullScreen.mjs
+/**
+ * Checks if the document is currently in fullscreen mode.
+ *
+ * @returns {boolean}
+ */
+const documentIsFullScreen = () =>
+  !!(
+    document.fullscreenElement ||
+    // @ts-ignore
+    document.webkitFullscreenElement ||
+    // @ts-ignore
+    document.mozFullScreenElement ||
+    // @ts-ignore
+    document.msFullscreenElement ||
+    // @ts-ignore
+    document.webkitIsFullScreen ||
+    // @ts-ignore
+    document.mozFullScreen
+  );
+
+/**
+ * Checks if the window occupies the entire screen dimensions.
+ *
+ * @returns {boolean}
+ */
+const isScreenFilled = () =>
+  window.innerHeight === screen.height && window.innerWidth === screen.width;
+
+/**
+ * Checks if fullscreen mode is active either via document API or by matching screen dimensions.
+ *
+ * @returns {boolean}
+ */
+const isFullScreenMode = () => documentIsFullScreen() || isScreenFilled();
+
+/**
+ * Requests fullscreen mode for the document.
+ *
+ * @param {FullscreenOptions} [ops]
+ * @returns {Promise<void>}
+ */
+const requestFullScreen = (ops) =>
+  new Promise(async (resolve, reject) => {
+    const docElm = document.documentElement;
+    try {
+      if (docElm.requestFullscreen) {
+        await docElm.requestFullscreen(ops);
+        // @ts-ignore
+      } else if (docElm.mozRequestFullScreen) {
+        // @ts-ignore
+        docElm.mozRequestFullScreen(ops);
+        // @ts-ignore
+      } else if (docElm.webkitRequestFullScreen) {
+        // @ts-ignore
+        docElm.webkitRequestFullScreen(ops);
+        // @ts-ignore
+      } else if (docElm.msRequestFullscreen) {
+        // @ts-ignore
+        docElm.msRequestFullscreen(ops);
+      }
+      resolve();
+    } catch (err) {
+      reject(err);
+    }
+  });
+
+/**
+ * Exits fullscreen mode.
+ *
+ * @returns {Promise<void>}
+ */
+const exitFullScreen = () =>
+  new Promise((resolve, reject) => {
+    if (document.exitFullscreen) {
+      document.exitFullscreen().then(resolve).catch(reject);
+    } else {
+      try {
+        // @ts-ignore
+        if (document.mozCancelFullScreen) document.mozCancelFullScreen();
+        // @ts-ignore
+        else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen();
+        // @ts-ignore
+        else if (document.msExitFullscreen) document.msExitFullscreen();
+        else throw new Error('Fullscreen API is not supported');
+        resolve();
+      } catch (err) {
+        reject(err);
+      }
+    }
+  });
+
+/** @type {readonly string[]} */
+const fullScreenEvents = [
+  'fullscreenchange',
+  'webkitfullscreenchange',
+  'mozfullscreenchange',
+  'MSFullscreenChange',
+];
+
+/**
+ * Attaches a listener to fullscreen change events.
+ *
+ * @param {EventListenerOrEventListenerObject} listener
+ * @param {boolean|AddEventListenerOptions} [ops]
+ * @returns {void}
+ */
+const onFullScreenChange = (listener, ops) => {
+  fullScreenEvents.forEach((event) => {
+    document.addEventListener(event, listener, ops);
+  });
+};
+
+/**
+ * Removes a listener from fullscreen change events.
+ *
+ * @param {EventListenerOrEventListenerObject} listener
+ * @param {boolean|AddEventListenerOptions} [ops]
+ * @returns {void}
+ */
+const offFullScreenChange = (listener, ops) => {
+  fullScreenEvents.forEach((event) => {
+    document.removeEventListener(event, listener, ops);
+  });
+};
+
+;// ./src/v1/basics/simpleMath.mjs
+/**
+ * Executes a Rule of Three calculation.
+ *
+ * @param {number} val1 - The first reference value (numerator in direct proportion, denominator in inverse).
+ * @param {number} val2 - The second reference value (denominator in direct proportion, numerator in inverse).
+ * @param {number} val3 - The third value (numerator in direct proportion, denominator in inverse).
+ * @param {boolean} [inverse] - Whether the calculation should use inverse proportion (true for inverse, false for direct).
+ * @returns {number} The result of the Rule of Three operation.
+ *
+ * Rule of Three Formula (Direct Proportion):
+ *      val1 / val2 = val3 / result
+ *
+ * For Inverse Proportion:
+ *      val1 / val3 = val2 / result
+ *
+ * Visual Representation:
+ *
+ * For Direct Proportion:
+ *      val1      val2
+ *      -----  =  ------
+ *      val3      result
+ *
+ * For Inverse Proportion:
+ *      val1      val2
+ *      -----  =  ------
+ *      val3      result
+ *
+ * @example
+ * // Direct proportion:
+ * ruleOfThree.execute(2, 6, 3, false); // → 9
+ *
+ * @example
+ * // Inverse proportion:
+ * ruleOfThree.execute(2, 6, 3, true); // → 4
+ */
+function ruleOfThree(val1, val2, val3, inverse = false) {
+  return inverse ? Number(val1 * val2) / val3 : Number(val3 * val2) / val1;
+}
+
+/**
+ * Calculates a percentage of a given base value.
+ * @param {number} price - The base value.
+ * @param {number} percentage - The percentage to apply.
+ * @returns {number} The result of the percentage calculation.
+ *
+ * @example
+ * getSimplePerc(200, 15); // 30
+ */
+function getSimplePerc(price, percentage) {
+  return price * (percentage / 100);
+}
+
+/**
+ * Calculates the age based on the given date.
+ *
+ * @param {number|string|Date} timeData - The birth date (can be a timestamp, ISO string, or Date object).
+ * @param {Date|null} [now=null] - The Date object representing the current date. Defaults to the current date and time if not provided.
+ * @returns {number|null} The age in years, or null if `timeData` is not provided or invalid.
+ */
+function getAge(timeData = 0, now = null) {
+  if (typeof timeData !== 'undefined' && timeData !== null && timeData !== 0) {
+    const birthDate = new Date(timeData);
+    if (Number.isNaN(birthDate.getTime())) return null;
+
+    const currentDate = now instanceof Date ? now : new Date();
+
+    let age = currentDate.getFullYear() - birthDate.getFullYear();
+
+    const currentMonth = currentDate.getMonth();
+    const birthMonth = birthDate.getMonth();
+
+    const currentDay = currentDate.getDate();
+    const birthDay = birthDate.getDate();
+
+    // Adjust if birthday hasn't occurred yet this year
+    if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) age--;
+
+    return Math.abs(age);
+  }
+
+  return null;
+}
+
+/**
+ * @typedef {Object} FormattedByteResult
+ * @property {string|null} unit - The resulting unit (e.g., 'MB', 'GB') or null if input is invalid.
+ * @property {number|null} value - The numerical value in the chosen unit, or null if input is invalid.
+ */
+
+/**
+ * Converts a byte value into a human-readable format with unit and value separated.
  *
  * @param {number} bytes - The number of bytes to format. Must be a non-negative number.
  * @param {number|null} [decimals=null] - The number of decimal places to include in the result. Defaults to null. If negative, it will be treated as 0. If null, no rounding is applied.
@@ -3733,6 +8046,8 @@ export default KeyPressHandler;
 
 
 
+
+
 })();
 
 window.TinyBasicsEs = __webpack_exports__;