native-document 1.0.151 → 1.0.152

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

@@ -1,16 +1,16 @@
 var NativeComponents = (function (exports) {
     'use strict';
 
-    let DebugManager$1 = {};
+    let DebugManager$2 = {};
     {
-        DebugManager$1 = {
+        DebugManager$2 = {
             log() {},
             warn() {},
             error() {},
             disable() {}
         };
     }
-    var DebugManager$2 = DebugManager$1;
+    var DebugManager$1 = DebugManager$2;
 
     class NativeDocumentError extends Error {
         constructor(message, context = {}) {
@@ -21,6 +21,213 @@ var NativeComponents = (function (exports) {
         }
     }
 
+    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;
+        },
+        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) ||
+                child.__$Observable ||
+                child?.__$isNDElement ||
+                ['string', 'number', 'boolean'].includes(typeof child);
+        },
+        isNDElement(child) {
+            return child?.__$isNDElement;
+        },
+        isValidChildren(children) {
+            if (!Array.isArray(children)) {
+                children = [children];
+            }
+
+            const invalid = children.filter(child => !this.isValidChild(child));
+            return invalid.length === 0;
+        },
+        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(', ')}`);
+            }
+
+            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) {},
+
+        validateEventCallback(callback) {
+            if (typeof callback !== 'function') {
+                throw new NativeDocumentError('Event callback must be a function');
+            }
+        }
+    };
+
+    const cssPropertyAccumulator = function(initialValue = {}) {
+        let data = Validator.isString(initialValue) ? initialValue.split(';').filter(Boolean) : initialValue;
+
+        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 };
+            },
+        };
+    };
+
+    const classPropertyAccumulator = function(initialValue = []) {
+        let data = Validator.isString(initialValue) ? initialValue.split(" ").filter(Boolean) : initialValue;
+
+        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 };
+            },
+        };
+    };
+
     const MemoryManager = (function() {
 
         let $nextObserverId = 0;
@@ -68,66 +275,12 @@ var NativeComponents = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager$2.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
     }());
 
-    /**
-     * Creates an ObservableWhen that tracks whether an observable equals a specific value.
-     *
-     * @param {ObservableItem} observer - The observable to watch
-     * @param {*} value - The value to compare against
-     * @class ObservableWhen
-     */
-    const ObservableWhen = function(observer, value) {
-        this.$target = value;
-        this.$observer = observer;
-    };
-
-    ObservableWhen.prototype.__$Observable = true;
-    ObservableWhen.prototype.__$isObservableWhen = true;
-
-    /**
-     * Subscribes to changes in the match status (true when observable equals target value).
-     *
-     * @param {Function} callback - Function called with boolean indicating if values match
-     * @returns {Function} Unsubscribe function
-     * @example
-     * const status = Observable('idle');
-     * const isLoading = status.when('loading');
-     * isLoading.subscribe(active => console.log('Loading:', active));
-     */
-    ObservableWhen.prototype.subscribe = function(callback) {
-        return this.$observer.on(this.$target, callback);
-    };
-
-    /**
-     * Returns true if the observable's current value equals the target value.
-     *
-     * @returns {boolean} True if observable value matches target value
-     */
-    ObservableWhen.prototype.val = function() {
-        return this.$observer.$currentValue === this.$target;
-    };
-
-    /**
-     * Returns true if the observable's current value equals the target value.
-     * Alias for val().
-     *
-     * @returns {boolean} True if observable value matches target value
-     */
-    ObservableWhen.prototype.isMatch = ObservableWhen.prototype.val;
-
-    /**
-     * Returns true if the observable's current value equals the target value.
-     * Alias for val().
-     *
-     * @returns {boolean} True if observable value matches target value
-     */
-    ObservableWhen.prototype.isActive = ObservableWhen.prototype.val;
-
     const invoke = function(fn, args, context) {
         if(context) {
             fn.apply(context, args);
@@ -196,187 +349,27 @@ var NativeComponents = (function (exports) {
         return cloned;
     };
 
-    const $parseDateParts = (value, locale) => {
-        const d = new Date(value);
-        return {
-            d,
-            parts: new Intl.DateTimeFormat(locale, {
-                year:   'numeric',
-                month:  'long',
-                day:    '2-digit',
-                hour:   '2-digit',
-                minute: '2-digit',
-                second: '2-digit',
-            }).formatToParts(d).reduce((acc, { type, value }) => {
-                acc[type] = value;
-                return acc;
-            }, {})
-        };
-    };
-
-    const $applyDatePattern = (pattern, d, parts) => {
-        const pad = n => String(n).padStart(2, '0');
-        return pattern
-            .replace('YYYY', parts.year)
-            .replace('YY',   parts.year.slice(-2))
-            .replace('MMMM', parts.month)
-            .replace('MMM',  parts.month.slice(0, 3))
-            .replace('MM',   pad(d.getMonth() + 1))
-            .replace('DD',   pad(d.getDate()))
-            .replace('D',    d.getDate())
-            .replace('HH',   parts.hour)
-            .replace('mm',   parts.minute)
-            .replace('ss',   parts.second);
-    };
-
-    const Formatters = {
-        currency: (value, locale, { currency = 'XOF', notation, minimumFractionDigits, maximumFractionDigits } = {}) =>
-            new Intl.NumberFormat(locale, {
-                style: 'currency',
-                currency,
-                notation,
-                minimumFractionDigits,
-                maximumFractionDigits
-            }).format(value),
-
-        number: (value, locale, { notation, minimumFractionDigits, maximumFractionDigits } = {}) =>
-            new Intl.NumberFormat(locale, {
-                notation,
-                minimumFractionDigits,
-                maximumFractionDigits
-            }).format(value),
-
-        percent: (value, locale, { decimals = 1 } = {}) =>
-            new Intl.NumberFormat(locale, {
-                style:                'percent',
-                maximumFractionDigits: decimals
-            }).format(value),
-
-        date: (value, locale, { format, dateStyle = 'long' } = {}) => {
-            if (format) {
-                const { d, parts } = $parseDateParts(value, locale);
-                return $applyDatePattern(format, d, parts);
+    const LocalStorage = {
+        getJson(key) {
+            let value = localStorage.getItem(key);
+            try {
+                return JSON.parse(value);
+            } catch (e) {
+                throw new NativeDocumentError('invalid_json:'+key);
             }
-            return new Intl.DateTimeFormat(locale, { dateStyle }).format(new Date(value));
         },
-
-        time: (value, locale, { format, hour = '2-digit', minute = '2-digit', second } = {}) => {
-            if (format) {
-                const { d, parts } = $parseDateParts(value, locale);
-                return $applyDatePattern(format, d, parts);
-            }
-            return new Intl.DateTimeFormat(locale, { hour, minute, second }).format(new Date(value));
+        getNumber(key) {
+            return Number(this.get(key));
         },
-
-        datetime: (value, locale, { format, dateStyle = 'long', hour = '2-digit', minute = '2-digit', second } = {}) => {
-            if (format) {
-                const { d, parts } = $parseDateParts(value, locale);
-                return $applyDatePattern(format, d, parts);
-            }
-            return new Intl.DateTimeFormat(locale, { dateStyle, hour, minute, second }).format(new Date(value));
+        getBool(key) {
+            const value = this.get(key);
+            return value === 'true' || value === '1';
         },
-
-        relative: (value, locale, { unit = 'day', numeric = 'auto' } = {}) => {
-            const diff = Math.round((value - Date.now()) / (1000 * 60 * 60 * 24));
-            return new Intl.RelativeTimeFormat(locale, { numeric }).format(diff, unit);
+        setJson(key, value) {
+            localStorage.setItem(key, JSON.stringify(value));
         },
-
-        plural: (value, locale, { singular, plural } = {}) => {
-            const rule = new Intl.PluralRules(locale).select(value);
-            return `${value} ${rule === 'one' ? singular : plural}`;
-        },
-    };
-
-    /**
-     *
-     * @param {*} value
-     * @param {{ propagation: boolean, reset: boolean} | null} configs
-     * @returns {ObservableItem}
-     * @constructor
-     */
-    function Observable(value, configs = null) {
-        return new ObservableItem(value, configs);
-    }
-
-    const $$1 = Observable;
-
-    /**
-     *
-     * @param {string} propertyName
-     */
-    Observable.useValueProperty = function(propertyName = 'value') {
-        Object.defineProperty(ObservableItem.prototype, propertyName, {
-            get() {
-                return this.$currentValue;
-            },
-            set(value) {
-                this.set(value);
-            },
-            configurable: true,
-        });
-    };
-
-
-    /**
-     *
-     * @param id
-     * @returns {ObservableItem|null}
-     */
-    Observable.getById = function(id) {
-        const item = MemoryManager.getObservableById(parseInt(id));
-        if(!item) {
-            throw new NativeDocumentError('Observable.getById : No observable found with id ' + id);
-        }
-        return item;
-    };
-
-    /**
-     *
-     * @param {ObservableItem} observable
-     */
-    Observable.cleanup = function(observable) {
-        observable.cleanup();
-    };
-
-    /**
-     * Enable auto cleanup of observables.
-     * @param {Boolean} enable
-     * @param {{interval:Boolean, threshold:number}} options
-     */
-    Observable.autoCleanup = function(enable = false, options = {}) {
-        if(!enable) {
-            return;
-        }
-        const { interval = 60000, threshold = 100 } = options;
-
-        window.addEventListener('beforeunload', () => {
-            MemoryManager.cleanup();
-        });
-
-        setInterval(() => MemoryManager.cleanObservables(threshold), interval);
-    };
-
-    const LocalStorage = {
-        getJson(key) {
-            let value = localStorage.getItem(key);
-            try {
-                return JSON.parse(value);
-            } catch (e) {
-                throw new NativeDocumentError('invalid_json:'+key);
-            }
-        },
-        getNumber(key) {
-            return Number(this.get(key));
-        },
-        getBool(key) {
-            const value = this.get(key);
-            return value === 'true' || value === '1';
-        },
-        setJson(key, value) {
-            localStorage.setItem(key, JSON.stringify(value));
-        },
-        setBool(key, value) {
-            localStorage.setItem(key, value ? 'true' : 'false');
+        setBool(key, value) {
+            localStorage.setItem(key, value ? 'true' : 'false');
         },
         get(key, defaultValue = null) {
             return localStorage.getItem(key) || defaultValue;
@@ -735,27 +728,6 @@ var NativeComponents = (function (exports) {
         this.assocTrigger();
     };
 
-    /**
-     * Create an Observable checker instance
-     * @param callback
-     * @returns {ObservableChecker}
-     */
-    ObservableItem.prototype.check = function(callback) {
-        return new ObservableChecker(this, callback)
-    };
-
-    ObservableItem.prototype.transform = ObservableItem.prototype.check;
-    ObservableItem.prototype.pluck = function(property) {
-        return new ObservableChecker(this, (value) => value[property]);
-    };
-    ObservableItem.prototype.is = function(callbackOrValue) {
-        if(typeof callbackOrValue === 'function') {
-            return new ObservableChecker(this, callbackOrValue);
-        }
-        return new ObservableChecker(this, (value) => value === callbackOrValue);
-    };
-    ObservableItem.prototype.select = ObservableItem.prototype.check;
-
 
 
 
@@ -775,21 +747,6 @@ var NativeComponents = (function (exports) {
         return Validator.isObservable(item) ? item.val() : item;
     };
 
-    /**
-     * Creates an ObservableWhen that represents whether the observable equals a specific value.
-     * Returns an object that can be subscribed to and will emit true/false.
-     *
-     * @param {*} value - The value to compare against
-     * @returns {ObservableWhen} An ObservableWhen instance that tracks when the observable equals the value
-     * @example
-     * const status = Observable('idle');
-     * const isLoading = status.when('loading');
-     * isLoading.subscribe(active => console.log('Loading:', active));
-     * status.set('loading'); // Logs: "Loading: true"
-     */
-    ObservableItem.prototype.when = function(value) {
-        return new ObservableWhen(this, value);
-    };
 
     /**
      * Compares the observable's current value with another value or observable.
@@ -877,71 +834,6 @@ var NativeComponents = (function (exports) {
     };
 
 
-    /**
-     * Creates a derived observable that formats the current value using Intl.
-     * Automatically reacts to both value changes and locale changes (Store.__nd.locale).
-     *
-     * @param {string | Function} type - Format type or custom formatter function
-     * @param {Object} [options={}] - Options passed to the formatter
-     * @returns {ObservableItem<string>}
-     *
-     * @example
-     * // Currency
-     * price.format('currency')                                      // "15 000 FCFA"
-     * price.format('currency', { currency: 'EUR' })                 // "15 000,00 €"
-     * price.format('currency', { notation: 'compact' })             // "15 K FCFA"
-     *
-     * // Number
-     * count.format('number')                                        // "15 000"
-     *
-     * // Percent
-     * rate.format('percent')                                        // "15,0 %"
-     * rate.format('percent', { decimals: 2 })                       // "15,00 %"
-     *
-     * // Date
-     * date.format('date')                                           // "3 mars 2026"
-     * date.format('date', { dateStyle: 'full' })                    // "mardi 3 mars 2026"
-     * date.format('date', { format: 'DD/MM/YYYY' })                 // "03/03/2026"
-     * date.format('date', { format: 'DD MMM YYYY' })                // "03 mar 2026"
-     * date.format('date', { format: 'DD MMMM YYYY' })               // "03 mars 2026"
-     *
-     * // Time
-     * date.format('time')                                           // "20:30"
-     * date.format('time', { second: '2-digit' })                    // "20:30:00"
-     * date.format('time', { format: 'HH:mm:ss' })                   // "20:30:00"
-     *
-     * // Datetime
-     * date.format('datetime')                                       // "3 mars 2026, 20:30"
-     * date.format('datetime', { dateStyle: 'full' })                // "mardi 3 mars 2026, 20:30"
-     * date.format('datetime', { format: 'DD/MM/YYYY HH:mm' })       // "03/03/2026 20:30"
-     *
-     * // Relative
-     * date.format('relative')                                       // "dans 11 jours"
-     * date.format('relative', { unit: 'month' })                    // "dans 1 mois"
-     *
-     * // Plural
-     * count.format('plural', { singular: 'billet', plural: 'billets' }) // "3 billets"
-     *
-     * // Custom formatter
-     * price.format(value => `${value.toLocaleString()} FCFA`)
-     *
-     * // Reacts to locale changes automatically
-     * Store.setLocale('en-US');
-     */
-    ObservableItem.prototype.format = function(type, options = {}) {
-        const self = this;
-
-        if (typeof type === 'function') {
-            return new ObservableChecker(self, type);
-        }
-
-        const formatter = Formatters[type];
-        const localeObservable = Formatters.locale;
-
-        return Observable.computed(() => formatter(self.val(), localeObservable.val(), options),
-            [self, localeObservable]
-        );
-    };
 
     ObservableItem.prototype.persist = function(key, options = {}) {
         let value = $getFromStorage(key, this.$currentValue);
@@ -972,218 +864,72 @@ var NativeComponents = (function (exports) {
 
     /**
      *
-     * @param {ObservableItem} $observable
-     * @param {Function} $checker
-     * @class ObservableChecker
+     * @param {*} value
+     * @param {{ propagation: boolean, reset: boolean} | null} configs
+     * @returns {ObservableItem}
+     * @constructor
      */
-    function ObservableChecker($observable, $checker) {
-        this.observable = $observable;
-
-        ObservableItem.call(this);
+    function Observable(value, configs = null) {
+        return new ObservableItem(value, configs);
+    }
 
-        this.$mutation = $checker;
+    const $$1 = Observable;
 
-        $observable.subscribe((newValue) => {
-            this.$updateWithMutation(newValue);
+    /**
+     *
+     * @param {string} propertyName
+     */
+    Observable.useValueProperty = function(propertyName = 'value') {
+        Object.defineProperty(ObservableItem.prototype, propertyName, {
+            get() {
+                return this.$currentValue;
+            },
+            set(value) {
+                this.set(value);
+            },
+            configurable: true,
         });
-
-        this.$updateWithMutation($observable.val());
-    }
-
-    ObservableChecker.prototype = Object.create(ObservableItem.prototype);
-    ObservableChecker.prototype.constructor = ObservableChecker;
-    ObservableChecker.prototype.__$Observable = true;
-    ObservableChecker.prototype.__$isObservableChecker = true;
+    };
 
 
-    const ObservablePipe = ObservableChecker;
-    ObservablePipe.prototype.constructor = ObservablePipe;
+    /**
+     *
+     * @param id
+     * @returns {ObservableItem|null}
+     */
+    Observable.getById = function(id) {
+        const item = MemoryManager.getObservableById(parseInt(id));
+        if(!item) {
+            throw new NativeDocumentError('Observable.getById : No observable found with id ' + id);
+        }
+        return item;
+    };
 
-    ObservableChecker.prototype.$updateWithMutation = function(newValue) {
-        newValue = this.$mutation(newValue);
-        return this.set(newValue);
+    /**
+     *
+     * @param {ObservableItem} observable
+     */
+    Observable.cleanup = function(observable) {
+        observable.cleanup();
     };
 
-    const DocumentObserver = {
-        mounted: new WeakMap(),
-        beforeUnmount: new WeakMap(),
-        mountedSupposedSize: 0,
-        unmounted: new WeakMap(),
-        unmountedSupposedSize: 0,
-        observer: null,
-        initObserver: () => {
-            if(DocumentObserver.observer) {
-                return;
-            }
-            DocumentObserver.observer = new MutationObserver(DocumentObserver.checkMutation);
-            DocumentObserver.observer.observe(document.body, {
-                childList: true,
-                subtree: true,
-            });
-        },
+    /**
+     * Enable auto cleanup of observables.
+     * @param {Boolean} enable
+     * @param {{interval:Boolean, threshold:number}} options
+     */
+    Observable.autoCleanup = function(enable = false, options = {}) {
+        if(!enable) {
+            return;
+        }
+        const { interval = 60000, threshold = 100 } = options;
 
-        executeMountedCallback(node) {
-            const data = DocumentObserver.mounted.get(node);
-            if(!data) {
-                return;
-            }
-            data.inDom = true;
-            if(!data.mounted) {
-                return;
-            }
-            if(Array.isArray(data.mounted)) {
-                for(const cb of data.mounted) {
-                    cb(node);
-                }
-                return;
-            }
-            data.mounted(node);
-        },
+        window.addEventListener('beforeunload', () => {
+            MemoryManager.cleanup();
+        });
 
-        executeUnmountedCallback(node) {
-            const data = DocumentObserver.unmounted.get(node);
-            if(!data) {
-                return;
-            }
-            data.inDom = false;
-            if(!data.unmounted) {
-                return;
-            }
-
-            let shouldRemove = false;
-            if(Array.isArray(data.unmounted)) {
-                for(const cb of data.unmounted) {
-                    if(cb(node) === true) {
-                        shouldRemove = true;
-                    }
-                }
-            } else {
-                shouldRemove = data.unmounted(node) === true;
-            }
-
-            if(shouldRemove) {
-                data.disconnect();
-                node.nd?.remove();
-            }
-        },
-
-        checkMutation: function(mutationsList) {
-            for(const mutation of mutationsList) {
-                if(DocumentObserver.mountedSupposedSize > 0) {
-                    for(const node of mutation.addedNodes) {
-                        DocumentObserver.executeMountedCallback(node);
-                        if(!node.querySelectorAll) {
-                            continue;
-                        }
-                        const children = node.querySelectorAll('[data--nd-mounted]');
-                        for(const child of children) {
-                            DocumentObserver.executeMountedCallback(child);
-                        }
-                    }
-                }
-
-                if (DocumentObserver.unmountedSupposedSize > 0) {
-                    for (const node of mutation.removedNodes) {
-                        DocumentObserver.executeUnmountedCallback(node);
-                        if(!node.querySelectorAll) {
-                            continue;
-                        }
-                        const children = node.querySelectorAll('[data--nd-unmounted]');
-                        for(const child of children) {
-                            DocumentObserver.executeUnmountedCallback(child);
-                        }
-                    }
-                }
-            }
-        },
-
-        /**
-         * @param {HTMLElement} element
-         * @param {boolean} inDom
-         * @returns {{ disconnect: Function, mounted: Function, unmounted: Function, off: Function }}
-         */
-        watch: function(element, inDom = false) {
-            let mountedRegistered   = false;
-            let unmountedRegistered = false;
-
-            DocumentObserver.initObserver();
-
-            let data = {
-                inDom,
-                mounted: null,
-                unmounted: null,
-                disconnect: () => {
-                    if (mountedRegistered) {
-                        DocumentObserver.mounted.delete(element);
-                        DocumentObserver.mountedSupposedSize--;
-                    }
-                    if (unmountedRegistered) {
-                        DocumentObserver.unmounted.delete(element);
-                        DocumentObserver.unmountedSupposedSize--;
-                    }
-                    data = null;
-                }
-            };
-
-            const addListener = (type, callback) => {
-                if (!data[type]) {
-                    data[type] = callback;
-                    return;
-                }
-                if (!Array.isArray(data[type])) {
-                    data[type] = [data[type], callback];
-                    return;
-                }
-                data[type].push(callback);
-            };
-
-            const removeListener = (type, callback) => {
-                if(!data?.[type]) {
-                    return;
-                }
-                if(Array.isArray(data[type])) {
-                    const index = data[type].indexOf(callback);
-                    if(index > -1) {
-                        data[type].splice(index, 1);
-                    }
-                    if(data[type].length === 1) {
-                        data[type] = data[type][0];
-                    }
-                    if(data[type].length === 0) {
-                        data[type] = null;
-                    }
-                    return;
-                }
-                data[type] = null;
-            };
-
-            return {
-                disconnect: () => data?.disconnect(),
-
-                mounted: (callback) => {
-                    addListener('mounted', callback);
-                    DocumentObserver.mounted.set(element, data);
-                    if (!mountedRegistered) {
-                        DocumentObserver.mountedSupposedSize++;
-                        mountedRegistered = true;
-                    }
-                },
-
-                unmounted: (callback) => {
-                    addListener('unmounted', callback);
-                    DocumentObserver.unmounted.set(element, data);
-                    if (!unmountedRegistered) {
-                        DocumentObserver.unmountedSupposedSize++;
-                        unmountedRegistered = true;
-                    }
-                },
-
-                off: (type, callback) => {
-                    removeListener(type, callback);
-                }
-            };
-        }
-    };
+        setInterval(() => MemoryManager.cleanObservables(threshold), interval);
+    };
 
     const BOOLEAN_ATTRIBUTES = new Set([
         'checked',
@@ -1379,253 +1125,97 @@ var NativeComponents = (function (exports) {
         return element;
     };
 
-    String.prototype.toNdElement = function () {
-        return ElementCreator.createStaticTextNode(null, this);
-    };
-
-    Number.prototype.toNdElement = function () {
-        return ElementCreator.createStaticTextNode(null, this.toString());
-    };
-
-    Element.prototype.toNdElement = function () {
-        return this;
-    };
-    Text.prototype.toNdElement = function () {
-        return this;
-    };
-    Comment.prototype.toNdElement = function () {
-        return this;
-    };
-    Document.prototype.toNdElement = function () {
-        return this;
-    };
-    DocumentFragment.prototype.toNdElement = function () {
-        return this;
-    };
+    let $textNodeCache = null;
 
-    ObservableItem.prototype.toNdElement = function () {
-        return ElementCreator.createObservableNode(null, this);
-    };
+    const ElementCreator = {
+        createTextNode() {
+            if(!$textNodeCache) {
+                $textNodeCache = document.createTextNode('');
+                ElementCreator.createTextNode = () => $textNodeCache.cloneNode();
+            }
+            return $textNodeCache.cloneNode();
+        },
+        /**
+         *
+         * @param {HTMLElement|DocumentFragment} parent
+         * @param {ObservableItem} observable
+         * @returns {Text}
+         */
+        createObservableNode: (parent, observable) => {
+            const text = ElementCreator.createTextNode();
+            observable.subscribe(value => text.nodeValue = value);
+            text.nodeValue = observable.val();
+            parent && parent.appendChild(text);
+            return text;
+        },
+        /**
+         *
+         * @param {HTMLElement|DocumentFragment} parent
+         * @param {{$hydrate: Function}} item
+         * @returns {Text}
+         */
+        createHydratableNode: (parent, item) => {
+            const text = ElementCreator.createTextNode();
+            item.$hydrate(text);
+            return text;
+        },
 
-    ObservableChecker.prototype.toNdElement = ObservableItem.prototype.toNdElement;
+        /**
+         *
+         * @param {HTMLElement|DocumentFragment} parent
+         * @param {*} value
+         * @returns {Text}
+         */
+        createStaticTextNode: (parent, value) => {
+            let text = ElementCreator.createTextNode();
+            text.nodeValue = value;
+            parent && parent.appendChild(text);
+            return text;
+        },
+        /**
+         *
+         * @param {string} name
+         * @returns {HTMLElement|DocumentFragment}
+         */
+        createElement: (name) => {
+            const node = document.createElement(name);
+            return node.cloneNode();
+        },
+        bindTextNode: (textNode, value) => {
+            if(value?.__$isObservable) {
+                value.subscribe(newValue => textNode.nodeValue = newValue);
+                textNode.nodeValue = value.val();
+                return;
+            }
+            textNode.nodeValue = value;
+        },
+        /**
+         *
+         * @param {*} children
+         * @param {HTMLElement|DocumentFragment} parent
+         */
+        processChildren: (children, parent) => {
+            if(children === null) return;
+            let child = ElementCreator.getChild(children);
+            if(child) {
+                parent.appendChild(child);
+            }
+        },
+        async safeRemove(element) {
+            await element.remove();
 
-    NDElement.prototype.toNdElement = function () {
-        const element = this.$element ?? this.$build?.() ?? this.build?.() ?? null;
-        if(this.$attachements) {
-            if(!this.$attachements.contains(this.$element)) {
-                this.$attachements.append(this.$element);
-            }
-            return this.$attachements;
-        }
-        return element;
-    };
-
-    Array.prototype.toNdElement = function () {
-        const fragment = document.createDocumentFragment();
-        for(let i = 0, length = this.length; i < length; i++) {
-            const child = ElementCreator.getChild(this[i]);
-            if(child === null) continue;
-            fragment.appendChild(child);
-        }
-        return fragment;
-    };
-
-    Function.prototype.toNdElement = function () {
-        const child = this;
-        return ElementCreator.getChild(child());
-    };
-
-    /**
-     * @param {HTMLElement} el
-     * @param {number} timeout
-     */
-    const waitForVisualEnd = (el, timeout = 1000) => {
-        return new Promise((resolve) => {
-            let isResolved = false;
-
-            const cleanupAndResolve = (e) => {
-                if (e && e.target !== el) return;
-                if (isResolved) return;
-
-                isResolved = true;
-                el.removeEventListener('transitionend', cleanupAndResolve);
-                el.removeEventListener('animationend', cleanupAndResolve);
-                clearTimeout(timer);
-                resolve();
-            };
-
-            el.addEventListener('transitionend', cleanupAndResolve);
-            el.addEventListener('animationend', cleanupAndResolve);
-
-            const timer = setTimeout(cleanupAndResolve, timeout);
-
-            const style = window.getComputedStyle(el);
-            const hasTransition = style.transitionDuration !== '0s';
-            const hasAnimation = style.animationDuration !== '0s';
-
-            if (!hasTransition && !hasAnimation) {
-                cleanupAndResolve();
-            }
-        });
-    };
-
-    NDElement.prototype.transitionOut = function(transitionName) {
-        const exitClass = transitionName + '-exit';
-        const el = this.$element;
-        this.beforeUnmount('transition-exit', async function() {
-            el.classes.add(exitClass);
-            await waitForVisualEnd(el);
-            el.classes.remove(exitClass);
-        });
-        return this;
-    };
-
-    NDElement.prototype.transitionIn = function(transitionName) {
-        const startClass = transitionName + '-enter-from';
-        const endClass = transitionName + '-enter-to';
-
-        const el = this.$element;
-
-        el.classes.add(startClass);
-
-        this.mounted(() => {
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    el.classes.remove(startClass);
-                    el.classes.add(endClass);
-
-                    waitForVisualEnd(el).then(() => {
-                        el.classes.remove(endClass);
-                    });
-                });
-            });
-        });
-        return this;
-    };
-
-
-    NDElement.prototype.transition = function (transitionName) {
-        this.transitionIn(transitionName);
-        this.transitionOut(transitionName);
-        return this;
-    };
-
-    NDElement.prototype.animate = function(animationName) {
-        const el = this.$element;
-        el.classes.add(animationName);
-
-        waitForVisualEnd(el).then(() => {
-            el.classes.remove(animationName);
-        });
-
-        return this;
-    };
-
-    ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
-        if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
-            bindBooleanAttribute(element, attributeName, this);
-            return;
-        }
-
-        bindAttributeWithObservable(element, attributeName, this);
-    };
-
-    ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
-
-    let $textNodeCache = null;
-
-    const ElementCreator = {
-        createTextNode() {
-            if(!$textNodeCache) {
-                $textNodeCache = document.createTextNode('');
-                ElementCreator.createTextNode = () => $textNodeCache.cloneNode();
-            }
-            return $textNodeCache.cloneNode();
-        },
-        /**
-         *
-         * @param {HTMLElement|DocumentFragment} parent
-         * @param {ObservableItem} observable
-         * @returns {Text}
-         */
-        createObservableNode: (parent, observable) => {
-            const text = ElementCreator.createTextNode();
-            observable.subscribe(value => text.nodeValue = value);
-            text.nodeValue = observable.val();
-            parent && parent.appendChild(text);
-            return text;
-        },
-        /**
-         *
-         * @param {HTMLElement|DocumentFragment} parent
-         * @param {{$hydrate: Function}} item
-         * @returns {Text}
-         */
-        createHydratableNode: (parent, item) => {
-            const text = ElementCreator.createTextNode();
-            item.$hydrate(text);
-            return text;
-        },
-
-        /**
-         *
-         * @param {HTMLElement|DocumentFragment} parent
-         * @param {*} value
-         * @returns {Text}
-         */
-        createStaticTextNode: (parent, value) => {
-            let text = ElementCreator.createTextNode();
-            text.nodeValue = value;
-            parent && parent.appendChild(text);
-            return text;
-        },
-        /**
-         *
-         * @param {string} name
-         * @returns {HTMLElement|DocumentFragment}
-         */
-        createElement: (name) => {
-            const node = document.createElement(name);
-            return node.cloneNode();
-        },
-        createFragment: (name) => {
-            return Anchor('Fragment');
-        },
-        bindTextNode: (textNode, value) => {
-            if(value?.__$isObservable) {
-                value.subscribe(newValue => textNode.nodeValue = newValue);
-                textNode.nodeValue = value.val();
-                return;
-            }
-            textNode.nodeValue = value;
-        },
-        /**
-         *
-         * @param {*} children
-         * @param {HTMLElement|DocumentFragment} parent
-         */
-        processChildren: (children, parent) => {
-            if(children === null) return;
-            let child = ElementCreator.getChild(children);
-            if(child) {
-                parent.appendChild(child);
-            }
-        },
-        async safeRemove(element) {
-            await element.remove();
-
-        },
-        getChild: (child) => {
-            if(child == null) {
-                return null;
-            }
-            if(child.toNdElement) {
-                do {
-                    child =  child.toNdElement();
-                    if(Validator.isElement(child)) {
-                        return child;
-                    }
-                } while (child.toNdElement);
+        },
+        getChild: (child) => {
+            if(child == null) {
+                return null;
+            }
+            if(child.toNdElement) {
+                do {
+                    child =  child.toNdElement();
+                    if(Validator.isElement(child)) {
+                        return child;
+                    }
+                } while (child.toNdElement);
             }
 
             return ElementCreator.createStaticTextNode(null, child);
@@ -1938,36 +1528,272 @@ var NativeComponents = (function (exports) {
     }
     DocumentFragment.prototype.setAttribute = () => {};
 
-    function NDElement(element) {
-        this.$element = element;
-        this.$attachements = null;
-    }
-
-    NDElement.prototype.__$isNDElement = true;
+    /**
+     * 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;
+            }
 
-    NDElement.prototype.ghostDom = function(element) {
-        if(!this.$attachements) {
-            this.$attachements = document.createDocumentFragment();
+            return DebugManager$1.warn('ShowIf', "ShowIf : condition must be an Observable or boolean / "+comment, condition);
         }
-        this.$attachements.appendChild(ElementCreator.getChild(element));
-        return this;
-    };
+        const element = Anchor('Show if : '+(comment || ''));
 
-    NDElement.prototype.valueOf = function() {
-        return this.$element;
-    };
+        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;
+        };
 
-    NDElement.prototype.ref = function(target, name) {
-        target[name] = this.$element;
-        return this;
-    };
+        const currentValue = condition.val();
 
-    NDElement.prototype.refSelf = function(target, name) {
-        target[name] = this;
-        // TODO: @DIM to check
-        // target[name] = new NDElement(this.$element);
-        return this;
-    };
+        if(currentValue) {
+            element.appendChild(getChildElement());
+        }
+
+        condition.subscribe((value) => {
+            if(!!value) {
+                element.appendChild(getChildElement());
+                return;
+            }
+            element.remove();
+        });
+
+        return element;
+    };
+
+    const DocumentObserver = {
+        mounted: new WeakMap(),
+        beforeUnmount: new WeakMap(),
+        mountedSupposedSize: 0,
+        unmounted: new WeakMap(),
+        unmountedSupposedSize: 0,
+        observer: null,
+        initObserver: () => {
+            if(DocumentObserver.observer) {
+                return;
+            }
+            DocumentObserver.observer = new MutationObserver(DocumentObserver.checkMutation);
+            DocumentObserver.observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+        },
+
+        executeMountedCallback(node) {
+            const data = DocumentObserver.mounted.get(node);
+            if(!data) {
+                return;
+            }
+            data.inDom = true;
+            if(!data.mounted) {
+                return;
+            }
+            if(Array.isArray(data.mounted)) {
+                for(const cb of data.mounted) {
+                    cb(node);
+                }
+                return;
+            }
+            data.mounted(node);
+        },
+
+        executeUnmountedCallback(node) {
+            const data = DocumentObserver.unmounted.get(node);
+            if(!data) {
+                return;
+            }
+            data.inDom = false;
+            if(!data.unmounted) {
+                return;
+            }
+
+            let shouldRemove = false;
+            if(Array.isArray(data.unmounted)) {
+                for(const cb of data.unmounted) {
+                    if(cb(node) === true) {
+                        shouldRemove = true;
+                    }
+                }
+            } else {
+                shouldRemove = data.unmounted(node) === true;
+            }
+
+            if(shouldRemove) {
+                data.disconnect();
+                node.nd?.remove();
+            }
+        },
+
+        checkMutation: function(mutationsList) {
+            for(const mutation of mutationsList) {
+                if(DocumentObserver.mountedSupposedSize > 0) {
+                    for(const node of mutation.addedNodes) {
+                        DocumentObserver.executeMountedCallback(node);
+                        if(!node.querySelectorAll) {
+                            continue;
+                        }
+                        const children = node.querySelectorAll('[data--nd-mounted]');
+                        for(const child of children) {
+                            DocumentObserver.executeMountedCallback(child);
+                        }
+                    }
+                }
+
+                if (DocumentObserver.unmountedSupposedSize > 0) {
+                    for (const node of mutation.removedNodes) {
+                        DocumentObserver.executeUnmountedCallback(node);
+                        if(!node.querySelectorAll) {
+                            continue;
+                        }
+                        const children = node.querySelectorAll('[data--nd-unmounted]');
+                        for(const child of children) {
+                            DocumentObserver.executeUnmountedCallback(child);
+                        }
+                    }
+                }
+            }
+        },
+
+        /**
+         * @param {HTMLElement} element
+         * @param {boolean} inDom
+         * @returns {{ disconnect: Function, mounted: Function, unmounted: Function, off: Function }}
+         */
+        watch: function(element, inDom = false) {
+            let mountedRegistered   = false;
+            let unmountedRegistered = false;
+
+            DocumentObserver.initObserver();
+
+            let data = {
+                inDom,
+                mounted: null,
+                unmounted: null,
+                disconnect: () => {
+                    if (mountedRegistered) {
+                        DocumentObserver.mounted.delete(element);
+                        DocumentObserver.mountedSupposedSize--;
+                    }
+                    if (unmountedRegistered) {
+                        DocumentObserver.unmounted.delete(element);
+                        DocumentObserver.unmountedSupposedSize--;
+                    }
+                    data = null;
+                }
+            };
+
+            const addListener = (type, callback) => {
+                if (!data[type]) {
+                    data[type] = callback;
+                    return;
+                }
+                if (!Array.isArray(data[type])) {
+                    data[type] = [data[type], callback];
+                    return;
+                }
+                data[type].push(callback);
+            };
+
+            const removeListener = (type, callback) => {
+                if(!data?.[type]) {
+                    return;
+                }
+                if(Array.isArray(data[type])) {
+                    const index = data[type].indexOf(callback);
+                    if(index > -1) {
+                        data[type].splice(index, 1);
+                    }
+                    if(data[type].length === 1) {
+                        data[type] = data[type][0];
+                    }
+                    if(data[type].length === 0) {
+                        data[type] = null;
+                    }
+                    return;
+                }
+                data[type] = null;
+            };
+
+            return {
+                disconnect: () => data?.disconnect(),
+
+                mounted: (callback) => {
+                    addListener('mounted', callback);
+                    DocumentObserver.mounted.set(element, data);
+                    if (!mountedRegistered) {
+                        DocumentObserver.mountedSupposedSize++;
+                        mountedRegistered = true;
+                    }
+                },
+
+                unmounted: (callback) => {
+                    addListener('unmounted', callback);
+                    DocumentObserver.unmounted.set(element, data);
+                    if (!unmountedRegistered) {
+                        DocumentObserver.unmountedSupposedSize++;
+                        unmountedRegistered = true;
+                    }
+                },
+
+                off: (type, callback) => {
+                    removeListener(type, callback);
+                }
+            };
+        }
+    };
+
+    function NDElement(element) {
+        this.$element = element;
+        this.$attachements = null;
+    }
+
+    NDElement.prototype.__$isNDElement = true;
+
+    NDElement.$getChild = (el) => el;
+
+    NDElement.prototype.ghostDom = function(element) {
+        if(!this.$attachements) {
+            this.$attachements = document.createDocumentFragment();
+        }
+        this.$attachements.appendChild(NDElement.$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;
@@ -2104,7 +1930,7 @@ var NativeComponents = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager$2.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
+                DebugManager$1.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
                 continue;
             }
 
@@ -2154,17 +1980,17 @@ var NativeComponents = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager$2.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
 
             if (protectedMethods.has(name)) {
-                DebugManager$2.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
                 throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
 
             if (NDElement.prototype[name]) {
-                DebugManager$2.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
@@ -2173,628 +1999,15 @@ var NativeComponents = (function (exports) {
         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;
-        },
-        isValidChildren(children) {
-            if (!Array.isArray(children)) {
-                children = [children];
-            }
-
-            const invalid = children.filter(child => !this.isValidChild(child));
-            return invalid.length === 0;
-        },
-        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(', ')}`);
-            }
-
-            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) {},
-
-        validateEventCallback(callback) {
-            if (typeof callback !== 'function') {
-                throw new NativeDocumentError('Event callback must be a function');
-            }
-        }
-    };
-
-    const cssPropertyAccumulator = function(initialValue = {}) {
-        let data = Validator.isString(initialValue) ? initialValue.split(';').filter(Boolean) : initialValue;
-
-        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 };
-            },
-        };
-    };
-
-    const classPropertyAccumulator = function(initialValue = []) {
-        let data = Validator.isString(initialValue) ? initialValue.split(" ").filter(Boolean) : initialValue;
-
-        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 };
-            },
-        };
-    };
-
-    /**
-     * 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$2.warn('ShowIf', "ShowIf : condition must be an Observable or boolean / "+comment, condition);
-        }
-        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());
-        }
-
-        condition.subscribe((value) => {
-            if(!!value) {
-                element.appendChild(getChildElement());
-                return;
-            }
-            element.remove();
-        });
-
-        return element;
-    };
-
-    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"
-    ];
-
-    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"
-    ];
-
-    const property = {
-        configurable: true,
-        get() {
-            return new NDElement(this);
-        }
-    };
-
-    Object.defineProperty(HTMLElement.prototype, 'nd', property);
-
-    Object.defineProperty(DocumentFragment.prototype, 'nd', property);
-
-    Object.defineProperty(NDElement.prototype, 'nd', {
-        configurable: true,
-        get: function() {
-            return this;
-        }
-    });
-
-
-
-    // ----------------------------------------------------------------
-    // Events helpers
-    // ----------------------------------------------------------------
-    EVENTS.forEach(eventSourceName => {
-        const eventName = eventSourceName.toLowerCase();
-        NDElement.prototype['on'+eventSourceName] = function(callback = null) {
-            this.$element.addEventListener(eventName, callback);
-            return this;
-        };
-    });
-
-    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;
-        };
-    });
-
-    EVENTS_WITH_PREVENT.forEach(eventSourceName => {
-        const eventName = eventSourceName.toLowerCase();
-        NDElement.prototype['onPrevent'+eventSourceName] = function(callback = null) {
-            _prevent(this.$element, eventName, callback);
-            return this;
-        };
-    });
-
-    NDElement.prototype.on = function(name, callback, options) {
-        this.$element.addEventListener(name.toLowerCase(), callback, options);
-        return this;
-    };
-
-    const _prevent = function(element, eventName, callback) {
-        const handler = (event) => {
-            event.preventDefault();
-            callback && callback.call(element, event);
-        };
-        element.addEventListener(eventName, handler);
-        return this;
-    };
-
-    const _stop = function(element, eventName, callback) {
-        const handler = (event) => {
-            event.stopPropagation();
-            callback && callback.call(element, event);
-        };
-        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;
-    };
-
-
-
-    // ----------------------------------------------------------------
-    // 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);
-            }
-            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
-            };
-        }
-    });
-
-    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 };
-    };
-
-    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}
-     */
-    const Div = HtmlElementWrapper('div');
-
-    /**
-     *
-     * @class
-     */
-    function BaseComponent() {
-        this.$description = {};
-        this.$editableProps = null;
-        this.$attachements = null;
-    }
+    /**
+     *
+     * @class
+     */
+    function BaseComponent() {
+        this.$description = {};
+        this.$editableProps = null;
+        this.$attachements = null;
+    }
 
     Object.defineProperty( BaseComponent.prototype, 'nd', {
         get: function() {
@@ -3499,7 +2712,7 @@ var NativeComponents = (function (exports) {
 
     Alert.preset = function(name, callback) {
         if (Alert.prototype[name] || Alert[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exist in Alert.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exist in Alert.`);
             return;
         }
         Alert[name] = (content, props) => callback(new Alert(content, props));
@@ -3813,7 +3026,7 @@ var NativeComponents = (function (exports) {
 
     Avatar.preset = function(name, callback) {
         if (Avatar.prototype[name] || Avatar[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in Avatar.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exists in Avatar.`);
             return;
         }
         Avatar[name] = (label, props) => callback(new Avatar(label, props));
@@ -4235,7 +3448,7 @@ var NativeComponents = (function (exports) {
 
     Badge.preset = function(name, callback) {
         if (Badge.prototype[name] || Badge[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in Badge.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exists in Badge.`);
             return;
         }
         Badge[name] = (content, props) => callback(new Badge(content, props));
@@ -4353,7 +3566,7 @@ var NativeComponents = (function (exports) {
 
     Breadcrumb.preset = function(name, callback) {
         if (Breadcrumb.prototype[name] || Breadcrumb[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exist in Breadcrumb.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exist in Breadcrumb.`);
             return;
         }
         Breadcrumb[name] = (props) => callback(new Breadcrumb(props));
@@ -4443,7 +3656,7 @@ var NativeComponents = (function (exports) {
 
     Button.preset = function(name, callback) {
         if (Button.prototype[name] || Button[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exist in Button.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exist in Button.`);
             return;
         }
         Button[name] = (label, props) => callback(new Button(label, props));
@@ -5325,7 +4538,7 @@ var NativeComponents = (function (exports) {
 
     Divider.preset = function(name, callback) {
         if (Divider.prototype[name] || Divider[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in Divider.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exists in Divider.`);
             return;
         }
         Divider[name] = (label, props) => callback(new Divider(label, props));
@@ -5744,7 +4957,7 @@ var NativeComponents = (function (exports) {
 
     Dropdown.preset = function(name, callback) {
         if (Dropdown.prototype[name] || Dropdown[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exist in Dropdown.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exist in Dropdown.`);
             return;
         }
         Dropdown[name] = (props) => callback(new Dropdown(props));
@@ -9799,7 +9012,7 @@ var NativeComponents = (function (exports) {
 
     Modal.preset = function(name, callback) {
         if (Modal.prototype[name] || Modal[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exist in Modal.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exist in Modal.`);
             return;
         }
         Modal[name] = (content, props) => callback(new Modal(content, props));
@@ -10050,7 +9263,7 @@ var NativeComponents = (function (exports) {
 
     Pagination.preset = function(name, callback) {
         if (Pagination.prototype[name] || Pagination[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exist in Pagination.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exist in Pagination.`);
             return;
         }
         Pagination[name] = (props) => callback(new Pagination(props));
@@ -10345,7 +9558,7 @@ var NativeComponents = (function (exports) {
 
     Popover.preset = function(name, callback) {
         if (Popover.prototype[name] || Popover[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exist in Popover.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exist in Popover.`);
             return;
         }
         Popover[name] = (content, props) => callback(new Popover(content, props));
@@ -10647,7 +9860,7 @@ var NativeComponents = (function (exports) {
 
     Progress.preset = function(name, callback) {
         if (Progress.prototype[name] || Progress[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in Progress.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exists in Progress.`);
             return;
         }
         Progress[name] = (props) => callback(new Progress(props));
@@ -10936,298 +10149,651 @@ var NativeComponents = (function (exports) {
         }
 
         Stack.call(this, content, props);
-
-        this.$description.orientation = 'vertical';
-        this.$description.alignment = 'leading';
+
+        this.$description.orientation = 'vertical';
+        this.$description.alignment = 'leading';
+    }
+    BaseComponent.extends(VStack, Stack);
+
+    VStack.defaultTemplate = null;
+    VStack.use = function(template) {
+        VStack.defaultTemplate = template;
+    };
+
+    VStack.preset = function(name, callback) {
+        if (VStack.prototype[name] || VStack[name]) {
+            DebugManager$1.warn(`Warning: the ${name} method already exists in VStack.`);
+            return;
+        }
+        VStack[name] = (content, props) => callback(new VStack(content, props));
+    };
+
+    VStack.presets = function(presets) {
+        for (const name in presets) {
+            VStack.preset(name, presets[name]);
+        }
+    };
+
+    function PositionStack(content, props = {}) {
+        if(!(this instanceof PositionStack)) {
+            return new PositionStack(content, props);
+        }
+
+        BaseComponent.call(this, props);
+
+        this.$description = {
+            position: 'absolute',
+            content:  content,
+            top: null,
+            right: null,
+            bottom: null,
+            left: null,
+            width: null,
+            height: null,
+            zIndex: null,
+            anchor: null,
+            props
+        };
+    }
+
+    BaseComponent.extends(PositionStack);
+
+    PositionStack.defaultTemplate = null;
+    PositionStack.use = function(template) {
+        PositionStack.defaultTemplate = template;
+    };
+
+    PositionStack.prototype.top = function(value) {
+        this.$description.top = value;
+        return this;
+    };
+
+    PositionStack.prototype.right = function(value) {
+        this.$description.right = value;
+        return this;
+    };
+
+    PositionStack.prototype.bottom = function(value) {
+        this.$description.bottom = value;
+        return this;
+    };
+
+    PositionStack.prototype.left = function(value) {
+        this.$description.left = value;
+        return this;
+    };
+
+    PositionStack.prototype.fill = function() {
+        this.$description.anchor = 'fill';
+        return this;
+    };
+    PositionStack.prototype.topLeading = function() {
+        this.$description.anchor = 'top-leading';
+        return this;
+    };
+
+    PositionStack.prototype.atTopCenter = function() {
+        this.$description.anchor = 'top-center';
+        return this;
+    };
+
+    PositionStack.prototype.atTopTrailing = function() {
+        this.$description.anchor = 'top-trailing';
+        return this;
+    };
+
+    PositionStack.prototype.atCenterLeading = function() {
+        this.$description.anchor = 'center-leading';
+        return this;
+    };
+
+    PositionStack.prototype.atCenter = function() {
+        this.$description.anchor = 'center';
+        return this;
+    };
+
+    PositionStack.prototype.atCenterTrailing = function() {
+        this.$description.anchor = 'center-trailing';
+        return this;
+    };
+
+    PositionStack.prototype.atBottomLeading = function() {
+        this.$description.anchor = 'bottom-leading';
+        return this;
+    };
+
+    PositionStack.prototype.atBottomCenter = function() {
+        this.$description.anchor = 'bottom-center';
+        return this;
+    };
+
+    PositionStack.prototype.atBottomTrailing = function() {
+        this.$description.anchor = 'bottom-trailing';
+        return this;
+    };
+
+    PositionStack.prototype.width = function(value) {
+        this.$description.width = value;
+        return this;
+    };
+
+    PositionStack.prototype.height = function(value) {
+        this.$description.height = value;
+        return this;
+    };
+
+    PositionStack.prototype.size = function(width, height) {
+        this.$description.width  = width;
+        this.$description.height = height ?? width;
+        return this;
+    };
+
+    PositionStack.prototype.fullWidth = function() {
+        this.$description.width = '100%';
+        return this;
+    };
+
+    PositionStack.prototype.fullHeight = function() {
+        this.$description.height = '100%';
+        return this;
+    };
+
+    PositionStack.prototype.fullSize = function() {
+        this.$description.width  = '100%';
+        this.$description.height = '100%';
+        return this;
+    };
+
+    PositionStack.prototype.zIndex = function(value) {
+        this.$description.zIndex = value;
+        return this;
+    };
+
+    PositionStack.prototype.above = function(zIndex = 100) {
+        this.$description.zIndex = zIndex;
+        return this;
+    };
+
+    PositionStack.prototype.below = function() {
+        this.$description.zIndex = -1;
+        return this;
+    };
+
+    function FixedStack(content, props = {}) {
+        if(!(this instanceof FixedStack)) {
+            return new FixedStack(content, props);
+        }
+        PositionStack.call(this, content, props);
+        this.$description.position = 'fixed';
+    }
+
+    BaseComponent.extends(FixedStack, PositionStack);
+
+    FixedStack.defaultTemplate = null;
+
+    FixedStack.use = function(template) {
+        FixedStack.defaultTemplate = template;
+    };
+
+    FixedStack.preset = function(name, callback) {
+        if(FixedStack.prototype[name] || FixedStack[name]) {
+            DebugManager$1.warn(`Warning: the ${name} method already exists in FixedStack.`);
+            return;
+        }
+        FixedStack[name] = (content, props) => callback(new FixedStack(content, props));
+    };
+
+    FixedStack.presets = function(presets) {
+        for(const name in presets) {
+            FixedStack.preset(name, presets[name]);
+        }
+    };
+
+    function HStack(content, props = {}) {
+        if (!(this instanceof HStack)) {
+            return new HStack(content, props);
+        }
+
+        Stack.call(this, content, props);
+        this.$description.orientation = 'horizontal';
     }
-    BaseComponent.extends(VStack, Stack);
 
-    VStack.defaultTemplate = null;
-    VStack.use = function(template) {
-        VStack.defaultTemplate = template;
+    BaseComponent.extends(HStack,  Stack);
+
+    HStack.defaultTemplate = null;
+    HStack.use = function(template) {
+        HStack.defaultTemplate = template;
     };
 
-    VStack.preset = function(name, callback) {
-        if (VStack.prototype[name] || VStack[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in VStack.`);
+    HStack.preset = function(name, callback) {
+        if (HStack.prototype[name] || HStack[name]) {
+            DebugManager$1.warn(`Warning: the ${name} method already exists in HStack.`);
             return;
         }
-        VStack[name] = (content, props) => callback(new VStack(content, props));
+        HStack[name] = (content, props) => callback(new HStack(content, props));
     };
 
-    VStack.presets = function(presets) {
+    HStack.presets = function(presets) {
         for (const name in presets) {
-            VStack.preset(name, presets[name]);
+            HStack.preset(name, presets[name]);
         }
     };
 
-    function PositionStack(content, props = {}) {
-        if(!(this instanceof PositionStack)) {
-            return new PositionStack(content, props);
+    function AbsoluteStack(content, props = {}) {
+        if(!(this instanceof AbsoluteStack)) {
+            return new AbsoluteStack(content, props);
         }
-
-        BaseComponent.call(this, props);
-
-        this.$description = {
-            position: 'absolute',
-            content:  content,
-            top: null,
-            right: null,
-            bottom: null,
-            left: null,
-            width: null,
-            height: null,
-            zIndex: null,
-            anchor: null,
-            props
-        };
+        PositionStack.call(this, content, props);
+        this.$description.position = 'absolute';
     }
 
-    BaseComponent.extends(PositionStack);
+    BaseComponent.extends(AbsoluteStack, PositionStack);
 
-    PositionStack.defaultTemplate = null;
-    PositionStack.use = function(template) {
-        PositionStack.defaultTemplate = template;
-    };
+    AbsoluteStack.defaultTemplate = null;
 
-    PositionStack.prototype.top = function(value) {
-        this.$description.top = value;
-        return this;
+    AbsoluteStack.use = function(template) {
+        AbsoluteStack.defaultTemplate = template;
     };
 
-    PositionStack.prototype.right = function(value) {
-        this.$description.right = value;
-        return this;
+    AbsoluteStack.preset = function(name, callback) {
+        if(AbsoluteStack.prototype[name] || AbsoluteStack[name]) {
+            DebugManager$1.warn(`Warning: the ${name} method already exists in AbsoluteStack.`);
+            return;
+        }
+        AbsoluteStack[name] = (content, props) => callback(new AbsoluteStack(content, props));
     };
 
-    PositionStack.prototype.bottom = function(value) {
-        this.$description.bottom = value;
-        return this;
+    AbsoluteStack.presets = function(presets) {
+        for(const name in presets) {
+            AbsoluteStack.preset(name, presets[name]);
+        }
     };
 
-    PositionStack.prototype.left = function(value) {
-        this.$description.left = value;
-        return this;
-    };
+    function RelativeStack(content, props = {}) {
+        if(!(this instanceof RelativeStack)) {
+            return new RelativeStack(content, props);
+        }
+        PositionStack.call(this, content, props);
+        this.$description.position = 'relative';
+    }
 
-    PositionStack.prototype.fill = function() {
-        this.$description.anchor = 'fill';
-        return this;
-    };
-    PositionStack.prototype.topLeading = function() {
-        this.$description.anchor = 'top-leading';
-        return this;
-    };
+    BaseComponent.extends(RelativeStack, PositionStack);
 
-    PositionStack.prototype.atTopCenter = function() {
-        this.$description.anchor = 'top-center';
-        return this;
-    };
+    RelativeStack.defaultTemplate = null;
 
-    PositionStack.prototype.atTopTrailing = function() {
-        this.$description.anchor = 'top-trailing';
-        return this;
+    RelativeStack.use = function(template) {
+        RelativeStack.defaultTemplate = template;
     };
 
-    PositionStack.prototype.atCenterLeading = function() {
-        this.$description.anchor = 'center-leading';
-        return this;
+    RelativeStack.preset = function(name, callback) {
+        if(RelativeStack.prototype[name] || RelativeStack[name]) {
+            DebugManager$1.warn(`Warning: the ${name} method already exists in RelativeStack.`);
+            return;
+        }
+        RelativeStack[name] = (content, props) => callback(new RelativeStack(content, props));
     };
 
-    PositionStack.prototype.atCenter = function() {
-        this.$description.anchor = 'center';
-        return this;
+    RelativeStack.presets = function(presets) {
+        for(const name in presets) {
+            RelativeStack.preset(name, presets[name]);
+        }
     };
 
-    PositionStack.prototype.atCenterTrailing = function() {
-        this.$description.anchor = 'center-trailing';
-        return this;
+    const Row = HStack;
+    const Col = VStack;
+
+    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"
+    ];
+
+    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"
+    ];
+
+    const property = {
+        configurable: true,
+        get() {
+            return new NDElement(this);
+        }
     };
 
-    PositionStack.prototype.atBottomLeading = function() {
-        this.$description.anchor = 'bottom-leading';
-        return this;
-    };
+    Object.defineProperty(HTMLElement.prototype, 'nd', property);
 
-    PositionStack.prototype.atBottomCenter = function() {
-        this.$description.anchor = 'bottom-center';
-        return this;
-    };
+    Object.defineProperty(DocumentFragment.prototype, 'nd', property);
 
-    PositionStack.prototype.atBottomTrailing = function() {
-        this.$description.anchor = 'bottom-trailing';
-        return this;
-    };
+    Object.defineProperty(NDElement.prototype, 'nd', {
+        configurable: true,
+        get: function() {
+            return this;
+        }
+    });
 
-    PositionStack.prototype.width = function(value) {
-        this.$description.width = value;
-        return this;
-    };
 
-    PositionStack.prototype.height = function(value) {
-        this.$description.height = value;
-        return this;
-    };
 
-    PositionStack.prototype.size = function(width, height) {
-        this.$description.width  = width;
-        this.$description.height = height ?? width;
-        return this;
-    };
+    // ----------------------------------------------------------------
+    // Events helpers
+    // ----------------------------------------------------------------
+    EVENTS.forEach(eventSourceName => {
+        const eventName = eventSourceName.toLowerCase();
+        NDElement.prototype['on'+eventSourceName] = function(callback = null) {
+            this.$element.addEventListener(eventName, callback);
+            return this;
+        };
+    });
 
-    PositionStack.prototype.fullWidth = function() {
-        this.$description.width = '100%';
-        return this;
-    };
+    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;
+        };
+    });
 
-    PositionStack.prototype.fullHeight = function() {
-        this.$description.height = '100%';
-        return this;
-    };
+    EVENTS_WITH_PREVENT.forEach(eventSourceName => {
+        const eventName = eventSourceName.toLowerCase();
+        NDElement.prototype['onPrevent'+eventSourceName] = function(callback = null) {
+            _prevent(this.$element, eventName, callback);
+            return this;
+        };
+    });
 
-    PositionStack.prototype.fullSize = function() {
-        this.$description.width  = '100%';
-        this.$description.height = '100%';
+    NDElement.prototype.on = function(name, callback, options) {
+        this.$element.addEventListener(name.toLowerCase(), callback, options);
         return this;
     };
 
-    PositionStack.prototype.zIndex = function(value) {
-        this.$description.zIndex = value;
+    const _prevent = function(element, eventName, callback) {
+        const handler = (event) => {
+            event.preventDefault();
+            callback && callback.call(element, event);
+        };
+        element.addEventListener(eventName, handler);
         return this;
     };
 
-    PositionStack.prototype.above = function(zIndex = 100) {
-        this.$description.zIndex = zIndex;
+    const _stop = function(element, eventName, callback) {
+        const handler = (event) => {
+            event.stopPropagation();
+            callback && callback.call(element, event);
+        };
+        element.addEventListener(eventName, handler);
         return this;
     };
 
-    PositionStack.prototype.below = function() {
-        this.$description.zIndex = -1;
+    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 FixedStack(content, props = {}) {
-        if(!(this instanceof FixedStack)) {
-            return new FixedStack(content, props);
-        }
-        PositionStack.call(this, content, props);
-        this.$description.position = 'fixed';
-    }
-
-    BaseComponent.extends(FixedStack, PositionStack);
-
-    FixedStack.defaultTemplate = null;
-
-    FixedStack.use = function(template) {
-        FixedStack.defaultTemplate = template;
-    };
-
-    FixedStack.preset = function(name, callback) {
-        if(FixedStack.prototype[name] || FixedStack[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in FixedStack.`);
-            return;
-        }
-        FixedStack[name] = (content, props) => callback(new FixedStack(content, props));
-    };
-
-    FixedStack.presets = function(presets) {
-        for(const name in presets) {
-            FixedStack.preset(name, presets[name]);
-        }
-    };
-
-    function HStack(content, props = {}) {
-        if (!(this instanceof HStack)) {
-            return new HStack(content, props);
-        }
-
-        Stack.call(this, content, props);
-        this.$description.orientation = 'horizontal';
-    }
-
-    BaseComponent.extends(HStack,  Stack);
-
-    HStack.defaultTemplate = null;
-    HStack.use = function(template) {
-        HStack.defaultTemplate = template;
-    };
 
-    HStack.preset = function(name, callback) {
-        if (HStack.prototype[name] || HStack[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in HStack.`);
-            return;
-        }
-        HStack[name] = (content, props) => callback(new HStack(content, props));
-    };
 
-    HStack.presets = function(presets) {
-        for (const name in presets) {
-            HStack.preset(name, presets[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);
+            }
+            this.$element.className = classes.join(' ');
+        },
+        contains(value) {
+            return this.getClasses().indexOf(value) >= 0;
         }
     };
 
-    function AbsoluteStack(content, props = {}) {
-        if(!(this instanceof AbsoluteStack)) {
-            return new AbsoluteStack(content, props);
+    Object.defineProperty(HTMLElement.prototype, 'classes', {
+        configurable: true,
+        get() {
+            return {
+                $element: this,
+                ...classListMethods
+            };
         }
-        PositionStack.call(this, content, props);
-        this.$description.position = 'absolute';
-    }
-
-    BaseComponent.extends(AbsoluteStack, PositionStack);
-
-    AbsoluteStack.defaultTemplate = null;
-
-    AbsoluteStack.use = function(template) {
-        AbsoluteStack.defaultTemplate = template;
-    };
+    });
 
-    AbsoluteStack.preset = function(name, callback) {
-        if(AbsoluteStack.prototype[name] || AbsoluteStack[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in AbsoluteStack.`);
-            return;
+    const normalizeComponentArgs = function(props, children = null) {
+        if(props && children) {
+            return { props, children };
         }
-        AbsoluteStack[name] = (content, props) => callback(new AbsoluteStack(content, props));
-    };
-
-    AbsoluteStack.presets = function(presets) {
-        for(const name in presets) {
-            AbsoluteStack.preset(name, presets[name]);
+        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 };
     };
 
-    function RelativeStack(content, props = {}) {
-        if(!(this instanceof RelativeStack)) {
-            return new RelativeStack(content, props);
-        }
-        PositionStack.call(this, content, props);
-        this.$description.position = 'relative';
-    }
+    const createHtmlElement = (element, _attributes, _children = null) => {
+        let { props: attributes, children = null } = normalizeComponentArgs(_attributes, _children);
 
-    BaseComponent.extends(RelativeStack, PositionStack);
+        ElementCreator.processAttributes(element, attributes);
+        ElementCreator.processChildren(children, element);
+        return element;
+    };
 
-    RelativeStack.defaultTemplate = null;
+    /**
+     *
+     * @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);            };
 
-    RelativeStack.use = function(template) {
-        RelativeStack.defaultTemplate = template;
-    };
+                return (attr, children) => createElement(attr, children)
+            }
 
-    RelativeStack.preset = function(name, callback) {
-        if(RelativeStack.prototype[name] || RelativeStack[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in RelativeStack.`);
-            return;
-        }
-        RelativeStack[name] = (content, props) => callback(new RelativeStack(content, props));
-    };
+            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);
+            };
 
-    RelativeStack.presets = function(presets) {
-        for(const name in presets) {
-            RelativeStack.preset(name, presets[name]);
+            return (attr, children) => createElement(attr, children)
         }
-    };
+        return (children, name = '') => {
+            const anchor = Anchor(name);
+            anchor.append(children);
+            return anchor;
+        };
+    }
 
-    const Row = HStack;
-    const Col = VStack;
+    /**
+     * Creates a `<div>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDivElement}
+     */
+    const Div = HtmlElementWrapper('div');
 
     function Skeleton(props = {}) {
         if (!(this instanceof Skeleton)) {
@@ -11259,7 +10825,7 @@ var NativeComponents = (function (exports) {
 
     Skeleton.preset = function(name, callback) {
         if (Skeleton.prototype[name] || Skeleton[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in Skeleton.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exists in Skeleton.`);
             return;
         }
         Skeleton[name] = (props) => callback(new Skeleton(props));
@@ -11623,7 +11189,7 @@ var NativeComponents = (function (exports) {
 
     Spinner.preset = function(name, callback) {
         if (Spinner.prototype[name] || Spinner[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exists in Spinner.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exists in Spinner.`);
             return;
         }
         Spinner[name] = (props) => callback(new Spinner(props));
@@ -12193,7 +11759,7 @@ var NativeComponents = (function (exports) {
 
     Stepper.preset = function(name, callback) {
         if (Stepper.prototype[name] || Stepper[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exist in Stepper.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exist in Stepper.`);
             return;
         }
         Stepper[name] = (props) => callback(new Stepper(props));
@@ -12708,6 +12274,195 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
+    /**
+     *
+     * @param {ObservableItem} $observable
+     * @param {Function} $checker
+     * @class ObservableChecker
+     */
+    function ObservableChecker($observable, $checker) {
+        this.observable = $observable;
+
+        ObservableItem.call(this);
+
+        this.$mutation = $checker;
+
+        $observable.subscribe((newValue) => {
+            this.$updateWithMutation(newValue);
+        });
+
+        this.$updateWithMutation($observable.val());
+    }
+
+    ObservableChecker.prototype = Object.create(ObservableItem.prototype);
+    ObservableChecker.prototype.constructor = ObservableChecker;
+    ObservableChecker.prototype.__$Observable = true;
+    ObservableChecker.prototype.__$isObservableChecker = true;
+
+
+    const ObservablePipe = ObservableChecker;
+    ObservablePipe.prototype.constructor = ObservablePipe;
+
+    ObservableChecker.prototype.$updateWithMutation = function(newValue) {
+        newValue = this.$mutation(newValue);
+        return this.set(newValue);
+    };
+
+    NDElement.$getChild = ElementCreator.getChild;
+
+    String.prototype.toNdElement = function () {
+        return ElementCreator.createStaticTextNode(null, this);
+    };
+
+    Number.prototype.toNdElement = function () {
+        return ElementCreator.createStaticTextNode(null, this.toString());
+    };
+
+    Element.prototype.toNdElement = function () {
+        return this;
+    };
+    Text.prototype.toNdElement = function () {
+        return this;
+    };
+    Comment.prototype.toNdElement = function () {
+        return this;
+    };
+    Document.prototype.toNdElement = function () {
+        return this;
+    };
+    DocumentFragment.prototype.toNdElement = function () {
+        return this;
+    };
+
+    ObservableItem.prototype.toNdElement = function () {
+        return ElementCreator.createObservableNode(null, this);
+    };
+
+    ObservableChecker.prototype.toNdElement = ObservableItem.prototype.toNdElement;
+
+    NDElement.prototype.toNdElement = function () {
+        const element = this.$element ?? this.$build?.() ?? this.build?.() ?? null;
+        if(this.$attachements) {
+            if(!this.$attachements.contains(this.$element)) {
+                this.$attachements.append(this.$element);
+            }
+            return this.$attachements;
+        }
+        return element;
+    };
+
+    Array.prototype.toNdElement = function () {
+        const fragment = document.createDocumentFragment();
+        for(let i = 0, length = this.length; i < length; i++) {
+            const child = ElementCreator.getChild(this[i]);
+            if(child === null) continue;
+            fragment.appendChild(child);
+        }
+        return fragment;
+    };
+
+    Function.prototype.toNdElement = function () {
+        const child = this;
+        return ElementCreator.getChild(child());
+    };
+
+    /**
+     * @param {HTMLElement} el
+     * @param {number} timeout
+     */
+    const waitForVisualEnd = (el, timeout = 1000) => {
+        return new Promise((resolve) => {
+            let isResolved = false;
+
+            const cleanupAndResolve = (e) => {
+                if (e && e.target !== el) return;
+                if (isResolved) return;
+
+                isResolved = true;
+                el.removeEventListener('transitionend', cleanupAndResolve);
+                el.removeEventListener('animationend', cleanupAndResolve);
+                clearTimeout(timer);
+                resolve();
+            };
+
+            el.addEventListener('transitionend', cleanupAndResolve);
+            el.addEventListener('animationend', cleanupAndResolve);
+
+            const timer = setTimeout(cleanupAndResolve, timeout);
+
+            const style = window.getComputedStyle(el);
+            const hasTransition = style.transitionDuration !== '0s';
+            const hasAnimation = style.animationDuration !== '0s';
+
+            if (!hasTransition && !hasAnimation) {
+                cleanupAndResolve();
+            }
+        });
+    };
+
+    NDElement.prototype.transitionOut = function(transitionName) {
+        const exitClass = transitionName + '-exit';
+        const el = this.$element;
+        this.beforeUnmount('transition-exit', async function() {
+            el.classes.add(exitClass);
+            await waitForVisualEnd(el);
+            el.classes.remove(exitClass);
+        });
+        return this;
+    };
+
+    NDElement.prototype.transitionIn = function(transitionName) {
+        const startClass = transitionName + '-enter-from';
+        const endClass = transitionName + '-enter-to';
+
+        const el = this.$element;
+
+        el.classes.add(startClass);
+
+        this.mounted(() => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    el.classes.remove(startClass);
+                    el.classes.add(endClass);
+
+                    waitForVisualEnd(el).then(() => {
+                        el.classes.remove(endClass);
+                    });
+                });
+            });
+        });
+        return this;
+    };
+
+
+    NDElement.prototype.transition = function (transitionName) {
+        this.transitionIn(transitionName);
+        this.transitionOut(transitionName);
+        return this;
+    };
+
+    NDElement.prototype.animate = function(animationName) {
+        const el = this.$element;
+        el.classes.add(animationName);
+
+        waitForVisualEnd(el).then(() => {
+            el.classes.remove(animationName);
+        });
+
+        return this;
+    };
+
+    ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
+        if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+            bindBooleanAttribute(element, attributeName, this);
+            return;
+        }
+
+        bindAttributeWithObservable(element, attributeName, this);
+    };
+
+    ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
+
     function ColumnGroup(title, props = {}) {
         this.$description = {
             header: title,
@@ -13146,7 +12901,7 @@ var NativeComponents = (function (exports) {
 
     DataTable.prototype.selectedRows = function($obs) {
         if(!$obs.__$isObservableArray) {
-            DebugManager$2.warn('Database', 'selectedRow should take an Observable array');
+            DebugManager$1.warn('Database', 'selectedRow should take an Observable array');
         }
         this.$description.$selectedRows = $obs;
         return this;
@@ -13693,7 +13448,7 @@ var NativeComponents = (function (exports) {
 
     Tooltip.preset = function(name, callback) {
         if (Tooltip.prototype[name] || Tooltip[name]) {
-            DebugManager$2.warn(`Warning: the ${name} method already exist in Tooltip.`);
+            DebugManager$1.warn(`Warning: the ${name} method already exist in Tooltip.`);
             return;
         }
         Tooltip[name] = (content, props) => callback(new Tooltip(content, props));