native-document 1.0.166 → 1.0.168

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) {
@@ -6942,7 +6949,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 +6964,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 +7047,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 +7057,7 @@ var NativeComponents = (function (exports) {
      * @returns {this}
      */
     Card.prototype.content = function(content) {
+        this.$description.content = content;
         return this;
     };
 
@@ -7021,51 +7068,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 +7126,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 +7182,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 +7191,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 +7200,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 +7209,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,8 +15067,146 @@ 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
+     * List()
+     *     .item('Dashboard')
+     *     .divider()
+     *     .item('Settings')
+     *
+     * ListDivider.use((description, instance) => {
+     *     return Li({ class: 'list-divider', role: 'separator' });
+     * });
+     *
+     * @constructor
+     * @param {GlobalAttributes} [props={}]
+     */
+    function ListDivider(props = {}) {
+        if (!(this instanceof ListDivider)) {
+            return new ListDivider(props);
+        }
+
+        BaseComponent.call(this, props);
+
+        this.$description = { props };
+    }
+
+    BaseComponent.extends(ListDivider);
+
+    ListDivider.defaultTemplate = null;
+
+    /**
+     * Registers the render template for ListDivider.
+     * @param {(description: { props: GlobalAttributes }, instance: ListDivider) => NdChild} template
+     */
+    ListDivider.use = function(template) {
+        ListDivider.defaultTemplate = template;
+    };
+
+    /**
+     * Trait that adds item/group/divider management to List and ListGroup.
+     * Mirrors the HasMenuItem pattern.
+     *
+     * @constructor
+     */
+    function HasListItem() {}
+
+    HasListItem.components = {
+        ListItem:  null,
+        ListGroup: null,
+    };
+
+    /**
+     * @param {ListItem|ListGroup|ListDivider} item
+     * @returns {this}
+     */
+    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}
+     */
+    HasListItem.prototype.item = function(label, iconOrBuilder, builder) {
+        const ListItem = HasListItem.components.ListItem;
+        const item = new ListItem();
+        item.$parent = this;
+        console.log(item.$parent);
+
+        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}
+     */
+    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;
+    };
+
+    /**
+     * @returns {this}
+     */
+    HasListItem.prototype.divider = function() {
+        const divider = new ListDivider();
+        divider.$parent = this;
+        this.$description.items.push(divider);
+        return this;
+    };
+
+    /**
+     * 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 = builder;
+        return this;
+    };
+
+    /**
+     * Flexible list container supporting single/multi selection, checkbox or click-to-select modes, dividers, and inset styling.
      *
      * @example
      * const list = new List()
@@ -15022,27 +15221,26 @@ var NativeComponents = (function (exports) {
      * });
      *
      * @constructor
-     * @param {GlobalAttributes} [config]
+     * @param {GlobalAttributes} [props]
      */
-    function List(config = {}) {
-        if(!(this instanceof List)) {
-            return new List(config);
+    function List(props = {}) {
+        if (!(this instanceof List)) {
+            return new List(props);
         }
 
         this.$description = {
-            selectable: false,
-            multiSelect: false,
-            selectedValues: null,
-            inset: false,
-            divider: false,
-            data: null,
-            render: null,
-            selectByCheckbox: false,
-            selectByClick: false,
-            loopOnKeyboard: true,
-            ...config,
+            selectable:       $(false),
+            multiSelect:      $(false),
+            selectedValues:   $.array(),
+            inset:            $(0),
+            divider:          false,
+            items:            $.array(),
+            render:           null,
+            selectByCheckbox: $(false),
+            selectByClick:    $(false),
+            loopOnKeyboard:   $(false),
+            props,
         };
-
     }
 
     List.defaultTemplate = null;
@@ -15050,71 +15248,77 @@ var NativeComponents = (function (exports) {
     /**
      * 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,
+     *     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.list;
+        List.defaultTemplate = template;
     };
 
     BaseComponent.extends(List);
-    BaseComponent.use(List, HasItems, HasEventEmitter);
+    BaseComponent.use(List, HasItems, HasEventEmitter, HasListItem);
 
-    List.defaultTemplate = null;
-
-    List.use = function(template) {
-        List.defaultTemplate = template.list;
+    /**
+     * @param {ObservableArray<*>|*[]} list
+     * @returns {this}
+     */
+    List.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;
+        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;
+        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;
+        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;
+        this.$description.multiSelect = BaseComponent.obs(multi);
+        this.$description.selectable.set(true);
         return this;
     };
 
     /**
-     * @param {Observable<*[]>} observable
+     * @param {ObservableArray<*>|Observable<*[]>} observable
      * @returns {this}
      */
     List.prototype.selectedValuesModel = function(observable) {
@@ -15123,59 +15327,63 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * @param {number} [inset]
+     * Inset padding in px applied to all items.
+     * @param {number} [inset=0]
      * @returns {this}
      */
-    List.prototype.inset = function(inset = true) {
-        this.$description.inset = inset;
+    List.prototype.inset = function(inset = 0) {
+        this.$description.inset.set(inset);
         return this;
     };
 
     /**
+     * @param {boolean} loopOnKeyboard
      * @returns {this}
      */
-    List.prototype.next = function() {
-        // TODO:
+    List.prototype.loopOnKeyboard = function(loopOnKeyboard) {
+        this.$description.loopOnKeyboard = loopOnKeyboard;
         return this;
     };
 
     /**
+     * @param {boolean} [divider=true]
      * @returns {this}
      */
-    List.prototype.preview = function() {
-        // TODO:
+    List.prototype.withDivider = function(divider = true) {
+        this.$description.divider = divider;
         return this;
     };
 
     /**
-     * @param {*} loopOnKeyboard
+     * @param {*} data
      * @returns {this}
      */
-    List.prototype.loopOnKeyboard = function(loopOnKeyboard) {
-        this.$description.loopOnKeyboard = loopOnKeyboard;
+    List.prototype.data = function(data) {
+        this.$description.items = data;
         return this;
     };
 
-    /**
-     * @param {*} [divider]
-     * @returns {this}
-     */
-    List.prototype.withDivider = function(divider = true) {
-        this.$description.divider = divider;
-        return this;
-    };
 
     /**
-     * @param {*} data
+     * 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}
      */
-    List.prototype.data = function(data) {
-        this.$description.data = data;
+    List.prototype.from = function(source, builder) {
+        this.$description.items = source;
+        this.$description.itemBuilder = (...args) => {
+            const item = builder(...args);
+            item.$parent = this;
+            return item;
+        };
         return this;
     };
 
     /**
-     * @param {(item: ListItem, event: MouseEvent) => void} handler
+     * @param {(item: *, event: MouseEvent) => void} handler
      * @returns {this}
      */
     List.prototype.onItemClick = function(handler) {
@@ -15184,7 +15392,7 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * @param {(item: ListItem) => void} handler
+     * @param {(item: *) => void} handler
      * @returns {this}
      */
     List.prototype.onItemSelect = function(handler) {
@@ -15193,62 +15401,72 @@ 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, disabled, selected states.
      *
      * @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)
+     *     .onClick(() => navigate('/dashboard'));
      *
      * ListItem.use((description, instance) => {
-     *     return Li(description.leading, description.content, description.trailing);
+     *     return Li({ class: 'list-item' }, [description.icon, 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,
+            isSelectedIcon:      null,
+            subtitle:   null,
+            icon:       null,
+            trailing:   null,
+            value:      null,
+            data:       null,
+            key:        null,
+            disabled:   null,
+            selected:   null,
+            visibility: null,
+            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,
+     *     isSelectedIcon:   NdChild|null,
+     *     icon:       NdChild|null,
+     *     trailing:   NdChild|null,
+     *     value:      *,
+     *     data:       *|null,
+     *     key:        string|null,
+     *     disabled:   Observable<boolean>|boolean|null,
+     *     selected:   Observable<boolean>|boolean|null,
+     *     visibility: Observable<boolean>|null,
+     *     render:     ((desc: *, instance: ListItem) => NdChild)|null,
+     *     props:      GlobalAttributes,
      * }, instance: ListItem) => NdChild} template
      */
     ListItem.use = function(template) {
@@ -15256,20 +15474,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,11 +15501,11 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * @param {NdChild} leading
+     * @param {NdChild} icon
      * @returns {this}
      */
-    ListItem.prototype.leading = function(leading) {
-        this.$description.leading = leading;
+    ListItem.prototype.isSelectedIcon = function(icon) {
+        this.$description.isSelectedIcon = icon;
         return this;
     };
 
@@ -15300,107 +15518,132 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
+    /**
+     * @param {*} value
+     * @returns {this}
+     */
+    ListItem.prototype.value = function(value) {
+        this.$description.value = value;
+        return this;
+    };
 
     /**
-     * @param {boolean|Observable<boolean>} [disabled=true]
+     * @param {*} data
      * @returns {this}
      */
-    ListItem.prototype.disabled = function(disabled = true) {
-        this.$description.disabled = disabled;
+    ListItem.prototype.data = function(data) {
+        this.$description.data = data;
         return this;
     };
 
     /**
+     * @param {string} key
      * @returns {this}
      */
-    ListItem.prototype.selectable = function() {
-        this.$description.selectable = true;
-        if(Validator.isObservable(this.$description.selected)) {
-            return this;
-        }
-        this.$description.selected = $(false);
+    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 = BaseComponent.obs(disabled);
         return this;
     };
 
     /**
-     * @param {boolean|Observable<boolean>} [selected]
+     * @param {boolean|Observable<boolean>} [selected=true]
      * @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;
+        this.$description.selected = BaseComponent.obs(selected);
         return this;
     };
 
     /**
-     * @param {NdChild} [show]
+     * @param {boolean|Observable<boolean>} mode
      * @returns {this}
      */
-    ListItem.prototype.divider = function(show = true) {
-        this.$description.divider = show;
+    ListItem.prototype.visibility = function(mode) {
+        this.$description.visibility = BaseComponent.obs(mode);
         return this;
     };
 
     /**
-     * @param {*} data
+     * @param {Function} handler
      * @returns {this}
      */
-    ListItem.prototype.data = function(data) {
-        this.$description.data = data;
+    ListItem.prototype.onClick = function(handler) {
+        this.on('click', handler);
         return this;
     };
 
     /**
-     * Groups ListItem instances under a header/footer inside a List.
-     *
+     * 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,
+            label:       label,
+            icon:        null,
+            items:       $.array(),
+            render:      null,
+            collapsable: false,
+            collapsed:   null,
+            visibility:  $(true),
+            props,
         };
     }
 
     BaseComponent.extends(ListGroup);
-    BaseComponent.use(ListGroup, HasItems);
+    BaseComponent.use(ListGroup, HasItems, HasEventEmitter, HasListItem);
+
+    HasListItem.components.ListGroup = ListGroup;
 
     ListGroup.defaultTemplate = null;
 
     /**
      * 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 +15651,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 +15704,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.
      *
@@ -23497,6 +23732,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 +23768,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 +23798,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 +23823,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;