@massimo-cassandro/minimo 1.19.11 → 1.20.0

package/design-tokens/_src/form.minimo.tokens.mjs

@@ -172,13 +172,39 @@ export default {
         }
       },
       required: {
-        'flag-color': {
-          $value: '#c00',
-          $type: 'color'
+        label: {
+          padding: {
+            inline: {
+              start: {
+                $type: 'dimension',
+                $value: '{size.base}',
+              }
+            }
+          },
         },
-        'flag-content': {
-          $value: '\'\\002A\'',
-          $type: 'string'
+        flag: {
+          color: {
+            $type: 'color',
+            $value: '#c00',
+          },
+          content: {
+            $type: 'string',
+            $value: '\'\\002A\'',
+          },
+          top: {
+            $type: 'dimension',
+            $value: '-.15em',
+          },
+          left: {
+            $type: 'dimension',
+            $value: '0em',
+          },
+          font: {
+            size: {
+              $type: 'dimension',
+              $value: '2em',
+            }
+          }
         }
       },
       focus: {

package/design-tokens/tokens/design-tokens/_src/form.minimo.tokens.jsonc

@@ -168,13 +168,39 @@
         }
       },
       "required": {
-        "flag-color": {
-          "$type": "color",
-          "$value": "#c00"
+        "label": {
+          "padding": {
+            "inline": {
+              "start": {
+                "$type": "dimension",
+                "$value": "{size.base}"
+              }
+            }
+          }
         },
-        "flag-content": {
-          "$type": "string",
-          "$value": "'\\002A'"
+        "flag": {
+          "color": {
+            "$type": "color",
+            "$value": "#c00"
+          },
+          "content": {
+            "$type": "string",
+            "$value": "'\\002A'"
+          },
+          "top": {
+            "$type": "dimension",
+            "$value": "-.15em"
+          },
+          "left": {
+            "$type": "dimension",
+            "$value": "0em"
+          },
+          "font": {
+            "size": {
+              "$type": "dimension",
+              "$value": "2em"
+            }
+          }
         }
       },
       "focus": {

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

@@ -49,6 +49,11 @@ const config = {
 
   ],
 
+  // If true (default), dimension token values expressed in px are converted
+  // to rem in the generated CSS. Values in other units (em, %, vh, dvw, ...)
+  // are never touched regardless of this option.
+  pxToRem: true,
+
   // If true, custom properties already present in the CSS destination file
   // (destFile, from a previous build) take priority over the ones generated
   // by this build. Properties found only in the pre-existing file (no longer
@@ -58,9 +63,20 @@ const config = {
   // Comments at the end of custom properties are preserved, while full-line ones will be lost.
   mergeCustomProps: false,
 
-  // Properties whose names begin with one of the following strings are grouped
-  // and placed at the beginning of the output CSS file
-  colorPropertiesPrefixes: ['accent', 'primary', 'secondary', 'neutral'],
+  // 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
+  // file, in the order the groups are listed here.
+  customPropsGroups: [
+    {
+      name: 'COLORS',
+      prefixes: ['accent', 'primary', 'secondary', 'neutral'],
+    },
+    {
+      name: 'LAYOUT',
+      prefixes: ['body', 'layout'],
+    },
+  ],
 
 
   // ---------------------------------------------------------------------------

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

@@ -76,16 +76,24 @@ export const penpotExpressions = VALID_EXPR_MODES.includes(buildConfig.penpotExp
   ? buildConfig.penpotExpressions
   : 'resolve';
 
+// pxToRem: if true (default), dimension token values expressed in px are
+// converted to rem in the generated CSS (see the size/pxToRem-smart
+// transform in build-tokens-src/transforms.mjs). Values in other units
+// (em, %, vh, dvw, ...) are never touched regardless of this option.
+export const pxToRem = buildConfig.pxToRem !== false;
+
 // mergeCustomProps: if true, custom properties already present in the CSS
 // destination file take priority over the ones generated by this build (see
 // build-tokens-src/merge-css.mjs). Default: false.
 export const mergeCustomProps = buildConfig.mergeCustomProps === true;
 
-// colorPropertiesPrefixes: custom properties whose first hyphen-separated
-// name segment matches one of these prefixes are grouped together and moved
-// to the beginning of the generated CSS file (see formats/css.mjs). Default: [].
-export const colorPropertiesPrefixes = Array.isArray(buildConfig.colorPropertiesPrefixes)
-  ? buildConfig.colorPropertiesPrefixes
+// 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
+// group-list order (see formats/css.mjs). Each entry: { name, prefixes }.
+// Default: [].
+export const customPropsGroups = Array.isArray(buildConfig.customPropsGroups)
+  ? buildConfig.customPropsGroups
   : [];
 
 // ---------------------------------------------------------------------------

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

@@ -131,6 +131,14 @@ const buildTypography = (tokenName, original, resolveRefs) => {
   return lines.join('\n');
 };
 
+// Builds a customPropsGroups title comment, e.g.:
+//   /* ****** LAYOUT ****** */
+// Dashes fill out a fixed total width so titles line up regardless of name length.
+const DECORATOR_LENGHT = 6;
+const buildGroupTitle = (name) => {
+  return `  /** ${'*'.repeat(DECORATOR_LENGHT)} ${name} ${'*'.repeat(DECORATOR_LENGHT)} **/`;
+};
+
 // ── Format registration ──────────────────────────────────────────────────────
 
 // Exported counter — read by build-tokens.mjs for the final log line
@@ -239,27 +247,31 @@ StyleDictionary.registerFormat({
     const sortedProps = Object.entries(finalProps)
       .sort(([a], [b]) => a.localeCompare(b, 'en', { numeric: true, sensitivity: 'base' }));
 
-    // colorPropertiesPrefixes: properties whose first hyphen-separated name
-    // segment matches one of these prefixes are pulled out and placed, in
-    // prefix-list order, at the beginning of the output file.
-    const colorPropertiesPrefixes = options.colorPropertiesPrefixes ?? [];
-    const colorProps = [];
+    // customPropsGroups: properties whose first hyphen-separated name segment
+    // matches one of a group's prefixes are pulled out, labelled with that
+    // group's name and placed, in group-list order, at the beginning of the
+    // output file. A property matches the first group (in list order) whose
+    // prefixes include it.
+    const customPropsGroups = options.customPropsGroups ?? [];
+    const groupedProps = customPropsGroups.map(() => []);
     const restProps = [];
     for (const entry of sortedProps) {
       const prefix = entry[0].split('-')[0];
-      if (colorPropertiesPrefixes.includes(prefix)) {
-        colorProps.push(entry);
+      const groupIndex = customPropsGroups.findIndex((g) => g.prefixes?.includes(prefix));
+      if (groupIndex !== -1) {
+        groupedProps[groupIndex].push(entry);
       } else {
         restProps.push(entry);
       }
     }
-    colorProps.sort(([a], [b]) => {
-      const prefixA = a.split('-')[0];
-      const prefixB = b.split('-')[0];
-      const idxA = colorPropertiesPrefixes.indexOf(prefixA);
-      const idxB = colorPropertiesPrefixes.indexOf(prefixB);
-      if (idxA !== idxB) return idxA - idxB;
-      return a.localeCompare(b, 'en', { numeric: true, sensitivity: 'base' });
+    groupedProps.forEach((props, i) => {
+      const prefixes = customPropsGroups[i].prefixes;
+      props.sort(([a], [b]) => {
+        const idxA = prefixes.indexOf(a.split('-')[0]);
+        const idxB = prefixes.indexOf(b.split('-')[0]);
+        if (idxA !== idxB) return idxA - idxB;
+        return a.localeCompare(b, 'en', { numeric: true, sensitivity: 'base' });
+      });
     });
 
     // A blank line is inserted between blocks of properties sharing the same
@@ -278,11 +290,17 @@ StyleDictionary.registerFormat({
       }
     };
 
-    if (colorProps.length) {
-      outLines.push('  /** COLORS **/');
-    }
-    appendBlock(colorProps);
-    if (colorProps.length && restProps.length) {
+    const hasGroups = groupedProps.some((props) => props.length);
+    let isFirstBlock = true;
+    groupedProps.forEach((props, i) => {
+      if (!props.length) return;
+      if (!isFirstBlock) outLines.push('');
+      isFirstBlock = false;
+      outLines.push(buildGroupTitle(customPropsGroups[i].name));
+      appendBlock(props);
+      prevPrefix = null;
+    });
+    if (hasGroups && restProps.length) {
       outLines.push('', '  /* ---------------------- */', '');
       prevPrefix = null;
     }

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

@@ -44,7 +44,8 @@ const PENPOT_TRANSFORMS = [
  *                                                   Collected from sd.allTokens after SD initialisation.
  *                                                   Ignored when penpotDestFile is set.
  * @param {'keep'|'calc'|'resolve'} opts.penpotExpressions  How to handle math expressions in dimension tokens.
- * @param {string[]}        opts.colorPropertiesPrefixes  Name prefixes grouped at the top of the CSS output.
+ * @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.
  * @returns {Record<string, PlatformConfig>} platforms object ready for Style Dictionary config
  */
 export const buildPlatforms = ({
@@ -55,13 +56,18 @@ export const buildPlatforms = ({
   penpotFormat,
   penpotExpressions = 'keep',
   concreteFilePaths = [],
-  colorPropertiesPrefixes = [],
+  customPropsGroups = [],
+  pxToRem = true,
 }) => {
+  const cssTransforms = pxToRem
+    ? CSS_TRANSFORMS
+    : CSS_TRANSFORMS.filter((name) => name !== 'size/pxToRem-smart');
+
   /** @type {Record<string, PlatformConfig>} */
   const platforms = {
     css: {
       buildPath: buildPath + '/',
-      transforms: CSS_TRANSFORMS,
+      transforms: cssTransforms,
       files: [
         {
           destination: destFile,
@@ -69,7 +75,7 @@ export const buildPlatforms = ({
           options: {
             outputReferences: true,
             showFileHeader: true,
-            colorPropertiesPrefixes,
+            customPropsGroups,
           },
         },
       ],

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

@@ -55,7 +55,7 @@ StyleDictionary.registerTransform({
 });
 
 // ---------------------------------------------------------------------------
-// 2. px → rem (dimension tokens only, skips values already in rem)
+// 2. px → rem (dimension tokens only, skips values already in rem, %, em, ...)
 // ---------------------------------------------------------------------------
 StyleDictionary.registerTransform({
   name: 'size/pxToRem-smart',
@@ -64,8 +64,7 @@ StyleDictionary.registerTransform({
     const value = token.$value || token.value;
     return (token.$type === 'dimension' || token.type === 'dimension')
       && typeof value === 'string'
-      && !value.endsWith('rem')
-      && !value.endsWith('%');
+      && value.endsWith('px');
   },
   transform: (token) => {
     const value      = token.$value || token.value;

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

@@ -32,7 +32,8 @@ import {
   penpotExpressions,
   source,
   mergeCustomProps,
-  colorPropertiesPrefixes,
+  customPropsGroups,
+  pxToRem,
 } from './build-tokens-src/config.mjs';
 
 // ── 2. Custom transforms ─────────────────────────────────────────────────────
@@ -96,7 +97,8 @@ const sd = new StyleDictionary({
     penpotFormat,
     penpotExpressions,
     concreteFilePaths,
-    colorPropertiesPrefixes,
+    customPropsGroups,
+    pxToRem,
   }),
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.19.11",
+  "version": "1.20.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",
@@ -37,6 +37,8 @@
     "upd@m": "npx upd@m",
     "build-tokens": "node ./design-tokens/utilities/build-tokens.mjs --config ./design-tokens/tokens-config.mjs",
     "build-margin-padding-css": "node ./scripts/build-margin-padding-css.mjs",
+    "generate:types": "node ./scripts/generate-class-types.mjs",
+    "prepublishOnly": "npm run generate:types",
     "check unresolved props": "node ./design-tokens/utilities/check-unresolved-custom-props.mjs --config ./design-tokens/tokens-config.mjs",
     "test": "node --test \"test/**/*.test.mjs\"",
     "test sideEffects tree-shaking": "node ./test/sideEffects-tree-shaking/run-test.mjs",
@@ -56,6 +58,7 @@
   "files": [
     "./index.js",
     "src/**/*.{js,mjs,css,svg,md}",
+    "types/**/*.d.ts",
     "design-tokens/README.md",
     "design-tokens/tokens-config-sample.mjs",
     "design-tokens/tokens/**/*.{tokens.json,tokens.jsonc}",

package/src/css/forms/forms.css

@@ -4,20 +4,20 @@
 /* TODO classe grid specifica per i form ?? (.form-grid?) */
 /* TODO customizable select */
 /* TODO form-check: rifare come flex, separare? */
+/* TODO abbreviare prefisso  */
 
 .form-group:has([required]):not(:has([disabled])) {
 
   /* `>` excludes labels within form-collections  */
   > .form-label {
     position: relative;
-    padding-inline-start: var(--size-base);
+    padding-inline-start: var(--form-control-required-label-padding-inline-start);
     &::before {
       position: absolute;
-      top: -.15em;
-      left: 0;
+      top: var(--form-control-required-flag-top);
+      left: var(--form-control-required-flag-left);
       display: inline-block;
-      padding-inline-end: var(--size-xxs);
-      font-size: 2em;
+      font-size: var(--form-control-required-flag-font-size);
       color: var(--form-control-required-flag-color);
       content: var(--form-control-required-flag-content);
     }

package/src/custom-properties.css

@@ -1,5 +1,5 @@
 :root {
-  /** COLORS **/
+  /** ****** COLORS ****** **/
   --accent: #567d0d;
   --accent-fg: #fff;
 
@@ -12,6 +12,12 @@
   --neutral-100: #666;
   --neutral-100-fg: #fff;
 
+  /** ****** LAYOUT ****** **/
+  --body-background-color: #fff;
+  --body-text: var(--text-color);
+
+  --layout-container-max-width: 80rem;
+
   /* ---------------------- */
 
   --alert-border-radius: var(--radius-sm);
@@ -24,9 +30,6 @@
   --badge-lg-font-size: var(--font-size-base);
   --badge-lg-font-weight: var(--badge-font-weight);
 
-  --body-background-color: #fff;
-  --body-text: var(--text-color);
-
   --box-shadow-base: 0 0 .75rem 0 rgb(0 0 0 / .25);
 
   --btn-border-radius: var(--form-control-border-radius);
@@ -162,6 +165,10 @@
   --form-control-readonly-opacity: 1;
   --form-control-required-flag-color: #c00;
   --form-control-required-flag-content: '\002A';
+  --form-control-required-flag-font-size: 2em;
+  --form-control-required-flag-left: 0em;
+  --form-control-required-flag-top: -.15em;
+  --form-control-required-label-padding-inline-start: var(--size-base);
   --form-control-select-trigger-icon: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22rgb(5%2C%2048%2C%2056)%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m2%205%206%206%206-6%22%2F%3E%3C%2Fsvg%3E');
   --form-control-sm-font-size: var(--font-size-sm);
   --form-control-sm-padding-block: var(--size-xxs);
@@ -207,8 +214,6 @@
   --inner-nav-gap: var(--size-lg);
   --inner-nav-margin-block: var(--size-base);
 
-  --layout-container-max-width: 80rem;
-
   --line-height-base: 1.5;
   --line-height-sm: 1.4;
   --line-height-xs: 1.25;
@@ -258,8 +263,8 @@
   --mpopup-header-font-size: var(--font-size-xl);
   --mpopup-header-padding: var(--size-xs);
   --mpopup-height: max-content;
-  --mpopup-max-height: 5.625rem;
-  --mpopup-max-width: 4.375rem;
+  --mpopup-max-height: 90dvh;
+  --mpopup-max-width: 70dvw;
   --mpopup-min-height: 18.75rem;
   --mpopup-min-width: 25rem;
   --mpopup-width: max-content;

package/src/utilities/classnames.js

@@ -1,5 +1,15 @@
 /*! minimo - Classnames */
-/** @typedef {string | null | undefined | false | 0} ClassValue */
+
+/**
+ * `MinimoClass | any other string`: keeps editor autocomplete for minimo's
+ * own class names (see ../../types/classes.d.ts, auto-generated) while still
+ * accepting arbitrary consumer-defined class names. The `string & {}` branding
+ * is a TS trick that prevents the union from collapsing to plain `string`,
+ * which would silently disable the autocomplete.
+ * @typedef {import('../../types/classes.js').MinimoClass | (string & {})} ClassName
+ */
+
+/** @typedef {ClassName | null | undefined | false | 0} ClassValue */
 
 /**
  * Joins CSS class names, filtering out falsy and non-string values.

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

@@ -18,7 +18,7 @@ import { parseDomString } from './parseDomString.js';
  *   treated as markup: sanitized and inserted via the native Sanitizer API (`Element.setHTML`) where
  *   supported, falling back to raw `innerHTML` on browsers without it.
  * @property {boolean} [condition=true] - When false, the element is skipped.
- * @property {function(HTMLElement): void} [callback] - Callback invoked after the element is created.
+ * @property {(function(HTMLElement): void) | null} [callback] - Callback invoked after the element is created.
  * @property {Array<DomBuilderItem|string>} [children] - Configuration array for child elements. Accepts strings (shorthand per `parseDomString`) and/or configuration objects.
  */