mypgs 1.5.1 → 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,7 +23,8 @@
   --text-shadow: 0px 0px 50px #000000;
   --backdrop: #0000003e;
   --blur: blur(20px);
-  --page-top: 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;
@@ -36,7 +36,8 @@
   --fa-secondary-opacity: 1;
   --fa-size: inherit;
   --focus-visible: 3px solid var(--color-link);
-  --heightOfHeader: 13.3rem;
+  --heightOfHeader: 6.8rem;
+  --heightOfHeaderScroll: 6.8rem;
 }
 
 @media (max-width: 430px) {
@@ -48,7 +49,7 @@
   color-scheme: light;
 }
 
-:root[data-darkmode=true] {
+:root[pgs-state~=darkmode] {
   color-scheme: dark;
 }
 
@@ -62,10 +63,10 @@
   --color-white-transparent: color-mix(in srgb, var(--color-white) 50%, transparent 100%);
   --color-black-transparent: color-mix(in srgb, var(--color-black) 50%, transparent 100%);
   --color-text: light-dark(#4a4a4a, #e3e3e3);
-  --color-box: light-dark(#F8F8F8, #3A3A3A);
-  --color-boxDark: light-dark(#3A3A3A, #F8F8F8);
-  --color-box-transparent: light-dark(color-mix(in srgb, #eeeeee 50%, transparent 50%), color-mix(in srgb, #3A3A3A 50%, transparent 50%));
-  --color-boxDark-transparent: light-dark(color-mix(in srgb, #3A3A3A 50%, transparent 50%), color-mix(in srgb, #eeeeee 50%, transparent 50%));
+  --color-box: light-dark(#F8F8F8, #222121);
+  --color-boxDark: light-dark(#222121, #F8F8F8);
+  --color-box-transparent: light-dark(color-mix(in srgb, #eeeeee 50%, transparent 50%), color-mix(in srgb, #222121 50%, transparent 50%));
+  --color-boxDark-transparent: light-dark(color-mix(in srgb, #222121 50%, transparent 50%), color-mix(in srgb, #eeeeee 50%, transparent 50%));
   --color-linkBackgorud: light-dark(#a0dbff, #002a44);
   --color-background: light-dark(#ffffff, #080808);
   --color-whiteFixed: #FFFFFF;
@@ -105,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,
@@ -2137,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;
@@ -2148,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] {
@@ -2169,13 +2173,14 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   isolation: isolate;
   position: sticky;
   top: var(--pageShell-aside-sticky-top);
+  transition: top 0.3s ease;
   width: 100%;
   max-height: 100svh;
   overflow-y: auto;
   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));
@@ -2200,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 {
@@ -2227,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] {
@@ -2269,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;
   }
@@ -2312,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] {
@@ -5018,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 {
@@ -5044,9 +5049,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   row-gap: 1rem;
   flex-wrap: nowrap;
 }
-[pgs~=initP] [pgs~=menu] ul ul {
-  display: none;
-}
 [pgs~=initP] [pgs~=menu] ul > li > a {
   flex-grow: 1;
   min-width: fit-content;
@@ -5191,6 +5193,17 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=menu] ul > li li {
   width: -webkit-fill-available;
 }
+[pgs~=initP] [pgs~=menu] ul > li[pgs-state~=open] > ul {
+  display: flex;
+}
+[pgs~=initP] [pgs~=menu] ul ul {
+  display: none;
+  flex-direction: column;
+  gap: var(--gap-texts);
+  --dropdown-borderRadius: calc(var(--border-radius-input) + var(--dropdown-padding));
+  --dropdown-background: var(--color-box-transparent);
+  --dropdown-display: flex;
+}
 [pgs~=initP] [pgs~=menu] [pgs~=menu-buttonIcon] {
   --button-size: 0.9rem;
   margin-right: -15px;
@@ -5202,6 +5215,9 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   cursor: pointer;
   translate: -15px;
 }
+[pgs~=initP] [pgs~=menu] [pgs~=menu-buttonIcon][aria-expanded=true] {
+  --button-background: var(--color-primary);
+}
 [pgs~=initP] [pgs~=menu] [pgs~=menu-buttonIcon][aria-expanded=true] span {
   rotate: 180deg;
 }
@@ -5215,20 +5231,10 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   width: max-content;
 }
 [pgs~=initP] [pgs~=menu][pgs-option~=horizontal] > ul > li:has(ul) {
-  --dropdown-display: flex;
   display: flex;
   gap: 0.2rem;
   flex-wrap: nowrap;
 }
-[pgs~=initP] [pgs~=menu][pgs-option~=horizontal] > ul > li:has(ul) > a {
-  border-radius: var(--border-radius-input);
-}
-[pgs~=initP] [pgs~=menu][pgs-option~=horizontal] > ul > li:has(ul) ul li a {
-  min-width: 100% !important;
-}
-[pgs~=initP] [pgs~=menu][pgs-option~=horizontal] > ul > li:has(ul)[pgs-state~=open] > ul {
-  display: flex;
-}
 [pgs~=initP] [pgs~=menu] ul :is(ul), [pgs~=initP] [pgs~=menu][pgs-option~=vertical] :is(ul), [pgs~=initP] [pgs~=menu]:not([pgs-option~=horizontal]) :is(ul) {
   flex-direction: column;
 }
@@ -5247,9 +5253,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   align-items: center;
   position: relative;
 }
-[pgs~=initP] [pgs~=menu] ul :is(ul) > li:has(ul) > a, [pgs~=initP] [pgs~=menu][pgs-option~=vertical] :is(ul) > li:has(ul) > a, [pgs~=initP] [pgs~=menu]:not([pgs-option~=horizontal]) :is(ul) > li:has(ul) > a {
-  max-width: calc(100% - var(--gap-texts) - 40px);
-}
 [pgs~=initP] [pgs~=menu] ul :is(ul) > li:has(ul) > ul, [pgs~=initP] [pgs~=menu][pgs-option~=vertical] :is(ul) > li:has(ul) > ul, [pgs~=initP] [pgs~=menu]:not([pgs-option~=horizontal]) :is(ul) > li:has(ul) > ul {
   flex-basis: 100%;
 }
@@ -5614,6 +5617,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   --dropdown-background: var(--color-box);
   --dropdown-color: var(--color-black);
   --dropdown-border: var(--border-complete);
+  --dropdown-borderRadius: var(--dropdown-padding);
   --dropdown-padding: 1rem;
   --dropdown-inline-size: max-content;
   --dropdown-max-inline-size: min(400px, calc(100vw - 16px));
@@ -5637,7 +5641,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   overflow: auto;
   padding: var(--dropdown-padding);
   border: var(--dropdown-border);
-  border-radius: calc(var(--border-radius-input) + var(--dropdown-padding));
+  border-radius: var(--dropdown-borderRadius);
   background: var(--dropdown-background);
   color: var(--dropdown-color);
 }
@@ -5723,6 +5727,13 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] dialog:not(:has(> [pgs~=modal-close])) {
   padding-top: var(--padding-page);
 }
+[pgs~=initP] dialog[pgs~=modal-dialog][pgs-option~=topLevel] {
+  align-items: center;
+  padding-inline: 1rem;
+}
+[pgs~=initP] dialog[pgs~=modal-dialog][pgs-option~=topLevel] [pgs~=modal-dialog-content] {
+  width: min(600px, 100%);
+}
 [pgs~=initP] dialog[pgs~=modal-dialog][pgs-option~=left] [pgs~=modal-dialog-content] {
   margin-left: unset;
   margin-right: auto;
@@ -6337,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);
@@ -6348,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;
@@ -6374,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%;
@@ -6418,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);
@@ -6429,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;
@@ -6444,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;
@@ -6508,67 +6493,145 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=tooltip][pgs~=dropdown] [pgs~=tooltip-button][pgs~=dropdown-button] {
   --fa-size: .9rem;
 }
-[pgs~=initP] [pgs~=searchbar] {
+[pgs~=initP] [pgs~=search] {
+  --search-suggestions-background: var(--color-box);
+  --search-suggestions-color: var(--color-text);
+  --search-suggestions-border: var(--border-complete);
+  --search-suggestions-borderRadius: var(--border-radius-input);
+  --search-suggestions-boxShadow: var(--box-shadow);
+  --search-suggestions-gap: 0;
+  --search-suggestions-maxHeight: 32rem;
+  --search-suggestions-offset: .5rem;
+  --search-suggestions-padding: .5rem;
+  --search-suggestions-item-padding: 1rem;
+  --search-suggestions-item-selected-background: var(--color-primary);
+  --search-suggestions-item-selected-color: var(--color-whiteFixed);
   position: relative;
-  flex: 1;
-  width: 100%;
-  overflow: hidden;
-  margin-inline: auto;
+  display: flex;
+  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;
-  gap: 0;
 }
 @media (min-width: 430px) {
-  [pgs~=initP] [pgs~=searchbar] {
+  [pgs~=initP] [pgs~=search] {
     min-width: 21.4rem;
   }
 }
-[pgs~=initP] [pgs~=searchbar] button {
-  outline: none;
-  border: none;
-  background: none;
-  padding-left: var(--button-size);
-  aspect-ratio: 1;
+[pgs~=initP] [pgs~=search] button {
   height: 100%;
+  padding-left: var(--button-size);
+  border: none;
   border-radius: var(--border-radius-input);
+  outline: none;
+  background: none;
   cursor: pointer;
 }
-[pgs~=initP] [pgs~=searchbar] input {
-  cursor: text !important;
-  border: 0;
+[pgs~=initP] [pgs~=search] input {
+  width: 100%;
+  min-width: 21.4rem;
+  height: 100%;
   padding: var(--button-size);
+  padding-left: 0;
   margin: 2px;
   margin-left: 0;
-  font-family: var(--font);
-  font-weight: 600;
-  font-size: 1.6rem;
+  border: 0;
   border-radius: var(--border-radius-input);
-  height: 100%;
-  width: 100%;
-  min-width: 21.4rem;
   background-color: transparent;
   color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
+  font-family: var(--font);
+  font-size: 1.6rem;
+  font-weight: 600;
+  cursor: text !important;
 }
-[pgs~=initP] [pgs~=searchbar] input::placeholder {
+[pgs~=initP] [pgs~=search] input::placeholder {
   color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
   opacity: 0.6;
 }
-[pgs~=initP] [pgs~=searchbar] input:focus-visible {
+[pgs~=initP] [pgs~=search] input:focus-visible {
   outline: unset;
 }
-[pgs~=initP] [pgs~=searchbar]:has(input:focus-visible) {
+[pgs~=initP] [pgs~=search]:has(input:focus-visible) {
   outline: var(--focus-visible);
 }
-[pgs~=initP] dialog [pgs~=searchbar] {
-  margin-inline: auto;
+[pgs~=initP] [pgs~=search] [pgs~=search-suggestions] {
+  display: none;
+  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-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);
+}
+[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 {
+  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-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] {
+  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] 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;
+  margin-inline: auto;
   background-color: var(--color-white);
 }
-[pgs~=initP] dialog [pgs~=searchbar] input {
+[pgs~=initP] dialog [pgs~=search] input {
   padding-block: 20px;
 }
 [pgs~=initP] [pgs~=logo] {
@@ -6577,10 +6640,10 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   --logo-height: var(--header-size, 6.0rem);
   --logo-finter: invert(1) hue-rotate(180deg) brightness(1.5);
 }
-[pgs~=initP] [data-darkmode=true] [pgs~=logo-darkmode] [pgs~=logo-image] {
+[pgs~=initP] [pgs-state~=darkmode] [pgs~=logo][pgs-option~=logoDarkmode] [pgs~=logo-image] {
   filter: var(--logo-finter);
 }
-[pgs~=initP] [pgs~=logo][pgs~=logo-darkmodeFixed][pgs~=logo-darkmode] [pgs~=logo-image] {
+[pgs~=initP] [pgs~=logo][pgs-option~=logoDarkmodeFixed] [pgs~=logo-image] {
   filter: var(--logo-finter);
 }
 @media (max-width: 800px) {