jj 2.4.0 → 2.6.0

package/lib/bundle.js

@@ -1,3 +1,12 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
 // node_modules/jty/lib/misc.js
 function isDef(x) {
   return x !== void 0;
@@ -76,10 +85,18 @@ function isStr(x) {
 var { hasOwnProperty: hasOwnProperty2 } = Object;
 var { isArray: isArray2 } = Array;
 
+// src/internal.ts
+function errMsg(varName, expected, received) {
+  return `Expected '${varName}' to be ${expected}. Got ${received} (${typeof received})`;
+}
+function typeErr(varName, expected, received) {
+  return new TypeError(errMsg(varName, expected, received));
+}
+
 // src/util.ts
 function fileExt(path) {
   if (!isStr(path)) {
-    throw new TypeError(`Expected a string file path. Got ${path} (${typeof path})`);
+    throw typeErr("path", "a string", path);
   }
   const lastDotIndex = path.lastIndexOf(".");
   if (lastDotIndex === -1) {
@@ -97,12 +114,6 @@ function nextAnimationFrame() {
 function sleep(ms = 0) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
-function on(target, eventName, handler) {
-  target.addEventListener(eventName, handler);
-}
-function off(target, eventName, handler) {
-  target.removeEventListener(eventName, handler);
-}
 async function cssToStyle(css) {
   const sheet = new CSSStyleSheet();
   return await sheet.replace(css);
@@ -111,29 +122,166 @@ async function cssToStyle(css) {
 // src/case.ts
 function pas2keb(str) {
   if (!isStr(str)) {
-    throw new TypeError(`Expected a string. Got ${str} (${typeof str})`);
+    throw typeErr("str", "a string", str);
   }
   if (/[^a-zA-Z0-9_]/.test(str)) {
-    throw new TypeError(`Invalid characters in string. Only alphanumeric and underscores are allowed. Got: ${str}`);
+    throw new SyntaxError(errMsg("str", "alphanumeric characters and underscores", str));
   }
   return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").replace(/_/g, "-").toLowerCase();
 }
 function keb2pas(str) {
   if (!isStr(str)) {
-    throw new TypeError(`Expected a string. Got ${str} (${typeof str})`);
+    throw typeErr("str", "a string", str);
   }
   return str.split("-").filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("") || // Handle strings that were not kebab-case to begin with (e.g. 'single', 'camelCase')
   (str.length > 0 ? str.charAt(0).toUpperCase() + str.slice(1) : "");
 }
 function keb2cam(str) {
   if (!isStr(str)) {
-    throw new TypeError(`Expected a string. Got ${str} (${typeof str})`);
+    throw typeErr("str", "a string", str);
   }
   return str.replace(/^-+|-+$/g, "").replace(/-+([a-z])/g, (g, c) => c.toUpperCase());
 }
 
-// src/JJN.ts
-var JJN = class _JJN {
+// src/wrappers/JJET.ts
+var _ref, _boundHandlers, _JJET_instances, getBoundHandler_fn;
+var _JJET = class _JJET {
+  /**
+   * Creates a JJET instance.
+   *
+   * @param ref - The EventTarget to wrap.
+   * @throws {TypeError} If `ref` is not an EventTarget.
+   */
+  constructor(ref) {
+    __privateAdd(this, _JJET_instances);
+    __privateAdd(this, _ref);
+    __privateAdd(this, _boundHandlers, /* @__PURE__ */ new WeakMap());
+    if (!isA(ref, EventTarget)) {
+      throw new TypeError(`JJET expects an EventTarget instance. Got ${ref} (${typeof ref}). `);
+    }
+    __privateSet(this, _ref, ref);
+  }
+  static from(ref) {
+    return new _JJET(ref);
+  }
+  /**
+   * Gets the underlying DOM object.
+   */
+  get ref() {
+    return __privateGet(this, _ref);
+  }
+  /**
+   * Adds an event listener.
+   *
+   * @remarks
+   * The handler is automatically bound to this JJET instance, so `this` inside the handler
+   * refers to the JJET instance, not the DOM element. To access the DOM element, use `this.ref`.
+   *
+   * @example
+   * ```ts
+   * JJET.from(window).on('resize', function() {
+   *   console.log(this) // JJET instance
+   *   console.log(this.ref) // window object
+   * })
+   * ```
+   * @param eventName - The name of the event.
+   * @param handler - The event handler.
+   * @param options - Optional event listener options.
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener | EventTarget.addEventListener}
+   */
+  on(eventName, handler, options) {
+    const boundHandler = __privateMethod(this, _JJET_instances, getBoundHandler_fn).call(this, handler);
+    this.ref.addEventListener(eventName, boundHandler, options);
+    return this;
+  }
+  /**
+   * Removes an event listener.
+   *
+   * @remarks
+   * Pass the same handler reference that was used in `on()` to properly remove the listener.
+   *
+   * @example
+   * ```ts
+   * const handler = function() { console.log(this) }
+   * JJET.from(window).on('resize', handler)
+   * JJET.from(window).off('resize', handler)
+   * ```
+   * @param eventName - The name of the event.
+   * @param handler - The event handler.
+   * @param options - Optional event listener options or boolean.
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener | EventTarget.removeEventListener}
+   */
+  off(eventName, handler, options) {
+    const boundHandler = __privateMethod(this, _JJET_instances, getBoundHandler_fn).call(this, handler);
+    this.ref.removeEventListener(eventName, boundHandler, options);
+    return this;
+  }
+  /**
+   * Dispatches an Event at the specified EventTarget.
+   *
+   * @param event - The Event object to dispatch.
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent | EventTarget.dispatchEvent}
+   */
+  trigger(event) {
+    this.ref.dispatchEvent(event);
+    return this;
+  }
+  /**
+   * Runs a function in the context of this JJET instance.
+   *
+   * @example
+   * ```ts
+   * node.run(function() {
+   *   console.log(this.ref)
+   * })
+   * ```
+   * @remarks
+   * If you want to access the current JJ* instance using `this` keyword, you SHOULD use a `function` not an arrow function.
+   * If the function throws, `run()` doesn't swallow the exception.
+   * So if you're expecting an error, make sure to wrap it in a `try..catch` block and handle the exception.
+   * If the function returns a promise, you can `await` on the response.
+   *
+   * @param fn - The function to run. `this` inside the function will refer to this JJET instance.
+   * @param args - Arguments to pass to the function.
+   * @returns The return value of the function.
+   */
+  run(fn, ...args) {
+    return fn.call(this, ...args);
+  }
+};
+_ref = new WeakMap();
+_boundHandlers = new WeakMap();
+_JJET_instances = new WeakSet();
+/**
+ * Gets or creates a bound version of the handler.
+ *
+ * @remarks
+ * Bound handlers are cached in a WeakMap to ensure `off()` can properly remove listeners.
+ * When the original handler is garbage collected, the bound version is automatically removed.
+ *
+ * @param handler - The event handler to bind.
+ * @returns The bound handler, or null if the input is null.
+ */
+getBoundHandler_fn = function(handler) {
+  if (handler === null) return null;
+  let bound = __privateGet(this, _boundHandlers).get(handler);
+  if (!bound) {
+    if (typeof handler === "function") {
+      bound = handler.bind(this);
+    } else {
+      bound = { handleEvent: handler.handleEvent.bind(this) };
+    }
+    __privateGet(this, _boundHandlers).set(handler, bound);
+  }
+  return bound;
+};
+var JJET = _JJET;
+
+// src/wrappers/JJN-raw.ts
+var JJN = class _JJN extends JJET {
   /**
    * Creates a JJN instance from a Node reference.
    *
@@ -201,7 +349,7 @@ var JJN = class _JJN {
       return document.createTextNode(obj);
     }
     if (!isObj(obj)) {
-      throw new TypeError(`Expected an object. Got ${obj} (${typeof obj})`);
+      throw new TypeError(`JJN.unwrap() expects a string, DOM Node, or JJ wrapper. Got ${obj} (${typeof obj}). `);
     }
     if (isA(obj, Node)) {
       return obj;
@@ -209,7 +357,9 @@ var JJN = class _JJN {
     if (isA(obj, _JJN)) {
       return obj.ref;
     }
-    throw new TypeError(`Could not unwrap ${obj} (${typeof obj})`);
+    throw new TypeError(
+      `Could not unwrap ${obj} (${typeof obj}). Expected a string, Node, or JJ wrapper. Make sure you're passing a valid DOM element or JJ wrapper.`
+    );
   }
   /**
    * Wraps an iterable object (e.g. an array of wrapped or DOM elements).
@@ -239,7 +389,6 @@ var JJN = class _JJN {
   static unwrapAll(iterable) {
     return Array.from(iterable, _JJN.unwrap);
   }
-  #ref;
   /**
    * Creates an instance of JJN.
    *
@@ -248,18 +397,14 @@ var JJN = class _JJN {
    */
   constructor(ref) {
     if (!isA(ref, Node)) {
-      throw new TypeError(`Expected a Node. Got ${ref} (${typeof ref})`);
+      throw new TypeError(
+        `JJN expects a Node instance. Got ${ref} (${typeof ref}). Use JJN.from(node) with a DOM Node, or check that you're passing a valid DOM element.`
+      );
     }
-    this.#ref = ref;
-  }
-  /**
-   * Gets the underlying DOM Node.
-   */
-  get ref() {
-    return this.#ref;
+    super(ref);
   }
   /**
-   * Clones the node.
+   * Clones the Node.
    *
    * @param deep - If true, clones the subtree.
    * @returns A new wrapped instance of the clone.
@@ -269,266 +414,187 @@ var JJN = class _JJN {
     return _JJN.wrap(this.ref.cloneNode(deep));
   }
   /**
-   * Appends children to this node.
+   * Creates a Text node from a string and appends it to this Node.
    *
    * @remarks
-   * To make template codes easier, this function ignores any child that is not possible to `wrap()` (e.g. undefined, null, false).
-   *
-   * @param children - The children to append (Nodes, strings, or Wrappers).
-   * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/append | Element.append}
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild | Node.appendChild}
-   */
-  append(...children) {
-    const nodes = _JJN.unwrapAll(children.filter(_JJN.isWrapable));
-    const ref = this.ref;
-    for (const node of nodes) {
-      if (node) {
-        ref.appendChild(node);
-      }
-    }
-    return this;
-  }
-  /**
-   * Maps an array to children and appends them.
+   * This method is overridden in JJT to append to the existing text content instead.
    *
    * @example
    * ```ts
-   * list.mapAppend(['a', 'b'], item => h('li', null, item))
+   * el.addText('Hello ')
+   * el.addText('World')
    * ```
    *
-   * @remarks
-   * To make template codes easier, this function ignores any child that is not possible to `wrap()` (e.g. undefined, null, false).
-   *
-   * @param array - The source array.
-   * @param mapFn - The mapping function returning a Wrappable.
+   * @param text - The text to add. If null or undefined, nothing is added.
    * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode | document.createTextNode}
    */
-  mapAppend(array, mapFn) {
-    return this.append(...array.map(mapFn));
+  addText(text) {
+    if (text) {
+      this.ref.appendChild(document.createTextNode(text));
+    }
+    return this;
   }
+};
+
+// src/wrappers/JJNx.ts
+var JJNx = class extends JJN {
   /**
-   * Prepends children to this node.
+   * Finds the first element matching a selector within this Element.
    *
-   * @remarks
-   * To make template codes easier, this function ignores any child that is not possible to `wrap()` (e.g. undefined, null, false).
+   * @example
+   * ```ts
+   * const span = el.find('span')  // Returns null if not found
+   * const span = el.find('span', true)  // Throws if not found
+   * ```
    *
-   * @param children - The children to prepend.
-   * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend | Element.prepend}
+   * @param selector - The CSS selector.
+   * @param required - Whether to throw an error if not found. Defaults to false.
+   * @returns The wrapped element, or null if not found and required is false.
+   * @throws {TypeError} If selector is not a string or element not found and required is true.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector | Element.querySelector}
    */
-  prepend(...children) {
-    const nodes = _JJN.unwrapAll(children.filter(_JJN.isWrapable));
-    const ref = this.ref;
-    const first = ref.firstChild;
-    for (const node of nodes) {
-      if (node) {
-        ref.insertBefore(node, first);
-      }
+  find(selector, required = false) {
+    const queryResult = this.ref.querySelector(selector);
+    if (queryResult) {
+      return JJN.wrap(queryResult);
     }
-    return this;
+    if (required) {
+      throw new TypeError(`No element matched query "${selector}"`);
+    }
+    return null;
   }
   /**
-   * Maps an array to children and prepends them.
+   * Finds all elements matching a selector within this Element.
    *
    * @example
    * ```ts
-   * list.mapPrepend(['a', 'b'], item => JJHE.fromTag('li').setText(item))
+   * const items = el.findAll('li')
    * ```
    *
-   * @remarks
-   * To make template codes easier, this function ignores any child that is not possible to `wrap()` (e.g. undefined, null, false).
-   *
-   * @param array - The source array.
-   * @param mapFn - The mapping function.
-   * @returns This instance for chaining.
+   * @param selector - The CSS selector.
+   * @returns An array of wrapped elements.
+   * @throws {TypeError} If selector is not a string.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll | Element.querySelectorAll}
    */
-  mapPrepend(array, mapFn) {
-    return this.prepend(...array.map(mapFn));
+  findAll(selector) {
+    return JJN.wrapAll(this.ref.querySelectorAll(selector));
   }
   /**
-   * Replaces the existing children of this node with a specified new set of children.
+   * Appends children to this Element.
+   *
+   * @example
+   * ```ts
+   * el.addChild(h('span', null, 'hello'))
+   * ```
    *
    * @remarks
-   * If no children are specified, it essentially empties the node
    * To make template codes easier, this function ignores any child that is not possible to `wrap()` (e.g. undefined, null, false).
    *
-   * @param children - The new children to set.
-   * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren | Element.replaceChildren}
-   */
-  setChildren(...children) {
-    return this.empty().append(...children.filter(_JJN.isWrapable));
-  }
-  /**
-   * Adds an event listener.
-   *
-   * @param eventName - The event name.
-   * @param handler - The event handler.
+   * @param children - The children to append.
    * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener | EventTarget.addEventListener}
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/append | Element.append}
    */
-  on(eventName, handler) {
-    on(this.ref, eventName, handler);
+  addChild(...children) {
+    const nodes = JJN.unwrapAll(children.filter(JJN.isWrapable));
+    this.ref.append(...nodes);
     return this;
   }
   /**
-   * Removes an event listener.
+   * Prepends children to this Element.
    *
-   * @param eventName - The event name.
-   * @param handler - The event handler.
-   * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener | EventTarget.removeEventListener}
-   */
-  off(eventName, handler) {
-    off(this.ref, eventName, handler);
-    return this;
-  }
-  /**
-   * Removes this node from the DOM.
+   * @example
+   * ```ts
+   * el.preChild(h('span', null, 'first'))
+   * ```
    *
-   * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild | Node.removeChild}
-   */
-  rm() {
-    this.ref.parentNode?.removeChild(this.ref);
-    return this;
-  }
-  /**
-   * Removes all children from this node.
+   * @remarks
+   * To make template codes easier, this function ignores any child that is not possible to `wrap()` (e.g. undefined, null, false).
    *
+   * @param children - The children to prepend.
    * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren | Element.replaceChildren}
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend | Element.prepend}
    */
-  empty() {
-    const element = this.ref;
-    while (element.firstChild) {
-      element.removeChild(element.firstChild);
-    }
+  preChild(...children) {
+    const nodes = JJN.unwrapAll(children.filter(JJN.isWrapable));
+    this.ref.prepend(...nodes);
     return this;
   }
   /**
-   * Runs a function in the context of this JJN instance.
+   * Maps an array to children and appends them.
    *
    * @example
    * ```ts
-   * div.run(function() {
-   *   this.addClass('active')
-   *   console.log(this.ref)
-   * })
+   * node.addChildMap(['a', 'b'], item => h('li', null, item))
    * ```
+   *
    * @remarks
-   * If you want to access the current JJ* instance using `this` keyword, you SHOULD use a `function` not an arrow function.
-   * If the function throws, `run()` doesn't swallow the exception.
-   * So if you're expecting an error, make sure to wrap it in a `try..catch` block and handle the exception.
-   * If the function returns a promise, you can `await` on the response.
+   * To make template codes easier, this function ignores any child that is not possible to `wrap()` (e.g. undefined, null, false).
    *
-   * @param fn - The function to run. `this` inside the function will refer to this JJN instance.
-   * @param args - Arguments to pass to the function.
-   * @returns The return value of the function.
+   * @param array - The source array.
+   * @param mapFn - The mapping function returning a Wrappable.
+   * @returns This instance for chaining.
    */
-  run(fn, ...args) {
-    return fn.call(this, ...args);
+  addChildMap(array, mapFn) {
+    return this.addChild(...array.map(mapFn));
   }
-};
-
-// src/JJT.ts
-var JJT = class _JJT extends JJN {
   /**
-   * Creates a JJT instance from a Text node.
+   * Maps an array to children and prepends them.
    *
    * @example
    * ```ts
-   * const textNode = document.createTextNode('foo')
-   * const jjText = JJT.from(textNode)
+   * node.preChildMap(['a', 'b'], item => JJHE.create('li').setText(item))
    * ```
    *
-   * @param text - The Text node.
-   * @returns A new JJT instance.
-   * @throws {TypeError} If `text` is not a Text node.
-   */
-  static from(text) {
-    if (!isA(text, Text)) {
-      throw new TypeError(`Expected a Text object. Got: ${text} (${typeof text})`);
-    }
-    return new _JJT(text);
-  }
-  /**
-   * Creates an instance of JJT.
-   *
-   * @example
-   * ```ts
-   * const text = new JJT('Hello World')
-   * ```
+   * @remarks
+   * To make template codes easier, this function ignores any child that is not possible to `wrap()` (e.g. undefined, null, false).
    *
-   * @param ref - The Text node or a string to create a Text node from.
-   * @throws {TypeError} If `ref` is not a Text node or string.
+   * @param array - The source array.
+   * @param mapFn - The mapping function.
+   * @returns This instance for chaining.
    */
-  constructor(ref) {
-    if (isStr(ref)) {
-      super(document.createTextNode(ref));
-    } else if (isA(ref, Text)) {
-      super(ref);
-    } else {
-      throw new TypeError(`Expected a Text. Got: ${ref} (${typeof ref})`);
-    }
+  preChildMap(array, mapFn) {
+    return this.preChild(...array.map(mapFn));
   }
   /**
-   * Gets the text content.
+   * Replaces the existing children of an Element with a specified new set of children.
    *
-   * @returns The text content.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent | Node.textContent}
-   */
-  getText() {
-    return this.ref.textContent ?? "";
-  }
-  /**
-   * Sets the text content.
+   * @remarks
+   * If no children are provided, it empties the Element.
+   * To make template codes easier, this function ignores any child that is not possible to `wrap()` (e.g. undefined, null, false).
    *
    * @example
    * ```ts
-   * text.setText('New content')
+   * el.setChildren(h('p', null, 'New Content'))
    * ```
-   *
-   * @param text - The text to set.
+   * @param children - The children to replace with.
    * @returns This instance for chaining.
-   * @throws {TypeError} If `text` is not a string.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent | Node.textContent}
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren | Element.replaceChildren}
    */
-  setText(text) {
-    if (!isStr(text)) {
-      throw new TypeError(`Expected a string. Got: ${text} (${typeof text})`);
-    }
-    this.ref.textContent = text;
+  setChildren(...children) {
+    const nodes = JJN.unwrapAll(children.filter(JJN.isWrapable));
+    this.ref.replaceChildren(...nodes);
     return this;
   }
   /**
-   * Clears the text content.
-   *
-   * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent | Node.textContent}
-   */
-  empty() {
-    return this.setText("");
-  }
-  /**
-   * Sets the text content to multiple lines joined by newline.
+   * Removes all children from this Element.
    *
    * @example
    * ```ts
-   * text.addLines('Line 1', 'Line 2')
+   * el.empty()
    * ```
    *
-   * @param lines - The lines of text.
    * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren | Element.setChildren}
    */
-  addLines(...lines) {
-    return this.setText(lines.join("\n"));
+  empty() {
+    this.setChildren();
+    return this;
   }
 };
 
-// src/JJDF.ts
-var JJDF = class _JJDF extends JJN {
+// src/wrappers/JJDF.ts
+var JJDF = class _JJDF extends JJNx {
   /**
    * Creates a JJDF instance from a DocumentFragment reference.
    *
@@ -567,13 +633,13 @@ var JJDF = class _JJDF extends JJN {
    */
   constructor(ref) {
     if (!isA(ref, DocumentFragment)) {
-      throw new TypeError(`Expected a DocumentFragment. Got ${ref} (${typeof ref})`);
+      throw typeErr("ref", "a DocumentFragment", ref);
     }
     super(ref);
   }
 };
 
-// src/JJSR.ts
+// src/wrappers/JJSR.ts
 var JJSR = class _JJSR extends JJDF {
   /**
    * Creates a JJSR instance from a ShadowRoot reference.
@@ -597,12 +663,14 @@ var JJSR = class _JJSR extends JJDF {
    */
   constructor(shadowRoot) {
     if (!isA(shadowRoot, ShadowRoot)) {
-      throw new TypeError(`Expected a ShadowRoot. Got ${shadowRoot} (${typeof shadowRoot})`);
+      throw new TypeError(
+        `JJSR expects a ShadowRoot instance. Got ${shadowRoot} (${typeof shadowRoot}). Access a shadow root using element.shadowRoot after calling element.attachShadow().`
+      );
     }
     super(shadowRoot);
   }
   /**
-   * Gets the inner HTML of the shadow root.
+   * Gets the inner HTML of the ShadowRoot.
    *
    * @returns The inner HTML string.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML | Element.innerHTML}
@@ -611,24 +679,29 @@ var JJSR = class _JJSR extends JJDF {
     return this.ref.innerHTML;
   }
   /**
-   * Sets the inner HTML of the shadow root.
+   * Sets the inner HTML of the ShadowRoot.
    *
    * @example
    * ```ts
-   * shadow.setHTML('<p>Hello</p>', false)
+   * shadow.setHTML('<p>Hello</p>', true)
    * ```
    *
-   * @param value - The HTML string.
-   * @param unsafe - Reserved for future use (must be false).
+   * @param html - The HTML string to set, or null/undefined to clear.
+   * @param unsafe - explicit opt-in to set innerHTML. must be true if html is provided.
    * @returns This instance for chaining.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML | Element.innerHTML}
    */
-  setHTML(value, unsafe) {
-    this.ref.innerHTML = value;
+  setHTML(html, unsafe) {
+    if (html && unsafe !== true) {
+      throw new Error(
+        `Setting innerHTML is unsafe. Pass true as the second argument to confirm you know what you are doing.`
+      );
+    }
+    this.ref.innerHTML = html ?? "";
     return this;
   }
   /**
-   * Adds constructed stylesheets to the shadow root.
+   * Adds constructed stylesheets to the ShadowRoot.
    *
    * @example
    * ```ts
@@ -647,8 +720,8 @@ var JJSR = class _JJSR extends JJDF {
   }
 };
 
-// src/JJE.ts
-var JJE = class _JJE extends JJN {
+// src/wrappers/JJE.ts
+var JJE = class _JJE extends JJNx {
   /**
    * Creates a JJE instance from an Element reference.
    *
@@ -671,35 +744,24 @@ var JJE = class _JJE extends JJN {
    */
   constructor(ref) {
     if (!isA(ref, Element)) {
-      throw new TypeError(`Expected an Element. Got: ${ref} (${typeof ref})`);
+      throw new TypeError(
+        `JJE expects an Element instance. Got ${ref} (${typeof ref}). Use JJE.from(element) with a DOM Element, or use the specific wrapper (JJHE for HTMLElement, JJSE for SVGElement).`
+      );
     }
     super(ref);
   }
   /**
-   * Finds an element by ID within this element's context
-   *
-   * @remarks
-   * This method uses `Element.querySelector()` under the hood.
-   *
-   * @param id - The ID to search for.
-   * @param throwIfNotFound - Whether to throw an error if not found. Defaults to true.
-   * @returns The wrapped element, or null if not found and throwIfNotFound is false.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector | Element.querySelector}
-   */
-  byId(id, throwIfNotFound = true) {
-    if (!isStr(id)) {
-      throw new TypeError(`Expected a string id. Got ${id} (${typeof id})`);
-    }
-    return this.query(`#${id}`, throwIfNotFound);
-  }
-  /**
-   * Gets the value of an attribute.
+   * Gets the value of an attribute.
    *
    * @param name - The name of the attribute.
    * @returns The attribute value, or null if not present.
+   * @throws {TypeError} If `name` is not a string.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute | Element.getAttribute}
    */
   getAttr(name) {
+    if (!isStr(name)) {
+      throw typeErr("name", "a string", name);
+    }
     return this.ref.getAttribute(name);
   }
   /**
@@ -707,62 +769,46 @@ var JJE = class _JJE extends JJN {
    *
    * @param name - The name of the attribute.
    * @returns `true` if the attribute exists, otherwise `false`.
+   * @throws {TypeError} If `name` is not a string.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute | Element.hasAttribute}
    */
   hasAttr(name) {
+    if (!isStr(name)) {
+      throw typeErr("name", "a string", name);
+    }
     return this.ref.hasAttribute(name);
   }
-  /**
-   * Sets the value of an attribute.
-   *
-   * @param name - The name of the attribute.
-   * @param value - The value to set.
-   * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute | Element.setAttribute}
-   */
-  setAttr(name, value) {
-    this.ref.setAttribute(name, value);
+  setAttr(nameOrObj, value) {
+    if (typeof nameOrObj === "string") {
+      this.ref.setAttribute(nameOrObj, value);
+    } else if (isObj(nameOrObj)) {
+      for (const [k, v] of Object.entries(nameOrObj)) {
+        this.ref.setAttribute(k, v);
+      }
+    } else {
+      throw typeErr("nameOrObj", "a string or object", nameOrObj);
+    }
     return this;
   }
   /**
-   * Sets multiple attributes at once.
+   * Removes one or more attributes from the Element.
    *
    * @example
    * ```ts
-   * el.setAttrs({ id: 'my-id', class: 'my-class' })
+   * el.rmAttr('disabled')  // Remove single
+   * el.rmAttr('hidden', 'aria-hidden')  // Remove multiple
    * ```
    *
-   * @param obj - An object where keys are attribute names and values are attribute values.
-   * @returns This instance for chaining.
-   * @throws {TypeError} If `obj` is not an object.
-   */
-  setAttrs(obj) {
-    if (!isObj(obj)) {
-      throw new TypeError(`Expected an object. Got: ${obj} (${typeof obj})`);
-    }
-    for (const [name, value] of Object.entries(obj)) {
-      this.setAttr(name, value);
-    }
-    return this;
-  }
-  /**
-   * Removes an attribute.
-   *
-   * @param name - The name of the attribute to remove.
+   * @param names - The name(s) of the attribute(s) to remove.
    * @returns This instance for chaining.
+   * @throws {TypeError} If any name is not a string.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute | Element.removeAttribute}
    */
-  rmAttr(name) {
-    return this.rmAttrs(name);
-  }
-  /**
-   * Removes multiple attributes.
-   *
-   * @param names - The names of the attributes to remove.
-   * @returns This instance for chaining.
-   */
-  rmAttrs(...names) {
+  rmAttr(...names) {
     for (const name of names) {
+      if (!isStr(name)) {
+        throw typeErr("name", "a string", name);
+      }
       this.ref.removeAttribute(name);
     }
     return this;
@@ -780,9 +826,13 @@ var JJE = class _JJE extends JJN {
    *
    * @param name - The ARIA attribute suffix (e.g., 'label' for 'aria-label').
    * @returns The attribute value, or null if not present.
+   * @throws {TypeError} If `name` is not a string.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes | ARIA Attributes}
    */
   getAria(name) {
+    if (!isStr(name)) {
+      throw typeErr("name", "a string", name);
+    }
     return this.ref.getAttribute(`aria-${name}`);
   }
   /**
@@ -790,34 +840,46 @@ var JJE = class _JJE extends JJN {
    *
    * @param name - The ARIA attribute suffix.
    * @returns `true` if the attribute exists.
+   * @throws {TypeError} If `name` is not a string.
    */
   hasAria(name) {
+    if (!isStr(name)) {
+      throw typeErr("name", "a string", name);
+    }
     return this.ref.hasAttribute(`aria-${name}`);
   }
+  setAria(nameOrObj, value) {
+    if (isStr(nameOrObj)) {
+      this.ref.setAttribute(`aria-${nameOrObj}`, value);
+    } else if (isObj(nameOrObj)) {
+      for (const [k, v] of Object.entries(nameOrObj)) {
+        this.ref.setAttribute(`aria-${k}`, v);
+      }
+    } else {
+      throw typeErr("nameOrObj", "a string or object", nameOrObj);
+    }
+    return this;
+  }
   /**
-   * Sets an ARIA attribute.
+   * Removes one or more ARIA attributes from the Element.
    *
    * @example
    * ```ts
-   * el.setAria('hidden', 'true') // sets aria-hidden="true"
+   * el.rmAria('hidden')  // Remove single
+   * el.rmAria('label', 'hidden')  // Remove multiple
    * ```
    *
-   * @param name - The ARIA attribute suffix.
-   * @param value - The value to set.
-   * @returns This instance for chaining.
-   */
-  setAria(name, value) {
-    this.ref.setAttribute(`aria-${name}`, value);
-    return this;
-  }
-  /**
-   * Removes an ARIA attribute.
-   *
-   * @param name - The ARIA attribute suffix.
+   * @param names - The ARIA attribute suffix(es) to remove.
    * @returns This instance for chaining.
+   * @throws {TypeError} If any name is not a string.
    */
-  rmAria(name) {
-    this.ref.removeAttribute(`aria-${name}`);
+  rmAria(...names) {
+    for (const name of names) {
+      if (!isStr(name)) {
+        throw typeErr("name", "a string", name);
+      }
+      this.ref.removeAttribute(`aria-${name}`);
+    }
     return this;
   }
   /**
@@ -829,71 +891,94 @@ var JJE = class _JJE extends JJN {
   getClass() {
     return this.getAttr("class");
   }
-  /**
-   * Sets the class attribute.
-   *
-   * @param className - The class string to set.
-   * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/className | Element.className}
-   */
-  setClass(className) {
-    return this.setAttr("class", className);
+  setClass(classNameOrMap) {
+    if (typeof classNameOrMap === "string") {
+      return this.setAttr("class", classNameOrMap);
+    }
+    for (const [className, condition] of Object.entries(classNameOrMap)) {
+      if (condition) {
+        this.ref.classList.add(className);
+      } else {
+        this.ref.classList.remove(className);
+      }
+    }
+    return this;
   }
   /**
-   * Removes the `class` attribute of the element.
-   *
-   * @remarks
-   * If you want to remove a few specific class instead of all, use `rmClasses`
+   * Adds one or more classes to the Element.
    *
-   * @returns This instance for chaining.
-   */
-  rmClass() {
-    return this.rmAttr("class");
-  }
-  /**
-   * Adds one or more classes to the element.
+   * @example
+   * ```ts
+   * el.addClass('btn', 'btn-primary')
+   * ```
    *
    * @param classNames - The classes to add.
    * @returns This instance for chaining.
+   * @throws {TypeError} If any class name is not a string.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/classList | Element.classList}
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add | DOMTokenList.add}
    */
   addClass(...classNames) {
+    for (const className of classNames) {
+      if (!isStr(className)) {
+        throw typeErr("className", "a string", className);
+      }
+    }
     this.ref.classList.add(...classNames);
     return this;
   }
   /**
-   * Removes one or more classes from the element.
+   * Removes one or more classes from the Element.
+   *
+   * @example
+   * ```ts
+   * el.rmClass('active')  // Remove single
+   * el.rmClass('btn', 'btn-primary')  // Remove multiple
+   * ```
    *
    * @param classNames - The classes to remove.
    * @returns This instance for chaining.
+   * @throws {TypeError} If any class name is not a string.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/classList | Element.classList}
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove | DOMTokenList.remove}
    */
-  rmClasses(...classNames) {
+  rmClass(...classNames) {
+    for (const className of classNames) {
+      if (!isStr(className)) {
+        throw typeErr("className", "a string", className);
+      }
+    }
     this.ref.classList.remove(...classNames);
     return this;
   }
   /**
-   * Checks if the element has a specific class.
+   * Checks if the Element has a specific class.
    *
    * @param className - The class to check for.
    * @returns `true` if the element has the class.
+   * @throws {TypeError} If `className` is not a string.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/classList | Element.classList}
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/contains | DOMTokenList.contains}
    */
   hasClass(className) {
+    if (!isStr(className)) {
+      throw typeErr("className", "a string", className);
+    }
     return this.ref.classList.contains(className);
   }
   /**
-   * Toggles a class on the element.
+   * Toggles a class on the Element.
    *
    * @param className - The class to toggle.
    * @returns This instance for chaining.
+   * @throws {TypeError} If `className` is not a string.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/classList | Element.classList}
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle | DOMTokenList.toggle}
    */
   toggleClass(className) {
+    if (!isStr(className)) {
+      throw typeErr("className", "a string", className);
+    }
     this.ref.classList.toggle(className);
     return this;
   }
@@ -905,41 +990,66 @@ var JJE = class _JJE extends JJN {
    *
    * @param oldClassName - The class name to remove
    * @param newClassName - The class name to add
+   * @throws {TypeError} If either className is not a string.
    */
   replaceClass(oldClassName, newClassName) {
+    if (!isStr(oldClassName)) {
+      throw typeErr("oldClassName", "a string", oldClassName);
+    }
+    if (!isStr(newClassName)) {
+      throw typeErr("newClassName", "a string", newClassName);
+    }
     this.ref.classList.replace(oldClassName, newClassName);
     return this;
   }
   /**
-   * Adds a click event listener.
+   * Finds the closest ancestor (or self) that matches a CSS selector.
    *
-   * @param handler - The event handler.
-   * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener | EventTarget.addEventListener}
+   * @remarks
+   * Returns `null` when no matching ancestor is found.
+   *
+   * @example
+   * ```ts
+   * const button = JJE.from(document.querySelector('button'))
+   * const card = button.closest('.card')
+   * if (card) {
+   *     card.addClass('has-action')
+   * }
+   * ```
+   *
+   * @param selector - The CSS selector to search for.
+   * @returns A JJE wrapping the closest match, or null when none exists.
+   * @throws {TypeError} If `selector` is not a string.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/closest | Element.closest}
    */
-  onClick(handler) {
-    return this.on("click", handler);
+  closest(selector) {
+    if (!isStr(selector)) {
+      throw typeErr("selector", "a string", selector);
+    }
+    const match = this.ref.closest(selector);
+    return match ? JJN.wrap(match) : null;
   }
   /**
-   * Hides the element by setting the `hidden` attribute and `aria-hidden="true"`.
-   *
-   * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden | hidden attribute}
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden | aria-hidden}
-   */
+  
+       * Hides the Element by setting the `hidden` attribute and `aria-hidden="true"`.
+       *
+       * @returns This instance for chaining.
+       * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden | hidden attribute}
+       * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden | aria-hidden}
+       */
   hide() {
     return this.setAttr("hidden", "").setAttr("aria-hidden", "true");
   }
   /**
-   * Shows the element by removing the `hidden` and `aria-hidden` attributes.
+   * Shows the Element by removing the `hidden` and `aria-hidden` attributes.
    *
    * @returns This instance for chaining.
    */
   show() {
-    return this.rmAttrs("hidden", "aria-hidden");
+    return this.rmAttr("hidden", "aria-hidden");
   }
   /**
-   * Disables the element by setting the `disabled` attribute and `aria-disabled="true"`.
+   * Disables the Element by setting the `disabled` attribute and `aria-disabled="true"`.
    *
    * @returns This instance for chaining.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled attribute}
@@ -949,49 +1059,18 @@ var JJE = class _JJE extends JJN {
     return this.setAttr("disabled", "").setAttr("aria-disabled", "true");
   }
   /**
-   * Enables the element by removing the `disabled` and `aria-disabled` attributes.
+   * Enables the Element by removing the `disabled` and `aria-disabled` attributes.
    *
    * @returns This instance for chaining.
    */
   enable() {
-    return this.rmAttrs("disabled", "aria-disabled");
-  }
-  /**
-   * Gets the title attribute.
-   *
-   * @returns The title, or null if not set.
-   */
-  getTitle() {
-    return this.getAttr("title");
-  }
-  /**
-   * Sets the title attribute.
-   *
-   * @param title - The title to set.
-   * @returns This instance for chaining.
-   */
-  setTitle(title) {
-    return this.setAttr("title", title);
-  }
-  /**
-   * Sets the id attribute.
-   *
-   * @param id - The id to set.
-   * @returns This instance for chaining.
-   */
-  setId(id) {
-    return this.setAttr("id", id);
+    return this.rmAttr("disabled", "aria-disabled");
   }
   /**
-   * Gets the id attribute.
+   * Gets the inner HTML of the Element.
    *
-   * @returns The id, or null if not set.
-   */
-  getId() {
-    return this.getAttr("id");
-  }
-  /**
-   * Gets the inner HTML of the element.
+   * @remarks
+   * This method operates on `innerHTML`. The method name is kept short for convenience.
    *
    * @returns The inner HTML string.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML | Element.innerHTML}
@@ -1000,18 +1079,28 @@ var JJE = class _JJE extends JJN {
     return this.ref.innerHTML;
   }
   /**
-   * Sets the inner HTML of the element.
+   * Sets the inner HTML of the Element.
+   *
+   * @remarks
+   * This method operates on `innerHTML`. The method name is kept short for convenience.
+   * Pass an empty string, `null`, or `undefined` to clear the content.
    *
-   * @param html - The HTML string to set.
+   * @param html - The HTML string to set, or null/undefined to clear.
+   * @param unsafe - explicit opt-in to set innerHTML. must be true if html is provided.
    * @returns This instance for chaining.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML | Element.innerHTML}
    */
-  setHTML(html) {
-    this.ref.innerHTML = html;
+  setHTML(html, unsafe) {
+    if (html && unsafe !== true) {
+      throw new Error(
+        `Setting innerHTML is unsafe. Pass true as the second argument to confirm you know what you are doing.`
+      );
+    }
+    this.ref.innerHTML = html ?? "";
     return this;
   }
   /**
-   * Attaches a Shadow DOM to the element and optionally sets its content and styles.
+   * Attaches a Shadow DOM to the Element and optionally sets its content and styles.
    *
    * @remarks
    * We prevent FOUC by assigning the template and CSS in one go.
@@ -1030,7 +1119,11 @@ var JJE = class _JJE extends JJN {
     if (isObj(config)) {
       const { template, styles } = config;
       if (template) {
-        shadowRoot.innerHTML = template;
+        if (isStr(template)) {
+          shadowRoot.innerHTML = template;
+        } else {
+          shadowRoot.appendChild(template);
+        }
       }
       if (isArr(styles) && styles.length) {
         shadowRoot.adoptedStyleSheets.push(...styles);
@@ -1039,7 +1132,7 @@ var JJE = class _JJE extends JJN {
     return this;
   }
   /**
-   * Gets a wrapper around the element's Shadow Root, if it exists.
+   * Gets a wrapper around the Element's Shadow Root, if it exists.
    *
    * @returns A JJSR instance wrapping the shadow root, or null if no shadow root exists.
    */
@@ -1048,40 +1141,105 @@ var JJE = class _JJE extends JJN {
   }
 };
 
-// src/JJHE.ts
-var JJHE = class _JJHE extends JJE {
+// src/wrappers/JJEx.ts
+var JJEx = class extends JJE {
   /**
-   * Creates a JJHE instance from an HTMLElement reference.
+   * Gets a data attribute from the HTMLElement.
    *
    * @example
    * ```ts
-   * const el = JJHE.from(document.getElementById('my-id'))
+   * const value = el.getData('my-key')
    * ```
    *
-   * @param ref - The HTMLElement.
-   * @returns A new JJHE instance.
+   * @param name - The data attribute name (in camelCase).
+   * @returns The value of the attribute, or undefined if not set.
+   * @throws {TypeError} If `name` is not a string.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset | HTMLElement.dataset}
    */
-  static from(ref) {
-    return new _JJHE(ref);
+  getData(name) {
+    if (!isStr(name)) {
+      throw typeErr("name", "a string", name);
+    }
+    return this.ref.dataset[name];
   }
   /**
-   * Creates a JJHE instance from a tag name.
+   * Checks if a data attribute exists on the HTMLElement.
    *
    * @example
    * ```ts
-   * const div = JJHE.fromTag('div')
-   * const input = JJHE.fromTag('input', { is: 'custom-input' })
+   * if (el.hasData('my-key')) {
+   *   // ...
+   * }
    * ```
    *
-   * @param tagName - The tag name.
-   * @param options - Element creation options.
+   * @param name - The data attribute name (in camelCase).
+   * @returns True if the attribute exists, false otherwise.
+   * @throws {TypeError} If `name` is not a string.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset | HTMLElement.dataset}
+   */
+  hasData(name) {
+    if (!isStr(name)) {
+      throw typeErr("name", "a string", name);
+    }
+    return hasProp(this.ref.dataset, name);
+  }
+  setData(nameOrObj, value) {
+    if (typeof nameOrObj === "string") {
+      this.ref.dataset[nameOrObj] = value;
+    } else if (isObj(nameOrObj)) {
+      for (const [k, v] of Object.entries(nameOrObj)) {
+        this.ref.dataset[k] = v;
+      }
+    } else {
+      throw typeErr("nameOrObj", "a string or object", nameOrObj);
+    }
+    return this;
+  }
+  /**
+   * Removes one or more data attributes from the HTMLElement.
+   *
+   * @example
+   * ```ts
+   * el.rmData('myKey')  // Remove single
+   * el.rmData('myKey', 'otherKey')  // Remove multiple
+   * ```
+   *
+   * @param names - The data attribute name(s) (in camelCase).
+   * @returns This instance for chaining.
+   * @throws {TypeError} If any name is not a string.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset | HTMLElement.dataset}
+   */
+  rmData(...names) {
+    for (const name of names) {
+      if (!isStr(name)) {
+        throw typeErr("name", "a string", name);
+      }
+      delete this.ref.dataset[name];
+    }
+    return this;
+  }
+};
+
+// src/wrappers/JJHE.ts
+var JJHE = class _JJHE extends JJEx {
+  /**
+   * Creates a JJHE instance from an HTMLElement reference.
+   *
+   * @example
+   * ```ts
+   * const el = JJHE.from(document.getElementById('my-id'))  // from an existing HTMLElement
+   * const el = JJHE.from(new document.createElement('div')) // from a new HTMLElement
+   * ```
+   *
+   * @param ref - The HTMLElement.
    * @returns A new JJHE instance.
-   * @throws {TypeError} If `tagName` is not a string.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement | document.createElement}
    */
-  static fromTag(tagName, options) {
+  static from(ref) {
+    return new _JJHE(ref);
+  }
+  static create(tagName, options) {
     if (!isStr(tagName)) {
-      throw new TypeError(`Expected a string for tagName. Got: ${tagName} (${typeof tagName})`);
+      throw typeErr("tagName", "a string like 'div' or 'button'", tagName);
     }
     return new _JJHE(document.createElement(tagName, options));
   }
@@ -1093,45 +1251,46 @@ var JJHE = class _JJHE extends JJE {
    */
   constructor(ref) {
     if (!isA(ref, HTMLElement)) {
-      throw new TypeError(`Expected an HTMLElement. Got ${ref} (${typeof ref})`);
+      throw typeErr("ref", "an HTMLElement", ref);
     }
     super(ref);
   }
   /**
-   * Gets the value property of the element (e.g. for inputs).
+   * Gets the value property of the HTMLElement (e.g. for inputs).
    *
    * @returns The value.
-   * @throws {Error} If the element does not have a value property.
+   * @throws {Error} If the HTMLElement does not have a value property.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/value | HTMLInputElement.value}
    */
   getValue() {
     if (!hasProp(this.ref, "value")) {
-      throw new Error("Element does not have a value property");
+      throw new ReferenceError(`${this.ref.tagName} has no value property.`);
     }
     return this.ref.value;
   }
   /**
-   * Sets the value property of the element.
+   * Sets the value property of the HTMLElement.
    *
    * @example
    * ```ts
    * input.setValue('new value')
+   * input.setValue(42)  // Numbers are automatically converted
    * ```
    *
    * @param value - The value to set.
    * @returns This instance for chaining.
-   * @throws {Error} If the element does not have a value property.
+   * @throws {Error} If the HTMLElement does not have a value property.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/value | HTMLInputElement.value}
    */
   setValue(value) {
     if (!hasProp(this.ref, "value")) {
-      throw new Error("Element does not have a value property");
+      throw new ReferenceError(`${this.ref.tagName} has no value property.`);
     }
     this.ref.value = value;
     return this;
   }
   /**
-   * Focuses the element.
+   * Focuses the HTMLElement.
    *
    * @returns This instance for chaining.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus | HTMLElement.focus}
@@ -1141,7 +1300,7 @@ var JJHE = class _JJHE extends JJE {
     return this;
   }
   /**
-   * Clicks the element.
+   * Clicks the HTMLElement.
    *
    * @returns This instance for chaining.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click | HTMLElement.click}
@@ -1151,7 +1310,10 @@ var JJHE = class _JJHE extends JJE {
     return this;
   }
   /**
-   * Gets the inner text of the element.
+   * Gets the inner text of the HTMLElement.
+   *
+   * @remarks
+   * This method operates on `innerText`. The method name is kept short for convenience.
    *
    * @returns The inner text.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText | HTMLElement.innerText}
@@ -1160,143 +1322,284 @@ var JJHE = class _JJHE extends JJE {
     return this.ref.innerText;
   }
   /**
-   * Sets the inner text of the element.
+   * Sets the inner text of the HTMLElement.
+   *
+   * @remarks
+   * This method operates on `innerText`. The method name is kept short for convenience.
+   * Pass an empty string, `null`, or `undefined` to clear the content.
+   * Numbers and booleans are automatically converted to strings.
    *
-   * @param text - The text to set.
+   * @param text - The text to set, or null/undefined to clear.
    * @returns This instance for chaining.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText | HTMLElement.innerText}
    */
   setText(text) {
-    this.ref.innerText = text;
+    this.ref.innerText = text ?? "";
     return this;
   }
-  /**
-   * Finds the first element matching a selector within this element's context.
-   *
-   * @param selector - The CSS selector.
-   * @param throwIfNotFound - Whether to throw an error if not found. Defaults to true.
-   * @returns The wrapped element, or null.
-   * @throws {TypeError} If the element is not found and `throwIfNotFound` is true.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector | Element.querySelector}
-   */
-  query(selector, throwIfNotFound = true) {
-    const el = this.ref.querySelector(selector);
-    if (el) {
-      return JJN.wrap(el);
-    }
-    if (throwIfNotFound) {
-      throw new TypeError(`Element with selector ${selector} not found`);
-    }
-    return null;
-  }
-  /**
-   * Finds all elements matching a selector within this element's context.
-   *
-   * @param selector - The CSS selector.
-   * @returns An array of wrapped elements.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll | Element.querySelectorAll}
-   */
-  queryAll(selector) {
-    return JJN.wrapAll(this.ref.querySelectorAll(selector));
-  }
 };
 
-// src/JJSE.ts
-var SVG_NAMESPACE_URI = "http://www.w3.org/2000/svg";
-var JJSE = class _JJSE extends JJE {
+// src/wrappers/JJT.ts
+var JJT = class _JJT extends JJN {
   /**
-   * Creates a JJSE instance from an SVGElement reference.
+   * Creates a JJT instance from a Text node.
    *
    * @example
    * ```ts
-   * const svg = JJSE.from(myCircle)
+   * const textNode = document.createTextNode('foo')
+   * const text = JJT.from(textNode)
    * ```
    *
-   * @param ref - The SVGElement.
-   * @returns A new JJSE instance.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/SVGElement | SVGElement}
+   * @param text - The Text node.
+   * @returns A new JJT instance.
+   * @throws {TypeError} If `text` is not a Text node.
    */
-  static from(ref) {
-    return new _JJSE(ref);
+  static from(text) {
+    return new _JJT(text);
+  }
+  static fromStr(text) {
+    return new _JJT(document.createTextNode(text));
   }
   /**
-   * Creates a JJSE instance from a tag name (in the SVG namespace).
-   *
-   * @remarks
-   * Automatically uses the correct SVG namespace URI: `http://www.w3.org/2000/svg`.
+   * Creates an instance of JJT.
    *
    * @example
    * ```ts
-   * const circle = JJSE.fromTag('circle')
+   * const text = new JJT('Hello World')
    * ```
    *
-   * @param tagName - The tag name.
-   * @param options - Element creation options.
-   * @returns A new JJSE instance.
-   * @throws {TypeError} If `tagName` is not a string.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS | document.createElementNS}
-   */
-  static fromTag(tagName, options) {
-    if (!isStr(tagName)) {
-      throw new TypeError(`Expected a string for tagName. Got: ${tagName} (${typeof tagName})`);
-    }
-    const element = document.createElementNS(SVG_NAMESPACE_URI, tagName, options);
-    return new _JJSE(element);
-  }
-  /**
-   * Creates an instance of JJSE.
-   *
-   * @param ref - The SVGElement to wrap.
-   * @throws {TypeError} If `ref` is not an SVGElement.
+   * @param ref - The Text node or a string to create a Text node from.
+   * @throws {TypeError} If `ref` is not a Text node or string.
    */
   constructor(ref) {
-    if (!isA(ref, SVGElement)) {
-      throw new TypeError(`Expected an SVGElement. Got ${ref} (${typeof ref})`);
+    if (!isA(ref, Text)) {
+      throw new TypeError(
+        `JJT expects a Text node. Got ${ref} (${typeof ref}). Create a Text node with JJT.fromStr() or document.createTextNode('text').`
+      );
     }
     super(ref);
   }
   /**
-   * Gets the text content of the element.
+   * Gets the text content of the Text node.
+   *
+   * @example
+   * ```ts
+   * const content = text.getText()
+   * ```
    *
    * @returns The text content.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent | Node.textContent}
    */
   getText() {
-    return this.ref.textContent ?? "";
+    return this.ref.textContent;
   }
   /**
-   * Sets the text content of the element.
+   * Sets the text content of the Text node.
+   *
+   * @example
+   * ```ts
+   * text.setText('New content')
+   * ```
    *
-   * @param text - The text to set.
+   * @param text - The text to set. Set it to null or undefined to remove all text
    * @returns This instance for chaining.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent | Node.textContent}
    */
   setText(text) {
-    this.ref.textContent = text;
+    this.ref.textContent = text ?? null;
     return this;
   }
   /**
-   * Clears the text content of the element.
+   * Appends text to the existing content.
+   *
+   * @example
+   * ```ts
+   * text.setText('hello')
+   * text.addText(' world')
+   * console.log(text.getText()) // 'hello world'
+   * ```
    *
+   * @param text - The string to add to the existing contents. If null or undefined, nothing is added.
    * @returns This instance for chaining.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent | Node.textContent}
    */
-  empty() {
-    this.ref.textContent = "";
+  addText(text) {
+    if (text != null) {
+      this.ref.textContent += text;
+    }
     return this;
   }
   /**
-   * Sets the fill attribute.
+   * Clears the text content of the Text node.
+   *
+   * @example
+   * ```ts
+   * text.empty()
+   * ```
    *
-   * @param value - The fill color/value.
    * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill | fill}
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent | Node.textContent}
    */
-  setFill(value) {
-    return this.setAttr("fill", value);
+  empty() {
+    return this.setText("");
   }
+};
+
+// src/wrappers/JJD.ts
+var JJD = class _JJD extends JJNx {
   /**
-   * Sets the stroke attribute.
+   * Creates a JJD instance from a Document reference.
+   *
+   * @example
+   * ```ts
+   * const doc = JJD.from(document)
+   * ```
+   *
+   * @param ref - The Document instance.
+   * @returns A new JJD instance.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document | Document}
+   */
+  static from(ref) {
+    return new _JJD(ref);
+  }
+  /**
+   * Creates an instance of JJD.
+   *
+   * @param ref - The Document instance to wrap.
+   * @throws {TypeError} If `ref` is not a Document.
+   */
+  constructor(ref) {
+    if (!isA(ref, Document)) {
+      throw new TypeError(`JJD expects a Document instance. Got ${ref} (${typeof ref}). `);
+    }
+    super(ref);
+  }
+  /**
+   * Gets the `<head>` element of the document wrapped in a `JJHE` instance.
+   *
+   * @returns The wrapped head element.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/head | Document.head}
+   */
+  get head() {
+    return JJHE.from(this.ref.head);
+  }
+  /**
+   * Gets the `<body>` element of the document wrapped in a `JJHE` instance.
+   *
+   * @returns The wrapped body element.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/body | Document.body}
+   */
+  get body() {
+    return JJHE.from(this.ref.body);
+  }
+};
+
+// src/wrappers/JJSE.ts
+var SVG_NAMESPACE_URI = "http://www.w3.org/2000/svg";
+var JJSE = class _JJSE extends JJEx {
+  /**
+   * Creates a JJSE instance from an SVGElement reference.
+   *
+   * @example
+   * ```ts
+   * const svg = JJSE.from(myCircle)
+   * ```
+   *
+   * @param ref - The SVGElement.
+   * @returns A new JJSE instance.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/SVGElement | SVGElement}
+   */
+  static from(ref) {
+    return new _JJSE(ref);
+  }
+  /**
+   * Creates a JJSE instance from a tag name (in the SVG namespace).
+   *
+   * @remarks
+   * Automatically uses the correct SVG namespace URI: `http://www.w3.org/2000/svg`.
+   *
+   * @example
+   * ```ts
+   * const circle = JJSE.create('circle')
+   * ```
+   *
+   * @param tagName - The tag name.
+   * @param options - Element creation options.
+   * @returns A new JJSE instance.
+   * @throws {TypeError} If `tagName` is not a string.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS | document.createElementNS}
+   */
+  static create(tagName, options) {
+    if (!isStr(tagName)) {
+      throw typeErr("tagName", 'a string like "circle" or "path"', tagName);
+    }
+    const element = document.createElementNS(SVG_NAMESPACE_URI, tagName, options);
+    return new _JJSE(element);
+  }
+  /**
+   * Creates an instance of JJSE.
+   *
+   * @param ref - The SVGElement to wrap.
+   * @throws {TypeError} If `ref` is not an SVGElement.
+   */
+  constructor(ref) {
+    if (!isA(ref, SVGElement)) {
+      throw typeErr("ref", "an SVGElement", ref);
+    }
+    super(ref);
+  }
+  /**
+   * Gets the text content of the SVGElement.
+   *
+   * @remarks
+   * This method operates on `textContent`. The method name is kept short for convenience.
+   *
+   * @example
+   * ```ts
+   * const text = svg.getText()
+   * ```
+   *
+   * @returns The text content.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent | Node.textContent}
+   */
+  getText() {
+    return this.ref.textContent ?? "";
+  }
+  /**
+   * Sets the text content of the SVGElement.
+   *
+   * @remarks
+   * This method operates on `textContent`. The method name is kept short for convenience.
+   * Pass an empty string, `null`, or `undefined` to clear the content.
+   * Numbers and booleans are automatically converted to strings.
+   *
+   * @example
+   * ```ts
+   * svg.setText('Hello SVG')
+   * svg.setText(null)  // Clear content
+   * svg.setText(42)  // Numbers are converted
+   * ```
+   *
+   * @param text - The text to set, or null/undefined to clear.
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent | Node.textContent}
+   */
+  setText(text) {
+    this.ref.textContent = text ?? "";
+    return this;
+  }
+  /**
+   * Sets the fill attribute.
+   *
+   * @param value - The fill color/value.
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill | fill}
+   */
+  setFill(value) {
+    return this.setAttr("fill", value);
+  }
+  /**
+   * Sets the stroke attribute.
    *
    * @param value - The stroke color/value.
    * @returns This instance for chaining.
@@ -1380,88 +1683,13 @@ var JJSE = class _JJSE extends JJE {
   }
 };
 
-// src/JJD.ts
-var JJD = class _JJD extends JJN {
-  /**
-   * Creates a JJD instance from a Document reference.
-   *
-   * @example
-   * ```ts
-   * const doc = JJD.from(document)
-   * ```
-   *
-   * @param ref - The Document instance.
-   * @returns A new JJD instance.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document | Document}
-   */
-  static from(ref) {
-    return new _JJD(ref);
-  }
-  /**
-   * Creates an instance of JJD.
-   *
-   * @param ref - The Document instance to wrap.
-   * @throws {TypeError} If `ref` is not a Document.
-   */
-  constructor(ref) {
-    if (!isA(ref, Document)) {
-      throw new TypeError(`Expected a Document. Got ${ref} (${typeof ref})`);
-    }
-    super(ref);
-  }
-  /**
-   * Gets the `<head>` element of the document wrapped in a `JJHE` instance.
-   *
-   * @returns The wrapped head element.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/head | Document.head}
-   */
-  get head() {
-    return JJN.wrap(this.ref.head);
-  }
-  /**
-   * Gets the `<body>` element of the document wrapped in a `JJHE` instance.
-   *
-   * @returns The wrapped body element.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/body | Document.body}
-   */
-  get body() {
-    return JJN.wrap(this.ref.body);
-  }
-  /**
-   * Sets the document title.
-   *
-   * @example
-   * ```ts
-   * JJD.from(document).setTitle('New Page Title')
-   * ```
-   *
-   * @param title - The new title string.
-   * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/title | Document.title}
-   */
-  setTitle(title) {
-    this.ref.title = title;
-    return this;
-  }
-  /**
-   * Gets the document title.
-   *
-   * @returns The current title of the document.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/title | Document.title}
-   */
-  getTitle() {
-    return this.ref.title;
-  }
-};
-
-// src/mixins.ts
-var { wrapAll, unwrap, unwrapAll, isWrapable } = JJN;
-function wrap(raw) {
+// src/wrappers/JJN.ts
+JJN.wrap = function wrap(raw) {
   if (isStr(raw)) {
-    return JJT.from(document.createTextNode(raw));
+    return JJT.fromStr(raw);
   }
   if (!isObj(raw)) {
-    throw new TypeError(`Expected an object to wrap. Got ${raw} (${typeof raw})`);
+    throw typeErr("raw", "an object", raw);
   }
   if (isA(raw, JJN)) {
     return raw;
@@ -1490,234 +1718,14 @@ function wrap(raw) {
   if (isA(raw, Node)) {
     return JJN.from(raw);
   }
-  throw new TypeError(`Expected a Node to wrap. Got ${raw} (${typeof raw})`);
-}
-function byId(id, throwIfNotFound = true) {
-  const el = document.getElementById(id);
-  if (el) {
-    return wrap(el);
-  }
-  if (throwIfNotFound) {
-    throw new TypeError(`Found no element with id ${id} in the document.`);
-  }
-  return null;
-}
-function byClass(className) {
-  return wrapAll(document.getElementsByClassName(className));
-}
-function query(selector, throwIfNotFound = true) {
-  const queryResult = document.querySelector(selector);
-  if (queryResult) {
-    return wrap(queryResult);
-  }
-  if (throwIfNotFound) {
-    throw new TypeError(`Element with selector ${selector} not found`);
-  }
-  return null;
-}
-function queryAll(selector) {
-  return wrapAll(document.querySelectorAll(selector));
-}
-var DDF = {
-  /**
-   * Finds an element by ID within this Document or DocumentFragment.
-   *
-   * @example
-   * ```ts
-   * const el = doc.byId('header')
-   * ```
-   *
-   * @param this - The JJD or JJDF instance.
-   * @param id - The ID to search for.
-   * @param throwIfNotFound - Whether to throw an error if not found. Defaults to true.
-   * @returns The wrapped element, or null if not found and throwIfNotFound is false.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById | Document.getElementById}
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/getElementById | DocumentFragment.getElementById}
-   */
-  byId(id, throwIfNotFound = true) {
-    const el = this.ref.getElementById(id);
-    if (el) {
-      return wrap(el);
-    }
-    if (throwIfNotFound) {
-      throw new TypeError(`Element with id ${id} not found`);
-    }
-    return null;
-  }
+  throw typeErr("raw", "a Node", raw);
 };
-var EDDF = {
-  /**
-   * Finds the first element matching a selector within this element's context.
-   *
-   * @example
-   * ```ts
-   * const span = div.query('span')
-   * ```
-   *
-   * @param this - The JJE, JJD or JJDF instance.
-   * @param selector - The CSS selector.
-   * @param throwIfNotFound - Whether to throw an error if not found. Defaults to true.
-   * @returns The wrapped element, or null.
-   * @throws {TypeError} If context is invalid or element not found (when requested).
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector | Element.querySelector}
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector | Document.querySelector}
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/querySelector | DocumentFragment.querySelector}
-   */
-  query(selector, throwIfNotFound = true) {
-    const queryResult = this.ref.querySelector(selector);
-    if (queryResult) {
-      return wrap(queryResult);
-    }
-    if (throwIfNotFound) {
-      throw new TypeError(`Element with selector ${selector} not found`);
-    }
-    return null;
-  },
-  /**
-   * Finds all elements matching a selector within this element's context.
-   *
-   * @example
-   * ```ts
-   * const items = list.queryAll('li')
-   * ```
-   *
-   * @param this - The JJE, JJD or JJDF instance.
-   * @param selector - The CSS selector.
-   * @returns An array of wrapped elements.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll | Element.querySelectorAll}
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll | Document.querySelectorAll}
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/querySelectorAll | DocumentFragment.querySelectorAll}
-   */
-  queryAll(selector) {
-    return wrapAll(this.ref.querySelectorAll(selector));
-  },
-  /**
-   * Appends children to this node using native append.
-   *
-   * @example
-   * ```ts
-   * myDiv.append(h('span', null, 'hello'))
-   * ```
-   *
-   * @remarks
-   * To make template codes easier, this function ignores any child that is not possible to `wrap()` (e.g. undefined, null, false).
-   *
-   * @param this - The JJE, JJD or JJDF instance.
-   * @param children - The children to append.
-   * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/append | Element.append}
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/append | Document.append}
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/append | DocumentFragment.append}
-   */
-  append(...children) {
-    const nodes = unwrapAll(children.filter(isWrapable));
-    this.ref.append(...nodes);
-    return this;
-  },
-  /**
-   * Prepends children to this node using native prepend.
-   *
-   * @example
-   * ```ts
-   * div.prepend(h('span', null, 'first'))
-   * ```
-   *
-   * @remarks
-   * To make template codes easier, this function ignores any child that is not possible to `wrap()` (e.g. undefined, null, false).
-   *
-   * @param this - The JJE, JJD or JJDF instance.
-   * @param children - The children to prepend.
-   * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend | Element.prepend}
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/prepend | Document.prepend}
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/prepend | DocumentFragment.prepend}
-   */
-  prepend(...children) {
-    const nodes = unwrapAll(children.filter(isWrapable));
-    this.ref.prepend(...nodes);
-    return this;
-  },
-  /**
-   * Replaces the existing children of a node with a specified new set of children.
-   *
-   * @remarks
-   * If no children are provided, it empties the node.
-   *
-   * @example
-   * ```ts
-   * div.setChildren(h('p', null, 'New Content'))
-   * ```
-   *
-   * @remarks
-   * To make template codes easier, this function ignores any child that is not possible to `wrap()` (e.g. undefined, null, false).
-   *
-   * @param this - The JJE, JJD or JJDF instance.
-   * @param children - The children to replace with.
-   * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren | Element.replaceChildren}
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/replaceChildren | Document.replaceChildren}
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/replaceChildren | DocumentFragment.replaceChildren}
-   */
-  setChildren(...children) {
-    const nodes = unwrapAll(children.filter(isWrapable));
-    this.ref.replaceChildren(...nodes);
-    return this;
-  },
-  /**
-   * Removes all children from this node.
-   *
-   * @example
-   * ```ts
-   * div.empty()
-   * ```
-   *
-   * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren | Element.setChildren}
-   */
-  empty() {
-    this.setChildren();
-    return this;
-  }
-};
-var HESE = {
-  getData(name) {
-    return this.ref.dataset[name];
-  },
-  hasData(name) {
-    return hasProp(this.ref.dataset, name);
-  },
-  setData(name, value) {
-    this.ref.dataset[name] = value;
-    return this;
-  },
-  setDataObj(obj) {
-    for (const [name, value] of Object.entries(obj)) {
-      this.setData(name, value);
-    }
-    return this;
-  },
-  rmData(name) {
-    delete this.ref.dataset[name];
-    return this;
-  }
-};
-function assignPrototype(Class, ...mixins) {
-  for (const mixin of mixins) {
-    Object.assign(Class.prototype, mixin);
-  }
-}
-JJN.wrap = wrap;
-assignPrototype(JJE, EDDF);
-assignPrototype(JJD, DDF, EDDF);
-assignPrototype(JJDF, DDF, EDDF);
-assignPrototype(JJHE, HESE);
-assignPrototype(JJSE, HESE);
 
 // src/helpers.ts
 function h(tagName, attributes, ...children) {
-  const ret = JJHE.fromTag(tagName).append(...children);
+  const ret = JJHE.create(tagName).addChild(...children);
   if (attributes) {
-    ret.setAttrs(attributes);
+    ret.setAttr(attributes);
   }
   return ret;
 }
@@ -1737,28 +1745,28 @@ function linkAs(href) {
       throw new Error(`No 'as' attribute was specified and we failed to guess it from the URL: ${href}`);
   }
 }
-function createLinkPre(rel, href, as) {
+function createLinkPre(href, rel, as) {
   if (!isStr(href)) {
     if (!isA(href, URL)) {
-      throw new TypeError(`Expected a string or URL. Got ${href} (${typeof href})`);
+      throw typeErr("href", "a string or URL", href);
     }
     href = href.toString();
   }
   if (!["prefetch", "preload"].includes(rel)) {
-    throw new RangeError(`rel should be one of 'prefetch' or 'preload'. Got ${rel} (${typeof rel})`);
+    throw new RangeError(errMsg("rel", `'prefetch' or 'preload'`, rel));
   }
   if (!as) {
     as = linkAs(href);
     if (!as) {
-      throw new Error(`No 'as' attribute was specified and we failed to guess it from the URL: ${href}`);
+      throw new Error(`Could not guess 'as' attribute from URL: ${href}`);
     }
   }
   if (!["fetch", "style", "script"].includes(as)) {
-    throw new RangeError(`as should be one of 'fetch' or 'style'. Got ${as} (${typeof as})`);
+    throw new RangeError(errMsg("as", `'fetch', 'style', or 'script'`, as));
   }
-  return JJHE.fromTag("link").setAttrs({
-    rel,
+  return JJHE.create("link").setAttr({
     href,
+    rel,
     as
   });
 }
@@ -1769,7 +1777,7 @@ function addLinkPre(...args) {
 }
 async function fetchText(url, mime = "text/*") {
   if (!isStr(mime)) {
-    throw new TypeError(`Expected a string mime like 'text/html' or 'text/css'. Got ${mime} (${typeof mime})`);
+    throw typeErr("mime", "a string", mime);
   }
   const response = await fetch(url, { headers: { Accept: mime } });
   if (!response.ok) {
@@ -1788,8 +1796,35 @@ async function fetchStyle(url) {
 }
 
 // src/components.ts
+function attr2prop(instance, name, oldValue, newValue) {
+  if (!isA(instance, HTMLElement)) {
+    throw typeErr("instance", "an HTMLElement", instance);
+  }
+  if (oldValue !== newValue) {
+    const propName = keb2cam(name);
+    if (hasProp(instance, propName)) {
+      instance[propName] = newValue;
+      return true;
+    }
+  }
+  return false;
+}
+async function registerComponent(name, constructor, options) {
+  if (!isStr(name)) {
+    throw typeErr("name", "a string", name);
+  }
+  if (!isFn(constructor)) {
+    throw typeErr("constructor", "a function", constructor);
+  }
+  if (!customElements.get(name)) {
+    customElements.define(name, constructor, options);
+    await customElements.whenDefined(name);
+  }
+}
+
+// src/ShadowMaster.ts
 async function templatePromise(templateConfig) {
-  if (!isDef(templateConfig)) {
+  if (templateConfig === void 0) {
     return void 0;
   }
   if (isFn(templateConfig)) {
@@ -1799,13 +1834,22 @@ async function templatePromise(templateConfig) {
   if (isStr(templateConfig)) {
     return templateConfig;
   }
+  if (isA(templateConfig, JJDF)) {
+    return templateConfig.ref.cloneNode(true);
+  }
+  if (isA(templateConfig, DocumentFragment)) {
+    return templateConfig.cloneNode(true);
+  }
   if (isA(templateConfig, JJHE)) {
-    return templateConfig.getHTML();
+    if (templateConfig.ref instanceof HTMLTemplateElement) {
+      return templateConfig.ref.content.cloneNode(true);
+    }
+    return templateConfig.ref.outerHTML;
   }
   if (isA(templateConfig, HTMLElement)) {
-    return templateConfig.outerHTML;
+    return templateConfig instanceof HTMLTemplateElement ? templateConfig.content.cloneNode(true) : templateConfig.outerHTML;
   }
-  throw new TypeError(`Expected a string, JJHE or HTMLElement. Got ${templateConfig} (${typeof templateConfig})`);
+  throw typeErr("template", "a string, JJHE, JJDF, HTMLElement, or DocumentFragment", templateConfig);
 }
 async function stylePromise(styleConfig) {
   if (isFn(styleConfig)) {
@@ -1818,7 +1862,7 @@ async function stylePromise(styleConfig) {
   if (isStr(styleConfig)) {
     return await cssToStyle(styleConfig);
   }
-  throw new TypeError(`Expected a css string or CSSStyleSheet. Got ${styleConfig} (${typeof styleConfig})`);
+  throw typeErr("style", "a CSS string or CSSStyleSheet", styleConfig);
 }
 function stylePromises(styleConfigs) {
   if (!isArr(styleConfigs)) {
@@ -1830,10 +1874,13 @@ async function resolveConfig(templateConfig, styleConfigs) {
   const [template, ...styles] = await Promise.all([templatePromise(templateConfig), ...stylePromises(styleConfigs)]);
   return { template, styles };
 }
-var ShadowMaster = class _ShadowMaster {
-  #templateConfig = void 0;
-  #stylesConfig = [];
-  #normalizedConfig = void 0;
+var _templateConfig, _stylesConfig, _normalizedConfig;
+var _ShadowMaster = class _ShadowMaster {
+  constructor() {
+    __privateAdd(this, _templateConfig);
+    __privateAdd(this, _stylesConfig, []);
+    __privateAdd(this, _normalizedConfig);
+  }
   /**
    * Creates a new instance of ShadowMaster.
    *
@@ -1842,8 +1889,6 @@ var ShadowMaster = class _ShadowMaster {
   static create() {
     return new _ShadowMaster();
   }
-  constructor() {
-  }
   /**
    * Sets the template configuration.
    *
@@ -1857,7 +1902,7 @@ var ShadowMaster = class _ShadowMaster {
    * ```
    */
   setTemplate(templateConfig) {
-    this.#templateConfig = templateConfig;
+    __privateSet(this, _templateConfig, templateConfig);
     return this;
   }
   /**
@@ -1876,7 +1921,7 @@ var ShadowMaster = class _ShadowMaster {
    * ```
    */
   addStyles(...stylesConfig) {
-    this.#stylesConfig.push(...stylesConfig);
+    __privateGet(this, _stylesConfig).push(...stylesConfig);
     return this;
   }
   /**
@@ -1889,43 +1934,24 @@ var ShadowMaster = class _ShadowMaster {
    * @returns A promise resolving to the ShadowConfig.
    */
   async getResolved() {
-    if (!this.#normalizedConfig) {
-      this.#normalizedConfig = resolveConfig(this.#templateConfig, this.#stylesConfig);
+    if (!__privateGet(this, _normalizedConfig)) {
+      __privateSet(this, _normalizedConfig, resolveConfig(__privateGet(this, _templateConfig), __privateGet(this, _stylesConfig)));
     }
-    return await this.#normalizedConfig;
+    return await __privateGet(this, _normalizedConfig);
   }
 };
-function attr2prop(instance, name, oldValue, newValue) {
-  if (!isA(instance, HTMLElement)) {
-    throw new TypeError(
-      `Expected an HTMLElement or a custom element instance. Got ${instance} (${typeof instance})`
-    );
-  }
-  if (oldValue !== newValue) {
-    const propName = keb2cam(name);
-    if (hasProp(instance, propName)) {
-      instance[propName] = newValue;
-      return true;
-    }
-  }
-  return false;
-}
-async function registerComponent(name, constructor, options) {
-  if (!isStr(name)) {
-    throw new TypeError(`Expected a string name. Got ${name} (${typeof name})`);
-  }
-  if (!isFn(constructor)) {
-    throw new TypeError(`Expected a constructor function. Got ${constructor} (${typeof constructor})`);
-  }
-  if (!customElements.get(name)) {
-    customElements.define(name, constructor, options);
-    await customElements.whenDefined(name);
-  }
-}
+_templateConfig = new WeakMap();
+_stylesConfig = new WeakMap();
+_normalizedConfig = new WeakMap();
+var ShadowMaster = _ShadowMaster;
+
+// src/index.ts
+var doc = JJD.from(document);
 export {
   JJD,
   JJDF,
   JJE,
+  JJET,
   JJHE,
   JJN,
   JJSE,
@@ -1934,30 +1960,20 @@ export {
   ShadowMaster,
   addLinkPre,
   attr2prop,
-  byClass,
-  byId,
   createLinkPre,
   cssToStyle,
+  doc,
   fetchCss,
   fetchHtml,
   fetchStyle,
   fetchText,
   fileExt,
   h,
-  isWrapable,
   keb2cam,
   keb2pas,
   nextAnimationFrame,
-  off,
-  on,
   pas2keb,
-  query,
-  queryAll,
   registerComponent,
-  sleep,
-  unwrap,
-  unwrapAll,
-  wrap,
-  wrapAll
+  sleep
 };
-//# sourceMappingURL=bundle.js.map
+//# sourceMappingURL=bundle.js.map