native-document 1.0.168 → 1.0.169

package/CHANGELOG.md

@@ -9,13 +9,45 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+---
+
+## [1.0.169] - 2026-06-06
+
 ### Added
 
-- `Card` - versatile content container with image, header, footer, actions, clickable and loading states (renderer implementation in progress)
-- `List` - flexible list with single/multi selection, checkbox or click-to-select modes, dividers and keyboard navigation (renderer implementation in progress)
+- `Icon` - adapter-based icon system with chainable API (`Icon.search.fill().large()`),
+  `Icon.use(renderer, defaultConfigs)`, and 120+ semantic icon names accessible
+  via `Icon.{name}` getters
+- `TablerIconRender` - Tabler Icons adapter (outline + fill)
+- `PhosphorIconRender` - Phosphor Icons adapter (thin/light/regular/bold/fill/duotone)
+- `MaterialIconRender` - Google Material Icons adapter (fill/outline/round/sharp/twoTone)
 
 ---
 
+## [1.0.167] - 2026-06-06
+
+### Added
+
+#### Components
+- `Card` - content container with image, header, footer, actions, variants (elevated, outlined, flat), clickable, hoverable, loading state, horizontal layout, custom renderers (`renderImage`, `renderHeader`, `renderContent`, `renderFooter`, `renderActions`), and fully custom `layout(slots, instance)` function
+- `List` - flexible list with `HasListItem` trait, `from(source, builder)` reactive data binding, `withDivider`, `inset`, `selectable`, `multiSelect`, `selectByClick`, `selectByCheckbox`, `selectInto`
+- `ListItem` - list item with icon, label, subtitle, trailing, disabled, selected, visibility, `isSelectedIcon`, `swipeLeading`, `swipeTrailing` for mobile swipe actions with auto-close on outside click and `stopPropagation` on swipe action clicks
+- `ListGroup` - collapsible group of items with icon, `collapsable(mode, openedIcon, closedIcon)`, `collapsed()`, visibility, and full `HasListItem` API (`.item()`, `.group()`, `.divider()`, `.add()`, `.from()`)
+- `ListDivider` - visual separator between list items
+- `HasListItem` - trait adding `.item()`, `.group()`, `.divider()`, `.add()`, `.from()` to `List` and `ListGroup`
+- `SpacerRender` - render for `Spacer` component (`flex: 1` layout utility)
+
+#### UI (renders)
+- `CardRender` + `card.css` - Card renderer with 5 build slots and `layout(slots)` support
+- `ListRender` + `list.css` - `ForEachArray($desc.items)` — items self-render
+- `ListItemRender` + `list-item.css` - reactive checkbox, select indicator, swipe gesture with pointer events, auto-close and stopPropagation
+- `ListGroupRender` + `list-group.css` - collapsible group with reactive chevron via `Switch`
+- `ListDividerRender` + `list-divider.css`
+- `SpacerRender`
+
+### Fixed
+- `Card.use()` was a no-op (empty body) - now correctly assigns `Card.defaultTemplate`
+
 ## [1.0.166] - 2026-06-03
 
 ### Added
@@ -149,5 +181,7 @@ Entries use the following categories:
 
 ---
 
-[Unreleased]: https://github.com/afrocodeur/native-document/compare/v1.0.166...HEAD
-[1.0.166]: https://github.com/afrocodeur/native-document/releases/tag/v1.0.166
+[Unreleased]: https://github.com/afrocodeur/native-document/compare/v1.0.169...HEAD
+[1.0.169]: https://github.com/afrocodeur/native-document/compare/v1.0.167...v1.0.169
+[1.0.167]: https://github.com/afrocodeur/native-document/compare/v1.0.166...v1.0.167
+[1.0.166]: https://github.com/afrocodeur/native-document/releases/tag/v1.0.166

package/components.js

@@ -27,4 +27,6 @@ export * from './src/components/tabs/index';
 export * from './src/components/toast/index';
 export * from './src/components/tooltip/index';
 export * from './src/components/stacks/index';
-export * from './src/components/spacer/index';
+export * from './src/components/spacer/index';
+
+export * from './src/components/icon/index';

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

@@ -3143,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);
         }
     };
@@ -3221,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 {
@@ -3255,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));
     };
 
     /**
@@ -3274,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;
+            }
+            const attributeName = originalAttributeName.toLowerCase();
+            if(value.__$Observable) {
+                if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+                    bindBooleanAttribute(element, attributeName, value);
+                    continue;
+                }
+                bindAttributeWithObservable(element, originalAttributeName, value);
                 continue;
             }
-            if(typeof value ===  'object') {
+            if(type ===  'object') {
                 if(attributeName === 'class') {
                     bindClassAttribute(element, value);
                     continue;
@@ -3297,6 +3309,9 @@ var NativeComponents = (function (exports) {
                 bindBooleanAttribute(element, attributeName, value);
                 continue;
             }
+            if(value.__$isTemplateBinding) {
+                value.$hydrate(element, attributeName);
+            }
 
             element.setAttribute(attributeName, value);
         }
@@ -3384,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
@@ -3999,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;
     };
 
@@ -15117,6 +15136,64 @@ var NativeComponents = (function (exports) {
         ListGroup: null,
     };
 
+
+    /**
+     * @param {ObservableArray<*>|*[]} list
+     * @returns {this}
+     */
+    HasListItem.prototype.selectInto = function(list) {
+        this.$description.selectedValues = list;
+        return this;
+    };
+
+    /**
+     * @param {boolean|Observable<boolean>} [selectable=true]
+     * @returns {this}
+     */
+    HasListItem.prototype.selectable = function(selectable = true) {
+        this.$description.selectable = BaseComponent.obs(selectable);
+        return this;
+    };
+
+    /**
+     * Select items on click. Mutually exclusive with selectByCheckbox.
+     * @returns {this}
+     */
+    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}
+     */
+    HasListItem.prototype.selectByCheckbox = function() {
+        this.$description.selectByClick.set(false);
+        this.$description.selectByCheckbox.set(true);
+        return this;
+    };
+
+    /**
+     * @param {boolean|Observable<boolean>} [multi=true]
+     * @returns {this}
+     */
+    HasListItem.prototype.multiSelect = function(multi = true) {
+        this.$description.multiSelect = BaseComponent.obs(multi);
+        this.$description.selectable.set(true);
+        return this;
+    };
+
+    /**
+     * @param {boolean} loopOnKeyboard
+     * @returns {this}
+     */
+    HasListItem.prototype.loopOnKeyboard = function(loopOnKeyboard) {
+        this.$description.loopOnKeyboard = loopOnKeyboard;
+        return this;
+    };
+
     /**
      * @param {ListItem|ListGroup|ListDivider} item
      * @returns {this}
@@ -15140,7 +15217,6 @@ var NativeComponents = (function (exports) {
         const ListItem = HasListItem.components.ListItem;
         const item = new ListItem();
         item.$parent = this;
-        console.log(item.$parent);
 
         item.label(label);
 
@@ -15191,6 +15267,7 @@ var NativeComponents = (function (exports) {
         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.
@@ -15201,7 +15278,14 @@ var NativeComponents = (function (exports) {
      */
     HasListItem.prototype.from = function(source, builder) {
         this.$description.items = source;
-        this.$description.itemBuilder = builder;
+        this.$description.itemBuilder = (...args) => {
+            if(args[0].__$ListInstance) {
+                return args[0];
+            }
+            const item = builder(...args);
+            item.$parent = this;
+            return item;
+        };
         return this;
     };
 
@@ -15269,53 +15353,6 @@ var NativeComponents = (function (exports) {
     BaseComponent.extends(List);
     BaseComponent.use(List, HasItems, HasEventEmitter, HasListItem);
 
-    /**
-     * @param {ObservableArray<*>|*[]} list
-     * @returns {this}
-     */
-    List.prototype.selectInto = function(list) {
-        this.$description.selectedValues = list;
-        return this;
-    };
-
-    /**
-     * @param {boolean|Observable<boolean>} [selectable=true]
-     * @returns {this}
-     */
-    List.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.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.set(false);
-        this.$description.selectByCheckbox.set(true);
-        return this;
-    };
-
-    /**
-     * @param {boolean|Observable<boolean>} [multi=true]
-     * @returns {this}
-     */
-    List.prototype.multiSelect = function(multi = true) {
-        this.$description.multiSelect = BaseComponent.obs(multi);
-        this.$description.selectable.set(true);
-        return this;
-    };
 
     /**
      * @param {ObservableArray<*>|Observable<*[]>} observable
@@ -15336,15 +15373,6 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
-    /**
-     * @param {boolean} loopOnKeyboard
-     * @returns {this}
-     */
-    List.prototype.loopOnKeyboard = function(loopOnKeyboard) {
-        this.$description.loopOnKeyboard = loopOnKeyboard;
-        return this;
-    };
-
     /**
      * @param {boolean} [divider=true]
      * @returns {this}
@@ -15363,25 +15391,6 @@ var NativeComponents = (function (exports) {
         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}
-     */
-    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: *, event: MouseEvent) => void} handler
      * @returns {this}
@@ -15401,7 +15410,8 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * A single item in a List. Supports icon, label, subtitle, trailing, disabled, selected states.
+     * A single item in a List. Supports icon, label, subtitle, trailing slot,
+     * disabled/selected states, swipe actions (mobile), and custom render.
      *
      * @example
      * ListItem()
@@ -15411,10 +15421,12 @@ var NativeComponents = (function (exports) {
      *     .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({ class: 'list-item' }, [description.icon, description.label]);
+     *     return Li({ class: 'list-item' }, description.label);
      * });
      *
      * @constructor
@@ -15428,18 +15440,20 @@ var NativeComponents = (function (exports) {
         BaseComponent.call(this, props);
 
         this.$description = {
-            label:      null,
-            isSelectedIcon:      null,
-            subtitle:   null,
-            icon:       null,
-            trailing:   null,
-            value:      null,
-            data:       null,
-            key:        null,
-            disabled:   null,
-            selected:   null,
-            visibility: null,
-            render:     null,
+            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,
         };
     }
@@ -15454,19 +15468,21 @@ var NativeComponents = (function (exports) {
     /**
      * Registers the render template for ListItem.
      * @param {(description: {
-     *     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,
+     *     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) {
@@ -15500,15 +15516,6 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
-    /**
-     * @param {NdChild} icon
-     * @returns {this}
-     */
-    ListItem.prototype.isSelectedIcon = function(icon) {
-        this.$description.isSelectedIcon = icon;
-        return this;
-    };
-
     /**
      * @param {NdChild} trailing
      * @returns {this}
@@ -15572,6 +15579,36 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
+    /**
+     * Icon displayed when the item is selected (selectByClick mode).
+     * @param {NdChild} icon
+     * @returns {this}
+     */
+    ListItem.prototype.isSelectedIcon = function(icon) {
+        this.$description.isSelectedIcon = icon;
+        return this;
+    };
+
+    /**
+     * Swipe actions revealed on the leading (left) side — mobile swipe gesture.
+     * @param {NdChild[]} actions
+     * @returns {this}
+     */
+    ListItem.prototype.swipeLeading = function(actions) {
+        this.$description.swipeLeading = Array.isArray(actions) ? actions : [actions];
+        return this;
+    };
+
+    /**
+     * 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}
@@ -15613,6 +15650,9 @@ var NativeComponents = (function (exports) {
         BaseComponent.call(this, props);
 
         this.$description = {
+            selectable:       $(false),
+            multiSelect:      $(false),
+            selectedValues:   $.array(),
             label:       label,
             icon:        null,
             items:       $.array(),
@@ -15620,6 +15660,9 @@ var NativeComponents = (function (exports) {
             collapsable: false,
             collapsed:   null,
             visibility:  $(true),
+            selectByCheckbox: $(false),
+            selectByClick:    $(false),
+            loopOnKeyboard:   $(false),
             props,
         };
     }
@@ -15630,6 +15673,7 @@ var NativeComponents = (function (exports) {
     HasListItem.components.ListGroup = ListGroup;
 
     ListGroup.defaultTemplate = null;
+    ListGroup.prototype.__$ListInstance = true;
 
     /**
      * Registers the render template for ListGroup.
@@ -20945,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;
     };
 
     /**
@@ -21108,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.
      *