native-document 1.0.150 → 1.0.151

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

@@ -1,16 +1,16 @@
 var NativeComponents = (function (exports) {
     'use strict';
 
-    let DebugManager$2 = {};
+    let DebugManager$1 = {};
     {
-        DebugManager$2 = {
+        DebugManager$1 = {
             log() {},
             warn() {},
             error() {},
             disable() {}
         };
     }
-    var DebugManager$1 = DebugManager$2;
+    var DebugManager$2 = DebugManager$1;
 
     class NativeDocumentError extends Error {
         constructor(message, context = {}) {
@@ -68,7 +68,7 @@ var NativeComponents = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$2.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -159,19 +159,6 @@ var NativeComponents = (function (exports) {
         }
     };
 
-    const nextTick = function(fn) {
-        let pending = false;
-        return function(...args) {
-            if (pending) return;
-            pending = true;
-
-            Promise.resolve().then(() => {
-                fn.apply(this, args);
-                pending = false;
-            });
-        };
-    };
-
     const deepClone = (value, onObservableFound) => {
         try {
             if(window.structuredClone !== undefined) {
@@ -1706,2655 +1693,1093 @@ var NativeComponents = (function (exports) {
         };
     };
 
-    const EVENTS = [
-      "Click",
-      "DblClick",
-      "MouseDown",
-      "MouseEnter",
-      "MouseLeave",
-      "MouseMove",
-      "MouseOut",
-      "MouseOver",
-      "MouseUp",
-      "Wheel",
-      "KeyDown",
-      "KeyPress",
-      "KeyUp",
-      "Blur",
-      "Change",
-      "Focus",
-      "Input",
-      "Invalid",
-      "Reset",
-      "Search",
-      "Select",
-      "Submit",
-      "Drag",
-      "DragEnd",
-      "DragEnter",
-      "DragLeave",
-      "DragOver",
-      "DragStart",
-      "Drop",
-      "AfterPrint",
-      "BeforePrint",
-      "BeforeUnload",
-      "Error",
-      "HashChange",
-      "Load",
-      "Offline",
-      "Online",
-      "PageHide",
-      "PageShow",
-      "Resize",
-      "Scroll",
-      "Unload",
-      "Abort",
-      "CanPlay",
-      "CanPlayThrough",
-      "DurationChange",
-      "Emptied",
-      "Ended",
-      "LoadedData",
-      "LoadedMetadata",
-      "LoadStart",
-      "Pause",
-      "Play",
-      "Playing",
-      "Progress",
-      "RateChange",
-      "Seeked",
-      "Seeking",
-      "Stalled",
-      "Suspend",
-      "TimeUpdate",
-      "VolumeChange",
-      "Waiting",
-
-      "TouchCancel",
-      "TouchEnd",
-      "TouchMove",
-      "TouchStart",
-      "AnimationEnd",
-      "AnimationIteration",
-      "AnimationStart",
-      "TransitionEnd",
-      "Copy",
-      "Cut",
-      "Paste",
-      "FocusIn",
-      "FocusOut",
-      "ContextMenu"
-    ];
-
-    const EVENTS_WITH_PREVENT = [
-      "Click",
-      "DblClick",
-      "MouseDown",
-      "MouseUp",
-      "Wheel",
-      "KeyDown",
-      "KeyPress",
-      "Invalid",
-      "Reset",
-      "Submit",
-      "DragOver",
-      "Drop",
-      "BeforeUnload",
-      "TouchCancel",
-      "TouchEnd",
-      "TouchMove",
-      "TouchStart",
-      "Copy",
-      "Cut",
-      "Paste",
-      "ContextMenu"
-    ];
+    function oneChildAnchorOverwriting(anchor, parent) {
 
-    const EVENTS_WITH_STOP =  [
-      "Click",
-      "DblClick",
-      "MouseDown",
-      "MouseMove",
-      "MouseOut",
-      "MouseOver",
-      "MouseUp",
-      "Wheel",
-      "KeyDown",
-      "KeyPress",
-      "KeyUp",
-      "Change",
-      "Input",
-      "Invalid",
-      "Reset",
-      "Search",
-      "Select",
-      "Submit",
-      "Drag",
-      "DragEnd",
-      "DragEnter",
-      "DragLeave",
-      "DragOver",
-      "DragStart",
-      "Drop",
-      "BeforeUnload",
-      "HashChange",
-      "TouchCancel",
-      "TouchEnd",
-      "TouchMove",
-      "TouchStart",
-      "AnimationEnd",
-      "AnimationIteration",
-      "AnimationStart",
-      "TransitionEnd",
-      "Copy",
-      "Cut",
-      "Paste",
-      "FocusIn",
-      "FocusOut",
-      "ContextMenu"
-    ];
+        anchor.remove = () => {
+            anchor.append.apply(anchor, parent.childNodes);
+        };
+        anchor.getParent = () => parent;
 
-    const property = {
-        configurable: true,
-        get() {
-            return new NDElement(this);
-        }
-    };
+        anchor.appendChild = (child) => {
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            parent.appendChild(child);
+        };
 
-    Object.defineProperty(HTMLElement.prototype, 'nd', property);
+        anchor.appendChildRaw = parent.appendChild.bind(parent);
+        anchor.append = anchor.appendChild;
+        anchor.appendRaw = anchor.appendChildRaw;
 
-    Object.defineProperty(DocumentFragment.prototype, 'nd', property);
+        anchor.insertAtStart = (child) => {
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            parent.firstChild ? parent.insertBefore(child, parent.firstChild) : parent.appendChild(child);
+        };
+        anchor.insertAtStartRaw = (child) => {
+            parent.firstChild ? parent.insertBefore(child, parent.firstChild) : parent.appendChild(child);
+        };
 
-    Object.defineProperty(NDElement.prototype, 'nd', {
-        configurable: true,
-        get: function() {
-            return this;
-        }
-    });
+        anchor.appendElement = anchor.appendChild;
 
+        anchor.removeChildren = () => {
+            parent.textContent = '';
+        };
 
+        anchor.replaceContent = function(content) {
+            const child = Validator.isElement(content) ? content : ElementCreator.getChild(content);
+            parent.replaceChildren(child);
+        };
 
-    // ----------------------------------------------------------------
-    // Events helpers
-    // ----------------------------------------------------------------
-    EVENTS.forEach(eventSourceName => {
-        const eventName = eventSourceName.toLowerCase();
-        NDElement.prototype['on'+eventSourceName] = function(callback = null) {
-            this.$element.addEventListener(eventName, callback);
-            return this;
+        anchor.replaceContentRaw = function(child) {
+            parent.replaceChildren(child);
         };
-    });
+        anchor.setContent = anchor.replaceContent;
 
-    EVENTS_WITH_STOP.forEach(eventSourceName => {
-        const eventName = eventSourceName.toLowerCase();
-        NDElement.prototype['onStop'+eventSourceName] = function(callback = null) {
-            _stop(this.$element, eventName, callback);
-            return this;
+        anchor.insertBefore = (child, anchor) => {
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            parent.insertBefore(child, anchor);
         };
-        NDElement.prototype['onPreventStop'+eventSourceName] = function(callback = null) {
-            _preventStop(this.$element, eventName, callback);
-            return this;
+        anchor.insertBeforeRaw = (child, anchor) => {
+            parent.insertBefore(child, anchor);
         };
-    });
 
-    EVENTS_WITH_PREVENT.forEach(eventSourceName => {
-        const eventName = eventSourceName.toLowerCase();
-        NDElement.prototype['onPrevent'+eventSourceName] = function(callback = null) {
-            _prevent(this.$element, eventName, callback);
-            return this;
-        };
-    });
+        anchor.appendChildBefore = anchor.insertBefore;
+        anchor.appendChildBeforeRaw = anchor.insertBeforeRaw;
 
-    NDElement.prototype.on = function(name, callback, options) {
-        this.$element.addEventListener(name.toLowerCase(), callback, options);
-        return this;
-    };
+        anchor.clear = anchor.remove;
+        anchor.detach = anchor.remove;
 
-    const _prevent = function(element, eventName, callback) {
-        const handler = (event) => {
-            event.preventDefault();
-            callback && callback.call(element, event);
+        anchor.replaceChildren = function() {
+            parent.replaceChildren(...arguments);
         };
-        element.addEventListener(eventName, handler);
-        return this;
-    };
 
-    const _stop = function(element, eventName, callback) {
-        const handler = (event) => {
-            event.stopPropagation();
-            callback && callback.call(element, event);
+        anchor.getByIndex = (index) => {
+            return parent.childNodes[index];
         };
-        element.addEventListener(eventName, handler);
-        return this;
-    };
-
-    const _preventStop = function(element, eventName, callback) {
-        const handler = (event) => {
-            event.stopPropagation();
-            event.preventDefault();
-            callback && callback.call(element, event);
-        };
-        element.addEventListener(eventName, handler);
-        return this;
-    };
-
+    }
 
+    function Anchor(name, isUniqueChild = false) {
+        const anchorFragment = new AnchorWithSentinel(name);
 
-    // ----------------------------------------------------------------
-    // Class attributes binder
-    // ----------------------------------------------------------------
-    const classListMethods = {
-        getClasses() {
-            return this.$element.className?.split(' ').filter(Boolean);
-        },
-        add(value) {
-            const classes = this.getClasses();
-            if(classes.indexOf(value) >= 0) {
-                return;
-            }
-            classes.push(value);
-            this.$element.className = classes.join(' ');
-        },
-        remove(value) {
-            const classes = this.getClasses();
-            const index = classes.indexOf(value);
-            if(index < 0) {
-                return;
-            }
-            classes.splice(index, 1);
-            this.$element.className = classes.join(' ');
-        },
-        toggle(value, force = undefined) {
-            const classes = this.getClasses();
-            const index = classes.indexOf(value);
-            if(index >= 0) {
-                if(force === true) {
-                    return;
-                }
-                classes.splice(index, 1);
-            }
-            else {
-                if(force === false) {
-                    return;
-                }
-                classes.push(value);
+        anchorFragment.onConnectedOnce((parent) => {
+            if(isUniqueChild) {
+                oneChildAnchorOverwriting(anchorFragment, parent);
             }
-            this.$element.className = classes.join(' ');
-        },
-        contains(value) {
-            return this.getClasses().indexOf(value) >= 0;
-        }
-    };
-
-    Object.defineProperty(HTMLElement.prototype, 'classes', {
-        configurable: true,
-        get() {
-            return {
-                $element: this,
-                ...classListMethods
-            };
-        }
-    });
-
-    let withValidation = (fn) => fn;
-
-    const normalizeComponentArgs = function(props, children = null) {
-        if(props && children) {
-            return { props, children };
-        }
-        if(typeof props !== 'object' || Array.isArray(props) || props === null || props.constructor.name !== 'Object' ||  props.$hydrate) { // IF it's not a JSON
-            return { props: children, children: props }
-        }
-        return { props, children };
-    };
+        });
 
-    /**
-     *
-     * @param {*} value
-     * @returns {Text}
-     */
-    const createTextNode = (value) => {
-        if(value) {
-            return value.toNdElement();
-        }
-        return ElementCreator.createTextNode();
-    };
+        anchorFragment.__Anchor__ = true;
 
+        const anchorStart = anchorFragment.$start;
+        const anchorEnd = anchorFragment.$end;
 
-    const createHtmlElement = (element, _attributes, _children = null) => {
-        let { props: attributes, children = null } = normalizeComponentArgs(_attributes, _children);
+        anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
+        anchorFragment.nativeAppendChild = anchorFragment.appendChild;
+        anchorFragment.nativeAppend = anchorFragment.append;
 
-        ElementCreator.processAttributes(element, attributes);
-        ElementCreator.processChildren(children, element);
-        return element;
-    };
+        const isParentUniqueChild = isUniqueChild
+            ? () => true: (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
 
-    /**
-     *
-     * @param {string} name
-     * @param {?Function=} customWrapper
-     * @returns {Function}
-     */
-    function HtmlElementWrapper(name, customWrapper = null) {
-        if(name) {
-            if(customWrapper) {
-                let node = null;
-                let createElement = (attr, children) => {
-                    node = document.createElement(name);
-                    createElement = (attr, children) => {
-                        return createHtmlElement(customWrapper(node.cloneNode()), attr, children);
-                    };
-                    return createHtmlElement(customWrapper(node.cloneNode()), attr, children);            };
+        const insertBefore = (parent, child, target) => {
+            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            insertBeforeRaw(parent, childElement, target);
+        };
 
-                return (attr, children) => createElement(attr, children)
+        const insertBeforeRaw = (parent, child, target) => {
+            if(parent === anchorFragment) {
+                parent.nativeInsertBefore(child, target);
+                return;
             }
-
-            let node = null;
-            let createElement = (attr, children) => {
-                node = document.createElement(name);
-                createElement = (attr, children) => {
-                    return createHtmlElement(node.cloneNode(), attr, children);
-                };
-                return createHtmlElement(node.cloneNode(), attr, children);
-            };
-
-            return (attr, children) => createElement(attr, children)
-        }
-        return (children, name = '') => {
-            const anchor = Anchor(name);
-            anchor.append(children);
-            return anchor;
+            if(isParentUniqueChild(parent) && target === anchorEnd) {
+                parent.append(child,  target);
+                return;
+            }
+            parent.insertBefore(child, target);
         };
-    }
 
-    function NodeCloner($element) {
-        this.$element = $element;
-        this.$classes = null;
-        this.$styles = null;
-        this.$attrs = null;
-        this.$ndMethods = null;
-    }
+        anchorFragment.appendElement = function(child) {
+            const parentNode = anchorStart.parentNode;
+            if(parentNode === anchorFragment) {
+                parentNode.nativeInsertBefore(child, anchorEnd);
+                return;
+            }
+            parentNode.insertBefore(child, anchorEnd);
+        };
 
+        anchorFragment.appendChild = function(child, before = null) {
+            const parent = anchorEnd.parentNode;
+            if(!parent) {
+                DebugManager.error('Anchor', 'Anchor : parent not found', child);
+                return;
+            }
+            before = before ?? anchorEnd;
+            insertBefore(parent, child, before);
+        };
 
-    /**
-     * Attaches a template binding to the element by hydrating it with the specified method.
-     *
-     * @param {string} methodName - Name of the hydration method to call
-     * @param {BindingHydrator} bindingHydrator - Template binding with $hydrate method
-     * @returns {HTMLElement} The underlying HTML element
-     * @example
-     * const onClick = $binder.attach((event, data) => console.log(data));
-     * element.nd.attach('onClick', onClick);
-     */
-    NDElement.prototype.attach = function(methodName, bindingHydrator) {
-        if(typeof bindingHydrator === 'function') {
-            const element = this.$element;
-            element.nodeCloner = element.nodeCloner || new NodeCloner(element);
-            element.nodeCloner.attach(methodName, bindingHydrator);
-            return element;
-        }
-        bindingHydrator.$hydrate(this.$element, methodName);
-        return this.$element;
-    };
+        anchorFragment.appendChildRaw = function(child, before = null) {
+            const parent = anchorEnd.parentNode;
+            if(!parent) {
+                DebugManager.error('Anchor', 'Anchor : parent not found', child);
+                return;
+            }
+            before = before ?? anchorEnd;
+            insertBeforeRaw(parent, child, before);
+        };
 
-    NodeCloner.prototype.__$isNodeCloner = true;
+        anchorFragment.getParent = () => anchorEnd.parentNode;
+        anchorFragment.append = anchorFragment.appendChild;
+        anchorFragment.appendRaw = anchorFragment.appendChildRaw;
 
-    const buildProperties = (cache, properties, data) => {
-        for(const key in properties) {
-            cache[key] = properties[key].apply(null, data);
-        }
-        return cache;
-    };
+        anchorFragment.insertAtStart = function(child) {
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            anchorFragment.insertAtStartRaw(child);
+        };
 
-    NodeCloner.prototype.resolve = function() {
-        if(this.$content) {
-            return;
-        }
-        const steps = [];
-        if(this.$ndMethods) {
-            const methods = Object.keys(this.$ndMethods);
-            if(methods.length === 1) {
-                const methodName = methods[0];
-                const callback = this.$ndMethods[methodName];
-                steps.push((clonedNode, data) => {
-                    clonedNode.nd[methodName](callback.bind(clonedNode, ...data));
-                });
-            } else {
-                steps.push((clonedNode, data) => {
-                    const nd = clonedNode.nd;
-                    for(const methodName in this.$ndMethods) {
-                        nd[methodName](this.$ndMethods[methodName].bind(clonedNode, ...data));
-                    }
-                });
+        anchorFragment.insertAtStartRaw = function(child) {
+            const parentNode = anchorStart.parentNode;
+            if(parentNode === anchorFragment) {
+                parentNode.nativeInsertBefore(child, anchorStart);
+                return;
             }
-        }
-        if(this.$classes) {
-            const cache = {};
-            const keys = Object.keys(this.$classes);
+            parentNode.insertBefore(child, anchorStart);
+        };
 
-            if(keys.length === 1) {
-                const key = keys[0];
-                const callback = this.$classes[key];
-                steps.push((clonedNode, data) => {
-                    cache[key] = callback.apply(null, data);
-                    ElementCreator.processClassAttribute(clonedNode, cache);
-                });
-            } else {
-                steps.push((clonedNode, data) => {
-                    ElementCreator.processClassAttribute(clonedNode, buildProperties(cache, this.$classes, data));
-                });
+        anchorFragment.removeChildren = function() {
+            const parent = anchorEnd.parentNode;
+            if(parent === anchorFragment) {
+                return;
             }
-        }
-        if(this.$styles) {
-            const cache = {};
-            const keys = Object.keys(this.$styles);
-
-            if(keys.length === 1) {
-                const key = keys[0];
-                const callback = this.$styles[key];
-                steps.push((clonedNode, data) => {
-                    cache[key] = callback.apply(null, data);
-                    ElementCreator.processStyleAttribute(clonedNode, cache);
-                });
-            } else {
-                steps.push((clonedNode, data) => {
-                    ElementCreator.processStyleAttribute(clonedNode, buildProperties(cache, this.$styles, data));
-                });
+            if(isParentUniqueChild(parent)) {
+                parent.replaceChildren(anchorStart, anchorEnd);
+                return;
             }
-        }
-        if(this.$attrs) {
-            const cache = {};
-            const keys = Object.keys(this.$attrs);
 
-            if(keys.length === 1) {
-                const key = keys[0];
-                const callback = this.$attrs[key];
-                steps.push((clonedNode, data) => {
-                    cache[key] = callback.apply(null, data);
-                    ElementCreator.processAttributes(clonedNode, cache);
-                });
-            } else {
-                steps.push((clonedNode, data) => {
-                    ElementCreator.processAttributes(clonedNode, buildProperties(cache, this.$attrs, data));
-                });
+            let itemToRemove = anchorStart.nextSibling, tempItem;
+            while(itemToRemove && itemToRemove !== anchorEnd) {
+                tempItem = itemToRemove.nextSibling;
+                itemToRemove.remove();
+                itemToRemove =  tempItem;
             }
-        }
-
-        const stepsCount = steps.length;
-        const $element = this.$element;
+        };
 
-        this.cloneNode = (data) => {
-            const clonedNode = $element.cloneNode(false);
-            for(let i = 0; i < stepsCount; i++) {
-                steps[i](clonedNode, data);
+        anchorFragment.remove = function() {
+            const parent = anchorEnd.parentNode;
+            if(parent === anchorFragment) {
+                return;
+            }
+            if(isParentUniqueChild(parent)) {
+                anchorFragment.nativeAppend.apply(anchorFragment, parent.childNodes);
+                parent.replaceChildren(anchorStart, anchorEnd);
+                return;
+            }
+            let itemToRemove = anchorStart.nextSibling, tempItem;
+            while(itemToRemove && itemToRemove !== anchorEnd) {
+                tempItem = itemToRemove.nextSibling;
+                anchorFragment.nativeAppend(itemToRemove);
+                itemToRemove = tempItem;
             }
-            return clonedNode;
         };
-    };
 
-    NodeCloner.prototype.cloneNode = function(data) {
-        return this.$element.cloneNode(false);
-    };
+        anchorFragment.removeWithAnchors = function() {
+            anchorFragment.removeChildren();
+            anchorStart.remove();
+            anchorEnd.remove();
+        };
+        anchorFragment.delete = anchorFragment.removeWithAnchors;
 
-    NodeCloner.prototype.attach = function(methodName, callback) {
-        this.$ndMethods = this.$ndMethods || {};
-        this.$ndMethods[methodName] = callback;
-        return this;
-    };
-
-    NodeCloner.prototype.text = function(value) {
-        this.$content = value;
-        if(typeof value === 'function') {
-            this.cloneNode = (data) => createTextNode(value.apply(null, data));
-            return this;
-        }
-        this.cloneNode = (data) => createTextNode(data[0][value]);
-        return this;
-    };
+        anchorFragment.replaceContent = function(child) {
+            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            anchorFragment.replaceContentRaw(childElement);
+        };
 
-    NodeCloner.prototype.attr = function(attrName, value) {
-        if(attrName === 'class') {
-            this.$classes = this.$classes || {};
-            this.$classes[value.property] = value.value;
-            return this;
-        }
-        if(attrName === 'style') {
-            this.$styles = this.$styles || {};
-            this.$styles[value.property] = value.value;
-            return this;
-        }
-        this.$attrs = this.$attrs || {};
-        this.$attrs[attrName] = value.value;
-        return this;
-    };
+        anchorFragment.replaceContentRaw = function(child) {
+            const parent = anchorEnd.parentNode;
+            if(!parent) {
+                return;
+            }
+            if(isParentUniqueChild(parent)) {
+                parent.replaceChildren(anchorStart, child, anchorEnd);
+                return;
+            }
+            anchorFragment.removeChildren();
+            parent.insertBefore(child, anchorEnd);
+        };
 
-    DocumentFragment.prototype.__IS_FRAGMENT = true;
+        anchorFragment.setContent = anchorFragment.replaceContent;
+        anchorFragment.setContentRaw = anchorFragment.replaceContentRaw;
 
-    Function.prototype.args = function(...args) {
-        return withValidation(this);
-    };
+        anchorFragment.insertBefore = anchorFragment.appendChild;
+        anchorFragment.insertBeforeRaw = anchorFragment.appendChildRaw;
 
-    Function.prototype.errorBoundary = function(callback) {
-        const handler = (...args)  => {
-            try {
-                return this.apply(this, args);
-            } catch(e) {
-                return callback(e, {caller: handler, args: args });
-            }
+        anchorFragment.endElement = function() {
+            return anchorEnd;
         };
-        return handler;
-    };
 
-    const cssPropertyAccumulator = function(initialValue = {}) {
-        let data = Validator.isString(initialValue) ? initialValue.split(';').filter(Boolean) : initialValue;
+        anchorFragment.startElement = function() {
+            return anchorStart;
+        };
 
-        return {
-            add(key, value) {
-                if(Array.isArray(data)) {
-                    data.push(key+':  '+value);
-                    return;
-                }
-                if(Validator.isObject(key)) {
-                    value = key;
-                    for(const property in value) {
-                        data[property] = value[property];
-                    }
-                    return;
-                }
-                data[key] = value;
-            },
-            value() {
-                if(Array.isArray(data)) {
-                    return data.join(';').concat(';');
-                }
-                return { ...data };
-            },
+        anchorFragment.restore = function() {
+            anchorFragment.appendChild(anchorFragment);
         };
-    };
 
-    const classPropertyAccumulator = function(initialValue = []) {
-        let data = Validator.isString(initialValue) ? initialValue.split(" ").filter(Boolean) : initialValue;
+        anchorFragment.clear = anchorFragment.remove;
+        anchorFragment.detach = anchorFragment.remove;
 
-        return {
-            add(key, value = true) {
-                if(Validator.isJson(key)) {
-                    for(const property in key) {
-                        if(key[property]) {
-                            data[property] = key[property];
-                        }
-                    }
-                    return;
-                }
-                if(value != null || key.__$Observable) {
-                    if(Array.isArray(data)) {
-                        data = data.reduce((acc, item) => {
-                            acc[item] = true;
-                            return acc;
-                        }, {});
-                    }
-                    if(key.__$Observable) {
-                        const uniqueId = `obs-${Math.random().toString(36).substr(2, 9)}`;
-                        data[uniqueId] = key;
-                    }
-                    else {
-                        data[key] = value;
-                    }
-                    return;
-                }
-                if(Array.isArray(data)) {
-                    data.push(key);
-                    return;
-                }
-                data[key] = value;
-            },
-            value() {
-                if(Array.isArray(data)) {
-                    return data.join(' ');
+        anchorFragment.getByIndex = function(index) {
+            let currentNode = anchorStart;
+            for(let i = 0; i <= index; i++) {
+                if(!currentNode.nextSibling) {
+                    return null;
                 }
-                return { ...data };
-            },
+                currentNode = currentNode.nextSibling;
+            }
+            return currentNode !== anchorStart ? currentNode : null;
         };
-    };
 
-    const mutationMethods = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'];
-    const noMutationMethods = ['map', 'forEach', 'filter', 'reduce', 'some', 'every', 'find', 'findIndex', 'concat', 'includes', 'indexOf'];
+        return anchorFragment;
+    }
+    DocumentFragment.prototype.setAttribute = () => {};
 
-    /**
-     *
-     * @param target
-     * @param {{propagation: boolean, deep: boolean, reset: boolean}|null} configs
-     * @constructor
-     */
-    const ObservableArray = function (target, configs = null) {
-        if(!Array.isArray(target)) {
-            throw new NativeDocumentError('Observable.array : target must be an array');
-        }
+    function NDElement(element) {
+        this.$element = element;
+        this.$attachements = null;
+    }
 
-        ObservableItem.call(this, target, configs);
-    };
+    NDElement.prototype.__$isNDElement = true;
 
-    ObservableArray.prototype = Object.create(ObservableItem.prototype);
-    ObservableArray.prototype.constructor = ObservableArray;
-    ObservableArray.prototype.__$isObservableArray = true;
+    NDElement.prototype.ghostDom = function(element) {
+        if(!this.$attachements) {
+            this.$attachements = document.createDocumentFragment();
+        }
+        this.$attachements.appendChild(ElementCreator.getChild(element));
+        return this;
+    };
 
+    NDElement.prototype.valueOf = function() {
+        return this.$element;
+    };
 
-    Object.defineProperty(ObservableArray.prototype, 'length', {
-        get() {
-            return this.$currentValue.length;
-        }
-    });
+    NDElement.prototype.ref = function(target, name) {
+        target[name] = this.$element;
+        return this;
+    };
 
+    NDElement.prototype.refSelf = function(target, name) {
+        target[name] = this;
+        // TODO: @DIM to check
+        // target[name] = new NDElement(this.$element);
+        return this;
+    };
 
-    ObservableArray.prototype.$mutate = function(action, args, mutateFn) {
-        if(this.$mutationInterceptor) {
-            const value = this.$mutationInterceptor(args, { action });
-            if(args !== undefined) {
-                args = value;
+    NDElement.prototype.unmountChildren = function() {
+        let element = this.$element;
+        for(let i = 0, length = element.children.length; i < length; i++) {
+            let elementChildren = element.children[i];
+            if(!elementChildren.$ndProx) {
+                elementChildren.nd?.remove();
             }
+            elementChildren = null;
         }
-        mutateFn(args);
+        element = null;
+        return this;
     };
 
-    mutationMethods.forEach((method) => {
-        ObservableArray.prototype[method] = function(...values) {
-            return this.$mutate(method, values, (argsToUse) => {
-                const result = this.$currentValue[method].apply(this.$currentValue, argsToUse);
-                this.trigger({ action: method, args: argsToUse, result });
-                return result;
-            })
-        };
-    });
+    NDElement.prototype.remove = function() {
+        let element = this.$element;
+        element.nd.unmountChildren();
+        element.$ndProx = null;
 
-    noMutationMethods.forEach((method) => {
-        ObservableArray.prototype[method] = function(...values) {
-            return this.$currentValue[method].apply(this.$currentValue, values);
-        };
-    });
+        $lifeCycleObservers.delete(element);
 
+        element = null;
+        return this;
+    };
 
-    const $clearEvent = { action: 'clear' };
+    const $lifeCycleObservers = new WeakMap();
+    NDElement.prototype.lifecycle = function(states) {
+        const el = this.$element;
+        if (!$lifeCycleObservers.has(el)) {
+            $lifeCycleObservers.set(el, DocumentObserver.watch(el));
+        }
+        const observer = $lifeCycleObservers.get(el);
 
-    /**
-     * Removes all items from the array and triggers an update.
-     *
-     * @returns {boolean} True if array was cleared, false if it was already empty
-     * @example
-     * const items = Observable.array([1, 2, 3]);
-     * items.clear(); // []
-     */
-    ObservableArray.prototype.clear = function() {
-        if(this.$currentValue.length === 0) {
-            return;
+        if(states.mounted) {
+            this.$element.setAttribute('data--nd-mounted', '1');
+            observer.mounted(states.mounted);
         }
-        this.$mutate('clear', [], () => {
-            this.$currentValue.length = 0;
-            this.trigger($clearEvent);
-        });
-        return true;
+        if(states.unmounted) {
+            this.$element.setAttribute('data--nd-unmounted', '1');
+            observer.unmounted(states.unmounted);
+        }
+        return this;
     };
 
-    /**
-     * Returns the element at the specified index in the array.
-     *
-     * @param {number} index - Zero-based index of the element to retrieve
-     * @returns {*} The element at the specified index
-     * @example
-     * const items = Observable.array(['a', 'b', 'c']);
-     * items.at(1); // 'b'
-     */
-    ObservableArray.prototype.at = function(index) {
-        return this.$currentValue[index];
+    NDElement.prototype.mounted = function(callback) {
+        return this.lifecycle({ mounted: callback });
     };
 
-
-    /**
-     * Merges multiple values into the array and triggers an update.
-     * Similar to push but with a different operation name.
-     *
-     * @param {Array} values - Array of values to merge
-     * @example
-     * const items = Observable.array([1, 2]);
-     * items.merge([3, 4]); // [1, 2, 3, 4]
-     */
-    ObservableArray.prototype.merge = function(values) {
-        this.$mutate('merge', values, (valuesToMerge) => {
-            this.$currentValue.push.apply(this.$currentValue, valuesToMerge);
-            this.trigger({ action: 'merge',  args: valuesToMerge });
-        });
+    NDElement.prototype.unmounted = function(callback) {
+        return this.lifecycle({ unmounted: callback });
     };
 
-    /**
-     * Counts the number of elements that satisfy the provided condition.
-     *
-     * @param {(value: *, index: number) => Boolean} condition - Function that tests each element (item, index) => boolean
-     * @returns {number} The count of elements that satisfy the condition
-     * @example
-     * const numbers = Observable.array([1, 2, 3, 4, 5]);
-     * numbers.count(n => n > 3); // 2
-     */
-    ObservableArray.prototype.count = function(condition) {
-        let count = 0;
-        this.$currentValue.forEach((item, index) => {
-            if(condition(item, index)) {
-                count++;
-            }
-        });
-        return count;
-    };
+    NDElement.prototype.beforeUnmount = function(id, callback) {
+        const el = this.$element;
 
-    /**
-     * Swaps two elements at the specified indices and triggers an update.
-     *
-     * @param {number} indexA - Index of the first element
-     * @param {number} indexB - Index of the second element
-     * @returns {boolean} True if swap was successful, false if indices are out of bounds
-     * @example
-     * const items = Observable.array(['a', 'b', 'c']);
-     * items.swap(0, 2); // ['c', 'b', 'a']
-     */
-    ObservableArray.prototype.swap = function(indexA, indexB) {
-        this.$mutate('swap', [indexA, indexB], ([indexA, indexB]) => {
-            const value = this.$currentValue;
-            const length = value.length;
-            if(indexB < indexA) {
-                const temp = indexA;
-                indexA = indexB;
-                indexB = temp;
-            }
-            if(length < indexA || length < indexB) {
-                return false;
-            }
-            const elementA = value[indexA];
-            const elementB = value[indexB];
+        if(!DocumentObserver.beforeUnmount.has(el)) {
+            DocumentObserver.beforeUnmount.set(el, new Map());
+            const originalRemove = el.remove.bind(el);
 
-            value[indexA] = elementB;
-            value[indexB] = elementA;
-            this.trigger({ action: 'swap', args: [indexA, indexB], result: [elementA, elementB] });
-        });
-        return true;
-    };
+            let  $isUnmounting = false;
 
-    ObservableArray.prototype.swapItems = function(itemA, itemB) {
-        const indexA = this.$currentValue.indexOf(itemA);
-        const indexB = this.$currentValue.indexOf(itemB);
+            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;
+                }
+            };
+        }
 
-        return this.swap(indexA, indexB);
+        DocumentObserver.beforeUnmount.get(el).set(id, callback);
+        return this;
     };
 
-    ObservableArray.prototype.insertAfter = function(data, target) {
-        const targetIndex = this.$currentValue.indexOf(target);
-        return this.splice(targetIndex + 1, 0, data);
+    NDElement.prototype.htmlElement = function() {
+        return this.$element;
     };
 
-    /**
-     * Removes the element at the specified index and triggers an update.
-     *
-     * @param {number} index - Index of the element to remove
-     * @returns {Array} Array containing the removed element, or empty array if index is invalid
-     * @example
-     * const items = Observable.array(['a', 'b', 'c']);
-     * items.remove(1); // ['b'] - Array is now ['a', 'c']
-     */
-    ObservableArray.prototype.remove = function(index) {
-        let deleted = [];
-        this.$mutate('remove', [index], ([idx]) => {
-            deleted = this.$currentValue.splice(idx, 1);
-            if(deleted.length === 0) {
-                return;
-            }
-            this.trigger({action: 'remove', args: [idx], result: deleted[0]});
-        });
-        return deleted;
-    };
+    NDElement.prototype.node = NDElement.prototype.htmlElement;
 
-    /**
-     * Removes the first occurrence of the specified item from the array.
-     *
-     * @param {*} item - The item to remove
-     * @returns {Array} Array containing the removed element, or empty array if item not found
-     * @example
-     * const items = Observable.array(['a', 'b', 'c']);
-     * items.removeItem('b'); // ['b'] - Array is now ['a', 'c']
-     */
-    ObservableArray.prototype.removeItem = function(item) {
-        const indexOfItem = this.$currentValue.indexOf(item);
-        if(indexOfItem === -1) {
-            return [];
+    NDElement.prototype.shadow = function(mode, style = null) {
+        const $element = this.$element;
+        const children = Array.from($element.childNodes);
+        const shadowRoot = $element.attachShadow({ mode });
+        if(style) {
+            const styleNode = document.createElement("style");
+            styleNode.textContent = style;
+            shadowRoot.appendChild(styleNode);
         }
-        return this.remove(indexOfItem);
-    };
-
-    /**
-     * Checks if the array is empty.
-     *
-     * @returns {boolean} True if array has no elements
-     * @example
-     * const items = Observable.array([]);
-     * items.isEmpty(); // true
-     */
-    ObservableArray.prototype.empty = function() {
-        return this.$currentValue.length === 0;
-    };
+        $element.append = shadowRoot.append.bind(shadowRoot);
+        $element.appendChild = shadowRoot.appendChild.bind(shadowRoot);
+        shadowRoot.append(...children);
 
-    /**
-     * Triggers a populate operation with the current array, iteration count, and callback.
-     * Used internally for rendering optimizations.
-     *
-     * @param {number} iteration - Iteration count for rendering
-     * @param {Function} callback - Callback function for rendering items
-     */
-    ObservableArray.prototype.populateAndRender = function(iteration, callback) {
-        this.trigger({ action: 'populate', args: [this.$currentValue, iteration, callback] });
+        return this;
     };
 
-
-    /**
-     * Creates a filtered view of the array based on predicates.
-     * The filtered array updates automatically when source data or predicates change.
-     *
-     * @param {Object} predicates - Object mapping property names to filter conditions or functions
-     * @returns {ObservableArray} A new observable array containing filtered items
-     * @example
-     * const users = Observable.array([
-     *   { name: 'John', age: 25 },
-     *   { name: 'Jane', age: 30 }
-     * ]);
-     *
-     * const adults = users.where({ age: (val) => val >= 18 });
-     */
-    ObservableArray.prototype.where = function(predicates) {
-        if(typeof predicates === 'function') {
-            predicates = { _: predicates };
-        }
-        const sourceArray = this;
-        const observableDependencies = [sourceArray];
-        const filterCallbacks = {};
-
-        for (const [key, rawPredicate] of Object.entries(predicates)) {
-            const predicate = Validator.isObservable(rawPredicate) ? match(rawPredicate, false) : rawPredicate;
-            if (predicate && typeof predicate === 'object' && 'callback' in predicate) {
-                filterCallbacks[key] = predicate.callback;
-
-                if (predicate.dependencies) {
-                    const deps = Array.isArray(predicate.dependencies)
-                        ? predicate.dependencies
-                        : [predicate.dependencies];
-                    observableDependencies.push.apply(observableDependencies, deps);
-                }
-            } else if(typeof predicate === 'function') {
-                filterCallbacks[key] = predicate;
-            } else {
-                filterCallbacks[key] = (value) => value === predicate;
-            }
-        }
-
-        const viewArray = Observable.array();
-
-        const filters = Object.entries(filterCallbacks);
-        const updateView = () => {
-            const filtered = sourceArray.val().filter(item => {
-                for (const [key, callback] of filters) {
-                    if(key === '_') {
-                        if (!callback(item)) return false;
-                    } else {
-                        if (!callback(item[key])) return false;
-                    }
-                }
-                return true;
-            });
-
-            viewArray.set(filtered);
-        };
-
-        observableDependencies.forEach(dep => dep.subscribe(updateView));
-
-        updateView();
-
-        return viewArray;
+    NDElement.prototype.openShadow = function(style = null) {
+        return this.shadow('open', style);
     };
 
-    /**
-     * Creates a filtered view where at least one of the specified fields matches the filter.
-     *
-     * @param {Array<string>} fields - Array of field names to check
-     * @param {FilterResult} filter - Filter condition with callback and dependencies
-     * @returns {ObservableArray} A new observable array containing filtered items
-     * @example
-     * const products = Observable.array([
-     *   { name: 'Apple', category: 'Fruit' },
-     *   { name: 'Carrot', category: 'Vegetable' }
-     * ]);
-     * const searchTerm = Observable('App');
-     * const filtered = products.whereSome(['name', 'category'], match(searchTerm));
-     */
-    ObservableArray.prototype.whereSome = function(fields, filter) {
-        return this.where({
-            _: {
-                dependencies: filter.dependencies,
-                callback: (item) => fields.some(field => filter.callback(item[field]))
-            }
-        });
+    NDElement.prototype.closedShadow = function(style = null) {
+        return this.shadow('closed', style);
     };
 
     /**
-     * Creates a filtered view where all specified fields match the filter.
+     * Extends the current NDElement instance with custom methods.
+     * Methods are bound to the instance and available for chaining.
      *
-     * @param {Array<string>} fields - Array of field names to check
-     * @param {FilterResult} filter - Filter condition with callback and dependencies
-     * @returns {ObservableArray} A new observable array containing filtered items
+     * @param {Object} methods - Object containing method definitions
+     * @returns {this} The NDElement instance with added methods for chaining
      * @example
-     * const items = Observable.array([
-     *   { status: 'active', verified: true },
-     *   { status: 'active', verified: false }
-     * ]);
-     * const activeFilter = equals('active');
-     * const filtered = items.whereEvery(['status', 'verified'], activeFilter);
-     */
-    ObservableArray.prototype.whereEvery = function(fields, filter) {
-        return this.where({
-            _: {
-                dependencies: filter.dependencies,
-                callback: (item) => fields.every(field => filter.callback(item[field]))
-            }
-        });
-    };
-
-    ObservableArray.prototype.deepSubscribe = function(callback) {
-        const updatedValue = nextTick(() => callback(this.val()));
-        const $listeners = new WeakMap();
-
-        const bindItem = (item) => {
-            if ($listeners.has(item)) {
-                return;
-            }
-            if (item?.__$isObservableArray) {
-                $listeners.set(item, item.deepSubscribe(updatedValue));
-                return;
-            }
-            if (item?.__$isObservable) {
-                item.subscribe(updatedValue);
-                $listeners.set(item, () => item.unsubscribe(updatedValue));
-            }
-        };
-
-        const unbindItem = (item) => {
-            const unsub = $listeners.get(item);
-            if (unsub) {
-                unsub();
-                $listeners.delete(item);
-            }
-        };
-
-        this.$currentValue.forEach(bindItem);
-        this.subscribe(updatedValue);
-
-        this.subscribe((items, _, operations) => {
-            switch (operations?.action) {
-                case 'push':
-                case 'unshift':
-                    operations.args.forEach(bindItem);
-                    break;
-
-                case 'splice': {
-                    const [start, deleteCount, ...newItems] = operations.args;
-                    operations.result?.forEach(unbindItem);
-                    newItems.forEach(bindItem);
-                    break;
-                }
-
-                case 'remove':
-                    unbindItem(operations.result);
-                    break;
-
-                case 'merge':
-                    operations.args.forEach(bindItem);
-                    break;
-
-                case 'clear':
-                    this.$currentValue.forEach(unbindItem);
-                    break;
-            }
-        });
-
-        return () => {
-            this.$currentValue.forEach(unbindItem);
-        };
-    };
-
-
-    ObservableArray.prototype.sync = function(targetObservable) {
-        if (!targetObservable || !targetObservable.__$isObservableArray) {
-            throw new NativeDocumentError('ObservableArray.sync : target must be an ObservableArray');
+     * element.nd.with({
+     *   highlight() {
+     *     this.$element.style.background = 'yellow';
+     *     return this;
+     *   }
+     * }).highlight().onClick(() => console.log('Clicked'));
+     */
+    NDElement.prototype.with = function(methods) {
+        if (!methods || typeof methods !== 'object') {
+            throw new NativeDocumentError('extend() requires an object of methods');
         }
 
-        targetObservable.set([...this.$currentValue]);
+        for (const name in methods) {
+            const method = methods[name];
 
-        const sync = (currentValue, _, operations) => {
-            if (!operations) {
-                targetObservable.set([...currentValue]);
-                return;
+            if (typeof method !== 'function') {
+                DebugManager$2.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
+                continue;
             }
 
-            const { action, args } = operations;
-            targetObservable[action].apply(targetObservable, args);
-        };
-        this.subscribe(sync);
-
-        return () => this.unsubscribe(sync);
-    };
+            this[name] = method.bind(this);
+        }
 
-    ObservableArray.prototype.clone = function() {
-        return new ObservableArray(this.resolve());
+        return this;
     };
 
     /**
-     * Creates an observable array with reactive array methods.
-     * All mutations trigger updates automatically.
+     * Extends the NDElement prototype with new methods available to all NDElement instances.
+     * Use this to add global methods to all NDElements.
      *
-     * @param {Array} [target=[]] - Initial array value
-     * @param {Object|null} [configs=null] - Configuration options
-     * // @param {boolean} [configs.propagation=true] - Whether to propagate changes to parent observables
-     * // @param {boolean} [configs.deep=false] - Whether to make nested objects observable
-     * @param {boolean} [configs.reset=false] - Whether to store initial value for reset()
-     * @returns {ObservableArray} An observable array with reactive methods
+     * @param {Object} methods - Object containing method definitions to add to prototype
+     * @returns {typeof NDElement} The NDElement constructor
+     * @throws {NativeDocumentError} If methods is not an object or contains non-function values
      * @example
-     * const items = Observable.array([1, 2, 3]);
-     * items.push(4); // Triggers update
-     * items.subscribe((arr) => console.log(arr));
-     */
-    Observable.array = function(target = [], configs = null) {
-        return new ObservableArray(target, configs);
-    };
-
-    /**
-     *
-     * @param {Function} callback
-     * @returns {Function}
+     * NDElement.extend({
+     *   fadeIn() {
+     *     this.$element.style.opacity = '1';
+     *     return this;
+     *   }
+     * });
+     * // Now all NDElements have .fadeIn() method
+     * Div().nd.fadeIn();
      */
-    Observable.batch = function(callback) {
-        const $observer = Observable(0);
-        const batch = function() {
-            if(Validator.isAsyncFunction(callback)) {
-                return (callback(...arguments)).then(() => {
-                    $observer.trigger();
-                }).catch(error => { throw error; });
-            }
-            callback(...arguments);
-            $observer.trigger();
-        };
-        batch.$observer = $observer;
-        return batch;
-    };
-
-    const ObservableObject = function(target, configs) {
-        ObservableItem.call(this, target);
-        this.$observables = {};
-        this.configs = configs;
-
-        this.$load(target);
-
-        for(const name in target) {
-            if(!Object.hasOwn(this, name)) {
-                Object.defineProperty(this, name, {
-                    get: () => this.$observables[name],
-                    set: (value) => this.$observables[name].set(value)
-                });
-            }
+    NDElement.extend = function(methods) {
+        if (!methods || typeof methods !== 'object') {
+            throw new NativeDocumentError('NDElement.extend() requires an object of methods');
         }
 
-    };
-
-    ObservableObject.prototype = Object.create(ObservableItem.prototype);
-
-    Object.defineProperty(ObservableObject, '$value', {
-        get() {
-            return this.val();
-        },
-        set(value) {
-            this.set(value);
+        if (Array.isArray(methods)) {
+            throw new NativeDocumentError('NDElement.extend() requires an object, not an array');
         }
-    });
 
-    ObservableObject.prototype.__$isObservableObject = true;
-    ObservableObject.prototype.__isProxy__ = true;
-
-    ObservableObject.prototype.$load = function(initialValue) {
-        const configs = this.configs;
-        for(const key in initialValue) {
-            const itemValue = initialValue[key];
-            if(Array.isArray(itemValue)) {
-                if(configs?.deep !== false) {
-                    const mappedItemValue = itemValue.map(item => {
-                        if(Validator.isJson(item)) {
-                            return Observable.json(item, configs);
-                        }
-                        if(Validator.isArray(item)) {
-                            return Observable.array(item, configs);
-                        }
-                        return Observable(item, configs);
-                    });
-                    this.$observables[key] = Observable.array(mappedItemValue, configs);
-                    continue;
-                }
-                this.$observables[key] = Observable.array(itemValue, configs);
-                continue;
-            }
-            if(Validator.isObservable(itemValue) || Validator.isProxy(itemValue)) {
-                this.$observables[key] = itemValue;
-                continue;
-            }
-            this.$observables[key] = (typeof itemValue === 'object') ? Observable.object(itemValue, configs) : Observable(itemValue, configs);
-        }
-    };
+        const protectedMethods = new Set([
+            'constructor', 'valueOf', '$element', '$observer',
+            'ref', 'remove', 'cleanup', 'with', 'extend', 'attach',
+            'lifecycle', 'mounted', 'unmounted', 'unmountChildren'
+        ]);
 
-    ObservableObject.prototype.val = function() {
-        const result = {};
-        for(const key in this.$observables) {
-            const dataItem = this.$observables[key];
-            if(Validator.isObservable(dataItem)) {
-                let value = dataItem.val();
-                if(Array.isArray(value)) {
-                    value = value.map(item => {
-                        if(Validator.isObservable(item)) {
-                            return item.val();
-                        }
-                        if(Validator.isProxy(item)) {
-                            return item.$value;
-                        }
-                        return item;
-                    });
-                }
-                result[key] = value;
-            } else if(Validator.isProxy(dataItem)) {
-                result[key] = dataItem.$value;
-            } else {
-                result[key] = dataItem;
+        for (const name in methods) {
+            if (!Object.hasOwn(methods, name)) {
+                continue;
             }
-        }
-        return result;
-    };
-    ObservableObject.prototype.$val = ObservableObject.prototype.val;
-
-    ObservableObject.prototype.get = function(property) {
-        const item = this.$observables[property];
-        if(Validator.isObservable(item)) {
-            return item.val();
-        }
-        if(Validator.isProxy(item)) {
-            return item.$value;
-        }
-        return item;
-    };
-    ObservableObject.prototype.$get = ObservableObject.prototype.get;
 
-    ObservableObject.prototype.set = function(newData) {
-        const data = Validator.isProxy(newData) ? newData.$value : newData;
-        const configs = this.configs;
-
-        for(const key in data) {
-            const targetItem = this.$observables[key];
-            const newValueOrigin = newData[key];
-            const newValue = data[key];
+            const method = methods[name];
 
-            if(Validator.isObservable(targetItem)) {
-                if(!Validator.isArray(newValue)) {
-                    targetItem.set(newValue);
-                    continue;
-                }
-                const firstElementFromOriginalValue = newValueOrigin.at(0);
-                if(Validator.isObservable(firstElementFromOriginalValue) || Validator.isProxy(firstElementFromOriginalValue)) {
-                    const newValues = newValue.map(item => {
-                        if(Validator.isProxy(firstElementFromOriginalValue)) {
-                            return Observable.init(item, configs);
-                        }
-                        return Observable(item, configs);
-                    });
-                    targetItem.set(newValues);
-                    continue;
-                }
-                targetItem.set([...newValue]);
-                continue;
-            }
-            if(Validator.isProxy(targetItem)) {
-                targetItem.update(newValue);
+            if (typeof method !== 'function') {
+                DebugManager$2.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
-            this[key] = newValue;
-        }
-    };
-    ObservableObject.prototype.$set = ObservableObject.prototype.set;
-    ObservableObject.prototype.$updateWith = ObservableObject.prototype.set;
-
-    ObservableObject.prototype.observables = function() {
-        return Object.values(this.$observables);
-    };
-    ObservableObject.prototype.$observables = ObservableObject.prototype.observables;
-
-    ObservableObject.prototype.keys = function() {
-        return Object.keys(this.$observables);
-    };
-    ObservableObject.prototype.$keys = ObservableObject.prototype.keys;
-    ObservableObject.prototype.clone = function() {
-        return Observable.init(this.val(), this.configs);
-    };
-    ObservableObject.prototype.$clone = ObservableObject.prototype.clone;
-    ObservableObject.prototype.reset = function() {
-        for(const key in this.$observables) {
-            this.$observables[key].reset();
-        }
-    };
-    ObservableObject.prototype.originalSubscribe = ObservableObject.prototype.subscribe;
-    ObservableObject.prototype.subscribe = function(callback) {
-        const observables = this.observables();
-        const updatedValue = nextTick(() => this.trigger());
 
-        this.originalSubscribe(callback);
-
-        for (let i = 0, length = observables.length; i < length; i++) {
-            const observable = observables[i];
-            if (observable.__$isObservableArray) {
-                observable.deepSubscribe(updatedValue);
-                continue
+            if (protectedMethods.has(name)) {
+                DebugManager$2.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
-            observable.subscribe(updatedValue);
-        }
-    };
-    ObservableObject.prototype.configs = function() {
-        return this.configs;
-    };
-
-    ObservableObject.prototype.update = ObservableObject.prototype.set;
-
-    Observable.init = function(initialValue, configs = null) {
-        return new ObservableObject(initialValue, configs)
-    };
-
-    /**
-     *
-     * @param {any[]} data
-     * @return Proxy[]
-     */
-    Observable.arrayOfObject = function(data) {
-        return data.map(item => Observable.object(item));
-    };
 
-    /**
-     * Get the value of an observable or an object of observables.
-     * @param {ObservableItem|Object<ObservableItem>} data
-     * @returns {{}|*|null}
-     */
-    Observable.value = function(data) {
-        if(data?.__$isObservableArray) {
-            const result = [];
-            for(let i = 0, length = data.length; i < length; i++) {
-                const item = data.at(i);
-                result.push(Observable.value(item));
+            if (NDElement.prototype[name]) {
+                DebugManager$2.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
-            return result;
-        }
-        if(data?.__$Observable) {
-            return data.val();
-        }
-        if(Validator.isProxy(data)) {
-            return data.$value;
-        }
-        return data;
-    };
 
-    ObservableItem.prototype.resolve = function () {
-        return Observable.value(this);
-    };
-
-    Observable.object = Observable.init;
-    Observable.json = Observable.init;
-
-    /**
-     * Creates a computed observable that automatically updates when its dependencies change.
-     * The callback is re-executed whenever any dependency observable changes.
-     *
-     * @param {Function} callback - Function that returns the computed value
-     * @param {Array<ObservableItem|ObservableChecker|ObservableProxy>|Function} [dependencies=[]] - Array of observables to watch, or batch function
-     * @returns {ObservableItem} A new observable that updates automatically
-     * @example
-     * const firstName = Observable('John');
-     * const lastName = Observable('Doe');
-     * const fullName = Observable.computed(
-     *   () => `${firstName.val()} ${lastName.val()}`,
-     *   [firstName, lastName]
-     * );
-     *
-     * // With batch function
-     * const batch = Observable.batch(() => { ...  });
-     * const computed = Observable.computed(() => { ... }, batch);
-    */
-    Observable.computed = function(callback, dependencies = []) {
-        const initialValue = callback();
-        const observable = new ObservableItem(initialValue);
-        const getValues = () => dependencies.map((item) => item.val());
-        const updatedValue = nextTick(() => observable.set(callback(...getValues())));
-
-        if(Validator.isFunction(dependencies)) {
-            if(!Validator.isObservable(dependencies.$observer)) {
-                throw new NativeDocumentError('Observable.computed : dependencies must be valid batch function');
-            }
-            dependencies.$observer.subscribe(updatedValue);
-            return observable;
+            NDElement.prototype[name] = method;
         }
 
-        dependencies.forEach(dependency => {
-            if(Validator.isProxy(dependency)) {
-                dependency.$observables.forEach((observable) => {
-                    observable.subscribe(updatedValue);
-                });
-                return;
-            }
-            dependency.subscribe(updatedValue);
-        });
+        return NDElement;
+    };
 
-        return observable;
+    const COMMON_NODE_TYPES = {
+        ELEMENT: 1,
+        TEXT: 3,
+        COMMENT: 8,
+        DOCUMENT_FRAGMENT: 11
     };
 
-    const $computed = (fn, dependencies) => Observable.computed(fn, dependencies);
-    const $checker = (obs, fn) => obs.transform(fn);
-
-    //
-    // is... -> ObservableChecker<boolean>
-    //
-
-    ObservableItem.prototype.isEqualTo = function (value) {
-        if (value?.__$Observable) {
-            return $computed((a, b) => a === b, [this, value]);
-        }
-        return $checker(this, x => x === value);
-    };
-
-    ObservableItem.prototype.isNotEqualTo = function (value) {
-        if (value?.__$Observable) {
-            return $computed((a, b) => a !== b, [this, value]);
-        }
-        return $checker(this, x => x !== value);
-    };
+    const VALID_TYPES = [];
+    VALID_TYPES[COMMON_NODE_TYPES.ELEMENT] = true;
+    VALID_TYPES[COMMON_NODE_TYPES.TEXT] = true;
+    VALID_TYPES[COMMON_NODE_TYPES.DOCUMENT_FRAGMENT] = true;
+    VALID_TYPES[COMMON_NODE_TYPES.COMMENT] = true;
 
-    ObservableItem.prototype.isGreaterThan = function (value) {
-        if (value?.__$Observable) {
-            return $computed((a, b) => a > b, [this, value]);
-        }
-        return $checker(this, x => x > value);
-    };
+    const Validator = {
+        isObservable(value) {
+            return  value && (value.__$isObservable || value.__$Observable);
+        },
+        isTemplateBinding(value) {
+            return  value?.__$isTemplateBinding;
+        },
+        isObservableWhenResult(value) {
+            return value && (value.__$isObservableWhen || (typeof value === 'object' && '$target' in value && '$observer' in value));
+        },
+        isArrayObservable(value) {
+            return  value?.__$isObservableArray;
+        },
+        isProxy(value) {
+            return value?.__isProxy__
+        },
+        isObservableOrProxy(value) {
+            return Validator.isObservable(value) || Validator.isProxy(value);
+        },
+        isAnchor(value) {
+            return value?.__Anchor__
+        },
+        isObservableChecker(value) {
+            return value?.__$isObservableChecker || value instanceof ObservableChecker;
+        },
+        isArray(value) {
+            return Array.isArray(value);
+        },
+        isString(value) {
+            return typeof value === 'string';
+        },
+        isNumber(value) {
+            return typeof value === 'number';
+        },
+        isBoolean(value) {
+            return typeof value === 'boolean';
+        },
+        isFunction(value) {
+            return typeof value === 'function';
+        },
+        isAsyncFunction(value) {
+            return typeof value === 'function' && value.constructor.name === 'AsyncFunction';
+        },
+        isObject(value) {
+            return typeof value === 'object' && value !== null;
+        },
+        isJson(value) {
+            return !(typeof value !== 'object' || value === null || Array.isArray(value) || value.constructor.name !== 'Object')
+        },
+        isElement(value) {
+            return value && VALID_TYPES[value.nodeType];
+        },
+        isDOMNode(value) {
+            return VALID_TYPES[value.nodeType];
+        },
+        isFragment(value) {
+            return value?.nodeType === COMMON_NODE_TYPES.DOCUMENT_FRAGMENT;
+        },
+        isStringOrObservable(value) {
+            return this.isString(value) || this.isObservable(value);
+        },
+        isValidChild(child) {
+            return child === null ||
+                this.isElement(child) ||
+                this.isObservable(child) ||
+                this.isNDElement(child) ||
+                ['string', 'number', 'boolean'].includes(typeof child);
+        },
+        isNDElement(child) {
+            return child?.__$isNDElement || child instanceof NDElement;
+        },
+        isValidChildren(children) {
+            if (!Array.isArray(children)) {
+                children = [children];
+            }
 
-    ObservableItem.prototype.isGreaterThanOrEqualTo = function (value) {
-        if (value?.__$Observable) {
-            return $computed((a, b) => a >= b, [this, value]);
-        }
-        return $checker(this, x => x >= value);
-    };
+            const invalid = children.filter(child => !this.isValidChild(child));
+            return invalid.length === 0;
+        },
+        validateChildren(children) {
+            if (!Array.isArray(children)) {
+                children = [children];
+            }
 
-    ObservableItem.prototype.isLessThan = function (value) {
-        if (value?.__$Observable) {
-            return $computed((a, b) => a < b, [this, value]);
-        }
-        return $checker(this, x => x < value);
-    };
+            const invalid = children.filter(child => !this.isValidChild(child));
+            if (invalid.length > 0) {
+                throw new NativeDocumentError(`Invalid children detected: ${invalid.map(i => typeof i).join(', ')}`);
+            }
 
-    ObservableItem.prototype.isLessThanOrEqualTo = function (value) {
-        if (value?.__$Observable) {
-            return $computed((a, b) => a <= b, [this, value]);
-        }
-        return $checker(this, x => x <= value);
-    };
+            return children;
+        },
+        /**
+         * Check if the data contains observables.
+         * @param {Array|Object} data
+         * @returns {boolean}
+         */
+        containsObservables(data) {
+            if(!data) {
+                return false;
+            }
+            return Validator.isObject(data)
+                && Object.values(data).some(value => Validator.isObservable(value));
+        },
+        /**
+         * Check if the data contains an observable reference.
+         * @param {string} data
+         * @returns {boolean}
+         */
+        containsObservableReference(data) {
+            if(!data || typeof data !== 'string') {
+                return false;
+            }
+            return /\{\{#ObItem::\([0-9]+\)\}\}/.test(data);
+        },
+        validateAttributes(attributes) {},
 
-    ObservableItem.prototype.isBetween = function (min, max) {
-        if (min.__$Observable && max.__$Observable) {
-            return $computed((x, a, b) => x >= a && x <= b, [this, min, max]);
-        }
-        if (min.__$Observable) {
-            return $computed((x, a) => x >= a && x <= max, [this, min]);
-        }
-        if (max.__$Observable) {
-            return $computed((x, b) => x >= min && x <= b, [this, max]);
+        validateEventCallback(callback) {
+            if (typeof callback !== 'function') {
+                throw new NativeDocumentError('Event callback must be a function');
+            }
         }
-        return $checker(this, x => x >= min && x <= max);
     };
 
-    ObservableItem.prototype.isNull = function () {
-        return $checker(this, x => x == null);
-    };
+    const cssPropertyAccumulator = function(initialValue = {}) {
+        let data = Validator.isString(initialValue) ? initialValue.split(';').filter(Boolean) : initialValue;
 
-    ObservableItem.prototype.isTruthy = function () {
-        return $checker(this, x => !!x);
+        return {
+            add(key, value) {
+                if(Array.isArray(data)) {
+                    data.push(key+':  '+value);
+                    return;
+                }
+                if(Validator.isObject(key)) {
+                    value = key;
+                    for(const property in value) {
+                        data[property] = value[property];
+                    }
+                    return;
+                }
+                data[key] = value;
+            },
+            value() {
+                if(Array.isArray(data)) {
+                    return data.join(';').concat(';');
+                }
+                return { ...data };
+            },
+        };
     };
 
-    ObservableItem.prototype.isFalsy = function () {
-        return $checker(this, x => !x);
-    };
+    const classPropertyAccumulator = function(initialValue = []) {
+        let data = Validator.isString(initialValue) ? initialValue.split(" ").filter(Boolean) : initialValue;
 
-    ObservableItem.prototype.isStartingWith = function (str) {
-        if (str?.__$Observable) {
-            return $computed((a, b) => String(a).startsWith(b), [this, str]);
-        }
-        return $checker(this, x => String(x).startsWith(str));
+        return {
+            add(key, value = true) {
+                if(Validator.isJson(key)) {
+                    for(const property in key) {
+                        if(key[property]) {
+                            data[property] = key[property];
+                        }
+                    }
+                    return;
+                }
+                if(value != null || key.__$Observable) {
+                    if(Array.isArray(data)) {
+                        data = data.reduce((acc, item) => {
+                            acc[item] = true;
+                            return acc;
+                        }, {});
+                    }
+                    if(key.__$Observable) {
+                        const uniqueId = `obs-${Math.random().toString(36).substr(2, 9)}`;
+                        data[uniqueId] = key;
+                    }
+                    else {
+                        data[key] = value;
+                    }
+                    return;
+                }
+                if(Array.isArray(data)) {
+                    data.push(key);
+                    return;
+                }
+                data[key] = value;
+            },
+            value() {
+                if(Array.isArray(data)) {
+                    return data.join(' ');
+                }
+                return { ...data };
+            },
+        };
     };
 
-    ObservableItem.prototype.isEndingWith = function (str) {
-        if (str?.__$Observable) {
-            return $computed((a, b) => String(a).endsWith(b), [this, str]);
-        }
-        return $checker(this, x => String(x).endsWith(str));
-    };
+    /**
+     * Conditionally shows an element based on an observable condition.
+     * The element is mounted/unmounted from the DOM as the condition changes.
+     *
+     * @param {ObservableItem<boolean>|ObservableChecker<boolean>|ObservableWhen} condition - Observable condition to watch
+     * @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
+     * @returns {AnchorDocumentFragment} Anchor fragment managing the conditional content
+     * @example
+     * const isVisible = Observable(false);
+     * ShowIf(isVisible, Div({}, 'Hello World'));
+     */
+    const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
+        if(!Validator.isObservable(condition)) {
+            if(typeof condition === "boolean") {
+                return condition ? ElementCreator.getChild(child) : null;
+            }
 
-    ObservableItem.prototype.isMatchingPattern = function (regex) {
-        if (regex?.__$Observable) {
-            return $computed((a, b) => new RegExp(b).test(String(a)), [this, regex]);
+            return DebugManager$2.warn('ShowIf', "ShowIf : condition must be an Observable or boolean / "+comment, condition);
         }
-        return $checker(this, x => regex.test(String(x)));
-    };
+        const element = Anchor('Show if : '+(comment || ''));
 
-    ObservableItem.prototype.isEmpty = function () {
-        return $checker(this, x => x == null || x === '' || (Array.isArray(x) && x.length === 0));
-    };
+        let childElement = null;
+        const getChildElement = () => {
+            if(childElement && shouldKeepInCache) {
+                return childElement;
+            }
+            childElement = ElementCreator.getChild(child);
+            if(Validator.isFragment(childElement)) {
+                childElement = Array.from(childElement.childNodes);
+            }
+            return childElement;
+        };
 
-    ObservableItem.prototype.isNotEmpty = function () {
-        return $checker(this, x => x == null || x === '' || (Array.isArray(x) && x.length !== 0));
-    };
+        const currentValue = condition.val();
 
-    ObservableItem.prototype.isIncludes = function (value) {
-        if (value?.__$Observable) {
-            return $computed((a, b) => {
-                if (Array.isArray(a)) return a.includes(b);
-                return String(a).includes(String(b));
-            }, [this, value]);
+        if(currentValue) {
+            element.appendChild(getChildElement());
         }
-        return $checker(this, x => {
-            if (Array.isArray(x)) return x.includes(value);
-            return String(x).includes(String(value));
+
+        condition.subscribe((value) => {
+            if(!!value) {
+                element.appendChild(getChildElement());
+                return;
+            }
+            element.remove();
         });
-    };
 
-    ObservableItem.prototype.isIncludedIn = function (array) {
-        if (array?.__$Observable) {
-            return $computed((a, b) => b.includes(a), [this, array]);
-        }
-        return $checker(this, x => array.includes(x));
+        return element;
     };
 
-    ObservableItem.prototype.isOneOf = ObservableItem.prototype.isIncludedIn;
-
-    ObservableItem.prototype.isHaving = function (key) {
-        if (key?.__$Observable) {
-            return $computed((a, b) => b in Object(a), [this, key]);
-        }
-        return $checker(this, x => key in Object(x));
-    };
+    const EVENTS = [
+      "Click",
+      "DblClick",
+      "MouseDown",
+      "MouseEnter",
+      "MouseLeave",
+      "MouseMove",
+      "MouseOut",
+      "MouseOver",
+      "MouseUp",
+      "Wheel",
+      "KeyDown",
+      "KeyPress",
+      "KeyUp",
+      "Blur",
+      "Change",
+      "Focus",
+      "Input",
+      "Invalid",
+      "Reset",
+      "Search",
+      "Select",
+      "Submit",
+      "Drag",
+      "DragEnd",
+      "DragEnter",
+      "DragLeave",
+      "DragOver",
+      "DragStart",
+      "Drop",
+      "AfterPrint",
+      "BeforePrint",
+      "BeforeUnload",
+      "Error",
+      "HashChange",
+      "Load",
+      "Offline",
+      "Online",
+      "PageHide",
+      "PageShow",
+      "Resize",
+      "Scroll",
+      "Unload",
+      "Abort",
+      "CanPlay",
+      "CanPlayThrough",
+      "DurationChange",
+      "Emptied",
+      "Ended",
+      "LoadedData",
+      "LoadedMetadata",
+      "LoadStart",
+      "Pause",
+      "Play",
+      "Playing",
+      "Progress",
+      "RateChange",
+      "Seeked",
+      "Seeking",
+      "Stalled",
+      "Suspend",
+      "TimeUpdate",
+      "VolumeChange",
+      "Waiting",
 
-    //
-    // to... -> ObservableChecker<any>
-    //
+      "TouchCancel",
+      "TouchEnd",
+      "TouchMove",
+      "TouchStart",
+      "AnimationEnd",
+      "AnimationIteration",
+      "AnimationStart",
+      "TransitionEnd",
+      "Copy",
+      "Cut",
+      "Paste",
+      "FocusIn",
+      "FocusOut",
+      "ContextMenu"
+    ];
 
-    ObservableItem.prototype.toUpperCase = function () {
-        return $checker(this, x => String(x).toUpperCase());
-    };
+    const EVENTS_WITH_PREVENT = [
+      "Click",
+      "DblClick",
+      "MouseDown",
+      "MouseUp",
+      "Wheel",
+      "KeyDown",
+      "KeyPress",
+      "Invalid",
+      "Reset",
+      "Submit",
+      "DragOver",
+      "Drop",
+      "BeforeUnload",
+      "TouchCancel",
+      "TouchEnd",
+      "TouchMove",
+      "TouchStart",
+      "Copy",
+      "Cut",
+      "Paste",
+      "ContextMenu"
+    ];
 
-    ObservableItem.prototype.toLowerCase = function () {
-        return $checker(this, x => String(x).toLowerCase());
-    };
+    const EVENTS_WITH_STOP =  [
+      "Click",
+      "DblClick",
+      "MouseDown",
+      "MouseMove",
+      "MouseOut",
+      "MouseOver",
+      "MouseUp",
+      "Wheel",
+      "KeyDown",
+      "KeyPress",
+      "KeyUp",
+      "Change",
+      "Input",
+      "Invalid",
+      "Reset",
+      "Search",
+      "Select",
+      "Submit",
+      "Drag",
+      "DragEnd",
+      "DragEnter",
+      "DragLeave",
+      "DragOver",
+      "DragStart",
+      "Drop",
+      "BeforeUnload",
+      "HashChange",
+      "TouchCancel",
+      "TouchEnd",
+      "TouchMove",
+      "TouchStart",
+      "AnimationEnd",
+      "AnimationIteration",
+      "AnimationStart",
+      "TransitionEnd",
+      "Copy",
+      "Cut",
+      "Paste",
+      "FocusIn",
+      "FocusOut",
+      "ContextMenu"
+    ];
 
-    ObservableItem.prototype.toTrimmed = function () {
-        return $checker(this, x => String(x).trim());
+    const property = {
+        configurable: true,
+        get() {
+            return new NDElement(this);
+        }
     };
 
-    ObservableItem.prototype.toBoolean = function () {
-        return $checker(this, x => !!x);
-    };
+    Object.defineProperty(HTMLElement.prototype, 'nd', property);
 
-    ObservableItem.prototype.toLiteral = function (template, placeholder = '${v}') {
-        return $checker(this, x => template.replace(placeholder, x));
-    };
+    Object.defineProperty(DocumentFragment.prototype, 'nd', property);
 
-    ObservableItem.prototype.toFormatted = ObservableItem.prototype.toLiteral;
+    Object.defineProperty(NDElement.prototype, 'nd', {
+        configurable: true,
+        get: function() {
+            return this;
+        }
+    });
 
-    ObservableItem.prototype.toProperty = function (key) {
-        const keys = key.split('.');
-        return $checker(this, x => {
-            let value = x;
-            for (const k of keys) {
-                if (value == null) return undefined;
-                value = value[k];
-            }
-            return value;
-        });
-    };
 
-    ObservableItem.prototype.toLength = function () {
-        return $checker(this, x => (x == null ? 0 : x.length));
-    };
 
-    ObservableItem.prototype.toClamped = function (min, max) {
-        if (min.__$Observable && max.__$Observable) {
-            return $computed((x, a, b) => Math.min(Math.max(x, a), b), [this, min, max]);
-        }
-        if (min.__$Observable) {
-            return $computed((x, a) => Math.min(Math.max(x, a), max), [this, min]);
-        }
-        if (max.__$Observable) {
-            return $computed((x, b) => Math.min(Math.max(x, min), b), [this, max]);
-        }
-        return $checker(this, x => Math.min(Math.max(x, min), max));
-    };
+    // ----------------------------------------------------------------
+    // Events helpers
+    // ----------------------------------------------------------------
+    EVENTS.forEach(eventSourceName => {
+        const eventName = eventSourceName.toLowerCase();
+        NDElement.prototype['on'+eventSourceName] = function(callback = null) {
+            this.$element.addEventListener(eventName, callback);
+            return this;
+        };
+    });
 
-    ObservableItem.prototype.toPercent = function (total) {
-        if (total?.__$Observable) {
-            return $computed((a, b) => (b === 0 ? 0 : (a / b) * 100), [this, total]);
-        }
-        return $checker(this, x => (total === 0 ? 0 : (x / total) * 100));
-    };
+    EVENTS_WITH_STOP.forEach(eventSourceName => {
+        const eventName = eventSourceName.toLowerCase();
+        NDElement.prototype['onStop'+eventSourceName] = function(callback = null) {
+            _stop(this.$element, eventName, callback);
+            return this;
+        };
+        NDElement.prototype['onPreventStop'+eventSourceName] = function(callback = null) {
+            _preventStop(this.$element, eventName, callback);
+            return this;
+        };
+    });
 
-    const StoreFactory = function() {
+    EVENTS_WITH_PREVENT.forEach(eventSourceName => {
+        const eventName = eventSourceName.toLowerCase();
+        NDElement.prototype['onPrevent'+eventSourceName] = function(callback = null) {
+            _prevent(this.$element, eventName, callback);
+            return this;
+        };
+    });
 
-        const $stores = new Map();
-        const $followersCache = new Map();
+    NDElement.prototype.on = function(name, callback, options) {
+        this.$element.addEventListener(name.toLowerCase(), callback, options);
+        return this;
+    };
 
-        /**
-         * Internal helper — retrieves a store entry or throws if not found.
-         */
-        const $getStoreOrThrow = (method, name) => {
-            const item = $stores.get(name);
-            if (!item) {
-                DebugManager$1.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
-                throw new NativeDocumentError(
-                    `Store.${method}('${name}') : store not found.`
-                );
-            }
-            return item;
+    const _prevent = function(element, eventName, callback) {
+        const handler = (event) => {
+            event.preventDefault();
+            callback && callback.call(element, event);
         };
+        element.addEventListener(eventName, handler);
+        return this;
+    };
 
-        /**
-         * Internal helper — blocks write operations on a read-only observer.
-         */
-        const $applyReadOnly = (observer, name, context) => {
-            const readOnlyError = (method) => () => {
-                DebugManager$1.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
-                throw new NativeDocumentError(
-                    `Store.${context}('${name}') is read-only.`
-                );
-            };
-            observer.set    = readOnlyError('set');
-            observer.toggle = readOnlyError('toggle');
-            observer.reset  = readOnlyError('reset');
+    const _stop = function(element, eventName, callback) {
+        const handler = (event) => {
+            event.stopPropagation();
+            callback && callback.call(element, event);
         };
+        element.addEventListener(eventName, handler);
+        return this;
+    };
 
-        const $createObservable = (value, options = {}) => {
-            if(Array.isArray(value)) {
-                return Observable.array(value, options);
-            }
-            if(typeof value === 'object') {
-                return Observable.object(value, options);
-            }
-            return Observable(value, options);
+    const _preventStop = function(element, eventName, callback) {
+        const handler = (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            callback && callback.call(element, event);
         };
+        element.addEventListener(eventName, handler);
+        return this;
+    };
 
-        const $api = {
-            /**
-             * Create a new state and return the observer.
-             * Throws if a store with the same name already exists.
-             *
-             * @param {string} name
-             * @param {*} value
-             * @returns {ObservableItem}
-             */
-            create(name, value) {
-                if ($stores.has(name)) {
-                    DebugManager$1.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
-                    throw new NativeDocumentError(
-                        `Store.create('${name}') : a store with this name already exists.`
-                    );
-                }
-                const observer = $createObservable(value);
-                $stores.set(name, { observer, subscribers: new Set(), resettable: false, composed: false });
-                return observer;
-            },
-
-            /**
-             * Create a new resettable state and return the observer.
-             * The store can be reset to its initial value via Store.reset(name).
-             * Throws if a store with the same name already exists.
-             *
-             * @param {string} name
-             * @param {*} value
-             * @returns {ObservableItem}
-             */
-            createResettable(name, value) {
-                if ($stores.has(name)) {
-                    DebugManager$1.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
-                    throw new NativeDocumentError(
-                        `Store.createResettable('${name}') : a store with this name already exists.`
-                    );
-                }
-                const observer = $createObservable(value, { reset: true });
-                $stores.set(name, { observer, subscribers: new Set(), resettable: true, composed: false });
-                return observer;
-            },
 
-            /**
-             * Create a computed store derived from other stores.
-             * The value is automatically recalculated when any dependency changes.
-             * This store is read-only — Store.use() and Store.set() will throw.
-             * Throws if a store with the same name already exists.
-             *
-             * @param {string} name
-             * @param {() => *} computation - Function that returns the computed value
-             * @param {string[]} dependencies - Names of the stores to watch
-             * @returns {ObservableItem}
-             *
-             * @example
-             * Store.create('products', [{ id: 1, price: 10 }]);
-             * Store.create('cart', [{ productId: 1, quantity: 2 }]);
-             *
-             * Store.createComposed('total', () => {
-             *     const products = Store.get('products').val();
-             *     const cart     = Store.get('cart').val();
-             *     return cart.reduce((sum, item) => {
-             *         const product = products.find(p => p.id === item.productId);
-             *         return sum + (product.price * item.quantity);
-             *     }, 0);
-             * }, ['products', 'cart']);
-             */
-            createComposed(name, computation, dependencies) {
-                if ($stores.has(name)) {
-                    DebugManager$1.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
-                    throw new NativeDocumentError(
-                        `Store.createComposed('${name}') : a store with this name already exists.`
-                    );
-                }
-                if (typeof computation !== 'function') {
-                    throw new NativeDocumentError(
-                        `Store.createComposed('${name}') : computation must be a function.`
-                    );
-                }
-                if (!Array.isArray(dependencies) || dependencies.length === 0) {
-                    throw new NativeDocumentError(
-                        `Store.createComposed('${name}') : dependencies must be a non-empty array of store names.`
-                    );
-                }
 
-                // Resolve dependency observers
-                const depObservers = dependencies.map(depName => {
-                    if(typeof depName !== 'string') {
-                        return depName;
-                    }
-                    const depItem = $stores.get(depName);
-                    if (!depItem) {
-                        DebugManager$1.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
-                        throw new NativeDocumentError(
-                            `Store.createComposed('${name}') : dependency store '${depName}' not found.`
-                        );
-                    }
-                    return depItem.observer;
-                });
-
-                // Create computed observable from dependency observers
-                const observer = Observable.computed(computation, depObservers);
-
-                $stores.set(name, { observer, subscribers: new Set(), resettable: false, composed: true });
-                return observer;
-            },
-
-            /**
-             * Returns true if a store with the given name exists.
-             *
-             * @param {string} name
-             * @returns {boolean}
-             */
-            has(name) {
-                return $stores.has(name);
-            },
-
-            /**
-             * Resets a resettable store to its initial value and notifies all subscribers.
-             * Throws if the store was not created with createResettable().
-             *
-             * @param {string} name
-             */
-            reset(name) {
-                const item = $getStoreOrThrow('reset', name);
-                if (item.composed) {
-                    DebugManager$1.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
-                    throw new NativeDocumentError(
-                        `Store.reset('${name}') : composed stores cannot be reset.`
-                    );
-                }
-                if (!item.resettable) {
-                    DebugManager$1.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
-                    throw new NativeDocumentError(
-                        `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`
-                    );
-                }
-                item.observer.reset();
-            },
-
-            /**
-             * Returns a two-way synchronized follower of the store.
-             * Writing to the follower propagates the value back to the store and all its subscribers.
-             * Throws if called on a composed store — use Store.follow() instead.
-             * Call follower.destroy() or follower.dispose() to unsubscribe.
-             *
-             * @param {string} name
-             * @returns {ObservableItem}
-             */
-            use(name) {
-                const item = $getStoreOrThrow('use', name);
-
-                if (item.composed) {
-                    DebugManager$1.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
-                    throw new NativeDocumentError(
-                        `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`
-                    );
-                }
-
-                const { observer: originalObserver, subscribers } = item;
-                const observerFollower = $createObservable(originalObserver.val());
-
-                const onStoreChange    = value => observerFollower.set(value);
-                const onFollowerChange = value => originalObserver.set(value);
-
-                originalObserver.subscribe(onStoreChange);
-                observerFollower.subscribe(onFollowerChange);
-
-                observerFollower.destroy = () => {
-                    originalObserver.unsubscribe(onStoreChange);
-                    observerFollower.unsubscribe(onFollowerChange);
-                    subscribers.delete(observerFollower);
-                    observerFollower.cleanup();
-                };
-                observerFollower.dispose = observerFollower.destroy;
-
-                subscribers.add(observerFollower);
-                return observerFollower;
-            },
-
-            /**
-             * Returns a read-only follower of the store.
-             * The follower reflects store changes but cannot write back to the store.
-             * Any attempt to call .set(), .toggle() or .reset() will throw.
-             * Call follower.destroy() or follower.dispose() to unsubscribe.
-             *
-             * @param {string} name
-             * @returns {ObservableItem}
-             */
-            follow(name) {
-                const { observer: originalObserver, subscribers } = $getStoreOrThrow('follow', name);
-                const observerFollower = $createObservable(originalObserver.val());
-
-                const onStoreChange = value => observerFollower.set(value);
-                originalObserver.subscribe(onStoreChange);
-
-                $applyReadOnly(observerFollower, name, 'follow');
-
-                observerFollower.destroy = () => {
-                    originalObserver.unsubscribe(onStoreChange);
-                    subscribers.delete(observerFollower);
-                    observerFollower.cleanup();
-                };
-                observerFollower.dispose = observerFollower.destroy;
-
-                subscribers.add(observerFollower);
-                return observerFollower;
-            },
-
-            /**
-             * Returns the raw store observer directly (no follower, no cleanup contract).
-             * Use this for direct read access when you don't need to unsubscribe.
-             * WARNING : mutations on this observer impact all subscribers immediately.
-             *
-             * @param {string} name
-             * @returns {ObservableItem|null}
-             */
-            get(name) {
-                const item = $stores.get(name);
-                if (!item) {
-                    DebugManager$1.warn('Store', `Store.get('${name}') : store not found.`);
-                    return null;
-                }
-                return item.observer;
-            },
-
-            /**
-             * @param {string} name
-             * @returns {{ observer: ObservableItem, subscribers: Set } | null}
-             */
-            getWithSubscribers(name) {
-                return $stores.get(name) ?? null;
-            },
-
-            /**
-             * Destroys a store : cleans up the observer, destroys all followers, and removes the entry.
-             *
-             * @param {string} name
-             */
-            delete(name) {
-                const item = $stores.get(name);
-                if (!item) {
-                    DebugManager$1.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
-                    return;
-                }
-                item.subscribers.forEach(follower => follower.destroy());
-                item.subscribers.clear();
-                item.observer.cleanup();
-                $stores.delete(name);
-            },
-            /**
-             * Creates an isolated store group with its own state namespace.
-             * Each group is a fully independent StoreFactory instance —
-             * no key conflicts, no shared state with the parent store.
-             *
-             * @param {string | ((group: ReturnType<typeof StoreFactory>) => void)} name - Group name for debugging, or setup callback if no name is provided
-             * @param {((group: ReturnType<typeof StoreFactory>) => void)} [callback] - Setup function receiving the isolated store instance
-             * @returns {ReturnType<typeof StoreFactory>}
-             *
-             * @example
-             * // With name (recommended)
-             * const EventStore = Store.group('events', (group) => {
-             *     group.create('catalog', []);
-             *     group.create('filters', { category: null, date: null });
-             *     group.createResettable('selected', null);
-             *     group.createComposed('filtered', () => {
-             *         const catalog = EventStore.get('catalog').val();
-             *         const filters = EventStore.get('filters').val();
-             *         return catalog.filter(event => {
-             *             if (filters.category && event.category !== filters.category) return false;
-             *             return true;
-             *         });
-             *     }, ['catalog', 'filters']);
-             * });
-             *
-             * // Without name
-             * const CartStore = Store.group((group) => {
-             *     group.create('items', []);
-             * });
-             *
-             * // Usage
-             * EventStore.use('catalog'); // two-way follower
-             * EventStore.follow('filtered'); // read-only follower
-             * EventStore.get('filters'); // raw observable
-             *
-             * // Cross-group composed
-             * const OrderStore = Store.group('orders', (group) => {
-             *     group.createComposed('summary', () => {
-             *         const items = CartStore.get('items').val();
-             *         const events = EventStore.get('catalog').val();
-             *         return { items, events };
-             *     }, [CartStore.get('items'), EventStore.get('catalog')]);
-             * });
-             */
-            group(name, callback) {
-                if (typeof name === 'function') {
-                    callback = name;
-                    name = 'anonymous';
-                }
-                const store = StoreFactory();
-                callback && callback(store);
-                return store;
-            },
-            createPersistent(name, value, localstorage_key) {
-                localstorage_key = localstorage_key || name;
-                const observer = this.create(name, $getFromStorage(localstorage_key, value));
-                const saver = $saveToStorage(value);
-
-                observer.subscribe((val) => saver(localstorage_key, val));
-                return observer;
-            },
-            createPersistentResettable(name, value, localstorage_key) {
-                localstorage_key = localstorage_key || name;
-                const observer = this.createResettable(name, $getFromStorage(localstorage_key, value));
-                const saver = $saveToStorage(value);
-                observer.subscribe((val) => saver(localstorage_key, val));
-
-                const originalReset = observer.reset.bind(observer);
-                observer.reset = () => {
-                    LocalStorage.remove(localstorage_key);
-                    originalReset();
-                };
-
-                return observer;
-            }
-        };
-
-
-        return new Proxy($api, {
-            get(target, prop) {
-                if (typeof prop === 'symbol' || prop.startsWith('$') || prop in target) {
-                    return target[prop];
-                }
-                if (target.has(prop)) {
-                    if ($followersCache.has(prop)) {
-                        return $followersCache.get(prop);
-                    }
-                    const follower = target.follow(prop);
-                    $followersCache.set(prop, follower);
-                    return follower;
-                }
-                return undefined;
-            },
-            set(target, prop, value) {
-                DebugManager$1.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
-                throw new NativeDocumentError(`Store structure is immutable. Use .set() on the observable.`);
-            },
-            deleteProperty(target, prop) {
-                throw new NativeDocumentError(`Store keys cannot be deleted.`);
-            }
-        });
-    };
-
-    const Store = StoreFactory();
-
-    Store.create('locale', navigator.language.split('-')[0] || 'en');
-
-    function oneChildAnchorOverwriting(anchor, parent) {
-
-        anchor.remove = () => {
-            anchor.append.apply(anchor, parent.childNodes);
-        };
-        anchor.getParent = () => parent;
-
-        anchor.appendChild = (child) => {
-            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
-            parent.appendChild(child);
-        };
-
-        anchor.appendChildRaw = parent.appendChild.bind(parent);
-        anchor.append = anchor.appendChild;
-        anchor.appendRaw = anchor.appendChildRaw;
-
-        anchor.insertAtStart = (child) => {
-            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
-            parent.firstChild ? parent.insertBefore(child, parent.firstChild) : parent.appendChild(child);
-        };
-        anchor.insertAtStartRaw = (child) => {
-            parent.firstChild ? parent.insertBefore(child, parent.firstChild) : parent.appendChild(child);
-        };
-
-        anchor.appendElement = anchor.appendChild;
-
-        anchor.removeChildren = () => {
-            parent.textContent = '';
-        };
-
-        anchor.replaceContent = function(content) {
-            const child = Validator.isElement(content) ? content : ElementCreator.getChild(content);
-            parent.replaceChildren(child);
-        };
-
-        anchor.replaceContentRaw = function(child) {
-            parent.replaceChildren(child);
-        };
-        anchor.setContent = anchor.replaceContent;
-
-        anchor.insertBefore = (child, anchor) => {
-            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
-            parent.insertBefore(child, anchor);
-        };
-        anchor.insertBeforeRaw = (child, anchor) => {
-            parent.insertBefore(child, anchor);
-        };
-
-        anchor.appendChildBefore = anchor.insertBefore;
-        anchor.appendChildBeforeRaw = anchor.insertBeforeRaw;
-
-        anchor.clear = anchor.remove;
-        anchor.detach = anchor.remove;
-
-        anchor.replaceChildren = function() {
-            parent.replaceChildren(...arguments);
-        };
-
-        anchor.getByIndex = (index) => {
-            return parent.childNodes[index];
-        };
-    }
-
-    function Anchor(name, isUniqueChild = false) {
-        const anchorFragment = new AnchorWithSentinel(name);
-
-        anchorFragment.onConnectedOnce((parent) => {
-            if(isUniqueChild) {
-                oneChildAnchorOverwriting(anchorFragment, parent);
-            }
-        });
-
-        anchorFragment.__Anchor__ = true;
-
-        const anchorStart = anchorFragment.$start;
-        const anchorEnd = anchorFragment.$end;
-
-        anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
-        anchorFragment.nativeAppendChild = anchorFragment.appendChild;
-        anchorFragment.nativeAppend = anchorFragment.append;
-
-        const isParentUniqueChild = isUniqueChild
-            ? () => true: (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
-
-        const insertBefore = (parent, child, target) => {
-            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
-            insertBeforeRaw(parent, childElement, target);
-        };
-
-        const insertBeforeRaw = (parent, child, target) => {
-            if(parent === anchorFragment) {
-                parent.nativeInsertBefore(child, target);
-                return;
-            }
-            if(isParentUniqueChild(parent) && target === anchorEnd) {
-                parent.append(child,  target);
-                return;
-            }
-            parent.insertBefore(child, target);
-        };
-
-        anchorFragment.appendElement = function(child) {
-            const parentNode = anchorStart.parentNode;
-            if(parentNode === anchorFragment) {
-                parentNode.nativeInsertBefore(child, anchorEnd);
-                return;
-            }
-            parentNode.insertBefore(child, anchorEnd);
-        };
-
-        anchorFragment.appendChild = function(child, before = null) {
-            const parent = anchorEnd.parentNode;
-            if(!parent) {
-                DebugManager.error('Anchor', 'Anchor : parent not found', child);
-                return;
-            }
-            before = before ?? anchorEnd;
-            insertBefore(parent, child, before);
-        };
-
-        anchorFragment.appendChildRaw = function(child, before = null) {
-            const parent = anchorEnd.parentNode;
-            if(!parent) {
-                DebugManager.error('Anchor', 'Anchor : parent not found', child);
-                return;
-            }
-            before = before ?? anchorEnd;
-            insertBeforeRaw(parent, child, before);
-        };
-
-        anchorFragment.getParent = () => anchorEnd.parentNode;
-        anchorFragment.append = anchorFragment.appendChild;
-        anchorFragment.appendRaw = anchorFragment.appendChildRaw;
-
-        anchorFragment.insertAtStart = function(child) {
-            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
-            anchorFragment.insertAtStartRaw(child);
-        };
-
-        anchorFragment.insertAtStartRaw = function(child) {
-            const parentNode = anchorStart.parentNode;
-            if(parentNode === anchorFragment) {
-                parentNode.nativeInsertBefore(child, anchorStart);
-                return;
-            }
-            parentNode.insertBefore(child, anchorStart);
-        };
-
-        anchorFragment.removeChildren = function() {
-            const parent = anchorEnd.parentNode;
-            if(parent === anchorFragment) {
-                return;
-            }
-            if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, anchorEnd);
-                return;
-            }
-
-            let itemToRemove = anchorStart.nextSibling, tempItem;
-            while(itemToRemove && itemToRemove !== anchorEnd) {
-                tempItem = itemToRemove.nextSibling;
-                itemToRemove.remove();
-                itemToRemove =  tempItem;
-            }
-        };
-
-        anchorFragment.remove = function() {
-            const parent = anchorEnd.parentNode;
-            if(parent === anchorFragment) {
-                return;
-            }
-            if(isParentUniqueChild(parent)) {
-                anchorFragment.nativeAppend.apply(anchorFragment, parent.childNodes);
-                parent.replaceChildren(anchorStart, anchorEnd);
-                return;
-            }
-            let itemToRemove = anchorStart.nextSibling, tempItem;
-            while(itemToRemove && itemToRemove !== anchorEnd) {
-                tempItem = itemToRemove.nextSibling;
-                anchorFragment.nativeAppend(itemToRemove);
-                itemToRemove = tempItem;
-            }
-        };
-
-        anchorFragment.removeWithAnchors = function() {
-            anchorFragment.removeChildren();
-            anchorStart.remove();
-            anchorEnd.remove();
-        };
-        anchorFragment.delete = anchorFragment.removeWithAnchors;
-
-        anchorFragment.replaceContent = function(child) {
-            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
-            anchorFragment.replaceContentRaw(childElement);
-        };
-
-        anchorFragment.replaceContentRaw = function(child) {
-            const parent = anchorEnd.parentNode;
-            if(!parent) {
-                return;
-            }
-            if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, child, anchorEnd);
-                return;
-            }
-            anchorFragment.removeChildren();
-            parent.insertBefore(child, anchorEnd);
-        };
-
-        anchorFragment.setContent = anchorFragment.replaceContent;
-        anchorFragment.setContentRaw = anchorFragment.replaceContentRaw;
-
-        anchorFragment.insertBefore = anchorFragment.appendChild;
-        anchorFragment.insertBeforeRaw = anchorFragment.appendChildRaw;
-
-        anchorFragment.endElement = function() {
-            return anchorEnd;
-        };
-
-        anchorFragment.startElement = function() {
-            return anchorStart;
-        };
-
-        anchorFragment.restore = function() {
-            anchorFragment.appendChild(anchorFragment);
-        };
-
-        anchorFragment.clear = anchorFragment.remove;
-        anchorFragment.detach = anchorFragment.remove;
-
-        anchorFragment.getByIndex = function(index) {
-            let currentNode = anchorStart;
-            for(let i = 0; i <= index; i++) {
-                if(!currentNode.nextSibling) {
-                    return null;
-                }
-                currentNode = currentNode.nextSibling;
-            }
-            return currentNode !== anchorStart ? currentNode : null;
-        };
-
-        return anchorFragment;
-    }
-    DocumentFragment.prototype.setAttribute = () => {};
-
-    function NDElement(element) {
-        this.$element = element;
-        this.$attachements = null;
-    }
-
-    NDElement.prototype.__$isNDElement = true;
-
-    NDElement.prototype.ghostDom = function(element) {
-        if(!this.$attachements) {
-            this.$attachements = document.createDocumentFragment();
-        }
-        this.$attachements.appendChild(ElementCreator.getChild(element));
-        return this;
-    };
-
-    NDElement.prototype.valueOf = function() {
-        return this.$element;
-    };
-
-    NDElement.prototype.ref = function(target, name) {
-        target[name] = this.$element;
-        return this;
-    };
-
-    NDElement.prototype.refSelf = function(target, name) {
-        target[name] = this;
-        // TODO: @DIM to check
-        // target[name] = new NDElement(this.$element);
-        return this;
-    };
-
-    NDElement.prototype.unmountChildren = function() {
-        let element = this.$element;
-        for(let i = 0, length = element.children.length; i < length; i++) {
-            let elementChildren = element.children[i];
-            if(!elementChildren.$ndProx) {
-                elementChildren.nd?.remove();
-            }
-            elementChildren = null;
-        }
-        element = null;
-        return this;
-    };
-
-    NDElement.prototype.remove = function() {
-        let element = this.$element;
-        element.nd.unmountChildren();
-        element.$ndProx = null;
-
-        $lifeCycleObservers.delete(element);
-
-        element = null;
-        return this;
-    };
-
-    const $lifeCycleObservers = new WeakMap();
-    NDElement.prototype.lifecycle = function(states) {
-        const el = this.$element;
-        if (!$lifeCycleObservers.has(el)) {
-            $lifeCycleObservers.set(el, DocumentObserver.watch(el));
-        }
-        const observer = $lifeCycleObservers.get(el);
-
-        if(states.mounted) {
-            this.$element.setAttribute('data--nd-mounted', '1');
-            observer.mounted(states.mounted);
-        }
-        if(states.unmounted) {
-            this.$element.setAttribute('data--nd-unmounted', '1');
-            observer.unmounted(states.unmounted);
-        }
-        return this;
-    };
-
-    NDElement.prototype.mounted = function(callback) {
-        return this.lifecycle({ mounted: callback });
-    };
-
-    NDElement.prototype.unmounted = function(callback) {
-        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;
-    };
-
-    NDElement.prototype.node = NDElement.prototype.htmlElement;
-
-    NDElement.prototype.shadow = function(mode, style = null) {
-        const $element = this.$element;
-        const children = Array.from($element.childNodes);
-        const shadowRoot = $element.attachShadow({ mode });
-        if(style) {
-            const styleNode = document.createElement("style");
-            styleNode.textContent = style;
-            shadowRoot.appendChild(styleNode);
-        }
-        $element.append = shadowRoot.append.bind(shadowRoot);
-        $element.appendChild = shadowRoot.appendChild.bind(shadowRoot);
-        shadowRoot.append(...children);
-
-        return this;
-    };
-
-    NDElement.prototype.openShadow = function(style = null) {
-        return this.shadow('open', style);
-    };
-
-    NDElement.prototype.closedShadow = function(style = null) {
-        return this.shadow('closed', style);
-    };
-
-    /**
-     * Extends the current NDElement instance with custom methods.
-     * Methods are bound to the instance and available for chaining.
-     *
-     * @param {Object} methods - Object containing method definitions
-     * @returns {this} The NDElement instance with added methods for chaining
-     * @example
-     * element.nd.with({
-     *   highlight() {
-     *     this.$element.style.background = 'yellow';
-     *     return this;
-     *   }
-     * }).highlight().onClick(() => console.log('Clicked'));
-     */
-    NDElement.prototype.with = function(methods) {
-        if (!methods || typeof methods !== 'object') {
-            throw new NativeDocumentError('extend() requires an object of methods');
-        }
-
-        for (const name in methods) {
-            const method = methods[name];
-
-            if (typeof method !== 'function') {
-                DebugManager$1.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
-                continue;
-            }
-
-            this[name] = method.bind(this);
-        }
-
-        return this;
-    };
-
-    /**
-     * Extends the NDElement prototype with new methods available to all NDElement instances.
-     * Use this to add global methods to all NDElements.
-     *
-     * @param {Object} methods - Object containing method definitions to add to prototype
-     * @returns {typeof NDElement} The NDElement constructor
-     * @throws {NativeDocumentError} If methods is not an object or contains non-function values
-     * @example
-     * NDElement.extend({
-     *   fadeIn() {
-     *     this.$element.style.opacity = '1';
-     *     return this;
-     *   }
-     * });
-     * // Now all NDElements have .fadeIn() method
-     * Div().nd.fadeIn();
-     */
-    NDElement.extend = function(methods) {
-        if (!methods || typeof methods !== 'object') {
-            throw new NativeDocumentError('NDElement.extend() requires an object of methods');
-        }
-
-        if (Array.isArray(methods)) {
-            throw new NativeDocumentError('NDElement.extend() requires an object, not an array');
-        }
-
-        const protectedMethods = new Set([
-            'constructor', 'valueOf', '$element', '$observer',
-            'ref', 'remove', 'cleanup', 'with', 'extend', 'attach',
-            'lifecycle', 'mounted', 'unmounted', 'unmountChildren'
-        ]);
-
-        for (const name in methods) {
-            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`);
-                continue;
-            }
-
-            if (protectedMethods.has(name)) {
-                DebugManager$1.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}"`);
-            }
-
-            NDElement.prototype[name] = method;
-        }
-
-        return NDElement;
-    };
-
-    const COMMON_NODE_TYPES = {
-        ELEMENT: 1,
-        TEXT: 3,
-        COMMENT: 8,
-        DOCUMENT_FRAGMENT: 11
-    };
-
-    const VALID_TYPES = [];
-    VALID_TYPES[COMMON_NODE_TYPES.ELEMENT] = true;
-    VALID_TYPES[COMMON_NODE_TYPES.TEXT] = true;
-    VALID_TYPES[COMMON_NODE_TYPES.DOCUMENT_FRAGMENT] = true;
-    VALID_TYPES[COMMON_NODE_TYPES.COMMENT] = true;
-
-    const Validator = {
-        isObservable(value) {
-            return  value && (value.__$isObservable || value.__$Observable);
-        },
-        isTemplateBinding(value) {
-            return  value?.__$isTemplateBinding;
-        },
-        isObservableWhenResult(value) {
-            return value && (value.__$isObservableWhen || (typeof value === 'object' && '$target' in value && '$observer' in value));
-        },
-        isArrayObservable(value) {
-            return  value?.__$isObservableArray;
-        },
-        isProxy(value) {
-            return value?.__isProxy__
-        },
-        isObservableOrProxy(value) {
-            return Validator.isObservable(value) || Validator.isProxy(value);
-        },
-        isAnchor(value) {
-            return value?.__Anchor__
-        },
-        isObservableChecker(value) {
-            return value?.__$isObservableChecker || value instanceof ObservableChecker;
-        },
-        isArray(value) {
-            return Array.isArray(value);
-        },
-        isString(value) {
-            return typeof value === 'string';
-        },
-        isNumber(value) {
-            return typeof value === 'number';
-        },
-        isBoolean(value) {
-            return typeof value === 'boolean';
-        },
-        isFunction(value) {
-            return typeof value === 'function';
-        },
-        isAsyncFunction(value) {
-            return typeof value === 'function' && value.constructor.name === 'AsyncFunction';
-        },
-        isObject(value) {
-            return typeof value === 'object' && value !== null;
-        },
-        isJson(value) {
-            return !(typeof value !== 'object' || value === null || Array.isArray(value) || value.constructor.name !== 'Object')
-        },
-        isElement(value) {
-            return value && VALID_TYPES[value.nodeType];
-        },
-        isDOMNode(value) {
-            return VALID_TYPES[value.nodeType];
-        },
-        isFragment(value) {
-            return value?.nodeType === COMMON_NODE_TYPES.DOCUMENT_FRAGMENT;
-        },
-        isStringOrObservable(value) {
-            return this.isString(value) || this.isObservable(value);
-        },
-        isValidChild(child) {
-            return child === null ||
-                this.isElement(child) ||
-                this.isObservable(child) ||
-                this.isNDElement(child) ||
-                ['string', 'number', 'boolean'].includes(typeof child);
-        },
-        isNDElement(child) {
-            return child?.__$isNDElement || child instanceof NDElement;
+    // ----------------------------------------------------------------
+    // Class attributes binder
+    // ----------------------------------------------------------------
+    const classListMethods = {
+        getClasses() {
+            return this.$element.className?.split(' ').filter(Boolean);
         },
-        isValidChildren(children) {
-            if (!Array.isArray(children)) {
-                children = [children];
+        add(value) {
+            const classes = this.getClasses();
+            if(classes.indexOf(value) >= 0) {
+                return;
             }
-
-            const invalid = children.filter(child => !this.isValidChild(child));
-            return invalid.length === 0;
+            classes.push(value);
+            this.$element.className = classes.join(' ');
         },
-        validateChildren(children) {
-            if (!Array.isArray(children)) {
-                children = [children];
-            }
-
-            const invalid = children.filter(child => !this.isValidChild(child));
-            if (invalid.length > 0) {
-                throw new NativeDocumentError(`Invalid children detected: ${invalid.map(i => typeof i).join(', ')}`);
+        remove(value) {
+            const classes = this.getClasses();
+            const index = classes.indexOf(value);
+            if(index < 0) {
+                return;
             }
-
-            return children;
+            classes.splice(index, 1);
+            this.$element.className = classes.join(' ');
         },
-        /**
-         * Check if the data contains observables.
-         * @param {Array|Object} data
-         * @returns {boolean}
-         */
-        containsObservables(data) {
-            if(!data) {
-                return false;
+        toggle(value, force = undefined) {
+            const classes = this.getClasses();
+            const index = classes.indexOf(value);
+            if(index >= 0) {
+                if(force === true) {
+                    return;
+                }
+                classes.splice(index, 1);
             }
-            return Validator.isObject(data)
-                && Object.values(data).some(value => Validator.isObservable(value));
-        },
-        /**
-         * Check if the data contains an observable reference.
-         * @param {string} data
-         * @returns {boolean}
-         */
-        containsObservableReference(data) {
-            if(!data || typeof data !== 'string') {
-                return false;
+            else {
+                if(force === false) {
+                    return;
+                }
+                classes.push(value);
             }
-            return /\{\{#ObItem::\([0-9]+\)\}\}/.test(data);
+            this.$element.className = classes.join(' ');
         },
-        validateAttributes(attributes) {},
-
-        validateEventCallback(callback) {
-            if (typeof callback !== 'function') {
-                throw new NativeDocumentError('Event callback must be a function');
-            }
+        contains(value) {
+            return this.getClasses().indexOf(value) >= 0;
         }
     };
 
-    function createMultiSourceFilter(sources, callbackFn){
-        const observables = sources.filter(Validator.isObservable);
-
-        const getValues = () => sources.map(src =>
-            Validator.isObservable(src) ? src.val() : src
-        );
-
-        return {
-            dependencies: observables.length > 0 ? observables : null,
-            callback: (value) => callbackFn(value, getValues())
-        };
-    }
-
-    function match(patternObservableOrValue, asRegexObservableOrValue = true, flagsObservableOrValue = ''){
-        return createMultiSourceFilter(
-            [patternObservableOrValue, asRegexObservableOrValue, flagsObservableOrValue],
-            (value, [pattern, asRegex, flags]) => {
-                if (!pattern) return true;
-
-                if (asRegex){
-                    try {
-                        const regex = new RegExp(pattern, flags);
-                        return regex.test(String(value));
-                    } catch (error){
-                        DebugManager$1.warn('Invalid regex pattern:', pattern, error);
-                        return false;
-                    }
-                }
-
-                if (!flags || flags === ''){
-                    return String(value).toLowerCase().includes(String(pattern).toLowerCase());
-                }
-                return String(value).includes(String(pattern));
-            }
-        );
-    }
-
-    /**
-     * Conditionally shows an element based on an observable condition.
-     * The element is mounted/unmounted from the DOM as the condition changes.
-     *
-     * @param {ObservableItem<boolean>|ObservableChecker<boolean>|ObservableWhen} condition - Observable condition to watch
-     * @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
-     * @returns {AnchorDocumentFragment} Anchor fragment managing the conditional content
-     * @example
-     * const isVisible = Observable(false);
-     * ShowIf(isVisible, Div({}, 'Hello World'));
-     */
-    const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
-        if(!Validator.isObservable(condition)) {
-            if(typeof condition === "boolean") {
-                return condition ? ElementCreator.getChild(child) : null;
-            }
-
-            return DebugManager$1.warn('ShowIf', "ShowIf : condition must be an Observable or boolean / "+comment, condition);
+    Object.defineProperty(HTMLElement.prototype, 'classes', {
+        configurable: true,
+        get() {
+            return {
+                $element: this,
+                ...classListMethods
+            };
         }
-        const element = Anchor('Show if : '+(comment || ''));
-
-        let childElement = null;
-        const getChildElement = () => {
-            if(childElement && shouldKeepInCache) {
-                return childElement;
-            }
-            childElement = ElementCreator.getChild(child);
-            if(Validator.isFragment(childElement)) {
-                childElement = Array.from(childElement.childNodes);
-            }
-            return childElement;
-        };
-
-        const currentValue = condition.val();
+    });
 
-        if(currentValue) {
-            element.appendChild(getChildElement());
+    const normalizeComponentArgs = function(props, children = null) {
+        if(props && children) {
+            return { props, children };
+        }
+        if(typeof props !== 'object' || Array.isArray(props) || props === null || props.constructor.name !== 'Object' ||  props.$hydrate) { // IF it's not a JSON
+            return { props: children, children: props }
         }
+        return { props, children };
+    };
 
-        condition.subscribe((value) => {
-            if(!!value) {
-                element.appendChild(getChildElement());
-                return;
-            }
-            element.remove();
-        });
+    const createHtmlElement = (element, _attributes, _children = null) => {
+        let { props: attributes, children = null } = normalizeComponentArgs(_attributes, _children);
 
+        ElementCreator.processAttributes(element, attributes);
+        ElementCreator.processChildren(children, element);
         return element;
     };
 
+    /**
+     *
+     * @param {string} name
+     * @param {?Function=} customWrapper
+     * @returns {Function}
+     */
+    function HtmlElementWrapper(name, customWrapper = null) {
+        if(name) {
+            if(customWrapper) {
+                let node = null;
+                let createElement = (attr, children) => {
+                    node = document.createElement(name);
+                    createElement = (attr, children) => {
+                        return createHtmlElement(customWrapper(node.cloneNode()), attr, children);
+                    };
+                    return createHtmlElement(customWrapper(node.cloneNode()), attr, children);            };
+
+                return (attr, children) => createElement(attr, children)
+            }
+
+            let node = null;
+            let createElement = (attr, children) => {
+                node = document.createElement(name);
+                createElement = (attr, children) => {
+                    return createHtmlElement(node.cloneNode(), attr, children);
+                };
+                return createHtmlElement(node.cloneNode(), attr, children);
+            };
+
+            return (attr, children) => createElement(attr, children)
+        }
+        return (children, name = '') => {
+            const anchor = Anchor(name);
+            anchor.append(children);
+            return anchor;
+        };
+    }
+
     /**
      * Creates a `<div>` element.
      * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDivElement}
@@ -5074,7 +3499,7 @@ var NativeComponents = (function (exports) {
 
     Alert.preset = function(name, callback) {
         if (Alert.prototype[name] || Alert[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Alert.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Alert.`);
             return;
         }
         Alert[name] = (content, props) => callback(new Alert(content, props));
@@ -5259,253 +3684,90 @@ var NativeComponents = (function (exports) {
      * @param {ValidChildren} icon - The icon to display
      * @returns {Alert}
      */
-    Alert.prototype.icon = function(icon) {
-        this.$description.icon = icon;
-        return this;
-    };
-
-    /**
-     * Shows or hides the icon
-     * @param {boolean} [show=true] - Whether to show the icon
-     * @returns {Alert}
-     */
-    Alert.prototype.showIcon = function(show = true) {
-        this.$description.showIcon = show;
-    };
-
-    /**
-     * Sets whether the alert can be closed
-     * @param {boolean} [closable=true] - Whether the alert is closable
-     * @returns {Alert}
-     */
-    Alert.prototype.closable = function(closable = true) {
-        this.$description.closable = !!closable;
-        if(closable) {
-            this.showIf(closable);
-        }
-        return this;
-    };
-
-    /**
-     * Sets whether the alert is dismissible (alias for closable)
-     * @param {boolean} [dismissible=true] - Whether the alert is dismissible
-     * @returns {Alert}
-     */
-    Alert.prototype.dismissible = function(dismissible = true) {
-        return this.closable(dismissible);
-    };
-
-    /**
-     * Sets auto-dismiss delay for the alert
-     * @param {number} delay - Delay in milliseconds before auto-dismissing
-     * @returns {Alert}
-     */
-    Alert.prototype.autoDismiss = function(delay) {
-        this.$description.autoDismiss = delay;
-        return this;
-    };
-
-    /**
-     * Closes the alert
-     */
-    Alert.prototype.close = function() {
-        this.$description.showIf?.set(false);
-        this.emit('hide');
-    };
-
-    /**
-     * Shows the alert
-     */
-    Alert.prototype.show = function() {
-        this.$description.showIf?.set(true);
-        this.emit('show');
-    };
-
-    /**
-     * Hides the alert
-     */
-    Alert.prototype.hide = Alert.prototype.close;
-
-    /**
-     * Registers a handler for the close event
-     * @param {(element: Alert) => void} handler - The event handler
-     * @returns {Alert}
-     */
-    Alert.prototype.onClose = function(handler) {
-        this.on('close', handler);
-        return this;
-    };
-
-    /**
-     * Registers a handler for the show event
-     * @param {(element: Alert) => void} handler - The event handler
-     * @returns {Alert}
-     */
-    Alert.prototype.onShow = function(handler) {
-        this.on('show', handler);
-        return this;
-    };
-
-    function Button(label, props = {}) {
-        if(!(this instanceof Button)) {
-            return new Button(label, props);
-        }
-
-        BaseComponent.call(this, props);
-
-        this.$description = {
-            label: label,
-            type: null,
-            variant: null,
-            size: null,
-            icon: null,
-            iconPosition: 'left',
-            loading: null,
-            disabled: null,
-            template: null,
-            block: null,
-            borderRadiusType: null,
-            outline: null,
-            props
-        };
-
-        this.$element = null;
-    }
-
-    Button.defaultTemplate = null;
-
-    Button.use = function(template = {}) {
-        Button.defaultTemplate = template;
-    };
-
-    BaseComponent.extends(Button);
-
-    Button.preset = function(name, callback) {
-        if (Button.prototype[name] || Button[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Button.`);
-            return;
-        }
-        Button[name] = (label, props) => callback(new Button(label, props));
-    };
-
-    Button.presets = function(presets) {
-        for (const name in presets) {
-            Button.preset(name, presets[name]);
-        }
-    };
-
-    Button.prototype.type = function(type) {
-        this.$description.type = type;
-        return this;
-    };
-
-    Button.prototype.variant = function(variant) {
-        this.$description.variant = variant;
-        return this;
-    };
-    Button.prototype.primary = function() {
-        return this.variant('primary');
-    };
-    Button.prototype.secondary = function() {
-        return this.variant('secondary');
-    };
-    Button.prototype.danger = function() {
-        return this.variant('danger');
-    };
-    Button.prototype.success = function() {
-        return this.variant('success');
-    };
-    Button.prototype.warning = function() {
-        return this.variant('warning');
-    };
-    Button.prototype.ghost = function() {
-        return this.variant('ghost');
-    };
-    Button.prototype.link = function() {
-        return this.variant('link');
-    };
-    Button.prototype.outline = function() {
-        this.$description.outline = true;
-        return this;
-    };
-
-    Button.prototype.size = function(size) {
-        this.$description.size = size;
-        return this;
-    };
-    Button.prototype.small = function() {
-        return this.size('small');
-    };
-    Button.prototype.large = function() {
-        return this.size('large');
-    };
-    Button.prototype.medium = function() {
-        return this.size('medium');
-    };
-
-    Button.prototype.icon = function(icon, iconPosition = 'leading') {
-        this.$description.icon = icon;
-        this.$description.iconPosition = iconPosition;
-        return this;
-    };
-
-    Button.prototype.iconAtLeading = function() {
-        this.$description.iconPosition = 'leading';
-        return this;
-    };
-
-    Button.prototype.iconAtTrailing = function() {
-        this.$description.iconPosition = 'trailing';
-        return this;
-    };
-    Button.prototype.iconAtTop = function() {
-        this.$description.iconPosition = 'top';
+    Alert.prototype.icon = function(icon) {
+        this.$description.icon = icon;
         return this;
     };
 
-    Button.prototype.iconAtBottom = function() {
-        this.$description.iconPosition = 'bottom';
-        return this;
+    /**
+     * Shows or hides the icon
+     * @param {boolean} [show=true] - Whether to show the icon
+     * @returns {Alert}
+     */
+    Alert.prototype.showIcon = function(show = true) {
+        this.$description.showIcon = show;
     };
 
-    Button.prototype.iconOnly = function() {
-        this.$description.iconOnly = true;
+    /**
+     * Sets whether the alert can be closed
+     * @param {boolean} [closable=true] - Whether the alert is closable
+     * @returns {Alert}
+     */
+    Alert.prototype.closable = function(closable = true) {
+        this.$description.closable = !!closable;
+        if(closable) {
+            this.showIf(closable);
+        }
         return this;
     };
 
-    Button.prototype.loading = function(loading = true) {
-        this.$description.loading = BaseComponent.obs(loading);
-        return this;
+    /**
+     * Sets whether the alert is dismissible (alias for closable)
+     * @param {boolean} [dismissible=true] - Whether the alert is dismissible
+     * @returns {Alert}
+     */
+    Alert.prototype.dismissible = function(dismissible = true) {
+        return this.closable(dismissible);
     };
 
-    Button.prototype.disabled = function(disabled = true) {
-        this.$description.disabled = BaseComponent.obs(disabled);
+    /**
+     * Sets auto-dismiss delay for the alert
+     * @param {number} delay - Delay in milliseconds before auto-dismissing
+     * @returns {Alert}
+     */
+    Alert.prototype.autoDismiss = function(delay) {
+        this.$description.autoDismiss = delay;
         return this;
     };
 
-    Button.prototype.render = function(renderFunction) {
-        this.$description.render = renderFunction;
-        return this;
+    /**
+     * Closes the alert
+     */
+    Alert.prototype.close = function() {
+        this.$description.showIf?.set(false);
+        this.emit('hide');
     };
 
-    Button.prototype.rounded = function() {
-        this.$description.borderRadiusType = 'rounded';
-        return this;
-    };
-    Button.prototype.pill = function() {
-        this.$description.borderRadiusType = 'pill';
-        return this;
-    };
-    Button.prototype.circle = function() {
-        this.$description.borderRadiusType = 'circle';
-        return this;
+    /**
+     * Shows the alert
+     */
+    Alert.prototype.show = function() {
+        this.$description.showIf?.set(true);
+        this.emit('show');
     };
-    Button.prototype.smooth = function() {
-        this.$description.borderRadiusType = 'smooth';
+
+    /**
+     * Hides the alert
+     */
+    Alert.prototype.hide = Alert.prototype.close;
+
+    /**
+     * Registers a handler for the close event
+     * @param {(element: Alert) => void} handler - The event handler
+     * @returns {Alert}
+     */
+    Alert.prototype.onClose = function(handler) {
+        this.on('close', handler);
         return this;
     };
-    Button.prototype.block = function() {
-        this.$description.block = true;
+
+    /**
+     * Registers a handler for the show event
+     * @param {(element: Alert) => void} handler - The event handler
+     * @returns {Alert}
+     */
+    Alert.prototype.onShow = function(handler) {
+        this.on('show', handler);
         return this;
     };
 
@@ -5551,7 +3813,7 @@ var NativeComponents = (function (exports) {
 
     Avatar.preset = function(name, callback) {
         if (Avatar.prototype[name] || Avatar[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Avatar.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Avatar.`);
             return;
         }
         Avatar[name] = (label, props) => callback(new Avatar(label, props));
@@ -5973,7 +4235,7 @@ var NativeComponents = (function (exports) {
 
     Badge.preset = function(name, callback) {
         if (Badge.prototype[name] || Badge[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Badge.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Badge.`);
             return;
         }
         Badge[name] = (content, props) => callback(new Badge(content, props));
@@ -6091,7 +4353,7 @@ var NativeComponents = (function (exports) {
 
     Breadcrumb.preset = function(name, callback) {
         if (Breadcrumb.prototype[name] || Breadcrumb[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Breadcrumb.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Breadcrumb.`);
             return;
         }
         Breadcrumb[name] = (props) => callback(new Breadcrumb(props));
@@ -6145,6 +4407,169 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
+    function Button(label, props = {}) {
+        if(!(this instanceof Button)) {
+            return new Button(label, props);
+        }
+
+        BaseComponent.call(this, props);
+
+        this.$description = {
+            label: label,
+            type: null,
+            variant: null,
+            size: null,
+            icon: null,
+            iconPosition: 'left',
+            loading: null,
+            disabled: null,
+            template: null,
+            block: null,
+            borderRadiusType: null,
+            outline: null,
+            props
+        };
+
+        this.$element = null;
+    }
+
+    Button.defaultTemplate = null;
+
+    Button.use = function(template = {}) {
+        Button.defaultTemplate = template;
+    };
+
+    BaseComponent.extends(Button);
+
+    Button.preset = function(name, callback) {
+        if (Button.prototype[name] || Button[name]) {
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Button.`);
+            return;
+        }
+        Button[name] = (label, props) => callback(new Button(label, props));
+    };
+
+    Button.presets = function(presets) {
+        for (const name in presets) {
+            Button.preset(name, presets[name]);
+        }
+    };
+
+    Button.prototype.type = function(type) {
+        this.$description.type = type;
+        return this;
+    };
+
+    Button.prototype.variant = function(variant) {
+        this.$description.variant = variant;
+        return this;
+    };
+    Button.prototype.primary = function() {
+        return this.variant('primary');
+    };
+    Button.prototype.secondary = function() {
+        return this.variant('secondary');
+    };
+    Button.prototype.danger = function() {
+        return this.variant('danger');
+    };
+    Button.prototype.success = function() {
+        return this.variant('success');
+    };
+    Button.prototype.warning = function() {
+        return this.variant('warning');
+    };
+    Button.prototype.ghost = function() {
+        return this.variant('ghost');
+    };
+    Button.prototype.link = function() {
+        return this.variant('link');
+    };
+    Button.prototype.outline = function() {
+        this.$description.outline = true;
+        return this;
+    };
+
+    Button.prototype.size = function(size) {
+        this.$description.size = size;
+        return this;
+    };
+    Button.prototype.small = function() {
+        return this.size('small');
+    };
+    Button.prototype.large = function() {
+        return this.size('large');
+    };
+    Button.prototype.medium = function() {
+        return this.size('medium');
+    };
+
+    Button.prototype.icon = function(icon, iconPosition = 'leading') {
+        this.$description.icon = icon;
+        this.$description.iconPosition = iconPosition;
+        return this;
+    };
+
+    Button.prototype.iconAtLeading = function() {
+        this.$description.iconPosition = 'leading';
+        return this;
+    };
+
+    Button.prototype.iconAtTrailing = function() {
+        this.$description.iconPosition = 'trailing';
+        return this;
+    };
+    Button.prototype.iconAtTop = function() {
+        this.$description.iconPosition = 'top';
+        return this;
+    };
+
+    Button.prototype.iconAtBottom = function() {
+        this.$description.iconPosition = 'bottom';
+        return this;
+    };
+
+    Button.prototype.iconOnly = function() {
+        this.$description.iconOnly = true;
+        return this;
+    };
+
+    Button.prototype.loading = function(loading = true) {
+        this.$description.loading = BaseComponent.obs(loading);
+        return this;
+    };
+
+    Button.prototype.disabled = function(disabled = true) {
+        this.$description.disabled = BaseComponent.obs(disabled);
+        return this;
+    };
+
+    Button.prototype.render = function(renderFunction) {
+        this.$description.render = renderFunction;
+        return this;
+    };
+
+    Button.prototype.rounded = function() {
+        this.$description.borderRadiusType = 'rounded';
+        return this;
+    };
+    Button.prototype.pill = function() {
+        this.$description.borderRadiusType = 'pill';
+        return this;
+    };
+    Button.prototype.circle = function() {
+        this.$description.borderRadiusType = 'circle';
+        return this;
+    };
+    Button.prototype.smooth = function() {
+        this.$description.borderRadiusType = 'smooth';
+        return this;
+    };
+    Button.prototype.block = function() {
+        this.$description.block = true;
+        return this;
+    };
+
     function Card(config = {}) {
         if(!(this instanceof Card)) {
             return new Card(config);
@@ -6900,7 +5325,7 @@ var NativeComponents = (function (exports) {
 
     Divider.preset = function(name, callback) {
         if (Divider.prototype[name] || Divider[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Divider.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Divider.`);
             return;
         }
         Divider[name] = (label, props) => callback(new Divider(label, props));
@@ -7319,7 +5744,7 @@ var NativeComponents = (function (exports) {
 
     Dropdown.preset = function(name, callback) {
         if (Dropdown.prototype[name] || Dropdown[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Dropdown.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Dropdown.`);
             return;
         }
         Dropdown[name] = (props) => callback(new Dropdown(props));
@@ -8540,10 +6965,10 @@ var NativeComponents = (function (exports) {
             errorsPosition:  'bottom',
             errorsMapper:    null,
             renderErrors:    null,
-            submitting:      Observable(false),
-            errors:          Observable(null),
-            isDirty:         Observable(false),
-            isValid:         Observable(false),
+            submitting:      $$1(false),
+            errors:          $$1(null),
+            isDirty:         $$1(false),
+            isValid:         $$1(false),
             props
         };
     }
@@ -8585,7 +7010,7 @@ var NativeComponents = (function (exports) {
                 dirties.push(field.$description.isDirty);
             }
 
-            Observable.computed(() => {
+            $$1.computed(() => {
                 const isDirty = dirties.some((item) => item.val());
                 this.$description.isDirty.set(isDirty);
             }, dirties);
@@ -11374,7 +9799,7 @@ var NativeComponents = (function (exports) {
 
     Modal.preset = function(name, callback) {
         if (Modal.prototype[name] || Modal[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Modal.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Modal.`);
             return;
         }
         Modal[name] = (content, props) => callback(new Modal(content, props));
@@ -11625,7 +10050,7 @@ var NativeComponents = (function (exports) {
 
     Pagination.preset = function(name, callback) {
         if (Pagination.prototype[name] || Pagination[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Pagination.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Pagination.`);
             return;
         }
         Pagination[name] = (props) => callback(new Pagination(props));
@@ -11920,7 +10345,7 @@ var NativeComponents = (function (exports) {
 
     Popover.preset = function(name, callback) {
         if (Popover.prototype[name] || Popover[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Popover.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Popover.`);
             return;
         }
         Popover[name] = (content, props) => callback(new Popover(content, props));
@@ -12222,7 +10647,7 @@ var NativeComponents = (function (exports) {
 
     Progress.preset = function(name, callback) {
         if (Progress.prototype[name] || Progress[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Progress.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Progress.`);
             return;
         }
         Progress[name] = (props) => callback(new Progress(props));
@@ -12524,7 +10949,7 @@ var NativeComponents = (function (exports) {
 
     VStack.preset = function(name, callback) {
         if (VStack.prototype[name] || VStack[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in VStack.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in VStack.`);
             return;
         }
         VStack[name] = (content, props) => callback(new VStack(content, props));
@@ -12699,7 +11124,7 @@ var NativeComponents = (function (exports) {
 
     FixedStack.preset = function(name, callback) {
         if(FixedStack.prototype[name] || FixedStack[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in FixedStack.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in FixedStack.`);
             return;
         }
         FixedStack[name] = (content, props) => callback(new FixedStack(content, props));
@@ -12729,7 +11154,7 @@ var NativeComponents = (function (exports) {
 
     HStack.preset = function(name, callback) {
         if (HStack.prototype[name] || HStack[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in HStack.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in HStack.`);
             return;
         }
         HStack[name] = (content, props) => callback(new HStack(content, props));
@@ -12759,7 +11184,7 @@ var NativeComponents = (function (exports) {
 
     AbsoluteStack.preset = function(name, callback) {
         if(AbsoluteStack.prototype[name] || AbsoluteStack[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in AbsoluteStack.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in AbsoluteStack.`);
             return;
         }
         AbsoluteStack[name] = (content, props) => callback(new AbsoluteStack(content, props));
@@ -12789,7 +11214,7 @@ var NativeComponents = (function (exports) {
 
     RelativeStack.preset = function(name, callback) {
         if(RelativeStack.prototype[name] || RelativeStack[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in RelativeStack.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in RelativeStack.`);
             return;
         }
         RelativeStack[name] = (content, props) => callback(new RelativeStack(content, props));
@@ -12834,7 +11259,7 @@ var NativeComponents = (function (exports) {
 
     Skeleton.preset = function(name, callback) {
         if (Skeleton.prototype[name] || Skeleton[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Skeleton.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Skeleton.`);
             return;
         }
         Skeleton[name] = (props) => callback(new Skeleton(props));
@@ -13198,7 +11623,7 @@ var NativeComponents = (function (exports) {
 
     Spinner.preset = function(name, callback) {
         if (Spinner.prototype[name] || Spinner[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exists in Spinner.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exists in Spinner.`);
             return;
         }
         Spinner[name] = (props) => callback(new Spinner(props));
@@ -13768,7 +12193,7 @@ var NativeComponents = (function (exports) {
 
     Stepper.preset = function(name, callback) {
         if (Stepper.prototype[name] || Stepper[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Stepper.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Stepper.`);
             return;
         }
         Stepper[name] = (props) => callback(new Stepper(props));
@@ -14721,7 +13146,7 @@ var NativeComponents = (function (exports) {
 
     DataTable.prototype.selectedRows = function($obs) {
         if(!$obs.__$isObservableArray) {
-            DebugManager$1.warn('Database', 'selectedRow should take an Observable array');
+            DebugManager$2.warn('Database', 'selectedRow should take an Observable array');
         }
         this.$description.$selectedRows = $obs;
         return this;
@@ -15268,7 +13693,7 @@ var NativeComponents = (function (exports) {
 
     Tooltip.preset = function(name, callback) {
         if (Tooltip.prototype[name] || Tooltip[name]) {
-            DebugManager$1.warn(`Warning: the ${name} method already exist in Tooltip.`);
+            DebugManager$2.warn(`Warning: the ${name} method already exist in Tooltip.`);
             return;
         }
         Tooltip[name] = (content, props) => callback(new Tooltip(content, props));