native-document 1.0.94 → 1.0.95

package/dist/native-document.dev.js

@@ -1,10 +1,10 @@
 var NativeDocument = (function (exports) {
     'use strict';
 
-    let DebugManager = {};
+    let DebugManager$1 = {};
 
     {
-        DebugManager = {
+        DebugManager$1 = {
             enabled: false,
 
             enable() {
@@ -35,7 +35,7 @@ var NativeDocument = (function (exports) {
         };
 
     }
-    var DebugManager$1 = DebugManager;
+    var DebugManager = DebugManager$1;
 
     const MemoryManager = (function() {
 
@@ -84,7 +84,7 @@ var NativeDocument = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -191,10 +191,10 @@ var NativeDocument = (function (exports) {
         return this.observable.cleanup();
     };
 
-    let PluginsManager = null;
+    let PluginsManager$1 = null;
 
     {
-        PluginsManager = (function() {
+        PluginsManager$1 = (function() {
 
             const $plugins = new Map();
             const $pluginByEvents = new Map();
@@ -260,7 +260,7 @@ var NativeDocument = (function (exports) {
                             try{
                                 callback.call(plugin, ...data);
                             } catch (error) {
-                                DebugManager$1.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
+                                DebugManager.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
                             }
                         }
                     }
@@ -269,7 +269,7 @@ var NativeDocument = (function (exports) {
         }());
     }
 
-    var PluginsManager$1 = PluginsManager;
+    var PluginsManager = PluginsManager$1;
 
     /**
      * Creates an ObservableWhen that tracks whether an observable equals a specific value.
@@ -364,7 +364,12 @@ var NativeDocument = (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;
         }
@@ -388,7 +393,7 @@ var NativeDocument = (function (exports) {
         // Objects
         const cloned = {};
         for (const key in value) {
-            if (value.hasOwnProperty(key)) {
+            if (Object.hasOwn(value, key)) {
                 cloned[key] = deepClone(value[key]);
             }
         }
@@ -423,7 +428,7 @@ var NativeDocument = (function (exports) {
             }
         }
         {
-            PluginsManager$1.emit('CreateObservable', this);
+            PluginsManager.emit('CreateObservable', this);
         }
     }
 
@@ -527,12 +532,12 @@ var NativeDocument = (function (exports) {
         this.$previousValue = this.$currentValue;
         this.$currentValue = newValue;
         {
-            PluginsManager$1.emit('ObservableBeforeChange', this);
+            PluginsManager.emit('ObservableBeforeChange', this);
         }
         this.trigger();
         this.$previousValue = null;
         {
-            PluginsManager$1.emit('ObservableAfterChange', this);
+            PluginsManager.emit('ObservableAfterChange', this);
         }
     };
 
@@ -619,7 +624,7 @@ var NativeDocument = (function (exports) {
     ObservableItem.prototype.subscribe = function(callback) {
         {
             if (this.$isCleanedUp) {
-                DebugManager$1.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
+                DebugManager.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
                 return;
             }
             if (typeof callback !== 'function') {
@@ -631,7 +636,7 @@ var NativeDocument = (function (exports) {
         this.$listeners.push(callback);
         this.assocTrigger();
         {
-            PluginsManager$1.emit('ObservableSubscribe', this);
+            PluginsManager.emit('ObservableSubscribe', this);
         }
     };
 
@@ -742,7 +747,7 @@ var NativeDocument = (function (exports) {
         }
         this.assocTrigger();
         {
-            PluginsManager$1.emit('ObservableUnsubscribe', this);
+            PluginsManager.emit('ObservableUnsubscribe', this);
         }
     };
 
@@ -874,96 +879,168 @@ var NativeDocument = (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);
                 }
             };
         }
@@ -979,7 +1056,7 @@ var NativeDocument = (function (exports) {
         this.$element = element;
         this.$observer = null;
         {
-            PluginsManager$1.emit('NDElementCreated', element, this);
+            PluginsManager.emit('NDElementCreated', element, this);
         }
     }
 
@@ -1045,6 +1122,37 @@ var NativeDocument = (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;
     };
@@ -1123,7 +1231,7 @@ var NativeDocument = (function (exports) {
             }
             {
                 if (this[name] && !this.$localExtensions.has(name)) {
-                    DebugManager$1.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
+                    DebugManager.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
                 }
                 this.$localExtensions.set(name, method);
             }
@@ -1167,30 +1275,30 @@ var NativeDocument = (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$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
 
             if (protectedMethods.has(name)) {
-                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                DebugManager.error('NDElement.extend', `Cannot override protected method "${name}"`);
                 throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
 
             if (NDElement.prototype[name]) {
-                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
         }
         {
-            PluginsManager$1.emit('NDElementExtended', methods);
+            PluginsManager.emit('NDElementExtended', methods);
         }
 
         return NDElement;
@@ -1343,7 +1451,7 @@ var NativeDocument = (function (exports) {
             const foundReserved = Object.keys(attributes).filter(key => reserved.includes(key));
 
             if (foundReserved.length > 0) {
-                DebugManager$1.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
+                DebugManager.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
             }
 
             return attributes;
@@ -1362,6 +1470,7 @@ var NativeDocument = (function (exports) {
 
         anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
         anchorFragment.nativeAppendChild = anchorFragment.appendChild;
+        anchorFragment.nativeAppend = anchorFragment.append;
 
         const isParentUniqueChild = (parent) => (isUniqueChild || (parent.firstChild === anchorStart && parent.lastChild === anchorEnd));
 
@@ -1391,65 +1500,72 @@ var NativeDocument = (function (exports) {
         anchorFragment.appendChild = function(child, before = null) {
             const parent = anchorEnd.parentNode;
             if(!parent) {
-                DebugManager$1.error('Anchor', 'Anchor : parent not found', child);
+                DebugManager.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);
         };
 
@@ -1784,7 +1900,7 @@ var NativeDocument = (function (exports) {
     Function.prototype.toNdElement = function () {
         const child = this;
         {
-            PluginsManager$1.emit('BeforeProcessComponent', child);
+            PluginsManager.emit('BeforeProcessComponent', child);
         }
         return ElementCreator.getChild(child());
     };
@@ -1793,6 +1909,88 @@ var NativeDocument = (function (exports) {
         return ElementCreator.createHydratableNode(null, this);
     };
 
+    /**
+     * @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);
     };
@@ -1890,16 +2088,20 @@ var NativeDocument = (function (exports) {
         processChildren(children, parent) {
             if(children === null) return;
             {
-                PluginsManager$1.emit('BeforeProcessChildren', parent);
+                PluginsManager.emit('BeforeProcessChildren', parent);
             }
             let child = this.getChild(children);
             if(child) {
                 parent.appendChild(child);
             }
             {
-                PluginsManager$1.emit('AfterProcessChildren', parent);
+                PluginsManager.emit('AfterProcessChildren', parent);
             }
         },
+        async safeRemove(element) {
+            await element.remove();
+
+        },
         getChild(child) {
             if(child == null) {
                 return null;
@@ -2361,10 +2563,10 @@ var NativeDocument = (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);
     }
 
@@ -2418,7 +2620,7 @@ var NativeDocument = (function (exports) {
         hydrationState[targetType][property] = hydrateFunction;
     };
 
-    const bindAttachMethods = function(node, bindDingData, data) {
+    const bindAttachMethods = (node, bindDingData, data) => {
         if(!bindDingData.attach) {
             return null;
         }
@@ -2723,7 +2925,7 @@ var NativeDocument = (function (exports) {
     const once$1 = (fn) => {
         let result = null;
         return (...args) => {
-            if(result) {
+            if(result != null) {
                 return result;
             }
             result = fn(...args);
@@ -3149,7 +3351,7 @@ var NativeDocument = (function (exports) {
 
         ObservableItem.call(this, target, configs);
         {
-            PluginsManager$1.emit('CreateObservableArray', this);
+            PluginsManager.emit('CreateObservableArray', this);
         }
     };
 
@@ -3706,7 +3908,7 @@ var NativeDocument = (function (exports) {
         const observable = new ObservableItem(initialValue);
         const updatedValue = nextTick(() => observable.set(callback()));
         {
-            PluginsManager$1.emit('CreateObservableComputed', observable, dependencies);
+            PluginsManager.emit('CreateObservableComputed', observable, dependencies);
         }
 
         if(Validator.isFunction(dependencies)) {
@@ -3808,7 +4010,7 @@ var NativeDocument = (function (exports) {
      * Efficiently manages DOM updates by tracking items with keys.
      *
      * @param {ObservableItem<Array|Object>} data - Observable containing array or object to iterate over
-     * @param {Function} callback - Function that renders each item (item, index) => ValidChild
+     * @param {(item: *, index: null|ObservableItem) => NdChild} callback - Function that renders each item (item, index) => ValidChild
      * @param {string|Function} [key] - Property name or function to generate unique keys for items
      * @param {Object} [options={}] - Configuration options
      * @param {boolean} [options.shouldKeepItemsInCache=false] - Whether to cache rendered items
@@ -3847,7 +4049,7 @@ var NativeDocument = (function (exports) {
                 }
                 const child = cacheItem.child?.deref();
                 if(parent && child) {
-                    parent.removeChild(child);
+                    child.remove();
                 }
                 cacheItem.indexObserver?.cleanup();
                 cacheItem.child = null;
@@ -3878,7 +4080,7 @@ var NativeDocument = (function (exports) {
                 }
                 cache.set(keyId, { keyId, isNew: true, child: new WeakRef(child), indexObserver});
             } catch (e) {
-                DebugManager$1.error('ForEach', `Error creating element for key ${keyId}` , e);
+                DebugManager.error('ForEach', `Error creating element for key ${keyId}` , e);
                 throw e;
             }
             return keyId;
@@ -3965,7 +4167,7 @@ var NativeDocument = (function (exports) {
      * Provides index observables and handles array mutations efficiently.
      *
      * @param {ObservableArray} data - ObservableArray to iterate over
-     * @param {Function} callback - Function that renders each item (item, indexObservable) => ValidChild
+     * @param {(item: *, index: null|ObservableItem) => NdChild} callback - Function that renders each item (item, indexObservable) => ValidChild
      * @param {Object} [configs={}] - Configuration options
      * @param {boolean} [configs.shouldKeepItemsInCache] - Whether to cache rendered items
      * @param {boolean} [configs.isParentUniqueChild] - When it's the only child of the parent
@@ -4237,7 +4439,7 @@ var NativeDocument = (function (exports) {
      * The element is mounted/unmounted from the DOM as the condition changes.
      *
      * @param {ObservableItem<boolean>|ObservableChecker<boolean>|ObservableWhen} condition - Observable condition to watch
-     * @param {ValidChild} child - Element or content to show/hide
+     * @param {NdChild|(() => NdChild)} child - Element or content to show/hide
      * @param {Object} [options={}] - Configuration options
      * @param {string|null} [options.comment=null] - Comment for debugging
      * @param {boolean} [options.shouldKeepInCache=true] - Whether to cache the element when hidden
@@ -4248,7 +4450,7 @@ var NativeDocument = (function (exports) {
      */
     const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
         if(!(Validator.isObservable(condition)) && !Validator.isObservableWhenResult(condition)) {
-            return DebugManager$1.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
+            return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
         }
         const element = Anchor('Show if : '+(comment || ''));
 
@@ -4285,7 +4487,7 @@ var NativeDocument = (function (exports) {
      * Inverse of ShowIf - element is shown when condition is false.
      *
      * @param {ObservableItem<boolean>|ObservableChecker<boolean>} condition - Observable condition to watch
-     * @param {ValidChild} child - Element or content to show/hide
+     * @param {NdChild|(() => NdChild)} child - Element or content to show/hide
      * @param {Object} [configs] - Configuration options
      * @param {string|null} [configs.comment] - Comment for debugging
      * @param {boolean} [configs.shouldKeepInCache] - Whether to cache element when hidden
@@ -4306,7 +4508,7 @@ var NativeDocument = (function (exports) {
      * Same as ShowIf - element is shown when condition is true.
      *
      * @param {ObservableItem<boolean>|ObservableChecker<boolean>|ObservableWhen} condition - Observable condition to watch
-     * @param {ValidChild} child - Element or content to show/hide
+     * @param {NdChild|(() => NdChild)} child - Element or content to show/hide
      * @param {Object} [configs] - Configuration options
      * @param {string|null} [configs.comment] - Comment for debugging
      * @param {boolean} [configs.shouldKeepInCache] - Whether to cache element when hidden
@@ -4322,13 +4524,13 @@ var NativeDocument = (function (exports) {
      *
      * @overload
      * @param {ObservableWhen} observerWhenResult - Result from observable.when(value)
-     * @param {ValidChild} view - Content to show when condition matches
+     * @param {NdChild|(() => NdChild)} view - Content to show when condition matches
      * @returns {AnchorDocumentFragment}
      *
      * @overload
      * @param {ObservableItem} observer - Observable to watch
      * @param {*} target - Value to match
-     * @param {ValidChild} view - Content to show when observable equals target
+     * @param {NdChild|(() => NdChild)} view - Content to show when observable equals target
      * @returns {AnchorDocumentFragment}
      *
      * @example
@@ -4372,7 +4574,7 @@ var NativeDocument = (function (exports) {
      * Like a switch statement for UI - shows the content corresponding to current value.
      *
      * @param {ObservableItem|ObservableChecker} $condition - Observable to watch
-     * @param {Object<string|number, ValidChild>} values - Map of values to their corresponding content
+     * @param {Object<string|number, NdChild|(() => NdChild)>} values - Map of values to their corresponding content
      * @param {boolean} [shouldKeepInCache=true] - Whether to cache rendered views
      * @returns {AnchorDocumentFragment & {add: Function, remove: Function}} Fragment with dynamic methods
      * @example
@@ -4501,41 +4703,202 @@ var NativeDocument = (function (exports) {
         }
     };
 
+    /**
+     * Creates a `<div>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDivElement}
+     */
     const Div = HtmlElementWrapper('div');
+
+    /**
+     * Creates a `<span>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLSpanElement}
+     */
     const Span = HtmlElementWrapper('span');
+
+    /**
+     * Creates a `<label>` element.
+     * @type {function(LabelAttributes=, NdChild|NdChild[]=): HTMLLabelElement}
+     */
     const Label = HtmlElementWrapper('label');
+
+    /**
+     * Creates a `<p>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLParagraphElement}
+     */
     const P = HtmlElementWrapper('p');
+
+    /**
+     * Alias for {@link P}.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLParagraphElement}
+     */
     const Paragraph = P;
+
+    /**
+     * Creates a `<strong>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Strong = HtmlElementWrapper('strong');
+
+    /**
+     * Creates a `<h1>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     const H1 = HtmlElementWrapper('h1');
+
+    /**
+     * Creates a `<h2>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     const H2 = HtmlElementWrapper('h2');
+
+    /**
+     * Creates a `<h3>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     const H3 = HtmlElementWrapper('h3');
+
+    /**
+     * Creates a `<h4>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     const H4 = HtmlElementWrapper('h4');
+
+    /**
+     * Creates a `<h5>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     const H5 = HtmlElementWrapper('h5');
+
+    /**
+     * Creates a `<h6>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     const H6 = HtmlElementWrapper('h6');
 
+    /**
+     * Creates a `<br>` element.
+     * @type {function(GlobalAttributes=): HTMLBRElement}
+     */
     const Br = HtmlElementWrapper('br');
 
+    /**
+     * Creates an `<a>` element.
+     * @type {function(AnchorAttributes=, NdChild|NdChild[]=): HTMLAnchorElement}
+     */
     const Link$1 = HtmlElementWrapper('a');
+
+    /**
+     * Creates a `<pre>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLPreElement}
+     */
     const Pre = HtmlElementWrapper('pre');
+
+    /**
+     * Creates a `<code>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Code = HtmlElementWrapper('code');
+
+    /**
+     * Creates a `<blockquote>` element.
+     * @type {function(GlobalAttributes & { cite?: string }=, NdChild|NdChild[]=): HTMLQuoteElement}
+     */
     const Blockquote = HtmlElementWrapper('blockquote');
+
+    /**
+     * Creates an `<hr>` element.
+     * @type {function(GlobalAttributes=): HTMLHRElement}
+     */
     const Hr = HtmlElementWrapper('hr');
+
+    /**
+     * Creates an `<em>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Em = HtmlElementWrapper('em');
+
+    /**
+     * Creates a `<small>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Small = HtmlElementWrapper('small');
+
+    /**
+     * Creates a `<mark>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Mark = HtmlElementWrapper('mark');
+
+    /**
+     * Creates a `<del>` element.
+     * @type {function(ModAttributes=, NdChild|NdChild[]=): HTMLModElement}
+     */
     const Del = HtmlElementWrapper('del');
+
+    /**
+     * Creates an `<ins>` element.
+     * @type {function(ModAttributes=, NdChild|NdChild[]=): HTMLModElement}
+     */
     const Ins = HtmlElementWrapper('ins');
+
+    /**
+     * Creates a `<sub>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Sub = HtmlElementWrapper('sub');
+
+    /**
+     * Creates a `<sup>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Sup = HtmlElementWrapper('sup');
+
+    /**
+     * Creates an `<abbr>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Abbr = HtmlElementWrapper('abbr');
+
+    /**
+     * Creates a `<cite>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Cite = HtmlElementWrapper('cite');
+
+    /**
+     * Creates a `<q>` element.
+     * @type {function(GlobalAttributes & { cite?: string }=, NdChild|NdChild[]=): HTMLQuoteElement}
+     */
     const Quote = HtmlElementWrapper('q');
 
+    /**
+     * Creates a `<dl>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDListElement}
+     */
     const Dl = HtmlElementWrapper('dl');
+
+    /**
+     * Creates a `<dt>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Dt = HtmlElementWrapper('dt');
+
+    /**
+     * Creates a `<dd>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Dd = 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,
+     * }}
+     */
     const Form = HtmlElementWrapper('form', function(el) {
 
         el.submit = function(action) {
@@ -4565,68 +4928,298 @@ var NativeDocument = (function (exports) {
         return el;
     });
 
+    /**
+     * Creates an `<input>` element.
+     * @type {function(InputAttributes=): HTMLInputElement}
+     */
     const Input = HtmlElementWrapper('input');
 
+    /**
+     * Creates a `<textarea>` element.
+     * @type {function(TextAreaAttributes=, NdChild|NdChild[]=): HTMLTextAreaElement}
+     */
     const TextArea = HtmlElementWrapper('textarea');
+
+    /**
+     * Alias for {@link TextArea}.
+     * @type {function(TextAreaAttributes=, NdChild|NdChild[]=): HTMLTextAreaElement}
+     */
     const TextInput = TextArea;
 
+    /**
+     * Creates a `<select>` element.
+     * @type {function(SelectAttributes=, NdChild|NdChild[]=): HTMLSelectElement}
+     */
     const Select = HtmlElementWrapper('select');
-    const FieldSet = HtmlElementWrapper('fieldset', );
+
+    /**
+     * Creates a `<fieldset>` element.
+     * @type {function(GlobalAttributes & { disabled?: Observable<boolean>|boolean }=, NdChild|NdChild[]=): HTMLFieldSetElement}
+     */
+    const FieldSet = HtmlElementWrapper('fieldset');
+
+    /**
+     * Creates an `<option>` element.
+     * @type {function(OptionAttributes=, NdChild|NdChild[]=): HTMLOptionElement}
+     */
     const Option = HtmlElementWrapper('option');
+
+    /**
+     * Creates a `<legend>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLLegendElement}
+     */
     const Legend = HtmlElementWrapper('legend');
+
+    /**
+     * Creates a `<datalist>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDataListElement}
+     */
     const Datalist = HtmlElementWrapper('datalist');
+
+    /**
+     * Creates an `<output>` element.
+     * @type {function(OutputAttributes=, NdChild|NdChild[]=): HTMLOutputElement}
+     */
     const Output = HtmlElementWrapper('output');
+
+    /**
+     * Creates a `<progress>` element.
+     * @type {function(ProgressAttributes=, NdChild|NdChild[]=): HTMLProgressElement}
+     */
     const Progress = HtmlElementWrapper('progress');
+
+    /**
+     * Creates a `<meter>` element.
+     * @type {function(MeterAttributes=, NdChild|NdChild[]=): HTMLMeterElement}
+     */
     const Meter = HtmlElementWrapper('meter');
 
+    /**
+     * Creates an `<input readonly>` element.
+     * @param {Omit<InputAttributes, 'type'|'readonly'|'readOnly'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
     const ReadonlyInput = (attributes) => Input({ readonly: true, ...attributes });
-    const HiddenInput = (attributes) => Input({type: 'hidden', ...attributes });
+
+    /**
+     * Creates an `<input type="hidden">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
+    const HiddenInput = (attributes) => Input({ type: 'hidden', ...attributes });
+
+    /**
+     * Creates an `<input type="file">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
     const FileInput = (attributes) => Input({ type: 'file', ...attributes });
+
+    /**
+     * Creates an `<input type="password">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
     const PasswordInput = (attributes) => Input({ type: 'password', ...attributes });
+
+    /**
+     * Creates an `<input type="checkbox">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
     const Checkbox = (attributes) => Input({ type: 'checkbox', ...attributes });
+
+    /**
+     * Creates an `<input type="radio">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
     const Radio = (attributes) => Input({ type: 'radio', ...attributes });
 
+    /**
+     * Creates an `<input type="range">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
     const RangeInput = (attributes) => Input({ type: 'range', ...attributes });
+
+    /**
+     * Creates an `<input type="color">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
     const ColorInput = (attributes) => Input({ type: 'color', ...attributes });
+
+    /**
+     * Creates an `<input type="date">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
     const DateInput = (attributes) => Input({ type: 'date', ...attributes });
+
+    /**
+     * Creates an `<input type="time">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
     const TimeInput = (attributes) => Input({ type: 'time', ...attributes });
+
+    /**
+     * Creates an `<input type="datetime-local">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
     const DateTimeInput = (attributes) => Input({ type: 'datetime-local', ...attributes });
+
+    /**
+     * Creates an `<input type="week">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
     const WeekInput = (attributes) => Input({ type: 'week', ...attributes });
+
+    /**
+     * Creates an `<input type="month">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
     const MonthInput = (attributes) => Input({ type: 'month', ...attributes });
+
+    /**
+     * Creates an `<input type="search">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
     const SearchInput = (attributes) => Input({ type: 'search', ...attributes });
+
+    /**
+     * Creates an `<input type="tel">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
     const TelInput = (attributes) => Input({ type: 'tel', ...attributes });
+
+    /**
+     * Creates an `<input type="url">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
     const UrlInput = (attributes) => Input({ type: 'url', ...attributes });
+
+    /**
+     * Creates an `<input type="email">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
     const EmailInput = (attributes) => Input({ type: 'email', ...attributes });
-    const NumberInput = (attributes) => Input({ type: 'number', ...attributes });
 
+    /**
+     * Creates an `<input type="number">` element.
+     * @param {Omit<InputAttributes, 'type'>} [attributes]
+     * @returns {HTMLInputElement}
+     */
+    const NumberInput = (attributes) => Input({ type: 'number', ...attributes });
 
+    /**
+     * Creates a `<button>` element.
+     * @type {function(ButtonAttributes=, NdChild|NdChild[]=): HTMLButtonElement}
+     */
     const Button = HtmlElementWrapper('button');
+
+    /**
+     * Creates a `<button type="button">` element.
+     * @param {NdChild|NdChild[]} [child]
+     * @param {Omit<ButtonAttributes, 'type'>} [attributes]
+     * @returns {HTMLButtonElement}
+     */
     const SimpleButton = (child, attributes) => Button(child, { type: 'button', ...attributes });
+
+    /**
+     * Creates a `<button type="submit">` element.
+     * @param {NdChild|NdChild[]} [child]
+     * @param {Omit<ButtonAttributes, 'type'>} [attributes]
+     * @returns {HTMLButtonElement}
+     */
     const SubmitButton = (child, attributes) => Button(child, { type: 'submit', ...attributes });
 
+    /**
+     * Creates a `<main>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Main = HtmlElementWrapper('main');
+
+    /**
+     * Creates a `<section>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Section = HtmlElementWrapper('section');
+
+    /**
+     * Creates an `<article>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Article = HtmlElementWrapper('article');
+
+    /**
+     * Creates an `<aside>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Aside = HtmlElementWrapper('aside');
+
+    /**
+     * Creates a `<nav>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Nav = HtmlElementWrapper('nav');
+
+    /**
+     * Creates a `<figure>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Figure = HtmlElementWrapper('figure');
+
+    /**
+     * Creates a `<figcaption>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const FigCaption = HtmlElementWrapper('figcaption');
 
+    /**
+     * Creates a `<header>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Header = HtmlElementWrapper('header');
+
+    /**
+     * Creates a `<footer>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Footer = HtmlElementWrapper('footer');
 
+    /**
+     * Creates an `<img>` element.
+     * @type {function(ImgAttributes=): HTMLImageElement}
+     */
     const BaseImage = HtmlElementWrapper('img');
+
+    /**
+     * Creates an `<img>` element.
+     * @param {Observable<string>|string} src
+     * @param {Omit<ImgAttributes, 'src'>} [attributes]
+     * @returns {HTMLImageElement}
+     */
     const Img = function(src, attributes) {
         return BaseImage({ src, ...attributes });
     };
 
     /**
-     *
-     * @param {string} src
-     * @param {string|null} defaultImage
-     * @param {Object} attributes
-     * @param {?Function} callback
-     * @returns {Image}
+     * Creates an `<img>` that loads asynchronously, showing a placeholder until the image is ready.
+     * Supports reactive `src` — automatically updates when the observable changes.
+     * @param {Observable<string>|string} src                                        - Final image URL
+     * @param {string|null}               defaultImage                               - Placeholder shown while loading
+     * @param {Omit<ImgAttributes, 'src'>} attributes
+     * @param {(error: NativeDocumentError|null, img: HTMLImageElement) => void} [callback]
+     * @returns {HTMLImageElement}
      */
     const AsyncImg = function(src, defaultImage, attributes, callback) {
         const defaultSrc = Validator.isObservable(src) ? src.val() : src;
@@ -4650,56 +5243,230 @@ var NativeDocument = (function (exports) {
     };
 
     /**
-     *
-     * @param {string} src
-     * @param {Object} attributes
-     * @returns {Image}
+     * Creates an `<img loading="lazy">` element.
+     * @param {Observable<string>|string}          src
+     * @param {Omit<ImgAttributes, 'src'|'loading'>} [attributes]
+     * @returns {HTMLImageElement}
      */
     const LazyImg = function(src, attributes) {
         return Img(src, { ...attributes, loading: 'lazy' });
     };
 
+    /**
+     * Creates a `<details>` element.
+     * @type {function(DetailsAttributes=, NdChild|NdChild[]=): HTMLDetailsElement}
+     */
     const Details = HtmlElementWrapper('details');
+
+    /**
+     * Creates a `<summary>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Summary = HtmlElementWrapper('summary');
+
+    /**
+     * Creates a `<dialog>` element.
+     * @type {function(DialogAttributes=, NdChild|NdChild[]=): HTMLDialogElement}
+     */
     const Dialog = HtmlElementWrapper('dialog');
+
+    /**
+     * Creates a `<menu>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLMenuElement}
+     */
     const Menu = HtmlElementWrapper('menu');
 
+    /**
+     * Creates an `<ol>` element.
+     * @type {function(OlAttributes=, NdChild|NdChild[]=): HTMLOListElement}
+     */
     const OrderedList = HtmlElementWrapper('ol');
+
+    /**
+     * Creates a `<ul>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLUListElement}
+     */
     const UnorderedList = HtmlElementWrapper('ul');
+
+    /**
+     * Creates a `<li>` element.
+     * @type {function(GlobalAttributes & { value?: number }=, NdChild|NdChild[]=): HTMLLIElement}
+     */
     const ListItem = HtmlElementWrapper('li');
 
+    /**
+     * Alias for {@link ListItem}.
+     * @type {typeof ListItem}
+     */
     const Li = ListItem;
+
+    /**
+     * Alias for {@link OrderedList}.
+     * @type {typeof OrderedList}
+     */
     const Ol = OrderedList;
+
+    /**
+     * Alias for {@link UnorderedList}.
+     * @type {typeof UnorderedList}
+     */
     const Ul = UnorderedList;
 
+    /**
+     * Creates an `<audio>` element.
+     * @type {function(AudioAttributes=, NdChild|NdChild[]=): HTMLAudioElement}
+     */
     const Audio = HtmlElementWrapper('audio');
+
+    /**
+     * Creates a `<video>` element.
+     * @type {function(VideoAttributes=, NdChild|NdChild[]=): HTMLVideoElement}
+     */
     const Video = HtmlElementWrapper('video');
+
+    /**
+     * Creates a `<source>` element.
+     * @type {function(SourceAttributes=): HTMLSourceElement}
+     */
     const Source = HtmlElementWrapper('source');
+
+    /**
+     * Creates a `<track>` element.
+     * @type {function(TrackAttributes=): HTMLTrackElement}
+     */
     const Track = HtmlElementWrapper('track');
+
+    /**
+     * Creates a `<canvas>` element.
+     * @type {function(CanvasAttributes=, NdChild|NdChild[]=): HTMLCanvasElement}
+     */
     const Canvas = HtmlElementWrapper('canvas');
+
+    /**
+     * Creates an `<svg>` element.
+     * @type {function(SvgAttributes=, NdChild|NdChild[]=): SVGSVGElement}
+     */
     const Svg = HtmlElementWrapper('svg');
 
+    /**
+     * Creates a `<time>` element.
+     * @type {function(TimeAttributes=, NdChild|NdChild[]=): HTMLTimeElement}
+     */
     const Time = HtmlElementWrapper('time');
+
+    /**
+     * Creates a `<data>` element.
+     * @type {function(GlobalAttributes & { value?: Observable<string>|string }=, NdChild|NdChild[]=): HTMLDataElement}
+     */
     const Data = HtmlElementWrapper('data');
+
+    /**
+     * Creates an `<address>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Address = HtmlElementWrapper('address');
+
+    /**
+     * Creates a `<kbd>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Kbd = HtmlElementWrapper('kbd');
+
+    /**
+     * Creates a `<samp>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Samp = HtmlElementWrapper('samp');
+
+    /**
+     * Creates a `<var>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     const Var = HtmlElementWrapper('var');
+
+    /**
+     * Creates a `<wbr>` element.
+     * @type {function(GlobalAttributes=): HTMLElement}
+     */
     const Wbr = HtmlElementWrapper('wbr');
 
+    /**
+     * Creates a `<caption>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableCaptionElement}
+     */
     const Caption = 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}
+     */
     const THead = HtmlElementWrapper('thead');
+
+    /**
+     * Creates a `<tfoot>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableSectionElement}
+     */
     const TFoot = HtmlElementWrapper('tfoot');
+
+    /**
+     * Creates a `<tbody>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableSectionElement}
+     */
     const TBody = 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 = Th;
+
+    /**
+     * Alias for {@link Th}.
+     * @type {typeof Th}
+     */
     const TFootCell = Th;
+
+    /**
+     * Creates a `<td>` element.
+     * @type {function(TdAttributes=, NdChild|NdChild[]=): HTMLTableCellElement}
+     */
     const Td = HtmlElementWrapper('td');
+
+    /**
+     * Alias for {@link Td}.
+     * @type {typeof Td}
+     */
     const TBodyCell = Td;
 
+    /**
+     * Creates an empty `DocumentFragment` wrapper.
+     * Useful for grouping elements without adding a DOM node.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): DocumentFragment}
+     */
     const Fragment = HtmlElementWrapper('');
 
     var elements = /*#__PURE__*/Object.freeze({
@@ -5102,7 +5869,7 @@ var NativeDocument = (function (exports) {
                 window.history.pushState({ name: route.name(), params, path}, route.name() || path , path);
                 this.handleRouteChange(route, params, query, path);
             } catch (e) {
-                DebugManager$1.error('HistoryRouter', 'Error in pushState', e);
+                DebugManager.error('HistoryRouter', 'Error in pushState', e);
             }
         };
         /**
@@ -5115,7 +5882,7 @@ var NativeDocument = (function (exports) {
                 window.history.replaceState({ name: route.name(), params, path}, route.name() || path , path);
                 this.handleRouteChange(route, params, {}, path);
             } catch(e) {
-                DebugManager$1.error('HistoryRouter', 'Error in replaceState', e);
+                DebugManager.error('HistoryRouter', 'Error in replaceState', e);
             }
         };
         this.forward = function() {
@@ -5142,7 +5909,7 @@ var NativeDocument = (function (exports) {
                     }
                     this.handleRouteChange(route, params, query, path);
                 } catch(e) {
-                    DebugManager$1.error('HistoryRouter', 'Error in popstate event', e);
+                    DebugManager.error('HistoryRouter', 'Error in popstate event', e);
                 }
             });
             const { route, params, query, path } = this.resolve(defaultPath || (window.location.pathname+window.location.search));
@@ -5367,7 +6134,7 @@ var NativeDocument = (function (exports) {
                     listener(request);
                     next && next(request);
                 } catch (e) {
-                    DebugManager$1.warn('Route Listener', 'Error in listener:', e);
+                    DebugManager.warn('Route Listener', 'Error in listener:', e);
                 }
             }
         };
@@ -5545,7 +6312,7 @@ var NativeDocument = (function (exports) {
      */
     Router.create = function(options, callback) {
         if(!Validator.isFunction(callback)) {
-            DebugManager$1.error('Router', 'Callback must be a function');
+            DebugManager.error('Router', 'Callback must be a function');
             throw new RouterError('Callback must be a function');
         }
         const router = new Router(options);
@@ -5735,7 +6502,7 @@ var NativeDocument = (function (exports) {
     exports.HtmlElementWrapper = HtmlElementWrapper;
     exports.NDElement = NDElement;
     exports.Observable = Observable;
-    exports.PluginsManager = PluginsManager$1;
+    exports.PluginsManager = PluginsManager;
     exports.SingletonView = SingletonView;
     exports.Store = Store;
     exports.TemplateCloner = TemplateCloner;