@massimo-cassandro/minimo 0.9.5 → 0.10.0

package/design-tokens/btn-close.minimo.tokens.jsonc

@@ -87,7 +87,7 @@
         "background": {
           "color": {
             "$type": "color",
-            "$value": "{link.active.background.color}"
+            "$value": "{btn.close.background.color}"
           }
         },
         "icon": {

package/design-tokens/components/sf-macro.minimo.tokens.jsonc

@@ -63,11 +63,11 @@
         "position": {
           "top": {
             "$type": "dimension",
-            "$value": "-.5rem"
+            "$value": "-0.5rem"
           },
           "right": {
             "$type": "dimension",
-            "$value": "-.5rem"
+            "$value": "-0.5rem"
           },
           "bottom": {
             "$type": "dimension",

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

@@ -0,0 +1,32 @@
+// -----------------------------------------------------------------------
+// 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>
+// -----------------------------------------------------------------------
+{
+  "snackbar": {
+    "font": {
+      "size": {
+        "$type": "dimension",
+        "$value": "{font.size.sm}"
+      }
+    },
+    "border": {
+      "radius": {
+        "$type": "color",
+        "$value": "{radius.sm}"
+      }
+    },
+    "text": {
+      "color": {
+        "$type": "color",
+        "$value": "{text.color}"
+      }
+    },
+    "duration": {
+      "$type": "duration",
+      "$value": "5s"
+    }
+  }
+}

package/design-tokens-src/components/sf-macro.minimo.tokens.mjs

@@ -62,11 +62,11 @@ export default {
         position: {
           top: {
             $type: 'dimension',
-            $value: '-.5rem'
+            $value: '-0.5rem'
           },
           right: {
             $type: 'dimension',
-            $value: '-.5rem'
+            $value: '-0.5rem'
           },
           bottom:{
             $type: 'dimension',

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

@@ -49,11 +49,15 @@ const DISCLAIMER = [
 
 // Returns true if the string contains a math expression — i.e. it has at least
 // one operator (+, -, *, /) outside of a token reference ({...}).
+// Negative values like "-0.5rem" or "-8px" are NOT expressions.
 const isExpression = (str) => {
   if (typeof str !== 'string') return false;
   // Strip token references, then check for operators
   const stripped = str.replace(/\{[^}]+\}/g, '0');
-  return /[+\-*/]/.test(stripped);
+  // Remove leading minus (negative number) before testing for operators.
+  // An operator is only meaningful when it appears between two operands,
+  // i.e. it is preceded by a digit, closing paren, or word character.
+  return /[\d)]\s*[+\-*/]/.test(stripped) || /[+*/]/.test(stripped.replace(/^-/, ''));
 };
 
 // Builds a token lookup map (dot-path -> token) from the dictionary.

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

@@ -90,6 +90,7 @@ await sd.buildAllPlatforms();
 // ── 9. CSS lint ───────────────────────────────────────────────────────────────
 const stylelintConfig = await import(pathToFileURL(stylelintConfigPath)).then(m => m.default);
 
+
 await stylelint.lint({
   config: stylelintConfig,
   files: [path.join(buildPath, destFile)],

package/index.js

@@ -1,3 +1,4 @@
 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';
+export { enableSubmitBtns } from './src/utilities/enable-submit-btns.js';
+export { default as modalAlert } from './src/components/modal-alert/modal-alert.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.9.5",
+  "version": "0.10.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",
@@ -19,7 +19,8 @@
     "UPD-version": "npx update-version  # --config=./dev-utilities.config.mjs",
     "upd@m": "npx upd@m",
     "npm-publish": "npm publish",
-    "webpack": "NODE_ENV=development webpack serve --config ./demo/demo-src/webpack.config.mjs",
+    "webpack DEMO": "NODE_ENV=development webpack serve --config ./demo-src/_src/webpack.config.mjs",
+    "webpack DEMO build": "NODE_ENV=production webpack --config ./demo-src/_src/webpack.config.mjs",
     "build-tokens": "node ./design-tokens-utilities/build-tokens.mjs --config ./tokens-config.mjs",
     "check unresolved props": "node ./design-tokens-utilities/check-unresolved-custom-props.mjs --config ./tokens-config.mjs"
   },

package/src/components/modal-alert/TODO.md

@@ -1,2 +1,2 @@
 da rivedere
-spostare custome props nel dictionary
+spostare custom props nel dictionary

package/src/components/modal-alert/customization-templates/custom-modal-alert.css

@@ -0,0 +1,46 @@
+
+@import '@massimo-cassandro/modal-alert';
+
+
+.modal-alert {
+  --malert-success-color: var(--status-success-color);
+  --malert-success-color-fg: var(--status-success-fg);
+
+  --malert-info-color: var(--status-info-color);
+  --malert-info-color-fg: var(--status-info-fg);
+
+  --malert-warning-color: var(--status-warning-color);
+  --malert-warning-color-fg: var(--status-warning-fg);
+
+  --malert-danger-color: var(--status-danger-color);
+  --malert-danger-color-fg: var(--status-danger-fg);
+
+  --malert-confirm-color: var(--status-warning-color);
+  --malert-confirm-color-fg: var(--status-warning-fg);
+
+  /* --malert-marks-stroke-width: 6px; */
+  --malert-backdrop: rgb(0 0 0 / .3);
+  --malert-border-radius: var(--radius-md);
+  /* --malert-box-shadow: var(--box-shadow); */
+  --malert-heading-font-family: var(--font-family);
+  /* --malert-heading-line-height: */
+  --malert-heading-font-size: 1.8rem;
+  --malert-heading-font-weigth: var(--font-size-base);
+  --malert-body-font-family: var(--font-family);
+
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+
+
+
+.malert-mark {
+  svg {
+    width: 7rem;
+    max-width: none;
+    height: 7rem;
+    fill: var(--malert-color-fg);
+    stroke: none;
+  }
+}

package/src/components/modal-alert/customization-templates/custom-modal-alert.js

@@ -0,0 +1,85 @@
+// import './modal-alert.css'; // importato direttamente dal css principale per ottimizzarne l'uso
+
+import modalAlert from '@massimo-cassandro/modal-alert';
+
+import checkIcon from './svg/check-circle-duotone.svg?inline';
+import infoIcon from './svg/info-duotone.svg?inline';
+import confirmIcon from './svg/question-duotone.svg?inline';
+import warningIcon from './svg/warning-duotone.svg?inline';
+import errorIcon from './svg/x-circle-duotone.svg?inline';
+
+const custom_defaults = {
+
+  globals: {
+    onOpen: () => {
+      document.body.classList.add('overflow-hidden');
+    },
+    onClose: () => {
+      document.body.classList.remove('overflow-hidden');
+    },
+    cssFile: null,
+    animation: true,
+    showMarks: true,
+  },
+
+  success: {
+    title: 'Operazione completata',
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    ok_btn_class: 'btn btn-success',
+    timer: 4000, // ms
+  },
+  error: {
+    title: 'Si è verificato un errore',
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn btn-danger',
+    timer: null,
+  },
+  warning: {
+    title: 'Attenzione!',
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn btn-warning',
+    timer: null,
+  },
+  info: {
+    title: null,
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn btn-info',
+    timer: null,
+  },
+  confirm: {
+    title: 'Confermi?',
+    mes: null,
+    ok_btn_text: 'OK',
+    cancel_btn_text: 'Cancel',
+    cancel_focus: true, // false to give focus to the ok button
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn btn-warning',
+    cancel_btn_class: 'btn btn-outline-secondary',
+    callback: null,
+    timer: null
+  }
+};
+
+const marks = {
+  success: checkIcon,
+  error: errorIcon,
+  warning: warningIcon,
+  info: infoIcon,
+  confirm: confirmIcon
+};
+
+export function mAlert(params) {
+  modalAlert(params, custom_defaults, marks);
+}

package/src/components/modal-alert/defaults.js

@@ -0,0 +1,54 @@
+export const defaults = {
+
+  // settings to be applied to all dialog types
+  // can be reassigned on single types
+  globals: {
+    onOpen: null,
+    onClose: null,
+    cssFile: null,    // css file to be automatically loaded
+    animation: true,
+    showMarks: true,
+    callback: null,
+    timer: null,
+    mes: null,
+    heading_class: null,
+    text_class: null,
+
+    // extra btn markup, ignored on confirm
+    extra_btn: null,
+    extra_btn_selector: null,
+    extra_btn_focus: true
+  },
+
+  success: {
+    title: 'Operazione completata',
+    ok_btn_text: 'OK',
+    ok_btn_class: 'btn',
+    timer: 4000 // ms
+  },
+  error: {
+    title: 'Si è verificato un errore',
+    ok_btn_text: 'OK',
+    ok_btn_class: 'btn'
+  },
+  warning: {
+    title: 'Attenzione!',
+    ok_btn_text: 'OK',
+    ok_btn_class: 'btn'
+  },
+  info: {
+    title: null,
+    ok_btn_text: 'OK',
+    ok_btn_class: 'btn'
+  },
+  confirm: {
+    title: 'Confermi?',
+    use_warning_icon: false, // se true usa l'icona warning
+    ok_btn_text: 'OK',
+    cancel_btn_text: 'Annulla',
+    cancel_focus: true, // false to give focus to the ok button
+    ok_btn_class: 'btn btn-outline',
+    cancel_btn_class: 'btn'
+  }
+
+};

package/src/components/modal-alert/marks.js

@@ -0,0 +1,9 @@
+/* eslint-disable quotes */
+
+/*
+   This file was generated by the script `svg-to-js.mjs`
+   (https://github.com/massimo-cassandro/modal-alert/blob/main/src/svg/svg-to-js.mjs).
+   DO NOT EDIT (any changes will be overwritten)
+*/
+
+export const marks = {"confirm":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 132 132\"><circle cx=\"66\" cy=\"66\" r=\"63\"/><path d=\"M44 48a21.928 21.928 0 0 1 6.443-15.556A21.931 21.931 0 0 1 66 26c12.15 0 22 9.85 22 22 0 6.14-2.668 11.543-6.573 15.683-6.514 6.91-15.363 4.47-15.363 16.065v7.935M66 105.816v-6.975\"/></svg>\n","error":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 132 132\"><circle cx=\"66\" cy=\"66\" r=\"63\"/><path d=\"M35 39l61.4 54.4m0-54.4L35 93.2\"/></svg>\n","info":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 132 132\"><circle cx=\"66\" cy=\"66\" r=\"63\"/><path d=\"M74 105l-8.6.237V45.713L56 46m9.6-13.025V26\"/></svg>\n","success":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 132 132\"><circle cx=\"66\" cy=\"66\" r=\"63\"/><path d=\"M101.4 42L52.7 90.6 31 69.3\"/></svg>\n","warning":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 132 132\"><circle cx=\"66\" cy=\"66\" r=\"63\"/><path d=\"M41.839 72.475v-37.2c0-3.852 3.143-6.975 7.02-6.975s7.02 3.123 7.02 6.975V65.5m0-30.225v-9.3c0-3.852 3.143-6.975 7.02-6.975s7.02 3.123 7.02 6.975V65.5m0-30.225c0-3.852 3.143-6.975 7.02-6.975 3.878 0 7.02 3.123 7.02 6.975V65.5m0-20.925c0-3.852 3.144-6.975 7.02-6.975 3.878 0 7.021 3.123 7.021 6.975V84.1C98 99.509 85.428 112 69.92 112h-9.36c-9.896-1.357-18.517-6.496-23.401-13.95L24.522 73.637c-2.584-3.53-1.799-8.475 1.755-11.043 3.555-2.568 8.531-1.788 11.116 1.743l4.212 8.138\"/></svg>\n"};

package/src/components/modal-alert/modal-alert.css

@@ -1,46 +1,159 @@
+.modal-alert {
+  width: 600px;
+  max-width: 90vw;
+  padding: 0;
+  background-color: var(--malert-background-color, #fff);
+  border: none;
+  border-radius: var(--malert-border-radius, 6px);
 
-@import '@massimo-cassandro/modal-alert';
+  /* https://www.joshwcomeau.com/shadow-palette/ */
+  --default-shadow-color: 0deg 0% 0%;
+  --default-box-shadow:
+    0 .4px 04px hsl(var(--default-shadow-color) / .15),
+    -.3px 3px 3.3px -.5px hsl(var(--default-shadow-color) / .15),
+    -.5px 6.1px 6.6px -.9px hsl(var(--default-shadow-color) / .14),
+    -.9px 11.2px 12.1px -1.4px hsl(var(--default-shadow-color) / .14),
+    -1.6px 19.5px 21.1px -1.9px hsl(var(--default-shadow-color) / .13),
+    -2.7px 32.7px 35.4px -2.3px hsl(var(--default-shadow-color) / .13),
+    -4.3px 52px 56.4px -2.8px hsl(var(--default-shadow-color) / .12);
 
+  box-shadow: var(--malert-box-shadow, var(--default-box-shadow));
+  /* box-shadow: 2px 2px 12px #000; */
 
-.modal-alert {
-  --malert-success-color: var(--status-success-color);
-  --malert-success-color-fg: var(--status-success-fg);
+  &::backdrop {
+    overscroll-behavior: contain;
+    background-color: var(--malert-backdrop, rgba(0 0 0 / .7));
+  }
 
-  --malert-info-color: var(--status-info-color);
-  --malert-info-color-fg: var(--status-info-fg);
+  &, * {
+    box-sizing: border-box;
+  }
 
-  --malert-warning-color: var(--status-warning-color);
-  --malert-warning-color-fg: var(--status-warning-fg);
+  &.modal-alert-success {
+    --malert-color: var(--malert-success-color, hsl(123deg 51% 33%));
+    --malert-color-fg: var(--malert-success-color-fg, #fff);
+  }
+  &.modal-alert-info {
+    --malert-color: var(--malert-info-color, hsl(201deg 98% 41%));
+    --malert-color-fg: var(--malert-info-color-fg, #fff);
+  }
+  &.modal-alert-warning {
+    --malert-color: var(--malert-warning-color, hsl(29deg 99% 40%));
+    --malert-color-fg: var(--malert-warning-color-fg, #fff);
+  }
+  &.modal-alert-error {
+    --malert-color: var(--malert-error-color, hsl(0deg 100% 40%));
+    --malert-color-fg: var(--malert-error-color-fg, #fff);
+  }
+  &.modal-alert-confirm {
+    --malert-color: var(--malert-confirm-color, hsl(277deg 72% 45%));
+    --malert-color-fg: var(--malert-confirm-color-fg, #fff);
+  }
+}
 
-  --malert-danger-color: var(--status-danger-color);
-  --malert-danger-color-fg: var(--status-danger-fg);
+.malert-inner {
+  display: flex;
+  flex-flow: column nowrap;
+  /* gap: .7rem; */
+  align-items: stretch;
+  justify-content: flex-start;
 
-  --malert-confirm-color: var(--status-warning-color);
-  --malert-confirm-color-fg: var(--status-warning-fg);
+  @media screen and (min-width: 600px) {
+    flex-direction: row;
+  }
+}
 
-  /* --malert-marks-stroke-width: 6px; */
-  --malert-backdrop: rgb(0 0 0 / .3);
-  --malert-border-radius: var(--radius-md);
-  /* --malert-box-shadow: var(--box-shadow); */
-  --malert-heading-font-family: var(--font-family);
-  /* --malert-heading-line-height: */
-  --malert-heading-font-size: 1.8rem;
-  --malert-heading-font-weigth: var(--font-size-base);
-  --malert-body-font-family: var(--font-family);
 
-  top: 50%;
-  left: 50%;
-  translate: -50% -50%;
+.malert-mark {
+  display: flex;
+  flex: 0;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: .4rem;
+  background-color: var(--malert-color);
+
+  svg {
+    width: 100px;
+    aspect-ratio: 1;
+    fill: none;
+    stroke: var(--malert-color-fg);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: var(--malert-marks-stroke-width, 6px);
+  }
+
+  @media screen and (min-width: 600px) {
+    flex-direction: row;
+    align-items: flex-start;
+    width: auto;
+    padding: 1rem;
+    /* svg {
+      width: 100px;
+    } */
+  }
 }
 
+.malert-body {
+  display: flex;
+  flex: 1;
+  flex-flow: column nowrap;
+  gap: .5rem;
+  align-items: stretch;
+  justify-content: flex-start;
+  padding: .5rem;
 
+  text-align: center;
 
-.malert-mark {
-  svg {
-    width: 7rem;
-    max-width: none;
-    height: 7rem;
-    fill: var(--malert-color-fg);
-    stroke: none;
+  @media screen and (min-width: 600px) {
+    padding: 1rem;
+    text-align: left;
+  }
+}
+
+.malert-heading {
+  font-family: var(--malert-heading-font-family, sans-serif);
+  font-size: var(--malert-heading-font-size, 2rem);
+  font-weight: var(--malert-heading-font-weight, 700);
+  line-height: var(--malert-heading-line-height, 1.2);
+}
+.malert-text {
+  font-family: var(--malert-text-font-family, sans-serif);
+
+}
+.malert-btns {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1rem;
+  align-items: center;
+  justify-content: flex-start;
+
+  padding-top: 1rem;
+  margin-top: auto;
+
+  @media screen and (min-width: 600px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+
+.modal-alert-animated {
+  transform: translateY(-500%);
+  animation: dialog-in .3s ease-out;
+
+  &[open] {
+    transform: none;
+  }
+}
+
+@keyframes dialog-in {
+  from {
+    opacity: 0;
+    transform: translateY(-50%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }

package/src/components/modal-alert/modal-alert.js

@@ -1,85 +1,169 @@
-// import './modal-alert.css'; // importato direttamente dal css principale per ottimizzarne l'uso
-
-import modalAlert from '@massimo-cassandro/modal-alert';
-
-import checkIcon from './svg/check-circle-duotone.svg?inline';
-import infoIcon from './svg/info-duotone.svg?inline';
-import confirmIcon from './svg/question-duotone.svg?inline';
-import warningIcon from './svg/warning-duotone.svg?inline';
-import errorIcon from './svg/x-circle-duotone.svg?inline';
-
-const custom_defaults = {
-
-  globals: {
-    onOpen: () => {
-      document.body.classList.add('overflow-hidden');
-    },
-    onClose: () => {
-      document.body.classList.remove('overflow-hidden');
-    },
-    cssFile: null,
-    animation: true,
-    showMarks: true,
-  },
-
-  success: {
-    title: 'Operazione completata',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    ok_btn_class: 'btn btn-success',
-    timer: 4000, // ms
-  },
-  error: {
-    title: 'Si è verificato un errore',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-danger',
-    timer: null,
-  },
-  warning: {
-    title: 'Attenzione!',
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-warning',
-    timer: null,
-  },
-  info: {
-    title: null,
-    mes: null,
-    ok_btn_text: 'OK',
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-info',
-    timer: null,
-  },
-  confirm: {
-    title: 'Confermi?',
-    mes: null,
-    ok_btn_text: 'OK',
-    cancel_btn_text: 'Cancel',
-    cancel_focus: true, // false to give focus to the ok button
-    heading_class: null,
-    text_class: null,
-    ok_btn_class: 'btn btn-warning',
-    cancel_btn_class: 'btn btn-outline-secondary',
-    callback: null,
-    timer: null
+import { marks as default_marks } from './marks.js';
+import {defaults} from './defaults.js';
+
+// https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
+
+// TODO rewrite as async
+
+export default function (params, custom_defaults = {}, marks = default_marks) {
+
+  try {
+
+    // garbage collection
+    let dialog = document.querySelector('.modal-alert');
+    if(dialog) {
+      dialog.remove();
+    }
+
+
+    params = {
+      ...(defaults.globals?? {}),
+      ...(custom_defaults.globals?? {}),
+      ...(defaults[params.type]?? {}),
+      ...(custom_defaults[params.type]?? {}),
+      ...params
+    };
+
+    // per compatibilità
+    if(params.type === 'danger') {
+      params.type = 'error';
+    }
+
+    if(!params.type || Object.keys(defaults).filter(item => item !== 'global').indexOf(params.type) === -1) {
+      throw 'Missing or incorrect `type` parameter';
+    }
+
+    if(params.callback && typeof params.callback !== 'function') {
+      throw 'Incorrect `callback` parameter';
+    }
+    if(params.onOpen && typeof params.onOpen !== 'function') {
+      throw 'Incorrect `onOpen` parameter';
+    }
+    if(params.onClose && typeof params.onClose !== 'function') {
+      throw 'Incorrect `onClose` parameter';
+    }
+    if(params.extra_btn && !params.extra_btn_selector) {
+      throw 'Incorrect `extra_btn` parameter: missing `extra_btn_selector`';
+    }
+
+    if(params.cssFile && !document.querySelector(`link[href='${params.cssFile}']`)) {
+      document.head.insertAdjacentHTML('beforeend',
+        `<link rel="stylesheet" href="${params.cssFile}" type="text/css">`
+      );
+    }
+
+    // icona warning opzionale per confirm
+    let icon = marks[params.type];
+    if(params.type === 'confirm' && params.use_warning_icon) {
+      icon = marks.warning;
+    }
+
+
+    // if(!params.title) {
+    //   throw '`title` parameter not present';
+    // }
+    const closedByAny = ['success', 'info'].indexOf(params.type) !== -1? ' closedBy="any"' : '';
+
+    document.body.insertAdjacentHTML('beforeend',
+      `<dialog class="modal-alert modal-alert-${params.type}${params.animation? ' modal-alert-animated' : ''}"${closedByAny}>
+        <div class="malert-inner">
+          ${params.showMarks? `<div class="malert-mark">${icon}</div>` : ''}
+          <div class="malert-body">
+            ${params.title? `<div class="malert-heading ${params.heading_class?? ''}">${params.title}</div>` : ''}
+            <div class="malert-text ${params.text_class?? ''}">${params.mes?? ''}</div>
+            <div class="malert-btns">
+              <button type="button" class="malert-ok ${params.ok_btn_class}">
+                ${params.ok_btn_text}
+              </button>
+              ${params.type === 'confirm'?
+                `<button type="button" class="malert-cancel ${params.cancel_btn_class}">
+                  ${params.cancel_btn_text}
+                </button>`
+              : ''}
+              ${params.extra_btn?? ''}
+            </div>
+          </div>
+        </div>
+      </dialog>`
+    );
+
+    dialog = document.querySelector('.modal-alert');
+
+    dialog.showModal();
+
+    // btn focus
+    const ok_btn = dialog.querySelector('.malert-ok'),
+      cancel_btn = dialog.querySelector('.malert-cancel'),
+      extra_btn = (params.extra_btn && params.extra_btn_selector)? dialog.querySelector(params.extra_btn_selector) : null;
+
+    if(extra_btn && params.extra_btn_focus) {
+      extra_btn.focus();
+
+    } else if(cancel_btn && params.cancel_focus) { // confirm
+      cancel_btn.focus();
+
+    } else {
+      ok_btn?.focus();
+    }
+
+    if(params.onOpen && typeof params.onOpen === 'function') {
+      params.onOpen();
+    }
+
+    let timeoutID;
+
+    const dialogDismiss = (btn) => {
+      dialog.remove();
+
+      if(params.onClose && typeof params.onClose === 'function') {
+        params.onClose();
+      }
+
+      // If present, the callback argument is `btn.dataset.malertResult`
+      // Otherwise, if the modal type is `confirm`, it is `true` for the OK button, `false` for the Cancel button
+      // Otherwise, for all other modal types, it is `undefined`
+      if(params.callback && typeof params.callback === 'function') {
+        let arg;
+        if(btn) {
+          if(btn.dataset?.malertResult) {
+            arg = btn.dataset.malertResult;
+
+          } else if(params.type === 'confirm') {
+            arg = btn.classList.contains('malert-ok');
+          }
+        } else {
+          arg = undefined;
+        }
+
+        params.callback(arg);
+      }
+
+      if(timeoutID) {
+        window.clearTimeout(timeoutID);
+      }
+    };
+
+    if( params.timer && params.type !== 'confirm') {
+      timeoutID = window.setTimeout( function() {
+        dialogDismiss();
+      }, params.timer);
+    }
+
+    dialog.addEventListener('close', () => {
+      dialogDismiss();
+    }, false);
+
+    [ok_btn, cancel_btn, ...(extra_btn? [extra_btn] : [])].forEach(btn => {
+
+      btn?.addEventListener('click', () => {
+        dialogDismiss(btn);
+      }, false);
+
+    });
+
+
+  } catch(e) {
+    console.error( e ); // eslint-disable-line
   }
-};
-
-const marks = {
-  success: checkIcon,
-  error: errorIcon,
-  warning: warningIcon,
-  info: infoIcon,
-  confirm: confirmIcon
-};
-
-export function mAlert(params) {
-  modalAlert(params, custom_defaults, marks);
+
 }

package/src/components/modal-alert/svg/confirm.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132"><circle cx="66" cy="66" r="63"/><path d="M44 48a21.928 21.928 0 0 1 6.443-15.556A21.931 21.931 0 0 1 66 26c12.15 0 22 9.85 22 22 0 6.14-2.668 11.543-6.573 15.683-6.514 6.91-15.363 4.47-15.363 16.065v7.935M66 105.816v-6.975"/></svg>

package/src/components/modal-alert/svg/error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132"><circle cx="66" cy="66" r="63"/><path d="M35 39l61.4 54.4m0-54.4L35 93.2"/></svg>

package/src/components/modal-alert/svg/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132"><circle cx="66" cy="66" r="63"/><path d="M74 105l-8.6.237V45.713L56 46m9.6-13.025V26"/></svg>

package/src/components/modal-alert/svg/success.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132"><circle cx="66" cy="66" r="63"/><path d="M101.4 42L52.7 90.6 31 69.3"/></svg>

package/src/components/modal-alert/svg/svg-to-js.mjs

@@ -0,0 +1,26 @@
+/* eslint-disable no-console */
+// build a js file with all svgs as variables
+
+import * as fs from 'fs';
+import * as path from 'path';
+
+const __dirname = new URL('.', import.meta.url).pathname
+  ,target_file = path.resolve(__dirname, '../marks.js')
+  ,marks = {};
+
+['confirm', 'error', 'info', 'success', 'warning'].forEach(svg => {
+  const svg_content = fs.readFileSync(path.resolve(__dirname, `./${svg}.svg`), 'utf8');
+  marks[svg] = svg_content; //.replaceAll('\'', '\\\'');
+});
+
+const content = '/* eslint-disable quotes */\n\n' +
+  '/*\n' +
+  '   This file was generated by the script `svg-to-js.mjs`\n' +
+  '   (https://github.com/massimo-cassandro/modal-alert/blob/main/src/svg/svg-to-js.mjs).\n' +
+  '   DO NOT EDIT (any changes will be overwritten)\n' +
+  '*/\n\n' +
+  'export const marks = ' + JSON.stringify(marks) + ';';
+
+fs.writeFileSync(target_file, content, 'utf-8');
+
+console.log('svg-to-js: DONE');

package/src/components/modal-alert/svg/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132"><circle cx="66" cy="66" r="63"/><path d="M41.839 72.475v-37.2c0-3.852 3.143-6.975 7.02-6.975s7.02 3.123 7.02 6.975V65.5m0-30.225v-9.3c0-3.852 3.143-6.975 7.02-6.975s7.02 3.123 7.02 6.975V65.5m0-30.225c0-3.852 3.143-6.975 7.02-6.975 3.878 0 7.02 3.123 7.02 6.975V65.5m0-20.925c0-3.852 3.144-6.975 7.02-6.975 3.878 0 7.021 3.123 7.021 6.975V84.1C98 99.509 85.428 112 69.92 112h-9.36c-9.896-1.357-18.517-6.496-23.401-13.95L24.522 73.637c-2.584-3.53-1.799-8.475 1.755-11.043 3.555-2.568 8.531-1.788 11.116 1.743l4.212 8.138"/></svg>

package/src/custom-properties-default.css

@@ -13,7 +13,7 @@
   --body-text: var(--text-color);
   --btn-border-radius: var(--form-control-border-radius);
   --btn-border-width: var(--form-control-border-width);
-  --btn-close-active-background-color: var(--link-active-background-color);
+  --btn-close-active-background-color: var(--btn-close-background-color);
   --btn-close-active-icon-color: var(--link-active-color);
   --btn-close-background-color: var(--body-background-color);
   --btn-close-border-color: var(--btn-close-icon-color);
@@ -226,6 +226,10 @@
   --size-xl: 2rem;
   --size-xs: .5rem;
   --size-xxs: .25rem;
+  --snackbar-border-radius: var(--radius-sm);
+  --snackbar-duration: 5s;
+  --snackbar-font-size: var(--font-size-sm);
+  --snackbar-text-color: var(--text-color);
   --spinner-color: var(--primary-100);
   --spinner-size: var(--size-lg);
   --spinner-stroke-width: .125rem;