@massimo-cassandro/minimo 0.10.11 → 0.11.1

package/design-tokens/components/snackbar.minimo.tokens.jsonc

@@ -6,27 +6,121 @@
 // -----------------------------------------------------------------------
 {
   "snackbar": {
-    "font": {
-      "size": {
-        "$type": "dimension",
-        "$value": "{font.size.sm}"
+    "outer": {
+      "drop-shadow": {
+        "$type": "shadow",
+        "$value": "{box-shadow.base}"
+      },
+      "background": {
+        "color": {
+          "$type": "color",
+          "$value": "{secondary.100}"
+        }
+      },
+      "border": {
+        "$type": "string",
+        "$value": "none"
+      },
+      "border-radius": {
+        "$type": "color",
+        "$value": "{radius.xs}"
+      },
+      "padding": {
+        "block": {
+          "$type": "dimension",
+          "$value": 0
+        },
+        "inline": {
+          "$type": "dimension",
+          "$value": 0
+        }
       }
     },
-    "border": {
-      "radius": {
+    "text": {
+      "color": {
         "$type": "color",
-        "$value": "{radius.sm}"
+        "$value": "{secondary.100-fg}"
       }
     },
-    "text": {
+    "background": {
       "color": {
         "$type": "color",
-        "$value": "{text.color}"
+        "$value": "{secondary.100}"
+      }
+    },
+    "border": {
+      "radius": {
+        "$type": "color",
+        "$value": "{radius.xs}"
+      }
+    },
+    "font": {
+      "size": {
+        "$type": "dimension",
+        "$value": "{font.size.sm}"
       }
     },
-    "duration": {
-      "$type": "duration",
-      "$value": "5s"
+    "btn-close": {
+      "size": {
+        "$type": "dimension",
+        "$value": "1rem"
+      },
+      "icon": {
+        "color": {
+          "$type": "color",
+          "$value": "{snackbar.text.color}"
+        }
+      },
+      "hover": {
+        "background": {
+          "color": {
+            "$type": "color",
+            "$value": "color-mix(in srgb, {snackbar.text.color} 40%, transparent)"
+          }
+        },
+        "border": {
+          "color": {
+            "$type": "color",
+            "$value": "transparent"
+          }
+        },
+        "icon": {
+          "color": {
+            "$type": "color",
+            "$value": "{snackbar.background.color}"
+          }
+        }
+      },
+      "focus": {
+        "outline": {
+          "width": {
+            "$type": "dimension",
+            "$value": "2px"
+          },
+          "offset": {
+            "$type": "dimension",
+            "$value": "2px"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "color-mix(in srgb, {snackbar.text.color} 50%, transparent)"
+          }
+        }
+      },
+      "active": {
+        "background": {
+          "color": {
+            "$type": "color",
+            "$value": "transparent"
+          }
+        },
+        "icon": {
+          "color": {
+            "$type": "color",
+            "$value": "{snackbar.text.color}"
+          }
+        }
+      }
     }
   }
 }

package/design-tokens/shadows.minimo.tokens.jsonc

@@ -0,0 +1,19 @@
+// -----------------------------------------------------------------------
+// Generated file — do not edit manually.
+// This file is produced by the design-token build pipeline.
+// Source of truth: the token files in the project source directory.
+// Re-generate with: node build-tokens.mjs --config <path/to/config>
+// -----------------------------------------------------------------------
+{
+  "box-shadow": {
+    "base": {
+      "$type": "shadow",
+      "$value": {
+        "color": "rgb(0 0 0 / .25)",
+        "offsetX": "0",
+        "offsetY": "0",
+        "blur": "12px"
+      }
+    }
+  }
+}

package/design-tokens/z-index.minimo.tokens.jsonc

@@ -9,6 +9,10 @@
     "overlay": {
       "$type": "number",
       "$value": 99
+    },
+    "snackbar": {
+      "$type": "number",
+      "$value": 100
     }
   }
 }

package/design-tokens-src/_readme.md

@@ -15,7 +15,7 @@
   * Name of the font family or list (array).  ("Inter", ["Helvetica", "Arial"] )
 * **Font Weight** (`fontWeight`)
   * Font weight (number or text alias).  (700, "bold", "light" )
-* **Edge** (`border`)
+* **border** (`border`)
   * Compound: requires color, width, style.  ({"color": "#000", "width": "1px", "style": "solid"} )
 * **Shadow** (`shadow`)
   * Compound: color, offsetX, offsetY, blur, spread, inset.  ({"color": "#0003", "offsetX": "0px", "offsetY": "4px", "blur": "10px"} )

package/design-tokens-src/badge.minimo.tokens.mjs

@@ -0,0 +1,36 @@
+export default {
+  badge: {
+    background: {
+      color: {
+        $value: '{primary.100}',
+        $type: 'color'
+      }
+    },
+    color: {
+      $value: '{primary.100-fg}',
+      $type: 'color'
+    },
+    font: {
+      size: {
+        $value: '{font.size.xs}',
+        $type: 'dimension'
+      },
+      weight: {
+        $value: '{font.weight.semibold}',
+        $type: 'number'
+      }
+    },
+    lg: {
+      font: {
+        size: {
+          $value: '{font.size.base}',
+          $type: 'dimension'
+        },
+        weight: {
+          $value: '{badge.font.weight}',
+          $type: 'number'
+        }
+      }
+    }
+  } // end badge
+};

package/design-tokens-src/btn-close.minimo.tokens.mjs

@@ -0,0 +1,101 @@
+export default {
+  btn: {
+    close: {
+      size: {
+        $value: '1.5rem',
+        $type: 'dimension'
+      },
+      padding: {
+        $value: '3px',
+        $type: 'dimension'
+      },
+      border: {
+        width: {
+          $value: '2px',
+          $type: 'dimension'
+        },
+        color: {
+          $value: '{btn.close.icon.color}',
+          $type: 'color'
+        },
+        radius: {
+          $value: '50%',
+          $type: 'dimension'
+        }
+
+      },
+      background: {
+        color: {
+          $value: '{body.background.color}',
+          $type: 'color'
+        },
+
+      },
+      icon: {
+        color: {
+          $value: '{text.color}',
+          $type: 'color'
+        },
+        bar: {
+          size: {
+            $value: '2px',
+            $type: 'dimension'
+          }
+        }
+
+      },
+
+      hover: {
+        background: {
+          color: {
+            $value: '{btn.close.icon.color}',
+            $type: 'color'
+          }
+        },
+        border: {
+          color: {
+            $value: '{btn.close.icon.color}',
+            $type: 'color'
+          }
+        },
+        icon: {
+          color: {
+            $value: '{btn.close.background.color}',
+            $type: 'color'
+          }
+        }
+      },
+
+      focus: {
+        outline: {
+          width: {
+            $value: '2px',
+            $type: 'dimension'
+          },
+          offset: {
+            $value: '2px',
+            $type: 'dimension'
+          },
+          color: {
+            $value: '{link.focus.outline.color}',
+            $type: 'color'
+          }
+        }
+      },
+      active: {
+        background: {
+          color: {
+            $value: '{btn.close.background.color}',
+            $type: 'color'
+          }
+        },
+        icon: {
+          color: {
+            $value: '{link.active.color}',
+            $type: 'color'
+          }
+        }
+      }
+    } // end close
+  } // end btn
+};

package/design-tokens-src/components/snackbar.minimo.tokens.mjs

@@ -1,35 +1,127 @@
 // tokens utitilizzati sia da snackaber che da toast
 export default{
   snackbar: {
-
-
-
-
-
-
-    font: {
-      size: {
-        $value: '{font.size.sm}',
-        $type: 'dimension'
+    outer: {
+      'drop-shadow': {
+        $type: 'shadow',
+        $value: '{box-shadow.base}'
       },
-    },
-
-    border: {
-      radius: {
-        $value: '{radius.sm}',
+      background: {
+        color: {
+          $type: 'color',
+          $value: '{secondary.100}'
+        }
+      },
+      border: {
+        $value: 'none',
+        $type: 'string'
+      },
+      'border-radius': {
+        $value: '{radius.xs}',
         $type: 'color'
+      },
+      padding: {
+        block: {
+          $type: 'dimension',
+          $value: 0
+        },
+        inline: {
+          $type: 'dimension',
+          $value: 0
+        },
       }
     },
+
     text: {
       color: {
-        $value: '{text.color}',
+        $type: 'color',
+        $value: '{secondary.100-fg}'
+      }
+    },
+    background: {
+      color: {
+        $type: 'color',
+        $value: '{secondary.100}'
+      }
+    },
+    border: {
+      radius: {
+        $value: '{radius.xs}',
         $type: 'color'
       }
     },
-    duration: {
-      $value: '5s',
-      $type: 'duration'
-    }
-  }
+    font: {
+      size: {
+        $value: '{font.size.sm}',
+        $type: 'dimension'
+      },
+    },
+
+    'btn-close': {
+
+      size: {
+        $value: '1rem',
+        $type: 'dimension'
+      },
+      icon: {
+        color: {
+          $value: '{snackbar.text.color}',
+          $type: 'color'
+        }
+      },
+
+      hover: {
+        background: {
+          color: {
+            $value: 'color-mix(in srgb, {snackbar.text.color} 40%, transparent)',
+            $type: 'color'
+          }
+        },
+        border: {
+          color: {
+            $value: 'transparent',
+            $type: 'color'
+          }
+        },
+        icon: {
+          color: {
+            $value: '{snackbar.background.color}',
+            $type: 'color'
+          }
+        }
+      },
+
+      focus: {
+        outline: {
+          width: {
+            $value: '2px',
+            $type: 'dimension'
+          },
+          offset: {
+            $value: '2px',
+            $type: 'dimension'
+          },
+          color: {
+            $value: 'color-mix(in srgb, {snackbar.text.color} 50%, transparent)',
+            $type: 'color'
+          }
+        }
+      },
+      active: {
+        background: {
+          color: {
+            $value: 'transparent',
+            $type: 'color'
+          }
+        },
+        icon: {
+          color: {
+            $value: '{snackbar.text.color}',
+            $type: 'color'
+          }
+        }
+      }
+    } // end btn-close
+  } // end snackbar
 
 };

package/design-tokens-src/flex-grid.minimo.tokens.mjs

@@ -0,0 +1,18 @@
+export default {
+  'flex-grid': {
+    gap: {
+      $value: '1.5rem',
+      $type: 'dimension'
+    }
+  },
+  grid: {
+    cols: {
+      $value: 3,
+      $type: 'number'
+    },
+    'min-col-width': {
+      $value: '6rem',
+      $type: 'dimension'
+    }
+  }
+};

package/design-tokens-src/shadows.minimo.tokens.mjs

@@ -0,0 +1,16 @@
+export default {
+  'box-shadow': {
+    base: {
+      $type: 'shadow',
+      $value: {
+        color: 'rgb(0 0 0 / .25)',
+        offsetX: '0',
+        offsetY: '0',
+        blur: '12px'
+      }
+    }
+  }
+};
+
+
+// --box-shadow-base: 0 0 1.2rem 0x00000040;

package/design-tokens-src/z-index.minimo.tokens.mjs

@@ -0,0 +1,14 @@
+export default {
+  'z-index': {
+    overlay: {
+      $value: 99,
+      $type: 'number'
+    },
+
+    snackbar: {
+      $value: 100,
+      $type: 'number'
+    },
+
+  }
+};

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

@@ -64,7 +64,8 @@ StyleDictionary.registerTransform({
     const value = token.$value || token.value;
     return (token.$type === 'dimension' || token.type === 'dimension')
       && typeof value === 'string'
-      && !value.endsWith('rem');
+      && !value.endsWith('rem')
+      && !value.endsWith('%');
   },
   transform: (token) => {
     const value      = token.$value || token.value;

package/index.js

@@ -1,4 +1,14 @@
+
+// utilities
 export { classnames } from './src/utilities/classnames.js';
 export { domBuilder } from './src/utilities/dom-builder/dom-builder.js';
 export { enableSubmitBtns } from './src/utilities/enable-submit-btns.js';
+
+// components
 export { default as modalAlert } from './src/components/modal-alert/modal-alert.js';
+export { dismissAlerts } from './src/components/dismiss-alerts.js';
+export { formResetSubmit } from './src/components/form-reset-submit.js';
+export { innerNav } from './src/components/inner-nav/inner-nav.js';
+export { overlay, removeOverlay } from './src/components/overlay/overlay.js';
+export { sf_macro } from './src/components/sf-macro/sf-macro.js';
+export { snackbar } from './src/components/snackbar/snackbar.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.10.11",
+  "version": "0.11.1",
   "description": "Light css framework & utilities",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",
@@ -30,16 +30,7 @@
     "access": "public"
   },
   "main": "./index.js",
-  "sideEffects": [
-    "*.css",
-    "*.js",
-    "*.svg",
-    "*.jpg",
-    "*.jpeg",
-    "*.png",
-    "*.webp",
-    "*.avif"
-  ],
+  "sideEffects": false,
   "files": [
     "./index.js",
     "src/**/*.{js,mjs,css,svg,md}",

package/src/components/dismiss-alerts.js

@@ -1,6 +1,7 @@
-// dismiss alerts
-document.querySelectorAll('[data-dismiss]').forEach(item => {
-  item.addEventListener('click', () => {
-    item.closest('.' + item.dataset.dismiss).remove();
-  }, false);
-});
+export function dismissAlerts(){
+  document.querySelectorAll('[data-dismiss]').forEach(item => {
+    item.addEventListener('click', () => {
+      item.closest('.' + item.dataset.dismiss).remove();
+    }, false);
+  });
+}

package/src/components/form-reset-submit.js

@@ -0,0 +1,38 @@
+// import './form.css'; //incorporato nel css principale
+import { enableSubmitBtns } from '../../index.js';
+
+export function formResetSubmit(){
+
+  document.querySelectorAll('form').forEach( form => {
+
+    // form.querySelectorAll('[type="submit"]').forEach(btn =>{
+    //   btn.addEventListener('click', () => {
+    //     form.classList.add('was-validated');
+    //   }, false);
+    // });
+
+    form.addEventListener('submit', e => {
+
+      if(!form.hasAttribute('data-no-was-validated')) {
+        form.classList.add('was-validated');
+      }
+
+      form.querySelectorAll('.is-invalid, .is-valid').forEach(item => {
+        item.classList.remove('is-invalid', 'is-valid');
+      });
+
+      if(!form.checkValidity()) {
+        e.preventDefault();
+        enableSubmitBtns();
+
+      } else {
+        if(!form.hasAttribute('data-no-disabling') && !form.hasAttribute('data-disable-submit')) { /* 'data-disable-submit' per compatibilitò con verioni precedenti */
+          form.querySelectorAll('[type="submit"]').forEach(btn => {
+            btn.disabled = true;
+          });
+        }
+      }
+    }, false);
+  });
+}
+

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

@@ -7,13 +7,16 @@
 
 import './inner-nav.css';
 
-let nav_primary = document.querySelector('.inner-nav-main');
-if (nav_primary) {
-  // nav_primary.classList.add('text-right', 'd-print-none');
-  let nav = nav_primary.innerHTML;
+export function innerNav(){
 
-  document.querySelectorAll('.inner-nav').forEach(item => {
-    item.innerHTML = nav;
-    // item.classList.add('text-right', 'd-print-none');
-  });
+  const nav_primary = document.querySelector('.inner-nav-main');
+  if (nav_primary) {
+    // nav_primary.classList.add('text-right', 'd-print-none');
+    let nav = nav_primary.innerHTML;
+
+    document.querySelectorAll('.inner-nav').forEach(item => {
+      item.innerHTML = nav;
+      // item.classList.add('text-right', 'd-print-none');
+    });
+  }
 }