tiny-essentials 1.26.4 → 1.27.0

package/dist/v1/libs/TinyDragDropDetector.mjs

@@ -1,7 +1,5 @@
 /**
  * @typedef {Object} DragAndDropOptions
- * @property {HTMLElement} [target=document.body] - The DOM element where drag listeners will be attached. Defaults to `document.body` if `fullscreen` is true or no target is provided.
- * @property {boolean} [fullscreen=true] - If true, listeners are attached to the entire page (`document.body`). If false, the `target` must be specified.
  * @property {string} [hoverClass="dnd-hover"] - CSS class applied to the target element while files are being dragged over it.
  * @property {(files: FileList, event: DragEvent) => void} [onDrop] - Callback function executed when files are dropped onto the target.
  * @property {(event: DragEvent) => void} [onEnter] - Optional callback triggered when dragging enters the target area.
@@ -14,12 +12,11 @@
  * It handles the drag lifecycle (enter, over, leave, drop) and provides hooks for developers to handle file uploads or UI changes.
  *
  * @class
+ * @template {HTMLElement} HTMLTarget
  */
 class TinyDragDropDetector {
-    /** @type {HTMLElement} */
+    /** @type {HTMLTarget} */
     #target;
-    /** @type {boolean} */
-    #fullscreen;
     /** @type {string} */
     #hoverClass;
     /** @type {(files: FileList, event: DragEvent) => void} */
@@ -35,22 +32,18 @@ class TinyDragDropDetector {
     /**
      * Creates a new instance of TinyDragDropDetector to handle drag-and-drop file detection.
      *
-     * @param {DragAndDropOptions} [options={}] - Configuration options for the detector.
+     * @param {HTMLTarget} target - The DOM element where drag listeners will be attached.
+     * @param {DragAndDropOptions} options - Configuration options for the detector.
      * @throws {TypeError} If `target` is not an HTMLElement.
-     * @throws {TypeError} If `fullscreen` is not a boolean.
      * @throws {TypeError} If `hoverClass` is not a string.
      * @throws {TypeError} If `onDrop` is defined but not a function.
      * @throws {TypeError} If `onEnter` is defined but not a function.
      * @throws {TypeError} If `onLeave` is defined but not a function.
      */
-    constructor(options = {}) {
-        const { target, fullscreen = true, hoverClass = 'dnd-hover', onDrop, onEnter, onLeave, } = options;
-        // Validate fullscreen
-        if (typeof fullscreen !== 'boolean')
-            throw new TypeError('The "fullscreen" option must be a boolean.');
+    constructor(target, options) {
+        const { hoverClass = 'dnd-hover', onDrop, onEnter, onLeave } = options;
         // Validate target
-        const resolvedTarget = fullscreen ? document.body : target || document.body;
-        if (!(resolvedTarget instanceof HTMLElement))
+        if (!(target instanceof HTMLElement))
             throw new TypeError('The "target" option must be an instance of HTMLElement.');
         // Validate hoverClass
         if (typeof hoverClass !== 'string')
@@ -65,8 +58,7 @@ class TinyDragDropDetector {
         if (typeof onLeave !== 'function')
             throw new TypeError('The "onLeave" option must be a function.');
         // Store properties
-        this.#target = resolvedTarget;
-        this.#fullscreen = fullscreen;
+        this.#target = target;
         this.#hoverClass = hoverClass;
         this.#onDropCallback = onDrop || (() => { });
         this.#onEnterCallback = onEnter;
@@ -82,7 +74,7 @@ class TinyDragDropDetector {
     }
     /**
      * Returns the current target DOM element where the listeners are attached.
-     * @returns {HTMLElement}
+     * @returns {HTMLTarget}
      */
     getTarget() {
         return this.#target;
@@ -94,13 +86,6 @@ class TinyDragDropDetector {
     getHoverClass() {
         return this.#hoverClass;
     }
-    /**
-     * Indicates whether the detector is operating in fullscreen mode.
-     * @returns {boolean}
-     */
-    isFullScreen() {
-        return this.#fullscreen;
-    }
     /**
      * Returns whether a drag operation is currently active over the target.
      * @returns {boolean}

package/dist/v1/libs/TinyDragger.cjs

@@ -16,6 +16,7 @@ var objChecker = require('../basics/objChecker.cjs');
  * TinyDragger enables drag-and-drop functionality for a DOM element.
  * It supports jail boundaries, optional collision detection, vibration feedback,
  * automatic reverting, proxy dragging, and event dispatching.
+ * @template {HTMLElement} HTMLTarget
  */
 class TinyDragger {
   static Utils = { ...collision, TinyHtml };
@@ -49,7 +50,7 @@ class TinyDragger {
   /** @type {HTMLElement|null} */
   #jail = null;
 
-  /** @type {HTMLElement} */
+  /** @type {HTMLTarget} */
   #target;
 
   #dragHiddenClass = 'drag-hidden';
@@ -63,7 +64,7 @@ class TinyDragger {
   /** @typedef {(event: TouchEvent) => void} TouchDragEvent */
 
   /**
-   * @param {HTMLElement|TinyHtml<any>} targetElement - The element to make draggable.
+   * @param {HTMLTarget} targetElement - The element to make draggable.
    * @param {Object} [options={}] - Configuration options.
    * @param {HTMLElement} [options.jail] - Optional container to restrict dragging within.
    * @param {boolean} [options.mirrorElem=true] - Use a visual clone instead of dragging the original element.
@@ -83,11 +84,10 @@ class TinyDragger {
    * @throws {Error} If any option has an invalid type.
    */
   constructor(targetElement, options = {}) {
-    const targetElem = !(targetElement instanceof TinyHtml) ? targetElement : targetElement.get(0);
-    if (!(targetElem instanceof HTMLElement))
+    if (!(targetElement instanceof HTMLElement))
       throw new Error('TinyDragger requires a valid target HTMLElement to initialize.');
 
-    this.#target = targetElem;
+    this.#target = targetElement;
 
     // === Validations ===
     if (options.jail !== undefined && !(options.jail instanceof HTMLElement))

package/dist/v1/libs/TinyDragger.d.mts

@@ -28,8 +28,9 @@ export type VibrationPatterns = {
  * TinyDragger enables drag-and-drop functionality for a DOM element.
  * It supports jail boundaries, optional collision detection, vibration feedback,
  * automatic reverting, proxy dragging, and event dispatching.
+ * @template {HTMLElement} HTMLTarget
  */
-declare class TinyDragger {
+declare class TinyDragger<HTMLTarget extends HTMLElement> {
     static Utils: {
         TinyHtml: typeof TinyHtml;
         getElsRelativeCenterOffset(rect1: ObjRect, rect2: ObjRect): {
@@ -82,7 +83,7 @@ declare class TinyDragger {
     };
     /** @typedef {(event: TouchEvent) => void} TouchDragEvent */
     /**
-     * @param {HTMLElement|TinyHtml<any>} targetElement - The element to make draggable.
+     * @param {HTMLTarget} targetElement - The element to make draggable.
      * @param {Object} [options={}] - Configuration options.
      * @param {HTMLElement} [options.jail] - Optional container to restrict dragging within.
      * @param {boolean} [options.mirrorElem=true] - Use a visual clone instead of dragging the original element.
@@ -101,7 +102,7 @@ declare class TinyDragger {
      * @param {string} [options.classHidden='drag-hidden'] - CSS class to hide original element during dragging.
      * @throws {Error} If any option has an invalid type.
      */
-    constructor(targetElement: HTMLElement | TinyHtml<any>, options?: {
+    constructor(targetElement: HTMLTarget, options?: {
         jail?: HTMLElement | undefined;
         mirrorElem?: boolean | undefined;
         defaultZIndex?: number | undefined;

package/dist/v1/libs/TinyDragger.mjs

@@ -12,6 +12,7 @@ import { isJsonObject } from '../basics/objChecker.mjs';
  * TinyDragger enables drag-and-drop functionality for a DOM element.
  * It supports jail boundaries, optional collision detection, vibration feedback,
  * automatic reverting, proxy dragging, and event dispatching.
+ * @template {HTMLElement} HTMLTarget
  */
 class TinyDragger {
     static Utils = { ...TinyCollision, TinyHtml };
@@ -36,7 +37,7 @@ class TinyDragger {
     #vibration = { start: false, end: false, collide: false, move: false };
     /** @type {HTMLElement|null} */
     #jail = null;
-    /** @type {HTMLElement} */
+    /** @type {HTMLTarget} */
     #target;
     #dragHiddenClass = 'drag-hidden';
     #classDragging = 'dragging';
@@ -47,7 +48,7 @@ class TinyDragger {
     #defaultZIndex = 9999;
     /** @typedef {(event: TouchEvent) => void} TouchDragEvent */
     /**
-     * @param {HTMLElement|TinyHtml<any>} targetElement - The element to make draggable.
+     * @param {HTMLTarget} targetElement - The element to make draggable.
      * @param {Object} [options={}] - Configuration options.
      * @param {HTMLElement} [options.jail] - Optional container to restrict dragging within.
      * @param {boolean} [options.mirrorElem=true] - Use a visual clone instead of dragging the original element.
@@ -67,10 +68,9 @@ class TinyDragger {
      * @throws {Error} If any option has an invalid type.
      */
     constructor(targetElement, options = {}) {
-        const targetElem = !(targetElement instanceof TinyHtml) ? targetElement : targetElement.get(0);
-        if (!(targetElem instanceof HTMLElement))
+        if (!(targetElement instanceof HTMLElement))
             throw new Error('TinyDragger requires a valid target HTMLElement to initialize.');
-        this.#target = targetElem;
+        this.#target = targetElement;
         // === Validations ===
         if (options.jail !== undefined && !(options.jail instanceof HTMLElement))
             throw new Error('The "jail" option must be an HTMLElement if provided.');

package/dist/v1/libs/TinyElementObserver.cjs

@@ -16,35 +16,20 @@
  * A utility class for tracking DOM element mutations.
  * It leverages the native MutationObserver API, providing a higher-level abstraction
  * with a system of configurable detectors that can dispatch custom events or run custom logic.
+ * @template {Element} HTMLElement
  */
 class TinyElementObserver {
-  /** @type {Element|undefined} */
+  /** @type {HTMLElement} */
   #el;
 
   /**
    * Get the current element being observed.
-   * @returns {Element|undefined} The DOM element being tracked, or `undefined` if none is set.
+   * @returns {HTMLElement} The DOM element being tracked, or `undefined` if none is set.
    */
   get el() {
     return this.#el;
   }
 
-  /**
-   * Set the target element to be observed.
-   * Can only be set once.
-   *
-   * @param {Element|undefined} el - The DOM element to observe.
-   * @throws {Error} If the element is already defined.
-   * @throws {TypeError} If the provided value is not an Element.
-   */
-  set el(el) {
-    if (this.#el)
-      throw new Error('The observed element has already been set and cannot be reassigned.');
-    if (typeof el !== 'undefined' && !(el instanceof Element))
-      throw new TypeError('The observed element must be a valid DOM Element.');
-    this.#el = el;
-  }
-
   /**
    * Configuration settings for the MutationObserver instance.
    *
@@ -140,13 +125,13 @@ class TinyElementObserver {
   /**
    * Create a new TinyElementObserver instance.
    *
+   * @param {HTMLElement} el - Set the target element to be observed.
    * @param {Object} [settings={}] - Configuration object.
-   * @param {Element} [settings.el] - Optional DOM element to observe from the start.
    * @param {Array<[string, ElementDetectorsFn]>} [settings.initDetectors=[]] - Optional initial detectors to register.
    * @param {MutationObserverInit} [settings.initCfg] - Optional MutationObserver configuration.
    */
-  constructor({ el, initDetectors = [], initCfg = {} } = {}) {
-    this.el = el;
+  constructor(el, { initDetectors = [], initCfg = {} } = {}) {
+    this.#el = el;
     if (initDetectors.length) this.detectors = initDetectors;
     if (initCfg) this.settings = initCfg;
   }

package/dist/v1/libs/TinyElementObserver.d.mts

@@ -18,35 +18,26 @@ export type ElementDetectorsFn = (mutation: MutationRecord, index: number, mutat
  * A utility class for tracking DOM element mutations.
  * It leverages the native MutationObserver API, providing a higher-level abstraction
  * with a system of configurable detectors that can dispatch custom events or run custom logic.
+ * @template {Element} HTMLElement
  */
-declare class TinyElementObserver {
+declare class TinyElementObserver<HTMLElement extends Element> {
     /**
      * Create a new TinyElementObserver instance.
      *
+     * @param {HTMLElement} el - Set the target element to be observed.
      * @param {Object} [settings={}] - Configuration object.
-     * @param {Element} [settings.el] - Optional DOM element to observe from the start.
      * @param {Array<[string, ElementDetectorsFn]>} [settings.initDetectors=[]] - Optional initial detectors to register.
      * @param {MutationObserverInit} [settings.initCfg] - Optional MutationObserver configuration.
      */
-    constructor({ el, initDetectors, initCfg }?: {
-        el?: Element | undefined;
+    constructor(el: HTMLElement, { initDetectors, initCfg }?: {
         initDetectors?: [string, ElementDetectorsFn][] | undefined;
         initCfg?: MutationObserverInit | undefined;
     });
-    /**
-     * Set the target element to be observed.
-     * Can only be set once.
-     *
-     * @param {Element|undefined} el - The DOM element to observe.
-     * @throws {Error} If the element is already defined.
-     * @throws {TypeError} If the provided value is not an Element.
-     */
-    set el(el: Element | undefined);
     /**
      * Get the current element being observed.
-     * @returns {Element|undefined} The DOM element being tracked, or `undefined` if none is set.
+     * @returns {HTMLElement} The DOM element being tracked, or `undefined` if none is set.
      */
-    get el(): Element | undefined;
+    get el(): HTMLElement;
     /**
      * Set the observer settings.
      * @param {MutationObserverInit} settings

package/dist/v1/libs/TinyElementObserver.mjs

@@ -13,32 +13,18 @@
  * A utility class for tracking DOM element mutations.
  * It leverages the native MutationObserver API, providing a higher-level abstraction
  * with a system of configurable detectors that can dispatch custom events or run custom logic.
+ * @template {Element} HTMLElement
  */
 class TinyElementObserver {
-    /** @type {Element|undefined} */
+    /** @type {HTMLElement} */
     #el;
     /**
      * Get the current element being observed.
-     * @returns {Element|undefined} The DOM element being tracked, or `undefined` if none is set.
+     * @returns {HTMLElement} The DOM element being tracked, or `undefined` if none is set.
      */
     get el() {
         return this.#el;
     }
-    /**
-     * Set the target element to be observed.
-     * Can only be set once.
-     *
-     * @param {Element|undefined} el - The DOM element to observe.
-     * @throws {Error} If the element is already defined.
-     * @throws {TypeError} If the provided value is not an Element.
-     */
-    set el(el) {
-        if (this.#el)
-            throw new Error('The observed element has already been set and cannot be reassigned.');
-        if (typeof el !== 'undefined' && !(el instanceof Element))
-            throw new TypeError('The observed element must be a valid DOM Element.');
-        this.#el = el;
-    }
     /**
      * Configuration settings for the MutationObserver instance.
      *
@@ -125,13 +111,13 @@ class TinyElementObserver {
     /**
      * Create a new TinyElementObserver instance.
      *
+     * @param {HTMLElement} el - Set the target element to be observed.
      * @param {Object} [settings={}] - Configuration object.
-     * @param {Element} [settings.el] - Optional DOM element to observe from the start.
      * @param {Array<[string, ElementDetectorsFn]>} [settings.initDetectors=[]] - Optional initial detectors to register.
      * @param {MutationObserverInit} [settings.initCfg] - Optional MutationObserver configuration.
      */
-    constructor({ el, initDetectors = [], initCfg = {} } = {}) {
-        this.el = el;
+    constructor(el, { initDetectors = [], initCfg = {} } = {}) {
+        this.#el = el;
         if (initDetectors.length)
             this.detectors = initDetectors;
         if (initCfg)

package/dist/v1/libs/TinyGamepad.cjs

@@ -1267,12 +1267,10 @@ class TinyGamepad {
   mapInput(logicalName, physicalInput) {
     if (typeof logicalName !== 'string' || !logicalName.trim())
       throw new TypeError(`Invalid "logicalName": expected a non-empty string, got ${logicalName}`);
-    if (
-      !(
-        typeof physicalInput === 'string' ||
-        (Array.isArray(physicalInput) && physicalInput.every((p) => typeof p === 'string'))
-      )
-    )
+    if (!(
+      typeof physicalInput === 'string' ||
+      (Array.isArray(physicalInput) && physicalInput.every((p) => typeof p === 'string'))
+    ))
       throw new TypeError(
         `Invalid "physicalInput": expected string or array of strings, got ${JSON.stringify(physicalInput)}`,
       );

package/dist/v1/libs/TinyGamepad.d.mts

@@ -493,7 +493,7 @@ export type ExportedConfig = {
  */
 declare class TinyGamepad {
     /** @type {Record<string, string>} */
-    static "__#private@#specialMap": Record<string, string>;
+    static #specialMap: Record<string, string>;
     /**
      * Add or update a special key mapping.
      * @param {string} char - The character to map.

package/dist/v1/libs/TinyHtml/TinyHtmlIcon.d.mts

@@ -8,7 +8,7 @@ export default TinyHtmlIcon;
  */
 declare class TinyHtmlIcon extends TinyHtmlTemplate<HTMLElement> {
     /** @type {string} */
-    static "__#private@#defaultTag": string;
+    static #defaultTag: string;
     /** @param {string} value */
     static set defaultTag(value: string);
     /** @returns {string} */

package/dist/v1/libs/TinyHtml/TinyHtmlTemplate.d.mts

@@ -34,7 +34,7 @@ declare class TinyHtmlTemplate<TinyHtmlT extends Element> extends TinyHtml<TinyH
      * @param {ClassSetter} value
      * @returns {Set<string>}
      */
-    static "__#private@#normalizeClasses"(value: ClassSetter): Set<string>;
+    static #normalizeClasses(value: ClassSetter): Set<string>;
     /**
      * Creates a new TinyHtmlTemplate instance.
      * @param {TinyHtmlT} tag - The HTML tag name to create (e.g., 'div', 'span').

package/dist/v1/libs/TinyHtml/TinyHtmlTextarea.d.mts

@@ -57,7 +57,7 @@ declare class TinyHtmlTextarea extends TinyHtmlTemplate<HTMLTextAreaElement> {
         name?: string | undefined;
         readonly?: boolean | undefined;
         required?: boolean | undefined;
-        spellcheck?: boolean | "false" | "true" | "default" | undefined;
+        spellcheck?: boolean | "false" | "default" | "true" | undefined;
         wrap?: "off" | "soft" | "hard" | undefined;
         tags?: string | string[] | Set<string> | undefined;
         mainClass?: string | undefined;

package/dist/v1/libs/TinyHtml/index.d.mts

@@ -4,7 +4,7 @@ export default TinyHtmlElems;
  * @beta
  */
 declare class TinyHtmlElems {
-    static "__#private@#list": (typeof TinyHtmlTemplate | typeof TinyHtmlAnchor | typeof TinyHtmlButton | typeof TinyHtmlCanvas | typeof TinyHtmlDatalist | typeof TinyHtmlEmbed | typeof TinyHtmlForm | typeof TinyHtmlIcon | typeof TinyHtmlIframe | typeof TinyHtmlImage | typeof TinyHtmlInput | typeof TinyHtmlLink | typeof TinyHtmlMedia | typeof TinyHtmlScript | typeof TinyHtmlSelect | typeof TinyHtmlStyle | typeof TinyHtmlTextarea | typeof TinyHtmlResetInput | typeof TinyHtmlNumberInput | typeof TinyHtmlFileInput | typeof TinyHtmlHiddenInput | typeof TinyHtmlImageInput | typeof TinyHtmlAudio | typeof TinyHtmlObject | typeof TinyHtmlSource)[];
+    static #list: (typeof TinyHtmlTemplate | typeof TinyHtmlAnchor | typeof TinyHtmlButton | typeof TinyHtmlCanvas | typeof TinyHtmlDatalist | typeof TinyHtmlEmbed | typeof TinyHtmlForm | typeof TinyHtmlIcon | typeof TinyHtmlIframe | typeof TinyHtmlImage | typeof TinyHtmlInput | typeof TinyHtmlLink | typeof TinyHtmlMedia | typeof TinyHtmlScript | typeof TinyHtmlSelect | typeof TinyHtmlStyle | typeof TinyHtmlTextarea | typeof TinyHtmlResetInput | typeof TinyHtmlNumberInput | typeof TinyHtmlFileInput | typeof TinyHtmlHiddenInput | typeof TinyHtmlImageInput | typeof TinyHtmlAudio | typeof TinyHtmlObject | typeof TinyHtmlSource)[];
     static get list(): (typeof TinyHtmlTemplate | typeof TinyHtmlAnchor | typeof TinyHtmlButton | typeof TinyHtmlCanvas | typeof TinyHtmlDatalist | typeof TinyHtmlEmbed | typeof TinyHtmlForm | typeof TinyHtmlIcon | typeof TinyHtmlIframe | typeof TinyHtmlImage | typeof TinyHtmlInput | typeof TinyHtmlLink | typeof TinyHtmlMedia | typeof TinyHtmlScript | typeof TinyHtmlSelect | typeof TinyHtmlStyle | typeof TinyHtmlTextarea | typeof TinyHtmlResetInput | typeof TinyHtmlNumberInput | typeof TinyHtmlFileInput | typeof TinyHtmlHiddenInput | typeof TinyHtmlImageInput | typeof TinyHtmlAudio | typeof TinyHtmlObject | typeof TinyHtmlSource)[];
     static ButtonInput: typeof TinyHtmlButtonInput;
     static ResetInput: typeof TinyHtmlResetInput;

package/dist/v1/libs/TinyHtml.cjs

@@ -481,105 +481,79 @@ class TinyHtml {
 
   /////////////////////////////////////////////////////////////////////
 
-  /**
-   * Flag to determine if element observer should start automatically.
-   * @type {boolean}
-   */
-  static #autoStartElemObserver = true;
-
-  /**
-   * Get the auto-start flag for the observer.
-   * @returns {boolean}
-   */
-  static get autoStartElemObserver() {
-    return TinyHtml.#autoStartElemObserver;
-  }
-
-  /**
-   * Set the auto-start flag for the observer.
-   * @param {boolean} value
-   */
-  static set autoStartElemObserver(value) {
-    if (typeof value !== 'boolean') throw new TypeError('autoStartElemObserver must be a boolean.');
-    TinyHtml.#autoStartElemObserver = value;
-  }
-
-  /** @type {TinyElementObserver} */
-  static #tinyObserver = new TinyElementObserver({
-    el:
-      typeof window !== 'undefined' && typeof window.document !== 'undefined'
-        ? window.document.documentElement
-        : undefined,
-    initDetectors: [
-      // Style Detector
-      [
-        'tinyStyleEvent',
-        (mutation) => {
-          if (
-            mutation.type !== 'attributes' ||
-            mutation.attributeName !== 'style' ||
-            !(mutation.target instanceof HTMLElement)
-          )
-            return;
-          const oldVal = mutation.oldValue || '';
-          const newVal = mutation.target.getAttribute('style') || '';
-
-          const oldStyles = TinyHtml.parseStyle(oldVal);
-          const newStyles = TinyHtml.parseStyle(newVal);
-
-          const changes = text.diffStrings(oldStyles, newStyles);
-
-          if (
-            Object.keys(changes.added).length ||
-            Object.keys(changes.removed).length ||
-            Object.keys(changes.modified).length
-          ) {
-            mutation.target.dispatchEvent(
-              new CustomEvent('tinyhtml.stylechanged', {
-                detail: changes,
-              }),
-            );
-          }
-        },
-      ],
-
-      // Class Detector
-      [
-        'tinyClassEvent',
-        (mutation) => {
-          if (
-            mutation.type !== 'attributes' ||
-            mutation.attributeName !== 'class' ||
-            !(mutation.target instanceof HTMLElement)
-          )
-            return;
-          const oldVal = mutation.oldValue || '';
-          const newVal = mutation.target.className || '';
-
-          const oldClasses = oldVal.split(/\s+/).filter(Boolean);
-          const newClasses = newVal.split(/\s+/).filter(Boolean);
-
-          const changes = array.diffArrayList(oldClasses, newClasses);
-
-          if (changes.added.length || changes.removed.length) {
-            mutation.target.dispatchEvent(
-              new CustomEvent('tinyhtml.classchanged', {
-                detail: changes,
-              }),
-            );
-          }
-        },
-      ],
-    ],
-    initCfg: {
-      attributeOldValue: true,
-      attributes: true,
-      subtree: true,
-      attributeFilter: ['style', 'class'],
-    },
-  });
+  static #tinyObserver =
+    typeof window !== 'undefined' && typeof window.document !== 'undefined'
+      ? new TinyElementObserver(window.document.documentElement, {
+          initDetectors: [
+            // Style Detector
+            [
+              'tinyStyleEvent',
+              (mutation) => {
+                if (
+                  mutation.type !== 'attributes' ||
+                  mutation.attributeName !== 'style' ||
+                  !(mutation.target instanceof HTMLElement)
+                )
+                  return;
+                const oldVal = mutation.oldValue || '';
+                const newVal = mutation.target.getAttribute('style') || '';
+
+                const oldStyles = TinyHtml.parseStyle(oldVal);
+                const newStyles = TinyHtml.parseStyle(newVal);
+
+                const changes = text.diffStrings(oldStyles, newStyles);
+
+                if (
+                  Object.keys(changes.added).length ||
+                  Object.keys(changes.removed).length ||
+                  Object.keys(changes.modified).length
+                ) {
+                  mutation.target.dispatchEvent(
+                    new CustomEvent('tinyhtml.stylechanged', {
+                      detail: changes,
+                    }),
+                  );
+                }
+              },
+            ],
+
+            // Class Detector
+            [
+              'tinyClassEvent',
+              (mutation) => {
+                if (
+                  mutation.type !== 'attributes' ||
+                  mutation.attributeName !== 'class' ||
+                  !(mutation.target instanceof HTMLElement)
+                )
+                  return;
+                const oldVal = mutation.oldValue || '';
+                const newVal = mutation.target.className || '';
+
+                const oldClasses = oldVal.split(/\s+/).filter(Boolean);
+                const newClasses = newVal.split(/\s+/).filter(Boolean);
+
+                const changes = array.diffArrayList(oldClasses, newClasses);
+
+                if (changes.added.length || changes.removed.length) {
+                  mutation.target.dispatchEvent(
+                    new CustomEvent('tinyhtml.classchanged', {
+                      detail: changes,
+                    }),
+                  );
+                }
+              },
+            ],
+          ],
+          initCfg: {
+            attributeOldValue: true,
+            attributes: true,
+            subtree: true,
+            attributeFilter: ['style', 'class'],
+          },
+        })
+      : undefined;
 
-  /** @returns {TinyElementObserver} */
   static get tinyObserver() {
     return TinyHtml.#tinyObserver;
   }