@massimo-cassandro/minimo 1.21.0 → 1.21.2

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

@@ -63,6 +63,11 @@ const config = {
   // Comments at the end of custom properties are preserved, while full-line ones will be lost.
   mergeCustomProps: false,
 
+  // Wraps the generated custom properties inside a CSS `@layer` at-rule,
+  // e.g. addLayer: 'project' -> `@layer project { :root { ... } }`.
+  // Set to null, undefined or false (default) to emit no layer.
+  addLayer: false,
+
   // Named groups of custom properties. Properties whose first hyphen-separated
   // name segment matches one of a group's `prefixes` are pulled out, labelled
   // with the group's `name` and placed at the beginning of the output CSS

package/design-tokens/utilities/build-tokens-src/config.mjs

@@ -87,6 +87,11 @@ export const pxToRem = buildConfig.pxToRem !== false;
 // build-tokens-src/merge-css.mjs). Default: false.
 export const mergeCustomProps = buildConfig.mergeCustomProps === true;
 
+// addLayer: wraps the generated custom properties inside a CSS `@layer`
+// at-rule (see formats/css.mjs), e.g. `@layer project { :root { ... } }`.
+// Set to null, undefined or false (default) to emit no layer.
+export const addLayer = buildConfig.addLayer ? String(buildConfig.addLayer).trim() : null;
+
 // customPropsGroups: custom properties whose first hyphen-separated name
 // segment matches one of a group's prefixes are pulled out, labelled with
 // that group's name and moved to the beginning of the generated CSS file, in

package/design-tokens/utilities/build-tokens-src/formats/css.mjs

@@ -324,6 +324,12 @@ StyleDictionary.registerFormat({
     appendBlock(restProps);
 
     customPropsCount = sortedProps.length;
-    return `${selector} {\n${outLines.join('\n')}\n}\n`;
+    const block = `${selector} {\n${outLines.join('\n')}\n}\n`;
+
+    // addLayer: wraps the whole block inside `@layer <name> { ... }`.
+    // Indentation is left to stylelint's fix step (run right after the build).
+    return options.addLayer
+      ? `@layer ${options.addLayer} {\n\n${block}}\n`
+      : block;
   },
 });

package/design-tokens/utilities/build-tokens-src/platforms.mjs

@@ -47,6 +47,7 @@ const JSON_TRANSFORMS = [
  * @param {'keep'|'calc'|'resolve'} opts.jsonExpression  How to handle math expressions in dimension tokens.
  * @param {{name: string, prefixes: string[]}[]} opts.customPropsGroups  Named groups of name prefixes, moved to the top of the CSS output in list order.
  * @param {boolean}         opts.pxToRem             If false, skips the px→rem transform on the CSS platform. Default: true.
+ * @param {string|null}     opts.addLayer            Wraps the generated custom properties inside `@layer <addLayer> { ... }`. null = no layer.
  * @returns {Record<string, PlatformConfig>} platforms object ready for Style Dictionary config
  */
 export const buildPlatforms = ({
@@ -59,6 +60,7 @@ export const buildPlatforms = ({
   concreteFilePaths = [],
   customPropsGroups = [],
   pxToRem = true,
+  addLayer = null,
 }) => {
   const cssTransforms = pxToRem
     ? CSS_TRANSFORMS
@@ -77,6 +79,7 @@ export const buildPlatforms = ({
             outputReferences: true,
             showFileHeader: true,
             customPropsGroups,
+            addLayer,
           },
         },
       ],

package/design-tokens/utilities/build-tokens.mjs

@@ -34,6 +34,7 @@ import {
   mergeCustomProps,
   customPropsGroups,
   pxToRem,
+  addLayer,
 } from './build-tokens-src/config.mjs';
 
 // ── 2. Custom transforms ─────────────────────────────────────────────────────
@@ -107,6 +108,7 @@ const sd = new StyleDictionary({
     concreteFilePaths,
     customPropsGroups,
     pxToRem,
+    addLayer,
   }),
 });
 

package/index.js

@@ -20,7 +20,7 @@ export { ValidationError } from './src/utilities/validation-error-class.js';
 
 // domBuilder helpers
 export { buildPictureTag } from './src/utilities/dom-builder-helpers/picture-tag.js';
-export { buildInput, buildCheckbox, buildTextarea, buildFakeField } from './src/utilities/dom-builder-helpers/form-tags.js';
+export { buildInput, buildCheckbox, buildTextarea, buildFakeField, buildSelect } from './src/utilities/dom-builder-helpers/form-tags.js';
 
 // components
 export { dismissAlerts } from './src/components/dismiss-alerts.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.21.0",
+  "version": "1.21.2",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",
@@ -90,9 +90,9 @@
   "devDependencies": {
     "@massimo-cassandro/eslint-config": "^3.0.13",
     "@massimo-cassandro/stylelint-config": "^2.3.13",
-    "@types/node": "^26.1.2",
+    "@types/node": "^26.2.0",
     "jsdom": "^29.1.1",
-    "style-dictionary": "^5.5.0"
+    "style-dictionary": "^5.5.1"
   },
   "dependencies": {
     "@inquirer/input": "^5.1.2",

package/src/minimo.css

@@ -1,4 +1,4 @@
-/* project e overrides sono destinati all'uso nel progetto che implementa minimo */
+/* see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer */
 @layer reset, base, components, utilities, project, overrides;
 
 /* @import '@src/fonts.css'; */

package/src/utilities/dom-builder-helpers/form-tags.js

@@ -92,6 +92,78 @@ export function buildInput({
   });
 }
 
+/**
+ * select tag builder
+ *
+ * @param {Object} args
+ * @param {string} args.label - select label.
+ * @param {string | null} args.name - select `name` attribute.
+ * @param {string | number | null} args.selectedValue - selected value
+ * @param {Array<[string|number, string]> | Record<string, string> | null} args.options - options value/text pairs, as an array of two-element `[value, text]` arrays or as a `{value: text, ...}` object
+ * @param {boolean} [args.addEmptyOption=true] - When true, and empty option tag is added at top
+ * @param {string | null} [args.wrapperClass=null] - optional class to be added to the `.form-group` wrapper.
+ * @param {string | null} [args.className=null] - optional class to be added to the `input`.
+ * @param {boolean} [args.condition=true] - When false, the function returns `null` without building anything.
+ * @param {string | HTMLElement | null} args.help - Optional help text.
+ * @param {(function(HTMLElement): void) | null} args.callback - Optional callback function.
+ * @param {Record<string, any> | null}  [args.attrs={}] - Optional attributes object.
+ * @returns {DomBuilderItem|null} The `input` domBuilder item, or `null` when `condition` is false.
+ */
+export function buildSelect({
+  label,
+  name,
+  selectedValue = null,
+  options = null,
+  addEmptyOption = true,
+  wrapperClass = null,
+  className = null,
+  condition = true,
+  help = null,
+  attrs = {},
+  callback = null
+}){
+
+  const id = randomId();
+
+  // normalizing option as an array
+  if(options && !Array.isArray(options)) {
+    options = Object.entries(options);
+  }
+
+  return buildFormGroup({
+    condition,
+    wrapperClass,
+    help,
+    children: [
+      `label.form-label[for:${id}] ${label}`,
+      {
+        tag: 'select',
+        className: classnames('form-control', className, attrs?.class),
+        id: id,
+        attrs: {
+          ...(attrs??{}),
+          name: name,
+        },
+        children: [
+          ...(addEmptyOption? ['option[value=""]'] : []),
+          ...(options
+            ? options.map(([value, text]) => ({
+              tag: 'option',
+              attrs: {
+                value: value,
+                selected: value === selectedValue
+              },
+              content: text
+            }))
+            : []
+          )
+        ],
+        callback: callback
+      }
+    ]
+  });
+}
+
 
 /**
  * Checkbox tag builder