@massimo-cassandro/minimo 1.20.16 → 1.21.1

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: 'project',
+
   // 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.20.16",
+  "version": "1.21.1",
   "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/components/autocomplete/autocomplete.css

@@ -1,146 +1,150 @@
-/* basato sul css di @tarekraafat/autocomplete.js */
+@layer components {
 
+  /* basato sul css di @tarekraafat/autocomplete.js */
 
-.hmenu-subsection-emulazione {
-  overflow-y: visible;
-}
 
-.ac-autocomplete-wrapper { /* assegnato all'elemento .form-group */
-
-  --ac-color: #333;
-  --ac-bg-color: #fff;
-  --ac-border-color: #666;
-  --ac-danger-color: #c00;
-  --ac-box-shadow: 0 0 10px rgb(0 0 0 / .6);
-  --ac-list-item-bg: #fff;
-  --ac-hover-color: var(--secondary-100);
-
-  position: relative;
-
-  ul {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    left: 0;
-    z-index: 1000;
-    max-height: 14rem;
-    padding: 0;
-    margin: .2rem 0 0;
-    overflow-y: scroll;
-    color: var(--ac-color);
-    outline: none;
-    background-color: var(--ac-bg-color);
-    border: 1px solid var(--ac-border-color);
-    border-radius: .6rem;
-    box-shadow: var(--ac-box-shadow);
-
-    &[hidden],
-    &:empty {
-      display: block;
-      opacity: 0;
-      transform: scale(0);
-    }
+  .hmenu-subsection-emulazione {
+    overflow-y: visible;
+  }
 
-    li {
+  .ac-autocomplete-wrapper { /* assegnato all'elemento .form-group */
+
+    --ac-color: #333;
+    --ac-bg-color: #fff;
+    --ac-border-color: #666;
+    --ac-danger-color: #c00;
+    --ac-box-shadow: 0 0 10px rgb(0 0 0 / .6);
+    --ac-list-item-bg: #fff;
+    --ac-hover-color: var(--secondary-100);
+
+    position: relative;
+
+    ul {
+      position: absolute;
+      top: 100%;
+      right: 0;
+      left: 0;
+      z-index: 1000;
+      max-height: 14rem;
       padding: 0;
-      margin: .3rem;
-      text-align: left;
-      list-style: none;
+      margin: .2rem 0 0;
+      overflow-y: scroll;
+      color: var(--ac-color);
+      outline: none;
+      background-color: var(--ac-bg-color);
+      border: 1px solid var(--ac-border-color);
+      border-radius: .6rem;
+      box-shadow: var(--ac-box-shadow);
+
+      &[hidden],
+      &:empty {
+        display: block;
+        opacity: 0;
+        transform: scale(0);
+      }
 
-      /* stylelint-disable declaration-no-important, max-nesting-depth, selector-max-compound-selectors */
-      > div {
+      li {
+        padding: 0;
+        margin: .3rem;
+        text-align: left;
+        list-style: none;
 
-        padding: .3rem .5rem;
-        background-color: var(--ac-list-item-bg);
-        border-radius: .35rem;
-        transition: all .2s ease;
+        /* stylelint-disable declaration-no-important, max-nesting-depth, selector-max-compound-selectors */
+        > div {
 
-        .badge {
-          color: #fff;
-          background-color: var(--ac-hover-color);
-        }
+          padding: .3rem .5rem;
+          background-color: var(--ac-list-item-bg);
+          border-radius: .35rem;
+          transition: all .2s ease;
 
-        &:hover {
-          cursor: pointer;
-          background-color: var(--ac-hover-color) !important;
-          &, .text-muted {
-            color: #fff !important;
-          }
           .badge {
-            color: var(--ac-hover-color) !important;
-            background-color: color-mix(in srgb, #fff 70%, transparent) !important;
+            color: #fff;
+            background-color: var(--ac-hover-color);
           }
 
-          mark {
-            border-color: currentColor;
+          &:hover {
+            cursor: pointer;
+            background-color: var(--ac-hover-color) !important;
+            &, .text-muted {
+              color: #fff !important;
+            }
+            .badge {
+              color: var(--ac-hover-color) !important;
+              background-color: color-mix(in srgb, #fff 70%, transparent) !important;
+            }
+
+            mark {
+              border-color: currentColor;
+            }
           }
-        }
 
-        &.alert-item{
+          &.alert-item{
 
 
-          &, .text-muted {
-            color: var(--text-muted) !important;
-          }
-          background-color: color-mix(in srgb, var(--ac-danger-color) 1%, transparent);
-          &:hover {
             &, .text-muted {
-              color: rgb(255 255 255) !important;
+              color: var(--text-muted) !important;
+            }
+            background-color: color-mix(in srgb, var(--ac-danger-color) 1%, transparent);
+            &:hover {
+              &, .text-muted {
+                color: rgb(255 255 255) !important;
+              }
             }
           }
-        }
 
-        mark {
-          padding: 0;
-          color: currentColor;
-          background-color: transparent;
-          border-bottom: 4px double var(--ac-danger-color);
+          mark {
+            padding: 0;
+            color: currentColor;
+            background-color: transparent;
+            border-bottom: 4px double var(--ac-danger-color);
 
-          /* stylelint-disable-next-line max-nesting-depth  selector-max-type */
-          /* &::selection {
+            /* stylelint-disable-next-line max-nesting-depth  selector-max-type */
+            /* &::selection {
             color: rgba(#ffffff, 0);
             background-color: rgba(#ffffff, 0);
           } */
+          }
         }
-      }
-      /* stylelint-enable declaration-no-important, max-nesting-depth, selector-max-compound-selectors */
+        /* stylelint-enable declaration-no-important, max-nesting-depth, selector-max-compound-selectors */
 
-      /* &[aria-selected='true'] {
+        /* &[aria-selected='true'] {
         background-color: var(--ada-grigio-2);
       } */
+      }
     }
-  }
 
-  .no-result {
-    padding: .4rem .6rem;
-    color: var(--ac-danger-color);
+    .no-result {
+      padding: .4rem .6rem;
+      color: var(--ac-danger-color);
+    }
   }
-}
 
 
-/* badge multiple select */
-.ac-badge {
-  margin: 0 .5rem .2rem 0;
-  font-size: .85rem;
-  line-height: 1;
-  white-space: nowrap;
+  /* badge multiple select */
+  .ac-badge {
+    margin: 0 .5rem .2rem 0;
+    font-size: .85rem;
+    line-height: 1;
+    white-space: nowrap;
+
+    &:has(.ac-badge-btn:hover) {
+      /* stylelint-disable-next-line declaration-no-important */
+      background-color: var(--ac-danger-color) !important;
+    }
+  }
+  .ac-badge-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin-left: 4px;
+    font-size: 1.2em;
+    line-height: 1;
+    color: currentColor;
+    background-color: transparent;
+    border: none;
+    border-radius: 50%;
 
-  &:has(.ac-badge-btn:hover) {
-    /* stylelint-disable-next-line declaration-no-important */
-    background-color: var(--ac-danger-color) !important;
   }
-}
-.ac-badge-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  margin-left: 4px;
-  font-size: 1.2em;
-  line-height: 1;
-  color: currentColor;
-  background-color: transparent;
-  border: none;
-  border-radius: 50%;
 
 }

package/src/components/inner-nav/inner-nav.css

@@ -1,13 +1,17 @@
-/*! minimo - Inner Nav */
+@layer components {
 
-.inner-nav-main, .inner-nav {
-  display: flex;
-  gap: var(--inner-nav-gap);
-  justify-content: flex-end;
-  margin-block: var(--inner-nav-margin-block);
-  /* text-align: end; */
+  /*! minimo - Inner Nav */
 
-  @media print {
-    display: none;
+  .inner-nav-main, .inner-nav {
+    display: flex;
+    gap: var(--inner-nav-gap);
+    justify-content: flex-end;
+    margin-block: var(--inner-nav-margin-block);
+    /* text-align: end; */
+
+    @media print {
+      display: none;
+    }
   }
+
 }