native-document 1.0.93 → 1.0.95

package/dist/native-document.components.min.js

@@ -363,16 +363,16 @@ var NativeComponents = (function (exports) {
         // });
     };
 
-    let DebugManager$1 = {};
+    let DebugManager = {};
     {
-        DebugManager$1 = {
+        DebugManager = {
             log() {},
             warn() {},
             error() {},
             disable() {}
         };
     }
-    var DebugManager = DebugManager$1;
+    var DebugManager$1 = DebugManager;
 
     const MemoryManager = (function() {
 
@@ -421,7 +421,7 @@ var NativeComponents = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -617,7 +617,12 @@ var NativeComponents = (function (exports) {
     };
 
     const deepClone = (value, onObservableFound) => {
-        // Primitives
+        try {
+            if(window.structuredClone !== undefined) {
+                return window.structuredClone(value);
+            }
+        } catch (e){}
+
         if (value === null || typeof value !== 'object') {
             return value;
         }
@@ -641,7 +646,7 @@ var NativeComponents = (function (exports) {
         // Objects
         const cloned = {};
         for (const key in value) {
-            if (value.hasOwnProperty(key)) {
+            if (Object.hasOwn(value, key)) {
                 cloned[key] = deepClone(value[key]);
             }
         }
@@ -1097,96 +1102,168 @@ var NativeComponents = (function (exports) {
 
     const DocumentObserver = {
         mounted: new WeakMap(),
+        beforeUnmount: new WeakMap(),
         mountedSupposedSize: 0,
         unmounted: new WeakMap(),
         unmountedSupposedSize: 0,
         observer: null,
+
         executeMountedCallback(node) {
             const data = DocumentObserver.mounted.get(node);
             if(!data) {
                 return;
             }
             data.inDom = true;
-            data.mounted && data.mounted(node);
+            if(!data.mounted) {
+                return;
+            }
+            if(Array.isArray(data.mounted)) {
+                for(const cb of data.mounted) {
+                    cb(node);
+                }
+                return;
+            }
+            data.mounted(node);
         },
+
         executeUnmountedCallback(node) {
             const data = DocumentObserver.unmounted.get(node);
             if(!data) {
                 return;
             }
-
             data.inDom = false;
-            if(data.unmounted && data.unmounted(node) === true) {
+            if(!data.unmounted) {
+                return;
+            }
+
+            let shouldRemove = false;
+            if(Array.isArray(data.unmounted)) {
+                for(const cb of data.unmounted) {
+                    if(cb(node) === true) {
+                        shouldRemove = true;
+                    }
+                }
+            } else {
+                shouldRemove = data.unmounted(node) === true;
+            }
+
+            if(shouldRemove) {
                 data.disconnect();
                 node.nd?.remove();
             }
         },
+
         checkMutation: function(mutationsList) {
             for(const mutation of mutationsList) {
-                if(DocumentObserver.mountedSupposedSize > 0 ) {
+                if(DocumentObserver.mountedSupposedSize > 0) {
                     for(const node of mutation.addedNodes) {
                         DocumentObserver.executeMountedCallback(node);
                         if(!node.querySelectorAll) {
-                            return;
+                            continue;
                         }
                         const children = node.querySelectorAll('[data--nd-mounted]');
-                        if(!children.length) {
-                            return;
-                        }
-                        for(const node of children) {
-                            DocumentObserver.executeMountedCallback(node);
+                        for(const child of children) {
+                            DocumentObserver.executeMountedCallback(child);
                         }
                     }
                 }
 
-                if(DocumentObserver.unmountedSupposedSize > 0 ) {
-                    for(const node of mutation.removedNodes) {
+                if (DocumentObserver.unmountedSupposedSize > 0) {
+                    for (const node of mutation.removedNodes) {
                         DocumentObserver.executeUnmountedCallback(node);
                         if(!node.querySelectorAll) {
-                            return;
+                            continue;
                         }
                         const children = node.querySelectorAll('[data--nd-unmounted]');
-                        if(!children.length) {
-                            return;
-                        }
-                        for(const node of children) {
-                            DocumentObserver.executeUnmountedCallback(node);
+                        for(const child of children) {
+                            DocumentObserver.executeUnmountedCallback(child);
                         }
                     }
                 }
             }
         },
+
         /**
-         *
          * @param {HTMLElement} element
          * @param {boolean} inDom
-         * @returns {{watch: (function(): Map<any, any>), disconnect: (function(): boolean), mounted: (function(*): Set<any>), unmounted: (function(*): Set<any>)}}
+         * @returns {{ disconnect: Function, mounted: Function, unmounted: Function, off: Function }}
          */
         watch: function(element, inDom = false) {
+            let mountedRegistered   = false;
+            let unmountedRegistered = false;
+
             let data = {
                 inDom,
                 mounted: null,
                 unmounted: null,
                 disconnect: () => {
-                    DocumentObserver.mounted.delete(element);
-                    DocumentObserver.unmounted.delete(element);
-                    DocumentObserver.mountedSupposedSize--;
-                    DocumentObserver.unmountedSupposedSize--;
+                    if (mountedRegistered) {
+                        DocumentObserver.mounted.delete(element);
+                        DocumentObserver.mountedSupposedSize--;
+                    }
+                    if (unmountedRegistered) {
+                        DocumentObserver.unmounted.delete(element);
+                        DocumentObserver.unmountedSupposedSize--;
+                    }
                     data = null;
                 }
             };
 
+            const addListener = (type, callback) => {
+                if (!data[type]) {
+                    data[type] = callback;
+                    return;
+                }
+                if (!Array.isArray(data[type])) {
+                    data[type] = [data[type], callback];
+                    return;
+                }
+                data[type].push(callback);
+            };
+
+            const removeListener = (type, callback) => {
+                if(!data?.[type]) {
+                    return;
+                }
+                if(Array.isArray(data[type])) {
+                    const index = data[type].indexOf(callback);
+                    if(index > -1) {
+                        data[type].splice(index, 1);
+                    }
+                    if(data[type].length === 1) {
+                        data[type] = data[type][0];
+                    }
+                    if(data[type].length === 0) {
+                        data[type] = null;
+                    }
+                    return;
+                }
+                data[type] = null;
+            };
+
             return {
-                disconnect: data.disconnect,
+                disconnect: () => data?.disconnect(),
+
                 mounted: (callback) => {
-                    data.mounted = callback;
+                    addListener('mounted', callback);
                     DocumentObserver.mounted.set(element, data);
-                    DocumentObserver.mountedSupposedSize++;
+                    if (!mountedRegistered) {
+                        DocumentObserver.mountedSupposedSize++;
+                        mountedRegistered = true;
+                    }
                 },
+
                 unmounted: (callback) => {
-                    data.unmounted = callback;
+                    addListener('unmounted', callback);
                     DocumentObserver.unmounted.set(element, data);
-                    DocumentObserver.unmountedSupposedSize++;
+                    if (!unmountedRegistered) {
+                        DocumentObserver.unmountedSupposedSize++;
+                        unmountedRegistered = true;
+                    }
+                },
+
+                off: (type, callback) => {
+                    removeListener(type, callback);
                 }
             };
         }
@@ -1265,6 +1342,37 @@ var NativeComponents = (function (exports) {
         return this.lifecycle({ unmounted: callback });
     };
 
+    NDElement.prototype.beforeUnmount = function(id, callback) {
+        const el = this.$element;
+
+        if(!DocumentObserver.beforeUnmount.has(el)) {
+            DocumentObserver.beforeUnmount.set(el, new Map());
+            const originalRemove = el.remove.bind(el);
+
+            let  $isUnmounting = false;
+
+            el.remove = async () => {
+                if($isUnmounting) {
+                    return;
+                }
+                $isUnmounting = true;
+
+                try {
+                    const callbacks = DocumentObserver.beforeUnmount.get(el);
+                    for (const cb of callbacks.values()) {
+                        await cb.call(this, el);
+                    }
+                } finally {
+                    originalRemove();
+                    $isUnmounting = false;
+                }
+            };
+        }
+
+        DocumentObserver.beforeUnmount.get(el).set(id, callback);
+        return this;
+    };
+
     NDElement.prototype.htmlElement = function() {
         return this.$element;
     };
@@ -1376,24 +1484,24 @@ var NativeComponents = (function (exports) {
         ]);
 
         for (const name in methods) {
-            if (!methods.hasOwnProperty(name)) {
+            if (!Object.hasOwn(methods, name)) {
                 continue;
             }
 
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
 
             if (protectedMethods.has(name)) {
-                DebugManager.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
                 throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
 
             if (NDElement.prototype[name]) {
-                DebugManager.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
@@ -1546,6 +1654,7 @@ var NativeComponents = (function (exports) {
 
         anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
         anchorFragment.nativeAppendChild = anchorFragment.appendChild;
+        anchorFragment.nativeAppend = anchorFragment.append;
 
         const isParentUniqueChild = (parent) => (isUniqueChild || (parent.firstChild === anchorStart && parent.lastChild === anchorEnd));
 
@@ -1575,65 +1684,72 @@ var NativeComponents = (function (exports) {
         anchorFragment.appendChild = function(child, before = null) {
             const parent = anchorEnd.parentNode;
             if(!parent) {
-                DebugManager.error('Anchor', 'Anchor : parent not found', child);
+                DebugManager$1.error('Anchor', 'Anchor : parent not found', child);
                 return;
             }
             before = before ?? anchorEnd;
             insertBefore(parent, child, before);
         };
+
         anchorFragment.append = function(...args ) {
             return anchorFragment.appendChild(args);
         };
 
-        anchorFragment.removeChildren = function() {
+        anchorFragment.removeChildren = async function() {
             const parent = anchorEnd.parentNode;
             if(parent === anchorFragment) {
                 return;
             }
-            if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, anchorEnd);
-                return;
-            }
+            // if(isParentUniqueChild(parent)) {
+            //     parent.replaceChildren(anchorStart, anchorEnd);
+            //     return;
+            // }
 
             let itemToRemove = anchorStart.nextSibling, tempItem;
-            const fragment = document.createDocumentFragment();
+            const removes = [];
             while(itemToRemove && itemToRemove !== anchorEnd) {
                 tempItem = itemToRemove.nextSibling;
-                fragment.append(itemToRemove);
+                removes.push(itemToRemove.remove());
                 itemToRemove =  tempItem;
             }
-            fragment.replaceChildren();
+            await Promise.all(removes);
         };
-        anchorFragment.remove = function() {
+
+        anchorFragment.remove = async function() {
             const parent = anchorEnd.parentNode;
             if(parent === anchorFragment) {
                 return;
             }
             let itemToRemove = anchorStart.nextSibling, tempItem;
+            const allItemToRemove = [];
+            const removes = [];
             while(itemToRemove && itemToRemove !== anchorEnd) {
                 tempItem = itemToRemove.nextSibling;
-                anchorFragment.nativeAppendChild(itemToRemove);
+                allItemToRemove.push(itemToRemove);
+                removes.push(itemToRemove.remove());
                 itemToRemove = tempItem;
             }
+            await Promise.all(removes);
+            anchorFragment.nativeAppend(...allItemToRemove);
         };
 
-        anchorFragment.removeWithAnchors = function() {
-            anchorFragment.removeChildren();
+        anchorFragment.removeWithAnchors = async function() {
+            await anchorFragment.removeChildren();
             anchorStart.remove();
             anchorEnd.remove();
         };
 
-        anchorFragment.replaceContent = function(child) {
+        anchorFragment.replaceContent = async function(child) {
             const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             const parent = anchorEnd.parentNode;
             if(!parent) {
                 return;
             }
-            if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, childElement, anchorEnd);
-                return;
-            }
-            anchorFragment.removeChildren();
+            // if(isParentUniqueChild(parent)) {
+            //     parent.replaceChildren(anchorStart, childElement, anchorEnd);
+            //     return;
+            // }
+            await anchorFragment.removeChildren();
             parent.insertBefore(childElement, anchorEnd);
         };
 
@@ -1953,6 +2069,88 @@ var NativeComponents = (function (exports) {
         return ElementCreator.getChild(child());
     };
 
+    /**
+     * @param {HTMLElement} el
+     * @param {number} timeout
+     */
+    const waitForVisualEnd = (el, timeout = 1000) => {
+        return new Promise((resolve) => {
+            let isResolved = false;
+
+            const cleanupAndResolve = (e) => {
+                if (e && e.target !== el) return;
+                if (isResolved) return;
+
+                isResolved = true;
+                el.removeEventListener('transitionend', cleanupAndResolve);
+                el.removeEventListener('animationend', cleanupAndResolve);
+                clearTimeout(timer);
+                resolve();
+            };
+
+            el.addEventListener('transitionend', cleanupAndResolve);
+            el.addEventListener('animationend', cleanupAndResolve);
+
+            const timer = setTimeout(cleanupAndResolve, timeout);
+
+            const style = window.getComputedStyle(el);
+            const hasTransition = style.transitionDuration !== '0s';
+            const hasAnimation = style.animationDuration !== '0s';
+
+            if (!hasTransition && !hasAnimation) {
+                cleanupAndResolve();
+            }
+        });
+    };
+
+    NDElement.prototype.transitionOut = function(transitionName) {
+        const exitClass = transitionName + '-exit';
+        this.beforeUnmount('transition-exit', async function() {
+            this.$element.classes.add(exitClass);
+            await waitForVisualEnd(this.$element);
+            this.$element.classes.remove(exitClass);
+        });
+        return this;
+    };
+
+    NDElement.prototype.transitionIn = function(transitionName) {
+        const startClass = transitionName + '-enter-from';
+        const endClass = transitionName + '-enter-to';
+
+        this.$element.classes.add(startClass);
+
+        this.mounted(() => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    this.$element.classes.remove(startClass);
+                    this.$element.classes.add(endClass);
+
+                    waitForVisualEnd(this.$element).then(() => {
+                        this.$element.classes.remove(endClass);
+                    });
+                });
+            });
+        });
+        return this;
+    };
+
+
+    NDElement.prototype.transition = function (transitionName) {
+        this.transitionIn(transitionName);
+        this.transitionOut(transitionName);
+        return this;
+    };
+
+    NDElement.prototype.animate = function(animationName) {
+        this.$element.classes.add(animationName);
+
+        waitForVisualEnd(this.$element).then(() => {
+            this.$element.classes.remove(animationName);
+        });
+
+        return this;
+    };
+
     String.prototype.handleNdAttribute = function(element, attributeName) {
         element.setAttribute(attributeName, this);
     };
@@ -2050,6 +2248,10 @@ var NativeComponents = (function (exports) {
                 parent.appendChild(child);
             }
         },
+        async safeRemove(element) {
+            await element.remove();
+
+        },
         getChild(child) {
             if(child == null) {
                 return null;
@@ -2390,10 +2592,10 @@ var NativeComponents = (function (exports) {
     /**
      *
      * @param {string} name
-     * @param {?Function} customWrapper
+     * @param {?Function=} customWrapper
      * @returns {Function}
      */
-    function HtmlElementWrapper(name, customWrapper) {
+    function HtmlElementWrapper(name, customWrapper = null) {
         return createHtmlElement.bind(null, name, customWrapper);
     }
 
@@ -3086,40 +3288,196 @@ var NativeComponents = (function (exports) {
         return observable;
     };
 
+    /**
+     * Creates a `<div>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDivElement}
+     */
     HtmlElementWrapper('div');
+
+    /**
+     * Creates a `<span>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLSpanElement}
+     */
     HtmlElementWrapper('span');
+
+    /**
+     * Creates a `<label>` element.
+     * @type {function(LabelAttributes=, NdChild|NdChild[]=): HTMLLabelElement}
+     */
     HtmlElementWrapper('label');
+
+    /**
+     * Creates a `<p>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLParagraphElement}
+     */
     HtmlElementWrapper('p');
+
+    /**
+     * Creates a `<strong>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('strong');
+
+    /**
+     * Creates a `<h1>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     HtmlElementWrapper('h1');
+
+    /**
+     * Creates a `<h2>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     HtmlElementWrapper('h2');
+
+    /**
+     * Creates a `<h3>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     HtmlElementWrapper('h3');
+
+    /**
+     * Creates a `<h4>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     HtmlElementWrapper('h4');
+
+    /**
+     * Creates a `<h5>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     HtmlElementWrapper('h5');
+
+    /**
+     * Creates a `<h6>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     HtmlElementWrapper('h6');
 
+    /**
+     * Creates a `<br>` element.
+     * @type {function(GlobalAttributes=): HTMLBRElement}
+     */
     HtmlElementWrapper('br');
 
+    /**
+     * Creates an `<a>` element.
+     * @type {function(AnchorAttributes=, NdChild|NdChild[]=): HTMLAnchorElement}
+     */
     HtmlElementWrapper('a');
+
+    /**
+     * Creates a `<pre>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLPreElement}
+     */
     HtmlElementWrapper('pre');
+
+    /**
+     * Creates a `<code>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('code');
+
+    /**
+     * Creates a `<blockquote>` element.
+     * @type {function(GlobalAttributes & { cite?: string }=, NdChild|NdChild[]=): HTMLQuoteElement}
+     */
     HtmlElementWrapper('blockquote');
+
+    /**
+     * Creates an `<hr>` element.
+     * @type {function(GlobalAttributes=): HTMLHRElement}
+     */
     HtmlElementWrapper('hr');
+
+    /**
+     * Creates an `<em>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('em');
+
+    /**
+     * Creates a `<small>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('small');
+
+    /**
+     * Creates a `<mark>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('mark');
+
+    /**
+     * Creates a `<del>` element.
+     * @type {function(ModAttributes=, NdChild|NdChild[]=): HTMLModElement}
+     */
     HtmlElementWrapper('del');
+
+    /**
+     * Creates an `<ins>` element.
+     * @type {function(ModAttributes=, NdChild|NdChild[]=): HTMLModElement}
+     */
     HtmlElementWrapper('ins');
+
+    /**
+     * Creates a `<sub>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('sub');
+
+    /**
+     * Creates a `<sup>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('sup');
+
+    /**
+     * Creates an `<abbr>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('abbr');
+
+    /**
+     * Creates a `<cite>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('cite');
+
+    /**
+     * Creates a `<q>` element.
+     * @type {function(GlobalAttributes & { cite?: string }=, NdChild|NdChild[]=): HTMLQuoteElement}
+     */
     HtmlElementWrapper('q');
 
+    /**
+     * Creates a `<dl>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDListElement}
+     */
     HtmlElementWrapper('dl');
+
+    /**
+     * Creates a `<dt>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('dt');
+
+    /**
+     * Creates a `<dd>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('dd');
 
+    /**
+     * Creates a `<form>` element.
+     * Extended with fluent methods: `.submit()`, `.post()`, `.get()`, `.multipartFormData()`.
+     * @type {function(FormAttributes=, NdChild|NdChild[]=): HTMLFormElement & {
+     *   submit: (actionOrFn: string | ((e: SubmitEvent) => void)) => HTMLFormElement,
+     *   post: (action: string) => HTMLFormElement,
+     *   get: (action: string) => HTMLFormElement,
+     *   multipartFormData: () => HTMLFormElement,
+     * }}
+     */
     HtmlElementWrapper('form', function(el) {
 
         el.submit = function(action) {
@@ -3149,70 +3507,317 @@ var NativeComponents = (function (exports) {
         return el;
     });
 
+    /**
+     * Creates an `<input>` element.
+     * @type {function(InputAttributes=): HTMLInputElement}
+     */
     HtmlElementWrapper('input');
 
+    /**
+     * Creates a `<textarea>` element.
+     * @type {function(TextAreaAttributes=, NdChild|NdChild[]=): HTMLTextAreaElement}
+     */
     HtmlElementWrapper('textarea');
 
+    /**
+     * Creates a `<select>` element.
+     * @type {function(SelectAttributes=, NdChild|NdChild[]=): HTMLSelectElement}
+     */
     HtmlElementWrapper('select');
-    HtmlElementWrapper('fieldset', );
+
+    /**
+     * Creates a `<fieldset>` element.
+     * @type {function(GlobalAttributes & { disabled?: Observable<boolean>|boolean }=, NdChild|NdChild[]=): HTMLFieldSetElement}
+     */
+    HtmlElementWrapper('fieldset');
+
+    /**
+     * Creates an `<option>` element.
+     * @type {function(OptionAttributes=, NdChild|NdChild[]=): HTMLOptionElement}
+     */
     HtmlElementWrapper('option');
+
+    /**
+     * Creates a `<legend>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLLegendElement}
+     */
     HtmlElementWrapper('legend');
+
+    /**
+     * Creates a `<datalist>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDataListElement}
+     */
     HtmlElementWrapper('datalist');
+
+    /**
+     * Creates an `<output>` element.
+     * @type {function(OutputAttributes=, NdChild|NdChild[]=): HTMLOutputElement}
+     */
     HtmlElementWrapper('output');
+
+    /**
+     * Creates a `<progress>` element.
+     * @type {function(ProgressAttributes=, NdChild|NdChild[]=): HTMLProgressElement}
+     */
     HtmlElementWrapper('progress');
-    HtmlElementWrapper('meter');
 
+    /**
+     * Creates a `<meter>` element.
+     * @type {function(MeterAttributes=, NdChild|NdChild[]=): HTMLMeterElement}
+     */
+    HtmlElementWrapper('meter');
 
+    /**
+     * Creates a `<button>` element.
+     * @type {function(ButtonAttributes=, NdChild|NdChild[]=): HTMLButtonElement}
+     */
     const Button$1 = HtmlElementWrapper('button');
 
+    /**
+     * Creates a `<main>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('main');
+
+    /**
+     * Creates a `<section>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('section');
+
+    /**
+     * Creates an `<article>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('article');
+
+    /**
+     * Creates an `<aside>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('aside');
+
+    /**
+     * Creates a `<nav>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('nav');
+
+    /**
+     * Creates a `<figure>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('figure');
+
+    /**
+     * Creates a `<figcaption>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('figcaption');
 
+    /**
+     * Creates a `<header>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('header');
+
+    /**
+     * Creates a `<footer>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('footer');
 
+    /**
+     * Creates an `<img>` element.
+     * @type {function(ImgAttributes=): HTMLImageElement}
+     */
     HtmlElementWrapper('img');
 
+    /**
+     * Creates a `<details>` element.
+     * @type {function(DetailsAttributes=, NdChild|NdChild[]=): HTMLDetailsElement}
+     */
     HtmlElementWrapper('details');
+
+    /**
+     * Creates a `<summary>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('summary');
+
+    /**
+     * Creates a `<dialog>` element.
+     * @type {function(DialogAttributes=, NdChild|NdChild[]=): HTMLDialogElement}
+     */
     HtmlElementWrapper('dialog');
+
+    /**
+     * Creates a `<menu>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLMenuElement}
+     */
     HtmlElementWrapper('menu');
 
+    /**
+     * Creates an `<ol>` element.
+     * @type {function(OlAttributes=, NdChild|NdChild[]=): HTMLOListElement}
+     */
     HtmlElementWrapper('ol');
+
+    /**
+     * Creates a `<ul>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLUListElement}
+     */
     HtmlElementWrapper('ul');
+
+    /**
+     * Creates a `<li>` element.
+     * @type {function(GlobalAttributes & { value?: number }=, NdChild|NdChild[]=): HTMLLIElement}
+     */
     HtmlElementWrapper('li');
 
+    /**
+     * Creates an `<audio>` element.
+     * @type {function(AudioAttributes=, NdChild|NdChild[]=): HTMLAudioElement}
+     */
     HtmlElementWrapper('audio');
+
+    /**
+     * Creates a `<video>` element.
+     * @type {function(VideoAttributes=, NdChild|NdChild[]=): HTMLVideoElement}
+     */
     HtmlElementWrapper('video');
+
+    /**
+     * Creates a `<source>` element.
+     * @type {function(SourceAttributes=): HTMLSourceElement}
+     */
     HtmlElementWrapper('source');
+
+    /**
+     * Creates a `<track>` element.
+     * @type {function(TrackAttributes=): HTMLTrackElement}
+     */
     HtmlElementWrapper('track');
+
+    /**
+     * Creates a `<canvas>` element.
+     * @type {function(CanvasAttributes=, NdChild|NdChild[]=): HTMLCanvasElement}
+     */
     HtmlElementWrapper('canvas');
+
+    /**
+     * Creates an `<svg>` element.
+     * @type {function(SvgAttributes=, NdChild|NdChild[]=): SVGSVGElement}
+     */
     HtmlElementWrapper('svg');
 
+    /**
+     * Creates a `<time>` element.
+     * @type {function(TimeAttributes=, NdChild|NdChild[]=): HTMLTimeElement}
+     */
     HtmlElementWrapper('time');
+
+    /**
+     * Creates a `<data>` element.
+     * @type {function(GlobalAttributes & { value?: Observable<string>|string }=, NdChild|NdChild[]=): HTMLDataElement}
+     */
     HtmlElementWrapper('data');
+
+    /**
+     * Creates an `<address>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('address');
+
+    /**
+     * Creates a `<kbd>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('kbd');
+
+    /**
+     * Creates a `<samp>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('samp');
+
+    /**
+     * Creates a `<var>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('var');
+
+    /**
+     * Creates a `<wbr>` element.
+     * @type {function(GlobalAttributes=): HTMLElement}
+     */
     HtmlElementWrapper('wbr');
 
+    /**
+     * Creates a `<caption>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableCaptionElement}
+     */
     HtmlElementWrapper('caption');
+
+    /**
+     * Creates a `<table>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableElement}
+     */
     const Table = HtmlElementWrapper('table');
+
+    /**
+     * Creates a `<thead>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableSectionElement}
+     */
     HtmlElementWrapper('thead');
+
+    /**
+     * Creates a `<tfoot>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableSectionElement}
+     */
     HtmlElementWrapper('tfoot');
+
+    /**
+     * Creates a `<tbody>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableSectionElement}
+     */
     HtmlElementWrapper('tbody');
+
+    /**
+     * Creates a `<tr>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableRowElement}
+     */
     const Tr = HtmlElementWrapper('tr');
+
+    /**
+     * Alias for {@link Tr}.
+     * @type {typeof Tr}
+     */
     const TRow = Tr;
+
+    /**
+     * Creates a `<th>` element.
+     * @type {function(ThAttributes=, NdChild|NdChild[]=): HTMLTableCellElement}
+     */
     const Th = HtmlElementWrapper('th');
+
+    /**
+     * Alias for {@link Th}.
+     * @type {typeof Th}
+     */
     const THeadCell$1 = Th;
+
+    /**
+     * Creates a `<td>` element.
+     * @type {function(TdAttributes=, NdChild|NdChild[]=): HTMLTableCellElement}
+     */
     HtmlElementWrapper('td');
 
+    /**
+     * Creates an empty `DocumentFragment` wrapper.
+     * Useful for grouping elements without adding a DOM node.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): DocumentFragment}
+     */
     HtmlElementWrapper('');
 
     /**