@massimo-cassandro/minimo 1.20.15 → 1.21.0

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

@@ -1,5 +1,17 @@
 export default {
   link: {
+    font: {
+      weight: {
+        $type: 'string',
+        $value: '{font.weight.semibold}',
+      }
+    },
+    text: {
+      decoration: {
+        $type: 'string',
+        $value: 'none',
+      },
+    },
     color: {
       $type: 'color',
       $value: '#0d12ae'
@@ -11,29 +23,48 @@ export default {
       },
     },
     hover: {
-      color: null
+      color: {
+        $type: 'color',
+        $value: '{link.color}'
+      },
+      text: {
+        decoration: {
+          $type: 'string',
+          $value: 'underline',
+        },
+        underline: {
+          offset: {
+            $type: 'dimension',
+            $value: '2px',
+          }
+        }
+      }
     },
     focus: {
       outline: {
         color: {
           $type: 'color',
-          $value: '{link.color}'
+          $value: 'color-mix(in srgb, {link.color} 60%, transparent)'
         },
         width: {
           $type: 'dimension',
           $value: '2px'
         },
+        offset: {
+          $type: 'dimension',
+          $value: '2px'
+        },
       }
     },
     active: {
       color: {
         $type: 'color',
-        $value: '#51054C'
+        $value: '{body.background.color}'
       },
       background: {
         color: {
           $type: 'color',
-          $value: 'transparent'
+          $value: '{primary.100}'
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.20.15",
+  "version": "1.21.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",

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;
+    }
   }
+
 }

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

@@ -99,27 +99,27 @@ const defaults = {
 /**
  * @typedef {Object} ModalAlertParams
  * @property {string} [type] - Dialog type: `success`, `error`, `warning`, `info`, or `confirm`.
- * @property {string | null} [extraClass] - optional dialog extra class
+ * @property {string | null} [title] - title text
+ * @property {string | null} [mes] - text message (plain or html)
+ * @property {((arg?: *) => void) | null} [callback] - optional callback dialog after user choice
+ * @property {number | null} [timer] - timer for autoclose (ms). `null` for disable
  * @property {(() => void) | null} [onOpen] - optional callback on dialog open
  * @property {(() => void) | null} [onClose] - optional callback on dialog close
+ * @property {string | null} [extraClass] - optional dialog extra class
+ * @property {string} [okBtnText] - text for 'ok' button
+ * @property {string} [okBtnClass] - alternative class for 'ok' button. It replaces the default one
+ * @property {string} [cancelBtnText] - text for 'cancel' button
+ * @property {string} [cancelBtnClass] - alternative class for 'cancel' button. It replaces the default one
+ * @property {boolean} [cancelBtnFocus] - true if the cancel button should be focused when the dialog box opens. It has no effect if an extraBtn is set
+ * @property {string | null} [headingClass] - optional extra class for heading
+ * @property {DomBuilderItem | null} [extraBtn] - optional extra button (as domBuilder object)
+ * @property {boolean} [extraBtnFocus] - true if the extra button should be focused when the dialog box opens (overrides any focus assigned to the 'cancel' button)
  * @property {boolean} [animation] - if true, dialog will be animated
  * @property {boolean} [showMarks] - if true, mark iconswill be showed
- * @property {((arg?: *) => void) | null} [callback] - optional callback dialog after user choice
- * @property {number | null} [timer] - timer for autoclose (ms). `null` for disable
- * @property {string | null} [title] - title text
- * @property {string | null} [mes] - text message (plain or html)
- * @property {string | null} [headingClass] - optional extra class for heading
  * @property {string | null} [textClass] - optional extra class for text
  * @property {string | null} [icon] - Icon markup used for the dialog; defaults to the type's icon.
  * @property {string | null} [altIcon] - Alternate icon markup, used instead of `icon` when `useAltIcon` is `true`.
  * @property {boolean} [useAltIcon] - When `true`, uses `altIcon` instead of `icon` (e.g. the `danger` icon on a `warning` dialog, or the `warning` icon on a `confirm` dialog).
- * @property {DomBuilderItem | null} [extraBtn] - optional extra button (as domBuilder object)
- * @property {boolean} [extraBtnFocus] - true if the extra button should be focused when the dialog box opens (overrides any focus assigned to the 'cancel' button)
- * @property {string} [okBtnText] - text for 'ok' button
- * @property {string} [okBtnClass] - alternative class for 'ok' button. It replaces the default one
- * @property {string} [cancelBtnText] - text for 'cancel' button
- * @property {string} [cancelBtnClass] - alternative class for 'cancel' button. It replaces the default one
- * @property {boolean} [cancelBtnFocus] - true if the cancel button should be focused when the dialog box opens. It has no effect if an extraBtn is set
  */
 
 /**