native-document 1.0.137 → 1.0.139

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

@@ -1,1025 +1,1132 @@
 var NativeComponents = (function (exports) {
     'use strict';
 
-    /**
-     *
-     * @class
-     */
-    function BaseComponent() {
-        this.$description = {};
+    let DebugManager$2 = {};
+    {
+        DebugManager$2 = {
+            log() {},
+            warn() {},
+            error() {},
+            disable() {}
+        };
     }
+    var DebugManager$1 = DebugManager$2;
 
-    Object.defineProperty( BaseComponent.prototype, 'nd', {
-        get: function() {
-            if(this.$element) {
-                return this.$element.nd;
-            }
-            this.$storeElement(this.toNdElement());
-            return this.$element?.nd;
-        }
-    });
-
-
-    BaseComponent.extends = function(Component, ...parents) {
-        const MainParent = parents[0] || BaseComponent;
-        Component.prototype = Object.create(MainParent.prototype);
-
-        if(parents.length > 0) {
-            for(const parent of parents) {
-                Object.assign(Component.prototype, parent.prototype);
-            }
-        }
-        Component.prototype.constructor = Component;
-    };
-
-    BaseComponent.use = function(Component, ...traits) {
-        if(traits.length > 0) {
-            for(const trait of traits) {
-                Object.assign(Component.prototype, trait.prototype);
-            }
-        }
-    };
-
-    BaseComponent.obs = (value) => {
-        return value.__$Observable ? value : Observable(value);
-    };
-
-    BaseComponent.prototype.$storeElement = function(element) {
-        this.$element = element;
-        return this;
-    };
-
-    BaseComponent.prototype.refSelf = function(target, name) {
-        target[name] = this;
-        return this;
-    };
-
-    BaseComponent.prototype.$build = function() {
-        const ComponentClass = this.constructor;
-        const renderer = this.$description.render || ComponentClass.defaultTemplate;
-
-        if (!renderer) {
-            throw new Error(`No renderer for ${ComponentClass.name}`);
-        }
-
-        return renderer(this.$description, this);
-    };
-
-    BaseComponent.prototype.toNdElement = function() {
-        if (this.$element) {
-            return this.$element;
-        }
-        this.$element = this.$build();
-        return this.$element;
-    };
-
-    BaseComponent.prototype.toJSON = function() {
-        if(!this.$description) {
-            return {};
-        }
-        return { ...this.$description };
-    };
-
-    BaseComponent.prototype.render = function(renderFn) {
-        if (typeof renderFn !== 'function') {
-            throw new Error('Custom renderer must be a function');
+    class NativeDocumentError extends Error {
+        constructor(message, context = {}) {
+            super(message);
+            this.name = 'NativeDocumentError';
+            this.context = context;
+            this.timestamp = new Date().toISOString();
         }
-        this.$description.render = renderFn;
-        return this;
-    };
-
-    function HasEventEmitter() {
-
-        this.__$events = null;
-
     }
 
-    HasEventEmitter.prototype.on = function(eventName, callback) {
-        if(!this.__$events) {
-            this.__$events = new Map();
-        }
-        if(!this.__$events.has(eventName)) {
-            this.__$events.set(eventName, callback);
-            return;
-        }
-        const existingCallback = this.__$events.get(eventName);
-        if(!Array.isArray(existingCallback)) {
-            this.__$events.set(eventName, [existingCallback, callback]);
-            return;
-        }
-        existingCallback.push(callback);
-    };
-
-    HasEventEmitter.prototype.hasListeners = function(eventName) {
-        return !!this.__$events.get(eventName);
-    };
-
-    HasEventEmitter.prototype.trigger = async function(eventName, ...args) {
-        const callbacks = this.__$events.get(eventName);
-        if(!callbacks) {
-            // throw new NativeDocumentError(this.constructor.name, 'Event '+eventName+' not found');
-            return;
-        }
-
-        if(typeof callbacks === 'function') {
-            return await Promise.resolve(callbacks.apply(this, args))
-        }
-
-        let result = null;
-        for(let i = 0, length = callbacks.length; i < length; i++) {
-            result = await Promise.resolve(await callbacks[i].apply(this, args));
-        }
-        return result;
-    };
-    HasEventEmitter.prototype.emit = HasEventEmitter.prototype.trigger;
-
-    /**
-     * Valid children types that can be rendered in the DOM
-     * @typedef {HTMLElement|Text|DocumentFragment|string|Array<ValidChildren>} ValidChildren
-     */
-
     /**
-     * Component for creating accordion interfaces with expandable/collapsible items
-     * @param {{ items?: Array<AccordionItem>, multiple?: boolean, variant?: string, renderContent?: (field: Accordion) => HTMLElement }} config
-     * @returns {Accordion}
-     * @class
+     *
+     * @param {ObservableItem} $observable
+     * @param {Function} $checker
+     * @class ObservableChecker
      */
-    function Accordion(config = {}) {
-        if (!(this instanceof Accordion)) {
-            return new Accordion(config);
-        }
-
-        this.$description = {
-            items: [],
-            multiple: null,
-            variant: null,
-            renderContent: null,
-            ...config
-        };
+    function ObservableChecker($observable, $checker) {
+        this.observable = $observable;
+        this.checker = $checker;
+        this.unSubscriptions = [];
     }
 
-    BaseComponent.extends(Accordion, HasEventEmitter);
-
-    Accordion.defaultTemplate = null;
+    ObservableChecker.prototype.__$Observable = true;
+    ObservableChecker.prototype.__$isObservableChecker = true;
 
+    /**
+     * Subscribes to changes in the checked/transformed value.
+     *
+     * @param {Function} callback - Function called with the transformed value when observable changes
+     * @returns {Function} Unsubscribe function
+     * @example
+     * const count = Observable(5);
+     * const doubled = count.check(n => n * 2);
+     * doubled.subscribe(value => console.log(value)); // Logs: 10
+     */
+    ObservableChecker.prototype.subscribe = function(callback) {
+        const unSubscribe = this.observable.subscribe((value) => {
+            callback && callback(this.checker(value));
+        });
+        this.unSubscriptions.push(unSubscribe);
+        return unSubscribe;
+    };
 
     /**
-     * Sets the default template for all Accordion instances
-     * @param {{accordion: (accordion: Accordion) => ValidChildren}} template - Template object containing accordion factory function
+     * Creates a new ObservableChecker by applying another transformation.
+     * Allows chaining transformations.
+     *
+     * @param {(value: *) => *} callback - Transformation function to apply to the current checked value
+     * @returns {ObservableChecker} New ObservableChecker with chained transformation
+     * @example
+     * const count = Observable(5);
+     * const result = count.check(n => n * 2).check(n => n + 1);
+     * result.val(); // 11
      */
-    Accordion.use = function(template) {
-        Accordion.defaultTemplate = template.accordion;
+    ObservableChecker.prototype.check = function(callback) {
+        return this.observable.check(() => callback(this.val()));
     };
 
     /**
-     * Adds an accordion item to the collection
-     * @param {AccordionItem} accordionItem - The accordion item to add
-     * @returns {Accordion}
+     * Gets the current transformed/checked value.
+     *
+     * @returns {*} The result of applying the checker function to the observable's current value
+     * @example
+     * const count = Observable(5);
+     * const doubled = count.check(n => n * 2);
+     * doubled.val(); // 10
      */
-    Accordion.prototype.item = function(accordionItem) {
-        this.$description.items.push(accordionItem);
-        return this;
+    ObservableChecker.prototype.val = function() {
+        return this.checker && this.checker(this.observable.val());
     };
 
     /**
-     * Sets the accordion items collection
-     * @param {Array<AccordionItem>} items - Array of accordion items
-     * @returns {Accordion}
+     * Sets the value of the underlying observable (not the transformed value).
+     *
+     * @param {*} value - New value for the underlying observable
+     * @example
+     * const count = Observable(5);
+     * const doubled = count.check(n => n * 2);
+     * doubled.set(10); // Sets count to 10, doubled.val() returns 20
      */
-    Accordion.prototype.items = function(items) {
-        this.$description.items = items;
-        return this;
+    ObservableChecker.prototype.set = function(value) {
+        return this.observable.set(value);
     };
 
     /**
-     * Alias for item method
-     * @param {AccordionItem} accordionItem - The accordion item to add
-     * @returns {Accordion}
+     * Manually triggers the underlying observable to notify subscribers.
+     *
+     * @example
+     * const count = Observable(5);
+     * const doubled = count.check(n => n * 2);
+     * doubled.trigger(); // Notifies all subscribers
      */
-    Accordion.prototype.addItem = Accordion.prototype.item;
+    ObservableChecker.prototype.trigger = function() {
+        return this.observable.trigger();
+    };
 
     /**
-     * Removes an item by its id
-     * @param {string} id - The id of the item to remove
-     * @returns {Accordion}
+     * Cleans up the underlying observable and all its subscriptions.
      */
-    Accordion.prototype.removeItemById = function(id) {
-        if (this.$description.items) {
-            this.$description.items = this.$description.items.filter(item => item.id !== id);
-        }
-        return this;
+    ObservableChecker.prototype.cleanup = function() {
+        return this.observable.cleanup();
     };
 
-    /**
-     * Removes items matching the filter function
-     * @param {Function} filter - Filter function to determine which items to keep
-     * @returns {Accordion}
-     */
-    Accordion.prototype.remove = function(filter) {
-        if (this.$description.items) {
-            this.$description.items = this.$description.items.filter(filter);
-        }
-        return this;
-    };
+    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,
+            });
+        },
 
-    /**
-     * Enables or disables multiple items expansion
-     * @param {boolean} [enabled=true] - Whether multiple items can be expanded simultaneously
-     * @returns {Accordion}
-     */
-    Accordion.prototype.multiple = function(enabled = true) {
-        this.$description.multiple = enabled;
-        return this;
-    };
+        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);
+        },
 
-    /**
-     * Sets the variant style for the accordion
-     * @param {string} name - The variant name
-     * @returns {Accordion}
-     */
-    Accordion.prototype.variant = function(name) {
-        this.$description.variant = name;
-        return this;
-    };
+        executeUnmountedCallback(node) {
+            const data = DocumentObserver.unmounted.get(node);
+            if(!data) {
+                return;
+            }
+            data.inDom = false;
+            if(!data.unmounted) {
+                return;
+            }
 
-    /**
-     * Sets the accordion variant to 'bordered'
-     * @returns {Accordion}
-     */
-    Accordion.prototype.bordered = function() {
-        return this.variant('bordered');
+            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) {
+            console.log('mutationsList', 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);
+                }
+            };
+        }
     };
 
-    /**
-     * Sets the accordion variant to 'separated'
-     * @returns {Accordion}
-     */
-    Accordion.prototype.separated = function() {
-        return this.variant('separated');
+    function NDElement(element) {
+        this.$element = element;
+    }
+
+    NDElement.prototype.__$isNDElement = true;
+
+    NDElement.prototype.valueOf = function() {
+        return this.$element;
     };
 
-    /**
-     * Sets the accordion variant to 'flush'
-     * @returns {Accordion}
-     */
-    Accordion.prototype.flush = function() {
-        return this.variant('flush');
+    NDElement.prototype.ref = function(target, name) {
+        target[name] = this.$element;
+        return this;
     };
 
-    /**
-     * Retrieves an accordion item by its key
-     * @param {string} key - The key of the item to retrieve
-     * @returns {AccordionItem|undefined}
-     */
-    Accordion.prototype.getByKey = function(key) {
-        return this.$description.items.find(item => item.key === key);
+    NDElement.prototype.refSelf = function(target, name) {
+        target[name] = new NDElement(this.$element);
+        return this;
     };
 
-    /**
-     * Expands or collapses an accordion item by key
-     * @param {string} key - The key of the item
-     * @param {boolean} [state=true] - Whether to expand (true) or collapse (false)
-     * @returns {Accordion}
-     */
-    Accordion.prototype.expanded = function(key, state = true) {
-        const item = this.getByKey(key);
-        if(item) {
-            if (state && !this.$description.multiple) {
-                this.collapseAll();
+    NDElement.prototype.unmountChildren = function() {
+        let element = this.$element;
+        for(let i = 0, length = element.children.length; i < length; i++) {
+            let elementChildren = element.children[i];
+            if(!elementChildren.$ndProx) {
+                elementChildren.nd?.remove();
             }
-            item.expanded(state);
-            this.emit(state ? 'expand' : 'collapse', key, state);
+            elementChildren = null;
         }
+        element = null;
         return this;
     };
 
-    /**
-     * Expands all accordion items
-     * @returns {Accordion}
-     */
-    Accordion.prototype.expandAll = function() {
-        this.$description.items.forEach(item => item.expanded(true));
+    NDElement.prototype.remove = function() {
+        let element = this.$element;
+        element.nd.unmountChildren();
+        element.$ndProx = null;
+
+        $lifeCycleObservers.delete(element);
+
+        element = null;
         return this;
     };
 
-    /**
-     * Collapses all accordion items
-     * @returns {Accordion}
-     */
-    Accordion.prototype.collapseAll = function() {
-        this.$description.items.forEach(item => item.expanded(false));
+    const $lifeCycleObservers = new WeakMap();
+    NDElement.prototype.lifecycle = function(states) {
+        const el = this.$element;
+        if (!$lifeCycleObservers.has(el)) {
+            $lifeCycleObservers.set(el, DocumentObserver.watch(el));
+        }
+        const observer = $lifeCycleObservers.get(el);
+
+        if(states.mounted) {
+            this.$element.setAttribute('data--nd-mounted', '1');
+            observer.mounted(states.mounted);
+        }
+        if(states.unmounted) {
+            this.$element.setAttribute('data--nd-unmounted', '1');
+            observer.unmounted(states.unmounted);
+        }
         return this;
     };
 
-    /**
-     * Checks if an accordion item is expanded
-     * @param {string} key - The key of the item to check
-     * @returns {boolean|undefined}
-     */
-    Accordion.prototype.isExpanded = function(key) {
-        return this.getByKey(key)?.isExpanded?.();
+    NDElement.prototype.mounted = function(callback) {
+        return this.lifecycle({ mounted: callback });
     };
 
-    /**
-     * Registers a handler for the expand event
-     * @param {Function} handler - The event handler
-     * @returns {Accordion}
-     */
-    Accordion.prototype.onExpand = function(handler) {
-        this.on('expand', handler);
-        return this;
+    NDElement.prototype.unmounted = function(callback) {
+        return this.lifecycle({ unmounted: callback });
     };
 
-    /**
-     * Registers a handler for the collapse event
-     * @param {Function} handler - The event handler
-     * @returns {Accordion}
-     */
-    Accordion.prototype.onCollapse = function(handler) {
-        this.on('collapse', handler);
-        return this;
-    };
+    NDElement.prototype.beforeUnmount = function(id, callback) {
+        const el = this.$element;
 
-    /**
-     * Sets the content render function
-     * @param {Function} renderFn - Function to render content
-     * @returns {Accordion}
-     */
-    Accordion.prototype.renderContent = function(renderFn) {
-        this.$description.renderContent = renderFn;
+        if(!DocumentObserver.beforeUnmount.has(el)) {
+            DocumentObserver.beforeUnmount.set(el, new Map());
+            const originalRemove = el.remove.bind(el);
+
+            let  $isUnmounting = false;
+
+            el.remove = async () => {
+                if($isUnmounting) {
+                    return;
+                }
+                $isUnmounting = true;
+
+                try {
+                    const callbacks = DocumentObserver.beforeUnmount.get(el);
+                    for (const cb of callbacks.values()) {
+                        await cb.call(this, el);
+                    }
+                } finally {
+                    originalRemove();
+                    $isUnmounting = false;
+                }
+            };
+        }
+
+        DocumentObserver.beforeUnmount.get(el).set(id, callback);
         return this;
     };
 
-    /**
-     * Builds the accordion component
-     * @private
-     */
-    Accordion.prototype.$build = function() {
-        // TODO: Implementation
-        // this.$description.items.forEach(item => {
-        //     item.onExpand(() => {
-        //         if (!this.$description.multiple) {
-        //             this.$description.items
-        //                 .filter(i => i !== item)
-        //                 .forEach(i => i.expanded(false));
-        //         }
-        //     });
-        // });
+    NDElement.prototype.htmlElement = function() {
+        return this.$element;
     };
 
-    let DebugManager$2 = {};
-    {
-        DebugManager$2 = {
-            log() {},
-            warn() {},
-            error() {},
-            disable() {}
-        };
-    }
-    var DebugManager$1 = DebugManager$2;
+    NDElement.prototype.node = NDElement.prototype.htmlElement;
 
-    class NativeDocumentError extends Error {
-        constructor(message, context = {}) {
-            super(message);
-            this.name = 'NativeDocumentError';
-            this.context = context;
-            this.timestamp = new Date().toISOString();
+    NDElement.prototype.shadow = function(mode, style = null) {
+        const $element = this.$element;
+        const children = Array.from($element.childNodes);
+        const shadowRoot = $element.attachShadow({ mode });
+        if(style) {
+            const styleNode = document.createElement("style");
+            styleNode.textContent = style;
+            shadowRoot.appendChild(styleNode);
         }
-    }
-
-    /**
-     *
-     * @param {ObservableItem} $observable
-     * @param {Function} $checker
-     * @class ObservableChecker
-     */
-    function ObservableChecker($observable, $checker) {
-        this.observable = $observable;
-        this.checker = $checker;
-        this.unSubscriptions = [];
-    }
+        $element.append = shadowRoot.append.bind(shadowRoot);
+        $element.appendChild = shadowRoot.appendChild.bind(shadowRoot);
+        shadowRoot.append(...children);
 
-    ObservableChecker.prototype.__$Observable = true;
-    ObservableChecker.prototype.__$isObservableChecker = true;
+        return this;
+    };
 
-    /**
-     * Subscribes to changes in the checked/transformed value.
-     *
-     * @param {Function} callback - Function called with the transformed value when observable changes
-     * @returns {Function} Unsubscribe function
-     * @example
-     * const count = Observable(5);
-     * const doubled = count.check(n => n * 2);
-     * doubled.subscribe(value => console.log(value)); // Logs: 10
-     */
-    ObservableChecker.prototype.subscribe = function(callback) {
-        const unSubscribe = this.observable.subscribe((value) => {
-            callback && callback(this.checker(value));
-        });
-        this.unSubscriptions.push(unSubscribe);
-        return unSubscribe;
+    NDElement.prototype.openShadow = function(style = null) {
+        return this.shadow('open', style);
     };
 
-    /**
-     * Creates a new ObservableChecker by applying another transformation.
-     * Allows chaining transformations.
-     *
-     * @param {(value: *) => *} callback - Transformation function to apply to the current checked value
-     * @returns {ObservableChecker} New ObservableChecker with chained transformation
-     * @example
-     * const count = Observable(5);
-     * const result = count.check(n => n * 2).check(n => n + 1);
-     * result.val(); // 11
-     */
-    ObservableChecker.prototype.check = function(callback) {
-        return this.observable.check(() => callback(this.val()));
+    NDElement.prototype.closedShadow = function(style = null) {
+        return this.shadow('closed', style);
     };
 
     /**
-     * Gets the current transformed/checked value.
+     * Extends the current NDElement instance with custom methods.
+     * Methods are bound to the instance and available for chaining.
      *
-     * @returns {*} The result of applying the checker function to the observable's current value
+     * @param {Object} methods - Object containing method definitions
+     * @returns {this} The NDElement instance with added methods for chaining
      * @example
-     * const count = Observable(5);
-     * const doubled = count.check(n => n * 2);
-     * doubled.val(); // 10
+     * element.nd.with({
+     *   highlight() {
+     *     this.$element.style.background = 'yellow';
+     *     return this;
+     *   }
+     * }).highlight().onClick(() => console.log('Clicked'));
      */
-    ObservableChecker.prototype.val = function() {
-        return this.checker && this.checker(this.observable.val());
-    };
+    NDElement.prototype.with = function(methods) {
+        if (!methods || typeof methods !== 'object') {
+            throw new NativeDocumentError('extend() requires an object of methods');
+        }
+
+        for (const name in methods) {
+            const method = methods[name];
+
+            if (typeof method !== 'function') {
+                console.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
+                continue;
+            }
+
+            this[name] = method.bind(this);
+        }
 
-    /**
-     * Sets the value of the underlying observable (not the transformed value).
-     *
-     * @param {*} value - New value for the underlying observable
-     * @example
-     * const count = Observable(5);
-     * const doubled = count.check(n => n * 2);
-     * doubled.set(10); // Sets count to 10, doubled.val() returns 20
-     */
-    ObservableChecker.prototype.set = function(value) {
-        return this.observable.set(value);
+        return this;
     };
 
     /**
-     * Manually triggers the underlying observable to notify subscribers.
+     * Extends the NDElement prototype with new methods available to all NDElement instances.
+     * Use this to add global methods to all NDElements.
      *
+     * @param {Object} methods - Object containing method definitions to add to prototype
+     * @returns {typeof NDElement} The NDElement constructor
+     * @throws {NativeDocumentError} If methods is not an object or contains non-function values
      * @example
-     * const count = Observable(5);
-     * const doubled = count.check(n => n * 2);
-     * doubled.trigger(); // Notifies all subscribers
+     * NDElement.extend({
+     *   fadeIn() {
+     *     this.$element.style.opacity = '1';
+     *     return this;
+     *   }
+     * });
+     * // Now all NDElements have .fadeIn() method
+     * Div().nd.fadeIn();
      */
-    ObservableChecker.prototype.trigger = function() {
-        return this.observable.trigger();
-    };
+    NDElement.extend = function(methods) {
+        if (!methods || typeof methods !== 'object') {
+            throw new NativeDocumentError('NDElement.extend() requires an object of methods');
+        }
 
-    /**
-     * Cleans up the underlying observable and all its subscriptions.
-     */
-    ObservableChecker.prototype.cleanup = function() {
-        return this.observable.cleanup();
-    };
+        if (Array.isArray(methods)) {
+            throw new NativeDocumentError('NDElement.extend() requires an object, not an array');
+        }
 
-    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,
-            });
-        },
+        const protectedMethods = new Set([
+            'constructor', 'valueOf', '$element', '$observer',
+            'ref', 'remove', 'cleanup', 'with', 'extend', 'attach',
+            'lifecycle', 'mounted', 'unmounted', 'unmountChildren'
+        ]);
 
-        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;
+        for (const name in methods) {
+            if (!Object.hasOwn(methods, name)) {
+                continue;
             }
-            data.mounted(node);
-        },
 
-        executeUnmountedCallback(node) {
-            const data = DocumentObserver.unmounted.get(node);
-            if(!data) {
-                return;
+            const method = methods[name];
+
+            if (typeof method !== 'function') {
+                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                continue;
             }
-            data.inDom = false;
-            if(!data.unmounted) {
-                return;
+
+            if (protectedMethods.has(name)) {
+                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
 
-            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 (NDElement.prototype[name]) {
+                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
-            if(shouldRemove) {
-                data.disconnect();
-                node.nd?.remove();
+            NDElement.prototype[name] = method;
+        }
+
+        return NDElement;
+    };
+
+    const COMMON_NODE_TYPES = {
+        ELEMENT: 1,
+        TEXT: 3,
+        COMMENT: 8,
+        DOCUMENT_FRAGMENT: 11
+    };
+
+    const VALID_TYPES = [];
+    VALID_TYPES[COMMON_NODE_TYPES.ELEMENT] = true;
+    VALID_TYPES[COMMON_NODE_TYPES.TEXT] = true;
+    VALID_TYPES[COMMON_NODE_TYPES.DOCUMENT_FRAGMENT] = true;
+    VALID_TYPES[COMMON_NODE_TYPES.COMMENT] = true;
+
+    const Validator = {
+        isObservable(value) {
+            return  value?.__$isObservable;
+        },
+        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];
+            }
 
-        checkMutation: function(mutationsList) {
-            console.log('mutationsList', 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);
-                        }
-                    }
-                }
+            const invalid = children.filter(child => !this.isValidChild(child));
+            if (invalid.length > 0) {
+                throw new NativeDocumentError(`Invalid children detected: ${invalid.map(i => typeof i).join(', ')}`);
+            }
 
-                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);
-                        }
-                    }
-                }
+            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));
         },
-
         /**
-         * @param {HTMLElement} element
-         * @param {boolean} inDom
-         * @returns {{ disconnect: Function, mounted: Function, unmounted: Function, off: Function }}
+         * Check if the data contains an observable reference.
+         * @param {string} data
+         * @returns {boolean}
          */
-        watch: function(element, inDom = false) {
-            let mountedRegistered   = false;
-            let unmountedRegistered = false;
+        containsObservableReference(data) {
+            if(!data || typeof data !== 'string') {
+                return false;
+            }
+            return /\{\{#ObItem::\([0-9]+\)\}\}/.test(data);
+        },
+        validateAttributes(attributes) {},
 
-            DocumentObserver.initObserver();
+        validateEventCallback(callback) {
+            if (typeof callback !== 'function') {
+                throw new NativeDocumentError('Event callback must be a function');
+            }
+        }
+    };
 
-            let data = {
-                inDom,
-                mounted: null,
-                unmounted: null,
-                disconnect: () => {
-                    if (mountedRegistered) {
-                        DocumentObserver.mounted.delete(element);
-                        DocumentObserver.mountedSupposedSize--;
-                    }
-                    if (unmountedRegistered) {
-                        DocumentObserver.unmounted.delete(element);
-                        DocumentObserver.unmountedSupposedSize--;
+    function createMultiSourceFilter(sources, callbackFn){
+        const observables = sources.filter(Validator.isObservable);
+
+        const getValues = () => sources.map(src =>
+            Validator.isObservable(src) ? src.val() : src
+        );
+
+        return {
+            dependencies: observables.length > 0 ? observables : null,
+            callback: (value) => callbackFn(value, getValues())
+        };
+    }
+
+    function match(patternObservableOrValue, asRegexObservableOrValue = true, flagsObservableOrValue = ''){
+        return createMultiSourceFilter(
+            [patternObservableOrValue, asRegexObservableOrValue, flagsObservableOrValue],
+            (value, [pattern, asRegex, flags]) => {
+                if (!pattern) return true;
+
+                if (asRegex){
+                    try {
+                        const regex = new RegExp(pattern, flags);
+                        return regex.test(String(value));
+                    } catch (error){
+                        console.warn('Invalid regex pattern:', pattern, error);
+                        return false;
                     }
-                    data = null;
                 }
-            };
 
-            const addListener = (type, callback) => {
-                if (!data[type]) {
-                    data[type] = callback;
-                    return;
+                if (!flags || flags === ''){
+                    return String(value).toLowerCase().includes(String(pattern).toLowerCase());
                 }
-                if (!Array.isArray(data[type])) {
-                    data[type] = [data[type], callback];
+                return String(value).includes(String(pattern));
+            }
+        );
+    }
+
+    const cssPropertyAccumulator = function(initialValue = {}) {
+        let data = Validator.isString(initialValue) ? initialValue.split(';').filter(Boolean) : initialValue;
+        const isArray = Validator.isArray(data);
+
+        return {
+            add(key, value) {
+                if(isArray) {
+                    data.push(key+':  '+value);
                     return;
                 }
-                data[type].push(callback);
-            };
+                data[key] = value;
+            },
+            value() {
+                if(isArray) {
+                    return data.join(';').concat(';');
+                }
+                return { ...data };
+            },
+        };
+    };
 
-            const removeListener = (type, callback) => {
-                if(!data?.[type]) {
+    const classPropertyAccumulator = function(initialValue = []) {
+        let data = Validator.isString(initialValue) ? initialValue.split(" ").filter(Boolean) : initialValue;
+        const isArray = Validator.isArray(data);
+
+        return {
+            add(key, value = true) {
+                if(isArray) {
+                    data.push(key);
                     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[key] = value;
+            },
+            value() {
+                if(isArray) {
+                    return data.join(' ');
                 }
-                data[type] = null;
-            };
+                return { ...data };
+            },
+        };
+    };
 
-            return {
-                disconnect: () => data?.disconnect(),
+    /**
+     *
+     * @class
+     */
+    function BaseComponent() {
+        this.$description = {};
+        this.$editableProps = null;
+    }
 
-                mounted: (callback) => {
-                    addListener('mounted', callback);
-                    DocumentObserver.mounted.set(element, data);
-                    if (!mountedRegistered) {
-                        DocumentObserver.mountedSupposedSize++;
-                        mountedRegistered = true;
-                    }
-                },
+    Object.defineProperty( BaseComponent.prototype, 'nd', {
+        get: function() {
+            if(this.$element) {
+                return this.$element.nd;
+            }
+            this.$storeElement(this.toNdElement());
+            return this.$element?.nd;
+        }
+    });
 
-                unmounted: (callback) => {
-                    addListener('unmounted', callback);
-                    DocumentObserver.unmounted.set(element, data);
-                    if (!unmountedRegistered) {
-                        DocumentObserver.unmountedSupposedSize++;
-                        unmountedRegistered = true;
-                    }
-                },
 
-                off: (type, callback) => {
-                    removeListener(type, callback);
-                }
-            };
+    BaseComponent.extends = function(Component, ...parents) {
+        const MainParent = parents[0] || BaseComponent;
+        Component.prototype = Object.create(MainParent.prototype);
+
+        if(parents.length > 0) {
+            for(const parent of parents) {
+                Object.assign(Component.prototype, parent.prototype);
+            }
         }
+        Component.prototype.constructor = Component;
     };
 
-    function NDElement(element) {
+    BaseComponent.use = function(Component, ...traits) {
+        if(traits.length > 0) {
+            for(const trait of traits) {
+                Object.assign(Component.prototype, trait.prototype);
+            }
+        }
+    };
+
+    BaseComponent.obs = (value) => {
+        return value.__$Observable ? value : Observable(value);
+    };
+
+    BaseComponent.prototype.$storeElement = function(element) {
         this.$element = element;
-    }
+        return this;
+    };
 
-    NDElement.prototype.__$isNDElement = true;
+    BaseComponent.prototype.refSelf = function(target, name) {
+        target[name] = this;
+        return this;
+    };
 
-    NDElement.prototype.valueOf = function() {
+    BaseComponent.prototype.$build = function() {
+        const ComponentClass = this.constructor;
+        const renderer = this.$description.render || ComponentClass.defaultTemplate;
+
+        if (!renderer) {
+            throw new Error(`No renderer for ${ComponentClass.name}`);
+        }
+
+        return renderer(this.$description, this);
+    };
+
+    BaseComponent.prototype.toNdElement = function() {
+        if (this.$element) {
+            return this.$element;
+        }
+        this.$element = this.$build();
         return this.$element;
     };
 
-    NDElement.prototype.ref = function(target, name) {
-        target[name] = this.$element;
-        return this;
+    BaseComponent.prototype.toJSON = function() {
+        if(!this.$description) {
+            return {};
+        }
+        return { ...this.$description };
     };
 
-    NDElement.prototype.refSelf = function(target, name) {
-        target[name] = new NDElement(this.$element);
+    BaseComponent.prototype.render = function(renderFn) {
+        if (typeof renderFn !== 'function') {
+            throw new Error('Custom renderer must be a function');
+        }
+        this.$description.render = renderFn;
         return this;
     };
 
-    NDElement.prototype.unmountChildren = function() {
-        let element = this.$element;
-        for(let i = 0, length = element.children.length; i < length; i++) {
-            let elementChildren = element.children[i];
-            if(!elementChildren.$ndProx) {
-                elementChildren.nd?.remove();
-            }
-            elementChildren = null;
+    BaseComponent.prototype.getEditableProps = function() {
+        if(!this.$editableProps) {
+            const rawProps = this.$description.props || {};
+            this.$editableProps = {
+                ...rawProps,
+                class: classPropertyAccumulator(this.$description.props.class),
+                style: cssPropertyAccumulator(this.$description.props.style)
+            };
         }
-        element = null;
-        return this;
+
+        return this.$editableProps;
     };
 
-    NDElement.prototype.remove = function() {
-        let element = this.$element;
-        element.nd.unmountChildren();
-        element.$ndProx = null;
+    BaseComponent.prototype.resolveProps = function() {
+        if(!this.$editableProps) {
+            return { ...this.$description.props };
+        }
+        const props = { ...this.$editableProps };
+        if(props.class) {
+            props.class = props.class.value();
+        }
+        if(props.style) {
+            props.style = props.style.value();
+        }
+        return props;
+    };
 
-        $lifeCycleObservers.delete(element);
+    function HasEventEmitter() {
 
-        element = null;
-        return this;
+        this.__$events = null;
+
+    }
+
+    HasEventEmitter.prototype.on = function(eventName, callback) {
+        if(!this.__$events) {
+            this.__$events = new Map();
+        }
+        if(!this.__$events.has(eventName)) {
+            this.__$events.set(eventName, callback);
+            return;
+        }
+        const existingCallback = this.__$events.get(eventName);
+        if(!Array.isArray(existingCallback)) {
+            this.__$events.set(eventName, [existingCallback, callback]);
+            return;
+        }
+        existingCallback.push(callback);
+    };
+
+    HasEventEmitter.prototype.hasListeners = function(eventName) {
+        return !!this.__$events.get(eventName);
     };
 
-    const $lifeCycleObservers = new WeakMap();
-    NDElement.prototype.lifecycle = function(states) {
-        const el = this.$element;
-        if (!$lifeCycleObservers.has(el)) {
-            $lifeCycleObservers.set(el, DocumentObserver.watch(el));
+    HasEventEmitter.prototype.trigger = async function(eventName, ...args) {
+        const callbacks = this.__$events.get(eventName);
+        if(!callbacks) {
+            // throw new NativeDocumentError(this.constructor.name, 'Event '+eventName+' not found');
+            return;
         }
-        const observer = $lifeCycleObservers.get(el);
 
-        if(states.mounted) {
-            this.$element.setAttribute('data--nd-mounted', '1');
-            observer.mounted(states.mounted);
+        if(typeof callbacks === 'function') {
+            return await Promise.resolve(callbacks.apply(this, args))
         }
-        if(states.unmounted) {
-            this.$element.setAttribute('data--nd-unmounted', '1');
-            observer.unmounted(states.unmounted);
+
+        let result = null;
+        for(let i = 0, length = callbacks.length; i < length; i++) {
+            result = await Promise.resolve(await callbacks[i].apply(this, args));
         }
-        return this;
+        return result;
     };
+    HasEventEmitter.prototype.emit = HasEventEmitter.prototype.trigger;
 
-    NDElement.prototype.mounted = function(callback) {
-        return this.lifecycle({ mounted: callback });
-    };
+    /**
+     * Valid children types that can be rendered in the DOM
+     * @typedef {HTMLElement|Text|DocumentFragment|string|Array<ValidChildren>} ValidChildren
+     */
 
-    NDElement.prototype.unmounted = function(callback) {
-        return this.lifecycle({ unmounted: callback });
-    };
+    /**
+     * Component for creating accordion interfaces with expandable/collapsible items
+     * @param {{ items?: Array<AccordionItem>, multiple?: boolean, variant?: string, renderContent?: (field: Accordion) => HTMLElement }} config
+     * @returns {Accordion}
+     * @class
+     */
+    function Accordion(config = {}) {
+        if (!(this instanceof Accordion)) {
+            return new Accordion(config);
+        }
 
-    NDElement.prototype.beforeUnmount = function(id, callback) {
-        const el = this.$element;
+        this.$description = {
+            items: [],
+            multiple: null,
+            variant: null,
+            renderContent: null,
+            ...config
+        };
+    }
 
-        if(!DocumentObserver.beforeUnmount.has(el)) {
-            DocumentObserver.beforeUnmount.set(el, new Map());
-            const originalRemove = el.remove.bind(el);
+    BaseComponent.extends(Accordion, HasEventEmitter);
 
-            let  $isUnmounting = false;
+    Accordion.defaultTemplate = null;
 
-            el.remove = async () => {
-                if($isUnmounting) {
-                    return;
-                }
-                $isUnmounting = true;
 
-                try {
-                    const callbacks = DocumentObserver.beforeUnmount.get(el);
-                    for (const cb of callbacks.values()) {
-                        await cb.call(this, el);
-                    }
-                } finally {
-                    originalRemove();
-                    $isUnmounting = false;
-                }
-            };
-        }
+    /**
+     * Sets the default template for all Accordion instances
+     * @param {{accordion: (accordion: Accordion) => ValidChildren}} template - Template object containing accordion factory function
+     */
+    Accordion.use = function(template) {
+        Accordion.defaultTemplate = template.accordion;
+    };
 
-        DocumentObserver.beforeUnmount.get(el).set(id, callback);
+    /**
+     * Adds an accordion item to the collection
+     * @param {AccordionItem} accordionItem - The accordion item to add
+     * @returns {Accordion}
+     */
+    Accordion.prototype.item = function(accordionItem) {
+        this.$description.items.push(accordionItem);
         return this;
     };
 
-    NDElement.prototype.htmlElement = function() {
-        return this.$element;
+    /**
+     * Sets the accordion items collection
+     * @param {Array<AccordionItem>} items - Array of accordion items
+     * @returns {Accordion}
+     */
+    Accordion.prototype.items = function(items) {
+        this.$description.items = items;
+        return this;
     };
 
-    NDElement.prototype.node = NDElement.prototype.htmlElement;
+    /**
+     * Alias for item method
+     * @param {AccordionItem} accordionItem - The accordion item to add
+     * @returns {Accordion}
+     */
+    Accordion.prototype.addItem = Accordion.prototype.item;
 
-    NDElement.prototype.shadow = function(mode, style = null) {
-        const $element = this.$element;
-        const children = Array.from($element.childNodes);
-        const shadowRoot = $element.attachShadow({ mode });
-        if(style) {
-            const styleNode = document.createElement("style");
-            styleNode.textContent = style;
-            shadowRoot.appendChild(styleNode);
+    /**
+     * Removes an item by its id
+     * @param {string} id - The id of the item to remove
+     * @returns {Accordion}
+     */
+    Accordion.prototype.removeItemById = function(id) {
+        if (this.$description.items) {
+            this.$description.items = this.$description.items.filter(item => item.id !== id);
         }
-        $element.append = shadowRoot.append.bind(shadowRoot);
-        $element.appendChild = shadowRoot.appendChild.bind(shadowRoot);
-        shadowRoot.append(...children);
-
         return this;
     };
 
-    NDElement.prototype.openShadow = function(style = null) {
-        return this.shadow('open', style);
+    /**
+     * Removes items matching the filter function
+     * @param {Function} filter - Filter function to determine which items to keep
+     * @returns {Accordion}
+     */
+    Accordion.prototype.remove = function(filter) {
+        if (this.$description.items) {
+            this.$description.items = this.$description.items.filter(filter);
+        }
+        return this;
     };
 
-    NDElement.prototype.closedShadow = function(style = null) {
-        return this.shadow('closed', style);
+    /**
+     * Enables or disables multiple items expansion
+     * @param {boolean} [enabled=true] - Whether multiple items can be expanded simultaneously
+     * @returns {Accordion}
+     */
+    Accordion.prototype.multiple = function(enabled = true) {
+        this.$description.multiple = enabled;
+        return this;
     };
 
     /**
-     * Extends the current NDElement instance with custom methods.
-     * Methods are bound to the instance and available for chaining.
-     *
-     * @param {Object} methods - Object containing method definitions
-     * @returns {this} The NDElement instance with added methods for chaining
-     * @example
-     * element.nd.with({
-     *   highlight() {
-     *     this.$element.style.background = 'yellow';
-     *     return this;
-     *   }
-     * }).highlight().onClick(() => console.log('Clicked'));
+     * Sets the variant style for the accordion
+     * @param {string} name - The variant name
+     * @returns {Accordion}
      */
-    NDElement.prototype.with = function(methods) {
-        if (!methods || typeof methods !== 'object') {
-            throw new NativeDocumentError('extend() requires an object of methods');
-        }
-
-        for (const name in methods) {
-            const method = methods[name];
-
-            if (typeof method !== 'function') {
-                console.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
-                continue;
-            }
-
-            this[name] = method.bind(this);
-        }
-
+    Accordion.prototype.variant = function(name) {
+        this.$description.variant = name;
         return this;
     };
 
     /**
-     * Extends the NDElement prototype with new methods available to all NDElement instances.
-     * Use this to add global methods to all NDElements.
-     *
-     * @param {Object} methods - Object containing method definitions to add to prototype
-     * @returns {typeof NDElement} The NDElement constructor
-     * @throws {NativeDocumentError} If methods is not an object or contains non-function values
-     * @example
-     * NDElement.extend({
-     *   fadeIn() {
-     *     this.$element.style.opacity = '1';
-     *     return this;
-     *   }
-     * });
-     * // Now all NDElements have .fadeIn() method
-     * Div().nd.fadeIn();
+     * Sets the accordion variant to 'bordered'
+     * @returns {Accordion}
      */
-    NDElement.extend = function(methods) {
-        if (!methods || typeof methods !== 'object') {
-            throw new NativeDocumentError('NDElement.extend() requires an object of methods');
-        }
-
-        if (Array.isArray(methods)) {
-            throw new NativeDocumentError('NDElement.extend() requires an object, not an array');
-        }
-
-        const protectedMethods = new Set([
-            'constructor', 'valueOf', '$element', '$observer',
-            'ref', 'remove', 'cleanup', 'with', 'extend', 'attach',
-            'lifecycle', 'mounted', 'unmounted', 'unmountChildren'
-        ]);
-
-        for (const name in methods) {
-            if (!Object.hasOwn(methods, name)) {
-                continue;
-            }
+    Accordion.prototype.bordered = function() {
+        return this.variant('bordered');
+    };
 
-            const method = methods[name];
+    /**
+     * Sets the accordion variant to 'separated'
+     * @returns {Accordion}
+     */
+    Accordion.prototype.separated = function() {
+        return this.variant('separated');
+    };
 
-            if (typeof method !== 'function') {
-                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
-                continue;
-            }
+    /**
+     * Sets the accordion variant to 'flush'
+     * @returns {Accordion}
+     */
+    Accordion.prototype.flush = function() {
+        return this.variant('flush');
+    };
 
-            if (protectedMethods.has(name)) {
-                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
-                throw new NativeDocumentError(`Cannot override protected method "${name}"`);
-            }
+    /**
+     * Retrieves an accordion item by its key
+     * @param {string} key - The key of the item to retrieve
+     * @returns {AccordionItem|undefined}
+     */
+    Accordion.prototype.getByKey = function(key) {
+        return this.$description.items.find(item => item.key === key);
+    };
 
-            if (NDElement.prototype[name]) {
-                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+    /**
+     * Expands or collapses an accordion item by key
+     * @param {string} key - The key of the item
+     * @param {boolean} [state=true] - Whether to expand (true) or collapse (false)
+     * @returns {Accordion}
+     */
+    Accordion.prototype.expanded = function(key, state = true) {
+        const item = this.getByKey(key);
+        if(item) {
+            if (state && !this.$description.multiple) {
+                this.collapseAll();
             }
-
-            NDElement.prototype[name] = method;
+            item.expanded(state);
+            this.emit(state ? 'expand' : 'collapse', key, state);
         }
-
-        return NDElement;
+        return this;
     };
 
-    const COMMON_NODE_TYPES = {
-        ELEMENT: 1,
-        TEXT: 3,
-        COMMENT: 8,
-        DOCUMENT_FRAGMENT: 11
+    /**
+     * Expands all accordion items
+     * @returns {Accordion}
+     */
+    Accordion.prototype.expandAll = function() {
+        this.$description.items.forEach(item => item.expanded(true));
+        return this;
     };
 
-    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;
+    /**
+     * Collapses all accordion items
+     * @returns {Accordion}
+     */
+    Accordion.prototype.collapseAll = function() {
+        this.$description.items.forEach(item => item.expanded(false));
+        return this;
+    };
 
-    const Validator = {
-        isObservable(value) {
-            return  value?.__$isObservable;
-        },
-        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];
-            }
+    /**
+     * Checks if an accordion item is expanded
+     * @param {string} key - The key of the item to check
+     * @returns {boolean|undefined}
+     */
+    Accordion.prototype.isExpanded = function(key) {
+        return this.getByKey(key)?.isExpanded?.();
+    };
 
-            const invalid = children.filter(child => !this.isValidChild(child));
-            return invalid.length === 0;
-        },
-        validateChildren(children) {
-            if (!Array.isArray(children)) {
-                children = [children];
-            }
+    /**
+     * Registers a handler for the expand event
+     * @param {Function} handler - The event handler
+     * @returns {Accordion}
+     */
+    Accordion.prototype.onExpand = function(handler) {
+        this.on('expand', handler);
+        return this;
+    };
 
-            const invalid = children.filter(child => !this.isValidChild(child));
-            if (invalid.length > 0) {
-                throw new NativeDocumentError(`Invalid children detected: ${invalid.map(i => typeof i).join(', ')}`);
-            }
+    /**
+     * Registers a handler for the collapse event
+     * @param {Function} handler - The event handler
+     * @returns {Accordion}
+     */
+    Accordion.prototype.onCollapse = function(handler) {
+        this.on('collapse', handler);
+        return this;
+    };
 
-            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) {},
+    /**
+     * Sets the content render function
+     * @param {Function} renderFn - Function to render content
+     * @returns {Accordion}
+     */
+    Accordion.prototype.renderContent = function(renderFn) {
+        this.$description.renderContent = renderFn;
+        return this;
+    };
 
-        validateEventCallback(callback) {
-            if (typeof callback !== 'function') {
-                throw new NativeDocumentError('Event callback must be a function');
-            }
-        }
+    /**
+     * Builds the accordion component
+     * @private
+     */
+    Accordion.prototype.$build = function() {
+        // TODO: Implementation
+        // this.$description.items.forEach(item => {
+        //     item.onExpand(() => {
+        //         if (!this.$description.multiple) {
+        //             this.$description.items
+        //                 .filter(i => i !== item)
+        //                 .forEach(i => i.expanded(false));
+        //         }
+        //     });
+        // });
     };
 
     const BOOLEAN_ATTRIBUTES = new Set([
@@ -3241,43 +3348,6 @@ var NativeComponents = (function (exports) {
         });
     };
 
-    function createMultiSourceFilter(sources, callbackFn){
-        const observables = sources.filter(Validator.isObservable);
-
-        const getValues = () => sources.map(src =>
-            Validator.isObservable(src) ? src.val() : src
-        );
-
-        return {
-            dependencies: observables.length > 0 ? observables : null,
-            callback: (value) => callbackFn(value, getValues())
-        };
-    }
-
-    function match(patternObservableOrValue, asRegexObservableOrValue = true, flagsObservableOrValue = ''){
-        return createMultiSourceFilter(
-            [patternObservableOrValue, asRegexObservableOrValue, flagsObservableOrValue],
-            (value, [pattern, asRegex, flags]) => {
-                if (!pattern) return true;
-
-                if (asRegex){
-                    try {
-                        const regex = new RegExp(pattern, flags);
-                        return regex.test(String(value));
-                    } catch (error){
-                        console.warn('Invalid regex pattern:', pattern, error);
-                        return false;
-                    }
-                }
-
-                if (!flags || flags === ''){
-                    return String(value).toLowerCase().includes(String(pattern).toLowerCase());
-                }
-                return String(value).includes(String(pattern));
-            }
-        );
-    }
-
     const mutationMethods = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'];
     const noMutationMethods = ['map', 'forEach', 'filter', 'reduce', 'some', 'every', 'find', 'findIndex', 'concat', 'includes', 'indexOf'];
 
@@ -4608,22 +4678,17 @@ var NativeComponents = (function (exports) {
     }
 
     Alert.defaultTemplate = null;
-    Alert.defaultTitleTemplate = null;
-    Alert.defaultButtonsTemplate = null;
-    Alert.defaultContentTemplate = null;
 
     /**
      * Sets the default template for all Alert instances
-     * @param {{alert: (alert: Alert) => ValidChildren, alertContent: (alert: Alert) => ValidChildren, alertButtons: (alert: Alert) => ValidChildren, alertTitle: (alert: Alert) => ValidChildren}} template - Template object containing alert factory function
+     * @param {ValidChildren} template - Template object containing alert factory function
      */
     Alert.use = function(template) {
-        Alert.defaultTemplate = template.alert;
-        Alert.defaultTitleTemplate = template.alertTitle;
-        Alert.defaultButtonsTemplate = template.alertButtons;
-        Alert.defaultContentTemplate = template.alertContent;
+        Alert.defaultTemplate = template;
     };
 
-    BaseComponent.extends(Alert, HasEventEmitter);
+    BaseComponent.extends(Alert);
+    BaseComponent.use(Alert, HasEventEmitter);
 
     /**
      * Sets the variant style for the alert
@@ -5105,10 +5170,10 @@ var NativeComponents = (function (exports) {
 
     /**
      * Sets the default template for all Avatar instances
-     * @param {{avatar: (avatar: Avatar) => ValidChildren}} template - Template object containing avatar factory function
+     * @param {ValidChildren} template - Template object containing avatar factory function
      */
     Avatar.use = function(template) {
-        Avatar.defaultTemplate = template.avatar;
+        Avatar.defaultTemplate = template;
     };
 
     Avatar.preset = function(name, callback) {
@@ -5476,6 +5541,11 @@ var NativeComponents = (function (exports) {
     }
     BaseComponent.extends(AvatarGroup);
 
+    AvatarGroup.defaultTemplate = null;
+    AvatarGroup.use = function(template) {
+        AvatarGroup.defaultTemplate = template;
+    };
+
     AvatarGroup.prototype.items = function() {
         this.$description.items = Array.from(arguments);
         return this;
@@ -5518,7 +5588,9 @@ var NativeComponents = (function (exports) {
 
     Badge.defaultTemplate = null;
 
-    Badge.use = function(template) {};
+    Badge.use = function(template) {
+        Badge.defaultTemplate = template;
+    };
 
     Badge.preset = function(name, callback) {
         if (Badge.prototype[name] || Badge[name]) {
@@ -5630,10 +5702,13 @@ var NativeComponents = (function (exports) {
         };
     }
 
-    BaseComponent.extends(Breadcrumb, HasEventEmitter);
+    BaseComponent.extends(Breadcrumb);
+    BaseComponent.use(Breadcrumb, HasEventEmitter);
 
-    Breadcrumb.use = function(template) {};
     Breadcrumb.defaultTemplate = null;
+    Breadcrumb.use = function(template) {
+        Breadcrumb.defaultTemplate = template;
+    };
 
     Breadcrumb.prototype.item = function(label, href) {
         this.$description.items.push({ label, href });
@@ -5880,7 +5955,7 @@ var NativeComponents = (function (exports) {
     MenuDivider.defaultTemplate = null;
 
     MenuDivider.use = function(template) {
-        MenuDivider.defaultTemplate = template.menuDivider;
+        MenuDivider.defaultTemplate = template;
     };
 
     function MenuGroup(label, props) {
@@ -6282,9 +6357,8 @@ var NativeComponents = (function (exports) {
     BaseComponent.extends(Divider);
 
     Divider.defaultTemplate = null;
-
     Divider.use = function(template) {
-        Divider.defaultTemplate = template.divider;
+        Divider.defaultTemplate = template;
     };
 
     Divider.preset = function(name, callback) {
@@ -9460,7 +9534,7 @@ var NativeComponents = (function (exports) {
     ListItem.defaultTemplate = null;
 
     ListItem.use = function(template) {
-        ListItem.defaultTemplate = template.listItem;
+        ListItem.defaultTemplate = template;
     };
 
     ListItem.prototype.content = function(content) {
@@ -9560,7 +9634,7 @@ var NativeComponents = (function (exports) {
     ListGroup.defaultTemplate = null;
 
     ListGroup.use = function(template) {
-        ListGroup.defaultTemplate = template.listGroup;
+        ListGroup.defaultTemplate = template;
     };
 
     ListGroup.prototype.header = function(header) {
@@ -10272,7 +10346,7 @@ var NativeComponents = (function (exports) {
     Progress.defaultTemplate = null;
 
     Progress.use = function(template) {
-        Progress.defaultTemplate = template.progress;
+        Progress.defaultTemplate = template;
     };
 
     Progress.preset = function(name, callback) {
@@ -10818,7 +10892,7 @@ var NativeComponents = (function (exports) {
 
     Spinner.defaultTemplate = null;
     Spinner.use = function(template) {
-        Spinner.defaultTemplate = template.spinner;
+        Spinner.defaultTemplate = template;
     };
 
     BaseComponent.extends(Spinner);
@@ -10991,7 +11065,7 @@ var NativeComponents = (function (exports) {
     Splitter.defaultTemplate = null;
 
     Splitter.use = function(template) {
-        Splitter.defaultTemplate = template.splitter;
+        Splitter.defaultTemplate = template;
     };
 
     Splitter.prototype.dynamic = function(){
@@ -11090,7 +11164,7 @@ var NativeComponents = (function (exports) {
     SplitterPanel.defaultTemplate = null;
 
     SplitterPanel.use = function(template) {
-        SplitterPanel.defaultTemplate = template.splitterPanel;
+        SplitterPanel.defaultTemplate = template;
     };
 
     SplitterPanel.prototype.content = function(content) {