@massimo-cassandro/minimo 1.20.16 → 1.21.0

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

@@ -1,99 +1,103 @@
-/*! minimo - Modal Popup */
-
-.dialog {
-
-  position: fixed;
-
-  display: flex;
-  flex-direction: column;
-
-  width: var(--mpopup-width);
-  min-width: var(--mpopup-min-width);
-  max-width: var(--mpopup-max-width);
-  height: var(--mpopup-height);
-  min-height: var(--mpopup-min-height);
-  max-height: var(--mpopup-max-height);
-  padding: 0;
-  margin: auto;
-  overflow: visible;
-  background-color: var(--mpopup-background-color);
-  border: none;
-  border-radius: var(--mpopup-border-radius);
-  box-shadow: var(--mpopup-drop-shadow);
-  scale: 0;
-  transition: scale .2s ease-out;
-
-  &::backdrop {
-    overscroll-behavior: contain;
-    background-color: var(--mpopup-backdrop-color);
-  }
+@layer components {
+
+  /*! minimo - Modal Popup */
+
+  .dialog {
+
+    position: fixed;
+
+    display: flex;
+    flex-direction: column;
+
+    width: var(--mpopup-width);
+    min-width: var(--mpopup-min-width);
+    max-width: var(--mpopup-max-width);
+    height: var(--mpopup-height);
+    min-height: var(--mpopup-min-height);
+    max-height: var(--mpopup-max-height);
+    padding: 0;
+    margin: auto;
+    overflow: visible;
+    background-color: var(--mpopup-background-color);
+    border: none;
+    border-radius: var(--mpopup-border-radius);
+    box-shadow: var(--mpopup-drop-shadow);
+    scale: 0;
+    transition: scale .2s ease-out;
+
+    &::backdrop {
+      overscroll-behavior: contain;
+      background-color: var(--mpopup-backdrop-color);
+    }
+
+    &.on {
+      scale: 1;
+    }
 
-  &.on {
-    scale: 1;
   }
 
-}
+  .closeButton  {
 
-.closeButton  {
-
-  position: absolute;
-  top: calc(-1 * var(--mpopup-btn-close-size) / 3);
-  right: calc(-1 * var(--mpopup-btn-close-size) / 3);
-}
+    position: absolute;
+    top: calc(-1 * var(--mpopup-btn-close-size) / 3);
+    right: calc(-1 * var(--mpopup-btn-close-size) / 3);
+  }
 
-.contentWrapper {
-  display: flex;
-  flex: 1;
-  flex-flow: column nowrap;
-  gap: 0;
-  align-items: stretch;
-  justify-content: flex-start;
-  min-height: 0;
-}
+  .contentWrapper {
+    display: flex;
+    flex: 1;
+    flex-flow: column nowrap;
+    gap: 0;
+    align-items: stretch;
+    justify-content: flex-start;
+    min-height: 0;
+  }
 
 
-.content {
-  flex: 1;
-  /* width: 100%;
+  .content {
+    flex: 1;
+    /* width: 100%;
   height: 100%; */
-  min-height: 0;
-  padding: var(--mpopup-content-padding);
-  overflow-x: hidden;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-
-  .scrollBarPadding & {
-    padding-inline-end: var(--mpopup-content-scrollbar-padding-i-end);
-  }
+    min-height: 0;
+    padding: var(--mpopup-content-padding);
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
 
-}
+    .scrollBarPadding & {
+      padding-inline-end: var(--mpopup-content-scrollbar-padding-i-end);
+    }
 
-.iframe {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  overscroll-behavior: contain;
-  border: none;
-}
+  }
 
-.header {
-  padding: var(--mpopup-header-padding);
-  font-size: var(--mpopup-header-font-size);
-  color: var(--mpopup-header-color);
-  background-color: var(--mpopup-header-background-color);
-  border-radius: var(--mpopup-border-radius) var(--mpopup-border-radius) 0 0;
-}
-.footer {
-  padding: var(--mpopup-footer-padding);
-  font-size: var(--mpopup-footer-font-size);
-  color: var(--mpopup-footer-color);
-  background-color: var(--mpopup-footer-background-color);
-  border-radius: 0 0 var(--mpopup-border-radius) var(--mpopup-border-radius);
-}
+  .iframe {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    overscroll-behavior: contain;
+    border: none;
+  }
 
-.header, .footer {
-  * {
-    color: inherit;
+  .header {
+    padding: var(--mpopup-header-padding);
+    font-size: var(--mpopup-header-font-size);
+    color: var(--mpopup-header-color);
+    background-color: var(--mpopup-header-background-color);
+    border-radius: var(--mpopup-border-radius) var(--mpopup-border-radius) 0 0;
+  }
+  .footer {
+    padding: var(--mpopup-footer-padding);
+    font-size: var(--mpopup-footer-font-size);
+    color: var(--mpopup-footer-color);
+    background-color: var(--mpopup-footer-background-color);
+    border-radius: 0 0 var(--mpopup-border-radius) var(--mpopup-border-radius);
   }
+
+  .header, .footer {
+    * {
+      color: inherit;
+    }
+  }
+
 }

package/src/components/overlay/overlay.css

@@ -1,12 +1,16 @@
-/*! minimo - Overlay */
+@layer components {
+
+  /*! minimo - Overlay */
+
+  .overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-index-overlay);
+    pointer-events: none;
+    background-color: color-mix(in srgb, var(--text-color) 20%, transparent);
+  }
+  .overlay-inverted {
+    background-color: color-mix(in srgb, var(--body-background-color) 50%, transparent);
+  }
 
-.overlay {
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-index-overlay);
-  pointer-events: none;
-  background-color: color-mix(in srgb, var(--text-color) 20%, transparent);
-}
-.overlay-inverted {
-  background-color: color-mix(in srgb, var(--body-background-color) 50%, transparent);
 }

package/src/components/sf-macro/sf-macro.css

@@ -1,26 +1,28 @@
-/* TODO migliorare l'integrazione con btn-close e adeguare i tokens dove necessario */
+@layer components {
 
+  /* TODO migliorare l'integrazione con btn-close e adeguare i tokens dove necessario */
 
-.sf-macro-wrapper {
 
-  --btn-close-background-color: var(--sf-macro-btn-close-background-color);
-  --btn-close-size: var(--sf-macro-btn-close-size);
+  .sf-macro-wrapper {
 
+    --btn-close-background-color: var(--sf-macro-btn-close-background-color);
+    --btn-close-size: var(--sf-macro-btn-close-size);
 
-  /* etichette campi righe successive alla prima */
-  @media (--media-large-viewport-up) {
-    &:not(.always-show-labels) {
-      .sf-macro-riga {
-        &:not(:first-child) {
-          .form-label, label {
-            display: none;
+
+    /* etichette campi righe successive alla prima */
+    @media (--media-large-viewport-up) {
+      &:not(.always-show-labels) {
+        .sf-macro-riga {
+          &:not(:first-child) {
+            .form-label, label {
+              display: none;
+            }
           }
         }
       }
     }
-  }
 
-  /*
+    /*
   // forza la visualizzazione delle etichette in tutte le righe
   // a partire dal breakpont successivo a quello indicato
   @each $brk in (xs, sm, md, lg, xl) {
@@ -34,66 +36,68 @@
   } // end @each
   */
 
-}
+  }
 
-.sf-macro-riga {
-  position: relative;
-  padding: var(--sf-macro-rows-padding);
-  margin-bottom: var(--sf-macro-rows-margin-block-end);
-  border: var(--sf-macro-rows-border);
-  border-radius: var(--sf-macro-rows-border-radius);
+  .sf-macro-riga {
+    position: relative;
+    padding: var(--sf-macro-rows-padding);
+    margin-bottom: var(--sf-macro-rows-margin-block-end);
+    border: var(--sf-macro-rows-border);
+    border-radius: var(--sf-macro-rows-border-radius);
 
-  &:nth-child(even) {
-    background-color: var(--sf-macro-rows-even-background-color);
-  }
+    &:nth-child(even) {
+      background-color: var(--sf-macro-rows-even-background-color);
+    }
 
 
-  &:hover {
-    background-color: var(--sf-macro-rows-hover-background-color);
-  }
+    &:hover {
+      background-color: var(--sf-macro-rows-hover-background-color);
+    }
 
-  .form-group {
-    margin-bottom: 0;
+    .form-group {
+      margin-bottom: 0;
 
-    &:has([type='checkbox']) {
-      align-self: center;
+      &:has([type='checkbox']) {
+        align-self: center;
+      }
     }
-  }
 
-  .grid {
-    row-gap: .8rem;
-  }
+    .grid {
+      row-gap: .8rem;
+    }
 
-} /* end .sf-macro-riga */
+  } /* end .sf-macro-riga */
 
 
-.sf-macro-close-btn { /* button */
+  .sf-macro-close-btn { /* button */
 
-  position: absolute;
-  top: var(--sf-macro-btn-close-position-top);
-  right: var(--sf-macro-btn-close-position-right);
-  bottom: var(--sf-macro-btn-close-position-bottom);
-  left: var(--sf-macro-btn-close-position-left);
+    position: absolute;
+    top: var(--sf-macro-btn-close-position-top);
+    right: var(--sf-macro-btn-close-position-right);
+    bottom: var(--sf-macro-btn-close-position-bottom);
+    left: var(--sf-macro-btn-close-position-left);
 
-  z-index: 1;
-  display: block;
+    z-index: 1;
+    display: block;
 
-  &[disabled], [disabled] & {
-    cursor: not-allowed;
-    opacity: .4;
-    transform: skew(-15deg);
-  }
+    &[disabled], [disabled] & {
+      cursor: not-allowed;
+      opacity: .4;
+      transform: skew(-15deg);
+    }
 
-  svg {
-    width: 100%;
-    aspect-ratio: 1;
+    svg {
+      width: 100%;
+      aspect-ratio: 1;
+    }
   }
-}
 
-.sf-macro-riga:has(.sf-macro-close-btn:not(:disabled):hover) {
+  .sf-macro-riga:has(.sf-macro-close-btn:not(:disabled):hover) {
 
-  outline: 2px dashed var(--status-danger-color);
-  .sf-macro-close-btn {
-    color: var(--status-danger-color);
+    outline: 2px dashed var(--status-danger-color);
+    .sf-macro-close-btn {
+      color: var(--status-danger-color);
+    }
   }
+
 }

package/src/components/slide-up-down-toggle/slide-up-down-toggle.module.css

@@ -1,5 +1,7 @@
-/*! minimo - Slide Up/Down Toggle */
-/*
+@layer components {
+
+  /*! minimo - Slide Up/Down Toggle */
+  /*
  * CSS Module for slide-up-down-toggle.js
  *
  * Three modern CSS features work together to animate height without JS measurement:
@@ -44,37 +46,37 @@
  *     style="--slide-duration: 300ms"
  */
 
-/* applied to the animation wrapper (generated or the target itself) */
-.slide {
-  interpolate-size: allow-keywords;
-  /*
+  /* applied to the animation wrapper (generated or the target itself) */
+  .slide {
+    interpolate-size: allow-keywords;
+    /*
    * !important overrides any external display: none (inline or CSS rule without !important).
    * .slide[data-slide='closed'] below has higher specificity (0,2,0 vs 0,1,0) so its
    * display: none !important still wins when the element is collapsed.
    */
-  /* stylelint-disable-next-line declaration-no-important */
-  display: block !important;
-  height: auto;
-  overflow: hidden;
-  transition:
-    height var(--slide-duration) ease,
-    display var(--slide-duration) allow-discrete;
-}
+    /* stylelint-disable-next-line declaration-no-important */
+    display: block !important;
+    height: auto;
+    overflow: hidden;
+    transition:
+      height var(--slide-duration) ease,
+      display var(--slide-duration) allow-discrete;
+  }
 
-/* collapsed state: height animates to 0, then display snaps to none */
-.slide[data-slide='closed'] {
-  /* stylelint-disable-next-line declaration-no-important */
-  display: none !important;
-  height: 0;
-}
+  /* collapsed state: height animates to 0, then display snaps to none */
+  .slide[data-slide='closed'] {
+    /* stylelint-disable-next-line declaration-no-important */
+    display: none !important;
+    height: 0;
+  }
 
-/*
+  /*
  * Entry state for the expand transition.
  * When .slide transitions from display:none → display:block, the browser needs
  * a starting value for height. @starting-style provides height:0 so the
  * animation plays from zero to auto instead of snapping instantly.
  */
-/*
+  /*
  * @starting-style targets only [data-slide='open'] — not :not([data-slide='closed']).
  * The broader selector would also match newly inserted wrappers (which have no
  * data-slide attribute), causing an unwanted entry animation from height:0 that
@@ -82,17 +84,19 @@
  * Using [data-slide='open'] restricts this to the expand animation triggered by
  * slideDown(), which always sets data-slide="open" on a previously hidden element.
  */
-@starting-style {
-  .slide[data-slide='open'] {
-    height: 0;
+  @starting-style {
+    .slide[data-slide='open'] {
+      height: 0;
+    }
   }
-}
 
-/*
+  /*
  * FOUC prevention — global, no class required.
  * Hides elements with data-slide="closed" before JS has run and added .slide.
  * Uses :global so CSS Modules does not hash this selector.
  */
-:global([data-slide='closed']) {
-  display: none;
+  :global([data-slide='closed']) {
+    display: none;
+  }
+
 }

package/src/components/snackbar/snackbar.module.css

@@ -1,109 +1,113 @@
-/*! minimo - Snackbar */
-
-/* purgecss start ignore */
-
-.snackbarOuter {
-  position: fixed;
-  inset-block: auto var(--size-md);
-  /* inset-inline: 0 auto; */
-  z-index: var(--z-index-snackbar);
-  inline-size: 20dvw;
-  min-inline-size: min(100%, 37ch);
-  padding: var(--snackbar-outer-padding-block) var(--snackbar-outer-padding-inline);
-  margin-inline: auto;
-  background-color: var(--snackbar-outer-background-color);
-  border: var(--snackbar-outer-border);
-  border-radius: var(--snackbar-outer-border-radius);
-  box-shadow: var(--snackbar-outer-drop-shadow);
-  animation: slide-in .3s cubic-bezier(.34, 1.56, .64, 1) forwards;
-
-  &.isHiding {
-    animation: slide-out .25s ease-in forwards;
-  }
-
-}
+@layer components {
+
+  /*! minimo - Snackbar */
+
+  /* purgecss start ignore */
+
+  .snackbarOuter {
+    position: fixed;
+    inset-block: auto var(--size-md);
+    /* inset-inline: 0 auto; */
+    z-index: var(--z-index-snackbar);
+    inline-size: 20dvw;
+    min-inline-size: min(100%, 37ch);
+    padding: var(--snackbar-outer-padding-block) var(--snackbar-outer-padding-inline);
+    margin-inline: auto;
+    background-color: var(--snackbar-outer-background-color);
+    border: var(--snackbar-outer-border);
+    border-radius: var(--snackbar-outer-border-radius);
+    box-shadow: var(--snackbar-outer-drop-shadow);
+    animation: slide-in .3s cubic-bezier(.34, 1.56, .64, 1) forwards;
+
+    &.isHiding {
+      animation: slide-out .25s ease-in forwards;
+    }
 
-.snackbar {
-  display: flex;
-  gap: var(--size-xs);
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--size-xs) var(--size-sm);
-  font-size: var(--snackbar-font-size);
-  color: var(--snackbar-text-color);
-  background-color: var(--snackbar-background-color);
-  border-radius: var(--snackbar-border-radius);
-
-  &::backdrop {
-    display: none;
   }
 
-  * {
-    overflow-wrap: break-word;
+  .snackbar {
+    display: flex;
+    gap: var(--size-xs);
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--size-xs) var(--size-sm);
+    font-size: var(--snackbar-font-size);
+    color: var(--snackbar-text-color);
+    background-color: var(--snackbar-background-color);
+    border-radius: var(--snackbar-border-radius);
+
+    &::backdrop {
+      display: none;
+    }
+
+    * {
+      overflow-wrap: break-word;
+    }
   }
-}
 
-/* .text {} */
+  /* .text {} */
 
-.action {
-  margin-inline-start: auto;
-}
-.closeBtn {
-  --_icon-bar-width: var(--snackbar-btn-close-size); /* --_icon-bar-width is defined in buttons/btn-close.css */
+  .action {
+    margin-inline-start: auto;
+  }
+  .closeBtn {
+    --_icon-bar-width: var(--snackbar-btn-close-size); /* --_icon-bar-width is defined in buttons/btn-close.css */
 
-  --btn-close-background-color: var(--snackbar-btn-close-background-color);
-  --btn-close-icon-color: var(--snackbar-btn-close-icon-color);
-  --btn-close-icon-bar-size: 2px;
-  --btn-close-border-color: var(--snackbar-btn-close-border-color);
-  --btn-close-border-width: var(--snackbar-btn-close-border-width);
-  --btn-close-border-radius: var(--snackbar-btn-close-border-radius);
+    --btn-close-background-color: var(--snackbar-btn-close-background-color);
+    --btn-close-icon-color: var(--snackbar-btn-close-icon-color);
+    --btn-close-icon-bar-size: 2px;
+    --btn-close-border-color: var(--snackbar-btn-close-border-color);
+    --btn-close-border-width: var(--snackbar-btn-close-border-width);
+    --btn-close-border-radius: var(--snackbar-btn-close-border-radius);
 
-  --btn-close-hover-background-color: var(--snackbar-btn-close-hover-background-color);
-  --btn-close-hover-border-color: var(--snackbar-btn-close-hover-border-color);
-  --btn-close-hover-icon-color: var(--snackbar-btn-close-hover-icon-color);
+    --btn-close-hover-background-color: var(--snackbar-btn-close-hover-background-color);
+    --btn-close-hover-border-color: var(--snackbar-btn-close-hover-border-color);
+    --btn-close-hover-icon-color: var(--snackbar-btn-close-hover-icon-color);
 
-  --btn-close-focus-outline-color: var(--snackbar-btn-close-focus-outline-color);
-  --btn-close-focus-outline-offset: var(--snackbar-btn-close-focus-outline-offset);
-  --btn-close-focus-outline-width: var(--snackbar-btn-close-focus-outline-width);
+    --btn-close-focus-outline-color: var(--snackbar-btn-close-focus-outline-color);
+    --btn-close-focus-outline-offset: var(--snackbar-btn-close-focus-outline-offset);
+    --btn-close-focus-outline-width: var(--snackbar-btn-close-focus-outline-width);
 
-  --btn-close-active-background-color: var(--snackbar-btn-close-active-background-color);
-  --btn-close-active-icon-color: var(--snackbar-btn-close-active-icon-color);
+    --btn-close-active-background-color: var(--snackbar-btn-close-active-background-color);
+    --btn-close-active-icon-color: var(--snackbar-btn-close-active-icon-color);
 
-  flex-shrink: 0;
-  border: none;
+    flex-shrink: 0;
+    border: none;
 
-  &:active {
-    scale: .6;
+    &:active {
+      scale: .6;
+    }
   }
-}
 
-@keyframes slide-in {
-  from {
-    opacity: 0;
-    translate: 0 calc(100% + var(--size-md));
+  @keyframes slide-in {
+    from {
+      opacity: 0;
+      translate: 0 calc(100% + var(--size-md));
+    }
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
   }
-  to {
-    opacity: 1;
-    translate: 0 0;
-  }
-}
 
-@keyframes slide-out {
-  from {
-    opacity: 1;
-    translate: 0 0;
+  @keyframes slide-out {
+    from {
+      opacity: 1;
+      translate: 0 0;
+    }
+    to {
+      opacity: 0;
+      translate: 0 calc(100% + var(--size-md));
+    }
   }
-  to {
-    opacity: 0;
-    translate: 0 calc(100% + var(--size-md));
-  }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .snackbarOuter,
-  .snackbarOuter.isHiding {
-    animation: none;
+  @media (prefers-reduced-motion: reduce) {
+    .snackbarOuter,
+    .snackbarOuter.isHiding {
+      animation: none;
+    }
   }
-}
 
-/* purgecss end ignore */
+  /* purgecss end ignore */
+
+}