mypgs 1.6.0 → 2.0.0

package/dist/css/index.css

@@ -1,7 +1,6 @@
 /*!*****************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./assets/scss/index.scss ***!
   \*****************************************************************************************************************/
-@charset "UTF-8";
 /*
 |--------------------------------------------------------------------------
 | Base
@@ -24,8 +23,8 @@
   --text-shadow: 0px 0px 50px #000000;
   --backdrop: #0000003e;
   --blur: blur(20px);
-  --page-top: calc(var(--heightOfHeader) + (var(--gap-elements)*2));
-  --page-topScroll: calc(var(--heightOfHeaderScroll) + (var(--gap-elements)*2));
+  --page-top: calc(var(--heightOfHeader) + var(--heightOfHeader));
+  --page-topScroll: calc(var(--heightOfHeaderScroll) + var(--heightOfHeader));
   --page-width: 1280px;
   --page-space: clamp(var(--padding-page), calc((100% - var(--section-width)) / 2 + var(--padding-page)), 100%);
   --gap-texts: 1.0rem;
@@ -107,14 +106,14 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  scroll-margin-top: calc(var(--heightOfHeader) + 5vh);
+  scroll-margin-top: var(--page-topScroll);
 }
 
 [pgs~=htmlBase] * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  scroll-margin-top: calc(var(--heightOfHeader) + 5vh);
+  scroll-margin-top: var(--page-topScroll);
 }
 
 [pgs~=htmlBase]:root,
@@ -2139,9 +2138,12 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   }
 }
 [pgs~=initP] [pgs~=pageShell] {
-  --pageShell-aside-sticky-top: 0;
+  --pageShell-width: calc(var(--pageShell-content-width) + (var(--padding-page) * 2));
+  --pageShell-content-width: var(--page-width);
   --pageShell-aside-width: 400px;
-  --pageShell-content-width: 500px;
+  --pageShell-aside-sticky-top: 0;
+  --pageShell-paddingInline: var(--padding-page);
+  --pageShell-paddingTop: var(--page-top);
   --pageShell-gap: var(--gap-elements);
   display: flex;
   flex-wrap: wrap;
@@ -2150,17 +2152,17 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   align-items: start;
   justify-content: center;
   width: 100%;
-  max-width: calc(var(--page-width) + var(--padding-page) * 2);
-  padding-inline: var(--padding-page);
+  max-width: var(--pageShell-width);
+  padding-inline: var(--pageShell-paddingInline);
   container-type: inline-size;
 }
 [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-content] {
   grid-area: content;
-  flex: 999 1 var(--pageShell-content-width);
-  min-width: min(100%, var(--pageShell-content-width));
-  width: min(100%, var(--page-width));
-  max-width: var(--page-width);
-  padding-top: var(--page-top);
+  flex: 999 1 500px;
+  min-width: min(100%, 500px);
+  width: min(100%, var(--pageShell-content-width));
+  max-width: var(--pageShell-content-width);
+  padding-top: var(--pageShell-paddingTop);
   padding-bottom: var(--gap-elements);
 }
 [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-aside] {
@@ -2178,7 +2180,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
   scrollbar-width: none;
-  padding-top: var(--page-top);
+  padding-top: var(--pageShell-paddingTop);
   padding-bottom: var(--gap-elements);
   flex: 1 1 var(--pageShell-aside-width);
   min-width: min(100%, var(--pageShell-aside-width));
@@ -2203,7 +2205,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
   scrollbar-width: none;
-  padding-top: var(--page-top);
+  padding-top: var(--pageShell-paddingTop);
   padding-bottom: calc(var(--gap-elements) * 2);
 }
 [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-aside] [pgs~=pageShell-aside-scroll]::-webkit-scrollbar {
@@ -2230,10 +2232,10 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   grid-area: asideRight;
 }
 [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside]) {
-  max-width: calc(var(--page-width) + var(--pageShell-aside-width) + var(--pageShell-gap) + var(--padding-page) * 2);
+  --pageShell-width: calc(var(--pageShell-content-width) + var(--pageShell-aside-width) + var(--pageShell-gap) + (var(--padding-page) * 2));
 }
 [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside] ~ [pgs~=pageShell-aside]) {
-  max-width: calc(var(--page-width) + var(--pageShell-aside-width) * 2 + var(--pageShell-gap) * 2 + var(--padding-page) * 2);
+  --pageShell-width: calc(var(--pageShell-content-width) + (var(--pageShell-aside-width) * 2) + (var(--pageShell-gap) * 2) + (var(--padding-page) * 2));
 }
 @container (max-width: calc(400px + 500px + 4rem)) {
   [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside]) [pgs~=pageShell-aside] {
@@ -2272,7 +2274,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 @container (max-width: calc(400px + 500px + 400px + (4rem * 2))) {
   [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-aside]):has(> [pgs~=pageShell-content] + [pgs~=pageShell-aside]) {
     display: grid;
-    grid-template-columns: var(--pageShell-aside-width) minmax(0, var(--page-width));
+    grid-template-columns: var(--pageShell-aside-width) minmax(0, var(--pageShell-content-width));
     grid-template-areas: "asideLeft content" "asideLeft asideRight";
     justify-content: center;
   }
@@ -2315,7 +2317,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 }
 @container (max-width: 500px) {
   [pgs~=initP] [pgs~=pageShell] {
-    padding-top: var(--page-top);
+    padding-top: var(--pageShell-paddingTop);
   }
   [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-content],
   [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-aside] {
@@ -5021,22 +5023,22 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   background-color: var(--color-primary);
   color: var(--color-white);
 }
-[pgs~=initP] [pgs~=formError][data-form-status=error] [data-form-field-status=error]:not([type=checkbox], [type=radio]) {
+[pgs~=initP] [pgs~=formValidate][pgs-option~=error] [pgs-option~=error]:not([type=checkbox], [type=radio]) {
   outline: solid 3px var(--color-error) !important;
 }
-[pgs~=initP] [pgs~=formError][data-form-status=error] [data-form-field-status=error]:not([type=checkbox], [type=radio])::before {
-  content: "Questo campo è obbligatorio";
+[pgs~=initP] [pgs~=formValidate][pgs-option~=error] [pgs-option~=error]:not([type=checkbox], [type=radio])::before {
+  content: "This field is required";
   color: var(--color-error);
   font-weight: 500;
   font-size: 1.7rem;
 }
-[pgs~=initP] [pgs~=formError][data-form-status=error] label:has(+ [data-form-field-status=error], [data-form-field-status=error]):has(input[type=checkbox]) {
+[pgs~=initP] [pgs~=formValidate][pgs-option~=error] label:has(+ [pgs-option~=error], [pgs-option~=error]):has(input[type=checkbox]) {
   background-color: var(--color-error) !important;
   padding: 6px;
   margin-left: -6px;
   border-radius: 10px;
 }
-[pgs~=initP] [pgs~=formError][data-form-status=error] fieldset:has(input[type=radio][data-form-field-status=error]) legend {
+[pgs~=initP] [pgs~=formValidate][pgs-option~=error] fieldset:has(input[type=radio][pgs-option~=error]) legend {
   --label-background: var(--color-error) !important;
 }
 [pgs~=initP] [pgs~=menu] ul {
@@ -6346,8 +6348,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   border-radius: 50%;
   background: currentColor;
 }
-[pgs~=initP] [pgs~=notification],
-[pgs~=initP] [pgs~=toast] {
+[pgs~=initP] [pgs~=notification] {
   display: flex;
   flex-direction: column;
   gap: var(--gap-texts);
@@ -6357,8 +6358,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   isolation: isolate;
   max-height: 80vh;
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element],
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element] {
   --notification-background: var(--color-box);
   --notification-background-timer: color-mix(in srgb, var(--color-box) 95%, var(--color-black) 5%);
   --notification-color: unset;
@@ -6383,22 +6383,18 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   position: relative;
 }
 @media (max-width: 430px) {
-  [pgs~=initP] [pgs~=notification] [pgs~=notification-element],
-  [pgs~=initP] [pgs~=toast] [pgs~=notification-element] {
+  [pgs~=initP] [pgs~=notification] [pgs~=notification-element] {
     padding: calc(var(--padding) / 1.5);
   }
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element] [pgs~=notification-element-title],
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] [pgs~=notification-element-title] {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element] [pgs~=notification-element-title] {
   font-weight: 700;
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element] [pgs~=notification-element-content],
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] [pgs~=notification-element-content] {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element] [pgs~=notification-element-content] {
   font-weight: 400;
   font-size: 1.4rem;
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element]::before,
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element]::before {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element]::before {
   content: "";
   width: 0%;
   height: 100%;
@@ -6427,9 +6423,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   }
 }
 [pgs~=initP] [pgs~=notification] [pgs~=notification-element] p,
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element] > i,
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] p,
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] > i {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element] > i {
   --fa-primary-color: var(--notification-shadow-color);
   --fa-secondary-color: color-mix(in srgb, var(--notification-shadow-color) 50%, var(--color-white) 50%);
   color: var(--notification-color);
@@ -6438,14 +6432,11 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   line-height: unset;
 }
 [pgs~=initP] [pgs~=notification] [pgs~=notification-element] p:is(i),
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element] > i:is(i),
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] p:is(i),
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] > i:is(i) {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element] > i:is(i) {
   color: var(--notification-shadow-color);
   font-size: 2.5rem;
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element] button,
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] button {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element] button {
   opacity: 0;
   position: absolute;
   right: 2px;
@@ -6453,61 +6444,46 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   scale: 0.75;
   z-index: 1;
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element] button:focus,
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element] button:focus {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element] button:focus {
   opacity: 1;
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element]:is(a),
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element]:is(a) {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element]:is(a) {
   border-color: var(--color-primary-soft);
   border: var(--border);
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element]:is(a):hover,
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element]:is(a):hover {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element]:is(a):hover {
   background-color: var(--color-white);
   text-decoration: none;
   color: var(--color-black);
 }
-[pgs~=initP] [pgs~=notification] [pgs~=notification-element]:focus-visible button, [pgs~=initP] [pgs~=notification] [pgs~=notification-element]:hover button,
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element]:focus-visible button,
-[pgs~=initP] [pgs~=toast] [pgs~=notification-element]:hover button {
+[pgs~=initP] [pgs~=notification] [pgs~=notification-element]:focus-visible button, [pgs~=initP] [pgs~=notification] [pgs~=notification-element]:hover button {
   opacity: 1;
 }
-[pgs~=initP] [pgs~=notification] [pgs-state~=success],
-[pgs~=initP] [pgs~=toast] [pgs-state~=success] {
+[pgs~=initP] [pgs~=notification] [pgs-state~=success] {
   --notification-background: var(--color-success-background);
   --notification-background-timer: color-mix(in srgb, var(--color-success-background) 70%, var(--color-white) 30%);
   --notification-shadow-color: var(--color-success);
 }
-[pgs~=initP] [pgs~=notification] [pgs-state~=error],
-[pgs~=initP] [pgs~=toast] [pgs-state~=error] {
+[pgs~=initP] [pgs~=notification] [pgs-state~=error] {
   --notification-background: var(--color-error-background);
   --notification-background-timer: color-mix(in srgb, var(--color-error-background) 70%, var(--color-white) 30%);
   --notification-shadow-color: var(--color-error);
 }
-[pgs~=initP] [pgs~=notification] [pgs-state~=warning],
-[pgs~=initP] [pgs~=toast] [pgs-state~=warning] {
+[pgs~=initP] [pgs~=notification] [pgs-state~=warning] {
   --notification-background: var(--color-warning-background);
   --notification-background-timer: color-mix(in srgb, var(--color-warning-background) 70%, var(--color-white) 30%);
   --notification-shadow-color: var(--color-warning);
 }
-[pgs~=initP] [pgs~=notification] [pgs-state~=info],
-[pgs~=initP] [pgs~=toast] [pgs-state~=info] {
+[pgs~=initP] [pgs~=notification] [pgs-state~=info] {
   --notification-background: var(--color-box);
 }
-[pgs~=initP] [pgs~=notification] {
-  top: calc(var(--heightOfHeader) + 10px);
-  right: 10px;
-}
-[pgs~=initP] body:has(header[data-header-scroll=true]) [pgs~=notification] {
-  top: 0;
+[pgs~=initP] [pgs~=notification]:not([pgs-option~=toast]) {
+  top: calc(var(--heightOfHeaderScroll) + 1rem);
+  right: 1rem;
 }
-[pgs~=initP] [pgs~=toast] {
+[pgs~=initP] [pgs~=notification][pgs-option~=toast] {
   inset-inline: 0;
-  top: calc(var(--heightOfHeader) + 10px);
-}
-[pgs~=initP] body:has(header[data-header-scroll=true]) [pgs~=toast] {
-  top: 10px;
+  top: calc(var(--heightOfHeaderScroll) + 1rem);
 }
 [pgs~=initP] [pgs~=tooltip][pgs~=dropdown] {
   --dropdown-position-right: center;
@@ -6522,9 +6498,9 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   --search-suggestions-color: var(--color-text);
   --search-suggestions-border: var(--border-complete);
   --search-suggestions-borderRadius: var(--border-radius-input);
-  --search-suggestions-box-shadow: var(--box-shadow);
+  --search-suggestions-boxShadow: var(--box-shadow);
   --search-suggestions-gap: 0;
-  --search-suggestions-max-height: 32rem;
+  --search-suggestions-maxHeight: 32rem;
   --search-suggestions-offset: .5rem;
   --search-suggestions-padding: .5rem;
   --search-suggestions-item-padding: 1rem;
@@ -6535,15 +6511,15 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   gap: var(--gap-texts);
   flex-direction: row;
   flex-wrap: nowrap;
+  --button-size: 1.2rem;
+  --button-border: unset;
+  overflow-wrap: break-word;
+  height: calc(var(--button-size) * 4);
   flex: 1;
   width: 100%;
   overflow: visible;
   margin-inline: auto;
   padding: 0;
-  --button-size: 1.2rem;
-  --button-border: unset;
-  overflow-wrap: break-word;
-  height: calc(var(--button-size) * 4);
 }
 @media (min-width: 430px) {
   [pgs~=initP] [pgs~=search] {
@@ -6586,51 +6562,69 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=search]:has(input:focus-visible) {
   outline: var(--focus-visible);
 }
-[pgs~=initP] [pgs~=search]:not([pgs-state~=open]) > [pgs~=search-suggestions] {
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions] {
   display: none;
-}
-[pgs~=initP] [pgs~=search][pgs-state~=open] > [pgs~=search-suggestions] {
-  display: flex;
-}
-[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions] {
   position: absolute;
   inset: calc(100% + var(--search-suggestions-offset)) 0 auto;
   z-index: 1000;
   flex-direction: column;
   gap: var(--search-suggestions-gap);
-  max-height: var(--search-suggestions-max-height);
+  max-height: var(--search-suggestions-maxHeight);
   overflow-y: auto;
   padding: var(--search-suggestions-padding);
   margin: 0;
   list-style: none;
   border: var(--search-suggestions-border);
   border-radius: calc(var(--search-suggestions-borderRadius) + var(--search-suggestions-padding));
+  box-shadow: var(--search-suggestions-boxShadow);
   background: var(--search-suggestions-background);
   color: var(--search-suggestions-color);
-  box-shadow: var(--search-suggestions-box-shadow);
 }
-[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions] [pgs~=search-suggestions-item] {
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions] i {
+  color: var(--search-suggestions-color);
+  --fa-primary-color: var(--search-suggestions-color);
+  --fa-secondary-color: var(--search-suggestions-color);
+}
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions] [pgs~=search-suggestions-item] {
   padding: var(--search-suggestions-item-padding);
   border-radius: var(--search-suggestions-borderRadius);
   cursor: pointer;
   flex-wrap: nowrap;
 }
-[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions] [pgs~=search-suggestions-item][aria-selected=true], [pgs~=initP] [pgs~=search] > [pgs~=search-suggestions] [pgs~=search-suggestions-item]:hover {
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions] [pgs~=search-suggestions-item][aria-selected=true], [pgs~=initP] [pgs~=search] [pgs~=search-suggestions] [pgs~=search-suggestions-item]:hover {
   background: var(--search-suggestions-item-selected-background);
   color: var(--search-suggestions-item-selected-color);
 }
-[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions] [pgs~=search-suggestions-item][aria-disabled=true] {
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions] [pgs~=search-suggestions-item][aria-selected=true] i, [pgs~=initP] [pgs~=search] [pgs~=search-suggestions] [pgs~=search-suggestions-item]:hover i {
+  color: var(--search-suggestions-item-selected-color);
+  --fa-primary-color: var(--search-suggestions-item-selected-color);
+  --fa-secondary-color: var(--search-suggestions-item-selected-color);
+}
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions] [pgs~=search-suggestions-item][aria-disabled=true] {
   cursor: not-allowed;
   opacity: 0.5;
 }
-[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions]:has([pgs~=search-suggestions-item]:hover) [pgs~=search-suggestions-item][aria-selected=true] {
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions]:has([pgs~=search-suggestions-item]:hover) [pgs~=search-suggestions-item][aria-selected=true] {
   background: var(--search-suggestions-background);
   color: var(--search-suggestions-color);
 }
-[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions]:has([pgs~=search-suggestions-item]:hover) [pgs~=search-suggestions-item][aria-selected=true]:hover {
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions]:has([pgs~=search-suggestions-item]:hover) [pgs~=search-suggestions-item][aria-selected=true] i {
+  color: var(--search-suggestions-color);
+  --fa-primary-color: var(--search-suggestions-color);
+  --fa-secondary-color: var(--search-suggestions-color);
+}
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions]:has([pgs~=search-suggestions-item]:hover) [pgs~=search-suggestions-item][aria-selected=true]:hover {
   background: var(--search-suggestions-item-selected-background);
   color: var(--search-suggestions-item-selected-color);
 }
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions]:has([pgs~=search-suggestions-item]:hover) [pgs~=search-suggestions-item][aria-selected=true]:hover i {
+  color: var(--search-suggestions-item-selected-color);
+  --fa-primary-color: var(--search-suggestions-item-selected-color);
+  --fa-secondary-color: var(--search-suggestions-item-selected-color);
+}
+[pgs~=initP] [pgs~=search][pgs-state~=open] [pgs~=search-suggestions] {
+  display: flex;
+}
 [pgs~=initP] dialog [pgs~=search] {
   max-width: calc(100% - var(--padding-page) * 2);
   height: max-content;