native-document 1.0.92 → 1.0.93

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

@@ -1,6 +1,10 @@
 var NativeComponents = (function (exports) {
     'use strict';
 
+    /**
+     *
+     * @class
+     */
     function BaseComponent() {
 
     }
@@ -125,6 +129,17 @@ var NativeComponents = (function (exports) {
     };
     EventEmitter.prototype.emit = EventEmitter.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
+     */
     function Accordion(config = {}) {
         if (!(this instanceof Accordion)) {
             return new Accordion(config);
@@ -143,20 +158,47 @@ var NativeComponents = (function (exports) {
 
     Accordion.defaultTemplate = null;
 
-    Accordion.use = function(template) {};
 
+    /**
+     * 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;
+    };
+
+    /**
+     * 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;
     };
 
+    /**
+     * 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;
     };
 
+    /**
+     * Alias for item method
+     * @param {AccordionItem} accordionItem - The accordion item to add
+     * @returns {Accordion}
+     */
     Accordion.prototype.addItem = Accordion.prototype.item;
 
+    /**
+     * 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);
@@ -164,40 +206,77 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
-    Accordion.prototype.removeItem = function(item) {
+    /**
+     * 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(item);
+            this.$description.items = this.$description.items.filter(filter);
         }
         return this;
     };
 
-
+    /**
+     * 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;
     };
 
+    /**
+     * 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;
     };
 
+    /**
+     * Sets the accordion variant to 'bordered'
+     * @returns {Accordion}
+     */
     Accordion.prototype.bordered = function() {
         return this.variant('bordered');
     };
 
+    /**
+     * Sets the accordion variant to 'separated'
+     * @returns {Accordion}
+     */
     Accordion.prototype.separated = function() {
         return this.variant('separated');
     };
 
+    /**
+     * Sets the accordion variant to 'flush'
+     * @returns {Accordion}
+     */
     Accordion.prototype.flush = function() {
         return this.variant('flush');
     };
 
+    /**
+     * 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);
     };
 
+    /**
+     * 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) {
@@ -210,35 +289,67 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
+    /**
+     * Expands all accordion items
+     * @returns {Accordion}
+     */
     Accordion.prototype.expandAll = function() {
         this.$description.items.forEach(item => item.expanded(true));
         return this;
     };
 
+    /**
+     * Collapses all accordion items
+     * @returns {Accordion}
+     */
     Accordion.prototype.collapseAll = function() {
         this.$description.items.forEach(item => item.expanded(false));
         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?.();
     };
 
+    /**
+     * 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;
     };
 
+    /**
+     * 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;
     };
 
+    /**
+     * 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;
     };
 
+    /**
+     * Builds the accordion component
+     * @private
+     */
     Accordion.prototype.$build = function() {
         // TODO: Implementation
         // this.$description.items.forEach(item => {
@@ -252,10 +363,6 @@ var NativeComponents = (function (exports) {
         // });
     };
 
-    Accordion.prototype.toNdElement = function() {
-        return this.$build();
-    };
-
     let DebugManager$1 = {};
     {
         DebugManager$1 = {
@@ -334,6 +441,16 @@ var NativeComponents = (function (exports) {
 
     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));
@@ -342,26 +459,73 @@ var NativeComponents = (function (exports) {
         return unSubscribe;
     };
 
+    /**
+     * 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()));
     };
 
+    /**
+     * 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
+     */
     ObservableChecker.prototype.val = function() {
         return this.checker && this.checker(this.observable.val());
     };
 
+    /**
+     * 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);
     };
 
+    /**
+     * 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
+     */
     ObservableChecker.prototype.trigger = function() {
         return this.observable.trigger();
     };
 
+    /**
+     * Cleans up the underlying observable and all its subscriptions.
+     */
     ObservableChecker.prototype.cleanup = function() {
         return this.observable.cleanup();
     };
 
+    /**
+     * 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;
@@ -369,21 +533,44 @@ var NativeComponents = (function (exports) {
 
     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;
     };
 
-    ObservableWhen.prototype.isMath = 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;
 
-    ObservableWhen.prototype.isActive = 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.isActive = ObservableWhen.prototype.val;
 
     const invoke = function(fn, args, context) {
         if(context) {
@@ -500,6 +687,16 @@ var NativeComponents = (function (exports) {
     ObservableItem.prototype.__$isObservable = true;
     const noneTrigger = function() {};
 
+    /**
+     * Intercepts and transforms values before they are set on the observable.
+     * The interceptor can modify the value or return undefined to use the original value.
+     *
+     * @param {(value) => any} callback - Interceptor function that receives (newValue, currentValue) and returns the transformed value or undefined
+     * @returns {ObservableItem} The observable instance for chaining
+     * @example
+     * const count = Observable(0);
+     * count.intercept((newVal, oldVal) => Math.max(0, newVal)); // Prevent negative values
+     */
     ObservableItem.prototype.intercept = function(callback) {
         this.$interceptor = callback;
         this.set = this.$setWithInterceptor;
@@ -625,6 +822,16 @@ var NativeComponents = (function (exports) {
         this.trigger = noneTrigger;
     };
 
+    /**
+     * Registers a cleanup callback that will be executed when the observable is cleaned up.
+     * Useful for disposing resources, removing event listeners, or other cleanup tasks.
+     *
+     * @param {Function} callback - Cleanup function to execute on observable disposal
+     * @example
+     * const obs = Observable(0);
+     * obs.onCleanup(() => console.log('Cleaned up!'));
+     * obs.cleanup(); // Logs: "Cleaned up!"
+     */
     ObservableItem.prototype.onCleanup = function(callback) {
         this.$cleanupListeners = this.$cleanupListeners ?? [];
         this.$cleanupListeners.push(callback);
@@ -654,6 +861,17 @@ var NativeComponents = (function (exports) {
         this.assocTrigger();
     };
 
+    /**
+     * Watches for a specific value and executes callback when the observable equals that value.
+     * Creates a watcher that only triggers when the observable changes to the specified value.
+     *
+     * @param {*} value - The value to watch for
+     * @param {(value) => void|ObservableItem} callback - Callback function or observable to set when value matches
+     * @example
+     * const status = Observable('idle');
+     * status.on('loading', () => console.log('Started loading'));
+     * status.on('error', isError); // Set another observable
+     */
     ObservableItem.prototype.on = function(value, callback) {
         this.$watchers = this.$watchers ?? new Map();
 
@@ -683,8 +901,16 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * @param {*} value
-     * @param {Function} callback - if omitted, removes all watchers for this value
+     * Removes a watcher for a specific value. If no callback is provided, removes all watchers for that value.
+     *
+     * @param {*} value - The value to stop watching
+     * @param {Function} [callback] - Specific callback to remove. If omitted, removes all watchers for this value
+     * @example
+     * const status = Observable('idle');
+     * const handler = () => console.log('Loading');
+     * status.on('loading', handler);
+     * status.off('loading', handler); // Remove specific handler
+     * status.off('loading'); // Remove all handlers for 'loading'
      */
     ObservableItem.prototype.off = function(value, callback) {
         if(!this.$watchers) return;
@@ -704,11 +930,20 @@ var NativeComponents = (function (exports) {
         }
         else if(watchValueList.length === 0) {
             this.$watchers?.delete(value);
-            watchValueList = null;
         }
         this.assocTrigger();
     };
 
+    /**
+     * Subscribes to the observable but automatically unsubscribes after the first time the predicate matches.
+     *
+     * @param {(value) => Boolean|any} predicate - Value to match or function that returns true when condition is met
+     * @param {(value) => void} callback - Callback to execute when predicate matches, receives the matched value
+     * @example
+     * const status = Observable('loading');
+     * status.once('ready', (val) => console.log('Ready!'));
+     * status.once(val => val === 'error', (val) => console.log('Error occurred'));
+     */
     ObservableItem.prototype.once = function(predicate, callback) {
         const fn = typeof predicate === 'function' ? predicate : (v) => v === predicate;
 
@@ -743,15 +978,50 @@ var NativeComponents = (function (exports) {
         return new ObservableChecker(this, callback)
     };
 
+    /**
+     * Gets a property value from the observable's current value.
+     * If the property is an observable, returns its value.
+     *
+     * @param {string|number} key - Property key to retrieve
+     * @returns {*} The value of the property, unwrapped if it's an observable
+     * @example
+     * const user = Observable({ name: 'John', age: Observable(25) });
+     * user.get('name'); // 'John'
+     * user.get('age'); // 25 (unwrapped from observable)
+     */
     ObservableItem.prototype.get = function(key) {
         const item = this.$currentValue[key];
         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.
+     *
+     * @param {*|ObservableItem} other - Value or observable to compare against
+     * @returns {boolean} True if values are equal
+     * @example
+     * const a = Observable(5);
+     * const b = Observable(5);
+     * a.equals(5);  // true
+     * a.equals(b);  // true
+     * a.equals(10); // false
+     */
     ObservableItem.prototype.equals = function(other) {
         if(Validator.isObservable(other)) {
             return this.$currentValue === other.$currentValue;
@@ -759,14 +1029,41 @@ var NativeComponents = (function (exports) {
         return this.$currentValue === other;
     };
 
+    /**
+     * Converts the observable's current value to a boolean.
+     *
+     * @returns {boolean} The boolean representation of the current value
+     * @example
+     * const count = Observable(0);
+     * count.toBool(); // false
+     * count.set(5);
+     * count.toBool(); // true
+     */
     ObservableItem.prototype.toBool = function() {
         return !!this.$currentValue;
     };
 
+    /**
+     * Toggles the boolean value of the observable (false becomes true, true becomes false).
+     *
+     * @example
+     * const isOpen = Observable(false);
+     * isOpen.toggle(); // Now true
+     * isOpen.toggle(); // Now false
+     */
     ObservableItem.prototype.toggle = function() {
         this.set(!this.$currentValue);
     };
 
+    /**
+     * Resets the observable to its initial value.
+     * Only works if the observable was created with { reset: true } config.
+     *
+     * @example
+     * const count = Observable(0, { reset: true });
+     * count.set(10);
+     * count.reset(); // Back to 0
+     */
     ObservableItem.prototype.reset = function() {
         if(!this.configs?.reset) {
             return;
@@ -779,11 +1076,21 @@ var NativeComponents = (function (exports) {
         this.set(resetValue);
     };
 
-
+    /**
+     * Returns a string representation of the observable's current value.
+     *
+     * @returns {string} String representation of the current value
+     */
     ObservableItem.prototype.toString = function() {
         return String(this.$currentValue);
     };
 
+    /**
+     * Returns the primitive value of the observable (its current value).
+     * Called automatically in type coercion contexts.
+     *
+     * @returns {*} The current value of the observable
+     */
     ObservableItem.prototype.valueOf = function() {
         return this.$currentValue;
     };
@@ -988,12 +1295,35 @@ var NativeComponents = (function (exports) {
         return this.shadow('closed', style);
     };
 
+    /**
+     * Attaches a template binding to the element by hydrating it with the specified method.
+     *
+     * @param {string} methodName - Name of the hydration method to call
+     * @param {BindingHydrator} bindingHydrator - Template binding with $hydrate method
+     * @returns {HTMLElement} The underlying HTML element
+     * @example
+     * const onClick = $binder.attach((event, data) => console.log(data));
+     * element.nd.attach('onClick', onClick);
+     */
     NDElement.prototype.attach = function(methodName, bindingHydrator) {
         bindingHydrator.$hydrate(this.$element, methodName);
         return this.$element;
     };
 
-
+    /**
+     * Extends the current NDElement instance with custom methods.
+     * Methods are bound to the instance and available for chaining.
+     *
+     * @param {Object} methods - Object containing method definitions
+     * @returns {this} The NDElement instance with added methods for chaining
+     * @example
+     * element.nd.with({
+     *   highlight() {
+     *     this.$element.style.background = 'yellow';
+     *     return this;
+     *   }
+     * }).highlight().onClick(() => console.log('Clicked'));
+     */
     NDElement.prototype.with = function(methods) {
         if (!methods || typeof methods !== 'object') {
             throw new NativeDocumentError('extend() requires an object of methods');
@@ -1013,6 +1343,23 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
+    /**
+     * Extends the NDElement prototype with new methods available to all NDElement instances.
+     * Use this to add global methods to all NDElements.
+     *
+     * @param {Object} methods - Object containing method definitions to add to prototype
+     * @returns {typeof NDElement} The NDElement constructor
+     * @throws {NativeDocumentError} If methods is not an object or contains non-function values
+     * @example
+     * NDElement.extend({
+     *   fadeIn() {
+     *     this.$element.style.opacity = '1';
+     *     return this;
+     *   }
+     * });
+     * // Now all NDElements have .fadeIn() method
+     * Div().nd.fadeIn();
+     */
     NDElement.extend = function(methods) {
         if (!methods || typeof methods !== 'object') {
             throw new NativeDocumentError('NDElement.extend() requires an object of methods');
@@ -1441,7 +1788,7 @@ var NativeComponents = (function (exports) {
                 continue;
             }
             if(value.__$isObservableWhen) {
-                element.classes.toggle(className, value.isMath());
+                element.classes.toggle(className, value.isActive());
                 value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
                 continue;
             }
@@ -1585,6 +1932,8 @@ var NativeComponents = (function (exports) {
         return ElementCreator.createObservableNode(null, this);
     };
 
+    ObservableChecker.prototype.toNdElement = ObservableItem.prototype.toNdElement;
+
     NDElement.prototype.toNdElement = function () {
         return this.$element ?? this.$build?.() ?? this.build?.() ?? null;
     };
@@ -1914,6 +2263,10 @@ var NativeComponents = (function (exports) {
             _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 => {
@@ -1947,6 +2300,16 @@ var NativeComponents = (function (exports) {
         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;
+    };
+
 
 
     // ----------------------------------------------------------------
@@ -2057,13 +2420,14 @@ var NativeComponents = (function (exports) {
     };
 
     Function.prototype.errorBoundary = function(callback) {
-        return (...args)  => {
+        const handler = (...args)  => {
             try {
                 return this.apply(this, args);
             } catch(e) {
-                return callback(e);
+                return callback(e, {caller: handler, args: args });
             }
         };
+        return handler;
     };
 
     String.prototype.use = function(args) {
@@ -2173,6 +2537,14 @@ var NativeComponents = (function (exports) {
         };
     });
 
+    /**
+     * Removes all items from the array and triggers an update.
+     *
+     * @returns {boolean} True if array was cleared, false if it was already empty
+     * @example
+     * const items = Observable.array([1, 2, 3]);
+     * items.clear(); // []
+     */
     ObservableArray.prototype.clear = function() {
         if(this.$currentValue.length === 0) {
             return;
@@ -2182,19 +2554,42 @@ var NativeComponents = (function (exports) {
         return true;
     };
 
+    /**
+     * Returns the element at the specified index in the array.
+     *
+     * @param {number} index - Zero-based index of the element to retrieve
+     * @returns {*} The element at the specified index
+     * @example
+     * const items = Observable.array(['a', 'b', 'c']);
+     * items.at(1); // 'b'
+     */
     ObservableArray.prototype.at = function(index) {
         return this.$currentValue[index];
     };
 
+
+    /**
+     * Merges multiple values into the array and triggers an update.
+     * Similar to push but with a different operation name.
+     *
+     * @param {Array} values - Array of values to merge
+     * @example
+     * const items = Observable.array([1, 2]);
+     * items.merge([3, 4]); // [1, 2, 3, 4]
+     */
     ObservableArray.prototype.merge = function(values) {
         this.$currentValue.push.apply(this.$currentValue, values);
         this.trigger({ action: 'merge',  args: values });
     };
 
     /**
+     * Counts the number of elements that satisfy the provided condition.
      *
-     * @param {Function} condition
-     * @returns {number}
+     * @param {(value: *, index: number) => Boolean} condition - Function that tests each element (item, index) => boolean
+     * @returns {number} The count of elements that satisfy the condition
+     * @example
+     * const numbers = Observable.array([1, 2, 3, 4, 5]);
+     * numbers.count(n => n > 3); // 2
      */
     ObservableArray.prototype.count = function(condition) {
         let count = 0;
@@ -2206,6 +2601,16 @@ var NativeComponents = (function (exports) {
         return count;
     };
 
+    /**
+     * Swaps two elements at the specified indices and triggers an update.
+     *
+     * @param {number} indexA - Index of the first element
+     * @param {number} indexB - Index of the second element
+     * @returns {boolean} True if swap was successful, false if indices are out of bounds
+     * @example
+     * const items = Observable.array(['a', 'b', 'c']);
+     * items.swap(0, 2); // ['c', 'b', 'a']
+     */
     ObservableArray.prototype.swap = function(indexA, indexB) {
         const value = this.$currentValue;
         const length = value.length;
@@ -2226,6 +2631,15 @@ var NativeComponents = (function (exports) {
         return true;
     };
 
+    /**
+     * Removes the element at the specified index and triggers an update.
+     *
+     * @param {number} index - Index of the element to remove
+     * @returns {Array} Array containing the removed element, or empty array if index is invalid
+     * @example
+     * const items = Observable.array(['a', 'b', 'c']);
+     * items.remove(1); // ['b'] - Array is now ['a', 'c']
+     */
     ObservableArray.prototype.remove = function(index) {
         const deleted = this.$currentValue.splice(index, 1);
         if(deleted.length === 0) {
@@ -2235,20 +2649,60 @@ var NativeComponents = (function (exports) {
         return deleted;
     };
 
+    /**
+     * Removes the first occurrence of the specified item from the array.
+     *
+     * @param {*} item - The item to remove
+     * @returns {Array} Array containing the removed element, or empty array if item not found
+     * @example
+     * const items = Observable.array(['a', 'b', 'c']);
+     * items.removeItem('b'); // ['b'] - Array is now ['a', 'c']
+     */
     ObservableArray.prototype.removeItem = function(item) {
         const indexOfItem = this.$currentValue.indexOf(item);
+        if(indexOfItem === -1) {
+            return [];
+        }
         return this.remove(indexOfItem);
     };
 
+    /**
+     * Checks if the array is empty.
+     *
+     * @returns {boolean} True if array has no elements
+     * @example
+     * const items = Observable.array([]);
+     * items.isEmpty(); // true
+     */
     ObservableArray.prototype.isEmpty = function() {
         return this.$currentValue.length === 0;
     };
 
+    /**
+     * Triggers a populate operation with the current array, iteration count, and callback.
+     * Used internally for rendering optimizations.
+     *
+     * @param {number} iteration - Iteration count for rendering
+     * @param {Function} callback - Callback function for rendering items
+     */
     ObservableArray.prototype.populateAndRender = function(iteration, callback) {
         this.trigger({ action: 'populate', args: [this.$currentValue, iteration, callback] });
     };
 
 
+    /**
+     * Creates a filtered view of the array based on predicates.
+     * The filtered array updates automatically when source data or predicates change.
+     *
+     * @param {Object} predicates - Object mapping property names to filter conditions or functions
+     * @returns {ObservableArray} A new observable array containing filtered items
+     * @example
+     * const users = Observable.array([
+     *   { name: 'John', age: 25 },
+     *   { name: 'Jane', age: 30 }
+     * ]);
+     * const adults = users.where({ age: (val) => val >= 18 });
+     */
     ObservableArray.prototype.where = function(predicates) {
         const sourceArray = this;
         const observableDependencies = [sourceArray];
@@ -2297,6 +2751,20 @@ var NativeComponents = (function (exports) {
         return viewArray;
     };
 
+    /**
+     * Creates a filtered view where at least one of the specified fields matches the filter.
+     *
+     * @param {Array<string>} fields - Array of field names to check
+     * @param {FilterResult} filter - Filter condition with callback and dependencies
+     * @returns {ObservableArray} A new observable array containing filtered items
+     * @example
+     * const products = Observable.array([
+     *   { name: 'Apple', category: 'Fruit' },
+     *   { name: 'Carrot', category: 'Vegetable' }
+     * ]);
+     * const searchTerm = Observable('App');
+     * const filtered = products.whereSome(['name', 'category'], match(searchTerm));
+     */
     ObservableArray.prototype.whereSome = function(fields, filter) {
         return this.where({
             _: {
@@ -2306,6 +2774,20 @@ var NativeComponents = (function (exports) {
         });
     };
 
+    /**
+     * Creates a filtered view where all specified fields match the filter.
+     *
+     * @param {Array<string>} fields - Array of field names to check
+     * @param {FilterResult} filter - Filter condition with callback and dependencies
+     * @returns {ObservableArray} A new observable array containing filtered items
+     * @example
+     * const items = Observable.array([
+     *   { status: 'active', verified: true },
+     *   { status: 'active', verified: false }
+     * ]);
+     * const activeFilter = equals('active');
+     * const filtered = items.whereEvery(['status', 'verified'], activeFilter);
+     */
     ObservableArray.prototype.whereEvery = function(fields, filter) {
         return this.where({
             _: {
@@ -2316,10 +2798,19 @@ var NativeComponents = (function (exports) {
     };
 
     /**
+     * Creates an observable array with reactive array methods.
+     * All mutations trigger updates automatically.
      *
-     * @param {Array} target
-     * @param {{propagation: boolean, deep: boolean, reset: boolean}|null} configs
-     * @returns {ObservableArray}
+     * @param {Array} [target=[]] - Initial array value
+     * @param {Object|null} [configs=null] - Configuration options
+     * // @param {boolean} [configs.propagation=true] - Whether to propagate changes to parent observables
+     * // @param {boolean} [configs.deep=false] - Whether to make nested objects observable
+     * @param {boolean} [configs.reset=false] - Whether to store initial value for reset()
+     * @returns {ObservableArray} An observable array with reactive methods
+     * @example
+     * const items = Observable.array([1, 2, 3]);
+     * items.push(4); // Triggers update
+     * items.subscribe((arr) => console.log(arr));
      */
     Observable.array = function(target = [], configs = null) {
         return new ObservableArray(target, configs);
@@ -2384,10 +2875,26 @@ var NativeComponents = (function (exports) {
     };
 
     /**
+     * Creates an observable proxy for an object where each property becomes an observable.
+     * Properties can be accessed directly or via getter methods.
      *
-     * @param {Object} initialValue
-     * @param {{propagation: boolean, deep: boolean, reset: boolean}|null} configs
-     * @returns {Proxy}
+     * @param {Object} initialValue - Initial object value
+     * @param {Object|null} [configs=null] - Configuration options
+     * // @param {boolean} [configs.propagation=true] - Whether changes propagate to parent
+     * @param {boolean} [configs.deep=false] - Whether to make nested objects observable
+     * @param {boolean} [configs.reset=false] - Whether to enable reset() method
+     * @returns {ObservableProxy} A proxy where each property is an observable
+     * @example
+     * const user = Observable.init({
+     *   name: 'John',
+     *   age: 25,
+     *   address: { city: 'NYC' }
+     * }, { deep: true });
+     *
+     * user.name.val(); // 'John'
+     * user.name.set('Jane');
+     * user.name = 'Jane X'
+     * user.age.subscribe(val => console.log('Age:', val));
      */
     Observable.init = function(initialValue, configs = null) {
         const data = {};
@@ -2535,11 +3042,24 @@ var NativeComponents = (function (exports) {
     Observable.json = Observable.init;
 
     /**
+     * Creates a computed observable that automatically updates when its dependencies change.
+     * The callback is re-executed whenever any dependency observable changes.
      *
-     * @param {Function} callback
-     * @param {Array|Function} dependencies
-     * @returns {ObservableItem}
-     */
+     * @param {Function} callback - Function that returns the computed value
+     * @param {Array<ObservableItem|ObservableChecker|ObservableProxy>|Function} [dependencies=[]] - Array of observables to watch, or batch function
+     * @returns {ObservableItem} A new observable that updates automatically
+     * @example
+     * const firstName = Observable('John');
+     * const lastName = Observable('Doe');
+     * const fullName = Observable.computed(
+     *   () => `${firstName.val()} ${lastName.val()}`,
+     *   [firstName, lastName]
+     * );
+     *
+     * // With batch function
+     * const batch = Observable.batch(() => { ...  });
+     * const computed = Observable.computed(() => { ... }, batch);
+    */
     Observable.computed = function(callback, dependencies = []) {
         const initialValue = callback();
         const observable = new ObservableItem(initialValue);
@@ -2695,6 +3215,11 @@ var NativeComponents = (function (exports) {
 
     HtmlElementWrapper('');
 
+    /**
+     * Represents an individual item within an Accordion component
+     * @param {{ id?: string|number, title?: string, icon?: string, collapsible?: boolean, content?: ValidChildren, renderHeader?: Function, renderContent?: Function, render?: Function, expanded?: Observable<boolean>, disabled?: boolean }} config - Configuration object
+     * @class
+     */
     function AccordionItem(config = {}) {
         if(!(this instanceof AccordionItem)){
             return new AccordionItem()
@@ -2717,42 +3242,81 @@ var NativeComponents = (function (exports) {
 
     BaseComponent.extends(AccordionItem);
 
+    /**
+     * Gets the id of the accordion item
+     * @type {string}
+     */
     Object.defineProperty(AccordionItem.prototype, 'id', {
         get() {
             this.$description.id;
         }
     });
 
+    /**
+     * Sets the identifier for the accordion item
+     * @param {string|number} id - The unique identifier
+     * @returns {AccordionItem}
+     */
     AccordionItem.prototype.identifyBy = function(id) {
         this.$description.id = id;
         return this;
     };
 
+    /**
+     * Sets the content of the accordion item
+     * @param {ValidChildren} content - The content to display
+     * @returns {AccordionItem}
+     */
     AccordionItem.prototype.content = function(content) {
         this.$description.content = content;
         return this;
     };
 
+    /**
+     * Sets the title of the accordion item
+     * @param {ValidChildren} title
+     * @returns {AccordionItem}
+     */
     AccordionItem.prototype.title = function(title) {
         this.$description.title = title;
         return this;
     };
 
+    /**
+     * Sets the icon for the accordion item
+     * @param {ValidChildren} icon - The icon identifier or element
+     * @returns {AccordionItem}
+     */
     AccordionItem.prototype.icon = function(icon) {
         this.$description.icon = icon;
         return this;
     };
 
+    /**
+     * Shows or hides the expansion indicator
+     * @param {boolean} [show=true] - Whether to show the indicator
+     * @returns {AccordionItem}
+     */
     AccordionItem.prototype.showIndicator = function(show = true) {
         this.$description.showIndicator = show;
         return this;
     };
 
+    /**
+     * Sets whether the item can be collapsed
+     * @param {boolean} [collapsible=true] - Whether the item is collapsible
+     * @returns {AccordionItem}
+     */
     AccordionItem.prototype.collapsible = function(collapsible = true) {
         this.$description.collapsible = collapsible;
         return this;
     };
 
+    /**
+     * Expands or collapses the accordion item
+     * @param {boolean} [expanded=true] - Whether to expand the item
+     * @returns {AccordionItem}
+     */
     AccordionItem.prototype.expanded = function(expanded = true) {
         this.$description.expanded.set(expanded);
         if (this.$description.expanded.val()) {
@@ -2763,62 +3327,113 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
+    /**
+     * Toggles the expanded state of the accordion item
+     * @returns {AccordionItem}
+     */
     AccordionItem.prototype.toggle = function() {
         return this.expanded(!this.$description.expanded.val());
     };
 
+
+    /**
+     * Sets the disabled state of the accordion item
+     * @param {boolean} [disabled=true] - Whether the item is disabled
+     * @returns {AccordionItem}
+     */
     AccordionItem.prototype.disabled = function(disabled = true) {
         this.$description.disabled = disabled;
         return this;
     };
 
+    /**
+     * Checks if the accordion item is currently expanded
+     * @returns {boolean}
+     */
     AccordionItem.prototype.isExpanded = function() {
         return this.$description.expanded.val();
     };
+
+    /**
+     * Registers a handler for the expand event
+     * @param {Function} handler - The event handler
+     * @returns {AccordionItem}
+     */
     AccordionItem.prototype.onExpand = function(handler) {
         this.on('expand', handler );
         return this;
     };
 
+    /**
+     * Registers a handler for the collapse event
+     * @param {Function} handler - The event handler
+     * @returns {AccordionItem}
+     */
     AccordionItem.prototype.onCollapse = function(handler) {
         this.on('collapse', handler);
         return this;
     };
 
+    /**
+     * Sets the header render function
+     * @param {Function} renderFn - Function to render the header
+     * @returns {AccordionItem}
+     */
     AccordionItem.prototype.renderHeader = function(renderFn) {
         this.$description.renderHeader = renderFn;
         return this;
     };
 
+    /**
+     * Sets the content render function
+     * @param {Function} renderFn - Function to render the content
+     * @returns {AccordionItem}
+     */
     AccordionItem.prototype.renderContent = function(renderFn) {
         this.$description.renderContent = renderFn;
     };
 
+    /**
+     * Sets the indicator render function
+     * @param {Function} renderFn - Function to render the indicator
+     * @returns {AccordionItem}
+     */
     AccordionItem.prototype.renderIndicator = function(renderFn) {
         this.$description.renderIndicator = renderFn;
         return this;
     };
 
+    /**
+     * Sets the render function for the entire item
+     * @param {Function} renderFn - Function to render the item
+     * @returns {AccordionItem}
+     */
     AccordionItem.prototype.render = function(renderFn) {
         this.$description.render = renderFn;
         return this;
     };
 
+    /**
+     * Builds the accordion item component
+     * @private
+     */
     AccordionItem.prototype.$build = function() {
 
     };
 
-    AccordionItem.prototype.toNdElement = function() {
-
-    };
-
+    /**
+     * Component for displaying alert messages with various styles and variants
+     * @param {ValidChildren} message - The alert message content
+     * @param {{ title?: ValidChildren, content?: ValidChildren, outline?: boolean, style?: string, variant?: string, closable?: boolean, autoDismiss?: number, icon?: ValidChildren, showIcon?: boolean }} config - Configuration object
+     * @class
+     */
     function Alert(message, config = {}) {
         if(!(this instanceof Alert)) {
             return new Alert(message, config);
         }
         this.$description = {
             title: null,
-            content: null,
+            content: message,
             outline: null,
             style: null,
             variant: 'info',
@@ -2835,139 +3450,299 @@ var NativeComponents = (function (exports) {
     Alert.defaultButtonsTemplate = null;
     Alert.defaultContentTemplate = null;
 
-    Alert.use = function(template) {};
+    /**
+     * 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
+     */
+    Alert.use = function(template) {
+        Alert.defaultTemplate = template.alert;
+        Alert.defaultTitleTemplate = template.alertTitle;
+        Alert.defaultButtonsTemplate = template.alertButtons;
+        Alert.defaultContentTemplate = template.alertContent;
+    };
 
     BaseComponent.extends(Alert, EventEmitter);
 
+    /**
+     * Sets the variant style for the alert
+     * @param {string} variant - The variant name (info, success, warning, error, danger)
+     * @returns {Alert}
+     */
     Alert.prototype.variant = function(variant) {
         this.$description.variant = variant;
         return this;
     };
 
+    /**
+     * Sets the alert variant to 'info'
+     * @returns {Alert}
+     */
     Alert.prototype.info = function() {
         return this.variant('info');
     };
+
+    /**
+     * Sets the alert variant to 'success'
+     * @returns {Alert}
+     */
     Alert.prototype.success = function() {
         return this.variant('success');
     };
+
+    /**
+     * Sets the alert variant to 'warning'
+     * @returns {Alert}
+     */
     Alert.prototype.warning = function() {
         return this.variant('warning');
     };
+
+    /**
+     * Sets the alert variant to 'error'
+     * @returns {Alert}
+     */
     Alert.prototype.error = function() {
         return this.variant('error');
     };
+
+    /**
+     * Sets the alert variant to 'danger'
+     * @returns {Alert}
+     */
     Alert.prototype.danger = function() {
         return this.variant('danger');
     };
 
+    /**
+     * Sets the style type for the alert
+     * @param {string} style - The style name (filled, bordered, outline)
+     * @returns {Alert}
+     */
     Alert.prototype.style = function(style) {
         this.$description.style = style;
         return this;
     };
+
+    /**
+     * Sets the alert style to 'filled'
+     * @returns {Alert}
+     */
     Alert.prototype.filled = function() {
         return this.style('filled');
     };
+
+    /**
+     * Sets the alert style to 'bordered'
+     * @returns {Alert}
+     */
     Alert.prototype.bordered = function() {
         return this.style('bordered');
     };
+
+    /**
+     * Sets the alert style to 'outline'
+     * @param {boolean} [outline=true] - Whether to use outline style
+     * @returns {Alert}
+     */
     Alert.prototype.outline = function(outline = true) {
         return this.style('outline');
     };
 
+    /**
+     * Sets the title of the alert
+     * @param {ValidChildren} title - The title content
+     * @returns {Alert}
+     */
     Alert.prototype.title = function(title) {
         this.$description.title = title;
         return this;
     };
+
+    /**
+     * Sets the content of the alert
+     * @param {ValidChildren} content - The content to display
+     * @returns {Alert}
+     */
     Alert.prototype.content = function(content) {
         this.$description.content = content;
         return this;
     };
 
+    /**
+     * Sets the title render function
+     * @param {Function} callback - Function to render the title
+     * @returns {Alert}
+     */
     Alert.prototype.renderTitle = function(callback) {
         this.$description.renderTitle = callback;
         return this;
     };
+
+    /**
+     * Sets the content render function
+     * @param {Function} callback - Function to render the content
+     * @returns {Alert}
+     */
     Alert.prototype.renderContent = function(callback) {
         this.$description.renderContent = callback;
         return this;
     };
+
+    /**
+     * Clears all actions from the alert
+     * @returns {Alert}
+     */
     Alert.prototype.renderFooter = function(callback) {
         this.$description.renderFooter = callback;
         return this;
     };
 
+    /**
+     * Adds an action button to the alert
+     * @param {string} label - The button label
+     * @param {Function} handler - The click handler
+     * @returns {Alert}
+     */
     Alert.prototype.clearActions = function(label, handler) {
         this.$description.actions = [];
         return this;
     };
 
+    /**
+     * Adds an action button to the alert
+     * @param {string} label - The button label
+     * @param {Function} handler - The click handler
+     * @returns {Alert}
+     */
     Alert.prototype.action = function(label, handler) {
         this.$description.actions.push({label, handler});
         return this;
     };
 
+    /**
+     * Sets the layout function for the alert
+     * @param {Function} layoutFn - Function to layout the alert
+     * @returns {Alert}
+     */
     Alert.prototype.layout = function(layoutFn) {
         this.$description.layout = layoutFn;
         return this;
     };
 
+    /**
+     * Sets the icon for the alert
+     * @param {ValidChildren} icon - The icon to display
+     * @returns {Alert}
+     */
     Alert.prototype.icon = function(icon) {
         this.$description.icon = icon;
         return this;
     };
 
+    /**
+     * Shows or hides the icon
+     * @param {boolean} [show=true] - Whether to show the icon
+     * @returns {Alert}
+     */
     Alert.prototype.showIcon = function(show = true) {
         this.$description.showIcon = show;
     };
 
+    /**
+     * Sets whether the alert can be closed
+     * @param {boolean} [closable=true] - Whether the alert is closable
+     * @returns {Alert}
+     */
     Alert.prototype.closable = function(closable = true) {
         this.$description.closable = closable;
         return this;
     };
 
+    /**
+     * Sets whether the alert is dismissible (alias for closable)
+     * @param {boolean} [dismissible=true] - Whether the alert is dismissible
+     * @returns {Alert}
+     */
     Alert.prototype.dismissible = function(dismissible = true) {
         return this.closable(dismissible);
     };
+
+    /**
+     * Sets auto-dismiss delay for the alert
+     * @param {number} delay - Delay in milliseconds before auto-dismissing
+     * @returns {Alert}
+     */
     Alert.prototype.autoDismiss = function(delay) {
         this.$description.autoDismiss = delay;
         return this;
     };
 
-
-
+    /**
+     * Closes the alert
+     */
     Alert.prototype.close = function() {
 
     };
 
+    /**
+     * Shows the alert
+     */
     Alert.prototype.show = function() {
 
     };
 
+    /**
+     * Hides the alert
+     */
     Alert.prototype.hide = function() {
 
     };
 
+    /**
+     * Registers a handler for the close event
+     * @param {(element: Alert) => void} handler - The event handler
+     * @returns {Alert}
+     */
     Alert.prototype.onClose = function(handler) {
         this.on('close', handler);
         return this;
     };
+
+    /**
+     * Registers a handler for the show event
+     * @param {(element: Alert) => void} handler - The event handler
+     * @returns {Alert}
+     */
     Alert.prototype.onShow = function(handler) {
         this.on('show', handler);
         return this;
     };
 
+    /**
+     * Sets the render function for the entire alert
+     * @param {(alert: Alert, sections: {title: ValidChildren, content: ValidChildren, footer: ValidChildren, icon: ValidChildren}) => ValidChildren} renderFn - Function to render the alert
+     * @returns {Alert}
+     */
     Alert.prototype.render = function(renderFn) {
         this.$description.render = renderFn;
         return this;
     };
+
     Alert.prototype.$build = function() {
 
     };
+
     Alert.prototype.toNdElement = function() {};
 
+    /**
+     * Component for displaying user avatars with images, initials, or icons
+     * @param {Observable<string>|string} source - The avatar source (image URL or observable)
+     * @param {{ src?: Observable<string>|string, alt?: string, name?: string, initials?: string, icon?: ValidChildren, size?: string|number, shape?: string, variant?: string, color?: string, textColor?: string, status?: string, render?: Function }} config - Configuration object
+     * @class
+     */
     function Avatar(source, config = {}) {
         if (!(this instanceof Avatar)) {
-            return new Avatar(config);
+            return new Avatar(source, config);
         }
 
         this.$description = {
@@ -2990,156 +3765,363 @@ var NativeComponents = (function (exports) {
     BaseComponent.extends(Avatar);
 
     Avatar.defaultTemplate = null;
-    Avatar.use = function(template) {};
 
+    /**
+     * Sets the default template for all Avatar instances
+     * @param {{avatar: (avatar: Avatar) => ValidChildren}} template - Template object containing avatar factory function
+     */
+    Avatar.use = function(template) {
+        Avatar.defaultTemplate = template.avatar;
+    };
+
+    /**
+     * Registers a handler for the error event
+     * @param {(error: Error, avatar: Avatar) => void} handler - The event handler
+     * @returns {Avatar}
+     */
     Avatar.prototype.onError = function(handler) {};
 
+    /**
+     * Sets the source URL for the avatar image
+     * @param {string} src - The image source URL
+     * @returns {Avatar}
+     */
     Avatar.prototype.src = function(src) {
         this.$description.src.set(src);
         return this;
     };
+
+    /**
+     * Sets the alt text for the avatar image
+     * @param {string} alt - The alt text
+     * @returns {Avatar}
+     */
     Avatar.prototype.alt = function(alt) {
         this.$description.alt = alt;
         return this;
     };
+
+    /**
+     * Sets the name associated with the avatar
+     * @param {string} name - The name
+     * @returns {Avatar}
+     */
     Avatar.prototype.name = function(name) {
         this.$description.name = name;
         return this;
     };
+
+    /**
+     * Sets the initials to display
+     * @param {string} initials - The initials text
+     * @returns {Avatar}
+     */
     Avatar.prototype.initials = function(initials) {
         this.$description.initials = initials;
         return this;
     };
+
+    /**
+     * Sets the icon for the avatar
+     * @param {ValidChildren} icon - The icon to display
+     * @returns {Avatar}
+     */
     Avatar.prototype.icon = function(icon) {
         this.$description.icon = icon;
         return this;
     };
 
     /**
-     * @param {string|int} size
+     * Sets the size of the avatar
+     * @param {string|number} size - The size value (preset name or custom value)
      * @returns {Avatar}
      */
     Avatar.prototype.size = function(size) {
         this.$description.size = size;
         return this;
     };
+
+    /**
+     * Sets the avatar size to 'extra-small'
+     * @returns {Avatar}
+     */
     Avatar.prototype.extraSmall = function() {
         return this.size('extra-small');
     };
+
+    /**
+     * Sets the avatar size to 'small'
+     * @returns {Avatar}
+     */
     Avatar.prototype.small = function() {
         return this.size('small');
     };
+
+    /**
+     * Sets the avatar size to 'medium'
+     * @returns {Avatar}
+     */
     Avatar.prototype.medium = function() {
         return this.size('medium');
     };
+
+    /**
+     * Sets the avatar size to 'large'
+     * @returns {Avatar}
+     */
     Avatar.prototype.large = function() {
         return this.size('large');
     };
+
+    /**
+     * Sets the avatar size to 'extra-large'
+     * @returns {Avatar}
+     */
     Avatar.prototype.extraLarge = function() {
         return this.size('extra-large');
     };
 
+    /**
+     * Sets the shape of the avatar
+     * @param {string} shape - The shape name (circle, square, rounded)
+     * @returns {Avatar}
+     */
     Avatar.prototype.shape = function(shape) {
         this.$description.shape = shape;
         return this;
     };
+
+    /**
+     * Sets the avatar shape to 'circle'
+     * @returns {Avatar}
+     */
     Avatar.prototype.circle = function() {
         return this.shape('circle');
     };
+
+    /**
+     * Sets the avatar shape to 'square'
+     * @returns {Avatar}
+     */
     Avatar.prototype.square = function() {
         return this.shape('square');
     };
+
+    /**
+     * Sets the avatar shape to 'rounded'
+     * @returns {Avatar}
+     */
     Avatar.prototype.rounded = function() {
         return this.shape('rounded');
     };
 
+    /**
+     * Sets the variant style for the avatar
+     * @param {string} variant - The variant name (primary, secondary, success, danger, warning, info)
+     * @returns {Avatar}
+     */
     Avatar.prototype.variant = function(variant) {
         this.$description.variant = variant;
     }; // 'primary' | 'secondary' | 'success' | etc.
+
+    /**
+     * Sets the avatar variant to 'primary'
+     * @returns {Avatar}
+     */
     Avatar.prototype.primary = function() {
         return this.variant('primary');
     };
+
+    /**
+     * Sets the avatar variant to 'secondary'
+     * @returns {Avatar}
+     */
     Avatar.prototype.secondary = function() {
         return this.variant('secondary');
     };
+
+    /**
+     * Sets the avatar variant to 'success'
+     * @returns {Avatar}
+     */
     Avatar.prototype.success = function() {
         return this.variant('success');
     };
+
+    /**
+     * Sets the avatar variant to 'danger'
+     * @returns {Avatar}
+     */
     Avatar.prototype.danger = function() {
         return this.variant('danger');
     };
+
+    /**
+     * Sets the avatar variant to 'warning'
+     * @returns {Avatar}
+     */
     Avatar.prototype.warning = function() {
         return this.variant('warning');
     };
+
+    /**
+     * Sets the avatar variant to 'info'
+     * @returns {Avatar}
+     */
     Avatar.prototype.info = function() {
         return this.variant('info');
     };
+
+    /**
+     * Sets the background color of the avatar
+     * @param {string} color - The color value
+     * @returns {Avatar}
+     */
     Avatar.prototype.color = function(color) {
         this.$description.color = color;
         return this;
     };
+
+    /**
+     * Sets the text color of the avatar
+     * @param {string} color - The color value
+     * @returns {Avatar}
+     */
     Avatar.prototype.textColor = function(color) {
         this.$description.textColor = color;
         return this;
     };
 
+    /**
+     * Sets the status indicator for the avatar
+     * @param {string} status - The status value
+     * @returns {Avatar}
+     */
     Avatar.prototype.status = function(status) {
         this.$description.status = status;
         return this;
     };
+
+    /**
+     * Sets the position of the status indicator
+     * @param {string} position - The position (top-right, bottom-right, top-left, bottom-left)
+     * @returns {Avatar}
+     */
     Avatar.prototype.statusPosition = function(position) {
         this.$description.statusPosition = position;
     }; // 'top-right' | 'bottom-right' | etc.
-    Avatar.prototype.statusAtTopEnd = function() {
-        return this.statusPosition('top-end');
+
+    /**
+     * Positions the status indicator at top-leading
+     * @returns {Avatar}
+     */
+    Avatar.prototype.statusAtTopLeading = function() {
+        return this.statusPosition('top-leading');
     };
-    Avatar.prototype.statusAtBottomEnd = function() {
-        return this.statusPosition('bottom-end');
+
+    /**
+     * Positions the status indicator at bottom-leading
+     * @returns {Avatar}
+     */
+    Avatar.prototype.statusAtBottomLeading = function() {
+        return this.statusPosition('bottom-leading');
     };
-    Avatar.prototype.statusAtTopStart = function() {
-        return this.statusPosition('top-start');
+
+    /**
+     * Positions the status indicator at top-trailing
+     * @returns {Avatar}
+     */
+    Avatar.prototype.statusAtTopTrailing = function() {
+        return this.statusPosition('top-trailing');
     };
-    Avatar.prototype.statusAtBottomStart = function() {
-        return this.statusPosition('bottom-start');
+
+    /**
+     * Positions the status indicator at bottom-trailing
+     * @returns {Avatar}
+     */
+    Avatar.prototype.statusAtBottomTrailing = function() {
+        return this.statusPosition('bottom-trailing');
     };
 
+    /**
+     * Shows or hides the status indicator
+     * @param {boolean} [show=true] - Whether to show the status
+     * @returns {Avatar}
+     */
     Avatar.prototype.showStatus = function(show = true) {
         this.$description.showStatus = show;
         return this;
     };
 
-    // Badge
+    /**
+     * Sets the badge content for the avatar
+     * @param {ValidChildren} content - The badge content
+     * @returns {Avatar}
+     */
     Avatar.prototype.badge = function(content) {
         this.$description.badge = content;
         return this;
     };
+
+    /**
+     * Sets the position of the badge
+     * @param {string} position - The position (top-leading, bottom-leading, top-trailing, bottom-trailing)
+     * @returns {Avatar}
+     */
     Avatar.prototype.badgePosition = function(position) {
         this.$description.badgePosition = position;
         return this;
     };
-    Avatar.prototype.badgeAtTopEnd = function() {
-        return this.badgePosition('top-end');
-    };
-    Avatar.prototype.badgeAtBottomEnd = function() {
-        return this.badgePosition('bottom-end');
+
+    /**
+     * Positions the badge at top-leading
+     * @returns {Avatar}
+     */
+    Avatar.prototype.badgeAtTopLeading = function() {
+        return this.badgePosition('top-leading');
     };
-    Avatar.prototype.badgeAtTopStart = function() {
-        return this.badgePosition('top-start');
+
+    /**
+     * Positions the badge at bottom-leading
+     * @returns {Avatar}
+     */
+    Avatar.prototype.badgeAtBottomLeading = function() {
+        return this.badgePosition('bottom-leading');
     };
-    Avatar.prototype.badgeAtBottomStart = function() {
-        return this.badgePosition('bottom-start');
+
+    /**
+     * Positions the badge at top-trailing
+     * @returns {Avatar}
+     */
+    Avatar.prototype.badgeAtTopTrailing = function() {
+        return this.badgePosition('top-trailing');
     };
 
+    /**
+     * Positions the badge at bottom-trailing
+     * @returns {Avatar}
+     */
+    Avatar.prototype.badgeAtBottomTrailing = function() {
+        return this.badgePosition('bottom-trailing');
+    };
 
+    /**
+     * Sets the render function for the entire avatar
+     * @param {(avatar: Avatar, sections: {image: ValidChildren, initials: ValidChildren, icon: ValidChildren, status: ValidChildren, badge: ValidChildren}) => ValidChildren} renderFn - Function to render the avatar
+     * @returns {Avatar}
+     */
     Avatar.prototype.render = function(renderFn) {
         this.$description.render = renderFn;
         return this;
     };
 
+    /**
+     * Builds the avatar component
+     * @private
+     */
     Avatar.prototype.$build = function() {
 
     };
-    Avatar.prototype.toNdElement = function() {};
 
     function Badge(config = {}) {
         if(!(this instanceof Badge)) {
@@ -3589,23 +4571,46 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
+    /**
+     * Mixin for managing a collection of items with manipulation methods
+     * @class
+     */
     function HasItems() {}
 
+    /**
+     * Sets a dynamic observable array to store items
+     * @param {ObservableArray?} [observableArray=null] - Observable array to use, or creates a new one if null
+     * @returns {HasItems}
+     */
     HasItems.prototype.dynamic = function(observableArray = null) {
         this.$description.items = observableArray || $$1.array([]);
         return this;
     };
 
+    /**
+     * Replaces all existing items with a new array of items
+     * @param {Array} items - Array of new items
+     * @returns {HasItems}
+     */
     HasItems.prototype.items = function(items) {
         this.$description.items.splice(0, this.$description.items.length, ...items);
         return this;
     };
 
+    /**
+     * Adds an item to the collection
+     * @param {*} item - The item to add
+     * @returns {HasItems}
+     */
     HasItems.prototype.item = function(item) {
         this.$description.items.push(item);
         return this;
     };
 
+    /**
+     * Clears all items from the collection
+     * @returns {HasItems}
+     */
     HasItems.prototype.clear = function() {
         const items = this.$description.items;
         if(Array.isArray(items)) {
@@ -3616,11 +4621,29 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
+    /**
+     * Removes a specific item from the collection
+     * @param {*} item - The item to remove
+     * @returns {HasItems}
+     */
     HasItems.prototype.removeItem = function(item) {
-        // TODO: implement this method
+        const items = this.$description.items;
+        if(Array.isArray(items)) {
+            const index = items.indexOf(item);
+            if(index > -1) {
+                items.splice(index, 1);
+                return this;
+            }
+        }
+        items.removeItem(item);
         return this;
     };
 
+    /**
+     * Sets the render function for items
+     * @param {(element: *) => ValidChildren} renderFn - Render function to apply
+     * @returns {HasItems}
+     */
     HasItems.prototype.render = function(renderFn) {
         this.$description.render = renderFn;
         return this;