jj 2.1.0 → 2.3.0

package/lib/bundle.js

@@ -1,38 +1,3 @@
-// src/util.ts
-function nextAnimationFrame() {
-  return new Promise((resolve) => requestAnimationFrame(resolve));
-}
-function on(target, eventName, handler) {
-  target.addEventListener(eventName, handler);
-}
-function off(target, eventName, handler) {
-  target.removeEventListener(eventName, handler);
-}
-
-// src/case.ts
-function pas2keb(str) {
-  if (typeof str !== "string") {
-    throw new TypeError(`Expected a string. Got ${str} (${typeof str})`);
-  }
-  if (/[^a-zA-Z0-9_]/.test(str)) {
-    throw new TypeError(`Invalid characters in string. Only alphanumeric and underscores are allowed. Got: ${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 (typeof str !== "string") {
-    throw new TypeError(`Expected a string. Got ${str} (${typeof 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 (typeof str !== "string") {
-    throw new TypeError(`Expected a string. Got ${str} (${typeof str})`);
-  }
-  return str.replace(/^-+|-+$/g, "").replace(/-+([a-z])/g, (g, c) => c.toUpperCase());
-}
-
 // node_modules/jty/lib/misc.js
 function isDef(x) {
   return x !== void 0;
@@ -111,150 +76,388 @@ function isStr(x) {
 var { hasOwnProperty: hasOwnProperty2 } = Object;
 var { isArray: isArray2 } = Array;
 
-// src/WN.ts
-function isElementOrDocumentFragment(x) {
-  return isA(x, Element) || isA(x, DocumentFragment);
+// src/util.ts
+function fileExt(path) {
+  if (!isStr(path)) {
+    throw new TypeError(`Expected a string file path. Got ${path} (${typeof path})`);
+  }
+  const lastDotIndex = path.lastIndexOf(".");
+  if (lastDotIndex === -1) {
+    return "";
+  }
+  const ext = path.slice(lastDotIndex + 1);
+  if (ext.indexOf("/") !== -1) {
+    return "";
+  }
+  return ext.toLowerCase().trim();
 }
-var WN = class _WN {
-  static from(node) {
-    return new _WN(node);
+function nextAnimationFrame() {
+  return new Promise((resolve) => requestAnimationFrame(resolve));
+}
+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);
+}
+
+// src/case.ts
+function pas2keb(str) {
+  if (!isStr(str)) {
+    throw new TypeError(`Expected a string. Got ${str} (${typeof str})`);
+  }
+  if (/[^a-zA-Z0-9_]/.test(str)) {
+    throw new TypeError(`Invalid characters in string. Only alphanumeric and underscores are allowed. Got: ${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})`);
+  }
+  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})`);
   }
+  return str.replace(/^-+|-+$/g, "").replace(/-+([a-z])/g, (g, c) => c.toUpperCase());
+}
+
+// src/JJN.ts
+var JJN = class _JJN {
   /**
-   * wraps an iteratable object (e.g. an array of wrapped or DOM elements)
+   * Creates a JJN instance from a Node reference.
+   *
+   * @example
+   * ```ts
+   * const node = JJN.from(document.createTextNode('hello'))
+   * ```
+   *
+   * @param node - The Node instance.
+   * @returns A new JJN instance.
    */
-  static wrapAll(iterable) {
-    return Array.from(iterable, _WN.wrap);
+  static from(node) {
+    return new _JJN(node);
   }
   /**
-   * unwraps an iteratable object (e.g. an array of HTMLCollection)
+   * Wraps a native DOM node or string into the most specific JJ wrapper available.
+   *
+   * @remarks
+   * This function acts as a factory, inspecting the input type and returning the appropriate
+   * subclass of `JJN` (e.g., `JJHE` for `HTMLElement`, `JJT` for `Text`).
+   *
+   * @example
+   * ```ts
+   * const bodyWrapper = JJN.wrap(document.body) // Returns JJHE
+   * const textWrapper = JJN.wrap('Hello') // Returns JJT wrapping a new Text node
+   * ```
+   *
+   * @param raw - The object to wrap. If it's already Wrapped, it'll be returned without any change. We don't double-wrap or clone it.
+   * @returns The most granular Wrapped subclass instance. If the input is already wrapped, it'll be returned as is without cloning.
+   * @throws {TypeError} If the input is not a Node, string, or JJ wrapper.
    */
-  static unwrapAll(iterable) {
-    return Array.from(iterable, _WN.unwrap);
-  }
-  static byId(id, throwIfNotFound = true) {
-    const el = document.getElementById(id);
-    if (el) {
-      return _WN.wrap(el);
-    }
-    if (throwIfNotFound) {
-      throw new TypeError(`Element with id ${id} not found`);
-    }
-    return null;
-  }
-  static byClass(className) {
-    return _WN.wrapAll(document.getElementsByClassName(className));
-  }
-  static query(selector, throwIfNotFound = true) {
-    const queryResult = document.querySelector(selector);
-    if (queryResult) {
-      return _WN.wrap(queryResult);
-    }
-    if (throwIfNotFound) {
-      throw new TypeError(`Element with selector ${selector} not found`);
-    }
-    return null;
+  static wrap(raw) {
+    throw new ReferenceError(`The mixin is supposed to override this method.`);
   }
-  query(selector, throwIfNotFound = true) {
-    if (!isElementOrDocumentFragment(this.ref)) {
-      throw new TypeError(`Expected an Element or DocumentFragment. Got ${this.ref} (${typeof this.ref})`);
-    }
-    const queryResult = this.ref.querySelector(selector);
-    if (queryResult) {
-      return _WN.wrap(queryResult);
-    }
-    if (throwIfNotFound) {
-      throw new TypeError(`Element with selector ${selector} not found`);
-    }
-    return null;
+  /**
+   * Extracts the underlying native DOM node from a wrapper.
+   *
+   * @remarks
+   * If the input is already a native Node, it is returned as is.
+   * If the input is a string, a new Text node is created and returned.
+   *
+   * @example
+   * ```ts
+   * const rawElement = JJN.unwrap(myJJHE) // Returns HTMLElement
+   * ```
+   *
+   * @param obj - The object to unwrap.
+   * @returns The underlying DOM node.
+   * @throws {TypeError} If the input cannot be unwrapped.
+   */
+  static unwrap(obj) {
+    throw new ReferenceError(`The mixin is supposed to override this method.`);
   }
-  static queryAll(selector) {
-    return _WN.wrapAll(document.querySelectorAll(selector));
+  /**
+   * Wraps an iterable object (e.g. an array of wrapped or DOM elements).
+   *
+   * @example
+   * ```ts
+   * const wrappedList = JJN.wrapAll(document.querySelectorAll('div'))
+   * ```
+   *
+   * @param iterable - The iterable to wrap.
+   * @returns An array of wrapped instances.
+   */
+  static wrapAll(iterable) {
+    return Array.from(iterable, _JJN.wrap);
   }
-  queryAll(selector) {
-    if (!isElementOrDocumentFragment(this.ref)) {
-      throw new TypeError(`Expected an Element or DocumentFragment. Got ${this.ref} (${typeof this.ref})`);
-    }
-    return _WN.wrapAll(this.ref.querySelectorAll(selector));
+  /**
+   * Unwraps an iterable object (e.g. an array or HTMLCollection).
+   *
+   * @example
+   * ```ts
+   * const nodes = JJN.unwrapAll(wrappedList)
+   * ```
+   *
+   * @param iterable - The iterable to unwrap.
+   * @returns An array of native DOM nodes.
+   */
+  static unwrapAll(iterable) {
+    return Array.from(iterable, _JJN.unwrap);
   }
   #ref;
+  /**
+   * Creates an instance of JJN.
+   *
+   * @param ref - The Node to wrap.
+   * @throws {TypeError} If `ref` is not a Node.
+   */
   constructor(ref) {
     if (!isA(ref, Node)) {
       throw new TypeError(`Expected a Node. Got ${ref} (${typeof ref})`);
     }
     this.#ref = ref;
   }
+  /**
+   * Gets the underlying DOM Node.
+   */
   get ref() {
     return this.#ref;
   }
+  /**
+   * Clones the node.
+   *
+   * @param deep - If true, clones the subtree.
+   * @returns A new wrapped instance of the clone.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode | Node.cloneNode}
+   */
   clone(deep) {
-    return _WN.wrap(this.ref.cloneNode(deep));
+    return _JJN.wrap(this.ref.cloneNode(deep));
   }
+  /**
+   * Appends children to this node.
+   *
+   * @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 = _WN.unwrapAll(children);
-    if (isElementOrDocumentFragment(this.ref)) {
-      this.ref.append(...nodes);
-    } else {
-      for (const node of nodes) {
-        if (node) {
-          this.ref.appendChild(node);
-        }
+    const nodes = _JJN.unwrapAll(children);
+    const ref = this.ref;
+    for (const node of nodes) {
+      if (node) {
+        ref.appendChild(node);
       }
     }
     return this;
   }
+  /**
+   * Maps an array to children and appends them.
+   *
+   * @example
+   * ```ts
+   * list.mapAppend(['a', 'b'], item => h('li', null, item))
+   * ```
+   *
+   * @param array - The source array.
+   * @param mapFn - The mapping function returning a Wrappable.
+   * @returns This instance for chaining.
+   */
   mapAppend(array, mapFn) {
     return this.append(...array.map(mapFn));
   }
+  /**
+   * Prepends children to this node.
+   *
+   * @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}
+   */
   prepend(...children) {
-    const nodes = _WN.unwrapAll(children);
-    if (isElementOrDocumentFragment(this.ref)) {
-      this.ref.prepend(...nodes);
-    } else {
-      const first = this.ref.firstChild;
-      for (const node of nodes) {
-        if (node) {
-          this.ref.insertBefore(node, first);
-        }
+    const nodes = _JJN.unwrapAll(children);
+    const ref = this.ref;
+    const first = ref.firstChild;
+    for (const node of nodes) {
+      if (node) {
+        ref.insertBefore(node, first);
       }
     }
     return this;
   }
+  /**
+   * Maps an array to children and prepends them.
+   *
+   * @example
+   * ```ts
+   * list.mapPrepend(['a', 'b'], item => JJHE.fromTag('li').setText(item))
+   * ```
+   *
+   * @param array - The source array.
+   * @param mapFn - The mapping function.
+   * @returns This instance for chaining.
+   */
   mapPrepend(array, mapFn) {
     return this.prepend(...array.map(mapFn));
   }
+  /**
+   * Replaces the existing children of this node with a specified new set of children.
+   *
+   * @remarks
+   * If no children are specified, it essentially empties the node
+   *
+   * @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}
+   */
+  replaceChildren(...children) {
+    return this.empty().append(...children);
+  }
+  /**
+   * Adds an event listener.
+   *
+   * @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/addEventListener | EventTarget.addEventListener}
+   */
   on(eventName, handler) {
     on(this.ref, eventName, handler);
     return this;
   }
+  /**
+   * Removes an event listener.
+   *
+   * @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.
+   *
+   * @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.
+   *
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren | Element.replaceChildren}
+   */
+  empty() {
+    const element = this.ref;
+    while (element.firstChild) {
+      element.removeChild(element.firstChild);
+    }
+    return this;
+  }
+  /**
+   * Runs a function in the context of this JJN instance.
+   *
+   * @example
+   * ```ts
+   * div.run(function() {
+   *   this.addClass('active')
+   *   console.log(this.ref)
+   * })
+   * ```
+   * @remarks
+   * If you want to access the current JJ* instance, 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 JJN instance.
+   * @param args - Arguments to pass to the function.
+   * @returns The return value of the function.
+   */
+  run(fn, ...args) {
+    return fn.call(this, ...args);
+  }
 };
 
-// src/WT.ts
-var WT = class _WT extends WN {
+// src/JJT.ts
+var JJT = class _JJT extends JJN {
+  /**
+   * Creates a JJT instance from a Text node.
+   *
+   * @example
+   * ```ts
+   * const textNode = document.createTextNode('foo')
+   * const jjText = JJT.from(textNode)
+   * ```
+   *
+   * @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 _WT(text);
+    return new _JJT(text);
   }
+  /**
+   * Creates an instance of JJT.
+   *
+   * @example
+   * ```ts
+   * const text = new JJT('Hello World')
+   * ```
+   *
+   * @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 (isStr(ref)) {
       super(document.createTextNode(ref));
     } else if (isA(ref, Text)) {
       super(ref);
+    } else {
+      throw new TypeError(`Expected a Text. Got: ${ref} (${typeof ref})`);
     }
-    throw new TypeError(`Expected a Text. Got: ${ref} (${typeof ref})`);
   }
+  /**
+   * Gets the text content.
+   *
+   * @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.
+   *
+   * @example
+   * ```ts
+   * text.setText('New content')
+   * ```
+   *
+   * @param text - The text to set.
+   * @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}
+   */
   setText(text) {
     if (!isStr(text)) {
       throw new TypeError(`Expected a string. Got: ${text} (${typeof text})`);
@@ -262,86 +465,240 @@ var WT = class _WT extends WN {
     this.ref.textContent = text;
     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.
+   *
+   * @example
+   * ```ts
+   * text.addLines('Line 1', 'Line 2')
+   * ```
+   *
+   * @param lines - The lines of text.
+   * @returns This instance for chaining.
+   */
   addLines(...lines) {
     return this.setText(lines.join("\n"));
   }
 };
 
-// src/WDF.ts
-var WDF = class _WDF extends WN {
+// src/JJDF.ts
+var JJDF = class _JJDF extends JJN {
+  /**
+   * Creates a JJDF instance from a DocumentFragment reference.
+   *
+   * @example
+   * ```ts
+   * const frag = JJDF.from(myFrag)
+   * ```
+   *
+   *
+   * @param ref - The DocumentFragment instance.
+   * @returns A new JJDF instance.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment | DocumentFragment}
+   */
   static from(ref) {
-    return new _WDF(ref);
+    return new _JJDF(ref);
+  }
+  /**
+   * Creates a new empty JJDF instance (wraps a new DocumentFragment).
+   *
+   * @example
+   * ```ts
+   * const frag = JJDF.create()
+   * ```
+   *
+   * @returns A new JJDF instance.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment | document.createDocumentFragment}
+   */
+  static create() {
+    return new _JJDF(document.createDocumentFragment());
   }
+  /**
+   * Creates an instance of JJDF.
+   *
+   * @param ref - The DocumentFragment instance to wrap.
+   * @throws {TypeError} If `ref` is not a DocumentFragment.
+   */
   constructor(ref) {
     if (!isA(ref, DocumentFragment)) {
       throw new TypeError(`Expected a DocumentFragment. Got ${ref} (${typeof ref})`);
     }
     super(ref);
   }
-  byId(id, throwIfNotFound = true) {
-    const el = this.ref.getElementById(id);
-    if (el) {
-      return WN.wrap(el);
-    }
-    if (throwIfNotFound) {
-      throw new TypeError(`Element with id ${id} not found`);
-    }
-    return null;
-  }
-  empty() {
-    this.ref.replaceChildren();
-    return this;
-  }
 };
 
-// src/WSH.ts
-var WSH = class _WSH extends WDF {
-  static from(shadow) {
-    return new _WSH(shadow);
+// src/JJSR.ts
+var JJSR = class _JJSR extends JJDF {
+  /**
+   * Creates a JJSR instance from a ShadowRoot reference.
+   *
+   * @example
+   * ```ts
+   * const shadow = JJSR.from(element.shadowRoot)
+   * ```
+   *
+   * @param shadowRoot - The ShadowRoot instance.
+   * @returns A new JJSR instance.
+   */
+  static from(shadowRoot) {
+    return new _JJSR(shadowRoot);
   }
-  constructor(shadow) {
-    if (!isA(shadow, ShadowRoot)) {
-      throw new TypeError(`Expected a ShadowRoot. Got ${shadow} (${typeof shadow})`);
+  /**
+   * Creates an instance of JJSR.
+   *
+   * @param shadowRoot - The ShadowRoot to wrap.
+   * @throws {TypeError} If `shadowRoot` is not a ShadowRoot.
+   */
+  constructor(shadowRoot) {
+    if (!isA(shadowRoot, ShadowRoot)) {
+      throw new TypeError(`Expected a ShadowRoot. Got ${shadowRoot} (${typeof shadowRoot})`);
     }
-    super(shadow);
+    super(shadowRoot);
   }
-  getHtml() {
+  /**
+   * Gets the inner HTML of the shadow root.
+   *
+   * @returns The inner HTML string.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML | Element.innerHTML}
+   */
+  getHTML() {
     return this.ref.innerHTML;
   }
-  setHtml(value, unsafe) {
+  /**
+   * Sets the inner HTML of the shadow root.
+   *
+   * @example
+   * ```ts
+   * shadow.setHTML('<p>Hello</p>', false)
+   * ```
+   *
+   * @param value - The HTML string.
+   * @param unsafe - Reserved for future use (must be false).
+   * @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;
     return this;
   }
+  /**
+   * Adds constructed stylesheets to the shadow root.
+   *
+   * @example
+   * ```ts
+   * const sheet = new CSSStyleSheet()
+   * sheet.replaceSync('p { color: red; }')
+   * shadow.addStyleSheets(sheet)
+   * ```
+   *
+   * @param styleSheets - The stylesheets to add.
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets | ShadowRoot.adoptedStyleSheets}
+   */
   addStyleSheets(...styleSheets) {
     this.ref.adoptedStyleSheets.push(...styleSheets);
     return this;
   }
 };
 
-// src/WE.ts
-var WE = class _WE extends WN {
+// src/JJE.ts
+var JJE = class _JJE extends JJN {
+  /**
+   * Creates a JJE instance from an Element reference.
+   *
+   * @example
+   * ```ts
+   * const el = JJE.from(document.querySelector('.my-class'))
+   * ```
+   *
+   * @param ref - The Element instance.
+   * @returns A new JJE instance.
+   */
   static from(ref) {
-    return new _WE(ref);
+    return new _JJE(ref);
   }
+  /**
+   * Creates an instance of JJE.
+   *
+   * @param ref - The Element to wrap.
+   * @throws {TypeError} If `ref` is not an Element.
+   */
   constructor(ref) {
     if (!isA(ref, Element)) {
-      throw new TypeError(`Expected a Element. Got: ${ref} (${typeof ref})`);
+      throw new TypeError(`Expected an Element. Got: ${ref} (${typeof ref})`);
     }
     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.
+   *
+   * @param name - The name of the attribute.
+   * @returns The attribute value, or null if not present.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute | Element.getAttribute}
+   */
   getAttr(name) {
     return this.ref.getAttribute(name);
   }
+  /**
+   * Checks if an attribute exists.
+   *
+   * @param name - The name of the attribute.
+   * @returns `true` if the attribute exists, otherwise `false`.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute | Element.hasAttribute}
+   */
   hasAttr(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);
     return this;
   }
+  /**
+   * Sets multiple attributes at once.
+   *
+   * @example
+   * ```ts
+   * el.setAttrs({ id: 'my-id', class: 'my-class' })
+   * ```
+   *
+   * @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})`);
@@ -351,126 +708,384 @@ var WE = class _WE extends WN {
     }
     return this;
   }
+  /**
+   * Removes an attribute.
+   *
+   * @param name - The name of the attribute to remove.
+   * @returns This instance for chaining.
+   * @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) {
     for (const name of names) {
       this.ref.removeAttribute(name);
     }
     return this;
   }
+  /**
+   * Gets the value of an ARIA attribute.
+   *
+   * @remarks
+   * Automatically prepends `aria-` to the name.
+   *
+   * @example
+   * ```ts
+   * el.getAria('label') // gets 'aria-label'
+   * ```
+   *
+   * @param name - The ARIA attribute suffix (e.g., 'label' for 'aria-label').
+   * @returns The attribute value, or null if not present.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes | ARIA Attributes}
+   */
   getAria(name) {
     return this.ref.getAttribute(`aria-${name}`);
   }
+  /**
+   * Checks if an ARIA attribute exists.
+   *
+   * @param name - The ARIA attribute suffix.
+   * @returns `true` if the attribute exists.
+   */
   hasAria(name) {
     return this.ref.hasAttribute(`aria-${name}`);
   }
+  /**
+   * Sets an ARIA attribute.
+   *
+   * @example
+   * ```ts
+   * el.setAria('hidden', 'true') // sets aria-hidden="true"
+   * ```
+   *
+   * @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.
+   * @returns This instance for chaining.
+   */
   rmAria(name) {
     this.ref.removeAttribute(`aria-${name}`);
     return this;
   }
+  /**
+   * Gets the class attribute.
+   *
+   * @returns The class attribute value, or null if not present.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/className | Element.className}
+   */
+  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);
+  }
+  /**
+   * Removes the `class` attribute of the element.
+   *
+   * @remarks
+   * If you want to remove a few specific class instead of all, use `rmClasses`
+   *
+   * @returns This instance for chaining.
+   */
+  rmClass() {
+    return this.rmAttr("class");
+  }
+  /**
+   * Adds one or more classes to the element.
+   *
+   * @param classNames - The classes to add.
+   * @returns This instance for chaining.
+   * @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) {
     this.ref.classList.add(...classNames);
     return this;
   }
+  /**
+   * Removes one or more classes from the element.
+   *
+   * @param classNames - The classes to remove.
+   * @returns This instance for chaining.
+   * @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) {
     this.ref.classList.remove(...classNames);
     return this;
   }
-  rmClass(className) {
-    return this.rmClasses(className);
-  }
+  /**
+   * Checks if the element has a specific class.
+   *
+   * @param className - The class to check for.
+   * @returns `true` if the element has the class.
+   * @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) {
     return this.ref.classList.contains(className);
   }
+  /**
+   * Toggles a class on the element.
+   *
+   * @param className - The class to toggle.
+   * @returns This instance for chaining.
+   * @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) {
     this.ref.classList.toggle(className);
     return this;
   }
+  /**
+   * Replaces a class with another one
+   *
+   * @remarks
+   * If the `oldClassName` doesn't exist, the `newClassName` isn't added
+   *
+   * @param oldClassName - The class name to remove
+   * @param newClassName - The class name to add
+   */
+  replaceClass(oldClassName, newClassName) {
+    this.ref.classList.replace(oldClassName, newClassName);
+    return this;
+  }
+  /**
+   * Adds a click event listener.
+   *
+   * @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}
+   */
   onClick(handler) {
     return this.on("click", handler);
   }
+  /**
+   * 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.
+   *
+   * @returns This instance for chaining.
+   */
   show() {
     return this.rmAttrs("hidden", "aria-hidden");
   }
+  /**
+   * 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}
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled | aria-disabled}
+   */
   disable() {
     return this.setAttr("disabled", "").setAttr("aria-disabled", "true");
   }
+  /**
+   * 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);
   }
+  /**
+   * Gets the id attribute.
+   *
+   * @returns The id, or null if not set.
+   */
   getId() {
     return this.getAttr("id");
   }
-  getHtml() {
+  /**
+   * Gets the inner HTML of the element.
+   *
+   * @returns The inner HTML string.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML | Element.innerHTML}
+   */
+  getHTML() {
     return this.ref.innerHTML;
   }
-  setHtml(html) {
+  /**
+   * Sets the inner HTML of the element.
+   *
+   * @param html - The HTML string to set.
+   * @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;
     return this;
   }
   /**
-   * We prevent FOUC by assigning the template and CSS in one go
+   * 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.
    * **Note:** You can't attach a shadow root to every type of element. There are some that can't have a
    * shadow DOM for security reasons (for example `<a>`).
+   *
+   * @param mode - The encapsulation mode ('open' or 'closed'). Defaults to 'open'.
+   * @param config - Optional configuration object containing `template` (HTML string) and `styles` (array of CSSStyleSheet).
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow | Element.attachShadow}
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets | ShadowRoot.adoptedStyleSheets}
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets | Document.adoptedStyleSheets}
    */
-  setShadow(mode = "open", html, ...styleSheets) {
+  initShadow(mode = "open", config) {
     const shadowRoot = this.ref.shadowRoot ?? this.ref.attachShadow({ mode });
-    if (html) {
-      shadowRoot.innerHTML = html;
-    }
-    if (styleSheets.length) {
-      shadowRoot.adoptedStyleSheets.push(...styleSheets);
+    if (isObj(config)) {
+      const { template, styles } = config;
+      if (template) {
+        shadowRoot.innerHTML = template;
+      }
+      if (isArr(styles) && styles.length) {
+        shadowRoot.adoptedStyleSheets.push(...styles);
+      }
     }
     return this;
   }
-  getShadow() {
-    if (!this.ref.shadowRoot) throw new Error("No shadow root");
-    return new WSH(this.ref.shadowRoot);
+  /**
+   * 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.
+   */
+  get shadow() {
+    return this.ref.shadowRoot ? new JJSR(this.ref.shadowRoot) : null;
   }
 };
 
-// src/WHE.ts
-var WHE = class _WHE extends WE {
+// src/JJHE.ts
+var JJHE = class _JJHE extends JJE {
+  /**
+   * Creates a JJHE instance from an HTMLElement reference.
+   *
+   * @example
+   * ```ts
+   * const el = JJHE.from(document.getElementById('my-id'))
+   * ```
+   *
+   * @param ref - The HTMLElement.
+   * @returns A new JJHE instance.
+   */
   static from(ref) {
-    return new _WHE(ref);
+    return new _JJHE(ref);
   }
+  /**
+   * Creates a JJHE instance from a tag name.
+   *
+   * @example
+   * ```ts
+   * const div = JJHE.fromTag('div')
+   * const input = JJHE.fromTag('input', { is: 'custom-input' })
+   * ```
+   *
+   * @param tagName - The tag name.
+   * @param options - Element creation options.
+   * @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) {
     if (!isStr(tagName)) {
       throw new TypeError(`Expected a string for tagName. Got: ${tagName} (${typeof tagName})`);
     }
-    return new _WHE(document.createElement(tagName, options));
+    return new _JJHE(document.createElement(tagName, options));
   }
+  /**
+   * Creates an instance of JJHE.
+   *
+   * @param ref - The HTMLElement to wrap.
+   * @throws {TypeError} If `ref` is not an HTMLElement.
+   */
   constructor(ref) {
     if (!isA(ref, HTMLElement)) {
-      throw new TypeError(`Expected a HTMLElement. Got ${ref} (${typeof ref})`);
+      throw new TypeError(`Expected an HTMLElement. Got ${ref} (${typeof ref})`);
     }
     super(ref);
   }
+  /**
+   * Gets the value property of the element (e.g. for inputs).
+   *
+   * @returns The value.
+   * @throws {Error} If the element 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");
     }
     return this.ref.value;
   }
+  /**
+   * Sets the value property of the element.
+   *
+   * @example
+   * ```ts
+   * input.setValue('new value')
+   * ```
+   *
+   * @param value - The value to set.
+   * @returns This instance for chaining.
+   * @throws {Error} If the element 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");
@@ -478,186 +1093,369 @@ var WHE = class _WHE extends WE {
     this.ref.value = value;
     return this;
   }
-  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;
-  }
+  /**
+   * Focuses the element.
+   *
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus | HTMLElement.focus}
+   */
   focus() {
     this.ref.focus();
     return this;
   }
+  /**
+   * Clicks the element.
+   *
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click | HTMLElement.click}
+   */
   click() {
     this.ref.click();
     return this;
   }
-  empty() {
-    this.ref.innerText = "";
-    return this;
-  }
+  /**
+   * Gets the inner text of the element.
+   *
+   * @returns The inner text.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText | HTMLElement.innerText}
+   */
   getText() {
     return this.ref.innerText;
   }
+  /**
+   * Sets the inner text of the element.
+   *
+   * @param text - The text to set.
+   * @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;
     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/WC.ts
-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})`);
+// src/JJSE.ts
+var SVG_NAMESPACE_URI = "http://www.w3.org/2000/svg";
+var JJSE = class _JJSE extends JJE {
+  /**
+   * 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);
   }
-  const response = await fetch(url, { headers: { Accept: mime } });
-  if (!response.ok) {
-    throw new Error(`GET ${url} failed: ${response.status} ${response.statusText}`);
+  /**
+   * 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.fromTag('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 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);
   }
-  return response.text();
-}
-async function fetchHtml(url) {
-  return await fetchText(url, "text/html");
-}
-async function fetchCss(url) {
-  return await fetchText(url, "text/css");
-}
-async function cssToStyle(css) {
-  const sheet = new CSSStyleSheet();
-  return await sheet.replace(css);
-}
-async function fetchStyle(url) {
-  return await cssToStyle(await fetchCss(url));
-}
-function addLinkPre(href, rel, as = "fetch") {
-  const link = WHE.fromTag("link").setAttrs({
-    rel,
-    href,
-    as
-  });
-  document.head.append(link.ref);
-  return link;
-}
-async function processStyleConfig(style) {
-  if (isFn(style)) {
-    style = await style();
+  /**
+   * 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 new TypeError(`Expected an SVGElement. Got ${ref} (${typeof ref})`);
+    }
+    super(ref);
   }
-  style = await style;
-  if (isA(style, CSSStyleSheet)) {
-    return style;
+  /**
+   * Gets the text content of the element.
+   *
+   * @returns The text content.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent | Node.textContent}
+   */
+  getText() {
+    return this.ref.textContent ?? "";
   }
-  if (isStr(style)) {
-    return await cssToStyle(style);
+  /**
+   * Sets the text content of the element.
+   *
+   * @param text - The text to set.
+   * @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;
   }
-  throw new TypeError(`Expected a css string or CSSStyleSheet. Got ${style} (${typeof style})`);
-}
-async function processConfig(templateResource, styleResources) {
-  const templatePromise = isFn(templateResource) ? templateResource() : Promise.resolve(templateResource);
-  if (!isDef(styleResources)) {
-    styleResources = [];
+  /**
+   * Clears the text content of the element.
+   *
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent | Node.textContent}
+   */
+  empty() {
+    this.ref.textContent = "";
+    return this;
   }
-  if (!isArr(styleResources)) {
-    styleResources = [styleResources];
+  /**
+   * 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);
   }
-  const [template, ...styles] = await Promise.all([templatePromise, ...styleResources.map(processStyleConfig)]);
-  return { template, styles };
-}
-var WC = class extends HTMLElement {
-  static async register() {
-    if (!isObj(this.jj)) {
-      throw new Error(`static jj object is missing from the extending class. Got ${this.jj} (${typeof this.jj})`);
-    }
-    const { name } = this.jj;
-    if (!isStr(name)) {
-      throw new TypeError(`Expected a string name. Got ${name} (${typeof name})`);
-    }
-    if (!customElements.get(name)) {
-      customElements.define(name, this);
-      await customElements.whenDefined(name);
-    }
-  }
-  async connectedCallback() {
-    const classRef = this.constructor;
-    const jj = classRef.jj;
-    if (!isObj(jj)) {
-      throw new TypeError(`static jj object is missing from the extending class. Got ${jj} (${typeof jj})`);
-    }
-    if (!classRef._jjCache) {
-      classRef._jjCache = processConfig(classRef.jj.template, classRef.jj.styles);
-    }
-    const { template, styles } = await classRef._jjCache;
-    const { templateMode } = jj;
-    WHE.from(this).setShadow(templateMode, template, ...styles);
-  }
-  /**
-   * The class that extends this one should define
-   * `static observedAttributes[]` containing kebab-based attribute names (all lower case)
-   * @param name kebab-case and in lower case exactly as it appears in `observedAttributes`
-   * @param oldValue
-   * @param newValue
-   * @returns true if it tried to set the attribute; otherwise false
-   */
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      const observedAttributes = this.constructor.observedAttributes;
-      if (isArr(observedAttributes) && observedAttributes.includes(name)) {
-        const kebabName = keb2cam(name);
-        if (hasProp(this, kebabName)) {
-          this[kebabName] = newValue;
-          return true;
-        }
-      }
+  /**
+   * Sets the stroke attribute.
+   *
+   * @param value - The stroke color/value.
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke | stroke}
+   */
+  setStroke(value) {
+    return this.setAttr("stroke", value);
+  }
+  /**
+   * Sets the stroke-width attribute.
+   *
+   * @param value - The width.
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width | stroke-width}
+   */
+  setStrokeWidth(value) {
+    return this.setAttr("stroke-width", String(value));
+  }
+  /**
+   * Sets the viewBox attribute.
+   *
+   * @example
+   * ```ts
+   * svg.setViewBox(0, 0, 100, 100)
+   * svg.setViewBox('0 0 100 100')
+   * ```
+   *
+   * @param p1 - Min-x or string/array value.
+   * @param p2 - Min-y.
+   * @param p3 - Width.
+   * @param p4 - Height.
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox | viewBox}
+   */
+  setViewBox(p1, p2, p3, p4) {
+    if (typeof p1 === "number" && p2 !== void 0 && p3 !== void 0 && p4 !== void 0) {
+      return this.setAttr("viewBox", `${p1} ${p2} ${p3} ${p4}`);
     }
-    return false;
+    const value = p1;
+    return this.setAttr("viewBox", Array.isArray(value) ? value.join(" ") : value);
+  }
+  /**
+   * Sets the width attribute.
+   *
+   * @param value - The width.
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width | width}
+   */
+  setWidth(value) {
+    return this.setAttr("width", String(value));
+  }
+  /**
+   * Sets the height attribute.
+   *
+   * @param value - The height.
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height | height}
+   */
+  setHeight(value) {
+    return this.setAttr("height", String(value));
+  }
+  /**
+   * Sets the d attribute (path data).
+   *
+   * @param value - The path data string or array of segments.
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d | d}
+   */
+  setD(value) {
+    return this.setAttr("d", Array.isArray(value) ? value.join(" ") : value);
+  }
+  /**
+   * Sets the transform attribute.
+   *
+   * @param value - The transform string.
+   * @returns This instance for chaining.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform | transform}
+   */
+  setTransform(value) {
+    return this.setAttr("transform", value);
   }
 };
 
-// src/WN-mixin.ts
-WN.wrap = (raw) => {
+// 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, unwrapAll } = JJN;
+function wrap(raw) {
   if (isStr(raw)) {
-    return WT.from(document.createTextNode(raw));
+    return JJT.from(document.createTextNode(raw));
   }
   if (!isObj(raw)) {
     throw new TypeError(`Expected an object to wrap. Got ${raw} (${typeof raw})`);
   }
-  if (isA(raw, WN)) {
+  if (isA(raw, JJN)) {
     return raw;
   }
   if (isA(raw, HTMLElement)) {
-    return WHE.from(raw);
+    return JJHE.from(raw);
+  }
+  if (isA(raw, SVGElement)) {
+    return JJSE.from(raw);
   }
   if (isA(raw, Element)) {
-    return WE.from(raw);
+    return JJE.from(raw);
   }
   if (isA(raw, ShadowRoot)) {
-    return WSH.from(raw);
+    return JJSR.from(raw);
   }
   if (isA(raw, DocumentFragment)) {
-    return WDF.from(raw);
+    return JJDF.from(raw);
+  }
+  if (isA(raw, Document)) {
+    return JJD.from(raw);
   }
   if (isA(raw, Text)) {
-    return WT.from(raw);
+    return JJT.from(raw);
   }
   if (isA(raw, Node)) {
-    return WN.from(raw);
+    return JJN.from(raw);
   }
-  throw new TypeError(`Only Frag or DocumentFragment can be wrapped. Got ${raw} (${typeof raw})`);
-};
-WN.unwrap = (obj) => {
+  throw new TypeError(`Expected a Node to wrap. Got ${raw} (${typeof raw})`);
+}
+function unwrap(obj) {
   if (isStr(obj)) {
     return document.createTextNode(obj);
   }
@@ -667,40 +1465,468 @@ WN.unwrap = (obj) => {
   if (isA(obj, Node)) {
     return obj;
   }
-  if (isA(obj, WN)) {
+  if (isA(obj, JJN)) {
     return obj.ref;
   }
   throw new TypeError(`Could not unwrap ${obj} (${typeof obj})`);
+}
+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;
+  }
+};
+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'))
+   * ```
+   *
+   * @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);
+    this.ref.append(...nodes);
+    return this;
+  },
+  /**
+   * Prepends children to this node using native prepend.
+   *
+   * @example
+   * ```ts
+   * div.prepend(h('span', null, 'first'))
+   * ```
+   *
+   * @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);
+    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.replaceChildren(h('p', null, 'New Content'))
+   * ```
+   *
+   * @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}
+   */
+  replaceChildren(...children) {
+    const nodes = unwrapAll(children);
+    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.replaceChildren}
+   */
+  empty() {
+    this.replaceChildren();
+    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;
+JJN.unwrap = unwrap;
+assignPrototype(JJE, EDDF);
+assignPrototype(JJD, DDF, EDDF);
+assignPrototype(JJDF, DDF, EDDF);
+assignPrototype(JJHE, HESE);
+assignPrototype(JJSE, HESE);
 
-// src/h.ts
+// src/helpers.ts
 function h(tagName, attributes, ...children) {
-  const ret = WHE.fromTag(tagName).append(...children);
+  const ret = JJHE.fromTag(tagName).append(...children);
   if (attributes) {
     ret.setAttrs(attributes);
   }
   return ret;
 }
+function linkAs(href) {
+  switch (fileExt(href)) {
+    case "html":
+    case "htm":
+    case "md":
+      return "fetch";
+    case "css":
+      return "style";
+    case "js":
+    case "mjs":
+    case "cjs":
+      return "script";
+    default:
+      throw new Error(`No 'as' attribute was specified and we failed to guess it from the URL: ${href}`);
+  }
+}
+function createLinkPre(rel, href, as) {
+  if (!isStr(href)) {
+    if (!isA(href, URL)) {
+      throw new TypeError(`Expected a string or URL. Got ${href} (${typeof href})`);
+    }
+    href = href.toString();
+  }
+  if (!["prefetch", "preload"].includes(rel)) {
+    throw new RangeError(`rel should be one of 'prefetch' or 'preload'. Got ${rel} (${typeof 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}`);
+    }
+  }
+  if (!["fetch", "style", "script"].includes(as)) {
+    throw new RangeError(`as should be one of 'fetch' or 'style'. Got ${as} (${typeof as})`);
+  }
+  return JJHE.fromTag("link").setAttrs({
+    rel,
+    href,
+    as
+  });
+}
+function addLinkPre(...args) {
+  const link = createLinkPre(...args);
+  document.head.append(link.ref);
+  return link;
+}
+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})`);
+  }
+  const response = await fetch(url, { headers: { Accept: mime } });
+  if (!response.ok) {
+    throw new Error(`GET ${url} failed: ${response.status} ${response.statusText}`);
+  }
+  return response.text();
+}
+async function fetchHtml(url) {
+  return await fetchText(url, "text/html");
+}
+async function fetchCss(url) {
+  return await fetchText(url, "text/css");
+}
+async function fetchStyle(url) {
+  return await cssToStyle(await fetchCss(url));
+}
+
+// src/components.ts
+async function templatePromise(templateConfig) {
+  if (!isDef(templateConfig)) {
+    return void 0;
+  }
+  if (isFn(templateConfig)) {
+    templateConfig = await templateConfig();
+  }
+  templateConfig = await templateConfig;
+  if (isStr(templateConfig)) {
+    return templateConfig;
+  }
+  if (isA(templateConfig, JJHE)) {
+    return templateConfig.getHTML();
+  }
+  if (isA(templateConfig, HTMLElement)) {
+    return templateConfig.outerHTML;
+  }
+  throw new TypeError(`Expected a string, JJHE or HTMLElement. Got ${templateConfig} (${typeof templateConfig})`);
+}
+async function stylePromise(styleConfig) {
+  if (isFn(styleConfig)) {
+    styleConfig = await styleConfig();
+  }
+  styleConfig = await styleConfig;
+  if (isA(styleConfig, CSSStyleSheet)) {
+    return styleConfig;
+  }
+  if (isStr(styleConfig)) {
+    return await cssToStyle(styleConfig);
+  }
+  throw new TypeError(`Expected a css string or CSSStyleSheet. Got ${styleConfig} (${typeof styleConfig})`);
+}
+function stylePromises(styleConfigs) {
+  if (!isArr(styleConfigs)) {
+    return [];
+  }
+  return styleConfigs.map(stylePromise);
+}
+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;
+  /**
+   * Creates a new instance of ShadowMaster.
+   *
+   * @returns A new ShadowMaster instance.
+   */
+  static create() {
+    return new _ShadowMaster();
+  }
+  constructor() {
+  }
+  /**
+   * Sets the template configuration.
+   *
+   * @param templateConfig - The template configuration.
+   * @returns The instance for chaining.
+   *
+   * @example
+   * ```ts
+   * // Accepts string, promise, or fetchHtml result
+   * sm.setTemplate(fetchHtml('./template.html'))
+   * ```
+   */
+  setTemplate(templateConfig) {
+    this.#templateConfig = templateConfig;
+    return this;
+  }
+  /**
+   * Adds one or more style configurations.
+   *
+   * @param stylesConfig - Variable number of style configurations.
+   * @returns The instance for chaining.
+   *
+   * @example
+   * ```ts
+   * sm.addStyles(
+   *     'p { color: red; }',
+   *     fetchCss('./styles.css'),
+   *     () => fetchCss('../lazy-loaded-styles.css'),
+   * )
+   * ```
+   */
+  addStyles(...stylesConfig) {
+    this.#stylesConfig.push(...stylesConfig);
+    return this;
+  }
+  /**
+   * Resolves the configuration to something that can be fed to `JJHE.initShadow()` function
+   *
+   * The result is cached, so subsequent calls return the same promise.
+   * Note: Any changes made to the ShadowMaster instance (via setTemplate/addStyles)
+   * after the first call to getResolved() will be ignored.
+   *
+   * @returns A promise resolving to the ShadowConfig.
+   */
+  async getResolved() {
+    if (!this.#normalizedConfig) {
+      this.#normalizedConfig = resolveConfig(this.#templateConfig, this.#stylesConfig);
+    }
+    return await 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);
+  }
+}
 export {
-  WC,
-  WDF,
-  WE,
-  WHE,
-  WN,
-  WSH,
-  WT,
+  JJD,
+  JJDF,
+  JJE,
+  JJHE,
+  JJN,
+  JJSE,
+  JJSR,
+  JJT,
+  ShadowMaster,
   addLinkPre,
+  attr2prop,
+  byClass,
+  byId,
+  createLinkPre,
   cssToStyle,
   fetchCss,
   fetchHtml,
   fetchStyle,
   fetchText,
+  fileExt,
   h,
   keb2cam,
   keb2pas,
   nextAnimationFrame,
   off,
   on,
-  pas2keb
+  pas2keb,
+  query,
+  queryAll,
+  registerComponent,
+  sleep,
+  unwrap,
+  unwrapAll,
+  wrap,
+  wrapAll
 };
 //# sourceMappingURL=bundle.js.map