@massimo-cassandro/minimo 1.21.1 → 1.21.3

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

@@ -1,103 +1,99 @@
-@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;
-    }
+/*! 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;
   }
 
-  .closeButton  {
+}
 
-    position: absolute;
-    top: calc(-1 * var(--mpopup-btn-close-size) / 3);
-    right: calc(-1 * var(--mpopup-btn-close-size) / 3);
-  }
+.closeButton  {
 
-  .contentWrapper {
-    display: flex;
-    flex: 1;
-    flex-flow: column nowrap;
-    gap: 0;
-    align-items: stretch;
-    justify-content: flex-start;
-    min-height: 0;
-  }
+  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;
+}
 
-  .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);
-    }
+.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);
   }
 
-  .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,16 +1,12 @@
-@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);
-  }
+/*! 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);
 }

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

@@ -1,103 +1,99 @@
-@layer components {
+/* TODO migliorare l'integrazione con btn-close e adeguare i tokens dove necessario */
 
-  /* TODO migliorare l'integrazione con btn-close e adeguare i tokens dove necessario */
 
+.sf-macro-wrapper {
 
-  .sf-macro-wrapper {
+  --btn-close-background-color: var(--sf-macro-btn-close-background-color);
+  --btn-close-size: var(--sf-macro-btn-close-size);
 
-    --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) {
-    &.sf-macro-show-label-down-#{$brk} {
-      @include media-breakpoint-down($brk) {
-        .form-label, label {
-          display: inline-block !important;
-        }
-      } // end @media
-    }
-  } // end @each
-  */
-
+  /*
+// 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) {
+  &.sf-macro-show-label-down-#{$brk} {
+    @include media-breakpoint-down($brk) {
+      .form-label, label {
+        display: inline-block !important;
+      }
+    } // end @media
   }
+} // 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);
+}
 
-    &:nth-child(even) {
-      background-color: var(--sf-macro-rows-even-background-color);
-    }
+.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);
+  }
 
-    &:hover {
-      background-color: var(--sf-macro-rows-hover-background-color);
-    }
 
-    .form-group {
-      margin-bottom: 0;
+  &:hover {
+    background-color: var(--sf-macro-rows-hover-background-color);
+  }
+
+  .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,102 +1,98 @@
-@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:
+*
+*   interpolate-size: allow-keywords
+*     Enables transitioning to/from `height: auto` — the browser resolves the
+*     intrinsic size, so JS never reads offsetHeight or scrollHeight.
+*
+*   transition-behavior: allow-discrete  (via `allow-discrete` in shorthand)
+*     Allows `display` to participate in a transition. On collapse: height
+*     animates to 0, then `display: none` snaps at the very end. On expand:
+*     `display: block` snaps at the very start, then height animates to auto.
+*
+*   @starting-style
+*     Defines the initial state for elements entering from `display: none`.
+*     Without it, the browser has no "before" value to transition from and
+*     the expand animation would not play.
+*
+* ─── Usage ────────────────────────────────────────────────────────────────────
+*
+*   wrap: true (default)
+*     JS generates a wrapper <div class="slide"> around the target.
+*     The target element is completely free — any display, padding, margin.
+*     No changes to HTML required; initial open state is the default.
+*     For an element that should start collapsed, add data-slide="closed" to
+*     the target BEFORE calling any slide function — JS transfers it to the wrapper.
+*
+*   wrap: false
+*     JS adds .slide directly to the target element.
+*     The target must be a plain block wrapper (no padding, no flex/grid).
+*     All layout, padding and margin must live on an inner child element.
+*     Initial collapsed state: add data-slide="closed" directly to the target in HTML.
+*
+* ─── FOUC prevention ──────────────────────────────────────────────────────────
+*
+*   Elements with data-slide="closed" are hidden via a :global rule below,
+*   so they start invisible even before JS adds the .slide class.
+*
+* ─── Duration override ────────────────────────────────────────────────────────
+*
+*   Set --slide-duration on the element or pass `duration` in JS options:
+*     style="--slide-duration: 300ms"
+*/
 
-  /*! minimo - Slide Up/Down Toggle */
+/* applied to the animation wrapper (generated or the target itself) */
+.slide {
+  interpolate-size: allow-keywords;
   /*
- * CSS Module for slide-up-down-toggle.js
- *
- * Three modern CSS features work together to animate height without JS measurement:
- *
- *   interpolate-size: allow-keywords
- *     Enables transitioning to/from `height: auto` — the browser resolves the
- *     intrinsic size, so JS never reads offsetHeight or scrollHeight.
- *
- *   transition-behavior: allow-discrete  (via `allow-discrete` in shorthand)
- *     Allows `display` to participate in a transition. On collapse: height
- *     animates to 0, then `display: none` snaps at the very end. On expand:
- *     `display: block` snaps at the very start, then height animates to auto.
- *
- *   @starting-style
- *     Defines the initial state for elements entering from `display: none`.
- *     Without it, the browser has no "before" value to transition from and
- *     the expand animation would not play.
- *
- * ─── Usage ────────────────────────────────────────────────────────────────────
- *
- *   wrap: true (default)
- *     JS generates a wrapper <div class="slide"> around the target.
- *     The target element is completely free — any display, padding, margin.
- *     No changes to HTML required; initial open state is the default.
- *     For an element that should start collapsed, add data-slide="closed" to
- *     the target BEFORE calling any slide function — JS transfers it to the wrapper.
- *
- *   wrap: false
- *     JS adds .slide directly to the target element.
- *     The target must be a plain block wrapper (no padding, no flex/grid).
- *     All layout, padding and margin must live on an inner child element.
- *     Initial collapsed state: add data-slide="closed" directly to the target in HTML.
- *
- * ─── FOUC prevention ──────────────────────────────────────────────────────────
- *
- *   Elements with data-slide="closed" are hidden via a :global rule below,
- *   so they start invisible even before JS adds the .slide class.
- *
- * ─── Duration override ────────────────────────────────────────────────────────
- *
- *   Set --slide-duration on the element or pass `duration` in JS options:
- *     style="--slide-duration: 300ms"
- */
+  * !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;
+}
 
-  /* 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;
-  }
+/* 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;
+/*
+* 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
+* conflicts with the first collapse call and makes the transition invisible.
+* 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;
   }
+}
 
-  /*
- * 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
- * conflicts with the first collapse call and makes the transition invisible.
- * 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;
-    }
-  }
-
-  /*
- * 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;
-  }
-
+/*
+* 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;
 }