@massimo-cassandro/minimo 1.24.12 → 1.25.0

package/README.md

@@ -25,7 +25,7 @@ To bootstrap a project **before** installing the whole package, download only th
 
 ```bash
 curl -sL "$(npm view @massimo-cassandro/minimo dist.tarball)" | tar xz package/dev-tools/starter-kit
-zsh package/dev-tools/starter-kit/starter-install.sh # --no-npm
+zsh package/dev-tools/starter-kit/starter-install.sh
 rm -rf package
 ```
 

package/design-tokens/tokens-config-sample.mjs

@@ -81,6 +81,10 @@ const config = {
       name: 'LAYOUT',
       prefixes: ['body', 'layout'],
     },
+    {
+      name: 'UI',
+      prefixes: ['ui'],
+    },
   ],
 
 

package/dev-tools/starter-kit/starter-install.sh

@@ -278,9 +278,9 @@ else
   safe_cat "${MINIMO_PKG_DIR}/dev-tools/create-favicons/src/default-params.mjs" "${FRONTEND_INSTALL_PATH}/favicons/create-favicons-cfg.mjs"
 fi
 
-# entry css critical (inlinata nei template html) e entry js, sulla root di
+# entry css critical (inline nei template html) e entry js, sulla root di
 # installazione accanto a index.css
-safe_cat "${TEMPLATES_DIR}/index-critical.css" "${FRONTEND_INSTALL_PATH}/index-critical.css"
+safe_cat "${TEMPLATES_DIR}/layout-critical.css" "${FRONTEND_INSTALL_PATH}/src/css/layout-critical.css"
 safe_cat "${TEMPLATES_DIR}/app_index.js"       "${FRONTEND_INSTALL_PATH}/index.js"
 
 # favicons: istruzioni d'uso di `npx create-favicons`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.24.12",
+  "version": "1.25.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",

package/src/utilities/dom-builder/dom-builder.js

@@ -14,10 +14,11 @@ import { parseDomString } from './parseDomString.js';
  * @property {string | string[]} [classname] - Alias for `className`.
  * @property {string | null} [id] - Unique element ID.
  * @property {[string, *] | [string, *][] | Object<string, *>} [attrs] - Attributes: a `[name, value]` pair, array of pairs, or `{name: value}` object.
- * @property {string | number | Function | Element | DomBuilderItem[] | null} [content] - Element content.
+ * @property {string | number | Function | Node | DomBuilderItem[] | null} [content] - Element content.
  *   A string or number is set as plain text (`textContent`) unless it contains `<`, in which case it is
  *   treated as markup: sanitized and inserted via the native Sanitizer API (`Element.setHTML`) where
- *   supported, falling back to raw `innerHTML` on browsers without it.
+ *   supported, falling back to raw `innerHTML` on browsers without it. A `Node` (an `Element`, a
+ *   `DocumentFragment`, ...) is appended as-is, either directly or returned from a function.
  * @property {string | number} [text] - Literal text node shorthand: inserts a plain `Text` node (never
  *   parsed as markup) in place of an element, so it can sit as a sibling of tags within `children`/`content`
  *   arrays. Mutually exclusive with `tag`/`content`/`children`: when set (and `tag` is absent), every other
@@ -44,7 +45,7 @@ import { parseDomString } from './parseDomString.js';
  *     className: 'xxx' | ['class1', 'class2'], // also `class`
  *     id: 'element-id',
  *     attrs: [attr_name, attr_value] | [[...], [...]] | {name: value},
- *     content: 'xxx' | 'xxx <strong>yyy</strong>' | 123 | domBuilder Array | function | Element, // see DomBuilderItem.content above
+ *     content: 'xxx' | 'xxx <strong>yyy</strong>' | 123 | domBuilder Array | function | Node, // see DomBuilderItem.content above
  *     condition: true | false,
  *     callback: el => ...,
  *     children: [...]
@@ -89,7 +90,7 @@ import { parseDomString } from './parseDomString.js';
  * - `className` / `class` / `classname` {string | string[]} - CSS class(es): a single string or an array (falsy values filtered out).
  * - `id` {string | null} - Unique element ID.
  * - `attrs` {[string, *] | [string, *][] | Object<string, *>} - Attributes: a `[name, value]` pair, array of pairs, or `{name: value}` object.
- * - `content` {string | number | Function | Element | DomBuilderItem[] | null} - Element content. A string/number is set as `textContent` unless it contains `<`, in which case it's sanitized and inserted as markup (`Element.setHTML`, falling back to `innerHTML`).
+ * - `content` {string | number | Function | Node | DomBuilderItem[] | null} - Element content. A string/number is set as `textContent` unless it contains `<`, in which case it's sanitized and inserted as markup (`Element.setHTML`, falling back to `innerHTML`). A `Node` (`Element`, `DocumentFragment`, ...), passed directly or returned from a function, is appended as-is.
  * - `text` {string | number} - Literal text node shorthand: inserts a plain `Text` node (never parsed as markup) as a sibling of other items, in place of an element. Mutually exclusive with `tag`/`content`/`children`.
  * - `condition` {boolean} - When false, the element (or text node) is skipped. Default `true`.
  * - `callback` {(function(HTMLElement|Text): void) | null} - Invoked after the element (or text node) is created.
@@ -232,16 +233,21 @@ export function domBuilder(structureArray = [], parent, options = {}) {
 
         } else {
 
-          /** @type {string | Element | null} */
+          /** @type {string | Node | null} */
           let content = null;
           if (typeof safeItem.content === 'function') {
             content = safeItem.content();
 
+          } else if (safeItem.content instanceof Node) {
+            content = safeItem.content;
+
           } else if (safeItem.content != null) {
             content = String(safeItem.content);
           }
 
-          if (content instanceof Element) {
+          if (content instanceof Node) {
+            // Element, DocumentFragment, Text, ... appended as-is (a DocumentFragment's
+            // children are moved into `el`, emptying the fragment, per native DOM behavior)
             el.appendChild(content);
 
           } else if (content != null) {