@massimo-cassandro/minimo 1.17.0 → 1.18.0

package/src/components/unsplash-page/unsplash-page.module.css

@@ -1,47 +1,49 @@
+/*! minimo - Unsplash Page */
 /*
-  PERSONALIZZAZIONE
-  custom properties (valori di default, vedi /design-tokens/_src/components/unsplash-page.minimo.tokens.mjs):
-
-  Basic props:
-  --up-bg-color: hsl(0deg 0% 0% / .7);
-  --up-text-color: #fff;
-  --up-line-height: 1.4;
-  --up-font-family: sans-serif;
-  --up-font-size: 1rem;
-  --up-font-variation-settings: unset;
-  --up-font-weight: 400;
-
-  Credits box
-  --up-credits-font-size: .8em;
-  --up-credits-font-weight: 400;
-  --up-credits-line-height: 1.3;
-
-  H1
-  --up-h1-color: var(--up-text-color);
-  --up-h1-font-size: 2rem;
-  --up-h1-font-variation-settings: unset;
-  --up-h1-font-weight: 700;
-  --up-h1-line-height: 1.25;
-
-  icons:
-  --up-icon-box-bg: var(--up-link-color);
-  --up-icon-fill-color: #333;
-  --up-icon-hover-box-bg: #fff;
-
-  links:
-  --up-link-color: #fc0;
-  --up-link-decoration: none;
-  --up-link-hover-color: #fc0;
-  --up-link-hover-decoration: underline;
-
-  loader:
-  --up-loader-color: hsl(0deg 0% 100% / .6);
+
+custom propeties:
+
+--uspg-bg-color: hsl(0deg 0% 0% / .7);
+--uspg-credits-font-size: var(--font-size-xs);
+--uspg-credits-font-weight: var(--font-weight-regular);
+--uspg-credits-line-height: var(--line-height-xs);
+--uspg-font-family: var(--font-family);
+--uspg-font-size: var(--font-size-base);
+--uspg-font-variation-settings: unset;
+--uspg-font-weight: var(--font-weight-regular);
+--uspg-h1-color: var(--uspg-text-color);
+--uspg-h1-font-size: var(--font-size-xl);
+--uspg-h1-font-variation-settings: unset;
+--uspg-h1-font-weight: var(--font-weight-bold);
+--uspg-h1-line-height: var(--line-height-xs);
+--uspg-icon-box-bg: var(--uspg-link-color);
+--uspg-icon-fill-color: #333;
+--uspg-icon-hover-box-bg: #fff;
+--uspg-line-height: var(--line-height-sm);
+--uspg-link-color: #fc0;
+--uspg-link-decoration: none;
+--uspg-link-hover-color: #fc0;
+--uspg-link-hover-decoration: underline;
+--uspg-loader-color: hsl(0deg 0% 100% / .6);
+--uspg-text-color: #fff;
 
 */
 
 
 /* stylelint-disable declaration-no-important */
 
+html, body {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+
+}
+
+*, *::before, *::after {
+  box-sizing: border-box !important;
+}
+
+
 .bodyNoScroll {
   padding: 0 !important;
   margin: 0 !important;
@@ -51,35 +53,35 @@
 }
 /* stylelint-enable declaration-no-important */
 
-.upContainer {
+.container {
 
   position: relative;
   width: 100dvw;
   height: 100dvh;
 
 
-  font-family: var(--up-font-family, sans-serif);
-  font-size: var(--up-font-size, 1rem);
-  font-variation-settings: var(--up-font-variation-settings, unset);
-  font-weight: var(--up-font-weight, 400);
-  line-height: var(--up-line-height, 1.4);
+  font-family: var(--uspg-font-family, sans-serif);
+  font-size: var(--uspg-font-size, 1rem);
+  font-variation-settings: var(--uspg-font-variation-settings, unset);
+  font-weight: var(--uspg-font-weight, 400);
+  line-height: var(--uspg-line-height, 1.4);
 
   background-color: #333;
 
   a:is(:link, :visited) {
-    color: var(--up-link-color, #fc0);
-    text-decoration: var(--up-link-decoration, none);
+    color: var(--uspg-link-color, #fc0);
+    text-decoration: var(--uspg-link-decoration, none);
 
     @media (hover: hover) {
       &:hover {
-        color: var(--up-link-hover-color, #fc0);
-        text-decoration: var(--up-link-hover-decoration, underline);
+        color: var(--uspg-link-hover-color, #fc0);
+        text-decoration: var(--uspg-link-hover-decoration, underline);
       }
     }
   }
 }
 
-.upCanvas {
+.canvas {
   position: absolute;
   /* z-index: -1; */
   width: 100%;
@@ -101,7 +103,7 @@
 
 }
 
-.unsplashPhoto, .upCredits {
+.unsplashPhoto, .credits {
   opacity: 0;
   transition: opacity .3s linear;
 
@@ -110,7 +112,7 @@
   }
 }
 
-.upMessageBox {
+.messageBox {
   position: absolute;
   bottom: 0;
   display: flex;
@@ -122,12 +124,12 @@
   overflow: hidden;
 }
 
-.upMessage, .upCredits {
-  color: var(--up-text-color, #fff);
-  background-color: var(--up-bg-color, hsl(0deg 0% 0% / .7));
+.message, .credits {
+  color: var(--uspg-text-color, #fff);
+  background-color: var(--uspg-bg-color, hsl(0deg 0% 0% / .7));
 }
 
-.upMessage {
+.message {
   position: relative;
   width: max-content;
   max-width: 90dvw;
@@ -137,11 +139,11 @@
 
   h1 {
     margin: 0;
-    font-size: var(--up-h1-font-size, 2rem);
-    font-variation-settings: var(--up-h1-font-variation-settings, unset);
-    font-weight: var(--up-h1-font-weight, 700);
-    line-height: var(--up-h1-line-height, 1.25);
-    color: var(--up-h1-color, var(--up-text-color, #fff));
+    font-size: var(--uspg-h1-font-size, 2rem);
+    font-variation-settings: var(--uspg-h1-font-variation-settings, unset);
+    font-weight: var(--uspg-h1-font-weight, 700);
+    line-height: var(--uspg-h1-line-height, 1.25);
+    color: var(--uspg-h1-color, var(--uspg-text-color, #fff));
   }
 
   p {
@@ -152,11 +154,11 @@
     max-width: 60dvw;
   }
 
-  .upBackLink {
+  .backLink {
     margin-top: 1rem;
   }
 
-  .upArrowWrapper {
+  .arrowWrapper {
     --_arrow-size: 2rem;
     --_arrow-position: calc(var(--_arrow-size) * .25 * -1);
 
@@ -165,9 +167,9 @@
     left: var(--_arrow-position);
     width: var(--_arrow-size);
     height: var(--_arrow-size);
-    color: var(--up-icon-fill-color, #333);
+    color: var(--uspg-icon-fill-color, #333);
     cursor: w-resize;
-    background-color: var(--up-icon-box-bg, var(--up-link-color, #fc0));
+    background-color: var(--uspg-icon-box-bg, var(--uspg-link-color, #fc0));
     border-radius: 50%;
     /* transition: all .2s ease-in-out; */
     /* duration | easing-function | delay | iteration-count | direction | name */
@@ -175,7 +177,7 @@
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--up-icon-hover-box-bg, #fff);
+        background-color: var(--uspg-icon-hover-box-bg, #fff);
       }
     }
 
@@ -188,7 +190,7 @@
 
   &.hidden {
     translate: calc(-1 * (50dvw + 50% - 2rem));
-    .upArrowWrapper {
+    .arrowWrapper {
       right: var(--_arrow-position);
       left: auto;
       cursor: e-resize;
@@ -205,7 +207,7 @@
   100% { transform: translateX(0); }
 }
 
-.upCredits {
+.credits {
   display: flex;
   flex-flow: column wrap;
   gap: .5rem;
@@ -213,9 +215,9 @@
   justify-content: center;
   width: 100%;
   padding: .2rem 1rem;
-  font-size: var(--up-credits-font-size, .8em);
-  font-weight: var(--up-credits-font-weight, 400);
-  line-height: var(--up-credits-line-height, 1.3);
+  font-size: var(--uspg-credits-font-size, .8em);
+  font-weight: var(--uspg-credits-font-weight, 400);
+  line-height: var(--uspg-credits-line-height, 1.3);
 
 
   @media screen and (min-width: 768px) {
@@ -243,19 +245,19 @@
     border-radius: 50%;
 
     &:active {
-      color: var(--up-icon-fill-color, #333);
-      background-color: var(--up-icon-box-bg, var(--up-link-color, #fc0));
+      color: var(--uspg-icon-fill-color, #333);
+      background-color: var(--uspg-icon-box-bg, var(--uspg-link-color, #fc0));
 
       img {
-        filter: none;
         opacity: 1;
+        filter: none;
       }
     }
   }
   img {
     display: block;
-    filter: brightness(0) invert(1);
     opacity: .6;
+    filter: brightness(0) invert(1);
   }
 
   @media (hover: hover) {
@@ -266,7 +268,7 @@
       }
     }
 
-    &.upShowOnHover {
+    &.showOnHover {
       opacity: 0;
       .show &:hover {
         opacity: 1;
@@ -277,7 +279,7 @@
 
 
 /* https://wweb.dev/resources/loader-generator/ */
-.upLoaderWrapper {
+.loaderWrapper {
 
   position: absolute;
   top: 40%;
@@ -285,10 +287,10 @@
   /* z-index: -1; */
   transform: translate(-50%, -50%);
 }
-.upLoader {
+.loader {
   width: 80px;
   aspect-ratio: 1;
-  background: conic-gradient(#000, var(--up-loader-color, hsl(0deg 0% 100% / .6))) content-box;
+  background: conic-gradient(#000, var(--uspg-loader-color, hsl(0deg 0% 100% / .6))) content-box;
   border-radius: 50%;
   /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-mask:

package/src/custom-properties.css

@@ -182,6 +182,8 @@
   --headings-h4-font-size: var(--font-size-md);
   --headings-line-height: var(--line-height-xs);
   --headings-text-align: inherit;
+  --inner-nav-gap: var(--size-lg);
+  --inner-nav-margin-block: var(--size-base);
   --layout-container-max-width: 80rem;
   --line-height-base: 1.5;
   --line-height-sm: 1.4;
@@ -330,29 +332,29 @@
   --text-negative: #fff;
   --text-selected-background-color: #ddd;
   --text-selected-color: var(--body-text);
-  --up-bg-color: hsl(0deg 0% 0% / .7);
-  --up-credits-font-size: var(--font-size-xs);
-  --up-credits-font-weight: var(--font-weight-regular);
-  --up-credits-line-height: var(--line-height-xs);
-  --up-font-family: var(--font-family);
-  --up-font-size: var(--font-size-base);
-  --up-font-variation-settings: unset;
-  --up-font-weight: var(--font-weight-regular);
-  --up-h1-color: var(--up-text-color);
-  --up-h1-font-size: var(--font-size-xl);
-  --up-h1-font-variation-settings: unset;
-  --up-h1-font-weight: var(--font-weight-bold);
-  --up-h1-line-height: var(--line-height-xs);
-  --up-icon-box-bg: var(--up-link-color);
-  --up-icon-fill-color: #333;
-  --up-icon-hover-box-bg: #fff;
-  --up-line-height: var(--line-height-sm);
-  --up-link-color: #fc0;
-  --up-link-decoration: none;
-  --up-link-hover-color: #fc0;
-  --up-link-hover-decoration: underline;
-  --up-loader-color: hsl(0deg 0% 100% / .6);
-  --up-text-color: #fff;
+  --uspg-bg-color: hsl(0deg 0% 0% / .7);
+  --uspg-credits-font-size: var(--font-size-xs);
+  --uspg-credits-font-weight: var(--font-weight-regular);
+  --uspg-credits-line-height: var(--line-height-xs);
+  --uspg-font-family: var(--font-family);
+  --uspg-font-size: var(--font-size-base);
+  --uspg-font-variation-settings: unset;
+  --uspg-font-weight: var(--font-weight-regular);
+  --uspg-h1-color: var(--uspg-text-color);
+  --uspg-h1-font-size: var(--font-size-xl);
+  --uspg-h1-font-variation-settings: unset;
+  --uspg-h1-font-weight: var(--font-weight-bold);
+  --uspg-h1-line-height: var(--line-height-xs);
+  --uspg-icon-box-bg: var(--uspg-link-color);
+  --uspg-icon-fill-color: #333;
+  --uspg-icon-hover-box-bg: #fff;
+  --uspg-line-height: var(--line-height-sm);
+  --uspg-link-color: #fc0;
+  --uspg-link-decoration: none;
+  --uspg-link-hover-color: #fc0;
+  --uspg-link-hover-decoration: underline;
+  --uspg-loader-color: hsl(0deg 0% 100% / .6);
+  --uspg-text-color: #fff;
   --z-index-overlay: 99;
   --z-index-snackbar: 100;
 }

package/src/utilities/better-text.js

@@ -1,4 +1,5 @@
 // @ts-check
+/*! minimo - Better Text */
 
 // Italian particles/articles (plus a few English and topographic terms) whose casing is
 // enforced and after which spaces are turned into non-breaking spaces. Hoisted to module

package/src/utilities/build-picture-tag.js

@@ -1,3 +1,4 @@
+/*! minimo - buildPictureTag */
 import { classnames } from './classnames.js';
 
 /** @typedef {import('./dom-builder/dom-builder.js').DomBuilderItem} DomBuilderItem */

package/src/utilities/classnames.js

@@ -1,3 +1,4 @@
+/*! minimo - Classnames */
 /** @typedef {string | null | undefined | false | 0} ClassValue */
 
 /**

package/src/utilities/cookies.js

@@ -1,4 +1,5 @@
 // @ts-check
+/*! minimo - Cookies */
 
 /**
  * Returns the value of a cookie by name.

package/src/utilities/create-id.js

@@ -1,3 +1,4 @@
+/*! minimo - Create Id */
 import { stripTags } from './strip-tags.js';
 
 /**

package/src/utilities/disable-btns-on-submit.js

@@ -1,3 +1,4 @@
+/*! minimo - Disable Buttons On Submit */
 /**
  * Disables all `[type=submit]` and `[type=button]` buttons on form submit.
  *

package/src/utilities/dom-builder/dom-builder.js

@@ -1,3 +1,4 @@
+/*! minimo - DOM Builder */
 import { domBuilderBasicSetup } from './domBuilderBasicSetup.js';
 import { parseDomString } from './parseDomString.js';
 
@@ -18,7 +19,7 @@ import { parseDomString } from './parseDomString.js';
  *   supported, falling back to raw `innerHTML` on browsers without it.
  * @property {boolean} [condition=true] - When false, the element is skipped.
  * @property {function(HTMLElement): void} [callback] - Callback invoked after the element is created.
- * @property {DomBuilderItem[]} [children] - Configuration array for child elements.
+ * @property {Array<DomBuilderItem|string>} [children] - Configuration array for child elements. Accepts strings (shorthand per `parseDomString`) and/or configuration objects.
  */
 
 /**

package/src/utilities/enable-submit-btns.js

@@ -1,3 +1,4 @@
+/*! minimo - Enable Submit Buttons */
 /**
  * Re-enables all submit and non-disabled button elements within the given context.
  * @param {Document | Element} [context=document]

package/src/utilities/escape-html.js

@@ -1,3 +1,4 @@
+/*! minimo - Escape HTML */
 /** @type {Record<string, string>} */
 const ESCAPE_MAP = {
   '&'  : '&amp;',

package/src/utilities/generate-pwd.js

@@ -1,3 +1,4 @@
+/*! minimo - Generate Password */
 /**
  * Generates a random password using uppercase letters and digits,
  * excluding visually ambiguous characters (O, I, 0).

package/src/utilities/linked-dates.js

@@ -1,4 +1,5 @@
 // @ts-check
+/*! minimo - Linked Dates */
 
 /**
  * Links date/datetime-local input fields so that one field constrains

package/src/utilities/parse-file-size.js

@@ -1,4 +1,5 @@
 // @ts-check
+/*! minimo - Parse File Size */
 
 /**
  * Converts a file size in bytes to a human readable string,

package/src/utilities/random-id.js

@@ -1,4 +1,5 @@
 // @ts-check
+/*! minimo - Random Id */
 
 /**
  * Generates a random ID string.

package/src/utilities/relative-date.js

@@ -1,4 +1,5 @@
 // @ts-check
+/*! minimo - Relative Date */
 
 // Displays a date in relative form to the current date if within the set limits.
 // Relative dates are automatically updated every minute.

package/src/utilities/sentence-case.js

@@ -1,3 +1,4 @@
+/*! minimo - Sentence Case */
 /**
  * Converts a string to sentence case (first letter uppercase, rest lowercase).
  * @param {string | null | undefined} str

package/src/utilities/strip-tags.js

@@ -1,3 +1,4 @@
+/*! minimo - Strip Tags */
 /**
  * Strips HTML tags from a string.
  * @param {string | null | undefined} str

package/src/utilities/title-case.js

@@ -1,3 +1,4 @@
+/*! minimo - Title Case */
 /**
  * Converts a string to title case (first letter of each word uppercase, rest lowercase).
  * @param {string | null | undefined} str

package/src/utilities/truncate-string.js

@@ -1,5 +1,6 @@
 
 // @ts-check
+/*! minimo - Truncate String */
 
 /**
  * Truncates a string to the desired length adding an option suffix

package/src/utilities/validation-error-class.js

@@ -1,3 +1,4 @@
+/*! minimo - Validation Error */
 // usage:
 // throw new ValidationError('Duplicate values found', errorFields);