@massimo-cassandro/minimo 1.21.1 → 1.21.3

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

@@ -66,7 +66,7 @@ const config = {
   // 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',
+  addLayer: false,
 
   // Named groups of custom properties. Properties whose first hyphen-separated
   // name segment matches one of a group's `prefixes` are pulled out, labelled

package/index.js

@@ -20,7 +20,7 @@ export { ValidationError } from './src/utilities/validation-error-class.js';
 
 // domBuilder helpers
 export { buildPictureTag } from './src/utilities/dom-builder-helpers/picture-tag.js';
-export { buildInput, buildCheckbox, buildTextarea, buildFakeField } from './src/utilities/dom-builder-helpers/form-tags.js';
+export { buildInput, buildCheckbox, buildTextarea, buildFakeField, buildSelect } from './src/utilities/dom-builder-helpers/form-tags.js';
 
 // components
 export { dismissAlerts } from './src/components/dismiss-alerts.js';

package/package.json

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

package/src/components/autocomplete/autocomplete.css

@@ -1,150 +1,148 @@
-@layer components {
 
-  /* basato sul css di @tarekraafat/autocomplete.js */
+/* basato sul css di @tarekraafat/autocomplete.js */
 
 
-  .hmenu-subsection-emulazione {
-    overflow-y: visible;
-  }
+.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);
+    }
 
-  .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;
+    li {
       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);
-      }
+      margin: .3rem;
+      text-align: left;
+      list-style: none;
 
-      li {
-        padding: 0;
-        margin: .3rem;
-        text-align: left;
-        list-style: none;
+      /* stylelint-disable declaration-no-important, max-nesting-depth, selector-max-compound-selectors */
+      > div {
 
-        /* stylelint-disable declaration-no-important, max-nesting-depth, selector-max-compound-selectors */
-        > div {
+        padding: .3rem .5rem;
+        background-color: var(--ac-list-item-bg);
+        border-radius: .35rem;
+        transition: all .2s ease;
 
-          padding: .3rem .5rem;
-          background-color: var(--ac-list-item-bg);
-          border-radius: .35rem;
-          transition: all .2s ease;
+        .badge {
+          color: #fff;
+          background-color: var(--ac-hover-color);
+        }
 
+        &:hover {
+          cursor: pointer;
+          background-color: var(--ac-hover-color) !important;
+          &, .text-muted {
+            color: #fff !important;
+          }
           .badge {
-            color: #fff;
-            background-color: var(--ac-hover-color);
+            color: var(--ac-hover-color) !important;
+            background-color: color-mix(in srgb, #fff 70%, transparent) !important;
           }
 
-          &: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;
-            }
+          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: var(--text-muted) !important;
+              color: rgb(255 255 255) !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);
-
-            /* 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 */
 
-        /* &[aria-selected='true'] {
-        background-color: var(--ada-grigio-2);
-      } */
+        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 {
+          color: rgba(#ffffff, 0);
+          background-color: rgba(#ffffff, 0);
+        } */
+        }
       }
-    }
+      /* stylelint-enable declaration-no-important, max-nesting-depth, selector-max-compound-selectors */
 
-    .no-result {
-      padding: .4rem .6rem;
-      color: var(--ac-danger-color);
+      /* &[aria-selected='true'] {
+      background-color: var(--ada-grigio-2);
+    } */
     }
   }
 
+  .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;
 
-    &: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%;
+/* 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%;
 
 }
+

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

@@ -1,17 +1,14 @@
-@layer components {
+/*! minimo - Inner Nav */
 
-  /*! minimo - Inner Nav */
+.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; */
 
-  .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;
-    }
+  @media print {
+    display: none;
   }
-
 }
+

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

@@ -1,203 +1,200 @@
-@layer components {
-
-  /*! minimo - Modal Alert */
-
-  .malert {
-    width: 600px;
-    max-width: 90vw;
-    padding: 0;
-    margin: auto;
-    background-color: var(--malert-background-color);
-    border: none;
-    border-radius: var(--malert-border-radius);
-    box-shadow: var(--malert-box-shadow, var(--default-box-shadow));
-    /* box-shadow: 2px 2px 12px #000; */
-
-    &::backdrop {
-      overscroll-behavior: contain;
-      background-color: var(--malert-backdrop);
-    }
-
-    &, * {
-      box-sizing: border-box;
-    }
+/*! minimo - Modal Alert */
+
+.malert {
+  width: 600px;
+  max-width: 90vw;
+  padding: 0;
+  margin: auto;
+  background-color: var(--malert-background-color);
+  border: none;
+  border-radius: var(--malert-border-radius);
+  box-shadow: var(--malert-box-shadow, var(--default-box-shadow));
+  /* box-shadow: 2px 2px 12px #000; */
+
+  &::backdrop {
+    overscroll-behavior: contain;
+    background-color: var(--malert-backdrop);
   }
 
-  .success {
-    --_malert-color-bg: var(--malert-success-bg);
-    --_malert-color-fg: var(--malert-success-fg);
-  }
-  .info {
-    --_malert-color-bg: var(--malert-info-bg);
-    --_malert-color-fg: var(--malert-info-fg);
-  }
-  .warning {
-    --_malert-color-bg: var(--malert-warning-bg);
-    --_malert-color-fg: var(--malert-warning-fg);
-  }
-  .error {
-    --_malert-color-bg: var(--malert-error-bg);
-    --_malert-color-fg: var(--malert-error-fg);
-  }
-  .confirm {
-    --_malert-color-bg: var(--malert-confirm-bg);
-    --_malert-color-fg: var(--malert-confirm-fg);
+  &, * {
+    box-sizing: border-box;
   }
+}
 
+.success {
+  --_malert-color-bg: var(--malert-success-bg);
+  --_malert-color-fg: var(--malert-success-fg);
+}
+.info {
+  --_malert-color-bg: var(--malert-info-bg);
+  --_malert-color-fg: var(--malert-info-fg);
+}
+.warning {
+  --_malert-color-bg: var(--malert-warning-bg);
+  --_malert-color-fg: var(--malert-warning-fg);
+}
+.error {
+  --_malert-color-bg: var(--malert-error-bg);
+  --_malert-color-fg: var(--malert-error-fg);
+}
+.confirm {
+  --_malert-color-bg: var(--malert-confirm-bg);
+  --_malert-color-fg: var(--malert-confirm-fg);
+}
 
-  .innerWrapper{
-    display: flex;
-    flex-flow: column nowrap;
-    /* gap: .7rem; */
-    align-items: stretch;
-    justify-content: flex-start;
 
-    @media screen and (min-width: 600px) {
-      flex-direction: row;
-    }
+.innerWrapper{
+  display: flex;
+  flex-flow: column nowrap;
+  /* gap: .7rem; */
+  align-items: stretch;
+  justify-content: flex-start;
+
+  @media screen and (min-width: 600px) {
+    flex-direction: row;
   }
+}
 
 
-  .mMark {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    padding: .4rem;
-    background-color: var(--_malert-color-bg);
+.mMark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: .4rem;
+  background-color: var(--_malert-color-bg);
 
-    svg {
-      width: 100px;
-      aspect-ratio: 1;
-      background-color: transparent;
-      fill: var(--_malert-color-fg);
-    }
+  svg {
+    width: 100px;
+    aspect-ratio: 1;
+    background-color: transparent;
+    fill: var(--_malert-color-fg);
+  }
 
-    @media screen and (min-width: 600px) {
-      flex-direction: row;
-      align-items: flex-start;
-      width: auto;
-      padding: 1rem;
-      /* svg {
-      width: 100px;
-    } */
-    }
+  @media screen and (min-width: 600px) {
+    flex-direction: row;
+    align-items: flex-start;
+    width: auto;
+    padding: 1rem;
+    /* svg {
+    width: 100px;
+  } */
   }
+}
 
-  .mBody {
-    display: flex;
-    flex: 1;
-    flex-flow: column nowrap;
-    gap: .5rem;
-    align-items: stretch;
-    justify-content: flex-start;
-    padding: .5rem;
+.mBody {
+  display: flex;
+  flex: 1;
+  flex-flow: column nowrap;
+  gap: .5rem;
+  align-items: stretch;
+  justify-content: flex-start;
+  padding: .5rem;
 
-    text-align: center;
+  text-align: center;
 
-    @media screen and (min-width: 600px) {
-      padding: 1rem;
-      text-align: left;
-    }
+  @media screen and (min-width: 600px) {
+    padding: 1rem;
+    text-align: left;
   }
+}
 
-  .mHeading {
-    font-family: var(--malert-heading-font-family);
-    font-size: var(--malert-heading-font-size);
-    font-weight: var(--malert-heading-font-weight);
-    line-height: var(--malert-heading-line-height);
-  }
-  .mText {
-    font-family: var(--malert-text-font-family);
-    font-size: var(--malert-text-font-size);
-  }
+.mHeading {
+  font-family: var(--malert-heading-font-family);
+  font-size: var(--malert-heading-font-size);
+  font-weight: var(--malert-heading-font-weight);
+  line-height: var(--malert-heading-line-height);
+}
+.mText {
+  font-family: var(--malert-text-font-family);
+  font-size: var(--malert-text-font-size);
+}
 
-  .mBtns {
-    display: flex;
-    flex-flow: column nowrap;
-    gap: 1rem;
-    align-items: center;
-    justify-content: flex-end;
+.mBtns {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1rem;
+  align-items: center;
+  justify-content: flex-end;
 
-    padding-top: 1rem;
-    margin-top: auto;
+  padding-top: 1rem;
+  margin-top: auto;
 
-    @media screen and (min-width: 600px) {
-      flex-direction: row-reverse;
-      justify-content: space-between;
-    }
+  @media screen and (min-width: 600px) {
+    flex-direction: row-reverse;
+    justify-content: space-between;
   }
+}
 
 
-  .mAnimated {
-    transform: translateY(-500%);
-    animation: dialog-in .3s ease-out;
+.mAnimated {
+  transform: translateY(-500%);
+  animation: dialog-in .3s ease-out;
 
-    &[open] {
-      transform: none;
-    }
+  &[open] {
+    transform: none;
   }
+}
 
-  @keyframes dialog-in {
-    from {
-      opacity: 0;
-      transform: translateY(-50%);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+@keyframes dialog-in {
+  from {
+    opacity: 0;
+    transform: translateY(-50%);
   }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 
 
-  /* confirm button */
+/* confirm button */
 
 
-  .btnConfirm {
-    --_button-bg-color: var(--malert-confirm-btn-bg);
-    --_button-fg-color: var(--malert-confirm-btn-fg);
-    --_button-border-color: var(--malert-confirm-btn-border-color);
+.btnConfirm {
+  --_button-bg-color: var(--malert-confirm-btn-bg);
+  --_button-fg-color: var(--malert-confirm-btn-fg);
+  --_button-border-color: var(--malert-confirm-btn-border-color);
 
-    @media (hover: hover) {
-      &:hover {
-        --_button-bg-color: var(--malert-confirm-btn-hover-bg);
-        --_button-fg-color: var(--malert-confirm-btn-hover-fg);
-        --_button-border-color: var(--malert-confirm-btn-hover-border-color);
-      }
-    }
-    &:focus {
-      outline: none;
+  @media (hover: hover) {
+    &:hover {
+      --_button-bg-color: var(--malert-confirm-btn-hover-bg);
+      --_button-fg-color: var(--malert-confirm-btn-hover-fg);
+      --_button-border-color: var(--malert-confirm-btn-hover-border-color);
     }
+  }
+  &:focus {
+    outline: none;
+  }
 
-    &:focus-visible, &:active {
-      outline: var(--malert-confirm-btn-focus-outline-width) solid var(--malert-confirm-btn-focus-outline-color);
-      /* outline-offset: 4px; */
-    }
+  &:focus-visible, &:active {
+    outline: var(--malert-confirm-btn-focus-outline-width) solid var(--malert-confirm-btn-focus-outline-color);
+    /* outline-offset: 4px; */
+  }
 
-    &:active {
-      --_button-bg-color: var(--malert-confirm-btn-active-bg);
-      --_button-fg-color: var(--malert-confirm-btn-active-fg);
-      --_button-border-color: var(--malert-confirm-btn-active-border-color);
-    }
+  &:active {
+    --_button-bg-color: var(--malert-confirm-btn-active-bg);
+    --_button-fg-color: var(--malert-confirm-btn-active-fg);
+    --_button-border-color: var(--malert-confirm-btn-active-border-color);
+  }
 
 
-    &.btnHollow {
+  &.btnHollow {
 
-      --_button-bg-color: var(--malert-confirm-btn-hollow-bg);
-      --_button-fg-color: var(--malert-confirm-btn-hollow-fg);
-      /* --_button-border-color: var(--__btn-o-primary-border-color); */
+    --_button-bg-color: var(--malert-confirm-btn-hollow-bg);
+    --_button-fg-color: var(--malert-confirm-btn-hollow-fg);
+    /* --_button-border-color: var(--__btn-o-primary-border-color); */
 
 
-      @media (hover: hover) {
-        &:hover {
-          --_button-bg-color: var(--malert-confirm-btn-hollow-hover-bg);
-          --_button-fg-color: var(--malert-confirm-btn-hollow-hover-fg);
-          /* --_button-border-color: var(--__btn-o-primary-hover-border-color); */
-        }
+    @media (hover: hover) {
+      &:hover {
+        --_button-bg-color: var(--malert-confirm-btn-hollow-hover-bg);
+        --_button-fg-color: var(--malert-confirm-btn-hollow-hover-fg);
+        /* --_button-border-color: var(--__btn-o-primary-hover-border-color); */
       }
-
     }
 
-  } /* end btnConfirm */
+  }
+
+} /* end btnConfirm */
 
-}