native-document 1.0.166 → 1.0.169

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

@@ -2525,6 +2525,8 @@ var NativeComponents = (function (exports) {
      * // Reacts to locale changes automatically
      * Store.setLocale('en-US');
      */
+
+
     ObservableItem.prototype.format = function(type, options = {}) {
         const self = this;
 
@@ -2665,6 +2667,11 @@ var NativeComponents = (function (exports) {
             });
     };
 
+    ObservableResource.prototype.into = function($observable) {
+        this.data = $observable;
+        return this;
+    };
+
     ObservableResource.prototype.$run = function(isRefetch = false) {
         const needsSignal = this.$fn.length > this.$dependencies.length;
         if(needsSignal) {
@@ -3136,27 +3143,31 @@ var NativeComponents = (function (exports) {
     const bindClassAttribute = (element, data) => {
         for(const className in data) {
             const value = data[className];
-            if(value.__$Observable) {
-                if(value.__$isObservableChecker) {
-                    let lastClass = value.val();
-                    if(typeof lastClass === 'string') {
-                        element.classes.toggle(lastClass, true);
-                        value.subscribe((currentValue) => {
-                            element.classes.remove(lastClass);
-                            element.classes.toggle(currentValue, true);
-                            lastClass = currentValue;
-                        });
-                        continue;
-                    }
+
+            if (value.__$isObservableChecker) {
+                let lastClass = value.val();
+                if (typeof lastClass === 'string') {
+                    element.classes.toggle(lastClass, true);
+                    value.subscribe((currentValue) => {
+                        element.classes.remove(lastClass);
+                        element.classes.toggle(currentValue, true);
+                        lastClass = currentValue;
+                    });
+                    continue;
                 }
+            }
+
+            if (value.__$Observable) {
                 element.classes.toggle(className, value.val());
                 value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
                 continue;
             }
-            if(value.$hydrate) {
+
+            if (value.$hydrate) {
                 value.$hydrate(element, className);
                 continue;
             }
+
             element.classes.toggle(className, value);
         }
     };
@@ -3214,12 +3225,12 @@ var NativeComponents = (function (exports) {
      * @param {boolean|number|Observable} value
      */
     const bindBooleanAttribute = (element, attributeName, value) => {
-        const isObservable = value.__$isObservable;
+        const isObservable = value.__$Observable;
         const defaultValue = isObservable? value.val() : value;
 
         const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName];
 
-        if(Validator.isBoolean(defaultValue)) {
+        if(typeof defaultValue === 'boolean') {
             element[attributeRealName] = defaultValue;
         }
         else {
@@ -3248,15 +3259,14 @@ var NativeComponents = (function (exports) {
      * @param {Observable} value
      */
     const bindAttributeWithObservable = (element, attributeName, value) => {
-        const applyValue = attributeName === 'value' ? (newValue) => element.value = newValue : (newValue) => element.setAttribute(attributeName, newValue);
-        value.subscribe(applyValue);
-
         if(attributeName === 'value') {
             element.value = value.val();
             element.addEventListener('input', () => value.set(element.value));
+            value.subscribe((newValue) => element.value = newValue);
             return;
         }
         element.setAttribute(attributeName, value.val());
+        value.subscribe((newValue) => element.setAttribute(attributeName, newValue));
     };
 
     /**
@@ -3267,16 +3277,25 @@ var NativeComponents = (function (exports) {
     const AttributesWrapper = (element, attributes) => {
 
         for(const originalAttributeName in attributes) {
-            const attributeName = originalAttributeName.toLowerCase();
             const value = attributes[originalAttributeName];
             if(value == null) {
                 continue;
             }
-            if(value.handleNdAttribute) {
-                value.handleNdAttribute(element, attributeName, value);
+            const type = typeof value;
+            if(type === 'string' || type === 'number') {
+                element.setAttribute(originalAttributeName, value);
                 continue;
             }
-            if(typeof value ===  'object') {
+            const attributeName = originalAttributeName.toLowerCase();
+            if(value.__$Observable) {
+                if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+                    bindBooleanAttribute(element, attributeName, value);
+                    continue;
+                }
+                bindAttributeWithObservable(element, originalAttributeName, value);
+                continue;
+            }
+            if(type ===  'object') {
                 if(attributeName === 'class') {
                     bindClassAttribute(element, value);
                     continue;
@@ -3290,6 +3309,9 @@ var NativeComponents = (function (exports) {
                 bindBooleanAttribute(element, attributeName, value);
                 continue;
             }
+            if(value.__$isTemplateBinding) {
+                value.$hydrate(element, attributeName);
+            }
 
             element.setAttribute(attributeName, value);
         }
@@ -3377,30 +3399,23 @@ var NativeComponents = (function (exports) {
 
         },
         getChild: (child) => {
-            if(child == null) {
-                return null;
-            }
-            if(child.toNdElement) {
-                do {
-                    child =  child.toNdElement();
-                    if(Validator.isElement(child)) {
-                        return child;
-                    }
-                } while (child.toNdElement);
+            if (child == null) return null;
+
+            child = child.toNdElement();
+            if (child instanceof Node) return child;
+
+            while (child != null && !(child instanceof Node)) {
+                child = child.toNdElement?.();
             }
 
-            return ElementCreator.createStaticTextNode(null, child);
+            return child instanceof Node ? child : null;
         },
         /**
          *
          * @param {HTMLElement} element
          * @param {Object} attributes
          */
-        processAttributes: (element, attributes) => {
-            if (attributes) {
-                AttributesWrapper(element, attributes);
-            }
-        },
+        processAttributes: AttributesWrapper,
         /**
          *
          * @param {HTMLElement} element
@@ -3992,8 +4007,19 @@ var NativeComponents = (function (exports) {
     NDElement.prototype.ghostDom = function(element) {
         if(!this.$attachements) {
             this.$attachements = document.createDocumentFragment();
+            this.toNdElement = () => {
+                const fragment = document.createDocumentFragment();
+                if(!this.$attachements.contains(this.$element)) {
+                    fragment.appendChild(this.$element);
+                }
+                fragment.appendChild(this.$attachements);
+                return fragment;
+            };
+        }
+        const child = NDElement.$getChild(element);
+        if(child) {
+            this.$attachements.appendChild(child);
         }
-        this.$attachements.appendChild(NDElement.$getChild(element));
         return this;
     };
 
@@ -6942,7 +6968,6 @@ var NativeComponents = (function (exports) {
     /**
      * Versatile content container with optional image, header, footer, actions. Supports clickable, hoverable, loading, and horizontal layouts.
      *
-     *
      * @example
      * const card = new Card()
      *     .title(Span('Card title'))
@@ -6958,42 +6983,80 @@ var NativeComponents = (function (exports) {
      * });
      *
      * @constructor
-     * @param {GlobalAttributes} [config={}]
+     * @param {GlobalAttributes} [props={}]
      */
-    function Card(config = {}) {
-        if(!(this instanceof Card)) {
-            return new Card(config);
+    function Card(props = {}) {
+        if (!(this instanceof Card)) {
+            return new Card(props);
         }
+
         this.$description = {
-            ...config,
+            title:         null,
+            subtitle:      null,
+            image:         null,
+            imagePosition: 'top',
+            content:       null,
+            variant:       null,
+            loading:       null,
+            horizontal:    false,
+            hoverable:     false,
+            actions:       [],
+            renderImage:   null,
+            renderHeader:  null,
+            renderContent: null,
+            renderFooter:  null,
+            renderActions: null,
+            layout:        null,
+            props,
         };
     }
+
     BaseComponent.extends(Card);
+    BaseComponent.use(Card, HasEventEmitter);
 
     Card.defaultTemplate = null;
 
     /**
      * Registers the render template for Card.
      * @param {(description: {
-     *     [key: string]: unknown,
+     *     title: NdChild|null,
+     *     subtitle: NdChild|null,
+     *     image: string|null,
+     *     imagePosition: 'top'|'bottom'|'left'|'right',
+     *     content: NdChild|null,
+     *     variant: 'elevated'|'outlined'|'flat'|string|null,
+     *     loading: Observable<boolean>|null,
+     *     horizontal: boolean,
+     *     hoverable: boolean,
+     *     actions: { label: NdChild, callback: () => void }[],
+     *     renderImage: ((desc: *, instance: Card) => NdChild)|null,
+     *     renderHeader: ((desc: *, instance: Card) => NdChild)|null,
+     *     renderContent: ((desc: *, instance: Card) => NdChild)|null,
+     *     renderFooter: ((desc: *, instance: Card) => NdChild)|null,
+     *     renderActions: ((desc: *, instance: Card) => NdChild)|null,
+     *     layout: ((slots: { header: NdChild, content: NdChild, footer: NdChild, image: NdChild, actions: NdChild }, instance: Card) => NdChild)|null,
      *     props: GlobalAttributes,
      * }, instance: Card) => NdChild} template
      */
-    Card.use = function(template) {};
+    Card.use = function(template) {
+        Card.defaultTemplate = template;
+    };
 
     /**
      * @param {NdChild} title
      * @returns {this}
      */
     Card.prototype.title = function(title) {
+        this.$description.title = title;
         return this;
     };
 
     /**
-     * @param {NdChild} title
+     * @param {NdChild} subtitle
      * @returns {this}
      */
-    Card.prototype.subtitle = function(title) {
+    Card.prototype.subtitle = function(subtitle) {
+        this.$description.subtitle = subtitle;
         return this;
     };
 
@@ -7003,6 +7066,8 @@ var NativeComponents = (function (exports) {
      * @returns {this}
      */
     Card.prototype.image = function(src, position = 'top') {
+        this.$description.image         = src;
+        this.$description.imagePosition = position;
         return this;
     };
 
@@ -7011,6 +7076,7 @@ var NativeComponents = (function (exports) {
      * @returns {this}
      */
     Card.prototype.content = function(content) {
+        this.$description.content = content;
         return this;
     };
 
@@ -7021,51 +7087,55 @@ var NativeComponents = (function (exports) {
      * @returns {this}
      */
     Card.prototype.variant = function(name) {
+        this.$description.variant = name;
         return this;
     };
 
     /**
      * @returns {this}
      */
-    Card.prototype.outlined = function() {
-        return this;
+    Card.prototype.elevated = function() {
+        return this.variant('elevated');
     };
 
     /**
      * @returns {this}
      */
-    Card.prototype.elevated = function() {
-        return this;
+    Card.prototype.outlined = function() {
+        return this.variant('outlined');
     };
 
     /**
      * @returns {this}
      */
     Card.prototype.flat = function() {
-        return this;
+        return this.variant('flat');
     };
 
     // Behavior
+
     /**
      * @param {Function} handler
      * @returns {this}
      */
     Card.prototype.clickable = function(handler) {
-        return this;
+        return this.onClick(handler);
     };
 
     /**
      * @returns {this}
      */
     Card.prototype.hoverable = function() {
+        this.$description.hoverable = true;
         return this;
     };
 
     /**
-     * @param {boolean|Observable<boolean>} [isLoading]
+     * @param {boolean|Observable<boolean>} [isLoading=true]
      * @returns {this}
      */
     Card.prototype.loading = function(isLoading = true) {
+        this.$description.loading = BaseComponent.obs(isLoading);
         return this;
     };
 
@@ -7075,46 +7145,54 @@ var NativeComponents = (function (exports) {
      * @returns {this}
      */
     Card.prototype.horizontal = function() {
+        this.$description.horizontal = true;
         return this;
     };
 
-    // Events
+    // Actions
+
     /**
-     * @param {Function} handler
+     * @param {NdChild} label
+     * @param {() => void} callback
      * @returns {this}
      */
-    Card.prototype.onClick = function(handler) {
+    Card.prototype.action = function(label, callback) {
+        this.$description.actions.push({ label, callback });
         return this;
     };
 
     /**
-     * @param {Function} handler
      * @returns {this}
      */
-    Card.prototype.onHover = function(handler) {
+    Card.prototype.clearActions = function() {
+        this.$description.actions = [];
         return this;
     };
 
+    // Events
+
     /**
+     * @param {Function} handler
      * @returns {this}
      */
-    Card.prototype.clearActions = function() {
-        this.$description.actions = [];
+    Card.prototype.onClick = function(handler) {
+        this.on('click', handler);
         return this;
     };
 
     /**
-     * @param {NdChild} label
-     * @param {() => void} callback
+     * @param {Function} handler
      * @returns {this}
      */
-    Card.prototype.action = function(label, callback) {
-        this.$description.actions.push({ label, callback });
+    Card.prototype.onHover = function(handler) {
+        this.on('hover', handler);
         return this;
     };
 
+    // Custom renderers
+
     /**
-     * @param {(desc: *, instance: *) => NdChild} renderFn
+     * @param {(desc: *, instance: Card) => NdChild} renderFn
      * @returns {this}
      */
     Card.prototype.renderImage = function(renderFn) {
@@ -7123,7 +7201,7 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * @param {(desc: *, instance: *) => NdChild} renderFn
+     * @param {(desc: *, instance: Card) => NdChild} renderFn
      * @returns {this}
      */
     Card.prototype.renderHeader = function(renderFn) {
@@ -7132,7 +7210,7 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * @param {(desc: *, instance: *) => NdChild} renderFn
+     * @param {(desc: *, instance: Card) => NdChild} renderFn
      * @returns {this}
      */
     Card.prototype.renderContent = function(renderFn) {
@@ -7141,7 +7219,7 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * @param {(desc: *, instance: *) => NdChild} renderFn
+     * @param {(desc: *, instance: Card) => NdChild} renderFn
      * @returns {this}
      */
     Card.prototype.renderFooter = function(renderFn) {
@@ -7150,18 +7228,20 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * @param {(desc: *, instance: *) => NdChild} layoutFn
+     * @param {(desc: *, instance: Card) => NdChild} renderFn
      * @returns {this}
      */
-    Card.prototype.layout = function(layoutFn) {
-        this.$description.layout = layoutFn;
+    Card.prototype.renderActions = function(renderFn) {
+        this.$description.renderActions = renderFn;
         return this;
     };
 
     /**
-     * @returns {HTMLElement|DocumentFragment}
+     * @param {(slots: { header: NdChild, content: NdChild, footer: NdChild, image: NdChild, actions: NdChild }, instance: Card) => NdChild} layoutFn
+     * @returns {this}
      */
-    Card.prototype.toNdElement = function() {
+    Card.prototype.layout = function(layoutFn) {
+        this.$description.layout = layoutFn;
         return this;
     };
 
@@ -15006,158 +15086,295 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * Flexible list container supporting single/multi selection, checkbox or click-to-select modes, dividers, and inset styling.
-     *
+     * Visual separator between items in a List.
      *
      * @example
-     * const list = new List()
-     *     .selectable(true)
-     *     .multiSelect(true)
-     *     .withDivider(true)
-     *     .onItemClick((item, e) => console.log(item))
-     *     .onItemSelect((item) => console.log('selected', item));
+     * List()
+     *     .item('Dashboard')
+     *     .divider()
+     *     .item('Settings')
      *
-     * List.use((description, instance) => {
-     *     return Ul({ class: 'list' });
+     * ListDivider.use((description, instance) => {
+     *     return Li({ class: 'list-divider', role: 'separator' });
      * });
      *
      * @constructor
-     * @param {GlobalAttributes} [config]
+     * @param {GlobalAttributes} [props={}]
      */
-    function List(config = {}) {
-        if(!(this instanceof List)) {
-            return new List(config);
+    function ListDivider(props = {}) {
+        if (!(this instanceof ListDivider)) {
+            return new ListDivider(props);
         }
 
-        this.$description = {
-            selectable: false,
-            multiSelect: false,
-            selectedValues: null,
-            inset: false,
-            divider: false,
-            data: null,
-            render: null,
-            selectByCheckbox: false,
-            selectByClick: false,
-            loopOnKeyboard: true,
-            ...config,
-        };
+        BaseComponent.call(this, props);
 
+        this.$description = { props };
     }
 
-    List.defaultTemplate = null;
+    BaseComponent.extends(ListDivider);
+
+    ListDivider.defaultTemplate = null;
 
     /**
-     * Registers the render template for List.
-     * @param {(description: {
-     *     selectable: boolean,
-     *     multiSelect: boolean,
-     *     selectedValues: Observable<*[]>|null,
-     *     inset: boolean,
-     *     divider: boolean,
-     *     data: *|null,
-     *     render: ((desc: *, instance: List) => NdChild)|null,
-     *     selectByCheckbox: boolean,
-     *     selectByClick: boolean,
-     *     loopOnKeyboard: boolean,
-     *     props: GlobalAttributes,
-     * }, instance: List) => NdChild} template
+     * Registers the render template for ListDivider.
+     * @param {(description: { props: GlobalAttributes }, instance: ListDivider) => NdChild} template
      */
-    List.use = function(template) {
-        List.defaultTemplate = template.list;
+    ListDivider.use = function(template) {
+        ListDivider.defaultTemplate = template;
     };
 
-    BaseComponent.extends(List);
-    BaseComponent.use(List, HasItems, HasEventEmitter);
+    /**
+     * Trait that adds item/group/divider management to List and ListGroup.
+     * Mirrors the HasMenuItem pattern.
+     *
+     * @constructor
+     */
+    function HasListItem() {}
 
-    List.defaultTemplate = null;
+    HasListItem.components = {
+        ListItem:  null,
+        ListGroup: null,
+    };
 
-    List.use = function(template) {
-        List.defaultTemplate = template.list;
+
+    /**
+     * @param {ObservableArray<*>|*[]} list
+     * @returns {this}
+     */
+    HasListItem.prototype.selectInto = function(list) {
+        this.$description.selectedValues = list;
+        return this;
     };
 
     /**
-     * @param {*} [selectable]
+     * @param {boolean|Observable<boolean>} [selectable=true]
      * @returns {this}
      */
-    List.prototype.selectable = function(selectable = true) {
-        this.$description.selectable = selectable;
+    HasListItem.prototype.selectable = function(selectable = true) {
+        this.$description.selectable = BaseComponent.obs(selectable);
         return this;
     };
 
     /**
+     * Select items on click. Mutually exclusive with selectByCheckbox.
      * @returns {this}
      */
-    List.prototype.selectByClick = function() {
-        this.$description.selectByClick = true;
-        this.$description.selectByCheckbox = false;
+    HasListItem.prototype.selectByClick = function() {
+        this.$description.selectByClick.set(true);
+        this.$description.selectByCheckbox.set(false);
         return this;
     };
 
     /**
+     * Select items via a checkbox. Mutually exclusive with selectByClick.
      * @returns {this}
      */
-    List.prototype.selectByCheckbox = function() {
-        this.$description.selectByClick = false;
-        this.$description.selectByCheckbox = true;
+    HasListItem.prototype.selectByCheckbox = function() {
+        this.$description.selectByClick.set(false);
+        this.$description.selectByCheckbox.set(true);
         return this;
     };
 
     /**
-     * @param {*} [multi]
+     * @param {boolean|Observable<boolean>} [multi=true]
      * @returns {this}
      */
-    List.prototype.multiSelect = function(multi = true) {
-        this.$description.multiSelect = multi;
-        this.$description.selectable = true;
+    HasListItem.prototype.multiSelect = function(multi = true) {
+        this.$description.multiSelect = BaseComponent.obs(multi);
+        this.$description.selectable.set(true);
         return this;
     };
 
     /**
-     * @param {Observable<*[]>} observable
+     * @param {boolean} loopOnKeyboard
      * @returns {this}
      */
-    List.prototype.selectedValuesModel = function(observable) {
-        this.$description.selectedValues = observable;
+    HasListItem.prototype.loopOnKeyboard = function(loopOnKeyboard) {
+        this.$description.loopOnKeyboard = loopOnKeyboard;
         return this;
     };
 
     /**
-     * @param {number} [inset]
+     * @param {ListItem|ListGroup|ListDivider} item
      * @returns {this}
      */
-    List.prototype.inset = function(inset = true) {
-        this.$description.inset = inset;
+    HasListItem.prototype.add = function(item) {
+        if (item === this) {
+            return this;
+        }
+        item.$parent = this;
+        this.$description.items.push(item);
         return this;
     };
 
     /**
+     * @param {NdChild} label
+     * @param {NdChild|((item: ListItem) => void)} [iconOrBuilder]
+     * @param {((item: ListItem) => void)} [builder]
      * @returns {this}
      */
-    List.prototype.next = function() {
-        // TODO:
+    HasListItem.prototype.item = function(label, iconOrBuilder, builder) {
+        const ListItem = HasListItem.components.ListItem;
+        const item = new ListItem();
+        item.$parent = this;
+
+        item.label(label);
+
+        if (typeof iconOrBuilder === 'function') {
+            iconOrBuilder(item);
+        } else if (iconOrBuilder) {
+            item.icon(iconOrBuilder);
+            if (typeof builder === 'function') {
+                builder(item);
+            }
+        }
+
+        this.$description.items.push(item);
         return this;
     };
 
     /**
+     * @param {NdChild} label
+     * @param {NdChild|((group: ListGroup) => void)} [iconOrBuilder]
+     * @param {((group: ListGroup) => void)} [builder]
      * @returns {this}
      */
-    List.prototype.preview = function() {
-        // TODO:
+    HasListItem.prototype.group = function(label, iconOrBuilder, builder) {
+        const ListGroup = HasListItem.components.ListGroup;
+        const group = new ListGroup(label);
+        group.$parent = this;
+
+        if (typeof iconOrBuilder === 'function') {
+            iconOrBuilder(group);
+        } else if (iconOrBuilder) {
+            group.icon(iconOrBuilder);
+            if (typeof builder === 'function') {
+                builder(group);
+            }
+        }
+
+        this.$description.items.push(group);
         return this;
     };
 
     /**
-     * @param {*} loopOnKeyboard
      * @returns {this}
      */
-    List.prototype.loopOnKeyboard = function(loopOnKeyboard) {
-        this.$description.loopOnKeyboard = loopOnKeyboard;
+    HasListItem.prototype.divider = function() {
+        const divider = new ListDivider();
+        divider.$parent = this;
+        this.$description.items.push(divider);
         return this;
     };
 
+
     /**
-     * @param {*} [divider]
+     * Populate items from a data source using a builder function.
+     * The builder receives each data item and must return a ListItem or ListGroup.
+     *
+     * @param {ObservableArray<*>|*[]} source
+     * @param {(item: *) => ListItem|ListGroup} builder
+     * @returns {this}
+     */
+    HasListItem.prototype.from = function(source, builder) {
+        this.$description.items = source;
+        this.$description.itemBuilder = (...args) => {
+            if(args[0].__$ListInstance) {
+                return args[0];
+            }
+            const item = builder(...args);
+            item.$parent = this;
+            return item;
+        };
+        return this;
+    };
+
+    /**
+     * Flexible list container supporting single/multi selection, checkbox or click-to-select modes, dividers, and inset styling.
+     *
+     * @example
+     * const list = new List()
+     *     .selectable(true)
+     *     .multiSelect(true)
+     *     .withDivider(true)
+     *     .onItemClick((item, e) => console.log(item))
+     *     .onItemSelect((item) => console.log('selected', item));
+     *
+     * List.use((description, instance) => {
+     *     return Ul({ class: 'list' });
+     * });
+     *
+     * @constructor
+     * @param {GlobalAttributes} [props]
+     */
+    function List(props = {}) {
+        if (!(this instanceof List)) {
+            return new List(props);
+        }
+
+        this.$description = {
+            selectable:       $(false),
+            multiSelect:      $(false),
+            selectedValues:   $.array(),
+            inset:            $(0),
+            divider:          false,
+            items:            $.array(),
+            render:           null,
+            selectByCheckbox: $(false),
+            selectByClick:    $(false),
+            loopOnKeyboard:   $(false),
+            props,
+        };
+    }
+
+    List.defaultTemplate = null;
+
+    /**
+     * Registers the render template for List.
+     * @param {(description: {
+     *     selectable:       ObservableItem<boolean>,
+     *     multiSelect:      ObservableItem<boolean>,
+     *     selectedValues:   ObservableArray<*>,
+     *     inset:            ObservableItem<number>,
+     *     divider:          boolean,
+     *     data:             *|null,
+     *     render:           ((desc: *, instance: List) => NdChild)|null,
+     *     selectByCheckbox: ObservableItem<boolean>,
+     *     selectByClick:    ObservableItem<boolean>,
+     *     loopOnKeyboard:   ObservableItem<boolean>,
+     *     items:            ObservableArray<*>,
+     *     props:            GlobalAttributes,
+     * }, instance: List) => NdChild} template
+     */
+    List.use = function(template) {
+        List.defaultTemplate = template;
+    };
+
+    BaseComponent.extends(List);
+    BaseComponent.use(List, HasItems, HasEventEmitter, HasListItem);
+
+
+    /**
+     * @param {ObservableArray<*>|Observable<*[]>} observable
+     * @returns {this}
+     */
+    List.prototype.selectedValuesModel = function(observable) {
+        this.$description.selectedValues = observable;
+        return this;
+    };
+
+    /**
+     * Inset padding in px applied to all items.
+     * @param {number} [inset=0]
+     * @returns {this}
+     */
+    List.prototype.inset = function(inset = 0) {
+        this.$description.inset.set(inset);
+        return this;
+    };
+
+    /**
+     * @param {boolean} [divider=true]
      * @returns {this}
      */
     List.prototype.withDivider = function(divider = true) {
@@ -15170,12 +15387,12 @@ var NativeComponents = (function (exports) {
      * @returns {this}
      */
     List.prototype.data = function(data) {
-        this.$description.data = data;
+        this.$description.items = data;
         return this;
     };
 
     /**
-     * @param {(item: ListItem, event: MouseEvent) => void} handler
+     * @param {(item: *, event: MouseEvent) => void} handler
      * @returns {this}
      */
     List.prototype.onItemClick = function(handler) {
@@ -15184,7 +15401,7 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * @param {(item: ListItem) => void} handler
+     * @param {(item: *) => void} handler
      * @returns {this}
      */
     List.prototype.onItemSelect = function(handler) {
@@ -15193,62 +15410,79 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * A single row inside a List. Supports leading/trailing slots, icon, selection, divider, and disabled state.
-     *
+     * A single item in a List. Supports icon, label, subtitle, trailing slot,
+     * disabled/selected states, swipe actions (mobile), and custom render.
      *
      * @example
-     * const item = new ListItem(Span('Item label'))
-     *     .icon(StarIcon())
-     *     .trailing(Span('chevron >'))
-     *     .selectable()
-     *     .divider(true);
+     * ListItem()
+     *     .label('Dashboard')
+     *     .icon(DashboardIcon())
+     *     .subtitle('View your metrics')
+     *     .trailing(Badge('New').primary())
+     *     .value('dashboard')
+     *     .selected(isActive)
+     *     .swipeLeading([Button('Archive').success()])
+     *     .swipeTrailing([Button('Delete').danger()])
+     *     .onClick(() => navigate('/dashboard'));
      *
      * ListItem.use((description, instance) => {
-     *     return Li(description.leading, description.content, description.trailing);
+     *     return Li({ class: 'list-item' }, description.label);
      * });
      *
      * @constructor
-     * @param {NdChild} [content]
-     * @param {GlobalAttributes} [config={}]
+     * @param {GlobalAttributes} [props={}]
      */
-    function ListItem(content, config = {}) {
-        if(!(this instanceof ListItem)) {
-            return new ListItem(content, config);
+    function ListItem(props = {}) {
+        if (!(this instanceof ListItem)) {
+            return new ListItem(props);
         }
 
+        BaseComponent.call(this, props);
+
         this.$description = {
-            content: content || null,
-            icon: null,
-            trailing: null,
-            leading: null,
-            disabled: false,
-            selectable: false,
-            selected: false,
-            divider: false,
-            data: null,
-            render: null,
-            ...config,
+            label:           null,
+            subtitle:        null,
+            icon:            null,
+            trailing:        null,
+            value:           null,
+            data:            null,
+            key:             null,
+            disabled:        null,
+            selected:        null,
+            visibility:      null,
+            isSelectedIcon:  null,
+            swipeLeading:    [],
+            swipeTrailing:   [],
+            render:          null,
+            props,
         };
     }
 
     BaseComponent.extends(ListItem);
+    BaseComponent.use(ListItem, HasEventEmitter);
+
+    HasListItem.components.ListItem = ListItem;
 
     ListItem.defaultTemplate = null;
 
     /**
      * Registers the render template for ListItem.
      * @param {(description: {
-     *     content: NdChild|null,
-     *     icon: NdChild|null,
-     *     trailing: NdChild|null,
-     *     leading: NdChild|null,
-     *     disabled: boolean,
-     *     selectable: boolean,
-     *     selected: boolean|Observable<boolean>,
-     *     divider: boolean,
-     *     data: *|null,
-     *     render: ((desc: *, instance: ListItem) => NdChild)|null,
-     *     props: GlobalAttributes,
+     *     label:          NdChild|null,
+     *     subtitle:       NdChild|null,
+     *     icon:           NdChild|null,
+     *     trailing:       NdChild|null,
+     *     value:          *,
+     *     data:           *|null,
+     *     key:            string|null,
+     *     disabled:       Observable<boolean>|null,
+     *     selected:       Observable<boolean>|null,
+     *     visibility:     Observable<boolean>|null,
+     *     isSelectedIcon: NdChild|null,
+     *     swipeLeading:   NdChild[],
+     *     swipeTrailing:  NdChild[],
+     *     render:         ((desc: *, instance: ListItem) => NdChild)|null,
+     *     props:          GlobalAttributes,
      * }, instance: ListItem) => NdChild} template
      */
     ListItem.use = function(template) {
@@ -15256,20 +15490,20 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * @param {NdChild} content
+     * @param {NdChild} label
      * @returns {this}
      */
-    ListItem.prototype.content = function(content) {
-        this.$description.content = content;
+    ListItem.prototype.label = function(label) {
+        this.$description.label = label;
         return this;
     };
 
     /**
-     * @param {NdChild} label
+     * @param {NdChild} subtitle
      * @returns {this}
      */
-    ListItem.prototype.label = function(label) {
-        this.$description.content = label;
+    ListItem.prototype.subtitle = function(subtitle) {
+        this.$description.subtitle = subtitle;
         return this;
     };
 
@@ -15283,124 +15517,177 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * @param {NdChild} leading
+     * @param {NdChild} trailing
      * @returns {this}
      */
-    ListItem.prototype.leading = function(leading) {
-        this.$description.leading = leading;
+    ListItem.prototype.trailing = function(trailing) {
+        this.$description.trailing = trailing;
         return this;
     };
 
     /**
-     * @param {NdChild} trailing
+     * @param {*} value
      * @returns {this}
      */
-    ListItem.prototype.trailing = function(trailing) {
-        this.$description.trailing = trailing;
+    ListItem.prototype.value = function(value) {
+        this.$description.value = value;
         return this;
     };
 
+    /**
+     * @param {*} data
+     * @returns {this}
+     */
+    ListItem.prototype.data = function(data) {
+        this.$description.data = data;
+        return this;
+    };
+
+    /**
+     * @param {string} key
+     * @returns {this}
+     */
+    ListItem.prototype.key = function(key) {
+        this.$description.key = key;
+        return this;
+    };
 
     /**
      * @param {boolean|Observable<boolean>} [disabled=true]
      * @returns {this}
      */
     ListItem.prototype.disabled = function(disabled = true) {
-        this.$description.disabled = disabled;
+        this.$description.disabled = BaseComponent.obs(disabled);
         return this;
     };
 
     /**
+     * @param {boolean|Observable<boolean>} [selected=true]
      * @returns {this}
      */
-    ListItem.prototype.selectable = function() {
-        this.$description.selectable = true;
-        if(Validator.isObservable(this.$description.selected)) {
-            return this;
-        }
-        this.$description.selected = $(false);
+    ListItem.prototype.selected = function(selected = true) {
+        this.$description.selected = BaseComponent.obs(selected);
         return this;
     };
 
     /**
-     * @param {boolean|Observable<boolean>} [selected]
+     * @param {boolean|Observable<boolean>} mode
      * @returns {this}
      */
-    ListItem.prototype.selected = function(selected = true) {
-        if(Validator.isObservable(this.$description.selected)) {
-            this.$description.selected.set(selected);
-            return this;
-        }
-        this.$description.selected = selected;
+    ListItem.prototype.visibility = function(mode) {
+        this.$description.visibility = BaseComponent.obs(mode);
         return this;
     };
 
     /**
-     * @param {NdChild} [show]
+     * Icon displayed when the item is selected (selectByClick mode).
+     * @param {NdChild} icon
      * @returns {this}
      */
-    ListItem.prototype.divider = function(show = true) {
-        this.$description.divider = show;
+    ListItem.prototype.isSelectedIcon = function(icon) {
+        this.$description.isSelectedIcon = icon;
         return this;
     };
 
     /**
-     * @param {*} data
+     * Swipe actions revealed on the leading (left) side — mobile swipe gesture.
+     * @param {NdChild[]} actions
      * @returns {this}
      */
-    ListItem.prototype.data = function(data) {
-        this.$description.data = data;
+    ListItem.prototype.swipeLeading = function(actions) {
+        this.$description.swipeLeading = Array.isArray(actions) ? actions : [actions];
         return this;
     };
 
     /**
-     * Groups ListItem instances under a header/footer inside a List.
-     *
+     * Swipe actions revealed on the trailing (right) side — mobile swipe gesture.
+     * @param {NdChild[]} actions
+     * @returns {this}
+     */
+    ListItem.prototype.swipeTrailing = function(actions) {
+        this.$description.swipeTrailing = Array.isArray(actions) ? actions : [actions];
+        return this;
+    };
+
+    /**
+     * @param {Function} handler
+     * @returns {this}
+     */
+    ListItem.prototype.onClick = function(handler) {
+        this.on('click', handler);
+        return this;
+    };
+
+    /**
+     * A collapsible group of ListItems inside a List. Can hold items, dividers, and nested groups.
      *
      * @example
-     * const group = new ListGroup(Span('Favourites'))
-     *     .inset(true)
-     *     .renderHeader((desc, instance) => H3(desc.header));
+     * ListGroup('Workspace')
+     *     .icon(FolderIcon())
+     *     .collapsable()
+     *     .item('Dashboard', DashboardIcon())
+     *     .item('Analytics', ChartIcon());
+     *
+     * // From data
+     * ListGroup('Reports')
+     *     .from(reports, (report) =>
+     *         ListItem().label(report.name).value(report.id)
+     *     );
+     *
+     * ListGroup.use((description, instance) => {
+     *     return Div({ class: 'list-group' });
+     * });
      *
      * @constructor
-     * @param {NdChild} [label]
-     * @param {GlobalAttributes} [config={}]
+     * @param {NdChild} label
+     * @param {GlobalAttributes} [props={}]
      */
-    function ListGroup(label, config = {}) {
-        if(!(this instanceof ListGroup)) {
-            return new ListGroup(label, config);
+    function ListGroup(label, props = {}) {
+        if (!(this instanceof ListGroup)) {
+            return new ListGroup(label, props);
         }
 
+        BaseComponent.call(this, props);
+
         this.$description = {
-            header: label || null,
-            footer: null,
-            items: [],
-            inset: false,
-            data: null,
-            renderHeader: null,
-            renderFooter: null,
-            render: null,
-            ...config,
+            selectable:       $(false),
+            multiSelect:      $(false),
+            selectedValues:   $.array(),
+            label:       label,
+            icon:        null,
+            items:       $.array(),
+            render:      null,
+            collapsable: false,
+            collapsed:   null,
+            visibility:  $(true),
+            selectByCheckbox: $(false),
+            selectByClick:    $(false),
+            loopOnKeyboard:   $(false),
+            props,
         };
     }
 
     BaseComponent.extends(ListGroup);
-    BaseComponent.use(ListGroup, HasItems);
+    BaseComponent.use(ListGroup, HasItems, HasEventEmitter, HasListItem);
+
+    HasListItem.components.ListGroup = ListGroup;
 
     ListGroup.defaultTemplate = null;
+    ListGroup.prototype.__$ListInstance = true;
 
     /**
      * Registers the render template for ListGroup.
      * @param {(description: {
-     *     header: NdChild|null,
-     *     footer: NdChild|null,
-     *     items: *[],
-     *     inset: boolean,
-     *     data: *|null,
-     *     renderHeader: ((desc: *, instance: ListGroup) => NdChild)|null,
-     *     renderFooter: ((desc: *, instance: ListGroup) => NdChild)|null,
-     *     render: ((desc: *, instance: ListGroup) => NdChild)|null,
-     *     props: GlobalAttributes,
+     *     label:       NdChild,
+     *     icon:        NdChild|null,
+     *     items:       ObservableArray<ListItem|ListGroup|ListDivider>,
+     *     itemBuilder: (item: *) => ListItem|ListGroup|ListDivider,
+     *     data:        *|null,
+     *     render:      ((desc: *, instance: ListGroup) => NdChild)|null,
+     *     collapsable: boolean,
+     *     collapsed:   ObservableItem<boolean>|null,
+     *     visibility:  ObservableItem<boolean>,
+     *     props:       GlobalAttributes,
      * }, instance: ListGroup) => NdChild} template
      */
     ListGroup.use = function(template) {
@@ -15408,37 +15695,47 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * @param {NdChild} header
+     * @param {NdChild} icon
      * @returns {this}
      */
-    ListGroup.prototype.header = function(header) {
-        this.$description.header = header;
+    ListGroup.prototype.icon = function(icon) {
+        this.$description.icon = icon;
         return this;
     };
 
     /**
-     * @param {NdChild} title
+     * @param {boolean} [mode=true]
+     * @param {NdChild} [openedIcon]
+     * @param {NdChild} [closedIcon]
      * @returns {this}
      */
-    ListGroup.prototype.title = function(title) {
-        return this.header(title);
+    ListGroup.prototype.collapsable = function(mode = true, openedIcon, closedIcon) {
+        this.$description.collapsable = mode;
+        this.$description.collapsed   = this.$description.collapsed || $(false);
+        this.$description.collapsableOpenedIcon = openedIcon || null;
+        this.$description.collapsableClosedIcon = closedIcon || null;
+        return this;
     };
 
     /**
-     * @param {NdChild} footer
+     * @param {boolean} [mode=true]
      * @returns {this}
      */
-    ListGroup.prototype.footer = function(footer) {
-        this.$description.footer = footer;
+    ListGroup.prototype.collapsed = function(mode = true) {
+        if (!this.$description.collapsed) {
+            this.$description.collapsed = $(mode);
+        } else {
+            this.$description.collapsed.set(mode);
+        }
         return this;
     };
 
     /**
-     * @param {number} [inset]
+     * @param {boolean|Observable<boolean>} mode
      * @returns {this}
      */
-    ListGroup.prototype.inset = function(inset = true) {
-        this.$description.inset = inset;
+    ListGroup.prototype.visibility = function(mode) {
+        this.$description.visibility = BaseComponent.obs(mode);
         return this;
     };
 
@@ -15451,24 +15748,6 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
-    /**
-     * @param {(desc: *, instance: *) => NdChild} renderFn
-     * @returns {this}
-     */
-    ListGroup.prototype.renderHeader = function(renderFn) {
-        this.$description.renderHeader = renderFn;
-        return this;
-    };
-
-    /**
-     * @param {(desc: *, instance: *) => NdChild} renderFn
-     * @returns {this}
-     */
-    ListGroup.prototype.renderFooter = function(renderFn) {
-        this.$description.renderFooter = renderFn;
-        return this;
-    };
-
     /**
      * A MenuItem that renders as an anchor (<a>). Inherits all MenuItem methods and adds target control.
      *
@@ -20710,14 +20989,7 @@ var NativeComponents = (function (exports) {
      * @returns {HTMLElement|DocumentFragment} The underlying DOM node
      */
     NDElement.prototype.toNdElement = function () {
-        const element = this.$element ?? this.$build?.() ?? this.build?.() ?? null;
-        if(this.$attachements) {
-            if(!this.$attachements.contains(this.$element)) {
-                this.$attachements.append(this.$element);
-            }
-            return this.$attachements;
-        }
-        return element;
+        return this.$element;
     };
 
     /**
@@ -20873,17 +21145,6 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
-    ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
-        if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
-            bindBooleanAttribute(element, attributeName, this);
-            return;
-        }
-
-        bindAttributeWithObservable(element, attributeName, this);
-    };
-
-    ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
-
     /**
      * Groups multiple columns under a shared header in SimpleTable/DataTable.
      *
@@ -23497,6 +23758,32 @@ var NativeComponents = (function (exports) {
     const Row = HStack;
     const Col = VStack;
 
+    function Spacer(props = {}) {
+        if (!(this instanceof Spacer)) {
+            return new Spacer(props);
+        }
+        BaseComponent.call(this, props);
+        this.$description = {
+            type: 'spacer',
+            props,
+        };
+    }
+    BaseComponent.extends(Spacer);
+
+    Spacer.defaultTemplate = null;
+    /**
+     *
+     *
+     * Registers the render template for Spacer.
+     * @param {(description: {
+     *     type: 'spacer',
+     *     props: GlobalAttributes,
+     * }, instance: Spacer) => NdChild} template
+     */
+    Spacer.use = function(template) {
+        Spacer.defaultTemplate = template;
+    };
+
     exports.AbsoluteStack = AbsoluteStack;
     exports.Accordion = Accordion;
     exports.AccordionItem = AccordionItem;
@@ -23507,6 +23794,7 @@ var NativeComponents = (function (exports) {
     exports.Badge = Badge;
     exports.Breadcrumb = Breadcrumb;
     exports.Button = Button;
+    exports.Card = Card;
     exports.CheckboxField = CheckboxField;
     exports.CheckboxGroupField = CheckboxGroupField;
     exports.Col = Col;
@@ -23536,6 +23824,10 @@ var NativeComponents = (function (exports) {
     exports.HStack = HStack;
     exports.HiddenField = HiddenField;
     exports.ImageField = ImageField;
+    exports.List = List;
+    exports.ListDivider = ListDivider;
+    exports.ListGroup = ListGroup;
+    exports.ListItem = ListItem;
     exports.Menu = Menu;
     exports.MenuDivider = MenuDivider;
     exports.MenuGroup = MenuGroup;
@@ -23557,6 +23849,7 @@ var NativeComponents = (function (exports) {
     exports.SimpleTable = SimpleTable;
     exports.Skeleton = Skeleton;
     exports.Slider = Slider;
+    exports.Spacer = Spacer;
     exports.Spinner = Spinner;
     exports.Splitter = Splitter;
     exports.SplitterGutter = SplitterGutter;